1、第 7 章 Flash 8 基础与实例（ 2）常见动画的制作知识点：1、 逐帧动画的制作。2、 形状补间动画的制作。3、 动作补间动画的制作。4、 遮罩动画的制作。5、 引导路径动画的制作。学时分配：2 学时教学内容：1、 逐帧动画的制作。2、 形状补间动画的制作。3、 动作补间动画的制作。4、 遮罩动画的制作。5、 引导路径动画的制作。教学重点：1、 形状补间动画的制作。2、 动作补间动画的制作。3、 遮罩动画的制作。4、 引导路径动画的制作。教学难点：形状补间动画与动作补间动画的区别。教学方法与手段：讲授法，多媒体展示教学过程：（一）创设意境，导入新课（设疑法、提问法）导入：教师展示几个
2、Flash 实例，然后引导学生一个一个亲自动手制作。引入新课程：（二）新课教学（讲解法、提问法、示范法、实验法）本次课开始学习用 Flash 制作动画效果，在 Flash 中共有 5 种动画形式：逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。 逐帧动画的制作逐帧动画是一种常见的动画手法，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成的一种动画。优点：与电影播放模式相似，适合于表演很细腻的动画，如 3D 动画、人物或动物急剧转身等效果。缺点：每一帧的序列内容都不一样，增加制作负担，文件存储容量过大。一、逐帧动画的概念和在时间帧上的表现形式在时间
3、帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画在时间帧上表现为连续出现的关键帧，如图 7-3-1 所示。图 7-3-1 逐帧动画二、创建逐帧动画的几种方法1用导入的静态图片建立逐帧动画用 jpg、png 等格式的静态图片连续导入 Flash 中，就会建立一段逐帧动画。2绘制矢量逐帧动画用鼠标或压感笔在场景中一帧一帧地画出每一帧内容。3. 文字逐帧动画用文字作帧中的元件，实现文字跳跃、旋转等特效。4. 导入序列图像可以导入 gif 序列图像、swf 动画文件或者利用第三方软件（如 swish、swift 3D 等）产生的
4、动画序列。三、绘图纸功能1绘图纸的功能绘图纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash 在舞台中一次只能显示动画序列的单个帧。使用绘图纸功能后，你就可以在舞台中一次查看两个或多个帧了。如下图所示是使用绘图纸功能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时你只能编辑当前帧的内容。2绘图纸各个按钮的介绍（1） 【绘图纸外观】按钮：按下此按钮后，在时间帧的上方，出现 绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。（2） 【绘
5、图纸外观轮廓】 按钮：按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。（3） 【编辑多个帧】按钮：按下此按钮后，可以显示全部帧内容，并且可以进行“多帧同时编辑”。（4） 【修改绘图纸标记】 按钮：按下此按钮后，弹出菜单，菜单中有以下五个选项： “总是显示标记”选项会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开。 “锚定绘图纸”选项会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。 “绘图纸 2
6、”选项会在当前帧的两边显示两个帧。 “绘图纸 5”选项会在当前帧的两边显示五个帧。 “绘制全部”选项会在当前帧的两边显示全部帧。上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制作两个逐帧动画实例，以加深对逐帧动画的认识。【实战练习】闪动的小球（1）新建一个文件，背景色为黑色。（2）在第 1 帧内绘制一个黑色到绿色放射渐变的小球，调整到合适的大小与位置。（3）在第 2 帧插入关键帧，将小球的大小、位置、颜色都调整到合适的情况。（4）同样制作其第 3 帧到第 6 帧。最终时间轴如下图所示。（5）测试存盘执行【控制】|【测试影片】命令，观察本例 swf 文件生成的动画有无问题，如果满
7、意，执行【文件】|【保存】命令，将文件保存成“闪动的小球.fla”文件进行存盘，如果要导出 Flash 的播放文件，执行【导出】|【导出影片】命令保存成“闪动的小球.swf”文件。 形状补间动画一、形状补间动画概述1形状补间动画的概念在 Flash 的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。2构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔
8、绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。3形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如下图所示。4创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角形，在弹出的菜单中选择【形状】，此时，时间轴上就出现一个淡绿色的形变动画效果，一个形状补间动画就创建完毕。5.认识形状补间动画的属性面板Flash 的【属性】面板随鼠标
9、选定的对象不同而发生相应的改变。当我们建立了一个形状补间动画后，点击时间帧，【属性】面板如下图所示。【实战练习】小球与文字的相互转变制作步骤如下：（1）创建新文档执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为 550*400 象素，【背景颜色】为黑色。（2）创建一个小球在图层 1 的第 1 帧创建一个黑色到绿色放射渐变的小球。 选择工具栏上的椭圆工具 ，去掉边线 ，在场景中画一个椭圆，调整到合适的大小与位置。（3）创建文字“变”在第 20 帧处插入一个关键帧，选择“刷子”工具，设置需要的颜色
10、效果，然后书写一个文字“变”。（4）设置小球到文字的形状补间动画单击第 1 帧，在【属性】面板中将【补间】设置为【形状】。（5）设置文字再到另一个小球的形状补间动画用同样的方法制作文字到另一个小球的形状补间动画。（6）测试存盘执行【控制】|【测试影片】命令，观察本例 swf 文件生成的动画有无问题，如果满意，按需要将其保存为“变形的小球.fla”文件或者导出为“变形的小球.swf”文件。如下图是其中几个变形过渡帧。 动作补间动画1动作补间动画的概念在 Flash 的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flas
11、h 根据二者之间的帧的值创建的动画被称为动作补间动画。2构成动作补间动画的元素构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等等，除了元件,其他元素比如位图、文本等等都不能直接创建补间动画，必须首先将它们转换成元件才行，换句话说，只有把这些形状“组合”或者转换成“元件”后才可以制作“动作补间动画”。3动作补间动画在时间帧面板上的表现动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如下图所示。4形状补间动画和动作补间动画的区别形状补间动画和动作补间动画都属于补间动画，前后都各有一个起始帧和结束帧。二者之间的区别如下表所示。 表 5-1 形状补间
12、动画与动作补间动画的区别区别之处 形状补间动画 动作补间动画在时间轴上的表现 淡绿色背景加长箭头 淡紫色背景加长箭头组成元素形状，如果使用图形元件、按钮、文字，则必先打散再变形。影片剪辑、图形元件、按钮，不能是形状作用实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。实现一个元件的大小、位置、颜色、透明度等的变化。5创建动作补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在【属性面板】上单击【补间】旁边的“小三角形”，在弹出的菜单中选择【动作】，或者直接右
13、击，在弹出的菜单中选择【新建补间动画】，就建立了“动作补间动画”6.认识动作补间动画的属性面板在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如下图所示。【实战练习】制作一个小球由大逐步变小的动画。操作步骤：（1） 新建一个动画文件。（2） 新建一个图形元件，绘制一个小球。（3） 将元件库中的元件“小球”拖到舞台上，根据需要改变其实例大小。（4） 在第 30 帧处插入关键帧，并将实例“小球”缩小。（5） 打开第 1 帧的属性面板，设置补间方式为“动作” ，创建动作补间动画。（6） 然后按【Ctrl】+【Enter】测试动画，效果如何？试试看吧。最后将文件存盘。【实战练习】让小球产生旋转
14、及淡出的效果。操作步骤：（1） 打开前一实例文件，在时间轴第 55 帧插入关键帧。（2） 选中舞台上的“小球” 实例，将小球调大；设置实例的透明度（即调整颜色属性 Alpha 值）为 0。在第 30 关键帧与第 55 关键帧之间建立“动作补间动画” 。（3） 设置第 30 帧（关键帧）的属性为：顺时针旋转 3 次。（4） 按【Ctrl】+【Enter】测试影片，效果如何？【提示】与“形状补间动画”不同的是，“动作补间动画”的对象必须是库中的“元件”。其它的位图、文本等都必须要转换成元件，才可以生成“动作补间动画”。 遮罩动画1遮罩的概念遮罩动画是 Flash 中的一个很重要的动画类型，很多效果
15、丰富的动画都是通过遮罩动画来完成的。在 Flash 的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。2遮罩的作用在 Flash 动画中，“遮罩”主要有两个用途：第一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，第二个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。3.应用遮罩时的技巧 遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中对象的许多属性如渐变色、透明度、颜色和线条
16、样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。 要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置 Alpha 属性。 不能用一个遮罩层试图遮蔽另一个遮罩层。 遮罩可以应用在 gif 动画上。 在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮 ，使之变成 ，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。 在被遮罩层中不能放置动态文本。【实战练习】监控的小球（望远镜）（1）新建一个文件
17、，在图层 1 的第 1 帧中插入一幅背景图片，并将其设置为与屏幕一样大小，在第 70 帧处插入帧。（2）新建一个“望远镜”图形元件，用去掉边框的椭圆工具绘制一个椭圆，并复制粘贴出另外一个，将两个圆重叠一部分放置，做成一个望远镜的样子。注意：这里望远镜的颜色无所谓。（3）新建一个图层 2，将“望远镜”图形元件拖放一个实例到其第一帧中，调整到合适的大小，放置在合适的位置。（4）分别在图层 2 的第 20 帧、第 40 帧和第 60 帧插入关键帧，并调整这三个关键帧中“望远镜”的位置，然后分别将该图层的第 1 帧、第 20 帧、第 40 帧和第 60 帧设置补间动画为“动作”。（5）在图层 2 的第 70 帧插入帧。
