flash创建简单动画(适合教学).ppt

1、,第9章 创建简单动画,9.1 逐帧动画9.2 形状补间动画9.3 动作补间动画,9.1 逐帧动画Flash主要用来制作动画，动画由一系列连续播放的相似的静止画面组成，通常来说，相似的画面越多，就越容易实现动画效果，使动画看起来更加逼真。如果两个连续的画面之间有较大的差别，则画面之间的切换就类似于放映幻灯片。Flash动画就是根据上述原理来制作的。Flash 8中包括两种类型的动画，分别为逐帧动画和补间动画，补间动画又可以分为形状补间动画和动作补间动画。,9.1.1 逐帧动画的工作原理逐帧动画主要由若干关键帧组成，整个动画就是通过关键帧的不断变化而产生的。在制作动画时，用户需要对每一帧的内容进

2、行绘制，因此其工作量较大。但其产生的动画效果非常逼真，多用来制作复杂动画，因此逐帧动画对制作人员的绘图技巧有较高的要求。,9.1.2 制作逐帧动画下面将以制作“人牵着狗走路”的逐帧动画为例来介绍逐帧动画的制作方法，其具体操作步骤如下：（1）按“Ctrl+N”组合键新建一个Flash文档。（2）按“Ctrl+J”组合键，弹出“文档属性”对话框，其参数设置如图9.1.1所示。（3）选择工具箱中椭圆工具和刷子工具绘制如图9.1.2所示的画面作为第1帧。,图9.1.1 “文档属性”对话框 图9.1.2 第1帧,（4）为了降低动画序列播放的速度，这里将第2帧作为普通帧，直接单击第3帧，按“F6”键插入关

3、键帧，再绘制如图9.1.3所示的画面。（5）单击第5帧，按“F6”键插入关键帧，再绘制如图9.1.4所示的画面。,图9.1.3 第3帧 图9.1.4 第5帧,（6）单击第7帧，按“F6”键插入关键帧，再绘制如图9.1.5所示的画面。（7）单击第9帧，按“F6”键插入关键帧，再绘制如图9.1.6所示的画面。,图9.1.5 第7帧 图9.1.6 第9帧,（8）单击第11帧，按“F6”键插入关键帧，再绘制如图9.1.7所示的画面。 （9）单击第13帧，按“F6”键插入关键帧，再绘制如图9.1.8所示的画面。这时，整个动画序列就制作完成了。这时的“时间轴”面板如图9.1.9 所示。,图9.1.7 第1

4、1帧 图9.1.8 第13帧,图9.1.9 “时间轴”面板,（10）至此，动画制作完毕，按“Ctrl+Enter”组合键，其效果如图9.1.10所示。,图9.1.10 最终效果,9.2 形状补间动画补间动画分为形状补间动画和动作补间动画，本节主要介绍形状补间动画。通过形状补间，可以创建出类似于形变的效果。形状补间动画必须有两个帧，在这两个帧中绘制出不同的形状，然后由Flash来计算两个帧之间的差距并插入变形帧。这样，当动画播放时，就会出现形状补间的动画效果。形状补间动画可以对图形的位置、大小、颜色等属性进行补间。形状补间通常用于形状和颜色的补间变化。,9.2.1 形状补间动画的参数设置形状补间

5、动画主要有两个重要参数，它们都在“属性”面板中进行设置，如图9.2.1所示。,图9.2.1 “属性”面板,“缓动”：该选项用来设置形状对象变化的快慢趋势，其最小值为100，最大值为100，临界值为0。当取值为0时，表示形状动画的形变是匀速的；若取值小于0，表示形变对象的形状变化越来越快，且数值越小，加快的趋势越明显；若取值大于0，表示形变对象的形状变化越来越慢，且数值越大，减慢的趋势越明显。,“混合”：该选项用来设置形变对象变形的形式。混合方式有两种，分别为“分布式”和“角式”。分布式：表示形变对象的形变过程是平滑的。角式：表示形变对象的形变过程是尖锐的。,9.2.2 创建形变动画下面以一个正

6、方形变成圆形的形状补间动画为例来介绍形状补间动画的制作过程，其具体操作步骤如下：（1）按“Ctrl+N”组合键新建一个Flash文档。（2）选择工具箱中的矩形工具绘制一个矩形，并将其填充为蓝色，如图9.2.2所示。,（3）单击第25帧，按“F6”键插入关键帧。这时第25帧的内容和第1帧相同。（4）选中第25帧的矩形将其删除，然后选择工具箱中的椭圆工具绘制一个椭圆，并将其填充颜色设置为红色，如图9.2.3所示。,图9.2.2 绘制矩形 图9.2.3 绘制椭圆,（5）单击第1帧，在“属性”面板中设置补间为“形状”，如图9.2.4所示。这时就会在“时间轴”面板上出现一个从第1帧到第25帧的箭头，如图

