AnimateCC二维动画设计与制作-第六单元：交互动画制作.pptx

1、二维动画设计与制作二维动画设计与制作第六单元：交互动画制作项目五：小游戏制作6.1 平台、文档与脚本类型6.2代码片段的使用6.3对象的属性6.4使用animate脚本编写动画二维动画设计与制作6.1：平台、文档与脚本类型一、不同平台与文档、脚本因为Animate CC可以创建跨平台的影片和应用，所以在创建文档的时候，需要选择某种文档类型，不同类型的文档使用的编辑脚本也不一样。1.ActionScript 3.0平台与脚本ActionScript 3.0平台是面向PC端的创作平台，在此平台下主要发布传统的SWF动画，使用FlashPlayer播放器播放。该平台使用的是ActionScript

2、3.0脚本。2二维动画设计与制作6.1：平台、文档与脚本类型一、不同平台与文档、脚本2.HTML5 Canvas平台与脚本HTML5 Canvas文档是Aniamte CC支持互联网，特别是移动互联网环境的一种文档类型。HTML5是目前非常火爆的新一代超文本标记语言，Canvas 是 HTML5 中的一个新元素，它提供了多个 API，可以动态生成及渲染图形、图表、图像及动画，因此它对创建丰富的交互性 HTML5 内容提供本地支持。这样我们可以使用传统的Animate 时间轴、工作区及工具来创建内容，然后Animate会自动通过CreateJS生成 HTML5 网页输出。3二维动画设计与制作6.

3、1：平台、文档与脚本类型二、Animate脚本简介1.ActionScript 3.0ActionScript（简称AS）是Animate前身Flash所使用的脚本语言，在Animate中依然可以使用（在as3文档类型下）。它可以向应用程序添加复杂的交互性、播放控制和数据显示，其语法特点与javascript相似。2.CreateJS脚本CreateJS即CreateJS库，属于javascrpit库的一种，是一款主要为HTML5游戏开发的引擎。4二维动画设计与制作6.1：平台、文档与脚本类型二、Animate脚本简介其它语言程序一样，animate的脚本包括有函数、方法、属性、事件、类和语法

4、。3.脚本演示：用键盘移动的气球4.一些术语：（1）实例名称：可以给舞台上的影片剪辑和按钮命名，但图形元件不可以命名。（2）属性：即舞台上对象的属性，如坐标位置、大小等。（3）值（4）变量（变量名区分大小写）（5）事件：具体发生的一个操作，如鼠标被按下、键盘被按下、剪辑被载入等。脚本由事件触发，然后影片就可以对许多事件做出反应。5二维动画设计与制作6.1：平台、文档与脚本类型二、Animate脚本简介（6）操作符：=、+、-、*、/等（7）关键字：语法中具有特殊用途的保留字词，它们不能用于变量、函数或标签名称。（8）变量与常量（9）括号：大括号之间的内容可能是一组操作，小括号中的内容一般是一个

5、值。（10）分号：语句之间用分号隔开（11）点：一是用来表示到达指定时间轴的目标路径，二是用来分隔对象名称与其属性或要调用的方法（12）引号：一般用来表示字符串6二维动画设计与制作6.1：平台、文档与脚本类型二、Animate脚本简介（13）注释：用/表示单行注释，/*.*/表示中间的内容都为注释（14）帧标签三、Animate动作面板介绍7二维动画设计与制作6.1：平台、文档与脚本类型四、使用代码片段添加AS（按键盘移动小汽球）1.给对象添加实例名称2.给对象添加代码片段3.修改代码片段4.设置变量记录移动速度5.通过两个按钮增加或减少速度6.通过输入框和按钮来改变速度7.控制气球的移动范围

