遮罩和引导层

1、u 任务一 制作遮罩层动画u 任务二 制作引导层动画u 任务三 【突破提高】制作“天地水源”本章大纲本章大纲任务一 制作遮罩层动画（一） 【知识准备】遮罩层动画的原理1、创建遮罩层 前面提到一个遮罩效果的实现至少需要两个图层配合作用，上面的图层是遮罩层，下面的图层是被遮罩层，如图6-1所示，其中“图层2”是遮罩层，“图层1”是被遮罩层 。图图6-1 两个图层的遮罩两个图层的遮罩 （1 1）什么是遮罩）什么是遮罩 遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状

2、的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 （2 2）遮罩有什么用）遮罩有什么用在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。 创建遮罩的方法 （3 3）创建遮罩）创建遮罩 在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择【遮罩层】，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标（4 4）构成遮罩和

3、被遮罩层的元素）构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，即被遮罩层中相应位置的对象不可见。遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。 （5 5）遮罩中可以使用的动画形式）遮罩中可以使用的动画形式 可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一

4、个可以施展无限想象力的创作空间。 遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。 创建遮罩层，可以在选定的图层上单击鼠标右键，在弹出的快捷菜单中选择【遮罩层】命令，如图6-2所示。 被遮罩层可以有多个，那就是多层遮罩，如图6-3所示。其中“图层2”为遮罩层，其余的所有图层都是被遮罩层 。图图6-2 创建遮罩层创建遮罩层 图图6-3 多图层遮罩多图层遮罩 2、遮罩层动画的原理 与普通层不同，在具有遮罩层的场景

5、中，只能通过遮罩层上对象的形状，才可以看到被遮罩层上的内容，如图6-4所示。 将“图层2”转换为遮罩层之后，可以透过遮罩层（“图层2”）上月亮的形状看到被遮罩层（“图层1”）中与背景图片重叠的区域，如图6-5所示，而其他区域则看不到了。图图6-4 遮罩前的效果遮罩前的效果 图图6-5 遮罩后的效果遮罩后的效果 （二） 【典型案例】制作“荧荧之光” 【设计效果】 本案例将使用遮罩层动画来模拟在一个漆黑的山洞里使用火柴来观看神秘的“埃及壁画”的动画，其制作思路及效果如图6-6所示 。图图6-6 制作思路及效果制作思路及效果 导入背景和“火柴”元件制作“火柴”元件移动动画制作遮罩效果【操作步骤】1、

6、素材准备。（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）选中“火柴效果”图层上的“火柴”元件，

7、按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帧帧“火柴火柴”元件的位

8、置元件的位置 （5）在“火柴效果”和“遮罩”图层的第1帧第100帧之间创建动作补间动画，然后将“遮罩”图层转换为遮罩层，效果如图6-13所示 。图图6-13 设置遮罩设置遮罩 （6）保存并测试影片，模拟火柴效果的影片制作完成。案案 例例 小小 结结 本案例通过制作一个“荧荧之光”的效果讲述了以下知识点。 基础知识：基础知识：遮罩层动画的制作方法。 表现手法：表现手法：使用遮罩层动画和补间动画配合的方式制作光效。 一什么是引导层：一什么是引导层： 使用前面几个动画类型的方法制作动画时，使用前面几个动画类型的方法制作动画时，可以比较容易地实现对象的直线运动，但在实可以比较容易地实现对象的直线运动，

9、但在实际应用中，常常需要制作大量的曲线运动动画际应用中，常常需要制作大量的曲线运动动画，有时甚至还需要让物体按照预先设定的路径，有时甚至还需要让物体按照预先设定的路径（轨迹）运动。使用引导层动画可以很轻松地（轨迹）运动。使用引导层动画可以很轻松地满足这些要求。满足这些要求。简单来说，引导动画其实就简单来说，引导动画其实就是将一个运动的物体约束到一个路径上，然后是将一个运动的物体约束到一个路径上，然后通过设置运动物体关键帧在路径上的位置，来通过设置运动物体关键帧在路径上的位置，来得到想要的结果。引导图层就是用来摆放对象得到想要的结果。引导图层就是用来摆放对象运动路径的图层，它所起的作用在于确定了

10、指运动路径的图层，它所起的作用在于确定了指定对象的运动路线。定对象的运动路线。比如我们来让一个球按指比如我们来让一个球按指定的路线移动定的路线移动【知识准备】引导层动画的原理1、创建引导层和被引导层 制作一个引导层动画同样需要至少两个图层配合作用。上面的图层是引导层，下面的图层是被引导层。如图6-35所示，其中 “图层1”是引导层，“图层2”是被引导层。被引导层上的元素以引导层上的线条作为路径来运动。而引导层上的路径在发布时，并不会显示出来，其作用仅在于作为被引导层运动的路径。 创建引导层的方法：在图层上单击鼠标右键，在弹出的快捷菜单中选择【引导层】命令，如图6-36所示，即可完成引导层的创建

