Flash动画制作之—制作遮罩层动画

8.2.2
范例解析──制作“镜花水月”
拼图游戏曾一度风靡全球，是老少皆宜的一种娱乐方式。本案例 将通过多层遮罩动画，创造魔幻镜子拼图的效果，在充满乐趣的轻松 的氛围下，带领读者感受唯美的遮罩动画的奥妙。其制作思路及效果 如图8-34所示 。
打开模板
制作拼图动画
制作遮罩动画
最终效果2
最终效果1
制作清晰图片遮罩效果
图8-8 绘制矩形
图8-9 调整矩形角度
（4）将3个矩形放置到眼镜的左侧，效果如图8-10所示。 （5）在所有图层的第30帧处插入帧。 （6）在“光效”图层的第10帧处插入关键帧，并设置该帧处矩形 的位置如图8-11所示 。
图8-10 放置矩形位置
图8-11 调整矩形位置
（7）在“光效”图层的第20帧处插入关键帧，并设置该帧处矩形 的位置如图8-12所示。 （8）分别在第1帧～第10帧之间、第10帧～第20帧之间创建形状 补间动画。 （9）在“镜片”图层上单击鼠标右键，在弹出的快捷菜单中选择 【遮罩层】命令，将其转化为遮罩层，图层效果如图8-13所示 。
2、在默认图层1的第10帧处插入帧，然后新建图层并重命名图层， 直至图层效果如图8-28所示。 3、执行【文件】/【导入】/【导入到舞台】菜单命令，将教学资源 中的“素材\第8讲\瀑布效果\瀑布图片.jpg”文件导入到“背景 图”图层，设置图片的位置坐标x、y都为“0”，宽高为 “1024px×758px”，使其刚好覆盖整个舞台，图层效果如图829所示。
（2）将默认“图层1”重命名为“背景”层，并在第160帧处插入帧 。 （3）执行【文件】/【导入】/【导入到舞台】菜单命令，将教学资 源中的“素材\第8讲\海边美景\背景.jpg”文件打开，设置其尺 寸为“750 px×500px”，相对舞台居中对齐，舞台效果如图817所示 。
图8-17 设置背景
图8-20 绘制矩形
（7）在“海面”图层第10帧处插入帧，在“遮罩”图层的第10帧 处插入关键帧，并设置“遮罩”元件在第1帧处的位置坐标x、y分 别为“－390.0”和“51.0”，第10帧处的位置坐标x、y分别为“－ 390.0”和“57”，效果如图8-21所示。
第1帧处矩形的位置
第10帧处矩形的位置
图8-12 设置矩形位置
图8-13 图层效果
（10）选中“光效”图层的第1帧，在【属性】面板中设置【缓动 】为“－100”，选中“光效”图层的第10帧，在【属性】面板 中设置【缓动】为“100”，如图8-14所示 。
第1帧处【缓动】参数
第10帧处【缓动】参数
图8-14 设置缓动
（11）保存测试影片，一个动感的眼镜反光效果制作完成，如图 8-15所示 。
2、制作海水流动效果。 （1）新建一个图形元件并重命名为“海面”图层，单击按钮进入 元件的编辑模式。 （2）将默认的“图层1”重命名为“海面”图层，并在“海面”图 层之上新建一个图层并重命名为“遮罩”图层，【时间轴】效 果如图8-18所示。 （3）返回主场景，选中“背景”图层上的“背景图片”，按 Ctrl+C 快捷键复制，然后双击【库】面板中的“海面”图形元 件进入元件的编辑模式，选中“海面”图层，按Ctrl+V快捷键 粘贴。 （4）选择“背景图片”按Ctrl+B快捷键将图片打散。 （5）利用【选择】工具将“背景图片”海面以上的部分选中，按 Delete键删除，再利用【橡皮擦】工具将海面以外的部分擦除 ，效果如图8-19所示。 擦除时可配合【缩放】工具进行精细的擦出，以使得 水流效果更加逼真 。
图8-24 图层设置
图8-25 导入海鸥
（3）选择“前景”图层，执行【文件】/【导入】/【导入到舞台】 菜单命令，将教学资源中的“素材\第8讲\海边美景\船头.png” 文件打开，设置其尺寸为“750px×500px”，相对舞台居中对 齐。 （4）执行【文件】/【导入】/【导入到库】菜单命令，将教学资源 中的“素材\第8讲\海边美景\海鸥-海水.wav”文件导入到【库】 中。 （5）选中“音乐”图层的第1帧，在【属性】面板中做如图8-26所 示的设置，此时的【时间轴】效果如图8-27所示。
图8-34 制作思路及效果
1、制作拼图效果。 （1）打开教学资源中的“素材\第8讲\镜花水月\镜花水月-模板.fla”文 件，场景效果如图8-35所示。
图8-35 模板主界面效果
图层“遮罩”仅用来遮挡超出舞台范围的影片内容 ，确保影片最大化播放时不会出现其内容逸出舞台 的现象。读者也可以根据自己的喜好，将其换做各 种相框，只需注意调整大小和相对于舞台居中对齐 即可 。 （2）在“背景”图层之上，“遮罩”图层之下新建并重命名图层 ，直至图层效果如图8-36所示。 （3）查看【库】面板，如图8-37所示。双击其中的“拼图”影片 剪辑元件，进入影片剪辑编辑模式，【时间轴】和影片剪辑的场 景如图8-38所示。
图8-15 最终效果
8.1.3 范例解析（二）──制作“海边美景”
本案例将使用 Flash 8 中的遮罩功能来制作一个海边美景的效 果，制作思路及效果如图8-16所示 。
图8-16 制作思路及效果
1、导入背景。 （1）新建一个Flash文档，设置文档【尺寸】为“750px×500px” ，文档其他属性使用默认参数。
图8-29 图层效果
图8-30 导入图片
4、选中“背景”图层的第1帧，按下Ctrl+Alt+C 快捷键复制该帧， 选中“被遮罩”图层的第1帧，按下Ctrl+Alt+V快捷键进行粘贴 帧操作 。
5、选中“被遮罩”图层的第1帧舞台中的图片，按下Ctrl+B 快捷键将 图片打散，然后删除多余部分，保留水流部分图形，如图8-31所示 。
图8-6 打开制作模板
图8-7 绘制镜片图形
2、制作反光效果。 （1）在“眼镜”图层之上新建图层并重命名为“光效”层。 （2）选择【矩形】工具，在【属性】面板中设置【填充颜色】为 “白色”，【笔触颜色】为“无”，然后在“光效”图层上 绘制3个矩形，如图8-8所示。 （3）利用【任意变形】工具将3个矩形同时转过一定角度，得到 如图8-9所示的效果。
第5帧场景效果
第40帧场景效果
第70帧场景效果
图8-44 场景的拼图效果
2、制作“拼图遮罩”元件 。 （1）新建一个影片剪辑，重命名为“拼图遮罩” 。
（2）进入元件的编辑模式，重命名“图层1”为“水月”层，并在 “水月”图层上新建一个图层，重命名为“拼图遮罩”层，效 果如图8-45所示。 （3）将【库】面板中的影片剪辑元件“拼图”拖动到 “拼图遮罩 ”图层上，在【属性】面板中设置其位置坐标x、y分别为“0” 、“0”，效果如图8-46所示。
图8-31 选出水流部分
6、在“遮罩”图层上绘制矩形阵列，制作水流遮罩动画，如图8-32所 示
第1帧矩形位置
第10帧矩形位置
图层效果
图8-32 创建遮罩层动画
7、保存测试影片，一个瀑布效果制作完成 。
8.2
多层遮罩动画
通过前面一节课的学习，相信同学们已经掌握了遮罩层动画的 创建方法和设计原理，在本小节中，将使用多层遮罩层动画来制作复 杂的Flash动画 。
图8-26 属性面板参数
图8-27 【时间轴】效果二
（6）保存测试影片，一个海水流动的动画制作完成 。
8.1.4
课堂练习──制作“瀑布效果”
请同学们使用制作“海边美景”水流部分的方法制作一个逼真 的瀑布效果，如图8-28所示 。
图8-28 瀑布效果
1、导新建一个Flash文档，设置文档【尺寸】为“550px×380px” ，其他属性使用默认参数。
图8-21 “遮罩”元件的位置
（8）在“遮罩”图层的第1帧～第10帧之间创建动作补间动画，然 后将“遮罩”图层转化为遮罩层，如图8-22所示。 （9）返回主场景，在“背景”图层之上新建一个图层并重命名为“ 海水”，将“海面”图形元件拖入到场景中，并设置其位置坐标 x、y分别为“0.0”和“308.3”。 （10）至此流水特效制作完成，保存并测试影片，得到如图8-23所 示的效果 。
（7）选中图层“2”的第1帧～第10帧，拖动至如图8-42所示位置 。
图8-42 【时间轴】状态二
（8）使用同样方法，将图层“3”～图层“14”的第1帧～第10帧拖 动至如图8-43所示位置 。
图8-43
【时间轴】状态三
（9）拖动播放头，观察场景的变化，发现形成了漂亮的拼图效果， 如图8-44所示。
图8-36 新建并重命名图层 图8-37 【库】面板 图8-38 素材“拼图”的场景效果
（4）分别在所有图层的第10帧和第100帧处插入关键帧和帧，并在 所有图层的第1帧～第10帧间插入形状补间，此时【时间轴】状 态如图8-39所示 。
图8-39 【时间轴】状态一
（5）选中图层“1”的第1帧，单击场景中的拼图，在【属性】面板 中设置其位置坐标x、y分别为“﹣67.3”、“﹣69.9”，效果如 图8-40所示。
遮罩层中的对象必须是色块、文字、符号、影片剪辑元件 （MovieClip）、按钮或群组对象，而被遮层不受限制
8.1.2
范例解析（一）──创建遮罩层动画练习
请同学们在老师的Байду номын сангаас领下进一步熟悉遮罩层动画的创建方法 和原理，并按要求完成以下操作 。
1、绘制镜片图形。 （1）打开教学资源中的“素材\第8讲\眼镜反光特效\制作模板.fla”， 如图8-6所示。 （2）在“眼镜”图层之上新建一个图层，并重命名为“镜片”层。 （3）在“镜片”图层上利用【线条】工具和【选择】工具绘制出眼 镜的两个镜片形状，如图8-7所示 。
图8-22 完成“海水流动”元件的创建
图8-23 完成海水流动动画
观看动画发现，整个动画只有水流效果，画面动画不够 丰富有趣，下面针对此问题为动画场景添加两只飞翔的 海鸥 。
3、导入海鸥 。 （1）设置图层如图8-24所示 。
（2）选择“海鸥”图层，执行【文件】/【导入】/【导入到舞台】 菜单命令，将教学资源中的“素材\第8讲\海边美景\海鸥.swf” 文件打开，将海鸥飞翔的动画导入到舞台中，效果如图8-25所 示。
8.2.1 知识点讲解
将普通图层拖动到遮罩层或被遮罩层的下面，即可将普通图层 转化为其被遮罩层，在一组遮罩中，遮罩层只能有一个，而被 遮罩层可以有多个，那就是多层遮罩，如图8-33所示，其中“ 图层2”为遮罩层，其余的所有图层都是被遮罩层。
图8-33 多层遮罩
多层遮罩的创建原理十分简单，但是要使用多层遮罩动画做出 精美的动画作品应该注意以下几点。 从现实生活中寻找创作灵感。 使用遮罩层动画来模拟表达创意。 多种动画技术结合使用。 在制作过程中不断完善自己的作品
图8-40 图层“1”第1帧【属性】面板
（6）依次选中其他图层的第1帧，单击场景中的拼图，分别在【属 性】面板中设置其位置坐标，直至如图8-41所示效果 。
图8-41 第1帧处场景中效果
图8-41中的【时间轴】第1帧处场景中的效果，仅为其中 一种调整方案，读者可以自己随意调整各碎片的位置， 只需达到将所有碎片散开来，空出中心的效果即可
图8-18 【时间轴】效果一
图8-19 海面
（6）选择【矩形】工具，在【属性】面板中设置【笔触颜色】为 “无”，【填充颜色】为“黑色”，在“遮罩”图层上绘制一个宽 高为“780px×4px”的矩形，再复制出若干矩形得到如图8-20 所示的效果，然后将绘制的所有矩形选中，将其转化为影片剪 辑元件，并命名为“遮罩” 选中所有的矩形，利用【对齐】面板中的【水平中齐】 和【垂直居中分布】两个按钮可以快速将矩形位置 调整好。
第8讲
制作遮罩层动画
学习目标
掌握遮罩层动画制作眼镜反光效果的方法 。
掌握遮罩层动画制作流水效果的方法 。
掌握遮罩层动画制作瀑布效果的方法 。
掌握遮罩层动画表现镜面拼图效果的方法 。
掌握遮罩动画表现裂纹、断桥效果的方法 。
本章大纲
• 8.1 遮罩层动画原理 • 8.2 多层遮罩动画
• 8.3 课后作业
8.1 遮罩层动画原理
在开始对遮罩层动画进行典型案例分析之前，首先来学习遮罩 层动画的创建方法及其原理，为后续的提高打下理论基础 。
8.1.1 知识点讲解
一、创建遮罩层。
图8-1 两个图层的遮罩
图8-3 【图层属性】对话框
图8-2 用鼠标右键创建遮罩层
二、遮罩原理。
图8-4 遮罩前的效果
图8-5 遮罩后的效果