引导路径动画 (2)

4．实例2——海底世界

 

实例简介

 

海底是很多人向往的神秘世界，今天，我们就用Flash来试 着描绘这个世界。笔者设计的这个实例中包括了动作补间动画、形状补间动画、遮罩动画、引导路径动画等四种动画形式，制作上要比前面几节中的实例难度大一 些，不过，它能综合复习前面学过的内容，操作原理也是我们熟悉的，相信你一定能顺利完成这个实例， 素材如下：

 

水.MP3

 

 

知识提要

 

●     综合应用四种动画形式

●     创建透明水泡

●     创建多层遮罩

 

 

制作步骤

 

（ 1 ）创建影片文档

 

新建一个影片文档，设置舞台尺寸为450×300 像素，【背景色】为深蓝色，如图3-6-20所示。

 

 

图3-6-21 设置文档属性

 

引导路径动画(5)

 

 

（ 2 ）创建元件

 

本例中的元件较前面的实例要多一些，我们把它们分成“水泡部分”、“海底部分”、“游鱼部分”三大部 分来叙述。先来创建和水泡有关的部分。

 

步骤 1 创建“单个水泡”元件

 

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “单个水泡”。先在场景中画一个无边的圆，颜色任意，大小为30×30像素，再在【混色器】面板中，添加两个色标，颜色全为白色，【Alpha】值从左向 右依次为100%、40%、10%、100%，如图3-6-22所示，选择【颜料桶工具】 ，在画好的圆的中心偏左上的地方单击一下，如对填充的颜色不满意，可以用【填充 变形工具】 进行调整。

 

 

图3-6-22 水泡（放大400倍）、填充位置及混色器面板参数

 

 

步骤 2 创建“一个水泡及引导线”元件

 

执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为 “一个水泡及引导线”。单击【添加引导层】按钮 ，添加一个引导层，在此层中用【铅笔工具】 从场景的中心向上画一条曲线，在第60帧处添加普通帧。将工具箱中的【对齐对 象】按钮按下，选中被引导层的第一帧，从【库】中将名为“单个水泡”的元件，拖放在引导线的下端，在第60帧添加关键帧，把“单个水泡”元件实例移到引导 线的上端并设置【Alpha】值为50%，如图3-6-23所示。  

 

 

图3-6-23 水泡及引导线

 

 

步骤 3 创建“成堆的水泡”元件

 

 

执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为 “成堆的水泡”。从库里拖入数个“一个水泡及引导线”元件，任意改变大小和位置，图3-6-24仅供参考。

 

 

图3-6-24 成堆的水泡（放大400倍）

 

下面我们来做“游鱼”部分的元件。

 

步骤 4 创建“游鱼 ” 元件

 

执行【插入】|【新建元件】命令，新建影片剪辑，名称为“游 鱼”。在场景中共设四层，图层名称分别为“鱼头”、“中间鱼尾”、“上面鱼尾”、“下面鱼尾”。

 

在各图层中画出鱼的各部分形状，如图3-6-25所示，“鱼 头”层中是鱼的眼睛和圆滚滚的身子，为了体现鱼游动时的婀娜多姿，我们把鱼尾分成上、中、下三部分（有关鼠绘的知识请看相关章节），画好后在第7、14帧 处各添加关键帧，把鱼头、鱼尾位置形状稍做改变，在第1、7、14帧处创建补间形状动画。为了保持动作连贯，第20帧和第1帧中的形状是完全一样的。

 

 

图3-6-25 鱼在各帧的形状及时间轴面板

 

 

步骤 5 创建“鱼及引导线”元件

 

执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为 “鱼及引导线”。此元件只有引导层和被引导层二层，单击时间轴面板上的【添加运动引导层】按钮 ，新建引导层，在引导层中用【铅笔工具】 画一条曲线，作为鱼儿游动时的路径，选择引导图层的第100帧，按F5键，使图 层中的帧延伸到第100帧。在被引导层中拖入库中名为“游鱼”的元件，用【任意变形工具】调整“游鱼”元件实例的大小，选择第100帧，按F6键，插入关 键帧，分别调整第1帧和第100帧中的“游鱼”元件实例到引导线的两端，在第1帧建立补间运动动画，其位置如图3-6-26所示。

 

 

图3-6-26 鱼在第1帧和第100帧的位置

 

引导路径动画(6)

 

在【 属性 】面板上，选中【路径调整】、【同步】和【对齐】复选框， 如图3-6-27所示。

 

 

图3-6-27 设置属性

 

下面我们来创建海底实例中“水波荡漾”效果所需的元件。

 

步骤 6 创建“海底 ” 元件

 

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “海底”。选择第1帧，然后再 执行【文件】 | 【导入】 | 【导入到舞台】命令，将海 的图片导入到场景中 。  

 

步骤 7 创建“遮罩矩形”元件

 

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “遮罩矩形”。在场景中画一个500×4的无边矩形，因为“遮罩层”中的图形在播放时不会显示，所以设置颜色为任意。 复制并粘贴这个矩形，向下移一点位置，使其变成二个，再复制并粘贴这二个矩形，再向下移一点位置， 使其变为四个，如此循环，在粘帖过程中，选中所有矩形，在【属性】面板中查看图形高度，直至创建出一个500×540 的矩形，如图3-6-28所示。  

 

