flash教程之-011遮罩动画

1、项目七 创建高级动画 创建遮罩动画 创建骨骼动画 场景和动画预设 任务一 创建遮罩动画 任务说明 遮罩动画是Flash常用的动画制作手法之一，利用它可以制作渐隐渐显、放大镜、百叶窗、波纹和图片切换等动画效果。本任务将带领读者学习创建遮罩动画的方法。 创建遮罩层 遮罩层是Flash中的一种特殊图层，在遮罩层中绘制对象的区域会成为透明区域，而非对象区域则完全不透明，可以透过遮罩层内的对象看到其下面图层的内容。 创建遮罩层的方法：在图层上点击右键，在弹出的下拉菜单中选择“遮罩层”命令，图层名称前面的图标改变如图所示，图层2前的图标为遮罩层，图层1前的图标为被遮罩层。预备知识 遮罩动画是利用遮罩图层创

2、建的，使用遮罩图层后，被遮罩层上的内容就像通过一个窗口显示出来一样，这个窗口便是遮罩层上的对象。播放动画时，遮罩层上的对象不会显示，被遮罩层上位于遮罩层对象之外的内容也不会显示。 遮罩图层的作用 制作动画时，可以在遮罩层或被遮罩层上创建任何形式的动画，例如传统补间动画、补间动画和形状补间动画等，从而制作出各种特殊的动画效果。下面通过一个简单的实例，介绍创建遮罩动画的方法。 拖入图像并设置其坐标1.打开素材文档，在“图层1”上方新建1个图层，并将两个图层分别命名为“图片”和“遮罩”。将“库”面板中的“图片.jpg”位图素材拖到“图片”图层的舞台中，并在“属性”面板中将其“x”和“y”坐标都设为“

3、0” 。 创建“遮罩”图形元件 2.选择“矩形工具”，在“遮罩”图层中绘制一个比舞台略大的任意颜色的矩形，然后将其转换为名为“遮罩”的图形元件 。 创建传统补间动画 创建遮罩动画 3.将“遮罩”图层中的“遮罩”元件实例向上移出舞台，然后在所有图层的第40帧插入普通帧，再在“遮罩”图层第15帧和第30帧处插入关键帧。 将“遮罩”图层第30帧中的“遮罩”元件实例移到舞台正上方，使其覆盖整个舞台，然后在“遮罩”图层第15帧与第30帧之间创建传统补间动画。4.在“遮罩”图层的图层名称上右击，在弹出的快捷菜单中选择“遮罩层”菜单，即可创建遮罩动画 。 下面说明一下遮罩动画的一些应用技巧。 在设置遮罩图层

4、时，系统默认将遮罩图层下面的一个图层设置为被遮罩图层，当需要使一个遮罩图层遮罩多个图层时，只需将该图层拖至遮罩图层下方即可。 要取消被遮罩图层同遮罩图层之间的遮罩关系，即将被遮罩层设置为普通层，只需将被遮罩图层拖到遮罩图层上方即可。无论遮罩层上的对象是何种颜色或透明度，是图像、图形还是元件实例，遮罩效果都一样。此外，要在Flash的舞台中显示遮罩效果，必须锁定遮罩层和被遮罩层。 下面通过制作聚光灯效果来介绍遮罩层的使用，具体操作步骤如下：（1）按“Ctrl+N”组合键新建一个Flash文档。（2）按“Ctrl+J”组合键弹出“文档属性”对话框，其参数设置：尺寸为550*300PX，背景颜色白色

5、，设置完成后单击“确定”按钮。 （3）选择工具箱中的文字工具，在舞台上输入文字“Flash CS5 基础与实例教程”。创建遮罩动画 u实例一：制作聚光灯效果（4）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，如图所示。 插入图层创建遮罩动画u制作聚光灯效果 （5）选择工具箱中的椭圆工具，在图层2上绘制一个椭圆，如图所示。 （6）单击图层2的第35帧，按“F6”键插入关键帧。单击图层1的第35帧，按“F5”键插入帧。然后将图层2中的椭圆拖动到文字的右边位置，如图所示。创建遮罩动画u制作聚光灯效果（7）在图层2的第1帧到第35帧之间的任意帧处单击鼠标右键，在弹出的快捷菜单中选择“创建补间

6、动画”命令，如图所示。 创建补间动画创建遮罩动画u制作聚光灯效果（8）用鼠标右键单击“时间轴”面板上的图层2的名称，在弹出的快捷菜单中选择“遮罩层”命令，将该图层转换为遮罩层。这时的“时间轴”面板如图所示。 “时间轴”面板创建遮罩动画u制作聚光灯效果该遮罩动画就制作完成了，按“Ctrl+Enter”组合键进行测试，效果如图所示。创建遮罩动画u制作聚光灯效果练习一本例将制作一个遮罩动画效果。通过本例的练习，可以进一步掌握“遮罩”命令以及“导入到库”、“绘图工具”、“对齐”面板等的运用。u案例目标本例的效果为：透过一排不停旋转的矩形条来观看下面的图片，如图所示。 遮罩效果图练习一u案例分析（1）按

7、“CtrlN”组合键，新建一个Flash文档。（2）按“Ctrl+J”组合键，弹出“文档属性”对话框，其参数设置如图所示。设置好参数后单击按钮。 “文档属性”对话框练习一u操作步骤：（3）选择“文件”“导入”“导入到舞台”命令，弹出如图所示的对话框。（4）选择一张需要的图片后，单击“打开”按钮，将该图片导入到舞台上，如图所示。练习一 “导入”对话框 导入图片u操作步骤：（5）单击“时间轴”面板上的第60帧，按“F5”键插入一个普通帧，如图所示。 “时间轴”面板练习一u操作步骤：（6）单击“时间轴”面板上的“插入图层”按钮，插入一个新图层，如图所示。 “时间轴”面板练习一u操作步骤：（7）选择工

