详细讲解Flash制作动画基础知识：遮罩

核心提示：[前言] 初学者关于遮罩的话题问的较多，下面我将遮罩的一些常见问题进行一下归纳，详细讲解Flash制作动画基础知识：遮罩， 1、请问遮罩的原理是什么？ [效果] 遮罩层好比黑夜中的一支手电筒，照在哪儿（指被遮罩层）哪儿就显现，你还可以利用遮罩做出电影字幕、水波、万花筒、百叶窗等强视觉的作品出来，请跟贴的朋友们最好交一幅

[前言]

　　初学者关于遮罩的话题问的较多，下面我将遮罩的一些常见问题进行一下归纳。

　　1、请问遮罩的原理是什么？

　　[效果]

　　遮罩层好比黑夜中的一支手电筒，照在哪儿（指被遮罩层）哪儿就显现。
　　第一步：创建两个图层，命名，一个是遮罩层，一个是被遮罩层；
　　第二步：在被遮罩层图层输入文字“闪吧，我的最爱”；
　　第三步：在遮罩层随便画一个形状，例如一个圆；
　　第四步：此步最关键。点击遮罩层图层，右键选择“遮罩层”，如图1（1）

　　2、我想让遮罩层运动起来，就象探照灯一样的效果，应如何做？
　　[效果]

　　第一步：把上面的圆转换为图形元件；
　　第二步：在第15帧处插入关键帧，选中元件，把它放在场景的最右端，在两帧之间右键选择“创建补间动画”，选中第1帧，右键选择“复制帧”，在第30帧处粘贴帧，在第15帧和第30帧处右键选择“创建补间动画”；
　　第三步：把被遮罩层的帧延长到第30处；
　　[源文件]

　　3、我想让遮罩层随鼠标移动而移动应怎样做？
　　[效果]

　　第一步：选中问题1的遮罩层，右键选择“遮罩层”，去掉前面的勾，此时取消了遮罩；选中圆，右键选择“转换为元件”，在弹出的对话框中选择“影片剪辑”，在主场景中给它个实例名mask_mc。
　　第二步：选中被遮罩层上的文字，同样转换为影片剪辑元件，实例名为_mc
　　第三步：新建图层，名为“动作”，选中第一帧，写如下代码：

　　_mc.setMask(mask_mc);//设置_mc被mask_mc遮罩
　　mask_mc.onEnterFrame = function() {
　　//mask_mc在运行每一帧时执行函数
　　this._x = _xmouse;
　　this._y = _ymouse;
　　//mask_mc的坐标等于鼠标的坐标
　　};[源文件]

　　4、我想让遮罩层随鼠标移动有缓冲的效果应如何做？
　　[效果]

　　把问题3的第三步代码改为：
　　_mc.setMask(mask_mc);
　　var speed:Number = 5;//申明变量
　　mask_mc.onEnterFrame = function() {
　　this._x += (_xmouse-this._x)/speed;//让遮罩层缓冲运动
　　this._y += (_ymouse-this._y)/speed;
　　};

　　5、某对象的边框一闪而过的效果怎么做？
　　[效果1]


　　[效果2]
　　下面以效果2为例详解其制作过程
　　第一步：创建三个图层，从上到下名称分别为“边框”、“矩形”、“文字”。
　　第二步：在“文字”图层上输入文字：“闪吧”，延长帧到第40帧处。
　　第三步：选中“文字”图层的第一帧复制帧，粘贴帧到“边框”图层的第一帧上；将文字按住Ctrl+B,连按两次把文字打散；选中右侧“工具”栏中的“墨水瓶工具”，在打散的文字边上点击进行描边；在该帧上用鼠标进行点击（即全选该帧上的所有对象），然后把鼠标移到右侧“工具”栏中的“填充色”上点击，再把鼠标移到弹出对话框中的右上角，将填充色设置为无；选中刚才描出的边线，在属性中将其笔触高度设置为1.5。具体设置和效果见图1：

