遮罩层实例练习

遮罩层的使用

[课前叙述]：在Flash的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜……等等。

那么，“遮罩”如何能产生这些效果呢？

在本节中，除了给大家介绍“遮罩”的基本知识，还结合我的实际经验介绍一些“遮罩”的应用技巧，最后，提供一个很实用的范例，以加深对“遮罩”原理的理解。

[知识点复习]：

1．遮罩动画的概念

（1）什么是遮罩

遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。

（2）遮罩有什么用

在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。2．创建遮罩的方法

（1）创建遮罩

在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择【遮罩层】，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标

变为遮罩层图标

，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同

时图标变为

，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就

行了，如图3-5-1所示。

图3-5-1 多层遮罩动画

（2）构成遮罩和被遮罩层的元素

遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。

被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。

（3）遮罩中可以使用的动画形式

可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。

3．应用遮罩时的技巧

l遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。可以用“Actions”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置

_Alpha属性。不能用一个遮罩层试图遮蔽另一个遮罩层。遮罩可以应用在gif动画上。

l在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮

，使之变成

，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。

在被遮罩层中不能放置动态文本。

[实例简介]

你一定还记得，以前“八一电影制片厂”的片头总有个红五星加动态光芒的效果，屏幕展示作品效果。

[本实例知识提要]

l将线条转化为填充

l创建遮罩动画

l使用变形面板

l学习使用【橡皮擦工具】中的“水笼头”工具和擦除线条

[制作步骤]

（1）创建影片文档

步骤1设置影片文档属性

执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，单击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400×400像素，【背景色】为黑色（在教程中，我们为了更好地显示场景中的内容，设置背景色为#003333），如图3-5-3所示。

图3-5-3 文档【属性】面板

步骤2 设置背景图层

选择工具箱中的【矩形工具】，在场景中绘制出一个400×400像素的无边正方形，用【放射状】渐变色进行填充，如图3-5-4所示。

图3-5-4 无边矩形及混色器设置

（2）创建元件

步骤1 创建“闪光线条”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条”。选择工具箱中的【线条工具】

，设置【笔触颜色】为黄色，在场景中画一条直线，具体参数设置如图3-5-5所示。

图3-5-5 闪光线条的【属性】面板参数设置

步骤2 创建“闪光线条组合”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条组合”，如图3-5-6所示。

图3-5-6 创建闪光线条元件

从库中将名为“闪光线条”的元件拖入新元件编辑场景中，在【属性】面板中，设置【X】为-200，【Y】为20。单击工具箱中的【任意变形工具】

，此时元件实例的中心会出现一个小白点，它就是对象的“变形

点”，用鼠标左键按住它，拖到场景的中心“+”处松手。

图3-5-7中显示的是“变形点”在元件中心时的状态，和“变形点”已拖到场景中心时的状态。

图3-5-7 变形点所处的不同位置

执行【窗口】|【设计面板】|【变形】命令，打开【变形】面板，选中【旋转】，角度为15度，连续单击【复制并应用变形】按钮

，在场景中复制出的效果如图3-5-8所示。

图3-5-8 【变形】面板及复制完后的效果

前面已经提到了，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”，所以我们应该将线条转换为填充形状。在时间轴的关键帧上单击一下，选中全部图形，执行【修改】|【分离】命令，把线条打散，再执行【修改】|【形状】|【将线条转化为填充】命令，将线条转变为形状。

步骤3 创建“闪光”元件

执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”，如图3-5-9所示。

图3-5-9 创建“闪光”元件

单击【确定】后进入新元件编辑场景，接着把库里名为“闪光线条组合”的元件拖到场景中，使元件实例的中心点对齐场景中的“+”符号。在第30帧处加关键帧，用鼠标右键单击第1帧，在弹出的菜单中选择【创建补间动画】，切换到【属性】面板，设置【旋转】为【顺时针】，旋转一周。

新增一个图层，选中第1帧，执行【编辑】|【粘贴到当前位置】命令，使两图层中的“闪光线条组合”实例完全重合，执行【修改】|【变形】|【水平翻转】命令，让复制过来的线条和第一层中的线条方向相反，在场景中形成交叉的图形。

选中第30帧，按F6键，新增一个关键帧，用鼠标右键单击第1帧，

