动画综合演习[精华]

第八讲动画综合练习打印本页
通过前面各章的学习，相信读者已经基本掌握了动画的制作方法。

本章要学习的内容，就是通过综合练习，制作规模比较大的Flash动画。

8.1 综合实例：贺卡--咖啡诉情
学习目标
本节通过制作一张贺卡动画，进一步掌握影片剪辑元件的应用，以及如何管理图层。

上机实践
8.1.1 绘制背景和咖啡
（1）首先创建一个新文档，文档的大小保持默认状态即可。

然后在舞台上绘制一个由菱形组成的背景效果。

（2）双击图层1，将该图层更名为"背景"。

完成后创建一个新图层，并将这个图层命名为"咖啡"。

在该图层上绘制一杯咖啡。

（3）锁定"咖啡"图层，新建一个名为"咖啡投影"的图层。

在该图层上为咖啡绘制一个投影效果，然后将该图层拖拽到"咖啡"图层的下方。

（4）锁定"咖啡投影"图层，创建一个名为"热气"的新图层，并将该图层拖拽至所有图层的上方，准备绘制咖啡的热气效果。

（5）使用"铅笔工具" 在咖啡上绘制1条笔触高度为10的白色曲线。

绘制完成后，选中线条，按"F8"功能键将其转换为影片剪辑元件，将该元气命名为"热气1"。

（6）将曲线转换为元件之后，使该元件处于选中状态。

打开"滤镜"面板，在该面板下点击"添加滤镜"按钮，从弹出的列表中选择"模糊"滤镜。

此时会弹出"模糊"滤镜属性框，为元件添加模糊效果。

（7）添加了模糊效果后，一缕热气的效果就制作完成。

接下来制作热气缓慢上升的动画效果。

8.1.2 上升的热气
（1）选中舞台上的元件"热气1"，按"F8"功能键，将该元件转换为一个新的影片剪辑，把这个影片剪辑命名为"上升的热气"。

（2）回到舞台上双击热气图形，进入元件"上升的热气"的编辑区。

点击时间轴上的"添加运动引导层"按钮，为图层1添加一个引导层。

在引导层上绘制一条曲线，作为热气上升时的路径。

（3）绘制好引导线之后，在该层的第100帧上按"F5"功能键扩展帧。

接着锁定该层，将图层1选为当前编辑层。

（4）在图层1的第1帧上单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。

完成后在舞台上将热气图形拖拽至引导线的中下部位置，作为热气升起的起始位置。

（5）在时间轴的第100帧上按"F6"功能键插入关键帧，然后在舞台中将热气图形拖拽至引导线的最末端。

继续选中该帧上的热气图形，在"属性"面板中将该图形的"Alpha"值设置为20%，制作出热气逐渐消失的动画效果。

（6）执行菜单栏"插入/新建元件"命令，创建一个名为"上升的热气2"的影片剪辑元件。

单击"确定"按钮进行元件的编辑区。

（7）将元件"上升的热气"从"库"面板中拖拽至舞台上，因为背景颜色是白色的，热气图形在舞台中就看不到效果了，所以这里暂时先将文档的背景颜色设置为黑色。

（8）选中舞台上"上升的热气"元件，执行菜单栏"修改/变形/水平翻转"命令，水平翻转元件。

接下来再创建一个名为"上升的热气3"的影片剪辑元件，并进入该元件的编辑区。

（9）在"上升的热气3"元件编辑区内，将"上升的热气"和"上升的热气2"元件各拖拽一个至舞台上，让这两个元件紧靠在一起。

（10）在图层1的第100帧上按"F5"功能键扩展帧，接着锁定图层1，创建一个新的图层2。

在该层的第10帧上插入一个关键帧，然后将"上升的热气"元件拖拽至舞台上，使它沿着前两个元件的边缘放置，并用"任意变形工具" 将它的尺寸适当缩小。

（11）接下来再创建3个图层，分别是图层3到图层5。

然后在图层3的第20、图层4的第40帧和图层5的第60帧上分别插入一个关键帧。

在这3个关键帧上任意放置"上升的热气"和"上升的热气2"元件，并随意进行尺寸的缩放。

