AS3[1].0动画编程.ppt

第9章 AS3.0动画编程 动画是Flash创作的基础，从最初的帧补间动画到 现在的动画编程，Flash动画制作走出了一条非常 圆满的道路。ActionScript 3.0的动画编程主要 关注两方面的情形：一是通过改变显示对象的属 性创建动画效果；二是利用Shape类的绘制类进行 代码绘制，渲染效果。 ActionScript 3.0动画编程要涉及数学、物理学 等方面的内容非常的多，也比较复杂。在本章先 介绍两种基本的动画实现原理并创建简单的动画 效果。对于数学和物理学的基础知识，则留到后 面的章节具体详细的讲述。 9.1 可视化动画编程简介 动画是指控制显示对象随着时间不断的发生变化，这些变 化可能是位置的变动，速度的变化，外观形状的改变，颜 色透明度的改变等等。总而言之，动画可以实现的形式是 纷繁多样的。借用一句口语“只有想不到，没有做不到” ，只要能够想到的效果，在Flash中都能够实现。 最早版本的Flash中，使用逐帧动画和补间动画来实现动画 效果，一个显示对象放于一个关键帧上，然后插入另一个 关键帧，改变第二个关键帧中显示对象的显示属性，然后 两帧之间通过差值计算形成完整的事件轴动画。 可视化的动画编程，伴随ActionScript脚本语言的出现开 始逐渐的兴起。从早期ActionScript中的“三帧法”动画 编程，逐步发展到onClipEvent(enterframe)、 onEnterFrame循环事件，ActionScript动画编程中帧循环 起着至关重要的作用。 9.2 动画编程原理 和所有的动画显示一样，Flash的动画原理也是通过不断的刷新屏幕，利用每次屏幕 上显示对象位置的不同、大小色彩的变化等产生动画效果。动画编程的关键是一定要 有变化，而且该变化需要在一定时间内来完成。Flash中使用帧频来控制每秒钟刷新 屏幕的次数，通过使用的帧频的范围在1260帧每秒，推荐使用的是24帧每秒这样的 一个速度。 ActionScript 3.0的动画编程也是同样的原理，通过不断的刷新屏幕来实现动画效果 。 ActionScript 3.0的动画编程按照实现的方式可以分为两种： 对显示对象的显示属性进行控制，调整每次刷新屏幕时显示对象的显示属性实现动画 效果，这种称为显示属性动画。 利用绘制API在每帧中使用代码绘制不同的形状，从而产生的动画效果，这种称为代 码绘制动画。 通过编程实现刷新屏幕，ActionScript 3.0中提供了两种方式可供选择： 帧循环更新：利用Flash本身的帧频速度，在每次刷新屏幕时改变显示对象。此方法 需要使用事件侦听器侦听显示对象的Event.ENTER_FRAME事件。 定时器更新：利用Timer类的定时更新功能，每隔一定的事件使显示对象改变一次。 此方法需要使用事件侦听器侦听显示对象的TimerEvent.TIMER事件。 9.3 代码绘制动画效果 代码绘制动画效果，就是每帧绘制的图形有所变化，这样 播放起来就形成了动画。绘制代码主要使用Graphics类的 绘制API来进行绘制。 下面创建一个非常流行的电流动画效果。其实现原理为： 首先在水平方向每隔3个像素进行绘制，而竖直方向的绘制 点可以在一个位置附近随机变化，这样形成一条随机弯曲 的线条；然后使用帧循环事件，每帧重新绘制一次，实现 线条的随机变化，进而实现最终的电流效果。 9.4 改变对象属性 本节将通过改变舞台的显示属性来实现一系列的 动画效果。这些效果大体分为两部分：一部分是 与运动相关的动画，主要是通过修改显示对象的 坐标来实现。此部分将会介绍一些物理运动学的 基础知识。另一部分通过改变显示对象的缩放属 性、旋转属性和透明度属性，实现显示和形状动 画 9.4.1 移动物体 要实现移动舞台的效果，只需改变坐标属性即可。修改横 坐标可以实现水平运动的效果，修改纵坐标可以实现竖直 运动的效果。 在物理学中，物体运动的快慢是用速度来描述的。速度反 映了物体在单位时间内发生的位移的大小。对于匀速运动 的物体，位移的大小等于速度乘以时间。 在Flash中，实现物体的运动，运算的原理是：确定速度大 小，帧循环刷新时原来的位置坐标加上速度的值。 原理主要公式如下： var _vx:Number=水平速度值 var _vy:Number=竖直速度值 显示对象.x+=vx 显示对象.y+=vy 9.4.2 加速运动的物体 在物理学中，物体运动的快慢是用速度来描述的 ，而速度变化的快慢是用加速度来描述的。加速 度反映了物体在单位时间内速度变化的快慢。 加速度和速度关系的公式为： v=v+a vx+=ax vy+=ay 9.4.3 减速运动的物体 物理学中，简单的减速运动和加速运动一样，利 用加速度的值来改变速度的值，进而实现物体的 位置变化。但加速运动加速度为正值，减速运动 的加速度为负值。当然，也可以通过速度减去一 个正的加速度实现减速运动的效果。 减速运动中加速度（此处按照加速度为正值）和 速度关系的公式为： v=v-a vx-=ax vy-=ay 9.4.4 鼠标跟随缓动效果 在Flash中最常见的缓动效果，就是一个显示对象先快后慢，逐渐 的移动到目的地。这也是一个减速运动的过程，不过运动过程中 的加速度会发生改变。 二次缓动是最常用的，通过每次前进当前位置和目标位置之间距 离的二分之一，如此重复的操作，知道最后无限的接近目标点。 但是这样永远无法实现达到目标点，所以一般控制当前位置和目 标位置之间的距离小于1象素时，可以近似认为已经达到了目标点 。 二次缓动的计算公式为： dx=目标位置.x-当前位置.x dy=目标位置.y-当前位置.y vx=(dx)/2 vy=(dy)/2 9.4.5 利用三角函数实现运动效果 数学中三角函数的正弦和余弦函数是对物体的运动非常有用的函数。这两 个函数都具有周期性，其值范围为-11，而且由于周期性，其值能够在- 11之间循环变化。利用这些特点，可以实现显示对象周期性的往复运动 效果。关于三角函数的知识请参见数学和数字一章的内容。 下面的示例利用正弦三角函数实现小球在平衡位置附近的往复运动。其实 现流程为：创建一个小球加入场景创建帧循环事件处理函数利用帧 循环事件，实现小球的运动。使用文档类：MoveSin， 9.4.6 缩放动画效果 要实现缩放效果，只需实现不断修改显示对象的 缩放属性scaleX和scaleY即可。 下面的示例通过修改矩形的scaleY属性，实现矩 形缩放效果。其实现流程为：创建一个小球加 入场景创建帧循环事件处理函数，实现缩放操 作利用帧循环事件，实现小球的缩放。使用文 档类：Scale， 9.4.7 旋转动画效果 要实现旋转一个显示对象的动画效果，只需要修 改rotation属性即可。 下面的示例用一个箭头来实现鼠标跟随效果，跟 随鼠标的箭头的指向会随着鼠标位置的变化而发 生旋转。其实现流程为：创建一个小球加入场 景创建帧循环事件处理函数，实现旋转效果 利用帧循环事件，实现小球的旋转。使用文档类 ：Rotation， 9.4.8 淡入淡出动画效果 淡入淡出效果也是Flash动画制作中最常用的一种技术，此技术的 实现是通过改变显示对象的透明度alpha属性实现的。 下面的示例实现小球的淡入淡出效果。创建一个小球加入场景 创建帧循环事件处理函数，实现显示对象透明度先逐渐增加， 当透明度为1时逐渐减少，减少到1时再逐渐增加，通过循环实现 淡入淡出效果利用帧循环事件，实现小球的淡入淡出。使用文 档类：Alpha， 9.5 借助Timer类实现动画效果 使用Timer类产生的动画效果和使用帧循环ENTER_FRAME事 件产生动画的原理一样，都是通过间隔一定的时间进行一 次刷屏来实现动画效果。上一节中使用帧循环事件创建的 一切动画，都可以是Timer类的事件来实现。 要注意Timer类的TimerEvent.TIMER事件，可能与Flash的 刷屏不同步，会产生延迟现象。所以在使用的时候，需要 使用updateAfterEvent()方法强制更新屏幕。 使用Timer类实现动画还有几个好处： 可以利用Timer.stop()方法控制动画的播放与停止； 可以在构建Timer对象时控制动画的刷新次数，实现预期动 画效果； 可以利用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类中还可以指定缓动方法，从而实现非线形变化效 果。“缓动”是指动画在运行期间的速度非线形变化，使 动画显得更加的形象逼真。Tween类中的缓动方法位于 fl.transitions.easing包中，该包提供了多种缓动方法供 用户使用。 要利用Tween类创建动画效果，需要先创建一个Tween对象 ，使用该对象来指定要控制的显示对象的属性要发生什么 样的变化。创建Tween类对象的方法如下所示。 Tween(目标对象,目标对象的属性,缓动方式,初始值,结束 值,动画持续时间,记时方式); 9.6.2 运动折返效果 返回类实现的动画是在动画执行的开始端、结束 端或者两端兼有回返动作，用以模拟溢出动画效 果。执行动画的方法取决于三个缓动函数： easeIn：在动画开始时往后运动，然后反向朝目 标移动。 easeOut：在动画结束时稍微冲过结束点，然后倒 转方向回来朝着目标。 easeInOut：在动画开始时先向后运动，再倒转方 向并朝目标移动，结束时冲过目标，然后再倒转 方向，朝目标移动。 9.6.3 运动回弹效果 回弹类实现的动画是在动画的起始端，结束端或者两端兼 有执行回弹动画效果。具体在何端回弹同样取决于三个缓 动函数。回弹的次数取决于动画持续的时间，持续的时间 越长，回弹的次数越多。此效果可以实现舞台中小球跳动 的动画效果。 Bounce类的三个回弹函数效果： easeIn：在动画开始时以较慢速度开始回弹运动，然后再 执行时加快运动速度。 easeOut：在动画结束时以较快速度开始回弹运动，然后再 执行时减慢运动速度。 easeInOut：在动画开始时缓慢地开始跳动，进行加速运动 ，最后进行减速。 9.6.4 正弦弹性效果 Elastic类实现的动画是在动画的起始端，结束端或者两端 兼有执行弹性动画效果，运动方式按照正弦波逐渐衰减进 行。具体在何端回弹同样取决于三个缓动函数。回弹的次 数不受动画持续的时间影响。此效果也可以实现舞台中小 球跳动的动画效果。 Elastic类的三个回弹函数效果，此类和Bounce基本类似， 区别在与弹性采用正弦方式： easeIn：在动画开始时以较慢速度开始回弹运动，然后再 执行时加快运动速度。 easeOut：在动画结束时以较快速度开始回弹运动，然后再 执行时减慢运动速度。 easeInOut：在动画开始时缓慢地开始跳动，进行加速运动 ，最后进行减速。 9.6.5 Regular和Strong运动效果 Regular类实现的动画是加速运动、减速运动和先 加速后减速的动画效果。具体在方式同样取决于 三个缓动函数。 Regular类的三个回弹函数效果： easeIn：在动画开始时做初速度为零的加速运动 。 easeOut：动画执行匀减速运动，末速度为零。 easeInOut：在动画开始时做初速度为零的加速运 动，然后做减速运动，直到速度为零。 9.6.6线性运动效果 None类实现的是一种线形运动的效果，显示对象 一直做运动运动。其方法函数有四种easeIn()、 easeOut()、easeInOut()和easeNone()，这四种 方法实现的是相同的效果，在执行时都是匀速直 线运动。使用时可以任意选择。 9.7 TransitionManger创建动画效果 在ActionScript 2.0中内建的TransitionManger 类也被转移到了ActionScript 3.0的fl. transitions包中，用于实现页面切换动画效果。 本节主要介绍常用的TransitionManger类。 9.7.1 TransitionManger用法基础 TransitionManger类管理了一系列的过渡动画效果。通过使用这 些效果，可以很方便的实现页面之间的切换操作。 TransitionManger类提供了10中不同的切换效果，把这些切换效 果应用于影片剪辑，就能实现很漂亮的过渡效果。这些类同样位 于fl.transitions包中。 要使用TransitionManger类实现过渡动画效果，需要先创建该类 的实例。ActionScript 3.0中创建改类的实例的方法有两种。 TransitionManager.start()方法，用法格式如下所示。 TransitionManager.start(目标影片,过渡对象参数); 目标影片：指过渡效果作用的影片。注意，只能时影片剪辑实例 。 过渡对象参数：对象，包含所有的过渡参数的集合。对象应包含 type参数，该参数指示要应用的过渡效果类。此外，还必须包括 该过渡效果类所必需的任何参数。 9.7.2 遮帘过渡Blinds效果 此过渡实现影片剪辑逐渐消失或逐渐出现的矩形来显示的过渡动画效果， 类似于百叶窗效果。该过渡对象参数为： type:Blinds, direction:Transition.IN,duration:2,easing:None.easeNone,numStrip s:10,dimension:0; 参数说明： type：指明采用10种过渡效果中的那一种，所有的过渡效果共有参数。 direction：有两种形式Transition.IN和Transition.OUT，指明过渡动画 的方向，共有参数。 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 说明：此效果只使用共有参数，不需要其它参数。 下面的示例在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:Fly, 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.*; TransitionManager.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，分别为： 左上：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中使用导入一副图片，然后放入影 片剪辑中，放入舞台，命名为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, direction: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.*; TransitionManager.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,