Flash自学-第6章课件

掌握图层动画的创建方法及原理。掌握使用遮罩层动画表达光效的方法。掌握使用遮罩层动画表达明暗的方法。掌握综合应用两种图层动画进行设计的方法。本章学习要求本章大纲任务一制作遮罩层动画任务二制作引导层动画任务三【突破提高】——制作“天地水源”任务一制作遮罩层动画（一）【知识准备】——遮罩层动画的原理1、创建遮罩层前面提到一个遮罩效果的实现至少需要两个图层配合作用，上面的图层是遮罩层，下面的图层是被遮罩层，如图6-1所示，其中“图层2”是遮罩层，“图层1”是被遮罩层。图6-1两个图层的遮罩

创建遮罩层，可以在选定的图层上单击鼠标右键，在弹出的快捷菜单中选择【遮罩层】命令，如图6-2所示。被遮罩层可以有多个，那就是多层遮罩，如图6-3所示。其中“图层2”为遮罩层，其余的所有图层都是被遮罩层。图6-2创建遮罩层

图6-3多图层遮罩

2、遮罩层动画的原理与普通层不同，在具有遮罩层的场景中，只能通过遮罩层上对象的形状，才可以看到被遮罩层上的内容，如图6-4所示。将“图层2”转换为遮罩层之后，可以透过遮罩层（“图层2”）上月亮的形状看到被遮罩层（“图层1”）中与背景图片重叠的区域，如图6-5所示，而其他区域则看不到了。图6-4遮罩前的效果

图6-5遮罩后的效果（二）【典型案例】——制作“荧荧之光”【设计效果】本案例将使用遮罩层动画来模拟在一个漆黑的山洞里使用火柴来观看神秘的“埃及壁画”的动画，其制作思路及效果如图6-6所示。图6-6制作思路及效果

导入背景和“火柴”元件制作“火柴”元件移动动画制作遮罩效果【操作步骤】1、素材准备。（1）新建一个Flash文档。（2）新建并重命名图层，设置后的图层效果如图6-7所示。（3）为了把讲述重点放到遮罩层动画设计上，本案例直接导入已做好的素材文件，如图6-8所示。图6-7图层信息

图6-8【库】面板信息

（4）双击“火柴”元件进入其编辑界面，可以发现火柴第1帧和第2帧处的效果如图6-9所示。（5）选中“埃及壁画”图层，选择【文件】/【导入】/【导入到舞台】命令，舞台效果如图6-10所示。第1帧

第2帧

图6-9火柴的两种状态图6-10导入图片2、制作遮罩层动画。（1）选中“火柴效果”图层上的“火柴”元件，按Ctrl+C

组合键复制，然后按Ctrl+Shift+V

组合键将其粘贴到“遮罩”图层上。（2）为了操作方便，将“埃及壁画”图层锁定。利用【选择】工具将“火柴效果”图层和“遮罩”图层上的“火柴”元件全部圈选中，设置其宽、高分别为“140”px、“140”px，并设置其位置，如图6-11所示。（3）在“火柴效果”和“遮罩”图层的第100帧处插入关键帧，在“埃及壁画”图层的第100帧处插入帧。（4）在第100帧处选中“火柴效果”和“遮罩”图层上的“火柴”元件，设置其位置，如图6-12所示。图6-11第1帧“火柴”元件的位置图6-12第100帧“火柴”元件的位置（5）在“火柴效果”和“遮罩”图层的第1帧～第100帧之间创建动作补间动画，然后将“遮罩”图层转换为遮罩层，效果如图6-13所示

。图6-13设置遮罩（6）保存并测试影片，模拟火柴效果的影片制作完成。。案例小结本案例通过制作一个“荧荧之光”的效果讲述了以下知识点。基础知识：遮罩层动画的制作方法。

表现手法：使用遮罩层动画和补间动画配合的方式制作光效。