11、。图图6-35 引导层和被引导层引导层和被引导层 图图6-36 创建引导层创建引导层 被引导层同样可以有多个，那就是多层引导，如图6-37所示。图中“图层1”为引导层，其余的所有图层都是被引导层 。图图6-37 多层被引导多层被引导 2、引导层动画的原理 如图6-38所示为被引导层上小球在第1帧和第50帧处的位置，如图6-39所示，为小球的全部运动轨迹。小球在第小球在第1帧的位置帧的位置 小球在第小球在第50帧的位置帧的位置 图图6-38 设置小球起止位置设置小球起止位置 图图6-39 小球的运动轨迹小球的运动轨迹 引导层上的路径在发布后，并不会显示出来，只是作为被引导图形的运动轨引导层上的路

12、径在发布后，并不会显示出来，只是作为被引导图形的运动轨迹。在被引导层上被引导的图形必须是元件，而且必须创建补间动画，同时迹。在被引导层上被引导的图形必须是元件，而且必须创建补间动画，同时还需要将元件在关键帧处的还需要将元件在关键帧处的“变形中心变形中心”设置到引导层上的路径上，这样才设置到引导层上的路径上，这样才能成功创建引导层动画。能成功创建引导层动画。 （二） 【典型案例】制作“树叶上的毛毛虫” 【设计效果】 本案例将讲述如何使用引导层动画制作“毛毛虫效果”，其制作思路及效果如图6-40所示。 导入背景图片绘制引导线制作第1帧处的毛毛虫制作第1110帧处的毛毛虫制作引导层动画最终效果图图6

13、-40 制作思路及效果制作思路及效果 【操作步骤】1、素材准备。（1）新建一个Flash文档，（2）新建并重命名图层，创建的图层效果如图6-41所示。（3）选择【文件】/【导入】/【导入到舞台】命令，将教学素材中的“素材项目六树叶上的毛毛虫树叶.jpg”文件导入到舞台中，舞台效果如图6-42所示。（4）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材项目六树叶上的毛毛虫毛毛虫.fla”文件打开，将“毛身”和“毛头”元件拖入到当前【库】中，如图6-43所示。图图6-41 图层信息图层信息 图图6-42 导入树叶导入树叶 图图6-43 导入毛毛虫素材导入毛毛虫素材 2、制作毛毛虫效

14、果（1）为了后期制作方便，在制作毛毛虫效果之前首先绘制引导线，舞台效果如图6-44所示。图图6-44 绘制路径绘制路径 该路径的重要特点是曲线的开始部分和结尾部分都是直线，而中间在场景中的部分该路径的重要特点是曲线的开始部分和结尾部分都是直线，而中间在场景中的部分为曲线，这样绘制的好处在于能更好地控制被引导元件的旋转方向为曲线，这样绘制的好处在于能更好地控制被引导元件的旋转方向 。（2）将“路径”和“树叶”两个图层锁定，将“毛身”元件拖入“毛毛虫”图层上，设置其位置，如图6-45所示。毛身位置毛身位置 放大观察放大观察 图图6-45 设置设置“毛身毛身”元件的位置元件的位置 设置设置“毛身毛身

15、”元件位置的时候一定要注意要将元件的元件位置的时候一定要注意要将元件的“变形中心变形中心”放到路径上，如放到路径上，如图图6-45所示。如果所示。如果“变形中心变形中心”未在路径上，引导层动画将创建失败未在路径上，引导层动画将创建失败 。（3）选择【选择】工具，按住Ctrl键复制出15个的“毛身”元件，并确保每1个“毛身”元件的变形中心都在路径上，效果如图6-46所示。（4）将“毛头”元件拖入舞台，并设置其位置，如图7-47所示 。图图6-46 复制出毛毛虫的身体效果复制出毛毛虫的身体效果 图图6-47 放置头部放置头部 3、制作毛毛虫动画（1）选中所有的“毛身”和“毛头”元件，在其上单击鼠标

16、右键，在弹出快捷菜单中选择【分散到图层】命令，将“毛身”和“毛头”元件分散到各层，如图6-48所示。（2）此时，“毛毛虫”图层已经没有任何元件，所以将该图层删除。（3）将所有图层延长至1000帧，并在所有“毛身”和“毛头”图层的第1000帧处插入关键帧，然后设置其位置，如图6-49所示。 右键操作右键操作 图层信息图层信息 图图6-48 分散到图层分散到图层 确保所有确保所有“毛身毛身”和和“毛头毛头”元件的变形中心都在路径的结束部分上。元件的变形中心都在路径的结束部分上。 （4）在所有“毛身”和“毛头”图层的第1帧第1000帧之间创建动作补间动画，并在【属性】面板中勾选【调整到路径】复选框，