（12）完成后退出元件的编辑区，回到主场景中，删除舞台的热气图形。

然后将影片剪辑元件"上升的热气3"从"库"面板中拖拽至舞台中，把它放置在咖啡图形的上方。

复制出两个新的元件，对其进行缩放变形后。

8.1.3 创建文字动画
（1）在前两节中已经制作好了影片的背景和咖啡热气的动画，现在来制作动态的文字效果。

在时间轴上锁定"热气"图层，新建一个名为"文字"的图层。

（2）在该图层上输入一行文字，字体设置为黑色，字体大小根据背景的大小适当调整。

（3）选中该行文字，按"F8"功能键将这行文字转换为影片剪辑元件，并把这个元件命名为"文字1"。

（4）文字被转换为元件之后，分别在每个图层的第100帧处按"F5"功能键扩展帧，选择"文字"图层的第1帧，单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。

（5）创建好补间动画之后，在第20帧上插入一个关键帧，并在该帧上单击鼠标右键，从弹出的菜单中选择"删除补间"命令，删除20帧以后的补间动画。

（6）选中第1帧，然后在舞台中单击一下文字，选中文字图形。

打开"滤镜"面板，在该面板下点击"添加滤镜"按钮，在弹出的列表中选择"模糊"滤镜，将模糊值X和Y均设置为50，品质保持默认不变。

（7）锁定"文字"图层，新建一个名为"文字2"的图层，在该图层的第20帧处插入一个关键帧。

然后在舞台中输入另一行文字。

（8）使用第3步到第6步中的方法，为该行文字创建一个由模糊到清晰的动画效果。

完成第2行文字的动画效果之后，利用相同的方法，再制作3行动态文字。

（9）到此一张贺卡性质的动画效果就制作完成，最后预览并保持动画。

8.2 综合实例：贺卡--母亲节快乐
学习目标
这例来学习制作一个母亲节贺卡，着重学习图层的管理，运动动画和逐帧动画的制作，另外学习"stop();"语句的使用。

上机实践
8.2.1 制作闹钟
（1）首先创建一个新文档，文档大小保持默认状态即可，然后在舞台中绘制一个由蓝"#044E95"到黑的放射状渐变矩形，并使用"填充变形工具" 调节渐变中心点的位置和渐变半径的大小，作为背景效果。

（2）双击图层1，将该图层更名为"背景"，创建一个名为"闹钟"新图层，在该图层上绘制一个闹钟，如图8.21所示。

（3）使用"选择工具" 只选中闹钟图形，按"F8"功能键，将其转换为影片剪辑元件，并命名为"小闹钟"。

（4）在舞台中选中闹钟图形，打开"滤镜"面板，点击"添加滤镜"按钮，在弹出列表中选择"投影"滤镜。

保持"投影"滤镜属性的默认值不变，为闹钟图形添加一个投影效果。

（5）双击闹钟图形，进入该元件的编辑状态，然后在时间轴的前5帧上均插入一个关键帧。

（6）选择第2帧，使用"任意变形工具" 向下旋转闹钟图形，在第4帧上则是向上旋转闹钟，制作出闹钟响起时左右晃动的效果。

（7）点击时间轴上的"场景1"按钮，回到主场景中，在"闹钟"层的第10帧上插入一个关键帧。

插入关键帧后在该帧上创建一个补间动画。

（8）创建好补间动画之后，再在时间轴的第25帧上插入一个关键帧。

选中该帧，在舞台上再单击一次闹钟
图形，在"属性"面板下将它的"Alpha"值设置为0。

8.2.2 制作女孩儿的正面动画
（1）在"背景"图层的第100帧处按"F5"功能键扩展帧。

然后创建一个名为"女孩儿"的新图层，该图层位于其他图层的上方。

（2）在新创建的图层的第15帧上插入一个关键帧，然后绘制一个小女孩儿，或者从外部直接导入一个图像。

（3）在第15帧上创建一个补间动画，再在第35帧上插入一个关键帧。

