数字媒体技术原理与应用教学资料-参考案例3

1、项目1项目2项目3项目4项目5项目9项目8项目6项目7项目10案例3向杯中倒酒的效果本章通过“向杯中倒酒”的效果的制作，介绍了形状补间动画、运动补间动画及遮罩动画三者的利用来制作完成动画的基本技能。“向杯中倒酒”动画效果如图7-1所示。本章首先介绍背景的制作；然后是用矢量工具绘制杯子，不同状态的瓶子及酒水流；按着制作酒瓶中酒水减少的效果，酒杯中酒上升的动画效果；最后制作完成酒瓶倾倒的效果及酒水流的动画效果。知识要点：n 利用矢量工具绘制杯子及酒瓶n 利用运动补间动画完成酒瓶中酒水不断减少的效果n 利用形状补间动画完成酒水流的动画效果图7-1 最终效果7.1思路剖析及制作流程在制作本实例时，首先

2、制作背景，然后绘制酒杯，瓶子状态，按着制作酒瓶中酒水减少的效果，酒杯中酒上升的动画效果；最后制作完成酒瓶倾倒的效果及酒水流的动画效果。整个实例的创建过程如图1-2所示。 制作背景绘制酒瓶 设置扇骨动画效果酒水减少效果图酒面上升效果酒瓶倾倒效果水流效果7-2 “展开与收起的扇子”制作流程 7.2向杯中倒酒效果 7.2.1 制作背景（1）新建Flash文档，右击工作区域，在弹出的快捷菜单中选择“设置文档”。如图7-3所示。图7-3 单击“文档属性”（2）在弹出的“文档属性”对话框中设置舞台大小为宽550像素、高500像素、背景颜色为白色，单击确定按钮。如图7-4所示。图7-4 设置文档属性（3）在

3、舞台中绘制一个没有边框线，大小为550500的矩形。如图7-5所示。图7-5矩形属性（5）选中舞台中绘制的矩形，利用混色器面板为矩形填充位图。鼠标单击“颜色面板/混色器/颜料桶/”，在类型下拉列表框中选择位图，在弹出的列表框中选择要导入的位图。如图7-6所示。图7-6填充位图（6）将舞台中的矩形填充所选中的位图的效果如图7-7所示。图7-7填充位图的矩形 7.2.2 绘制杯子（1）单击“插入”菜单，在弹出的级联菜单中选择“新建元件”命令。如图7-8所示。图7-8 单击“新建元件”（2）在弹出的“创建新元件”对话框中对新建元件命名为“扇骨”，类型为“影片剪辑”。如图7-9所示。图7-9 设置“创

4、建新元件”对话框（3）单击椭圆工具，然后在混色器中将填充色设置为线性渐变色，左侧的色块颜色#999999，右侧色块颜色为#ffffff。如图7-10所示。图7-10 设置混色器（4）在舞台上绘制椭圆，大小为14070。然后按Ctrl+G键将椭圆组合。如图7-11所示。图7-11 绘制椭圆（5）将椭圆复制一份，向下移动复制品。然后选中复制后的椭圆，利用变形工具将它缩小到60%之后，鼠标单击复制并应用按钮。如图7-12所示。图7-12 设置变形面板（6）利用选取工具及任意变形工具调整两个椭圆的大小及位置。如图7-13所示。图7-13 调整两个椭圆（7）在两个椭圆上面绘制一个大小为20*110的矩形

5、，然后将它组合。如图7-14所示。图7-14 绘制矩形（8）在矩形和上面的椭圆之间绘制两条斜线。如图7-15所示。图7-15 绘制斜线（9）利用选取工具调整两条斜线为两条弧线，然后将组合全部打散，调整颜色及细节部位，最后全部选中组合，利用对齐面板将它相对于舞台垂直水平居中。如图7-16所示。图7-16 调整后的杯子 7.2.3 制作倾倒的酒瓶动画（1）新建一个影片剪辑元件，命名为“空酒瓶”。单击确定按钮。如图1-21所示。图7-17 新建空酒瓶元件（2）在空酒瓶元件的编辑区中导入图片“瓶子原”，然后打散它，去掉背景。然后用墨水瓶工具给它添加边框，去掉填充色。如图7-18所示。图7-18 瓶子框

