第12课制作引导动画和遮罩动画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按比例减少，并将其转换为图形元件，如图11-6所示。图11-6 3选中图层“

5、飞机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选中图层“飞机1中的第1帧，在“属性面板中按如图11-10所示进展设置，在第1帧和第50帧

6、之间创建动作补间动画。用一样的方法在图层“飞机2的第1帧和第50帧之间创建补间动画。图11-10 7在场景中按【Enter】测试动画，可以看到飞机2是沿着途径运动，而飞机1并未按途径运动，这是由于在图层“飞机1和引导层之间还没建立链接关系，用鼠标右键单击图层“飞机1，在弹出的快捷菜单中选择“属性命令，在翻开的“图层属性对话框中选中 单项选择项，单击 按钮即可将该图层设置为被引导图层。 8按【Ctrl+Enter】键播放动画，即可看到两架飞机沿着不同的途径飞行，最后碰在了一同，如图11-11所示。图11-11 假设想使动画效果更真实，还可以新建一个图层，在第51帧绘制一团飞机相撞爆炸后的烟雾，由

7、于篇幅所限，这里不再详细制造，读者可以根据所学知识本人制造。制造遮罩动画 遮罩动画可经过遮罩层创建。利用遮罩层可以决议被遮罩层中对象的显示情况，如被遮罩层中哪些地方显示，哪些地方不显示。在遮罩层中有对象的地方就是“透明的，可以看到被遮罩层中的对象，而没有对象的地方就是不透明的，被遮罩层中相应位置的对象是看不见的。遮罩动画的制造原理就是经过遮罩层来决议被遮罩层中的显示内容，出现动画效果。 制造遮罩动画的详细操作如下。 1在普通层中创建要显示的内容。 2在普通层上方新建一个图层，在其中创建一个对象或一段动画用来遮罩对象。 3将上方的图层转换为遮罩层即可完成一个遮罩动画的创建。 下面经过一个文字录入

8、效果练习遮罩层的制造。其详细操作如下。 1新建一个文件，在将背景大小设为380300像素，导入图片“桃花.jpg，并适当减少，使其刚好能覆盖舞台，如图11-12所示。然后在第80帧按【F5】键沿用帧。图11-12 2新建一个图层，在图片的左上方输入文字“去年今日此门中，设置为“隶书、37、黄色、加粗，如图11-13所示。图11-13 3下面创建遮罩层。在图层2上方新建一个图层，在文字的左方绘制一个矩形，要求其高度比文字高，如图11-14所示。图11-14 4在第40帧插入关键帧，用恣意变形工具 将矩形横向拉长，使其覆盖一行文字，然后在第1帧和第40帧之间创建外形补间动画，如图11-15所示。图

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

10、和第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，在图片的下方绘制一个无边框的矩形，如图11-22所示。图11-22 4选中该矩形，将其转换为名为“叶片的图形元件，然后新建一个名为“百叶窗的影片剪辑元件，将元件“叶片拖放到元件编

12、辑区中。 5用恣意变形工具 选中矩形，将中心控制点挪动到矩形下方的中点上，如图11-23所示。图11-23 6在元件编辑区的第42帧插入关键帧，单击恣意变形工具，将鼠标光标移到矩形上方的中点，当其变为双向箭头时按住鼠标左键向下拖动，使其变为一条直线。 7在第47帧和第97帧插入关键帧，再将第1帧复制到第97帧，然后依次在第1帧和第42帧、第47帧和第97帧之间创建动作补间动画，最后在第100帧按【F5】键沿用帧，时间轴如图11-24所示。图11-24 8单击 图标回到场景中，将场景中的矩形删除，选中图层3，将元件“百叶窗拖放到图片下方，如图11-25所示。图11-25 9用鼠标右键单击图层3，

13、在弹出的快捷菜单中选择“遮罩层命令，将图层3变为遮罩层。 10在图层3上方新建一个图层4，选中图层3和图层2中的一切帧，用鼠标右键单击，在弹出的快捷菜单中选择“复制帧命令。 11选中图层4的第1帧，在弹出的快捷菜单中选择“粘贴帧命令，这时图层4下方出现了图层5，而图层4自动变为遮罩层，但图层5并未成为被遮罩层。用鼠标右键单击图层，在弹出的快捷菜单中选择“属性命令，在翻开的“图层属性对话框中选中 单项选择项，再单击 按钮即可将图层5与图层4链接起来，如图11-26所示。图11-26 12选中图层4中的“百叶窗元件，用选择工具将其向上挪动，使其下方刚好与图层3的“百叶窗元件上方相衔接，如图11-2

14、7所示。图11-27 为了便于确定“百叶窗元件的位置，可以将一切的图层以线框方式显示，以免图片妨碍视野。在后面的操作中也可以继续采用线框方式。 13在图层4上方新建一个图层，同样将图层3和图层2中的帧复制到该层中，并将该图层中的“百叶窗元件向上挪动到与图层4中的“百叶窗相连，如图11-28所示。图11-28 14用同样的方法依次添加遮罩图层，并将复制的“百叶窗元件依次向上挪动到相互衔接，至到“百叶窗元件到达图片顶部为止，如图11-29所示。 15按【Ctrl+Enter】键测试动画。 图11-29毛笔字 下 面 制造一个用毛笔写字的效果，最终效果如图11-30所示，其详细操作如下。 图11-3

15、0 1新建一个文件，将背景大小设为270400像素，将“图层1重命名为“背景，导入图片“山水.jpg，并将其大小调整到可以覆盖整个场景，如图11-31所示。然后在第50帧按【F5】键沿用帧。图11-31 2新建一个图层，并命名为“文字，然后运用文本工具 输入文字“青山流水，并将字体设置为“方正黄草简体、69、白色，再复制一份文字，将颜色改为绿色，挪动到白色文字的左上方一点，构成绿字白底的立体字效果，如图11-32所示。按【CtrlB】键将文字打散，以确保在没有安装该字体的电脑上也能正确显示该字体效果。图11-32 3新建一个图层，并命名为“遮罩层，然后复制“底层中的“山水.jpg图片，选择编辑

16、粘贴到当前位置菜单命令，将其粘贴到“遮罩层中一样的位置。 4新建一个图层，命名为“毛笔，然后导入素材“毛笔.swf，并将其转换为图形元件，然后对其大小作适当调整。最后用恣意变形将毛笔的中心控制点挪动到笔尖上。 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帧插入关键帧