Flash交互设计-09AS30动画编程

1、第9章 AS3.0动画编程 动画是Flash创作的基础，从最初的帧补间动画到现在的动画编程，Flash动画制作走出了一条非常圆满的道路。ActionScript 3.0的动画编程主要关注两方面的情形：一是通过改变显示对象的属性创建动画效果；二是利用Shape类的绘制类进行代码绘制，渲染效果。 ActionScript 3.0动画编程要涉及数学、物理学等方面的内容非常的多，也比较复杂。在本章先介绍两种基本的动画实现原理并创建简单的动画效果。对于数学和物理学的基础知识，则留到后面的章节具体详细的讲述。9.1 可视化动画编程简介动画是指控制显示对象随着时间不断的发生变化，这些变化可能是位置的变动，速

2、度的变化，外观形状的改变，颜色透明度的改变等等。总而言之，动画可以实现的形式是纷繁多样的。借用一句口语“只有想不到，没有做不到”，只要能够想到的效果，在Flash中都能够实现。最早版本的Flash中，使用逐帧动画和补间动画来实现动画效果，一个显示对象放于一个关键帧上，然后插入另一个关键帧，改变第二个关键帧中显示对象的显示属性，然后两帧之间通过差值计算形成完整的事件轴动画。可视化的动画编程，伴随ActionScript脚本语言的出现开始逐渐的兴起。从早期ActionScript中的“三帧法”动画编程，逐步发展到onClipEvent(enterframe)、onEnterFrame循环事件，Ac

3、tionScript动画编程中帧循环起着至关重要的作用。9.2 动画编程原理和所有的动画显示一样，Flash的动画原理也是通过不断的刷新屏幕，利用每次屏幕上显示对象位置的不同、大小色彩的变化等产生动画效果。动画编程的关键是一定要有变化，而且该变化需要在一定时间内来完成。Flash中使用帧频来控制每秒钟刷新屏幕的次数，通过使用的帧频的范围在1260帧每秒，推荐使用的是24帧每秒这样的一个速度。ActionScript 3.0的动画编程也是同样的原理，通过不断的刷新屏幕来实现动画效果。ActionScript 3.0的动画编程按照实现的方式可以分为两种：对显示对象的显示属性进行控制，调整每次刷新屏

4、幕时显示对象的显示属性实现动画效果，这种称为显示属性动画。利用绘制API在每帧中使用代码绘制不同的形状，从而产生的动画效果，这种称为代码绘制动画。通过编程实现刷新屏幕，ActionScript 3.0中提供了两种方式可供选择：帧循环更新：利用Flash本身的帧频速度，在每次刷新屏幕时改变显示对象。此方法需要使用事件侦听器侦听显示对象的Event.ENTER_FRAME事件。定时器更新：利用Timer类的定时更新功能，每隔一定的事件使显示对象改变一次。此方法需要使用事件侦听器侦听显示对象的TimerEvent.TIMER事件。9.3 代码绘制动画效果 代码绘制动画效果，就是每帧绘制的图形有所变化

5、，这样播放起来就形成了动画。绘制代码主要使用Graphics类的绘制API来进行绘制。 下面创建一个非常流行的电流动画效果。其实现原理为：首先在水平方向每隔3个像素进行绘制，而竖直方向的绘制点可以在一个位置附近随机变化，这样形成一条随机弯曲的线条；然后使用帧循环事件，每帧重新绘制一次，实现线条的随机变化，进而实现最终的电流效果。9.4 改变对象属性 本节将通过改变舞台的显示属性来实现一系列的动画效果。这些效果大体分为两部分：一部分是与运动相关的动画，主要是通过修改显示对象的坐标来实现。此部分将会介绍一些物理运动学的基础知识。另一部分通过改变显示对象的缩放属性、旋转属性和透明度属性，实现显示和形

6、状动画9.4.1 移动物体要实现移动舞台的效果，只需改变坐标属性即可。修改横坐标可以实现水平运动的效果，修改纵坐标可以实现竖直运动的效果。在物理学中，物体运动的快慢是用速度来描述的。速度反映了物体在单位时间内发生的位移的大小。对于匀速运动的物体，位移的大小等于速度乘以时间。在Flash中，实现物体的运动，运算的原理是：确定速度大小，帧循环刷新时原来的位置坐标加上速度的值。原理主要公式如下：var _vx:Number=水平速度值var _vy:Number=竖直速度值显示对象.x+=vx显示对象.y+=vy9.4.2 加速运动的物体 在物理学中，物体运动的快慢是用速度来描述的，而速度变化的快慢