　　第四步：选中“边线”，选择“修改”→“形状”→“将线条转换为填充”；把帧延长到第40帧处。（此步是关键，不能用线条作遮罩层，应转换为填充）具体设置见图2：

　　第五步：创建图形元件，在该元件编辑场景中画一个矩形，从上到下进行线形渐变，具体设置见图3；把该元件从库中拉入到主场景中“矩形”图层上的第一帧上，其位置在文字的上方；在第40帧处插入关键帧，把该元件的位置移到文字的下方；在第1帧和第40帧处右键选择“创建补间动画”。

　　第六步：选中“边框”图层，右键选择“遮罩层”。
　　[源文件]

　　6、如何做出渐变、半透明、羽化遮罩效果？
　　[渐变效果]
　　第一步：创建两个图层，从上到下名称分别是“遮罩”、“渐变”。
　　第二步：在“遮罩”图层中输入文字“闪吧，我的最爱！”。
　　第三步：在“渐变”图层中画一个矩形，填充渐变色。
　　第四步：选中“遮罩”图层，右键选择“遮罩层”。
　　[源文件]

　　[羽化效果]
　　第一步：创建两个图层，从上到下名称分别是“遮罩”、“图片”。
　　第二步：在“图片”图层上导入一张图，并转换为影片剪辑元件，实例名为tp_mc，延长帧到第40帧；在其属性面板中勾选“使用运行时位图缓存”。
　　第三步：在“遮罩”图层上画一个小圆，转换为影片剪辑元件，实例名为mask_mc；选择属性面板中的“滤镜”里的“模糊”，输入模糊值均为100；在第40帧处插入关键帧，把圆放大；创建补间动画。
　　第四步：在“动作”图层的第一帧上写代码：

　　tp_mc.setMask(mask_mc)
　　[源文件]

　　半透明遮罩：把你半透明的遮罩层复制到上层即可。

　　7、我用静态文字作遮罩层或作为被遮罩时怎么没有效果？
　　方法①将文字连按两次Ctrl+B，把文字打散。
　　方法②更改该文字的属性，不采用“使用设备字体”。
　　方法③把文字转换为影片元件，实例名为wz_mc；把遮罩转换为影片元件，实例名为mask_mc；在帧上写代码wz_mc.setMask(mask_mc)

　　8、动态文本设置被遮罩怎么没有效果？
　　方法①把动态文本转换为影片元件，实例名为wz_mc,创建遮罩影片元件，实例名为mask_mc；然后在帧上写代码：wz_mc.setMask(mask_mc)
　　方法②选择嵌入，在弹出的对话框中出现的“包含这些字符”里输入动态文本中要显示的文字。（但这种方法会使文件体积变大）
　　[效果]

　　9、怎样让遮罩层沿着引导层上的任意路径运动？
　　[效果]
　　[要点]
　　把遮罩先做成沿引导层上路径运动的影片剪辑，再把该影片剪辑设为遮罩层
　　[步骤]
　　第一步：创建图形元件，名称为“圆”，画一个圆。
　　第二步：创建影片剪辑元件，名称为“运动的圆”，把图形元件“圆”拖入；让圆沿引导层上的曲线运动起来。如图9：

　　第三步：在主场景中创建两个图层，从上到下名称分别为“遮罩”、“背景”；把“运动的圆”拖入到主场景中的“遮罩”图层上；在“背景”图层上导入一张图片；选中“遮罩”图层，右键选择“遮罩层”。

　　10、一般右键选择设置“遮罩层”时只能遮罩一个图层，那多个图层怎么做？
　　方法①把没有被遮罩的图层拖入到已经被遮罩和遮罩层之间，再调整图层顺序。
　　方法②用鼠标按住没有被遮罩的图层不放，然后往上推，当出现灰色的虚线时释放鼠标即可。如图10：

　　11、空心圆做遮罩怎么中间的空白处也作了遮罩？
　　[效果]
　　[方法]把空心圆不能做成影片剪辑元件，但可以是图形元件。