6、五、使用代码片段添加HTML5脚本8二维动画设计与制作二维动画设计与制作第六单元：交互动画制作6.2动作面板的使用二维动画设计与制作6.2：动作面板的使用一、动作面板的结构动作面板包含以下两个窗格。左侧窗格为“脚本导航器”右侧窗格为“脚本”窗格10二维动画设计与制作6.2：动作面板的使用二、代码注释代码注释是代码中被脚本编译器忽略的部分。代码注释可解释代码的操作，让代码看上去更易理解，也可以暂时停用不想删除的代码。代码注释有两种形式，即注释行与注释块。注释行：通过在代码行的开头加上双斜杠“/”可对其进行注释。注释块：可以对若干行代码进行注释，在代码块的开头加上一个斜杠和一个星号“/*”，并在代

7、码块的结尾加上一个星号和一个斜杠“*/”11二维动画设计与制作6.2：动作面板的使用二、代码注释取消注释：将光标置于含有注释的代码行中，或者选择已注释的代码块，单击鼠标右键，在弹出的快捷菜单中选择“取消注释”，或使用快捷键Ctrl+Shift+M组合键即可取消注释所选内容。12二维动画设计与制作6.2：动作面板的使用三、使用动作码向导动作码向导是Aniamte CC新增加的功能，通过使用“动作”面板中的“使用向导添加”选项，不需要手动输入代码就可以将交互功能添加到 HTML5 组件中。要注意的是只有HTML5 Canvas文档才支持动作码向导。13二维动画设计与制作二维动画设计与制作第六单元：

8、交互动画制作6.3代码片段的使用二维动画设计与制作6.3：代码片段的使用一、概念与类型“代码片段”是Animate CC预置的一些功能代码，它允许用户直接在脚本窗口添加大量模块化的脚本代码，而不需要任何JavaScript 或 ActionScript 3.0 方面的知识，从而使得非编程人员能够轻松地为影片添加交互功能。代码片段主要有3类，分别是ActionScript类、HTML5 Canvas类和WebGL类，对应于3种不同的文档类型，即每种文档类型只能使用对应的代码片段。每种类型下面又根据不同的代码功能进行了分类，15二维动画设计与制作6.3：代码片段的使用二、使用代码片段使用“代码片段

9、”前，建议首先要对舞台上具有交互功能的元件实例命名，如按钮、影片剪辑实例等，必须要有实例名称才能在脚本中调用。其次，因为代码只能放置在关键帧中，为了便于脚本的管理，建议专门建立一个“Actions”图层放置脚本。如果没有建立，Animate CC会在插入代码片段时自动在其他图层之上添加一个“Actions”图层。16二维动画设计与制作6.3：代码片段的使用二、使用代码片段基本步骤：1.选择舞台上的元件实例或时间轴中的帧。2.在“代码片段”面板中，找到要应用的代码片段，将代码添加到关键帧上。添加方法有3种：（1）双击该代码片段（2）单击“添加到当前帧”按钮（3）单击“复制到剪贴板”按钮，然后在动

