第12课制作引导动画和遮罩动画(12)..ppt

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

2、（3）将引导层中的路径沿用到某一帧。,（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”，导入图片“飞机

5、2.eps”，将飞机2按比例缩小，并将其转换为图形元件，如图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”移动到两条

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

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

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

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

10、置为“隶书、37、黄色、加粗”，如图11-16所示。,图11-16,（8）在图层4上方新建一个图层，在文字左方绘制一个矩形，要求其高度比文字高。 （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”，将其缩至适当大小，使其刚

12、好能覆盖舞台，如图11-21所示。,图11-21,（3）现在制作遮罩层，选中图层2，新建一个图层3，在图片的下方绘制一个无边框的矩形，如图11-22所示。,图11-22,（4）选中该矩形，将其转换为名为“叶片”的图形元件，然后新建一个名为“百叶窗”的影片剪辑元件，将元件“叶片”拖放到元件编辑区中。 （5）用任意变形工具 选中矩形，将中心控制点移动到矩形下方的中点上，如图11-23所示。,图11-23,（6）在元件编辑区的第42帧插入关键帧，单击任意变形工具，将鼠标光标移到矩形上方的中点，当其变为双向箭头时按住鼠标左键向下拖动，使其变为一条直线。 （7）在第47帧和第97帧插入关键帧，再将第1帧

13、复制到第97帧，然后依次在第1帧和第42帧、第47帧和第97帧之间创建动作补间动画，最后在第100帧按【F5】键沿用帧，时间轴如图11-24所示。,图11-24,（8）单击 图标回到场景中，将场景中的矩形删除，选中图层3，将元件“百叶窗”拖放到图片下方，如图11-25所示。,图11-25,（9）用鼠标右键单击图层3，在弹出的快捷菜单中选择“遮罩层”命令，将图层3变为遮罩层。 （10）在图层3上方新建一个图层4，选中图层3和图层2中的所有帧，用鼠标右键单击，在弹出的快捷菜单中选择“复制帧”命令。,（11）选中图层4的第1帧，在弹出的快捷菜单中选择“粘贴帧”命令，这时图层4下方出现了图层5，而图层

14、4自动变为遮罩层，但图层5并未成为被遮罩层。用鼠标右键单击图层，在弹出的快捷菜单中选择“属性”命令，在打开的“图层属性”对话框中选中 单选项，再单击 按钮即可将图层5与图层4链接起来，如图11-26所示。,图11-26,（12）选中图层4中的“百叶窗”元件，用选择工具将其向上移动，使其下方刚好与图层3的“百叶窗”元件上方相连接，如图11-27所示。,图11-27,为了便于确定“百叶窗”元件的位置，可以将所有的图层以线框模式显示，以免图片阻碍视线。在后面的操作中也可以继续采用线框模式。,（13）在图层4上方新建一个图层，同样将图层3和图层2中的帧复制到该层中，并将该图层中的“百叶窗”元件向上移动

15、到与图层4中的“百叶窗”相连，如图11-28所示。,图11-28,（14）用同样的方法依次添加遮罩图层，并将复制的“百叶窗”元件依次向上移动到相互连接，至到“百叶窗”元件到达图片顶部为止，如图11-29所示。 （15）按【Ctrl+Enter】键测试动画。,图11-29,毛笔字,下面制作一个用毛笔写字的效果，最终效果如图11-30所示，其具体操作如下。,图11-30,（1）新建一个文件，将背景大小设为270400像素，将“图层1”重命名为“背景”，导入图片“山水.jpg”，并将其大小调整到能够覆盖整个场景，如图11-31所示。然后在第50帧按【F5】键沿用帧。,图11-31,（2）新建一个图层

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

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