第10讲：FLASH引导动画和遮罩动画的制作与编辑课件.ppt

1、 本课将介绍两种特殊的动画：引导动画和遮罩动画。从制作原理上来说，它们都是由第十课所讲的3种基本动画演变而来的。补充:制作引导动画和遮罩动画制作引导动画引导动画的制作方法 制作多层引导动画 前面介绍过引导层和被引导层，它们是制作引导动画的必需图层。引导层应位于被引导层的上方，在引导层中可以像其他层一样绘制各种图形和元件，它只是对对象运动起导向作用，在最终效果中不会显示出来；而与之相链接的被引导层则沿着引导层中的路径运动。引导动画的制作方法 制作引导动画的具体操作如下。（1）在普通层中创建一个元件。（2）在普通层上方新建一个引导层，普通层自动变为被引导层，在引导层中绘制一条路径。（3）将引导层中

2、的路径沿用到某一帧。（4）在被引导层中将元件的中心控制点移动到路径的起点。（5）在被引导层的某一帧插入关键帧，并将元件移动到引导层中路径的终点。（6）在被引导层的两个关键帧之间创建补间动画，引导动画制作完成。下面通过一个树叶飘落的动画讲解制作引导动画的方法，具体操作如下。（1）新建一个文件，选择文件导入导入到舞台菜单命令，导入图片“叶子.eps”，将其缩至适当大小，并放置在舞台的左上方。（2）选中树叶，选择修改转换为元件菜单命令，将其转换为图形元件，如图11-1所示。图11-1 （3）在时间轴的图层区下方单击 图标新建一个引导层，选中引导层的第1帧，单击铅笔工具 ，在选项区域中选择“平滑”模式

3、，然后在舞台中绘制一条光滑的曲线，如图11-2所示。图11-2 （4）在引导层的第50帧按【F5】键沿用帧。（5）选中被引导层中的树叶，将其中心控制点移动到引导线的起点，然后在第50帧插入关键帧，并将树叶放大一点。（6）选中第50帧中的树叶，将其中心控制点移动到引导线的终点位置，如图11-3所示。然后在第1帧和第50帧之间创建动作补间动画。图11-3 （7）选中第1帧，在“属性”面板的“补间”下拉列表框中选择“动作”选项，并选中 、和 复选框，如图11-4所示。图11-4 选中 、和 复选框是为了使对象沿着引导路线移动，选中 复选框是为了使树叶从上到下飘落时逐渐增大。如果想让树叶在飘落时旋转，

4、还可以在“旋转”下拉列表框中选择“顺时针”或“逆时针”选项。制作多层引导动画 一个引导层还可以链接多个被引导层，这样可以使多个对象沿着同一条路径运动；另外，一个引导层中还可以有多条运动路径，使得不同的对象沿着不同的路径运动。下面制作两架飞机相撞的过程，来练习多层引导动画的制作过程。其具体操作如下：（1）新建一个文件，将背景色设为浅蓝色，大小设为550300像素，将图层1命名为“飞机1”，导入图片“飞机1.eps”，将飞机1按比例缩小，并将其转换为图形元件，如图11-5所示。图11-5 （2）新建一个图层，将其命名为“飞机2”，导入图片“飞机2.eps”，将飞机2按比例缩小，并将其转换为图形元件

5、，如图11-6所示。图11-6 （3）选中图层“飞机2”，单击图标新建一个引导层，选中引导层的第1帧，单击铅笔工具 ，在选项区域中选择“平滑”模式，然后在舞台中绘制两条相交的光滑曲线，然后在第50帧按【F5】键沿用帧，如图11-7所示。图11-7 （4）在图层“飞机1”中将“飞机1”移动到左边曲线的左端点上，在图层“飞机2”中将“飞机2”移动到右边曲线的右端点上，如图11-8所示。图11-8 （5）在图层“飞机1”的第50帧插入关键帧，并将“飞机1”移动到两条曲线的交点处，在图层“飞机2”的第50帧插入关键帧，并将“飞机2”移动到两条曲线的交点处，如图11-9所示。图11-9 （6）选中图层“

6、飞机1”中的第1帧，在“属性”面板中按如图11-10所示进行设置，在第1帧和第50帧之间创建动作补间动画。用相同的方法在图层“飞机2”的第1帧和第50帧之间创建补间动画。图11-10 （7）在场景中按【Enter】测试动画，可以看到飞机2是沿着路径运动，而飞机1并未按路径运动，这是因为在图层“飞机1”和引导层之间还没建立链接关系，用鼠标右键单击图层“飞机1”，在弹出的快捷菜单中选择“属性”命令，在打开的“图层属性”对话框中选中 单选项，单击 按钮即可将该图层设置为被引导图层。（8）按【Ctrl+Enter】键播放动画，即可看到两架飞机沿着不同的路径飞行，最后碰在了一起，如图11-11所示。图1

