实例1 设置荡秋千的动画

实例说明

本实例中，将指导读者设置荡秋千的动画，内容包括女孩荡秋千和花在水中飘浮的动画。通过本实例的制作，可以使读者了解Flash CS3中关键帧的设置和创建补间动画的方法。

技术要点

在制作本实例时，通过导入素材图像，创建补间动画，设置秋千图形中心点的位置，完成女孩荡秋千的动画。通过在不同图层中设置花漂浮移动的动画，完成花飘浮在水中的动画效果。

在制作Flash动画时，应注意调整各关键帧中图片的位置。在本实例中，将为读者详细讲解上述动画的设置方法，如图1-1所示为动画完成后的截图。

1 打开Flash CS3，在菜单栏执行“文件”/“新建”命令，打开“新建文档”对话框，在该对话框的“常规”面板中，选择“Flash文件（ActionScript 3.0）”选项，如图1-2所示，单击“确定”按钮，退出该对话框，创建一个新的Flash文档。

2 在“属性”检查器中单击“文档属性”按钮，打开“文档属性”对话框，设置文件的尺寸的宽为“750像素”，高为“600像素”，设置背景颜色为“白色”，设置帧频为“12”，标尺单位为“像素”，如图1-3所示，单击“确定”按钮，退出该对话框。

3 在菜单栏执行“文件”/“导入”/“导入到舞台”命令，打开“导入到舞台”对话框，打开本书附带光盘中的“帧与关键帧的设置”/“实例1：设置荡秋千的动画”/“素材.psd”文件，单击“确定”按钮，打开“将‘素材.psd’导入到舞台”对话框，选择左侧“检查要导入的Photoshop图层”显示窗的所有图层，选择“具有可编辑图层样式的位图图像”单选按钮，将其转换为具有可编辑图层样式的位图图像，如图1-4所示，单击“确定”按钮，退出该对话框。

4 选择图层中所有的图片，在“属性”检查器中设置其X轴位置为0，Y轴位置为0，如图1-5所示。

5 在时间轴面板中选择“背景”层的第100帧，右击鼠标，在弹出的快捷菜单中选择“插入帧”命令，使该层的图片在第1～第100帧之间显示。

6 选择“小女孩”层的第1帧，单击工具箱中的“任意变形工具”按钮，参照图1-6所示调整图像中心点的位置。

7 选择第10帧，按下键盘上的F6键插入关键帧，然后执行菜单栏中的“窗口”/“变形”命令，打开“变形”面板，在该面板中选择“旋转”单选按钮，并在“旋转”参照栏内键入“20.0度”，使图像旋转20º，如图1-7所示。

8 选择“小女孩”层中第1帧，右击鼠标，在弹出的快捷菜单中选择“创建补间动画”命令，使该图像在第1～第10帧之间创建补间动画。

9 选择第30帧，按下键盘上的F6键插入关键帧，然后在“变形”面板的“旋转”参照栏内键入“-25度”，使图像逆时针旋转25º，如图1-8所示。

10 分别在“小女孩”层中的第50帧、第70帧、第90帧和第100帧处插入关键帧，并将第50帧和第90帧处的图像旋转角度设置为20º，将第70帧处的图像旋转角度设置为-25º，将第100帧处的图像旋转角度设置为0º。

11 分别在第30帧、第50帧、第70帧、第90帧处右击鼠标，并在弹出的快捷菜单中选择“创建补间动画”选项，使图像分别在第35～第50帧、第50～第70帧、第85～第100帧之间创建补间动画，如图1-9所示为小女孩图像在第30帧、第90帧和第100帧处的动画截图。

12 分别在“花01”层的第20帧、第60帧和第100帧处插入关键帧，然后参照图1-10所示依次调整各帧处图片的位置。

13 接下来分别在“花01”层的第1～第20帧、第20～第60帧、第60～第100帧之间创建补间动画。

14 在“花02”层的第30帧、第70帧和第100帧处插入关键帧，然后参照图1-11所示依次调整各帧处图片的位置。

15 分别在“花02”层的第1～第30帧、第30～第70帧、第70～第100帧之间创建补间动画。

16 在“花03”层的第20帧、第60帧和第100帧处插入关键帧，然后参照图1-12所示依次调整各帧处图片的位置。

17 分别在“花03”层的第1～第20帧、第20～第60帧、第60～第100帧之间创建补间动画。

18 现在本实例就全部完成了，按下键盘上的Ctrl+Enter组合键，测试影片效果，可以看到秋千和花的动画，如图1-13所示。如果读者在编辑过程中遇到什么问题，可以打开本书附带光盘中的“帧与关键帧的设置”/“实例1：设置荡秋千的动画”/“荡秋千.fla”文件，该文件是本实例的完成效果。