（三）【典型案例】——制作“建筑物过光效果”【设计效果】在本案例中，将在现代建筑上使用过光特效来表达其现代、炫目和金属感等艺术效果，其制作思路及效果如图6-14所示。【操作步骤】1、布置舞台。（1）新建一个Flash文档（2）新建图层并重名图层，设置图层效果，如图6-15所示。（3）选中“大楼”图层，选择【文件】/【导入】/【导入到舞台】命令，将教学素材中的“素材\项目六\建筑物过光效果\建筑物.jpg”文件导入到舞台中，如图6-16所示。导入背景图片输入文字描边建筑物并填充正面和侧面制作边界过光动画制作正面和侧面过光动画制作文字过光动画图6-14制作思路及效果（4）选中“大楼”图层上方的“文字”图层，利用【文本】工具，文字的属性设置如图6-17所示，最终效果如图6-18所示。图6-15图层信息图6-16导入建筑物图片图6-17设置文本属性图6-18输入文字2、制作建筑物边界的过光效果。建筑物的过光效果可以分为边界过光和主体过光两种。

（1）如图6-19所示的边界线。（2）6-20所示的建筑物的正面和侧面部分。（3）-（6）略。图6-19设计效果图6-20填充建筑遮罩层中的对象必须是色块、文字、符号、影片剪辑元件（MovieClip）、按钮或群组对象。所以，此处需要将线条转换为填充。（7）选择【矩形】工具，参数设置及最终效果如图6-21所示。【颜色】面板矩形图6-21绘制边界过光（8）在“边界过光”图层的第14帧处插入关键帧，设置“矩形”的x坐标为“340”，如图6-22所示。（9）在“边界过光”图层的第15帧处插入关键帧，将“矩形”逆时针旋转90°，得到如图6-23所示的效果。（10）在“边界过光”图层的第27帧处插入关键帧，设置“矩形”的y坐标为“20”，如图6-24所示，在第15帧～第27帧之间创建形状补间动画。（11）在“边界过光”图层的第28帧处插入关键帧，将“矩形”逆时针旋转180°，设置“矩形”的宽、高分别为“290”px、“70”px，位置坐标x、y分别为“390”、“－40”，得到如图6-25所示的效果。图6-22设置矩形的位置图6-23旋转矩形图6-24设置第27帧处矩形的位置图6-25设置第28帧处矩形的位置（12）在“边界过光”图层的第44帧处插入关键帧，设置“矩形”的y坐标为“570”，如图6-26所示。（13）至此，“边界过光”图层的动画制作完毕。3、制作建筑物正面侧面过光效果。（1）为了操作方便，将“边界”和“边界过光”图层隐藏，将“大楼正面”和“大楼侧面”图层取消隐藏，舞台效果如图6-27所示。图2-26设置第4帧处矩形的位置图2-27舞台效果（2）在“大楼正面过光”图层的第44帧处插入关键帧，利用【矩形】工具绘制一个宽、高分别为“200”px、“110”px，位置坐标x、y分别为“390”、“580”的矩形，再利用【填充变形】工具调整其线性填充，如图6-28所示。（3）为了使过光效果看起来更为贴合建筑物表面，利用【任意变形】工具将矩形逆时针转过一定角度，效果如图6-29所示。

图6-28绘制矩形图6-29旋转矩形（4）在“大楼正面过光”图层的第58帧处插入关键帧，设置“矩形”的y坐标为“－50”，如图6-30所示。

图6-30设置第58帧处矩形的位置（5）选择“大楼正面”图层，将其转化为遮罩层。至此，大楼正面过光的动画就制作完成了。（6）大楼侧面过光效果的制作方法和大楼正面过光效果的制作方法一样，这里给出大楼侧面过光所需“矩形”在第58帧处和第75帧处的位置，如图6-31所示

。