7、是用加速度来描述的。加速度反映了物体在单位时间内速度变化的快慢。 加速度和速度关系的公式为： v=v+a vx+=ax vy+=ay9.4.3 减速运动的物体 物理学中，简单的减速运动和加速运动一样，利用加速度的值来改变速度的值，进而实现物体的位置变化。但加速运动加速度为正值，减速运动的加速度为负值。当然，也可以通过速度减去一个正的加速度实现减速运动的效果。 减速运动中加速度（此处按照加速度为正值）和速度关系的公式为： v=v-a vx-=ax vy-=ay9.4.4 鼠标跟随缓动效果在Flash中最常见的缓动效果，就是一个显示对象先快后慢，逐渐的移动到目的地。这也是一个减速运动的过程，不过运

8、动过程中的加速度会发生改变。二次缓动是最常用的，通过每次前进当前位置和目标位置之间距离的二分之一，如此重复的操作，知道最后无限的接近目标点。但是这样永远无法实现达到目标点，所以一般控制当前位置和目标位置之间的距离小于1象素时，可以近似认为已经达到了目标点。二次缓动的计算公式为：dx=目标位置.x-当前位置.xdy=目标位置.y-当前位置.yvx=(dx)/2vy=(dy)/29.4.5 利用三角函数实现运动效果数学中三角函数的正弦和余弦函数是对物体的运动非常有用的函数。这两个函数都具有周期性，其值范围为-11，而且由于周期性，其值能够在-11之间循环变化。利用这些特点，可以实现显示对象周期性的

9、往复运动效果。关于三角函数的知识请参见数学和数字一章的内容。下面的示例利用正弦三角函数实现小球在平衡位置附近的往复运动。其实现流程为：创建一个小球加入场景创建帧循环事件处理函数利用帧循环事件，实现小球的运动。使用文档类：MoveSin，9.4.6 缩放动画效果 要实现缩放效果，只需实现不断修改显示对象的缩放属性scaleX和scaleY即可。 下面的示例通过修改矩形的scaleY属性，实现矩形缩放效果。其实现流程为：创建一个小球加入场景创建帧循环事件处理函数，实现缩放操作利用帧循环事件，实现小球的缩放。使用文档类：Scale，9.4.7 旋转动画效果 要实现旋转一个显示对象的动画效果，只需要修

10、改rotation属性即可。 下面的示例用一个箭头来实现鼠标跟随效果，跟随鼠标的箭头的指向会随着鼠标位置的变化而发生旋转。其实现流程为：创建一个小球加入场景创建帧循环事件处理函数，实现旋转效果利用帧循环事件，实现小球的旋转。使用文档类：Rotation，9.4.8 淡入淡出动画效果淡入淡出效果也是Flash动画制作中最常用的一种技术，此技术的实现是通过改变显示对象的透明度alpha属性实现的。下面的示例实现小球的淡入淡出效果。创建一个小球加入场景创建帧循环事件处理函数，实现显示对象透明度先逐渐增加，当透明度为1时逐渐减少，减少到1时再逐渐增加，通过循环实现淡入淡出效果利用帧循环事件，实现小球的

11、淡入淡出。使用文档类：Alpha，9.5 借助Timer类实现动画效果使用Timer类产生的动画效果和使用帧循环ENTER_FRAME事件产生动画的原理一样，都是通过间隔一定的时间进行一次刷屏来实现动画效果。上一节中使用帧循环事件创建的一切动画，都可以是Timer类的事件来实现。要注意Timer类的TimerEvent.TIMER事件，可能与Flash的刷屏不同步，会产生延迟现象。所以在使用的时候，需要使用updateAfterEvent()方法强制更新屏幕。使用Timer类实现动画还有几个好处：可以利用Timer.stop()方法控制动画的播放与停止；可以在构建Timer对象时控制动画的刷新

12、次数，实现预期动画效果；可以利用TimerEvent.TIMER_COMPLETE事件，在停止播放时侦听，从事开始新的动作。9.6 Tween类创建动画效果 在ActionScript 2.0中内建的Tween类都被转移到了ActionScript 3.0的fl. transitions包中，用于实现运动、变形等动画效果。本节主要介绍常用的运动、变形Tween类。9.6.1 Tween类应用基础在ActionScript 3.0中，使用Tween类，可以通过指定操作目标的影片剪辑属性在一定的帧数或者时间内创建动画效果，进而实现影片剪辑的运动动画，缩放动画，淡入淡出动画等显示效果。在Tween类

