Flash 文章

使用 ActionScript 3.0 创建动画

创建不断继续的动画

如果要在初始动画完成后移动球, 会怎样? 至少有两种方法可处理这个问题。第一种方法 (也许是最明显的解决方案) 就是使用 motionFinished 事件重新实现球的动画。虽然这种方法可行, 但变形类还提供了更简单的解决方案: continueTo() 方法。 continueTo() 方法指示变形后的动画从当前值继续运动到新值。您会发现这一方法在以下 ActionScript 中发挥作用:

import fl.transitions.*;
import fl.transitions.easing.*;
  
var ball_tween:Object = new Tween(ball_mc, "x", Regular.easeIn, 0, 300, 3, true);
function handleFinish(event:TweenEvent):void {
    ball_tween.continueTo(0, 3);
};
ball_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);

当初始变形完成后, ball_mc 影片剪辑将变回 0 像素处的原始位置。

只有 2 个变量传递到 continueTo() 方法, 而 Tween 方法需要传递 7 个变量。 continueTo() 方法中省略的 5 个变量 (obj、prop、func、begin 和 useSeconds) 使用在先前调用变形类时定义的变量。调用 continueTo() 时, 假设 obj、prop、func (缓动类型) 和 useSeconds 变量与先前调用变形类时相同。 continueTo() 方法使用调用变形类时的 finish 值, 而不是为 begin 变量指定值。

构建自己的持续动画

您甚至可以使动画沿 X 轴不停地来回运动。变形类还通过适当命名的 yoyo() 方法实现这种动画。 yoyo() 方法等待 motionFinished 事件执行, 然后将 begin 和 finish 参数对换。动画重新开始, 如下例所示。

选择“文件”>“新建”, 然后创建名为 yoyo.fla 的 ActionScript 3.0 文档。
选择“矩形工具”, 然后在“工具”面板中将笔触颜色选择为“无颜色”, 将填充颜色选择为红色。在舞台上画一个矩形, 宽度为 20 像素, 高度为整个舞台的高度 (请参见图 3)。

图 3。在舞台上画一个与舞台同高、宽约 20 像素的红色矩形
选择“选择”工具, 然后单击矩形以选择填充内容。按 F8 将形状转换为影片剪辑。将元件命名为 box, 将影片剪辑的行为, 保留注册点的默认设置, 使其设置为左上角。完成时, 单击“确定”。
在舞台上选择矩形, 然后使用“属性”检查器为矩形指派实例名称 box_mc。在取消选择实例前, 将 X 和 Y 坐标均设置为 0 像素, 使形状移动到舞台左上角。
在层 1 上将一个新层插入时间轴。将层重命名为 stroke。
选择“矩形工具”, 然后在“工具”面板中将填充颜色更改为“无颜色”, 将笔触颜色选择为黑色。
当选定笔触颜色时画一个矩形, 然后使用“选项”工具选择笔触。将矩形宽度更改为舞台宽度 (默认情况下为 550 像素), 将其高度更改为舞台高度 (默认情况下为 400 像素)。然后将笔触的 X 和 Y 坐标设置为 0 像素, 使笔触描画舞台尺寸的轮廓 (请参见图 4)。

图 4。创建无填充的矩形, 设置其尺寸使其描画舞台轮廓

在两个现有层上方再插入一个新层, 与步骤 5 中的操作一样。将新层重命名为 actions。将以下 ActionScript 添加到 actions 层的帧 1:

import fl.transitions.*;
import fl.transitions.easing.*;
  
var box_tween:Tween = new Tween(box_mc, "x", Regular.easeInOut, 0, stage.stageWidth, 3, true);
function handleFinish(event:TweenEvent):void {
    box_tween.yoyo();
}
box_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);

选择“控制”>“测试影片”。框从左向右运动, 然后再从右向左运动。如果动画不平滑, 可能需要将文档的帧频从 12 fps 增加到 24 fps。再次测试影响以查看动画的更改。
当框接近舞台右边时, 您会注意到框在步骤 7 中所创建笔触之外运动。虽然这在创作环境中看起来不是多大的问题, 但如果您在 Web 浏览器中观看动画时 (“文件”>“发布预览”>“HTML), 您会发现当矩形接近舞台右边时会消失。要解决此问题, 需要使矩形从 0 像素运动到舞台宽度减 box_mc 影片剪辑宽度处。将步骤 8 中的代码进行以下修改后, 您将发现如何实现这一变化:

import fl.transitions.*;
import fl.transitions.easing.*;
  
var box_tween:Tween = new Tween(box_mc, "x", Regular.easeInOut, 0, stage.stageWidth - box_mc.width, 3, true);
function handleFinish(event:TweenEvent):void {
    box_tween.yoyo();
}
box_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);

现在测试动画并注意框在退出舞台边界之前如何停止缓动。

Flash 文章

使用 ActionScript 3.0 创建动画

目录

创建不断继续的动画

构建自己的持续动画