10、作面板脚本窗格粘贴该代码片段（4）替换与修改添加的代码17二维动画设计与制作6.3：代码片段的使用三、AS动作1.单击转到web页（超链接）navigateToURL(new URLRequest(http:/)。可以通过声明一个变量来保存URL地址，如：18二维动画设计与制作6.3：代码片段的使用关键字解读：URLRequest：网址请求类；new URLRequest（）:一个新的网址请求；addEventListener（）：添加事件帧听器；MouseEvent.CLICK：鼠标点击事件；function：定义一个方法；navigateToURL（）：导航网址的函数；19二维动画设计与制

11、作6.3：代码片段的使用2.自定义鼠标光标20关键字解读：stage：舞台对象；addChild（）：添加子对象（实例）到舞台Event.ENTER_FRAME：载入帧的事件；stage.mouseX：鼠标X坐标；stage.mouseY：鼠标Y坐标；Mouse.hide（）：隐藏鼠标；二维动画设计与制作6.3：代码片段的使用3.拖放21关键字解读：MouseEvent.MOUSE_DOWN：鼠标按下事件；MouseEvent.MOUSE_UP：鼠标松开事件；startDrag（）：开始拖放；stopDrag（）：停止拖放；二维动画设计与制作6.3：代码片段的使用4.播放与停止影片剪辑22关键

12、字解读：play（）：从当前帧播放；stop（）：在当前帧停止；mc.play（）：播放mc实例；mc.stop（）：停止mc实例；二维动画设计与制作6.3：代码片段的使用5.显示与隐藏对象23boy_mc.visible=false;boy_mc.visible=true;关键字：visible，对象的可视性属性。练习：通过按钮控制影片剪辑的播放、停止、显示与隐藏。二维动画设计与制作6.3：代码片段的使用6.单击以定位（X Y坐标属性）24通过单击某个对象，设置对象的x y 坐标。关键字：x,y,对象的坐标属性。练习：通过按钮让气球回到原点。二维动画设计与制作6.3：代码片段的使用7.生成随

13、机数25关键字：Math.floor（）：返回小于或等于一个给定数字的最大整数。Math.random（）：返回值 0.0 1.0 之间的一个随机数。练习：制作一个简单的抽奖器二维动画设计与制作6.3：代码片段的使用7.生成随机数26关键字：removeEventListener（）：移除帧听器；int（）：向下取整为最接近的整数；String（）：将参数转换为字符串；.text：文本框的文本属性。二维动画设计与制作6.3：代码片段的使用8.定时器27var mytime:Timer=new Timer(1000,60);/间隔一秒，执行60次，第二个参数不写的话，表示一直执行；mytime.

14、addEventListener(TimerEvent.TIMER,settimers);/添加监听时间 每次执行都运行的函数mytime.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);/60次执行完成后，执行的函数mytime.start();/启动定时器二维动画设计与制作6.3：代码片段的使用8.定时器28二维动画设计与制作6.3：代码片段的使用四、时间轴导航1.在此帧处停止或播放stop（）;play（）;以上两函数无参数。29二维动画设计与制作6.3：代码片段的使用四、时间轴导航2.单击以转到帧并停止或播放got

15、oAndStop（参数）;gotoAndPlay（参数）;此函数的参数为为所转到的帧，可以是帧的编号，或者帧的标签，如：gotoAndStop(5)；跳到第5帧并停止；gotoAndPlay(“start”)；跳到标签为”start”的帧并开始播放；30二维动画设计与制作6.3：代码片段的使用四、时间轴导航3.转到下一帧并停止nextFrame();4.转到前一帧并停止prevFrame();以上两函数无参数。5.转到下一场景并播放MovieClip(this.root).nextScene();或直接写nextScene();6.转到前一场景并播放MovieClip(this.root).p

16、revScene();或直接写prevScene();31二维动画设计与制作6.3：代码片段的使用四、时间轴导航7.跳转到场景并播放gotoAndPlay(5,“scene1”)参数分别是所转到的帧和场景，scene1是场景名称。上面一句的意思是跳到scene1场景的第5帧播放。补充：关于场景。8.练习：制作时尚画册要点：用一个变量记录当前的帧，每按一次下一张，变量加1，按一次上一张，变量减1，并判断是否到了第1帧或最后1帧。32二维动画设计与制作6.3：代码片段的使用五、动画1.用键盘箭头移动逻辑解读2.水平移动和垂直移动即改变对象x和y坐标。如：mymc.x+=100;mymc.y+=10

17、0;3.旋转一次与不断旋转mymc.rotation+=45;即改变对象的角度。关键字：rotation，即对象的旋转角度属性。不断旋转可利用Event.ENTER_FRAME事件或定时器。33二维动画设计与制作6.3：代码片段的使用五、动画4.水平动画移动与垂直动画移动即不断改变x和y坐标的值，可利用Event.ENTER_FRAME事件或定时器。如以下代码，即让mymc实例不断向右移动，每1/24秒移动10像素。34二维动画设计与制作6.3：代码片段的使用五、动画5.淡入和淡出影片剪辑即不断对象的透明度alpha，淡入则alpha越来越大，淡出则alpha越来越小。如下图为淡入。关键字：a