13、中还可以指定缓动方法，从而实现非线形变化效果。“缓动”是指动画在运行期间的速度非线形变化，使动画显得更加的形象逼真。Tween类中的缓动方法位于fl.transitions.easing包中，该包提供了多种缓动方法供用户使用。要利用Tween类创建动画效果，需要先创建一个Tween对象，使用该对象来指定要控制的显示对象的属性要发生什么样的变化。创建Tween类对象的方法如下所示。Tween(目标对象,目标对象的属性,缓动方式,初始值,结束值,动画持续时间,记时方式);9.6.2 运动折返效果 返回类实现的动画是在动画执行的开始端、结束端或者两端兼有回返动作，用以模拟溢出动画效果。执行动画的方法

14、取决于三个缓动函数： easeIn：在动画开始时往后运动，然后反向朝目标移动。 easeOut：在动画结束时稍微冲过结束点，然后倒转方向回来朝着目标。 easeInOut：在动画开始时先向后运动，再倒转方向并朝目标移动，结束时冲过目标，然后再倒转方向，朝目标移动。9.6.3 运动回弹效果回弹类实现的动画是在动画的起始端，结束端或者两端兼有执行回弹动画效果。具体在何端回弹同样取决于三个缓动函数。回弹的次数取决于动画持续的时间，持续的时间越长，回弹的次数越多。此效果可以实现舞台中小球跳动的动画效果。Bounce类的三个回弹函数效果：easeIn：在动画开始时以较慢速度开始回弹运动，然后再执行时加快

15、运动速度。easeOut：在动画结束时以较快速度开始回弹运动，然后再执行时减慢运动速度。easeInOut：在动画开始时缓慢地开始跳动，进行加速运动，最后进行减速。9.6.4 正弦弹性效果Elastic类实现的动画是在动画的起始端，结束端或者两端兼有执行弹性动画效果，运动方式按照正弦波逐渐衰减进行。具体在何端回弹同样取决于三个缓动函数。回弹的次数不受动画持续的时间影响。此效果也可以实现舞台中小球跳动的动画效果。Elastic类的三个回弹函数效果，此类和Bounce基本类似，区别在与弹性采用正弦方式：easeIn：在动画开始时以较慢速度开始回弹运动，然后再执行时加快运动速度。easeOut：在动

16、画结束时以较快速度开始回弹运动，然后再执行时减慢运动速度。easeInOut：在动画开始时缓慢地开始跳动，进行加速运动，最后进行减速。9.6.5 Regular和Strong运动效果 Regular类实现的动画是加速运动、减速运动和先加速后减速的动画效果。具体在方式同样取决于三个缓动函数。 Regular类的三个回弹函数效果： easeIn：在动画开始时做初速度为零的加速运动。 easeOut：动画执行匀减速运动，末速度为零。 easeInOut：在动画开始时做初速度为零的加速运动，然后做减速运动，直到速度为零。9.6.6线性运动效果 None类实现的是一种线形运动的效果，显示对象一直做运动运

17、动。其方法函数有四种easeIn()、easeOut()、easeInOut()和easeNone()，这四种方法实现的是相同的效果，在执行时都是匀速直线运动。使用时可以任意选择。9.7 TransitionManger创建动画效果 在ActionScript 2.0中内建的TransitionManger类也被转移到了ActionScript 3.0的fl. transitions包中，用于实现页面切换动画效果。本节主要介绍常用的TransitionManger类。9.7.1 TransitionManger用法基础TransitionManger类管理了一系列的过渡动画效果。通过使用这些效

18、果，可以很方便的实现页面之间的切换操作。TransitionManger类提供了10中不同的切换效果，把这些切换效果应用于影片剪辑，就能实现很漂亮的过渡效果。这些类同样位于fl.transitions包中。要使用TransitionManger类实现过渡动画效果，需要先创建该类的实例。ActionScript 3.0中创建改类的实例的方法有两种。TransitionManager.start()方法，用法格式如下所示。TransitionManager.start(目标影片,过渡对象参数);目标影片：指过渡效果作用的影片。注意，只能时影片剪辑实例。过渡对象参数：对象，包含所有的过渡参数的集合。

19、对象应包含type参数，该参数指示要应用的过渡效果类。此外，还必须包括该过渡效果类所必需的任何参数。9.7.2 遮帘过渡Blinds效果此过渡实现影片剪辑逐渐消失或逐渐出现的矩形来显示的过渡动画效果，类似于百叶窗效果。该过渡对象参数为：type:Blinds, direction:Transition.IN,duration:2,easing:None.easeNone,numStrips:10,dimension:0;参数说明：type：指明采用10种过渡效果中的那一种，所有的过渡效果共有参数。direction：有两种形式Transition.IN和Transition.OUT，指明过渡动