第58帧处矩形的位置第75帧处矩形的位置图6-31制作大楼侧面过光4、制作“摩天大楼”文字过光效果。（7）在“大楼”图层上面的“文字”图层上复制一帧，然后在“边界过光”图层下面的“文字”图层上的第75帧处粘贴帧。（8）在“文字过光”图层的第75帧处插入关键帧，利用【矩形】工具和【任意变形】工具绘制如图6-32所示的矩形效果。（9）在“文字过光”图层的第90帧处插入关键帧，设置矩形的位置，如图6-33所示。图6-32绘制文字过光矩形图6-33设置矩形的位置（10）将“文字过光”图层的第75帧～第90帧选中，复制帧，再选中第95帧粘贴帧，完成第2次“文字过光”效果的制作。将“文字过光”图层超出第110帧的其他帧删除，将“文字过光”图层上面的“文字”图层转换为遮罩层，得到如图6-34所示的图层效果。图6-34最终图层效果（11）至此，影片制作完成，保存并测试影片。一个具有十足现代感的建筑物过光效果制作完成。案例小结本案例通过制作一个“荧荧之光”的效果讲述了以下知识点。

基础知识：遮罩层动画的制作方法。

表现手法：使用遮罩层动画和补间动画配合的方式制作光效。

任务二制作引导层动画（一）【知识准备】——引导层动画的原理1、创建引导层和被引导层

制作一个引导层动画同样需要至少两个图层配合作用。上面的图层是引导层，下面的图层是被引导层。如图6-35所示，其中“图层1”是引导层，“图层2”是被引导层。创建引导层的方法：在图层上单击鼠标右键，在弹出的快捷菜单中选择【引导层】命令，如图6-36所示，即可完成引导层的创建。图6-35引导层和被引导层图6-36创建引导层被引导层同样可以有多个，那就是多层引导，如图6-37所示。图中“图层1”为引导层，其余的所有图层都是被引导层。图6-37多层被引导2、引导层动画的原理如图6-38所示为被引导层上小球在第1帧和第50帧处的位置，如图6-39所示，为小球的全部运动轨迹。小球在第1帧的位置小球在第50帧的位置图6-38设置小球起止位置图6-39小球的运动轨迹引导层上的路径在发布后，并不会显示出来，只是作为被引导图形的运动轨迹。在被引导层上被引导的图形必须是元件，而且必须创建补间动画，同时还需要将元件在关键帧处的“变形中心”设置到引导层上的路径上，这样才能成功创建引导层动画。（二）【典型案例】——制作“树叶上的毛毛虫”【设计效果】本案例将讲述如何使用引导层动画制作“毛毛虫效果”，其制作思路及效果如图6-40所示。导入背景图片绘制引导线制作第1帧处的毛毛虫制作第1110帧处的毛毛虫制作引导层动画最终效果图6-40制作思路及效果【操作步骤】1、素材准备。（1）新建一个Flash文档，（2）新建并重命名图层，创建的图层效果如图6-41所示。（3）选择【文件】/【导入】/【导入到舞台】命令，将教学素材中的“素材\项目六\树叶上的毛毛虫\树叶.jpg”文件导入到舞台中，舞台效果如图6-42所示。（4）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材\项目六\树叶上的毛毛虫\毛毛虫.fla”文件打开，将“毛身”和“毛头”元件拖入到当前【库】中，如图6-43所示。图6-41图层信息图6-42导入树叶图6-43导入毛毛虫素材2、制作毛毛虫效果（1）为了后期制作方便，在制作毛毛虫效果之前首先绘制引导线，舞台效果如图6-44所示。图6-44绘制路径该路径的重要特点是曲线的开始部分和结尾部分都是直线，而中间在场景中的部分为曲线，这样绘制的好处在于能更好地控制被引导元件的旋转方向。（2）将“路径”和“树叶”两个图层锁定，将“毛身”元件拖入“毛毛虫”图层上，设置其位置，如图6-45所示。毛身位置放大观察图6-45设置“毛身”元件的位置设置“毛身”元件位置的时候一定要注意要将元件的“变形中心”放到路径上，如图6-45所示。如果“变形中心”未在路径上，引导层动画将创建失败。（3）选择【选择】工具，按住Ctrl键复制出15个的“毛身”元件，并确保每1个“毛身”元件的变形中心都在路径上，效果如图6-46所示。（4）将“毛头”元件拖入舞台，并设置其位置，如图7-47所示。图6-46复制出毛毛虫的身体效果图6-47放置头部3、制作毛毛虫动画（1）选中所有的“毛身”和“毛头”元件，在其上单击鼠标右键，在弹出快捷菜单中选择【分散到图层】命令，将“毛身”和“毛头”元件分散到各层，如图6-48所示。（2）此时，“毛毛虫”图层已经没有任何元件，所以将该图层删除。（3）将所有图层延长至1000帧，并在所有“毛身”和“毛头”图层的第1000帧处插入关键帧，然后设置其位置，如图6-49所示。

