flash 8 遮罩动画详解及实例

Flash 8 遮罩动画详解及实例 在 Flash8.0 的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮 罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜等等。 那么，“遮罩”如何能产生这些效果呢？ 在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经验介绍一些 “遮罩”的应用技巧，最后，提供二个很实用的范例，以加深对“遮罩”原理的理解。 在 Flash8.0 中实现“遮罩”效果有二种做法，一种是用补间动画的方法，一种是用 actions 指令的方法，在本节中，我们只介绍第一种做法。 1遮罩动画的概念 （1）什么是遮罩 “遮罩”，顾名思义就是遮挡住下面的对象。 在 Flash8.0 中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方 的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以 有任意个。 （2）遮罩有什么用 在 Flash8.0 动画中，“遮罩”主要有 2 种用途，一个作用是用在整个场景或一个特定区 域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分， 从而实现一些特殊的效果。 2创建遮罩的方法 （1）创建遮罩 在 Flash8.0 中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你 只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层， 2 “层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩 层”,在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行 了，如图 3-5-1 所示。 图 3-5-1 多层遮罩动画 （2）构成遮罩和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图 形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。 被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片 剪辑，图形，位图，文字，线条。 （3）遮罩中可以使用的动画形式 可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画 等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。 3应用遮罩时的技巧遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的 对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、 颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色 变化。 要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 可以用“AS”动作语句建立遮 罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_alpha 属性。 不能用一个遮罩层 试图遮蔽另一个遮罩层。 遮罩可以应用在 gif 动画上。 在制作过程中，遮罩层经常挡住下层的 元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮 ，使之变成 ， 使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。 在被遮 罩层中不能放置动态文本。 实例：红星闪闪 3 图 3-5-2 红星闪闪 知识提要 将线条转化为填充 创建遮罩动画 使用变形面板 任意变形工具中“注册点”的应用 学习使 用橡皮工具中的“水笼头”工具和擦除线条 （1）创建影片文档 1、设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】选项后， 点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为 400*400 象素，【背 景色】为黑色。（在教程中，我们为了更好的显示场景中的内容，背景色设为了深蓝色），如图 3-5-3 所示。 4 图 3-5-3 文档【属性】面板 （2）创建元件 1、 创建“闪光线条”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条”。选择工具栏上 的直线工具 ，在场景中画一直线，在【属性】面板上作如图 3-5-5 设置。 图 3-5-5 闪光线条的【属性】面板参数设置 2、 创建“闪光线条组合”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条组合”，如图 3-5-6 所示。 5 图 3-5-6 创建闪光线条元件 从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在 X 轴上的位置为- 200，Y 轴为 20。然后单击工具栏上的任意变形工具 ，此时元件的中心会出现一个小白点，它 就是对象的“注册点”，用鼠标左键按住它，拖到场景的中心处松手。 图 3-5-7 中的“1”显示的是注册点在元件的中心时的情形，“2”显示的是注册点已拖 到场景中心时的情形。 图 3-5-7 移动注册点到场景的中心 然后执行【窗口】|【设计面板】|【变形】命令，打开变形面板，选中【旋转】，角度 为 15 度，连续按下【复制并应用变形】按钮，在场景中复制出的效果如图 3-5-8 所示。 6 图 3-5-8 变形面板及复制好的元件 在时间轴的关键帧上点一下，选中全部图形，执行【修改】|【分散】命令，把线条打散， 再执行【修改】|【形状】|【将线条转化为填充】命令，将线条转变为形状。 3、 创建“闪光”元件 执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”，如图 3-5-9 所 示。 图 3-5-9 创建“闪光”元件 单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组合”的元件拖 到场景中，对齐中心点，复制此元件，在第 30 帧处加关键帧，再回到第 1 帧中建立补间动作动画， 【属性】面板上设置顺时针旋转一周。 然后新建一层，在第 1 帧中执行【编辑】|【粘贴到当前位置】命令，使二层中的“闪光 线条组合”完全重合，再执行【修改】|【变形】|【水平翻转】命令，让复制过来的线条和第一 层的线条方向相反，在场景中形成交叉的图形。 7 在第 30 帧处建立关键帧，在第 1 帧中建立动作补间动画，【属性】面板上设置逆时针旋 转一周，最后将此层设为遮罩层，如图 3-5-10 所示。图中显示的是“闪光”元件的时间轴面板和 各图层中的动画设置。 图 3-5-10“闪光”元件编辑界面 4、 创建“红星”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“红星”。我们要在这个 元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图 3-5-11 中的“1- 9”的数字表示这九个步骤。 8 图 3-5-11 红星的九步画法 第一步，按住 shift 键，从场景中心向上画一根黄色的线条，如图 3-5-11 中的“1”所 示。 第二步，选择工具箱中的任意变形工具 ,在画好的线条上点一下，这里，线条的中心 出现一个白色的小园点，我们叫它“注册点”。如图 3-5-11 中的“2”所示。 第三步，鼠标左键按住这个小白点，拖到线条的最下端，这是因为我们要让线条要以下 端为中心旋转复制。如图 3-5-11 中“3”所示。 第四步，执行【窗口】|【设计面板】|【变形】，打开变形面板，各参数设置如图 3-5- 12。 按下【复制并应用变形】按钮四次，就会在场景中每隔 72 度复制出一根线条，五个线条 的顶端构成五角星的五个顶点。如图 3-5-11 中的“4”所示。 9 图 3-5-12 变形面板 第五步，用绿色线条分别连接五根线条的顶端，五角星的模样已经出来了，如图 3-5-11 中“5”所示。 第六步，用白色线条分别连接五角星中心和上一步连线的中点，如图 3-5-11 中“6”所 示。 第七步，选择工具栏上的橡皮工具 ，在工具栏下面的选项中选择“水笼头”工具 ， 在多余的线段上点一下，去除线段，修整好的五角星如图 3-5-11 中的“7”所示。 第八步，用油漆筒工具给五角星上色，每个角的左右颜色可略有区别，增加立体感，如 图 3-5-11 中的“8”所示。 第九步：再选择橡皮工具 ，点开 旁边的小三角，在“擦除线条”前打勾，如图 3- 5-13 所示。 10 图 3-5-13 擦除线条 用橡皮工具擦去红星上的线条，一颗漂亮的红星就做成了，如图 3-2-11 中“9”所示。 技巧：在 Flash8.0 中，还可以用更简单的方法画红星，选择工具栏上的多角星形工具， 如图 3-5-14。 图 3-5-14 多角星形工具- 图 3-5-15 多角星形工具选项设置面板- （3）创建动画 回到主场景中，把“闪光”元件拖入第二层，新建二层，第三层中拖入“红星”元件， 在场景的下方写下白色的“闪客启航电影制片厂”的文字，完成后的时间帧面板及场景如图 3-5- 16 所示。 11 图 3-5-16 时间轴及场景 按 Ctrl+Enter 组合键，测试动画。此时，你欣赏着自己亲手做的“闪闪红星”动画，心 中再回想一下“遮罩”在动画中的作用，是否已经感受到“遮罩”这一功能的神奇？ FLASH 运动引导层的制作方法 软 件版本：FLASH 8 主 要操作：添加引导层、选择工具、补间-动画。 在 FLASH 软件中，物体可以按照设计好的路线进行移动，实现这种移动 的 方法就是 FLASH 的运动引导层。 图 1，使用椭圆工具在舞台中绘制一个“椭圆”，按下快捷键 “Ctrl+G”组合图形。 图 2，在时间轴上“图层 1”左端，单击鼠标右键，在打开的快捷菜单中 选 择“添加引导层”命令。 图 3，这时“图层 1”上就增加了一个图层，使用“铅笔工具”在“引导 层”中自由绘制一些线段。 图 4，在“图层 1”与“引导层”第 30 帧处按下键盘“F5”键，增加两个层的帧。 图 5，使用“选择工具”，移动“椭圆”，将其中心点移动到引导层线段一端。 图 6，在“图层 1”中，第 30 帧处按下键盘“F6”键，增加关键帧。 12 图 7，使用“选择工具”将“椭圆”移动到“引导层”线段另一端。 图 8，单击“图层 1”中任意一帧，在属性面板的“补间”下选择“动画”，到此动画就添加 完毕了。 图 9，引导层动画就制作完了，播放看看，果然“椭圆”可以随着引导层中复杂的路线在移 动了。 在动画制作中，苍蝇、飞机等飞行物都可以通过这样的方法来制作。 Flash 动画技巧之如何掌握引导层 问题：作移动渐变动画的时候，使用了引导层。但是我的元件为什么没有按照引导线去运动，而 是从开始帧的位置直接移动到结束帧的位置？ 解决思路： 引导层的作用是限制元件的移动轨迹。如何来实现呢，我们必须把元件运动的开始帧放到引导 线的一端，结束帧放到引导线的另一端，这样引导线才可以根据自身的形状来限制元件的移动。 出现上述问题的朋友很多，其实原因很简单，就是在放置元件的过程中没有与引导线粘合，导致 无法之作出效果。 具体步骤： 1、运行 Flash MX 2004，文档属性默认； 2、在第 1 帧中，单击工具栏中的圆形工具在舞台画一个正圆。 3、单击此圆，使其处于被选中状态。按“F8”键打开【创建新元件】面板，命名为“正圆” ，类型 为图形元件。 4、新建一个运动引导图层。如图 2.1.8 所示。 2.1.2-1.fla 13 注 意 -在实现引导线效果的时候，一定要注意元件与引导线的粘合问题。如果没有粘合，则 元件就会按照开始帧和结束帧的位置直线运动。 提 示 我们可以单击工具栏里面的放大镜工具来放大场景，这样我们就更清楚地看到 元件中的空圆心，对我们实现这个效果有极大的帮助。 运动引导线在动画发布的时候是看不到的，所以引导线的颜色大家可以随意设置，只要 与场景中的主体颜色区分开就可以了。 如果没有吸附感，可以单击工具栏中的【选项】|【对齐对象】命令。 技 巧 当元件粘合在引导线上的时候，我们拖动元件就会有一些吸附的感觉，这就证明 我们制作正确。 试一试 我们在做元件的引导线移动渐变动画的时候，属性面板中有一个“调整到路径”选 项，大家不妨选择此选项，并把场景中的元件换成长方形，看看效果怎么样？ 特别提示 ： 如果想限制一个远见的移动路线，引导线就是起到限制元件运动的作用。我们把元件粘合在引 导线的开始端和结束端，也就是把元件的运动限制在引导线的形状里面。在引导线动画中还有一 个设置，就是“调整到路径” 。我们建议大家试一试，我们也给出了这个效果的源文件，如果有不 明白的地方可以参考。 专家指点 ： 在闪吧论坛的技术交流区，关于运动引导线的提问经常可以看到。分析原因有两点：第一点是 朋友在制作的时候并没有仔细看元件的那个关键的空心圆；第二点是当第一次失败以后，产生厌 烦情绪，认为这样简单的效果怎么会制作不出来。其实运动引导线动画是一个十分简单的 Flash 技术应用。只要你掌握了，实现一次成功的效果，那么你就会在以后制作中不会出现同样的问题 的。 相关问题 ： 同一个运动引导层可否限制两个以上的图层中元件的移动路线？ 一个运动引导层是可以限制两个不同图层的元件移动路线的。因为运动引导层是制作参考工具 14 ，所以可以适用不同的元件。但是大家要注意的是，这两个元件图层的状态要同属一个运动引导 层，否则将无法实现效果。如图 2.1.11 所示。 2.1.2-3.fla 刚才制作的时候说道：元件放到运动引导线的上方一端我放在中间可以实现这个效果吗 ？ 可以的，只要把元件粘合在引导线上，无论是开始，结束还是中间部分，都可以实现这个效果。 我们在 2.1.2-3 的源文件里面已经考虑了这个问题。其中“蓝圆” 图形元件的运动轨迹并不是从引导 线开始一直到结束，而是从中间开始，中间结束。所以，只要做法正确，是可以实现这种效果的 。 利用 flash 中的钢笔工具可以制作有效的引导线吗？ 钢笔工具，也叫做贝塞尔工具（音译）是绘制路径的一种工具。利用钢笔工具所绘制的路径能 否起到引导线的作用，下面就来实践一下，看看是否成功？源文件 2.1.2-4.fla 就是利用钢笔工具 绘制的路径制作的引导线运动效果。 利用钢笔工具可以制作出有效的引导线，他绘制出的路径与铅笔工具绘制出来的线条并没有区 别。 封闭的路径可以制作引导线吗？ 我们都知道，引导线一般都是半封闭的，那么完全封闭的路径可以起到引导线的作用吗？我们 先把引导线做成一个完全封闭的不带有填充色的圆形。然后按照正常的制作过程把元件粘合在这 个圆形中。如图 2.1.12 所示。 15 2.1.2-5.fla。 但是存在一个问题，元件的运动是按照开始点与结束点的最短的距离来选择运动的，也就是我 们无法有效的控制 FLASH 自己选择的运动方向，无法全部按照圆形引导线的形状完成圆周运动。 所以我们认为这样的引导线与不封闭的引导线没有什么区别，也就是说闭合的引导线没有什么意 思。如果朋友们需要这种效果，可以把圆形路径擦出一个缺口就可以了。 笔刷工具可否制作引导线？ 笔刷工具与铅笔工具是完全两种不同的工具，绘制出来的结果是具有不同属性的。下面我们就 来试一试，属刷工作绘制出来的图形是否也可以作为引导线？ 我们在运动引导层里面用笔刷工具画出一个弯曲的图形。按照正确的制作方法，进行运动引导 线动画的制作。如图 2.1.13 所示。 2.1.2-6.fla。 由此我们可以得出结论：无论是线条还是图形都可以作为引导线来使用。但是利用笔刷工具制 作引导线要考虑其元件的运动精确性。 16 flash 中的引导层 一什么是引导层： 在 Flash 的图层面板中，有个 Add Guide Layer(添加导引 图层)图标，那么什么是导引图层呢？它们都有什么作用？ 简单来说，导引图层就是用来摆放对象运动路径的图层， 它所起的作用在于确定了指定对象的运动路线。比如我们来让 一个球按指定的路线移动(如上面的样例 )。 二引导层动画制作： (1)新建一个圆球符号，属性为 Graphic(图片)，如图二 ： (2)回到场景中，将该符号拖入工作区偏左位置。 (3)添加导引层，完成后图层窗口的状态如图三： 17 其中， 标志新添的层是导引层(Guided Layer)。 (4)现在我们在导引层中制作 Layer 1 中圆球的运动路线。确认是在导引层中，然后用绘图 工具栏中的铅笔工具随意绘制一条路径，如图四： 提示：图四中，只有那条路径是导引层中的内容，而那个圆球是 Layer 1 中的球。现在你能体会 到层的透明特点了吧？ 提示：导引层中的路径，在实际播放时不会显示出来，所以你可以放心绘制。 提示：还有一点非常重要，路径的起点必须与被导引的物件的中心点相重合。不知道被导引物件 的中心点？简单，选中被导引物件会出现个“+“号，而这个 “+“号所处位置就是该物件的中心点。 (5)你打算让动画延续多久？在默认状态下，每秒 12 帧，如果要让动画延续两秒，就需要 24 帧。现在我们要让动画延续 30 帧，也就是 2 秒多。在第 30 帧处按 F5 键或者用 Insert(插入)/ Frame(帧)，在导引层的第 30 帧加入一个过渡帧。 (6)现在回到 Layer 1 即被导引物件那层，并在第 30 帧插入关键帧(Insert Keyframe)，时 间轴状态如图五： 18 提示：不知你注意到没有，在导引层中，如果不在第 15 帧处插入一个过渡帧，那么导引层中的 导引线就不能在整个 15 帧内起作用，如果你只在第 10 帧处插入过渡帧，那么导引作用只能延 续 10 帧，而 Layer 1 中后面 5 帧的动作就失去引导了，所以我们要在第 15 帧处加入过渡帧 ；至于为什么在导引层插入过渡帧，而在 Layer 1 却插入关键帧则完全视对象有无变化来决定的 。 Layer 1 中，球体从一端移动到另外一端，有位置的改变，因此必须决定改变的起始位置与终 止位置，所以要插入关键帧；导引层中，无论是第一帧，还是第十五帧，导引线始终没有任何变 化，因此不需要再插入关键帧。总结出来，凡是涉及到变化原型与变型的场合，就应该用关键帧 来解决；如果只是一种画面的延续而无任何变化，只需用普通的过渡帧就行了。切记！ (7)在第 30 帧处，把圆球从左边位置拖到右边，并让圆球的中心点与导引线的尾端重合。 (8)现在我们为动画进行动作指定。选中 Layer 1 的第一帧，并在鼠标右键弹出菜单中选择 Creat Motion Tween (创建补间动画 )，完成后时间轴有些变化，过渡帧出现了一个箭头符号，而 这正表示动作已经建立。 (9)测试一下影片（按 Ctrl+Enter），你就会发现圆球按着你指定的路线移动。 (10)如果你想物体在沿路线运动过程中自动调整角度，可在帧属性面板把“调整到路径” 这一 项选中。如图六： 在 FLASH 中如何制作按钮 软件版本：FLASH 8 主要操作：菜单“插入”“新建元件”“按钮”、按钮的四种状态“弹起”、“指针经过”、 “按下”和“点击”、快捷键“F6”、“颜料桶工具”、“任意变形工具”、快捷键“CTRL+L” 打开 “库”面板。 FLASH 软件其中的一个特点就是具有交互性，交互的形式一般通过按钮来实现，本篇我们以 按钮为例，了解按钮是如何制作的。 图 1，进入 FLASH 软件，打开菜单“插入”“新建元件”对话框，选择“按钮”，名称可 以是默认名字，单击“确认”按钮。 19 图 2，进入“按钮元件”编辑窗口，他分为四种状态，分别是“弹起”、“指针经过”、 “按下”和“点击”。 下面我们分别了解这四种状态的特点： “弹起”状态：按钮普通状态时的样子。 “指针经过”状态：当鼠标放到“按钮”上时， “按钮”呈现的样子。 “按下”状态：当鼠标按下该“按钮”，“按钮”呈现的样子。 “点击”状态：此状态以隐藏方式存在，为按钮提供了透明的点击范围。 图 3，“弹起”状态，使用“矩形工具”在“弹起”帧下绘制一个按钮。 图 4，“指针经过”状态，按下快捷键“F6”，插入关键帧，此时插入了“弹起”状态的按 钮，为了区分他们的不同状态，这里使用“颜料桶工具”，选择一个与“弹起”状态不同的颜色， 对“针对经过”帧下的“按钮”进行变更颜色。 图 5，“按下”状态，按下快捷键“F6”，插入上一个关键帧，同样使用“颜料桶工具”对 按钮进行颜色的更改，再使用“任意变形工具”稍微对“按钮”图形进行放大调整。 图 6，“点击”状态，也就是鼠标的点击区域，可以为按钮绘制一个较大的矩形，当我们画 的按钮特别小或以文字作为按钮的时候，观众不容易直接点击到按钮，这种情况下“点击”状态 就特别重要。 “点击”状态下的图形不用绘制得很精美，因为他不会最终显示出来，只是起到了一个圈定 鼠标范围的作用。 20 图 7，制作完按钮，返回到“场景 1”，按下快捷键“CTRL+L”打开“库面板”，把“按钮元 件”拖入到舞台中，再按下快捷键“CTRL+ENTER”进行最后的输出测试。 小提示： 本篇中我们要明白按钮由四种显示方式构成，“弹起”、“指针经过”、“按下”和“点击” ，每一帧都可以是独立的，可以根据自己的喜欢的风格和特点，进行设计，如“弹起”状态下可 以绘制一个苹果图形，在“指针经过”状态下绘制一个西瓜图形，在“按下”状态下绘制一个菠 萝图形，通过本篇教程了解了“按钮”的制作方法及原理，就可以自由发挥，制作出属于自己的 “按钮”了。 如何快速制作舞台外的遮挡 软件版本：FLASH 8 主要操作：“矩形工具” 、 “选择工具” 、快捷键“CTRL+K”打开“对齐面板” 、 “填充色” 、 “颜料桶工具” 。 FLASH 动画制作的时候，舞台外常会出现一些刚出画，或要 准备入画的图形，他们可能出现在舞台外的各个区域，非常凌乱。 这导致我们的视觉疲劳，输出动画后也会由于一些原因，观众可 以看到凌乱的舞台外的图形，怎样做可以遮挡这些图形呢？ 可以使用“遮罩层”功能，但是如果动画有几个“场景” ， 有上千个帧、数十个层的话， “遮罩层”就有些“力不从心”了。 除了使用“遮罩层”功能外，还可以使用“对齐面板”实现 这个操作，本篇介绍如何使用“对齐面板”结合“颜料桶工具”的使用制作舞台外的遮挡。 图 1，新建一个 FLASH 文档，在使用“矩形工具”前，单击“填充色”按钮右上方的“禁止 填充”按钮。 图 2，使用“矩形工具”在舞台任意一个位置绘制一个“矩形” ，这时的“矩形”只有线段没 有“填充色” 。 图 3，使用“选择工具”双