20、画的方向，共有参数。duration：过渡动画持续时间，共有参数。easing：过渡动画补间效果，fl.transitions或fl.transitions.easing 包中的一种效果，共有参数。numStrips：“遮帘”效果中的遮罩条纹数，推荐在150之间，独有参数。dimension：指明遮罩条纹是垂直的(0)还是水平的(1)，独有参数。9.7.3 淡化过渡Fade效果此过渡实现影片剪辑淡入淡出的动画效果。该过渡对象参数为：type:Fade, direction:Transition.IN, duration:9, easing:Strong.easeOut说明：此效果只使用共有参数

21、，不需要其它参数。下面的示例在Flash CS3中使用导入一副图片，然后放入影片剪辑中，放入舞台，命名为mc，下面的代码控制mc实现淡入淡出动画效果。打开动作面板，输入下面的代码：import fl.transitions.*;import fl.transitions.easing.*;TransitionManager.start(mc, type:Fade, direction:Transition.IN, duration:20, easing:Strong.easeOut);9.7.4 飞行过渡Fly效果此过渡实现影片剪辑从指定方向飞入的动画效果。该过渡对象的对象参数为：type:F

22、ly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:9参数说明：startPoint：指明起始位置的整数，范围19，分别为：左上：1、上中：2、右上：3、左中：4、中心：5、右中：6、左下：7、下中：8、右下：9。独有参数。下面的示例在Flash CS3中使用导入一副图片，然后放入影片剪辑中，放入舞台，命名为mc，下面的代码控制mc实现飞行过渡动画效果。打开动作面板，输入下面的代码：import fl.transitions.*;import fl.transitions.easing.*;Tr

23、ansitionManager.start(mc, type:Fly, direction:Transition.IN, duration:20, easing:Strong.easeOut,startPoint:9); 9.7.5 光圈过渡Iris效果此过渡实现影片剪辑以缩放的方形或圆形动画遮罩来显示动画效果。该过渡对象参数为：type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE参数说明：startPoint：指明起始位置的整数；范围19，分

24、别为：左上：1、上中：2、右上：3、左中：4、中心：5、右中：6、左下：7、下中：8、右下：9。shape：有两种，为fl.transitions.Iris.SQUARE（方形）和fl.transitions.Iris.CIRCLE（圆形）的遮罩形状。9.7.6 照片过渡Photo效果此过渡实现影片剪辑对象像放映照片一样出现或消失的效果。该过渡对象参数为：type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone说明：此效果只使用共有参数，不需要其它参数。下面的示例在Flash CS3中使用导入一副图片，然后放入影

25、片剪辑中，放入舞台，命名为mc，下面的代码控制mc实现照片过渡动画效果。打开动作面板，输入下面的代码：import fl.transitions.*;import fl.transitions.easing.*;TransitionManager.start(mc, type:Photo, direction:Transition.IN, duration:10, easing:None.easeNone);9.7.7 像素溶解过渡PixelDissolve效果此过渡使用随机出现或消失的棋盘图案矩形来显示或隐藏影片剪辑对象。该过渡对象参数为：type:PixelDissolve, direct

26、ion:Transition.IN, duration:2, easing:Regular.easeIn, xSections:10, ySections:10参数说明：xSections：指明沿水平轴的遮罩矩形部分的数目。推荐的范围150。ySections：指明沿垂直轴的遮罩矩形部分的数目。推荐的范围150。下面的示例在Flash CS3中使用导入一副图片，然后放入影片剪辑中，放入舞台，命名为mc，下面的代码控制mc实现像素溶解动画效果。打开动作面板，输入下面的代码：import fl.transitions.*;import fl.transitions.easing.*;Transit

27、ionManager.start(mc, type:PixelDissolve, direction:Transition.IN, duration:10, easing:Regular.easeIn, xSections:30, ySections:30);9.7.8 旋转过渡Rotate效果 此过渡实现影片剪辑旋转动画效果。该过渡对象参数为： type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720 参数说明： ccw：Boolean值：false表示顺时针旋转；true表示逆时针旋转。 degrees：指明显示对象要旋转的度数。推荐范围19999。旋转一周为360度。9.7.9 挤压过渡Squeeze效果此过渡实现水平或垂直缩放影片剪辑对象。过渡对象参数为：type:Squeeze, direction:Transition.IN, duration:2, easing:E