flashCS6基础教程-15-动画篇3(遮罩动画)

来源：网络收集点击：时间：2024-03-07

【导读】：

本节课详解遮罩动画的原理，并附有简单实用的例子遮罩的原理：通过上面图层内对象所占的区域来看下面图层内的对象什么，看不懂？不要紧，本文会详解具体原理，并有具体例子进行辅助讲解。工具/原料moreflashCS6一、遮罩动画的理论说明1/2分步阅读

1、遮罩动画的要求：

遮罩动画需要同时满足下面3个要求，缺一不可：

1至少要有两个图层。一个充当遮罩层，其余的充当被遮罩层。

2遮罩层只能有一个，被遮罩的图层至少有一个。

3遮罩层必须位于所有的被遮罩层的上方

如下图所示，遮罩层有且只有一个，且必须位于最上面的图层；

被遮罩层有三个，都位于遮罩层的下面

注意：这是一个遮罩动画。在复杂的作品中，往往需要很多遮罩动画，那么，其实就是下图的复制与粘贴（每一个遮罩动画都按照下图的格式）

2/2

2、遮罩动画的原理

通过上面图层内对象所占的区域来看下面图层内的对象

太抽象了，我来打个比方：

假设我们手中有一张完全不透明的大纸，在这张纸的中央有一个圆形【参考下图】，我们拿着这张纸，从中央的圆形区域往外看，那么，我们看到的景象都只局限于这个圆形区域。

现在以这个比方来做类比：

纸张中央的圆形--------flash内的遮罩层

被观看的景物----------flash内的被遮罩层

由这个比方，我们很容易发现下面的事实：

遮罩层只有形状有效，其颜色是无效的。

故此，我们只关注遮罩层的外观即可，对于其填充色，可以任意设置。但要特别注意：必须有填充色！如果遮罩层只有边框色，则你看到的效果就是一个边框的了（除非你的本意就是只在边框的范围内观看被遮罩层）

二、简单的遮罩动画举例1/3

例子1：图片渐入效果

本效果是一个小圆慢慢变大的效果，最后呈现的是完整的图片。下面是具体步骤：

1新建一个flash文档（AS2或AS3均可）

2导入一张图片：

将flashIDE窗口化，打开系统的资源管理器，定位到图片的目录，将图片直接拖放到flashIDE的舞台上，如下图1所示

3用选择工具单击选中舞台上的图片，Ctrl+K打开对齐面板，按照前面章节的方法设置其宽高为舞台的宽高

4新建一个图层，使用椭圆工具【去掉边框色，填充色任意（我这里设为黑色）】在舞台中央绘制一个很小的正圆，然后在本层的25帧处F6（就可以插入关键帧），再在图层1的25帧处F5（就可以插入普通帧）。处理完毕后，效果如下图2

5修改图层2的25帧内的对象（直接用选择工具单击25帧处舞台上的小圆）

用工具箱内的任意变形工具（快捷键Q）单击舞台上的小圆，参考下图3，将鼠标移动到小圆的右上角处，出现图示的双向箭头时，按住Alt键，拖动鼠标，可以将小圆以圆心为基点进行变形【因为小圆比较小，为了方便操作，事先将舞台放大显示了】，变形为很大，直至覆盖整个舞台【一次性搞不定，可以将图片先稍微变大，然后将舞台缩小为50%，重复操作即可变大到覆盖整个舞台】

6在图层2上某一帧上点右键，选择创建补间形状

7右键单击图层2，选择遮罩层【见下图4】，我们发现：图层1和图层2都被自动锁定，而且动画效果也出来了

本例是对遮罩层做补间动画。