6、线（3）新建影片剪辑元件，命名为“满瓶子”，单击确定按钮进入到满瓶子元件的编辑区。如图7-19所示。图7-19 创建新元件（4）将空瓶子元件拖入到满瓶子元件的编辑区中，然后Ctrl+B键打散空瓶子元件。如图7-20所示。图7-20 设置圆的位置（5）利用颜料桶工具对打散的瓶子进行填色，类型为线性渐变色，左侧色块颜色为#990000，右侧色块颜色为#000000。如图7-21所示。图7-21 设置混色器（6）利用工具栏中的颜料桶工具将满瓶子元件编辑区中的瓶子填充上设置好的颜色后的效果如图7-22所示。图7-22 填充颜色（7）在新建一个影片剪辑元件，命名为“倾倒瓶子”。单击确定按钮进入倾倒瓶子元

7、件的编辑区中。如图7-23所示。图7-23新建倾倒瓶子元件（8）将图层1命名为满瓶子。然后将满瓶子元件拖放到第1帧中。如图7-24所示。图7-24放置满瓶子元件（9）在满瓶子图层上新建一图层，命名为“遮罩”。在遮罩图层上绘制一个矩形，此矩形没有边框线，填充颜色任意，大小为440225。位置如图7-25所示。（边框显示方式，其中，蓝色边框线即为矩形的轮廓）图7-25绘制矩形（10）取消边框显示方式，选中矩形，单击F8键，将它转换为元件，类型为影片剪辑，名称为遮罩。如图7-26所示。图7-26转换元件（11）在遮罩图层的第40帧处插入关键帧，在满瓶子图层插入普通帧。然后在遮罩图层的第1帧和第40帧

8、之间创建运动补间动画。鼠标单击第40帧，然后单击动作面板，输入控制命令：stop(); 如图7-27所示。图7-27对帧进行编辑（12）在遮罩图层的第40帧中旋转矩形，通过变形面板将矩形旋转25度。如图7-28所示。（边框显示方式）图7-28放置矩形（13）鼠标右键单击遮罩图层，从快捷菜单中选择遮罩层，实现酒水的减少。如图7-29所示。图7-29遮罩效果 7.2.4 制作杯子酒满的效果（1）返回到场景中，在背景图层上新建一图层，命名为“杯子”，将杯子元件拖放到舞台中。利用任意变形工具对舞台中的杯子进行调整。如图7-30所示。图7-30 调整杯子（2）在舞台中将杯子元件打散，然后利用选取工具选中

9、杯口的上边缘的弧线。如图7-31所示。图7-31选中上端弧线（3）按住Ctrl键，同时鼠标拖动弧线向下复制一弧线，然后删除多余弧线。最后效果如图7-32所示。图7-32复制弧线（4）利用颜色桶工具给杯子填充颜色，鼠标单击混色器中的颜料桶，类型为线性渐变色，左侧色块颜色为#990000，右侧色块颜色为#000000。如图7-33所示。图7-33 设置混色器（5）鼠标单击绘图工具栏中的颜料桶工具，对杯子进行颜色填充，然后用填充变形工具对所填充的渐变色进行调整，最后效果如图7-34所示。图7-34填充后效果（6）在杯子图层上新建一个图层，命名为“遮罩”，然后在遮罩图层中绘制一没有边框线的色块，此色块

10、的上端要与杯子的弧度一致，颜色不限。如图7-35所示。图7-35 绘制色块（7）将色块移动到杯子下方，然后在遮罩图层的第50帧处插入关键帧，在其它图层的第40帧插入普通帧。移动遮罩图层的第50帧中的色块，让它正好将杯子遮住。如图7-36所示。（框线显示方式）图7-36 40帧处矩形位置（8）选中第1帧到第50帧之间的任何一帧，然后单击属性面板中的补间，从补间下拉列表框中选择形状。如图7-37所示。图7-37 设置形状补间动画（9）鼠标右键单击遮罩图层，从快捷菜单中选择遮罩层，实现酒杯的变化。如图7-38所示。图7-38 遮罩效果（10）在背景图层上新建一个图层，命名为空杯子。然后将杯子元件拖入

