实例3 设置公司Logo动画

实例说明

在本实例中，将为读者制作开心豆豆食品公司的Logo动画。本实例由人物眨眼睛和文字跳动两部分动画组成。通过对帧和关键帧的添加并创建补间动画，完成公司Logo动画制作。

技术要点

在制作本实例时，首先导入一张素材图片作为背景，然后导入人物图片，通过在同一层的不同帧中添加不同的图片，完成人物眨眼动画，然后通过设置关键帧和创建补间动画来完成文字的跳动动画。

本实例制作中需要注意在制作文字跳动动画时文字的摆放位置和时间，并注意使图形的变形与移动相吻合，如图3-1所示为本实例在不同帧的动画截图。

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

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

3 在菜单栏执行“文件”/“导入”/“导入到库”命令，打开“导入到库”对话框，打开本书附带光盘“帧与关键帧的设置”/“实例3：设置公司Logo动画”/“Logo动画.psd”文件，打开“将‘Logo动画.psd’导入到库”对话框，选择全部图层，单击“确定”按钮，退出该对话框，如图3-4所示。

4 选择“图层1”的第1帧，在“库”面板中将“Logo动画.psd资源”文件夹下的“背景”图片拖动到场景中，打开“对齐”面板，在该面板中单击“对齐/相对舞台分布”按钮，然后单击“水平中齐”与“垂直中齐”按钮，如图3-5所示，使该图片在场景中心位置显示。

5 选择“图层1”的第40帧，按F5键插入帧，使该图片在第1～第40帧之间显示。单击时间轴面板中的“插入图层”按钮，插入一个新图层——“图层2”。

6 选择该图层的第6帧，按下键盘上的F6键插入关键帧。然后选择第1帧，在“库”面板中将“睁眼睛”图片移至场景中，此时该图片在第1～第5帧之间显示。进入“属性”检查器，将X轴参数设置为“200”，将Y轴参数设置为“20”，如图3-6所示。

7 选择该图层的第11帧，按下键盘上的F6键插入关键帧。然后选择第6帧，将“库”面板中的“闭眼睛”图片移至场景中，此时该图片在第6～第11帧之间显示。进入“属性”检查器，将X轴参数设置为“200”，将Y轴参数设置为“20”，如图3-7所示。

8 使用同样方法，分别在第11～第15帧之间添加“睁眼睛”图片，在第16～第20帧之间添加“闭眼睛”图片，在第21～第25帧之间添加“睁眼睛”图片，在第26～第30帧之间添加“闭眼睛”图片，在第31～第35帧之间添加“睁眼睛”图片，在第36～第40帧之间添加“闭眼睛”图片，并将该些图片的X轴位置设置为“200”，Y轴位置设置为“20”，时间轴控制如图3-8所示。

9 接下来创建文字跳动动画。创建一个新图层——“图层3”，选择第1帧，将“库”面板中的“开”图片移至如图3-9所示的位置，使该图片在第1～第40帧之间显示。

10 在该图层的第5帧处插入关键帧，然后将第5帧中的图片移至如图3-10所示的位置。

11 选择该图层的第1帧，右击鼠标，在弹出的快捷菜单中选择“创建补间动画”命令，创建补间动画。

12 按住键盘上的Shift键，选择第6帧与第10帧，然后按下键盘上的F6键插入关键帧。选择第6帧中的图片，单击工具箱中的“任意变形工具”按钮，按下键盘上的Alt键，适当缩小该图片的高度，如图3-11所示。

13 选择该图层的第6帧，右击鼠标，在弹出的快捷菜单中选择“创建补间动画”命令，创建补间动画。

14 单击时间轴面板中的“插入图层”按钮，插入一个新图层——“图层4”。在该图层的第5帧处插入关键帧，然后在“库”面板中将“心”图片移至如图3-12所示的位置，使该图片在第5～第40帧之间显示。

15 选择“图层4”的第10帧，按键盘上的F6键，插入关键帧。将该图片移至如图3-13所示的位置。然后在第5～第10帧之间创建补间动画。

16 在“图层4”的第11帧和第15帧中插入关键帧，选择第11帧中的图片，单击工具箱中的“任意变形工具”按钮，按下键盘上的Alt键，适当缩小该图片的高度，如图3-14所示。

17 选择“图层4”的第11帧，右击鼠标，在弹出的快捷菜单中选择“创建补间动画”命令，创建补间动画。

18 单击时间轴面板中的“插入图层”按钮，插入一个新图层——“图层5”。在该图层的第10帧处插入关键帧，然后在“库”面板中将“豆豆”图片移至如图3-15所示的位置，使该图片在第10～第40帧之间显示。

19 在该图层的第15帧处插入关键帧，然后将该图片移至如图3-16所示的位置，在第10～第15帧之间创建补间动画。

20 在该图层的第16帧、第20帧和第21帧中添加关键帧。选择第16帧，单击工具箱中的“任意变形工具”按钮，将该图片向左旋转，如图3-17所示。

21 选择第20帧，单击工具箱中的“任意变形工具”按钮，将该图片向右旋转，如图3-18所示。

22 在第16～第20帧之间创建补间动画，完成文字跳动效果。现在本实例就全部完成了，按下键盘上的Ctrl+Enter组合键，测试影片效果，可以看到Logo动画，如图3-19所示为本实例在不同帧的显示效果。如果读者在制作过程中遇到了什么问题，可以打开本书附带光盘文件“帧与关键帧的设置”/“实例3：设置公司Logo动画”/“设置公司Logo动画.fla”，该实例为完成后的文件。