制作引导动画和遮罩动画

《制作引导动画和遮罩动画》由会员分享，可在线阅读，更多相关《制作引导动画和遮罩动画（64页珍藏版）》请在金锄头文库上搜索。

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

5、）新建一个图层，将其命名为“飞机 2”，导入图片“飞机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”移动到两条曲线的交点处 ，

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

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

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

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

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

11、1-17所示。 完成后的时间 轴如图11-18所 示。 图11-17图11-18上机实战制作百叶窗效果 毛笔字在本课上机实战中将进行两个练习：一是 制作百叶窗效果，以此练习遮罩动画的制作方 法；二是制作写毛笔字的效果，以此练习引导 动画的制作方法。通过练习将使读者理解引导 层和遮罩层在动画中的作用，并熟练掌握引导 动画和遮罩动画的制作方法。对于没有练习到 的多层引导动画的制作，读者可结合课堂讲解 自行练习。制作百叶窗效果下面制作 一个百叶窗效 果，最终效果 如图11-19所示 ，其具体操作 如下。图11-19（1）新建一个文件，将背景大小设为 400300像素，导入图片“风景1.jpg”，将

12、其缩至适当大小，使其刚好能覆盖舞台，如 图11-20所示。然后在第100帧插入普通帧。图11-20（2）新建一个图层，导入图片“风景 2.jpg”，将其缩至适当大小，使其刚好能覆 盖舞台，如图11-21所示。图11-21（3）现在制作遮罩层，选中图层2，新 建一个图层3，在图片的下方绘制一个无边框 的矩形，如图11-22所示。图11-22（4）选中该矩形，将其转换为名为“叶 片”的图形元件，然后新建一个名为“百叶 窗”的影片剪辑元件，将元件“叶片”拖放 到元件编辑区中。（5）用任意变形工具 选中矩形，将中 心控制点移动到矩形下方的中点上，如图11- 23所示。图11-23（6）在元件编辑区的第

13、42帧插入关键帧， 单击任意变形工具，将鼠标光标移到矩形上 方的中点，当其变为双向箭头时按住鼠标左 键向下拖动，使其变为一条直线。（7）在第47帧和第97帧插入关键帧，再 将第1帧复制到第97帧，然后依次在第1帧和 第42帧、第47帧和第97帧之间创建动作补间 动画，最后在第100帧按【F5】键沿用帧，时 间轴如图11-24所示。图11-24（8）单击 图标回到场景中，将场景 中的矩形删除，选中图层3，将元件“百叶窗 ”拖放到图片下方，如图11-25所示。图11-25（9）用鼠标右键单击图层3，在弹出的快 捷菜单中选择“遮罩层”命令，将图层3变为 遮罩层。（10）在图层3上方新建一个图层4，选

14、中 图层3和图层2中的所有帧，用鼠标右键单击 ，在弹出的快捷菜单中选择“复制帧”命令 。（11）选中图层4的第1帧，在弹出的快捷菜单 中选择“粘贴帧”命令，这时图层4下方出现了图 层5，而图层4自动变为遮罩层，但图层5并未成为 被遮罩层。用鼠标右键单击图层，在弹出的快捷 菜单中选择“属性”命令，在打开的“图层属性 ”对话框中选中 单选项，再单击 按钮 即可将图层5与图层4链接起来，如图11-26所示。图11-26（12）选中图层4中的“百叶窗”元件，用 选择工具将其向上移动，使其下方刚好与图层 3的“百叶窗”元件上方相连接，如图11-27所 示。图11-27为了便于确定“百 叶窗”元件的位置，

15、可 以将所有的图层以线框 模式显示，以免图片阻 碍视线。在后面的操作 中也可以继续采用线框 模式。 （13）在图层 4上方新建一个图 层，同样将图层3 和图层2中的帧复 制到该层中，并 将该图层中的“ 百叶窗”元件向 上移动到与图层4 中的“百叶窗” 相连，如图11-28 所示。图11-28（14）用同样的方法依次添加遮罩图层，并将 复制的“百叶窗”元件依次向上移动到相互连接， 至到“百叶窗”元件到达图片顶部为止，如图11-29 所示。（15）按【Ctrl+Enter】键测试动画。 图11-29毛笔字下面制 作一个用毛 笔写字的效 果，最终效 果如图11-30 所示，其具 体操作如下 。图11

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