Flash CS3中文版动画设计100例
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

实例6 设置物体变形动画

实例说明

在本实例中,将指导读者制作物体变形动画。该实例中设置小兔子在睡觉时呼出的小气泡由小到大,由白色到透明的变化,通过创建变形动画来完成气泡的设置。

技术要点

在制作本实例时,首先导入一张素材图片作为背景,然后使用椭圆工具创建一个小气泡,通过设置小气泡透明度及创建变形动画来完成小气泡的变形动画。

本实例制作中还需要注意在制作小气泡的变形动画时设置小气泡的摆放位置和移动的速度,如图6-1所示为本实例在不同帧的动画截图。

图6-1 设置物体变形动画

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

图6-2 新建文档

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

图6-3 “文档属性”对话框

3 在菜单栏执行“文件”/“导入”/“导入到库”命令,打开“导入到库”对话框,打开本书附带光盘“帧与关键帧的设置”/“实例6:设置物体变形动画”/“背景.jpg”文件,单击“确定”按钮,退出该对话框,将该图片导入场景中。

4 进入“属性”检查器,设置该图片的X轴为“0”,Y轴为“0”,使该图片位于场景的中心位置,如图6-4所示。

图6-4 导入素材图片

5 选择该图层的第24帧,按键盘上的F5键插入帧,使该图片延续到该帧。

6 单击时间轴面板中的“插入图层”按钮,插入一个新图层——“图层2”。

7 选择“图层2”的第1帧,然后单击工具箱中的“椭圆工具”按钮,在如图6-5所示的位置绘制一个椭圆图形。

图6-5 绘制椭圆图形

8 单击工具箱中的“选择工具”按钮,双击绘制的椭圆图形,在“属性”检查器中将“笔触颜色”设置为没有颜色,将“填充颜色”设置为“白色”,如图6-6所示。

图6-6 设置图形颜色

9 单击工具箱中的“部分选取工具”按钮,然后选择“图层2”的第1帧,这时图形会出现路径锚点,拖动路径锚点出现的方向点,将路径调整为如图6-7所示的形状。

图6-7 调整图形形态

10 选择该图层的第24帧,单击鼠标右键,在弹出的快捷菜单中选择“插入空白关键帧”命令,在该帧处插入空白关键帧。

11 单击工具箱中的“笔触颜色”按钮,在弹出的颜色选项卡中单击按钮,将“笔触颜色”设置为没有颜色;单击“填充颜色”按钮,在弹出的颜色选项卡中选择“白色”如图6-8所示。

图6-8 设置“笔触颜色”和“填充颜色”

12 单击工具箱中的“椭圆工具”按钮,在如图6-9所示的位置绘制一个椭圆图形。

图6-9 绘制椭圆图形

13 打开“颜色”面板,将该面板下的Alpha参数设置为“0%”,如图6-10所示。

图6-10 设置Alpha参数

14 选择该图层的第1帧,单击鼠标右键,在弹出的快捷菜单中选择“创建补间形状”命令,如图6-11所示为该动画在第1帧、第5帧和第15帧中的显示情况。

图6-11 创建变形动画

15 按住键盘上的Shift键,选择该图层中的所有帧,单击鼠标右键,在弹出的快捷菜单中选择“复制帧”命令,如图6-12所示。

图6-12 复制帧

16 单击时间轴面板中的“插入图层”按钮,插入一个新图层——“图层3”。

17 选择“图层3”的第1帧,按住键盘上的Shift键,然后选择第24帧,此时第1~第24帧全部被选中,单击鼠标右键,在弹出的快捷菜单中选择“粘贴帧”命令,将“图层2”中的所有帧粘贴到“图层3”中,如图6-13所示。

图6-13 粘贴帧

18 选择第1帧,按住鼠标左键将该帧拖至第8帧中,图片显示效果如图6-14所示。

图6-14 拖动帧位置

19 选择第24帧中的图形,单击工具箱中的“任意变形工具”按钮,将该图片的位置及大小进行适当调整,如图6-15所示。

图6-15 调整图片大小及位置

20 现在本实例就全部完成了,按下键盘上的Ctrl+Enter组合键,测试影片效果,可以看到小兔子在睡觉时呼出的小气泡由小到大的动画,如图6-16所示为本实例在不同帧的显示效果。如果读者在制作过程中遇到了什么问题,可以打开本书附带光盘文件“帧与关键帧的设置”/“实例6:设置物体变形动画”/“设置物体变形动画.fla”,该文件为本实例完成后的文件。

图6-16 设置物体变形动画效果