选择【创建补间动画】，建立动作补间动画，在【属性】面板中，设置【旋转】为逆时针旋转一周，最后将此层设为遮罩层，用鼠标右键单击靠上的图层，选择【遮罩层】，如图3-5-10所示。图中显示的是“闪光”元件的时间轴面板和各图层中的动画设置。

（a）创建遮罩后的【时间轴】面板

(b) 被遮罩层中的图形

（c）遮罩图层中的图形

（d）两个图层重合后的效果

图3-5-10“闪光”元件编辑界面

步骤4 创建“红星”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为“红

星”。我们要在这个元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图3-5-11中的“1-9”的数字表示这九个步骤。

图3-5-11 红星的九步画法

第一步，按住Shift键，从场景中心向上画一根黄色的线条，如图3-5-11中的“1”所示。

第二步，选择工具箱中的【任意变形工具】

,在画好的线条上单击一下，这里，线条的中心出现一个白色的小

圆点，我们叫它“变形点”，如图3-5-11中的“2”所示。

第三步，用鼠标左键按住变形点，拖到线条的最下端，这是因为我们要让线条以下端为中心旋转复制，如图3-5-11中的“3”所示。

第四步，执行【窗口】|【设计面板】|【变形】，打开【变形】面板，各参数设置如图3-5-12。按下【复制并应用变形】按钮四次，就会在场景中每隔72度复制出一条线条，五条线条的顶端构成五角星的五个顶点，如图3-5-11中的“4”所示。

图3-5-12 【变形】面板

第五步，用绿色线条分别连接五条线条的顶端，五角星的模样已经出来了，如图3-5-11中的“5”所示。

第六步，用白色线条分别连接五角星中心和上一步连线的交叉点，如图3-5-11中的“6”所示。

第七步，选择工具箱中的【橡皮擦工具】，在工具箱下面的【选项】中选择【水龙头】

工具，在多余的线段上单击一下，按Delete键，删除线段，修整好的五角星如图3-5-11中的“7”所示。

第八步，选择工具栏上的【填充色】，在打开的【调色器】面板中，用【拾色器】拾取由红到黑的放射状渐变色，从左到右两个填充色块的颜色值分别为：#FF0000、#000000，如图3-5-13所示。

图3-5-13 设置五角星的填充颜色

用【颜料桶工具】给五角星上色，再用【填充变形工具】调整每个角的颜色范围，使之略有区别，增加立体感，如图3-5-11中的“8”所示。

第九步，再选择【橡皮擦工具】，单击【选项】下的按钮，选择【擦除线条】项（选择后，会在“擦除线条”的左边出现一个小勾），如图3-5-14所示。

图3-5-14 擦除线条

用【橡皮擦工具】擦去红星上的线条，一颗漂亮的红星就绘制出来了，如图3-2-11中的“9”所示。

[技巧]：在Flash MX 2004中，还可以用更简单的方法绘制出红星，单击工具箱中【矩形工具】按钮下方的小黑三角形，在下拉菜单中选择【多角星形工具】。

在【属性】面板上设置，单击按钮，弹出【工具设置】对话框，参数设置如图3-5-15所示。

图3-5-15 多角星形工具选项设置面板-

设置完后，单击【确定】按钮，在场景中拖动鼠标，就会画出一个五角星的形状来。

（3）创建动画

回到主场景1中，新增三个图层，把“闪光”元件拖入第二层中，“红星”元件拖入到第三层中，创建第四层我们将在以后的课中教大家任何导入声音文件，完成后的时间轴面板与场景如图3-5-16所示。

图3-5-16 时间轴及场景

选中第四层的第一帧，在【属性】面板中，设置【同步】为【事件】，如图3-5-17所示。

图3-5-17 声音【属性】面板

按快捷键Ctrl+Enter快捷键，测试动画。

[板书设计]：详见PPT文件

[上机作业]：1、上机试做今天课堂的内容。

2、完成讲义第九课的课后作业。

[课后小结]：遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。学好一些基本的制作原理会帮助你今后更好地制作自己的作品，那么你就应该多看好作品、多学作实例，因为熟能生巧！

遮罩层与遮罩动画的练习导学案