在该帧上单击鼠标右键，在弹出的菜单中选择"删除补间"命令，删除35帧以后的补间动画。

（4）选择第15帧，在舞台中单击小女孩儿图像，打开"属性"面板。

在该面板下选择"颜色"列表中的"亮度"命令，将图像的亮度值设置成"-80%"。

（5）设置完成后，将女孩图像移动到舞台的右边缘处。

完成补间动画之后，锁定该图层，创建一个名为"文字"的新图层。

8.2.3 创建文字动画
（1）在"文字"层的第25帧上插入一个关键帧，然后在舞台上绘制一个多角星形，并在星形上输入一行文字。

（2）在第26到第31帧上各插入一个关键帧，再在第26、28和30帧上按"Delete"键删除这3个帧上的内容，制作出文字忽闪忽现的动感效果。

（3）在第31帧上单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。

创建好补间动画之后，在第40帧上插入一个关键帧，在该帧上单击鼠标右键，再在弹出的列表中选择"删除补间"命令，删除第40帧以后的补间动画。

（4）选中第40帧，在舞台上单击一下文字，确认它在舞台中被选中。

打开"属性"面板，在"颜色"项下的"Alpha"命令中，将"Alpha"值设置为0，即文字在第40帧的时候处于完全透明状态。

（5）锁定"文字"图层，创建一个名为"文字2"的新图层。

在该图层的第35帧处插入一个关键帧，然后在舞台中输入两行文字，并为文字添加一个边框效果。

（6）输入好文字之后，在第36帧到第41帧的各帧上都插入一个关键帧，然后再删除第36、38和40帧上的内容。

制作出与第2步中相同的动画效果。

（7）在第45帧上插入一个关键帧，在该帧上创建一个补间动画之后，在第50帧上插入一个关键帧。

按照第3步中的方法，删除第50帧以后的补间动画。

删除补间动画之后，再在第51帧上按"F7"功能键，插入一个空白关键帧。

（8）选择第50帧，在舞台中使用"任意变形工具" 对舞台上的文字进行拉扁拉长变形。

（9）选中舞台上的文字，在"属性"面板中的"颜色"项下的"Alpha"命令中将"Alpha"的值设置为0，即设置文字为完全透明。

（10）锁定"文字2"图层，解开"女孩儿"图层上的小锁，使该图层处于当前编辑图层。

在该图层的第45帧上插入一个关键帧，然后单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。

（11）创建好补间动画之后，在第50帧上插入一个关键帧，按照第16步中的方法删除第50帧以后的补间动画，再在第51帧上按"F7"功能键插入一个空白关键帧。

（12）选择第50帧，在舞台中对女孩儿图像进行拉扁拉长变形。

再在"属性"面板中，在"颜色"项下的"Alpha"命令中，将"Alpha"的值设置为0。

8.2.4 制作女孩儿背影动画
（1）锁定"女孩儿"图层，解开"背景"图层上的小锁，使该图层处于当前编辑图层。

在该图层的第51帧上按"F7"功能键插入一个关键帧。

（2）在第51帧所对应的舞台上绘制一个背景，作为厨房效果。

完成后锁定该图层，在"文字"层的第51帧上按"F7"功能键插入一个空白关键帧。

（3）创建一个名为"女孩儿2"的新图层，在该图层的第55帧上插入一个关键帧。

然后在该帧所对应的舞台上绘制出小女孩儿的背面效果。

（4）在第55帧上创建一个补间动画，然后在第60、63、65、70和75帧上各插入一个关键帧。

在第75帧
上单击鼠标右键，在弹出的菜单中选择"删除补间"命令，删除第75帧以后的补间动画。

（5）选中第55帧，将女孩儿图像水平移动至舞台的右侧边缘以外，然后分别在第60、63、65、70和75帧所对应的舞台上，在水平位置上左右移动女孩的位置，位置可以没有规则。

制作出女孩儿在厨房内因忙碌而左右移动的动画效果。

（6）完成上述操作之后，在第80帧上按"F7"功能键插入一个空白关键帧。

接着锁定"女孩儿2"图层，解开"背景"层上的小锁，使该图层处于当前编辑状态。