7、1-11 如果想使动画效果更真实，还可以新建一个图层，在第51帧绘制一团飞机相撞爆炸后的烟雾，由于篇幅所限，这里不再具体制作，读者可以根据所学知识自己制作。制作遮罩动画 遮罩动画可通过遮罩层创建。利用遮罩层可以决定被遮罩层中对象的显示情况，如被遮罩层中哪些地方显示，哪些地方不显示。在遮罩层中有对象的地方就是“透明”的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。遮罩动画的制作原理就是通过遮罩层来决定被遮罩层中的显示内容，出现动画效果。制作遮罩动画的具体操作如下。（1）在普通层中创建要显示的内容。（2）在普通层上方新建一个图层，在其中创建一个对象或

8、一段动画用来遮罩对象。（3）将上方的图层转换为遮罩层即可完成一个遮罩动画的创建。下面通过一个文字录入效果练习遮罩层的制作。其具体操作如下。（1）新建一个文件，在将背景大小设为380300像素，导入图片“桃花.jpg”，并适当缩小，使其刚好能覆盖舞台，如图11-12所示。然后在第80帧按【F5】键沿用帧。图11-12 （2）新建一个图层，在图片的左上方输入文字“去年今日此门中”，设置为“隶书、37、黄色、加粗”，如图11-13所示。图11-13 （3）下面创建遮罩层。在图层2上方新建一个图层，在文字的左方绘制一个矩形，要求其高度比文字高，如图11-14所示。图11-14 （4）在第40帧插入关键

9、帧，用任意变形工具 将矩形横向拉长，使其覆盖一行文字，然后在第1帧和第40帧之间创建形状补间动画，如图11-15所示。图11-15 （5）用鼠标右键单击图层3，在弹出的快捷菜单中选择“遮罩层”命令，即可使图层3变为遮罩层，图层2变为被遮罩层。图层3和图层2都同时被锁定。（6）按【Ctrl+Enter】键播放动画即可看到文字逐渐出现的效果。（7）下面用类似的方法输入诗句的第二句。在图层3上方新建一个图层，为了使第二句诗比第一句诗后出现，在第41帧插入关键帧，并在图层的右下方输入文字“人面桃花相映红”，设置为“隶书、37、黄色、加粗”，如图11-16所示。图11-16 （8）在图层4上方新建一个图

10、层，在文字左方绘制一个矩形，要求其高度比文字高。（9）在第80帧插入关键帧，用任意变形工具 将矩形横向拉长，使其覆盖一行文字，然后在第40帧和第80帧之间创建形状补间动画。（10）用鼠标右键单击图层5，在弹出的快捷菜单中选择“遮罩层”命令，即可使图层5变为遮罩层，图层4变为被遮罩层。（11）按【Ctrl+Enter】键播放动画，最终效果如图11-17所示。完成后的时间轴如图11-18所示。图11-17图11-18上机实战制作百叶窗效果 毛笔字 在本课上机实战中将进行两个练习：一是制作百叶窗效果，以此练习遮罩动画的制作方法；二是制作写毛笔字的效果，以此练习引导动画的制作方法。通过练习将使读者理解

11、引导层和遮罩层在动画中的作用，并熟练掌握引导动画和遮罩动画的制作方法。对于没有练习到的多层引导动画的制作，读者可结合课堂讲解自行练习。制作百叶窗效果 下面制作一个百叶窗效果，最终效果如图11-19所示，其具体操作如下。图11-19 （1）新建一个文件，将背景大小设为400300像素，导入图片“风景1.jpg”，将其缩至适当大小，使其刚好能覆盖舞台，如图11-20所示。然后在第100帧插入普通帧。图11-20 （2）新建一个图层，导入图片“风景2.jpg”，将其缩至适当大小，使其刚好能覆盖舞台，如图11-21所示。图11-21 （3）现在制作遮罩层，选中图层2，新建一个图层3，在图片的下方绘制一

12、个无边框的矩形，如图11-22所示。图11-22 （4）选中该矩形，将其转换为名为“叶片”的图形元件，然后新建一个名为“百叶窗”的影片剪辑元件，将元件“叶片”拖放到元件编辑区中。（5）用任意变形工具 选中矩形，将中心控制点移动到矩形下方的中点上，如图11-23所示。图11-23 （6）在元件编辑区的第42帧插入关键帧，单击任意变形工具，将鼠标光标移到矩形上方的中点，当其变为双向箭头时按住鼠标左键向下拖动，使其变为一条直线。（7）在第47帧和第97帧插入关键帧，再将第1帧复制到第97帧，然后依次在第1帧和第42帧、第47帧和第97帧之间创建动作补间动画，最后在第100帧按【F5】键沿用帧，时间轴