遮罩层与遮罩动画的制作课堂导学案 【学习目的】 1）进一步理解遮罩的概念； 2）掌握遮罩动画的制作要领； 3）能够恰当运用遮罩层再现生活中一些有趣的情境。 【学习重点】 1）遮罩概念的理解； 2）恰当运用遮罩层再现生活中一些有趣的情境。 【学习难点】 遮罩概念的理解。 【学习方法】 让学生在欣赏-模仿-分析-探究的过程中学会学习。从生活中寻找遮罩“原型”并重现，通过主动探索、发现和体验，实现学以致用。 一、概念复习 除了普通图层、引导层外，还有一种特殊的图层——遮罩层。利用遮罩功能，可以设定显示图像的哪一部分，不显示哪一部分，以便进行一些特殊处理。由此形成的动画，就是遮罩动画。 1．遮罩动画的概念 （1）什么是遮罩 遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建

一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。 （2）遮罩有什么用 在Flash动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。 2．创建遮罩的方法 （1）创建遮罩 在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择【遮罩层】，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了。 （2）构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。 被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。

遮罩动画教学设计

“FLASH遮罩动画”教学设计 深圳市福田区莲花中学王明河 一、教材分析 本节课以深圳市电教馆主编的《初中信息技术》教学大纳为依据，教学内容是FLASH的“遮罩动画”，主要内容是制作遮罩动画作品。 二、学情分析 学生前面已学习过Flash最基本动画原理，能制作出简单的逐帧动画、动作补间动画及形变动画，并对帧、图层已有了初步认识，但还不能很好理解，还需进行回顾与加深。本课希望通过学生的实践、探究，掌握Flash遮罩动画的制作原理及应用方法，培养学生的想象能力和创新能力，体验完成动画作品的成就感，同时培养学生的自主学习能力和探究学习能力。 三、教学目标 1、知识与技能： （1）掌握遮罩动画的工作原理，理解遮罩层与被遮罩层之间的关系； （2）掌握“探照灯”效果、“电影字幕”效果的制作方法； （3）能够灵活运用所学知识，创作有创意的动画作品。 2、过程与方法： （1）通过师生共同分析遮罩的实例，加深学生对于遮罩原理的理解； （2）让学生自主实践，去完成“探照灯”效果、“电影字幕”效果的动画，使学生能够迅速掌握遮罩效果的制作方法； （3）培养学生自主学习能力、探索创新能力和综合运用知识的能力。 3、情感态度与价值观： （1）感受运用Flash动画软件创造作品的乐趣； （2）体验信息技术蕴含的文化内涵，形成和保持对信息技术的求知欲。 四、教学重点与难点： 1、教学重点：遮罩的含义和遮罩效果的制作方法。 2、教学难点：理解遮罩与被遮罩的关系。 五、教学方法与教学手段： 讲授法、演示法、分层任务驱动法、自主探究学习法。 六、课时安排：１课时（40分钟） 七、教学准备： 硬件：多媒体网络教室； 软件：教学课件、学习资料。

flash遮罩动画制作-红星闪闪

Flash遮罩效果实例-红星闪闪 在Flash8.0的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜……等等。 那么，“遮罩”如何能产生这些效果呢？ 在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经验介绍一些“遮罩”的应用技巧，最后，提供二个很实用的范例，以加深对“遮罩”原理的理解。 在Flash8.0中实现“遮罩”效果有二种做法，一种是用补间动画的方法，一种是用actions指令的方法，在本节中，我们只介绍第一种做法。 1．遮罩动画的概念 （1）什么是遮罩 “遮罩”，顾名思义就是遮挡住下面的对象。 在Flash8.0中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。 （2）遮罩有什么用 在Flash8.0动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。 2．创建遮罩的方法 （1）创建遮罩 在Flash8.0中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了，如图3-5-1所示。

图3-5-1 多层遮罩动画 （2）构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。 被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。 （3）遮罩中可以使用的动画形式 可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。 3．应用遮罩时的技巧遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。可以用“AS”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_alpha属性。不能用一个遮罩层试图遮蔽另一个遮罩层。遮罩可以应用在gif动画上。在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮 廓按钮，使之变成，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。在被遮罩层中不能放置动态文本。实例：红星闪闪

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