右键操作图层信息图6-48分散到图层确保所有“毛身”和“毛头”元件的变形中心都在路径的结束部分上。（4）在所有“毛身”和“毛头”图层的第1帧～第1000帧之间创建动作补间动画，并在【属性】面板中勾选【调整到路径】复选框，其参数设置，如图6-50所示。（5）将“路径”图层转换为引导层，将所有“毛身”和“毛头”图层转化为被引导层。（6）保存并测试影片，一只毛毛虫从树叶上爬过的效果制作完成。

图6-49设置毛毛虫的位置图6-50勾选【调整到路径】复选框案例小结本案例通过制作一个“树枝上的毛毛虫”效果讲述了以下知识点。

基础知识：引导层动画的创建方法。

动画技巧：使用【调整到路径】选项来改善引导动画效果的方法。

表现手法：使用多层引导动画模拟爬行类动物的方法。

（三）【典型案例】——制作“蝴蝶戏花”【设计效果】翩翩起舞的蝴蝶是春天的精灵，艳丽的花朵则是蝴蝶的最爱。在本案例中，将使用引导层动画模拟“蝴蝶戏花”的艺术特效，其制作思路及效果如图6-51所示。导入背景图片绘制引导线1绘制引导线2制作蝴蝶的引导层动画最终效果1最终效果2图6-51制作思路及效果【操作步骤】1、导入素材布置场景。（1）新建一个Flash文档。（2）新建并重命名图层，设置图层的效果，如图6-52所示。（3）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材\项目六\蝴蝶戏花\素材.fla”文件打开，如图6-53所示。图6-52图层信息图6-53打开外部库（4）关闭外部库，将“花草”元件拖入到“花草”图层上释放，并相对舞台居中对齐，使其刚好覆盖整个舞台，得到如图6-54所示的效果。设置完成后将“花草”图层锁定。（5）将“前面花”元件拖入到“前花”图层上释放，其位置如图6-55所示。设置完成后将“前花”图层锁定。至此场景的搭建就完成了。

图6-54放入“花草”元件图6-55放入“前面花”元件2、制作蝴蝶飞舞效果。（1）在“蝴蝶1路径”图层上绘制如图6-56所示的路径。

设计“蝴蝶1”元件从舞台右边飞入，然后从“前面花”的后面飞过，停在一朵花儿上，最后飞出舞台，（2）将“蝴蝶1”元件拖入到“蝴蝶1”图层上释放，利用【任意变形】工具设置其“变形中心”到蝴蝶头部位置，如图6-57所示。图6-56绘制“蝴蝶1”元件的移动路径图6-57设置“蝴蝶1”元件的“变形中心”（3）利用【选择】工具，将“蝴蝶1”元件移动到“蝴蝶1路径”的最右端，效果如图6-58所示。（4）在所有图层的第170帧处插入帧，在“蝴蝶1”图层的第100帧处插入关键帧，并在第100帧处放置“蝴蝶1”元件到如图6-59所示的位置。（5）在第120帧处插入关键帧，在第170帧处插入关键帧，并设置“蝴蝶1”在第170帧的位置和大小，如图6-60所示。

此时缩小“蝴蝶1”元件是为了表现蝴蝶飞远的效果。图6-58调整蝴蝶位置到最右端图6-59调整蝴蝶在第100帧处的位置图6-60调整蝴蝶在第170帧处的位置（6）“蝴蝶1”元件飞舞的几个重要位置就设置完成了，在“蝴蝶1”图层的第1帧～第100帧之间创建动作补间动画，在第120帧～第170帧之间创建动作补间动画，图层效果如图6-61所示。图6-61图层效果（7）将“蝴蝶1路径”图层转换为引导层，将“蝴蝶1”图层转换为其被引导层。测试影片，可以看到“蝴蝶1”的飞舞动画就制作完成了，如图6-62所示