在"背景"图层的第80帧处按"F7"功能键插入一个空白关键帧，然后在所对应的舞台上绘制一个背景。

（7）锁定"背景"图层，解开"女孩儿"图层，在该层的第80帧上插入一个关键帧，然后将女孩的正面图形复制一个到当前舞台上。

（8）接下来绘制一盘精美的小菜图形，或者从外部文件中导入一幅美食图片，作为女孩儿劳动的成果。

（9）锁定"女孩儿"图层，解开"文字"图层上的小锁，使该图层处于当前编辑层。

在该层的第80帧上插入一个关键帧，然后在舞台中输入一行文字，并绘制出简单的装饰效果。

（10）在第100帧处插入一个关键帧，然后打开"动作"面板，在"动作"面板下输入"stop();"语句。

输入该语句之后，动画在播放到100帧，将停止继续播放。

（11）最后预览并保存动画。

一个母亲节的贺卡就制作完成。

8.3 综合实例：公益宣传--幸福的一家
学习目标
在美丽的公园里，生活着幸福的向日葵一家。

让我们用线条构建出温馨的景色，体现出浓浓的亲情，以此来祝福世界上所有的家庭。

上机实践
8.3.1 绘制背景
（1）首先创建一个新文档，文档大小保持默认。

首先在舞台中绘制一个矩形，填充颜色设置为由白到淡黄色"#F2E99A"的线性渐变，作为整个动画的背景。

再绘制两颗大树，作为整个动画远景。

（2）双击图层1，将该图层更名为"背景"。

锁定"背景"图层，创建一个名为"花儿下"的新图层，在该图层上绘制一个花朵。

然后复制出若干个花朵，作为整个动画的中景。

8.3.2 创建影片剪辑元件
（1）锁定"花儿下"图层，执行菜单栏"插入/新建元件"命令，创建一个名为"向日葵"的图形元件。

在该元件下，绘制一棵向日葵。

（2）执行菜单栏"插入/新建元件"命令，创建一个名为"眼睛"的影片剪辑元件。

接着进入该元件的编辑区，在舞台上绘制一个黑色椭圆，该椭圆要作为向日葵的眼睛，所以不需要过大。

（3）绘制好椭圆之后，在第2帧上按"F5"功能键扩展帧，完成后锁定图层1。

创建一个新的图层2，在该图层上绘制两个白色椭圆，作为眼睛的高光效果。

（4）在第2帧上插入一个关键帧，使用键盘上的向右方向键，将两个白色椭圆向右移动一个像素的距离，这样眼睛的动画效果就制作完成。

（5）执行菜单栏"插入/新建元件"命令，创建一个名为"花爸爸"的影片剪辑元件，进入该元件的编辑区。

（6）将"向日葵"和"眼睛"元件拖拽至舞台上，组合成面部效果。

新建一个图层2，使用"椭圆工具" 给制两个无填充颜色的椭圆，作为眼镜效果。

再使用"线条工具" 绘制两条直线，作为镜框。

（7）创建一个名为"花妈妈"的影片剪辑元件。

在该元件下同样使用"向日葵"和"眼睛"元件组合成面部效果。

接着创建一个新图层，在新图层中为眼睛绘制睫毛效果。

（8）再创建一个名为"小向日葵"的影片剪辑元件。

同样先使用"向日葵"和"眼睛"元件组合面部效果。

再创建一个新图层，在该图层上使用"线条工具" 绘制一条直线，然后选择菜单栏"修改/形状/将线条转化为填充"命令，将线条转化为填充，接着使用"选择工具" 将形状变形，构成笑脸效果。

8.3.3 创建运动动画
（1）通过上述步骤的操作，整个动画需要的影片元素就制作完成。

回到主场景中，分别在每个图层的第80帧上按"F5"功能键扩展帧。

（2）点击时间轴上的"插入图层"按钮，创建一个名为"花妈妈"的新图层，在该图层的第10帧上按"F6"功能键插入一个关键帧。

然后从"库"面板中将影片剪辑元件"花妈妈"拖拽至舞台中。

（3）在第10帧上右击鼠标，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。