17、其参数设置，如图6-50所示 。 （5）将“路径”图层转换为引导层，将所有“毛身”和“毛头”图层转化为被引导层。（6）保存并测试影片，一只毛毛虫从树叶上爬过的效果制作完成。 图图6-49 设置毛毛虫的位置设置毛毛虫的位置 图图6-50 勾选【调整到路径】复选框勾选【调整到路径】复选框 案 例 小 结 本案例通过制作一个“树枝上的毛毛虫”效果讲述了以下知识点。 基础知识：基础知识：引导层动画的创建方法。 动画技巧：动画技巧：使用【调整到路径】选项来改善引导动画效果的方法。 表现手法：表现手法：使用多层引导动画模拟爬行类动物的方法。 （三） 【典型案例】制作“蝴蝶戏花” 【设计效果】 翩翩起舞的蝴

18、蝶是春天的精灵，艳丽的花朵则是蝴蝶的最爱。在本案例中，将使用引导层动画模拟“蝴蝶戏花”的艺术特效，其制作思路及效果如图6-51所示。导入背景图片绘制引导线1绘制引导线2制作蝴蝶的引导层动画最终效果1最终效果2图图6-51 制作思路及效果制作思路及效果 【操作步骤】1、导入素材布置场景。（1）新建一个Flash文档。（2）新建并重命名图层，设置图层的效果，如图6-52所示。（3）选择【文件】/【导入】/【打开外部库】命令，将教学素材中的“素材项目六蝴蝶戏花素材.fla”文件打开，如图6-53所示。图图6-52 图层信息图层信息 图图6-53 打开外部库打开外部库 （4）关闭外部库，将“花草”元件

19、拖入到“花草”图层上释放，并相对舞台居中对齐，使其刚好覆盖整个舞台，得到如图6-54所示的效果。设置完成后将“花草”图层锁定。（5）将“前面花”元件拖入到“前花”图层上释放，其位置如图6-55所示。设置完成后将“前花”图层锁定。至此场景的搭建就完成了 。 图图6-54 放入放入“花草花草”元件元件 图图6-55 放入放入“前面花前面花”元件元件 2、制作蝴蝶飞舞效果。（1）在“蝴蝶1路径”图层上绘制如图6-56所示的路径。 设计设计 “蝴蝶蝴蝶1”元件从舞台右边飞入，然后从元件从舞台右边飞入，然后从“前面花前面花”的后面飞过，停在一朵花儿的后面飞过，停在一朵花儿上，最后飞出舞台上，最后飞出舞台

20、 ，（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帧的位置和大小，如图

21、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”图层转换为其被引导层。测试影片，可以看到

22、“蝴蝶1”的飞舞动画就制作完成了，如图6-62所示 。 图图6-62 蝴蝶蝴蝶1飞舞效果飞舞效果 （8）“蝴蝶2”元件的制作和“蝴蝶1”元件的制作方法完全相同，这里给出“蝴蝶2”元件的飞舞路径和“蝴蝶2”元件在关键帧处的位置，由读者独立完成其制作，如图6-63所示 。 “蝴蝶蝴蝶2”元件的移动路径元件的移动路径 第第1帧帧 第第80帧和第帧和第120帧帧 第第170帧帧 图图6-63 “蝴蝶蝴蝶2”元件的信息元件的信息 （9）保存测试影片，一个美丽的蝴蝶戏花的效果制作完成。 案 例 小 结 本案例通过制作一个蝴蝶飞舞的效果讲述了以下知识点。 表现手法：表现手法：使用引导层动画制作随机飞舞的动画

23、效果。任务三 【突破提高】制作“天地水源” 【设计效果】 通过前面的讲解，相信读者已经对Flash遮罩层动画和引导层动画有了深刻的认识。在本案例中，将使用遮罩层动画制作水波效果，使用引导层动画制作“天地水源”的文字效果，最终完成“天地水源”动画效果，其制作思路及效果如图6-64所示 ，导入背景图片使用遮罩层制作水波效果使用引导层制作文字动画制作星星效果最终效果1最终效果2图图6-64 制作思路及效果制作思路及效果 【操作步骤】1、制作水波效果。（1）新建一个Flash文档，（2）新建图层并重命名图层，设置图层效果如图6-65所示。（3）在所有图层的第150帧处插入帧。（4）选择【文件】/【导入

24、】/【导入到舞台】命令，将教学素材中的“素材项目六天地水源天地水源.jpg”文件导入到“背景”图层上，舞台效果如图6-66所示。图图6-65 图层信息图层信息 图图6-66 导入图片导入图片 （5）选中导入的图片，按Ctrl+C 组合键进行复制，按Ctrl+Shift+V 组合键将其粘贴到“水波效果”图层上。为了操作方便，将“背景”图层隐藏。（6）选中“水波效果”图层上的图片，按Ctrl+B 组合键将其打散，使用【套索工具】选取水域图形，然后将其他部分的图形删除掉，得到如图6-67所示的效果。（7）选中水域图形，按F8 组合键将其转化为影片剪辑元件，并命名为“水波效果”。单击 按钮，进入元件内

25、部进行编辑。（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帧之间创建动作补间动画

26、。（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个“文字元件”的【Alph