8、具箱中的矩形工具，将其笔触颜色设置为无色，其填充颜色设置为蓝色，然后在舞台上绘制出如图所示的矩形。 绘制矩形练习一u操作步骤：（8）用鼠标右键单击该矩形，弹出其快捷菜单，选择“复制”命令，如图所示。将鼠标指针移动到舞台上的任意位置，再次单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令，如图所示，复制出一个矩形。（9）重复上述操作，再复制出3个矩形。练习一u操作步骤： 选择“复制”命令 选择“粘贴”命令（10）选择“窗口”“对齐”命令，打开“对齐”面板，或按“Ctrl+”组合键。（11）按住“Shift”键的同时单击这5个矩形，将其选中。然后单击“对齐”面板上的“垂直平均间隔”按钮和“水平中齐”

9、按钮，将这5个矩形在垂直方向上对齐且上、下两个矩形之间等距离，如图所示。练习一u操作步骤： “对齐”面板 对齐矩形（12）再次选中5个矩形，按“Ctrl+G”组合键将其组合为一个整体。（13）选择工具箱中的任意变形工具，将该矩形组旋转一定的角度，并将其拖动到舞台外面的工作区中，如图所示。练习一u操作步骤： 旋转矩形旋转矩形（14）在图层2的第20帧处按“F6”键插入关键帧，然后将矩形组移动到舞台上并旋转一定的角度。再在第1帧处单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，然后将其属性设置为如图所示。 设置属性练习一u操作步骤：（15）单击“时间轴”面板上的第40帧，按“F6”键插入

10、关键帧。将矩形组拖动到右边的工作区中，旋转一定的角度，然后在第21帧处单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令。 （16）在“时间轴”面板上的第60帧处按“F6”键插入关键帧，将矩形组移动到舞台上。在第41帧处单击鼠标右键，在弹出的快捷菜单中选择“创建补间动画”命令，其参数设置如图所示。练习一u操作步骤： 设置属性设置属性（17）这时的“时间轴”面板如图所示。在图层2上单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令，这时的“时间轴”面板如图所示。该动画就制作完成了，按“Ctrl+Enter”组合键进行测试。练习一u操作步骤： “时间轴”面板 转换为遮罩层本例将制作一个遮罩效

11、果，以巩固对遮罩的理解，其效果如图。 最终效果练习三u制作遮罩效果应用 操作步骤：（1）按“Ctrl+N”组合键新建一个Flash文档。（2）按“Ctrl+J”组合键打开“文档属性”对话框，其参数设置如图。设置完成后单击“确定”按钮。练习三u制作遮罩效果应用 “文档属性”对话框 “导入”对话框 “对齐”面板（3）选择“文件”“导入”“导入到舞台”命令，打开如图所示的“导入”对话框，选中需要导入的图像后单击“打开”按钮将其导入到舞台中。（4）选择“窗口”“对齐”命令，打开如图所示的“对齐”面板。练习三u制作遮罩效果应用（5）单击“匹配宽和高”按钮，将导入的图片设置为文档的大小。按“F8”键弹出“

12、转换为元件”对话框，如图所示。选中“图形”单选按钮后单击“确定”按钮。 “转换为元件”对话框练习三u制作遮罩效果应用（6）单击舞台上的图像实例，在其“属性”面板中将其Alpha值设为45%，如图所示。（7）单击“时间轴”面板底部的“插入图层”按钮，在图层1的上面新建一个图层。 设置透明度练习三u制作遮罩效果应用（8）打开“库”面板，将图形元件拖动到舞台上，并与图层1的对象重合，如图所示。练习三u制作遮罩效果应用 将图片导入到舞台上 “时间轴”面板练习三u制作遮罩效果应用（9）在图层2的第50帧处单击鼠标右键，从弹出的快捷菜单中选择“插入帧”命令，这时的“时间轴”面板如图所示。练习三u制作遮罩效

13、果应用（10）继续新建图层3，选择工具箱中的椭圆工具，在舞台上绘制圆。然后单击工具箱中的“选择工具”按钮，选中圆的边线，按“Delete”键将其删除。再次选中圆，按“Ctrl+G”组合键将其组合，如下屏左图所示。（11）在图层3的“时间轴”面板上用鼠标右键单击第15帧，在弹出的快捷菜单中选择“插入关键帧”命令，在第15帧处插入一个关键帧，然后选择工具箱中的选择工具，将圆移动到如下屏右图所示的位置。图层3的第1帧效果 图层3的第15帧效果 练习三u制作遮罩效果应用（12）用鼠标右键单击图层3的第1帧，在弹出的快捷菜单中选择“创建补间动画”命令。（13）按照相同的方法在图层3的第15帧到第50帧之间创建如图所示的补间动画。在图层3上创建补间动画练习三u制作遮罩效果应用（14）用鼠标右键单击图层3，在弹出的快捷菜单中选择“遮罩层”命令，设置图层3为遮罩层，此时“时间轴”面板如图所示。该遮罩动画就制作完成了，按“Ctrl+Enter”组合键测试影片。 设置遮罩层练习三u制作遮罩效果应用任务实施制作百叶窗效果动画 下面通过制作百叶窗效果，学习遮罩动画的实际应用。 制作思路 百叶窗效果 本案例主要是通过在5个图层上制作矩形块由小变大的补间动画，并将这些图层设置为遮罩层，从而逐渐显示其下方的图片来实现。本例具体操作可参考本书配套视频“7-1.avi”