本例继续讲解AS的基础知识，今天我们来学习Flash AS入门系列教程第七课：影片剪辑第6节使用遮罩，对Flash的AS编程有兴趣的朋友可以到论坛与作者交流。

第6节 使用遮罩

遮罩是flash动画制作常使用的一种技术。它可形面一个空洞使被遮盖的对象能透过空洞成形为可见。在flash舞台上常使用遮罩层来实现这个技术。在AS中则常采用MC来实现遮罩。将遮罩对象和被遮罩对象均制作成MC，然后使用setMask（）方法即可实现遮罩效果。

setMask（）方法：
MC的setMask（）方法，可使一个MC成为自已的遮罩。
MC．setMask（另一个MC）；
练习：在舞台上画一个矩形，将其转换为MC，实例名称为：jx_mc.
再画一个小一点的园，将其转换为MC，实例名为yun_mc;
将园放到矩形上，打开动作面板，输入：
jx_mc.setMask(yun_mc);
yun_mc.onPress=function(){
this.startDrag(true);
}
yun_mc.onRelease=function(){
stopDrag();
}
测试影片，园已成了矩形的遮罩。

遮罩设备字体文本：
经常有人问，为什么我做的文本被罩后，点播放有遮罩效果，测试影片时，就什么都没有了呢？以前我们都教别人的做法是，将文本打散，因为文本打散后就是图象了，就可以有遮罩效果了。这样做是比较简单一些，但有个问题，打散后的文字有可能笔画会粘连在一起不好看。我们还是想为什么文本就不能被遮罩呢？这是因为你使用了设备字体。在flash中设备字体不能用遮罩层来遮罩，只能用MC来遮罩，也就是说只能用上面的方法实现。

练习：新建一MC，用文本工具输入一句话（使用设备字体）。回到主场景，将文本MC拖到舞台上。实例名称为：wb_mc.在文本的左边画一个无笔触，任一填充的矩形，高同文本，宽10象素左右。转换为MC，实例名称为：zz_mc.双击它，进入编辑状态，在第40帧插入关键帧，用变形工具将它拖成与文本一样长，遮住文本，创建补间动画。回到主场景，新建一层，打开动用面板，输入：

wb_mc.setMask(zz_mc);
测试影片，我们要要的遮罩效果出现了。

关于 Alpha 通道遮罩：
我们常常看到一种效果，有人把它叫模糊遮罩，有人把它叫羽化遮罩。一眼看上去，聪明如我的家伙们就知道这是一种遮罩效果。这无非就是遮罩层透明度降低一些，或使用模糊滤镜。于是信心满满地就开始做了，结果是可想而知的，失败！

Flash把这种遮罩叫做Alpha 通道遮罩，使用这种遮罩可以设置遮罩元件的透明度，也可以使用滤镜效果。但使用这种遮罩必须注意两点：1. Alpha 通道遮罩：不支持遮罩层的遮罩方式，只能使用MC来遮罩。2.遮罩MC和被遮罩MC都必须使用“运行时位图缓存”。 

下面我们来做个练习，进一步掌握本节所介绍的内容。

效果：

1. 新建一flash文档，导入一张背景图片和一张观音图片。
2. 先制作元件，新建一MC，取名为观音，将观音图片拖入，调整大小，居中对齐。
3. 新建一MC,取名为遮罩观音，将观音元件拖入居中对齐，打开属性面板，实例名称为：img_mc,在“使用运行时缓存”前打钩。在200帧插入帧，上锁。新插入一图层画一个无笔触任一填充色的椭园，如下图：

将这个椭园转换为MC，实例名称为：zz_mc, 在“使用运行时缓存”前打钩。打开滤镜面板，为zz_mc添模糊滤镜，值为100.在第30 帧插入关键帧，回到第一帧，将椭园缩小到2像素，建立补间动画。在第90帧插入关键帧，在第120帧插入关键帧，将椭园缩小到2像素。在第200帧插入帧。上锁。新建一图层，取名为action，打开帧动作面板，输入：
img_mc.setMask(zz_mc);

4. 新建一MC,取名为“文本”，用文本工具输入，如下图的文字，使用设备字体。

5. 新建一MC，取名为“遮罩文本”，将文本元件拖入居中对齐，实例名称为：wb_mc, 在“使用运行时缓存”前打钩。在170帧插入帧，上锁。新插入一图层，画一无笔触线型填充色，左色标透明度为0，右色标透明度为100的矩型，矩型左边与文本右边对齐，如下图：

将矩型转换为MC，实例名称为zz2_mc, 在“使用运行时缓存”前打钩。在第30帧插入关键帧，将矩型右边与文本右边对齐，建立补间动画。在第60帧插入关键帧，在第90帧插入关键帧，将矩型的左边与文本的右边对齐，在第170帧插入帧，上锁。新建一层，取名为action，打开帧动作面板，输入：
wb_mc.setMask(zz2_mc);

6. 回到主场景，将背景图片拖入，打开对齐面板，相对于舞台，宽高匹配，居中对齐。在200帧插入帧。上锁。
7. 新建一层，将遮罩观音元件拖入，放于舞台中间上部，在200帧插入帧。
8. 新建一图层，在30帧插入关键帧，将遮罩文本拖入，放于舞台右边上部，在200帧插入帧。
OK，完成了。

本练习中的素材：

评论 (0) All

登陆 还没注册？