13、如图11-24所示。图11-24 （8）单击 图标回到场景中，将场景中的矩形删除，选中图层3，将元件“百叶窗”拖放到图片下方，如图11-25所示。图11-25 （9）用鼠标右键单击图层3，在弹出的快捷菜单中选择“遮罩层”命令，将图层3变为遮罩层。（10）在图层3上方新建一个图层4，选中图层3和图层2中的所有帧，用鼠标右键单击，在弹出的快捷菜单中选择“复制帧”命令。（11）选中图层4的第1帧，在弹出的快捷菜单中选择“粘贴帧”命令，这时图层4下方出现了图层5，而图层4自动变为遮罩层，但图层5并未成为被遮罩层。用鼠标右键单击图层，在弹出的快捷菜单中选择“属性”命令，在打开的“图层属性”对话框中选中

14、单选项，再单击 按钮即可将图层5与图层4链接起来，如图11-26所示。图11-26 （12）选中图层4中的“百叶窗”元件，用选择工具将其向上移动，使其下方刚好与图层3的“百叶窗”元件上方相连接，如图11-27所示。图11-27 为了便于确定“百叶窗”元件的位置，可以将所有的图层以线框模式显示，以免图片阻碍视线。在后面的操作中也可以继续采用线框模式。（13）在图层4上方新建一个图层，同样将图层3和图层2中的帧复制到该层中，并将该图层中的“百叶窗”元件向上移动到与图层4中的“百叶窗”相连，如图11-28所示。图11-28 （14）用同样的方法依次添加遮罩图层，并将复制的“百叶窗”元件依次向上移动到

15、相互连接，至到“百叶窗”元件到达图片顶部为止，如图11-29所示。（15）按【Ctrl+Enter】键测试动画。图11-29毛笔字 下 面 制作一个用毛笔写字的效果，最终效果如图11-30所示，其具体操作如下。图11-30 （1）新建一个文件，将背景大小设为270400像素，将“图层1”重命名为“背景”，导入图片“山水.jpg”，并将其大小调整到能够覆盖整个场景，如图11-31所示。然后在第50帧按【F5】键沿用帧。图11-31 （2）新建一个图层，并命名为“文字”，然后使用文本工具 输入文字“青山流水”，并将字体设置为“方正黄草简体、69、白色”，再复制一份文字，将颜色改为绿色，移动到白色文

16、字的左上方一点，形成绿字白底的立体字效果，如图11-32所示。按【CtrlB】键将文字打散，以确保在没有安装该字体的电脑上也能正确显示该字体效果。图11-32 （3）新建一个图层，并命名为“遮罩层”，然后复制“底层”中的“山水.jpg”图片，选择编辑粘贴到当前位置菜单命令，将其粘贴到“遮罩层”中相同的位置。（4）新建一个图层，命名为“毛笔”，然后导入素材“毛笔.swf”，并将其转换为图形元件，然后对其大小作适当调整。最后用任意变形将毛笔的中心控制点移动到笔尖上。（5）选中“毛笔”层，然后单击 按钮在“毛笔”层上方创建一个引导层。（6）在引导层中使用铅笔工具沿着文字绘制如图11-33所示的引导线

17、，然后在该图层的第50帧处插入普通帧。图11-33 （7）在“毛笔”层中将毛笔拖动到引导线的上端，使其中心控制点与上端点重合，如图11-34所示。图11-34 （8）在“毛笔”层的第50帧插入关键帧，将其中的毛笔拖动到引导层的下端，使其中心控制点与下端点重合，如图11-35所示。图11-35 （9）选中第1帧，在“属性”面板中进行如图11-36所示的设置，注意一定不要选择 复选框，否则在毛笔移动时可能发生翻转。图11-36 这时可按【Enter】键测试，看毛笔是否沿引导线运动。如果没有沿引导线运动，则应检查毛笔是否已吸附到引导线上或引导线的转折是否过多，如果引导线的转折过多则应重新绘制引导线。

18、（10）将除“遮罩层”外的所有图层锁定，然后在“遮罩层”的第2帧插入关键帧，然后根据毛笔的位置用橡皮擦工具对该帧中的文字相应位置进行擦除，如图11-37所示。图11-37 （11）在第3帧插入关键帧，在第3帧中根据毛笔所在位置继续对图片进行擦除。最后用同样的方法对余下的帧进行相同的操作，操作完成后的时间轴如图11-38所示。（12）至此，动画制作完成，按【Ctrl+Enter】键播放动画即可看到一枝毛笔在山水之间写下“青山绿水”4个大字。图11-38上机操作题 （1）利用遮罩层制作一个电影效果，如图11-39所示。图11-39 （2）利用引导层制作一个钢笔签名的动画效果，如图11-40所示。图11-40