创建图像动画(仅限 Flash Professional)

在本部分中,您将创建在每种特色餐间过渡的补间动画。本部分完成后,该动画将不停地播放。在本教程的后面部分,您将添加导航和 ActionScript,从而使用户能够用设备的右软键控制动画。

要创建动画,您将使用预先构建的影片剪辑,该影片剪辑包含在垂直列中排列的所有特色餐的图像。您将使用一个蒙版图层只显示其中一个图像。然后创建一系列使影片剪辑向上移动的补间,以便显示另一个图像。影片剪辑中的最后一个图像是第一个图像的直接复制图像,这样,当用户查看到最后一个图像时,动画序列可以返回到其初始状态。下面的图像示意说明了这些构想:

在教程的最后部分,您将添加 ActionScript 和用户界面元素,使用户能够控制动画序列。

要创建图像动画,请执行以下操作:

  1. 打开在前一部分中保存的文件(请参见创建主屏幕的菜单(仅限 Flash Professional))。
  2. 在时间轴中,选择名为 Images 的图层的第 10 帧上的关键帧。
  3. 打开"库"面板,然后将名为 Specials Images 的影片剪辑元件拖到舞台上。

    本教程的其余部分将此影片剪辑简称为"图像影片剪辑"。

  4. 在新的影片剪辑实例处于选定状态的情况下,在属性检查器中将影片剪辑的 xy 坐标都设置为 0

    这会将图像影片剪辑的左上角与舞台的左上角对齐。

  5. 在 Images 图层上,在第 20 帧、第 30 帧、第 40 帧和第 50 帧上插入关键帧,如下图所示:

  6. 在时间轴中,选择第 20 帧上的关键帧。
  7. 在舞台上,选择图像影片剪辑,然后在属性检查器中将其 y 坐标设置为 -100

    这会在舞台上将影片剪辑向上移动 100 像素。

  8. 在时间轴中选择第 30 帧上的关键帧,再选择图像影片剪辑,然后在属性检查器中将其 y 坐标设置为 -200
  9. 选择第 40 帧上的关键帧,再选择图像影片剪辑,然后在属性检查器中将其 y 坐标设置为 -300
  10. 选择第 50 帧上的关键帧,再选择图像影片剪辑,然后在属性检查器中将其 y 坐标设置为 -400
  11. 选择第 10 帧上的关键帧,然后在属性检查器中从"补间"弹出菜单中选择"动作"。

    此补间使图像影片剪辑定位在第 10 帧和第 20 帧上的关键帧之间。

  12. 要在其它图像之间创建过渡,请对位于第 20 帧、第 30 帧和第 40 帧上的关键帧重复步骤 11。
  13. 若要创建蒙版图层,请在时间轴中选择 Images 图层,然后选择"插入">"时间轴">"图层"(或者在"时间轴"中单击"插入图层"按钮)。
  14. 在新建的蒙版图层的第 10 帧上插入一个关键帧。
  15. 使用"工具"面板中的"矩形"工具在图像影片剪辑中的第一个(最上面那个)图像上创建一个矩形。

    您用什么颜色填充该矩形并不重要,但它必须为完全不透明。

  16. 若要确保该矩形能够覆盖整个图像区域,请双击该矩形将其选定,然后使用属性检查器将其 xy 坐标都设置为 0,将其宽度设置为 176,高度设置为 100
  17. 右键单击(在 Windows 中)或按住 Control 键并单击(在 Macintosh 中)时间轴中的 Image Mask 图层,并从上下文菜单中选择"蒙版"。

    该层将转换为蒙版图层,用一个蒙版图层图标来表示。紧贴它下面的图层将链接到该蒙版图层,其内容会透过蒙版上的填充区域显示出来。有关在 Flash 中使用蒙版图层的更多信息,请参见"使用 Flash"中的使用遮罩层

  18. 保存所做的更改("文件">"保存")。

至此,如果想要在模拟器中测试应用程序,您创建的动画将从头到尾播放,然后停止。在下一部分中(请参见将导航和文本添加到特色餐屏幕(仅限 Flash Professional)),您将添加 ActionScript(它使动画在每个关键帧停止),并添加用户界面元素(用户通过它们可以在图像之间导航)。