11、舞台中，大小和杯子图层的杯子一致，位置和它完全重合。如图7-39所示。（杯子图层用边框方式显示）图7-39 两个杯子完全重合 7.2.5 酒瓶倾斜动画（1）在遮罩图层上新建图层，名称为“倒酒”。将倾倒酒瓶元件拖放到舞台中，位置如图7-40所示。图7-40 放置倾倒瓶子元件（2）利用任意变形工具将第1帧中倾倒酒瓶元件的变形中心点移动到瓶口处，然后在第40帧处插入关键帧，倾倒酒瓶元件的变形中心点移动到瓶口处。如图7-41所示。 图7-41 移动变形中心点（3）在第40帧处通过变形面板将倾倒酒瓶元件旋转25度。效果如图7-42所示。图7-42倾斜25度（4）右键单击第1帧到第40帧中的任何一帧，在弹

12、出的快捷菜单中选择创建补间动画命令，完成酒瓶的倾斜过程。如图7-43所示。图7-43创建运动补间动画（5）在倒酒图层上新建一个图层命名为空瓶子。然后将空瓶子元件拖放到舞台中，位置与倒酒图层中的瓶子完全重合。如图7-44所示。（空瓶子为边框显示方式）图7-44 调整位置（6）利用任意变形工具将第1帧中倾倒酒瓶元件的变形中心点移动到瓶口处，然后在第40帧处插入关键帧，倾倒酒瓶元件的变形中心点移动到瓶口处。如图7-45所示。 图7-45 移动变形中心点（7）在第40帧处通过变形面板将倾倒酒瓶元件旋转25度。效果如图7-46所示。图7-46倾斜25度（8）右键单击第1帧到第40帧中的任何一帧，在弹出的

13、快捷菜单中选择创建补间动画命令，完成空酒瓶的倾斜过程。如图7-43所示。图7-43创建运动补间动画 7.2.6 酒水的水流效果（1）在倒酒图层的上方新建一个图层，命名为水流。在第1帧绘制一条直线，粗细为3，颜色为#9c0000。如图7-44所示。图7-44设置属性面板（2）在杯口和瓶口之间绘制一条垂直线。如图7-45所示。图7-45绘制直线（3）在第5帧处插入关键帧，然后鼠标单击第1帧，利用选取工具删除下面一段线段。如图7-46所示。（放大效果）图7-46删除部分线段（4）选中第1帧到第5帧之间的任何一帧，然后单击属性面板中的补间，从补间下拉列表框中选择形状。如图7-47所示。图7-47 设置

14、形状补间动画（5）选中第1帧到第5帧之间的任何一帧，然后单击属性面板中的补间，从补间下拉列表框中选择形状。如图7-47所示。图7-47 设置形状补间动画（6）在最上面的三个图层的第41帧处插入空白关键帧。其它图层在第70帧处插入普通帧。如图7-48所示。图7-48编辑各图层的帧（7）至此，完整的动画已经完成。这时按Ctrl+Enter快捷键测试动画，可以看到完整作品的动画效果。测试调整完毕，使用菜单“文件/保存”命令保存文档。7.3 课后作业-加载栏的制作本练习中制作的加载栏是通过形状渐变及控制命令来加载栏的形状变化及百分比的变化的。效果如图7-49所示。 图7-49 动画效果关键步骤1：将图层1重命名为进度条，然后在进度条图层上绘制一个长矩形。在第100帧处插入关键帧，返回第1帧，将第1帧中的矩形利用选取工具选中90%左右，单击Delete键，将选中的部分删除。如图7-50所示。图7-50 修改第1帧的矩形关键步骤2：在第1帧和第