图3-6-28 遮罩矩形

 

步骤 8 创建“水波效果”元件

 

    水波荡漾的效果是用遮罩动画的手法做的，看着挺漂亮，实际制作却很简单，只用三层就完成了，里面有二 个小技巧，在下面的讲解过程中会着重介绍。

 

执行【插入】 | 【新建元件】命令，新建一个影片剪辑，名称为“水波效果”，如图 3-6-29 所示 。  

 

图 3-6-29 创建“水波效果”元件

 

从【库】面板里将名为“海底”的图形元件拖放到场景中，在【 属性 】面板上设置元 件的【X】值为0，【Y】值为0，在时间帧上单击右键，在弹出菜单中选择 【复制帧】，在第 100 帧添加普通帧。

 

然后 新建一个图层， 在这层的第1帧上单击鼠标右键，在弹出菜单中选择 【粘贴帧】，就把刚才的元件粘到第二层中了，选中该层中的实例，在 【 属性 】 面板上设置它的 【 X 】值为 0 ，【 Y 】值为 1 ，【 Alpha 】值为 80 ％。

 

注意：这里是一个技巧：第二层图片与第一层图片的位置差决定水波荡漾的大小！位置差越 大，水波越大，其【Alpha】值的大小决定水波的清晰程度，【Alpha】值越大，水波越清晰，反之越模糊。

 

图 3-6-30 是第一层和第二层中，两张图片在 X ， Y 轴的位置对比。

 

图 3-6-30 两张图片在场景中的位置对比

 

要实现水波荡漾，光有二层图片是不行的，还要用遮罩动画实现光线的明暗变化才行,这样，才能产生水的流动感。

 

新建一层，在第1帧上拖入【库】中名为“遮罩矩形”的元件， 注意下面的边缘对着“海底图片”的下边缘。在第100帧上添加关键帧，拖动“遮罩矩形”元件实例，使其上边缘对着“海底图片”的上边缘，在第1帧创建补间 动作动画，如图3-6-31所示。  

 

 

图3-6-31 遮罩层中矩形元件的位置

 

右击该图层名称，在弹出的快捷菜单中选择【遮罩层】命令。至此，这个动画所需的基本构件已经制作完 成，接下来还必需在场景中把各个构件“组装”起来。

 

单击时间轴右上方的【编辑场景】按钮，选择【场景1】切换到 主场景中。在主场景中一共需要5个图层，我们由下而上一层一层地叙述，请随时参考 图 3-6-34 。

 

引导路径动画(7)

 

 

（3）创建动画

 

步骤1 创建背景层

 

从库中把名为“水波效果”的元件拖到场景中，在第134帧添 加普通帧，该层命名为“背景”。

 

步骤2 创建水泡层

 

新建名为“水泡”的图层，在第1帧，从【库】中将“成堆的水 泡”影片剪辑元件拖到场景中来，数目、大小、位置任意；在第30帧插入关键帧，调整该帧上“成堆的水泡”影片剪辑元件的数量、大小及位置，在第134帧添 加普通帧。

 

步骤3 创建游鱼层

 

新建名为“鱼”的图层，从库里把名为“鱼及引导线”的元件拖放到场景的左侧，数目、大小、位置任意。

步骤4 创建音乐对象

 

新建名为“声音”的图层，执行【文件】 | 【导入】 | 【导入到库】命令，将“流水声 .mp3 ”的音乐文件导入到库中， 选择第1帧，在【 属性 】面板上设置声音属性，在【声音】下拉列表中选择【流水声.mp3】，在【 声音循环 】下拉列表中选择【 重 复 】选项，在【 循环次数 】文本框 中，输入“999”，如图3-6-32 所示 。  

 

 

图 3-6-32 声音 【 属性 】 面板

 

 

这时，场景效果如图 3-6-33 所示。

 

图 3-6-33 图片、鱼、水泡的位置

 

从场景中你是否发现，我们在制作过程中免不了会在场景外放置一些对象（图 3-6-33 所示在场景外就有一条鱼），这些 “场外对象”在本地播放器中不会出现，而当你在网上发布 swf 文件时，由于网站（尤其各种论坛）默认的 swf 文件的尺寸不尽相同，有的会显示出“场外对象”，这好比一个舞台剧演出时，幕后的演员也暴露出来， 非常不美观，怎么办呢？

 

记得在谈到“遮罩动画”时，我们曾提到过“遮罩”的另外一个作用 是“用来遮罩全部场景或某个特殊区域”，那么，下面就试试用遮罩来为我们管理舞台界面！

 

步骤 5 创建遮罩层

 

新增一个图层，在场景中画一个无边矩形，大小为 450 × 300 ，盖住全部场景，用鼠标右键单击图层的名称，在弹出的菜单中选择【遮罩层】，此时下面的声音层自动缩 进被遮罩了，用鼠标左键分别按住下面的各层，向上略移一点点，松手，各层就会自动缩进被遮罩了，如图 3-6-34 所示。

 

这样，在播放时，我们就只能看到场景中的情形了，场景外的元件被遮罩了。

 

图 3-6-34 遮罩层遮住下面各层

 

 

 

 

 

效果如下：