对象动画

Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本

动画是使内容移动或者使内容随时间发生变化的过程。脚本动画是视频游戏的基础部分,通常用于将优美、有用的交互线索添加到其他应用程序中。

脚本动画的基本概念是变化一定要发生,而且变化一定要分时间逐步完成。使用常见的循环语句,可以很容易地在 ActionScript 中使内容重复。但是,在更新显示之前,循环将遍历其所有迭代。要创建脚本动画,需要编写 ActionScript,它随时间重复执行某个动作,每次运行时还更新屏幕。

例如,假设要创建一个简单的动画,如使球沿着屏幕运动。ActionScript 提供了一个用于跟踪时间和相应更新屏幕的简单机制,这意味着您可以编写代码,使球每次移动一点点,直到球到达目标为止。每次移动后,屏幕都会更新,从而使跨舞台的运动在查看器中可见。

从实用的观点来看,让脚本动画与 SWF 文件的帧速率同步(换句话说,每次显示或要显示新帧时都产生一个动画变化)才有意义,因为帧速率定义了 Flash Player 或 AIR 更新屏幕的频率。每个显示对象都有 enterFrame 事件,它根据 SWF 文件的帧速率来调度,即每帧一个事件。创建脚本动画的大多数开发人员都使用 enterFrame 事件作为一种方法来创建随时间重复的动作。可以编写代码以侦听 enterFrame 事件,每一帧都让动画球移动一定的量,当屏幕更新时(每一帧),将会在新位置重新绘制该球,从而产生了运动。

注: 另一种随时间重复执行某个动作的方法是使用 Timer 类。每次过了指定的时间时,Timer 实例都会触发事件通知。可以编写通过处理 Timer 类的 timer 事件来执行动画的代码,将时间间隔设置为一个很小的值(几分之几秒)。有关使用 Timer 类的详细信息,请参阅控制时间间隔

在下面的示例中,将在舞台上创建一个名为 circle 的圆 Sprite 实例。当用户单击圆时,脚本动画序列开始,从而使 circle 淡化(其 alpha 属性值减少),直到完全透明:

import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
 
// draw a circle and add it to the display list 
var circle:Sprite = new Sprite(); 
circle.graphics.beginFill(0x990000); 
circle.graphics.drawCircle(50, 50, 50); 
circle.graphics.endFill(); 
addChild(circle); 
 
// When this animation starts, this function is called every frame. 
// The change made by this function (updated to the screen every 
// frame) is what causes the animation to occur. 
function fadeCircle(event:Event):void 
{ 
    circle.alpha -= .05; 
     
    if (circle.alpha <= 0) 
    { 
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle); 
    } 
} 
 
function startAnimation(event:MouseEvent):void 
{ 
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle); 
} 
 
circle.addEventListener(MouseEvent.CLICK, startAnimation);

当用户单击圆时,将函数 fadeCircle() 订阅为 enterFrame 事件的侦听器,这意味着每一帧都会开始调用一次该函数。通过更改 circlealpha 属性,该函数会淡化圆,因此对于每个帧,圆的 alpha 都会减少 .05 (5%) 并会更新屏幕。最后,当 alpha 值为 0(circle 完全透明)时,fadeCircle() 函数作为事件侦听器将被删除,从而结束动画。

以上代码还可用来创建动画运动而不是淡化。通过用不同属性替换函数中表示 enterFrame 事件侦听器的 alpha,就可获得该属性的动画效果。例如,将以下行

    circle.alpha -= .05;

更改为以下代码

    circle.x += 5;

将获得 x 属性的动画效果,使圆移到舞台的右侧。当到达需要的 x 坐标时,通过更改结束动画的条件就可结束动画(即取消订阅 enterFrame 侦听器)。