创建好补间动画之后，在第25帧上按"F6"功能键插入一个关键帧。

继续选中该帧，右击鼠标，在弹出的菜单中选择"删除补间"命令，删除25帧以后的补间动画。

（4）选择第10帧，将舞台上的"花妈妈"元件垂直向下拖拽到文档的边缘以外。

这样"花妈妈"的动画效果就制作完成。

（5）锁定"花妈妈"图层，新建一个"花爸爸"的图层，在该层的第25帧上插入一个关键帧。

然后将影片剪辑元件"花爸爸"拖拽至舞台上。

（6）在25帧上单击鼠标右键，在弹出的菜单中选择"创建补间动画"命令，创建一个补间动画。

创建好补间动画之后，在第40帧上插入一个关键帧。

（7）在第40帧上单击鼠标右键，在弹出的列表中选择"删除补间"命令，删除40帧以后的补间动画。

完成后再选择第25帧，将"花爸爸"元件垂直向下拖拽至舞台的边缘外侧。

（8）锁定"花爸爸"图层，新建一个名为"小向日葵"的图层。

在该图层的第40帧上插入一个关键帧，然后将影片剪辑元件"小向日葵"拖拽至舞台上，将该元件适当缩小后，把它放置在另外两个影片剪辑元件的中间位置上。

（9）在"小向日葵"图层的第40帧上创建一个补间动画，然后在55帧上插入一个关键帧，利用和第7步相同的方法删除第55帧以后的补间动画。

（10）在"小向日葵"图层上选择第40帧，在舞台中垂直向下拖拽"小向日葵"，将它放置到舞台的边缘以外。

（11）接下来，锁定"小向日葵"图层，解开"花爸爸"图层的小锁，使该层处于当前编辑图层。

在该层的第70帧上按"F6"功能键，插入一个关键帧。

（12）继续选择第70帧，在舞台上使用"任意变形工具" 选中"花爸爸"图形，将变形中心点拖拽至图形底边中心点上，然后向左旋转图形。

（13）锁定"花爸爸"图层，解开"花妈妈"图层的上小锁，确认该图层为当前编辑图层。

然后在舞台上应用第12步中的方法，将"花妈妈"元件向右旋转。

（14）锁定"花妈妈"图层，创建一个名为"花儿上"的新图层，使用"选择工具" 将该图层拖拽至所有图层的上方。

（15）解开"花儿下"图层上的小锁，使用"选择工具" 选中其中的一朵花，在该花上单击鼠标右键，在弹出的菜单中选择"复制"命令，准备将花朵复制到新的位置上。

（16）执行了复制命令后，锁定"花儿下"图层，将"花儿上"图层选为当前编辑图层。

在该图层的舞台中，单击鼠标右键，在弹出的菜单中选择"粘贴"命令，将花朵复制到该层中。

（17）复制出若干个花朵图形，使它不规则的排列的舞台中下部位置上，作为整个动画的前景效果。

8.3.4 创建文字动画
（1）锁定"花儿上"图层，创建一个名为"文字1"的新图层，在该图层上输入一行文字。

（2）在"文字1"图层的第1帧上创建一个补间动画，然后再在第10和第80帧上分别插入一个关键帧。

（3）选择第1帧，在舞台中将文字拖拽至文档左边缘以外的任意位置上；选择第80帧，在舞台中将文字拖拽至舞台右边缘以外的任意位置上。

（4）选择第1到10帧上的任意一帧，打开"属性"面板，将旋转方向设置成"顺时针"其余保持默认不变。

（5）通过上面几步的操作，第一行文字的动画效果就制作完成，现在来制作第二行文字的动画效果。

（6）锁定"文字1"图层，新建一个名为"文字2"的图层，在该图层的第10帧上插入一个关键帧，然后在舞台输入一行文字。

（7）在第10帧上创建一个补间动画，再在第20和第80帧上插入一个关键帧。

选择第10帧，将舞台上的文字拖拽至文档右侧边缘以外的任意位置上；选择第80帧，将舞台上的文字拖拽至左侧边缘以外的任意位置上。