。图6-62蝴蝶1飞舞效果（8）“蝴蝶2”元件的制作和“蝴蝶1”元件的制作方法完全相同，这里给出“蝴蝶2”元件的飞舞路径和“蝴蝶2”元件在关键帧处的位置，由读者独立完成其制作，如图6-63所示

。“蝴蝶2”元件的移动路径第1帧第80帧和第120帧第170帧图6-63“蝴蝶2”元件的信息（9）保存测试影片，一个美丽的蝴蝶戏花的效果制作完成。案例小结本案例通过制作一个蝴蝶飞舞的效果讲述了以下知识点。

表现手法：使用引导层动画制作随机飞舞的动画效果。任务三【突破提高】——制作“天地水源”

【设计效果】通过前面的讲解，相信读者已经对Flash遮罩层动画和引导层动画有了深刻的认识。在本案例中，将使用遮罩层动画制作水波效果，使用引导层动画制作“天地水源”的文字效果，最终完成“天地水源”动画效果，其制作思路及效果如图6-64所示，导入背景图片使用遮罩层制作水波效果使用引导层制作文字动画制作星星效果最终效果1最终效果2图6-64制作思路及效果【操作步骤】1、制作水波效果。（1）新建一个Flash文档，（2）新建图层并重命名图层，设置图层效果如图6-65所示。（3）在所有图层的第150帧处插入帧。（4）选择【文件】/【导入】/【导入到舞台】命令，将教学素材中的“素材\项目六\天地水源\天地水源.jpg”文件导入到“背景”图层上，舞台效果如图6-66所示。图6-65图层信息图6-66导入图片（5）选中导入的图片，按Ctrl+C

组合键进行复制，按Ctrl+Shift+V

组合键将其粘贴到“水波效果”图层上。为了操作方便，将“背景”图层隐藏。（6）选中“水波效果”图层上的图片，按Ctrl+B

组合键将其打散，使用【套索工具】选取水域图形，然后将其他部分的图形删除掉，得到如图6-67所示的效果。（7）选中水域图形，按F8

组合键将其转化为影片剪辑元件，并命名为“水波效果”。单击按钮，进入元件内部进行编辑。（8）将默认“图层1”重命名为“水域图形”，新建图层并重命名为“水波遮罩”图层，如图6-68所示。图6-67水域图形图6-68图层信息（9）利用【矩形】工具在“水波遮罩”图层上绘制一个矩形，设置宽、高分别为“800”px“5”px，然后复制出如图6-69所示的矩形阵列。（10）选中所有矩形，按F8键将其转换为影片剪辑元件，并命名为“水波遮罩”。（11）在“水域图形”图层的第10帧处插入帧，在“水波遮罩”图层的第10帧处插入关键帧，并将“水波遮罩”元件向屏幕下方移动“7”px，如图6-70所示。（12）在“水波遮罩”图层的第1帧～第10帧之间创建动作补间动画。（13）将“水波遮罩”图层转换为遮罩层，水波效果就制作完成了。图6-69制作遮罩阵列图6-70向下移动水波遮罩元件2、制作文字运动效果。（1）返回主场景，在“文字路径”图层上绘制如图6-71所示的路径。（2）在“天”、“地”、“水”、“源”4个图层的第30帧处插入关键帧（3）将4个文字元件的位置设置到“文字路径”的最上端，并在【属性】面板中设置“文字元件”的【Alpha】值为“0%”，舞台效果如图6-72所示。图6-71绘制路径图6-72舞台效果（4）在“天”、“地”、“水”、“源”4个图层的第90帧处插入关键帧，在【属性】面板中设置4个“文字元件”的【Alpha】值为“80%”，如图6-73所示设置其位置。（5）在“天”、“地”、“水”、“源”4个图层的第30帧～第90帧之间创