7、9.2.5所示。,图9.2.4 “属性”面板,图9.2.5 “时间轴”面板,至此，动画就制作完成了。按“Ctrl+Enter”组合键进行测试，其效果如图9.2.6所示。,图9.2.6 形变效果,9.3 动作补间动画动作补间动画和形状补间动画基本相同，也需要制作两个关键帧，然后在这两个关键帧之间创建动画。通过动作补间动画可以对矢量图形、元件以及其他导入的素材进行位置、大小、旋转、透明度等的调整。提示： 动作补间通常用于有位置变化的补间动画中。,9.3.1 动作补间动画的参数设置下面将介绍“属性”面板中与动作补间相关的选项，如图9.3.1所示。,图9.3.1 “属性”面板,“缩放”：选中该复选框，

8、对象可以改变大小。“缓动”：用来使对象表现出由快到慢或由慢到快的变化效果。“旋转自动”：该选项用来控制对象的旋转方向和次数。“调整到路径”选中该复选框，可以使对象贴紧路径来移动。“同步”：选中该复选框，Flash对实例进行同步校准以确保影片的正确循环。“对齐”：选中该复选框，能够使动画自动吸附到路径上移动。,9.3.2 制作旋转的文字下面以制作旋转动画为例，使用户初步认识动作补间动画，其具体操作步骤如下：（1）新建一个Flash文档。（2）按“Ctrl+F8”组合键，弹出“创建新元件”对话框，选中“图形”单选按钮并输入元件名称，如图9.3.2所示。,图9.3.2 “创建新元件”对话框,（3）单

9、击“确定”按钮进入该图形元件的编辑区。（4）选择工具箱中的文字工具，其属性设置如图9.3.3所示。,图9.3.3 “属性”面板,（5）在编辑区中输入文字“Flash动画”，然后选择“窗口”“对齐”命令，打开“对齐”面板，如图9.3.4所示。单击该面板中的“水平中齐”按钮和“垂直中齐”按钮，使文字位于编辑区的中心，如图9.3.5所示。,图9.3.4 “对齐”面板 图9.3.5 输入文字,（6）按“Ctrl+E”组合键返回到主场景。（7）按“Ctrl+L”组合键打开“库”面板，将刚才创建好的图形元件拖动到舞台上。（8）单击“时间轴”面板的第30帧，按“F6”键插入关键帧，如图9.3.6所示。,图9

10、.3.6 “时间轴”面板,（9）用鼠标右键单击“时间轴”面板的第1帧，在弹出的快捷菜单中选择“创建补间动画”命令。这时，在第1帧和第35帧之间出现了一个箭头，如图9.3.7所示。,图9.3.7 创建动画,（10）这时如果测试动画，不会有任何动画效果。下面来设置动画的参数，使其产生旋转效果。选择在第1帧和第30帧之间的任意帧，在“属性”面板中设置好参数，如图9.3.8所示。,图9.3.8 “属性”面板,至此，旋转动画就制作完成了，按“Ctrl+Enter”组合键进行测试，其效果如图9.3.9所示。,图9.3.9 旋转动画效果,9.4 实战演习 实战演习内容本节将制作文字形状渐变的动画，整个过程为

11、：文字由“童”渐变为“话”，再由“话”渐变为“世”，再由“世”渐变为“界”，最后由“界”渐变为“童话世界”。 实战演习步骤（1）启动Flash 8应用程序，新建一个Flash文档，其参数设置如图9.4.1所示。（2）选择“文件”“导入”“导入到库”命令，弹出“导入到库”对话框，如图9.4.2所示。,图9.4.1 “文档属性”对话框 图9.4.2 “导入到库”对话框,（3）在“导入到库”对话框中找到目标文件后单击“打开”按钮，该文件就被导入到了“库”面板中，如图9.4.3所示。（4）将该图片拖动到舞台上，如图9.4.4所示，然后将图层1命名为“背景”。（5）单击“时间轴”面板上的“插入图层”按钮

12、插入一个新图层，并将该图层命名为“文字”。,图9.4.3 “库”面板 图9.4.4 导入图片,（6）选择工具箱中的文字工具，在舞台上输入“童话世界”4个字，如图9.4.5所示。（7）按两次“Ctrl+B”组合键将其打散。（8）选择“窗口”“混色器”命令，打开“混色器”面板，其参数设置如图9.4.6所示。,图9.4.5 输入文字 图9.4.6 “混色器”面板,（9）将文字填充为如图9.4.7所示的渐变颜色。（10）分别选中第10，20，30和40帧，按“F6”键插入关键帧。（11）单击“时间轴”面板上的“绘图纸外观”按钮，这样就可以看到相邻关键帧中的图形，便于以后的操作。（12）单击第1帧，选择