（8）在第10到20帧上任意选择一帧，然后在"属性"面板中将文字的旋转方向设置为"逆时针"旋转，其余保持不变。

（9）最后预览并保存文档，一个幸福的三口之家贺卡就制作完成。

8.4 综合实例：公益宣传--早出夜归
学习目标
本例来制作一个公益广告性质的动画。

重点练习引导层动画和影片剪辑动画的使用。

上机实践
8.4.1 创建小人动画
（1）新建一个Flash文档，文档大小保持默认状态即可。

然后在舞台上绘制一个背景，或者导入一个背景图像至舞台中。

（2）执行菜单栏中的"插入/新建元件"命令，创建一个名为"运动的小人"影片剪辑元件。

（3）进入元件"运动的小人"编辑区，在舞台上绘制一个小人图像。

（4）在第2帧上插入一个关键帧，然后对舞台中的图像进行变形。

注意，变形后小人的脚以反方向呈现，头发也适当变短了一些。

另外注意第1、2帧上的小人都要以白色作为填充色。

（5）点击时间轴上的"场景1"按钮，回到主场景中。

锁定"背景"层，创建一个名为"小人"的新图层，在该图层上，将影片剪辑元件"运动的小人"从"库"面板拖拽至舞台上。

使用"任意变形工具" 将该图像适当缩小，使该图像与房子的图像成适当比例。

（6）在"背景"图层的第80帧上按"F5"功能键扩展帧，然后在"小人"图层的第1帧上单击鼠标右键，创建一个补间动画。

创建好补间动画之后，在第80帧上按"F6"功能键插入关键帧。

（7）点击时间轴上的"添加运动引导层"按钮，为"小人"图层添加一个运动引导层。

在该图层上绘制一条曲线，作为小人运动的路径。

（8）锁定引导层，将"小人"图层选择为当前编辑层。

启用工具箱中的"贴紧至对象" 按钮，在第1帧上，将小人图像吸附在引导线的起始端上；在第80帧上，将小人图像吸附在引导线的末端处。

8.4.2 创建背景动画
（1）锁定"小人"图层，创建一个名为"背景2"的新图层。

在该图层的第80帧上插入一个关键帧，然后在舞台中绘制一个夜色背景图。

（2）在第180帧上按"F5"功能键扩展帧，接着使用"选择工具" 将"背景2"图层拖拽至"背景"层的下方，然后锁定"背景2"图层。

（3）解开"背景"图层上的小锁，选择该图层的第80帧，按"F6"功能键插入一个关键帧。

然后在该帧上创建一个补间动画，再在第100帧上插入一个关键帧。

（4）选中第100帧，然后在舞台上单击背景图像，使它处于选中状态。

打开"属性"面板，在该面板下，将"颜色"列表中的"Alpha"值设置为0。

制作出白天景像逐渐消失，继而转换为夜景的动画效果。

（5）锁定"背景"图层，创建一个名为"星星"的新图层。

在该图层的第100帧上插入一个关键帧。

8.4.3 创建星星动画
（1）执行菜单栏"插入/新建元件"命令，创建一个名为"天上星"的影片剪辑元件。

（2）进入元件"天上星"的编辑区域，借助工具箱中的"多角星形工具" 在舞台中绘制一个五角星。

（3）选择第1帧，在"属性"面板下的"补间"列表中选择"形状"命令，创建一个形状补间动画。

（4）在时间轴的第5和第10帧上插入一个关键帧，接着选中第5帧。

选择工具箱中的"任意变形工具" 选中舞台上的五角星，同时按住"Shift"和"Alt"键等比例缩小五角星，制作出五角星忽大忽小的动画效果。

（5）锁定图层1，创建一个新的图层2。

将该图层拖拽至图层1的下方，然后在舞台上绘制一个椭圆，作为五角星的光晕效果。

要特别注意的是，在设置光晕的渐变效果时，前后两个滑块的颜色是一致的，只是"Alpha"的值不同而已。

（6）按照第3步中的方法，为图层2的第1帧创建一个形状补间动画。

再在第5和第10帧上插入一个关键。