18、lpha，即对象的透明度属性，范围为01。35二维动画设计与制作6.3：代码片段的使用五、动画6.对象的属性和属性值（1）常用属性及其取值范围。36属性属性描述描述取值范围取值范围x x水平位置无穷y y垂直位置无穷rotationrotation旋转无穷alphaalpha透明度0-1,1表示100%scaleXscaleX水平缩放无穷,1表示100%scaleYscaleY垂直缩放无穷,1表示100%widthwidth对象宽度无穷heightheight对象高度无穷stage.stageWidthstage.stageWidth舞台宽度 stage.stageHeightstage.st

19、ageHeight舞台高度 visiblevisible可见性true或false二维动画设计与制作6.3：代码片段的使用五、动画6.对象的属性和属性值（2）给对象的属性赋值（3）增加或减少属性值（4）使用ENTER_FRAME事件修改影片剪辑属性，如：addEventListener(Event.ENTER_FRAME,xxx)37二维动画设计与制作6.3：代码片段的使用五、动画7.Tween类Tween是AS3中的一种缓动类，可以非常方便地为对象添加缓动效果。Tween类包含6种类型：Back、Bounce、Elastic、None、Regular、Strong。每种类型包含三个方法，分别

20、是：easeIn、easeInOut和easeOut。其中None类型还包含一种easeNone方法。各种方法的运动类型也有不同。38二维动画设计与制作6.3：代码片段的使用五、动画7.Tween类39类型easeIn()方法easeInOut()方法easeOut()方法Back开始时往后运动，然后反向朝目标移动。开始运动时是向后跟踪，再倒转方向并朝目标移动，稍微过冲目标，然后再次倒转方向，回来朝目标移动。开始运动时是朝目标移动，稍微过冲，再倒转方向回来朝着目标。Bounce以较慢速度开始回弹运动，然后在执行时加快运动速度。缓慢地开始跳动，进行加速运动，再进行减速。以较快速度开始回弹运动，然

21、后在执行时减慢运动速度。Elastic以较慢速度开始运动，然后在执行时加快运动速度。缓慢地开始运动，进行加速运动，再进行减速。以较快速度开始运动，然后在执行时减慢运动速度。None一种没有加速的持续运动。同左同左Regular以零速率开始运动，然后在执行时加快运动速度。开始运动时速率为零，先对运动进行加速，再减速直到速率为零。以较快速度开始运动，然后在执行时减慢运动速度，直至速率为零。Strong以零速率开始运动，然后在执行时加快运动速度。开始运动时速率为零，先对运动进行加速，再减速直到速率为零。以较快速度开始运动，然后在执行时减慢运动速度，直至速率为零。二维动画设计与制作6.3：代码片段的使

22、用五、动画7.Tween类Tween类的语法是：var mytween:Tween=new Tween(object,property,function,begin,end,duration,useSeconds);参数解释如下:object:一个您想要增加Tween动作的mc实例名.property:该mc的一个属性,即为将要添加Tween动作的属性，如”_x”,”rotation”,需用双引号.function:easing类的一个方法，即前面表格提到的6*3种，如Elastic.easeInOut()begin:属性开始时的数值.end:属性结束时的数值.duration:动作持续的帧数/时间.useSeconds:一个布尔值,决定是使用帧数计时(为false)还是秒数计时(为true).默认为false.40二维动画设计与制作6.3：代码片段的使用五、动画7.Tween类一条Tween类的用法例子如下：var mytween:Tween=new Tween(mymc,rotation,Elastic.easeOut,0,360,5,true);41二维动画设计与制作6.3：代码片段的使用五、动画8.练习使用Tween类结合对象属性的应用，制作乐器选择与运动的动画，效果见案例。42