13、工具箱中的选择工具，将文字“话、世、界”3个字删除，只剩下“童”字，如图9.4.8所示。,图9.4.7 填充文字 图9.4.8 第1帧,（13）单击第10帧，选择工具箱中的选择工具，将文字“童、世、界”3个字删除，只剩下“话”字，如图9.4.9所示。由于刚才打开了“绘图纸外观”按钮，因此还能够看到隐约的“童”字。（14）单击第20帧，选择工具箱中的选择工具，将文字“童、话、界”3个字删除，只剩下“世”字，如图9.4.10所示。,图9.4.9 第10帧 图9.4.10 第20帧,（15）单击第30帧，选择工具箱中的选择工具，将文字“童、话、世”3个字删除，只剩下“界”字，如图9.4.11所示。,

14、图9.4.11 第30帧,（16）第40帧保持不变，即将“童、话、世、界”4个字都显示出来。然后再单击第45帧，按“F5”键插入帧。这样做是为了延长这4个字的显示时间，这时的“时间轴”面板如图9.4.12所示。,图9.4.12 “时间轴”面板,（17）单击第1帧，在“属性”面板中将补间设置为“形状”，如图9.4.13所示。这样就创建了从第1帧到第10帧之间的形状补间动画。,图9.4.13 “属性”面板,（18）同样在第10，20，30帧处选择“形状”补间，建立形状补间动画。然后在“背景”图层的第45帧处按“F5”键插入帧以延长背景的显示时间，这时的“时间轴”面板如图9.4.14所示。,图9.4

15、.14 “时间轴”面板,至此，该动画就制作完成了，按“Ctrl+Enter”组合键，动画效果如图9.4.15所示。,图9.4.15 最终效果,9.5 知识巩固 知识巩固内容 本例将制作一个模拟写字的效果，如图9.5.1所示。,图9.5.1 最终效果,知识巩固步骤（1）启动Flash 8应用程序并新建一个Flash文档。（2）选择“文件”“导入”“导入到库”命令，弹出“导入”对话框，如图9.5.2所示。,图9.5.2 “导入”对话框,（3）选择一个目标文件后单击“打开”按钮，该文件就被导入到“库”面板中，如图9.5.3所示。（4）选择“窗口”“对齐”命令，打开“对齐”面板，如图9.5.4所示。,

16、图9.5.3 导入一幅图片 图9.5.4 “对齐”面板,（5）单击“对齐”面板中的“水平中齐”按钮和“垂直中齐”按钮，将其放置到舞台的中心位置，如图9.5.5所示。然后将图层1命名为“背景”，表示该图像将作为动画的背景。,图9.5.5 将图像放置到舞台的中心位置,（6）为了便于操作，将“背景”图层隐藏。（7）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，并将该图层命名为“文字”，然后输入字母“I LOVE YOU”，如图9.5.6所示。,（8）单击“文字”图层的第2帧，按“F6”键插入关键帧。选择工具箱中的橡皮擦工具，按照书写字母时笔画的相反顺序擦除字母，现在擦除字母“U”的一部分，

17、效果如图9.5.7所示。,图9.5.6 输入字母 图9.5.7 擦除字母,（9）单击“文字”图层的第3帧，按“F6”键插入关键帧。选择工具箱中的橡皮擦工具，继续擦除，如图9.5.8所示。（10）单击“文字”图层的第4帧，按“F6”键插入关键帧。选择工具箱中的橡皮擦工具，继续擦除，如图9.5.9所示。,图9.5.8 继续擦除字母效果 图9.5.9 继续擦除字母效果,（11）按照同样的方法继续添加关键帧并在其中擦除字母的笔画，当擦除完“YOU”时，插入3个普通帧，以使其与“LOVE”之间有一定的时间间隔。重复上述操作，直到将舞台上的字母全部擦除掉。（12）选中“文字”图层中的所有帧，单击鼠标右键，

18、在弹出的快捷菜单中选择“翻转帧”命令，将帧进行翻转。这样，动画就会按照擦除时的相反方向来书写。,（13）单击“背景”图层，将其帧延长到与“写字”图层相同，即在第80帧处按“F5”键插入普通帧，这时的“时间轴”面板如图9.5.10所示。至此，动画就制作完成了，按“Ctrl+Enter”组合键进行预览，其最终效果如图9.5.1所示。,图9.5.10 “时间轴”面板,9.6 本章小结 本章主要介绍了Flash动画的3种类型：逐帧动画、形状补间动画和动作补间动画，并且结合实例介绍了逐帧动画和动作补间动画的制作方法和技巧。通过本章的学习，用户应该理解并掌握Flash动画的基本制作方法。,习 题 九1填空题（1）Flash包括两种类型的动画，分别为_和_。（2）补间动画分为_补间动画和_补间动画。（3）当需要将对象设置为透明时，应将其_设置为0%。,2选择题（1）当需要延长动画的播放时间时，用户可以插入（ ）帧来实现。 A普通帧 B关键帧 C空白关键帧 D空白帧（2）在“属性”面板中，选择（ ）补间选项，可以制作形状补间动画。 A无 B动画 C形状 D动画和形状3简答题,4上机操作题制作如题图9.1所示的水波效果。,题图9.1 水波效果,（2）如何创建形状补间动画？,（1）简述逐帧动