　　12、放大镜是如何应用遮罩的？
　　[效果]
　　第一步：创建四个图层，从上到下名称依次是“动作”、“放大镜”、“遮罩”、“底图”。
　　第二步：创建影片剪辑元件，名称为“底图”，导入一张图；把该元件拖入到主场景中的“底图”图层上，实例名为dt_mc。
　　第三步：创建影片剪辑元件，名称为“遮罩”，画一个圆，填充类型为放射状，中间透明，四周不透明；把该元件拖入到主场景中的“遮罩”图层上，实例名为mask_mc。再拖一个到“放大镜”图层上，实例名为fdj_mc。
　　第四步：在“动作”图层的第一帧上写如下代码：


　　Mouse.hide();//鼠标隐藏
　　var speed:Number = 4;//申明变量
　　dt_mc.duplicateMovieClip("fdt_mc", 0);//复制底图为放大图
　　fdt_mc._xscale = fdt_mc._yscale=150;//放大图放大
　　fdt_mc.setMask(mask_mc);//设置放大图被遮罩元件遮罩
　　fdt_mc.swapDepths(fdj_mc);//把放大镜放在最上层
　　mask_mc.onEnterFrame = function() {
　　fdt_mc._x = -this._x*0.5;//设置放大图的坐标随遮罩层的变化而变化
　　fdt_mc._y = -this._y*0.5;
　　fdj_mc._x = this._x += (_xmouse-this._x)/speed;//让遮罩层和放大镜坐标重合且缓冲运动
　　fdj_mc._y = this._y += (_ymouse-this._y)/speed;
　　updateAfterEvent();//更新舞台
　　};
　　[源文件]

　　13、我想鼠标点击时遮罩层出现并拖动，再次点击时消失怎么做？
　　[效果]

　　在第12问的第四步代码中作如下改动：

　　Mouse.hide();
　　dt_mc.duplicateMovieClip("fdt_mc", 1);
　　fdt_mc._xscale = fdt_mc._yscale=150;
　　fdt_mc.setMask(mask_mc);
　　fdt_mc.swapDepths(fdj_mc);
　　mask_mc._visible = fdj_mc._visible=fdt_mc._visible=0;
　　mask_mc.onEnterFrame = function() {
　　fdt_mc._x = -this._x*0.5;
　　fdt_mc._y = -this._y*0.5;
　　fdj_mc._x = this._x += (_xmouse-this._x)/4;
　　fdj_mc._y = this._y += (_ymouse-this._y)/4;
　　updateAfterEvent();
　　};
　　onMouseDown = function () {
　　this.id = !this.id;
　　if (this.id) {
　　 mask_mc._visible = fdj_mc._visible=fdt_mc._visible=1;
　　}
　　if (!this.id) {
　　 mask_mc._visible = fdj_mc._visible=fdt_mc._visible=0;
　　}
　　};
　　14、导入外部的影片（如文件名1.swf）或图片（如文件名1.jpg），怎样设置遮罩？
　　第一步：创建影片剪辑元件，画一个你要的遮罩形状；把该元件拖入到主场景中，实例名取mask_mc。
　　第二步：在帧上写代码：

　　var my_mcl:MovieClip = createEmptyMovieClip("my_mcl", getNextHighestDepth());
　　var mcloader:MovieClipLoader = new MovieClipLoader();
　　mcloader.addListener(this);
　　mcloader.loadClip("1.jpg", my_mcl);
　　mask_mc._visible = 0;
　　this.setMask(mask_mc);
　　第三步：保存，并在该文件所在的文件夹内放一张图片，名称为1.jpg
　　如果导入的是外部影片，则把"1.jpg"改为"1.swf"，当然，外部影片的名称为1.swf

　　[后记]

　　遮罩无所不在，无奇不有，你还可以利用遮罩做出电影字幕、水波、万花筒、百叶窗等强视觉的作品出来。请跟贴的朋友们最好交一幅有创意的作品，让大家分享，好的作品版主一定会给你加分的哟！