遮罩和引导层动画.doc

计算机应用基础Iflash MX课件及练习遮罩和引导层动画1目的：1重点：1难点：1一.遮罩的概念21.什么是遮罩22遮罩的用途2二.创建遮罩的方法21创建与取消遮罩22构成遮罩和被遮罩层的元素33遮罩中可以使用的动画形式3三.应用遮罩时的技巧3四.引导层动画31.引导层动画的定义32.建引导路径动画的方法33.应用引导路径动画的技巧4五.课堂示例51.罗马假日52.金立手机63.空中历险的飞机74.古诗词配画8六.课堂练习9完成课堂示例149七.课后练习91.实验指导P85,范例1392. 实验指导书P96，3和493. 探照灯文字9八.选做练习101.闪闪红星102.要学做闪客14遮罩和引导层动画 目的：1. 掌握遮罩动画；2. 掌握引导层动画。重点：1. 掌握遮罩动画；2. 掌握引导层动画。难点：1.遮罩层和被遮罩层的关系。2.如何在遮罩层和被遮罩中设置动画。3.遮罩层和被遮罩层中应分别放置什么对象。4引导路径的设置5引导层动画调整到路径一.遮罩的概念1.什么是遮罩遮罩动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的。遮罩动画是通过两个图层来实现的，一个是遮罩层，另一个是被遮罩层。在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的“视窗”，遮罩层下方的对象可以通过该“视窗”显示出来，而“视窗”之外的对象将不会显示。遮罩层是任意形状被遮罩层（在遮罩层下）遮罩后的效果 2遮罩的用途遮罩主要有2种用途：（1）用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见（2）用来遮罩住某一元件的一部分，从而实现一些特殊的效果，比如常见的对象淡入和淡出效果等。二.创建遮罩的方法1创建与取消遮罩创建遮罩：在Flash中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在某个图层上单击右键，在弹出菜单中选择【遮罩层】，使命令的左边出现一个小勾，该图层就会生成遮罩层，“层图标”就会从普通层图标 变为遮罩层图标 ，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为 ，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了，如图所示。取消遮罩：选中遮罩层，单击右键，在弹出菜单中选择【遮罩层】，使命令的左边的小勾消失，该图层就由遮罩层转换为普通图层，同时，被遮罩层也同时转换为普通图层。取消被遮罩层：如果只想单独把某一被遮罩层转换为普通图层，有两种方法。一是，将被遮罩层移动到遮罩层的上方。二是，选中该被遮罩层，单击右键，在弹出菜单中选择【属性】，将该图层的属性由“被遮罩层”设为“正常”。2构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。3遮罩中可以使用的动画形式可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。三.应用遮罩时的技巧遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。不能用一个遮罩层试图遮蔽另一个遮罩层。遮罩可以应用在gif动画上。在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮，使之变成，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。在被遮罩层中不能放置动态文本。四.引导层动画1.引导层动画的定义将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径动画”。这种动画可以使一个或多个元件完成曲线或不规则运动。2.建引导路径动画的方法2.1创建引导层和被引导层一个最基本“引导路径动画”由两个图层组成，上面一层是“引导层”，它的图层图标为 ，下面一层是“被引导层”，图标为 ，同普通图层一样。在普通图层上单击时间轴面板中的“添加运动引导层”按钮，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层”，如图所示。2.2引导层和被引导层中的对象引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能应用形状。由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是动作补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。2.3向被引导层中添加元件“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头，如图所示。在图中，我们特地把“元件”的透明度设为50%，使你可以透过元件看到下面的引导线，“元件”中心的十字星正好对着线段的端头，这一点非常重要，是引导线动画顺利运行的前提。3.应用引导路径动画的技巧（1）“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，把“属性”面板上的“路径调整”前打上勾，对象的基线就会调整到运动路径。而如果在“对齐”前打勾，元件的注册点就会与运动路径对齐。（2）引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等。（3）在做引导路径动画时，按下工具栏上的“对齐对象”功能按钮，可以使“对象附着于引导线”的操作更容易成功。（4）过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。（5）被引导对象的中心对齐场景中的十字星，也有助于引导动画的成功。（6）向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要让元件的注册点对准线段的开始和结束的端点，否则无法引导，如果元件为不规则形，可以按下工具栏上的任意变形工具，调整注册点。（7）如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择“属性”，在对话框中选择“正常”作为图层类型。（8）如果想让对象作圆周运动，可以在“引导层”画个圆形线条，再用橡皮擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。（9）引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。五.课堂示例1.罗马假日题目：制作如“罗马假日1.swf”和“罗马假日2.swf”所示的动画效果，一种效果是文字不动，但是文字上的图案运动；一种效果是图案不动，但是形状动。知识点：遮罩动画的制作方法。如何确定遮罩层的形状和被遮罩层中的内容。将补间动画分别应用到遮罩层和被遮罩层的效果区别。“罗马假日1.swf”的参考步骤：设置文档背景色为黑色；将海报3作为背景图层图片，并设置动作补间动画，使图片从舞台上方移动到舞台下方；在背景图层上方新建文字图层，输入文字“ROMAN HOLIDAY”，Impact字体，扩展到和背景图层相同的帧数；并将文字层设置为遮罩层。“罗马假日2.swf”的参考步骤：新建文档并设置文档背景色为黑色；将海报3作为背景图层图片，保持静止;在背景图层上方新建图层，先绘制心形，让心形自上而下到场景中央;并由小变大将舞台覆盖；将形状变化层设置为遮罩层。 2.金立手机题目：一道白色辉光从文字左边略到文字右边，又从文字右边略到文字左边。同时，刘德华的图片渐渐出现又渐渐消失。效果参见“金立手机.swf”。知识点：利用遮罩动画制作辉光效果文字。该效果在各种广告宣传的文字中都有很好应用，可以很好吸引网迷的视线。遮罩动画和其他动画相结合，又互不干扰。关键步骤提示：文字“GIONEE金立 金品质 立天下”做为遮罩层，白色辉光做为被遮罩层，辉光从左到右再从右到左做动作补间动画。在被遮罩层下方，新建图层，放置和遮罩层相同内容相同位置的文字。3.空中历险的飞机题目：一个飞机沿曲线运动，机头方向沿曲线知识点：通过引导层添加飞机的曲线运动路径如何将运动对象吸附在引导线上如何使飞机机头沿飞行线方向参考步骤：1、创建背景图层，将背景图片放入舞台2、创建飞机运动图层： (1)单击第一层的第1帧，输入飞机。(2)选择第40桢，按F6键插入关键桢。(3)建立1-40桢之间的飞机动作补间动画。3、单击时间轴窗口上的添加引导图层按钮，为第一图层增加一个引导图层。（引导图层是专门用来制作运动轨迹的，在播放动画的时候，轨迹不会显示出来。）4、在绘图工具箱中选择铅笔工具，并选择铅笔工具的附属选项“平滑”。然后用铅笔工具在场景中画一个平滑曲线（按鼠标左键不放拖曳画曲线）。5、按下吸附按钮 ，选择第一层的第1帧。拖动第1帧上的飞机到曲线(轨迹线）的右端点上。（注意拖动飞机前一定要保证吸附按扭被按下，这样在拖动鼠标时，中心出现的空心圆会自动吸附在轨迹线右端点，松开鼠标，飞机就会停在轨迹线的右端点，这就是运动的起点。）6、选择第一层的第40帧。用同样的方法将飞机拖动到曲线的左端点上。下面是图层结构示意图：4.古诗词配画题目：利用引导层动画，制作如“古诗词配画.swf”所示动画。要求：树叶沿不规则曲线飘落，并逐渐变小；毛笔书写出“天苍苍 野茫茫”文字；给动画配以抒情的音乐背景或者自己的诗朗诵录音片断。知识点：利用引导层动画制作树叶飘落的效果结合动作补间参数的设置，使树叶运动更自然各种动画的综合运用提示：树叶飘落的效果：新建图层，绘制曲线引导线；新建图层，设置树叶的运动为动作补间，调整补间参数，将树叶运动的首位关键帧吸附到引导线上；文字效果：新建一个图层，利用逐帧动画制作文字逐个出现的效果；毛笔字效果：新建一个图层，利用动作补间动画，制作毛笔字移动的效果；注意调整文字层和毛笔字层的帧数，从而使两层播放时配合一致。六.课堂练习完成课堂示例14七.课后练习1.实验指导P85,范例132. 实验指导书P96，3和43. 探照灯文字 题目：利用遮罩动画的制作探照灯文字效果，做为网站的小幅广告，效果参见“闪客沙龙语音教室.swf” 参考步骤：0、新建一个Flash文件。把文档大小修改为长条形，大约400100，背景选天蓝色。1、选文字工具在场景中输入“闪客沙龙语音教室”几个字。设置字的颜色为白色，字体为隶书，调整字号至合适大小。按F8把它转换成一个图形组件。2、新建一个层，这个层应该在文字层的上面。在该层中用椭圆工具绘制一个圆形，颜色无所谓，但要求其直径要大于刚才输入的文字高度。选中圆，按F8把它转换成一个图形类组件，因为我们在后面要多次调用。把圆拖到文字的左面如下图所示：3、然后我们还在这一层第25帧按下F6键新建一个关键帧，再在第50帧按下F6键。现在这两帧都和第1帧具有相同的内容。我们还在打算让圆先从左向右移动到文字右端，再移回文字左端。所以在第25帧，我们用键盘上的方向右键把圆从左端移到文字右端，见下图。（移动时可以按下Shift键，这样移动起来会快一些。用键盘而不用鼠标移动的好处是移动后无需进行水平对齐。）4、在圆所在层的第1帧，打开帧面板，设置动画方式为动作补间，同样，在第25帧也如是操作。因为第50帧和第1帧内容相同，所以不需要再做什么。5、设置遮罩图层：在圆所在层点鼠标右键，在弹出的菜单中选择遮罩，也就是把这一层变为遮罩层，而下面的文字层也自动变成为被遮罩层。（我们注意到文字只在第1帧里有内容，为了在整个动画过程中文字都能显示出来，我们在文字层的第50帧按F5键，这样该层所有帧的内容将和第1帧相同。）6、测试一下可以看到遮罩的感觉已经有了。现在大家应该明白为什么圆是什么颜色无关紧要了吧。因为遮罩就是把遮罩层中对象以外的部分遮盖住，而只显示透过对象的被遮罩层的内容。所以我们看到的文字的颜色是被遮罩层的，与遮罩层无关。7、效果更进一步：为了使动画的效果更明显一些，我们可以在最上面放上浅一些颜色的文字做底色。(1)选中圆所在层，再新建一个层。(2)在文字层中选中文字，按Ctrl-C复制，再回到最下层，按Ctrl+Shift-V把文字粘帖到原来的位置上。(3)在属性面板上把文字元件的Alpha值改到50或以下，让文字显得透明一些。你也可以把文字打散再填充灰蓝一些的颜色。然后我们选中第50帧，按F5键，让之间所有帧的内容与第1帧相同。以下是动画完成以后的图层结构示意图：八.选做练习1.闪闪红星你一定还记得，以前“八一电影制片厂”的片头总有个红五星加动态光芒的效果，如图所示，本题就是用遮罩来模仿这种效果。参考步骤：1.创建影片文档文档大小为400400像素，黑色背景。用“矩形工具”，在场景中绘制出一个400400像素的无边正方形，用“放射状”黑白渐变色进行填充。 2.创建元件（1）新建名为“闪光线条组合”的图形元件，绘制如下图形：由于遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”，所以我们应该将线条转换为填充形状。在时间轴的关键帧上单击一下，选中全部图形，执行“修改/分离”，把线条打散，再执行“修改/形状/将线条转化为填充”命令，将线条转变为形状。（2）新建名为“闪光”的影片剪辑元件。并进行如下操作：把库里名为“闪光线条组合”的元件拖到场景中，使元件实例的中心点对齐场景中的“+”符号。在第30帧处加关键帧，创建动作补间动画，设为顺时针旋转一周。新增一个图层，选中第1帧，执行“编辑/粘贴到当前位置”，使两图层中的“闪光线条组合”实例完全重合，执行“修改/变形/水平翻转”命令，让复制过来的线条和第一层中的线条方向相反，在场景中形成交叉的图形。在第30帧处加关键帧，创建动作补间动画，设为逆时针旋转一周。最后将此层设为遮罩层。下图中显示的是“闪光”元件的时间轴面板和各图层中的动画设置。创建遮罩后的时间轴面板被遮罩层中的图形遮罩图层中的图形两个图层重合后的效果（3）新建名为“红星”的图形元件分九步来叙述具体的画法，下图中的“1-9”的数字表示这九个步骤。图3-5-11 红星的九步画法第一步，按住Shift键，从场景中心向上画一根黄色的线条。第二步，选择“任意变形工具”,在画好的线条上单击一下，线条的中心出现一个白色的小圆点，我们叫它“变形点”。第三步，用鼠标左键按住变形点，拖到线条的最下端，这是因为我们要让线条以下端为中心旋转复制。第四步，执行“窗口/设计面板/变形”命令，设置旋转72度。按下“复制并应用变形”按钮四次，就会在场景中每隔72度复制出一条线条，五条线条的顶端构成五角星的五个顶点。第五步，用绿色线条分别连接五条线条的顶端，五角星的模样已经出来了，如上图中的“5”所示。第六步，用白色线条分别连接五角星中心和上一步连线的交叉点，如上图中的“6”所示。第七步，选择橡皮擦工具，在工具箱下面的选项中选择水龙头工具，在多余的线段上单击一下，按Delete键，删除线段，修整好的五角星如上图中的“7”所示。第八步，选择工具栏上的填充色，用拾色器拾取由红到黑的放射状渐变色，从左到右两个填充色块的颜色值分别为：#FF0000、#000000。用颜料桶工具给五角星上色，再用填充变形工具调整每个角的颜色范围，使之略有区别，增加立体感，如上图中的“8”所示。第九步，再选择橡皮擦工具，单击选项下的按钮，选择擦除线条项（选择后，会在“擦除线条”的左边出现一个小勾）。用橡皮擦工具擦去红星上的线条，一颗漂亮的红星就绘制出来了，如上图中的“9”所示。（4）导入音乐文件新建一层，执行“文件/导入/导入到库”命令，将音乐文件导入到库中。3.创建动画回到主场景1中，新增三个图层，把“闪光”