项目六　高级动画制作

项目引入

在Flash中，将制作动画的基本方法与图层的技术相结合，就形成两种扩展的动画制作方法——引导层动画和遮罩层动画。同时， Flash CS5的骨骼工具可以很便捷地将对象连接起来形成父子关系，来实现我们所说的反向运动。

任务一　制作雪花飘落动画

知识准备

运动引导层动画是指对象沿着某种特定的轨迹进行运动的动画，其中特定的轨迹也称为固定路径或引导线。作为动画的一种特殊类型，运动引导层动画的制作至少需要使用两个图层，一个是用于绘制固定路径的运动引导层，一个是运动对象图层。

引导层动画的创建主要通过引导层来实现，在引导层中先绘制作为运动路径的线条，然后通过在引导层与运动对象图层之间建立连接关系，使运动对象图层中补间动画里的动画对象沿绘制的路径运动，从而制作出沿指定路径运动的引导动画。在最终生成的动画中，运动引导层中的引导线不会显示出来。

1. 创建运动引导层

运动引导层就是用于绘制对象运动路径的图层，通过此图层中的运动路径可以使被引导层中的对象沿着绘制的路径运动。在【时间轴】面板中，一个运动引导层下可以有多个图层，也就是多个对象可以同时沿同一条路径运动，此时运动引导层下方的各图层称为被引导层。

在Flash中，创建运动引导层的常用方法有以下两种。

1) 使用【添加传统运动引导层】命令创建运动引导层

使用【添加传统运动引导层】命令创建运动引导层是最为方便的一种方法，具体操作步骤如下。

(1) 在【时间轴】面板中选择需要创建运动引导层动画对象所在的图层。

(2) 单击鼠标右键，在弹出的菜单中选择【添加传统运动引导层】命令，即可在刚才所选图层的上面创建一个运动引导层(此时创建的运动引导层前面的图标以显示)，并且将原来所选图层设为被引导层，如图6-1所示。

2) 使用【图层属性】对话框创建运动引导层

【图层属性】对话框用于显示与设置图层的属性，包括设置图层的类型等。使用【图层属性】对话框创建运动引导层的具体操作步骤如下。

(1) 选择【时间轴】面板中需要设置为运动引导层的图层，单击菜单栏中的【修改】|【时间轴】|【图层属性】命令，或者在该图层处单击鼠标右键，选择弹出菜单中的【属性】命令，都可弹出【图层属性】对话框。

(2) 在【图层属性】对话框中，选择“类型”中的“引导层”选项，如图6-2所示。

(3) 单击【确定】按钮，此时，将当前图层设置为运动引导层，如图6-3所示。

注意：此时创建的运动引导层前面的是图标，说明它还不能制作运动引导层动画，只能起到注释图层的作用，只有将其下面的图层转换为被引导层后，才能开始制作运动引导层动画。

(4) 选择运动引导层下方需要设置为被引导层的各图层(可以是单个图层，也可以是多个图层)，按住鼠标左键将其拖动到运动引导层下方，可以将其快速转换为被引导层，这样一个引导层可以设置多个被引导层，如图6-4、图6-5所示。

2. 绘制运动引导线

运动引导线可以使用任何绘图类的工具绘制，如钢笔工具、线条工具、椭圆工具、铅笔工具、刷子工具等，如图6-6所示。

注意：在使用各类工具绘制运动引导线时应尽量保证线条平滑，例如，使用铅笔工具绘制时应该将“铅笔模式”设置为“平滑”，目的是使绘制的引导线流畅且不易产生断点。

任务实施

任务目标：使用运动引导层动画技术制作雪花飘落的动画效果。

具体操作步骤如下。

(1) 启动Flash CS5程序，按【Ctrl+N】键新建一个Flash文档，帧频率设置为“24.00”fps，背景颜色设置为“黑色”。

(2) 新建元件，按【Ctrl+F8】键创建一个图形元件，如图6-7所示。

(3) 绘制雪花，选择多边形工具，在【属性】面板中选择按钮，在“工具设置”里将“边数”更改为“8”，在舞台上绘制一个八边形，填充颜色设置为“白色”。

(4) 选择菜单栏中的【窗口】|【对齐】命令，打开【对齐】面板，选择选项，再按【水平中齐】、【垂直中齐】使绘制的八边形居中显示在舞台上，如图6-8所示。

(5) 选择线条工具，按【Shift】键绘制一条直线，在【对齐】面板中按【水平中齐】、【垂直中齐】，使直线与八边形居中对齐，并用线条工具绘制雪花的细节，如图6-9所示。

(6) 双击选中绘制好的线条，选择菜单栏中的【窗口】|【变形】面板，将旋转角度调节成“45°”，多次单击【重置选区和变形】按钮，使八边形的每个角都有线条贯穿，完成雪花绘制。

(7) 将绘制好的雪花元件拖入场景中，使用任意变形工具缩放到合适大小，在第60帧处插入关键帧，在两个关键帧之间任意选一帧创建传统补间，如图6-10所示。

(8) 在“图层1”的上方单击鼠标右键，选择【添加运动引导层】命令，使用铅笔工具绘制一条曲线，这时雪花的中心点会自动吸附到引导线上，选择“图层1”中的第60帧，使雪花的中心点对齐引导线的末端，如图6-11所示。

(9) 选中传统补间中的任意一帧，在【属性】面板中设置“缓动”为“−30”、“旋转”为“顺时针2次”，勾选“调整到路径”，使雪花在飘落的过程中沿着引导路径转动，如图6-12所示。

(10) 为了使效果更逼真，在场景中第60帧处选中雪花实例，在【属性】面板中设置Alpha值为“0”，使雪花飘落到最后时消失，同理绘制多个路径，产生雪花纷纷飘落的效果，如图6-13所示。

(11) 按【Ctrl+S】键保存文档。

任务二　制作放大镜效果

知识准备

利用遮罩技术可以创建非常丰富的动画效果，其中最具代表性的就是放大镜效果。

和运动引导层动画相同，Flash中遮罩层动画的创建至少需要两个图层才能完成，分别是遮罩层和被遮罩层，位于上方用于设置遮罩范围的图层称为遮罩层，而位于下方的则称为被遮罩层。遮罩层如同一个窗口，通过它可以看到其下被遮罩层中的区域对象，而被遮罩层区域以外的对象将不会显示，如图6-14所示。

1. 创建遮罩层

遮罩层其实是由普通图层转化而来的，Flash会忽略遮罩层中的位图、渐变色、透明度、颜色和线条的样式，其中的任何填充区域都是完全透明的，任何非填充区域都是不透明的，因此遮罩层中的对象将作为镂空的对象存在。遮罩层的创建方法十分简单，可以通过菜单命令进行创建，也可以通过【图层属性】对话框进行创建。

1) 使用【遮罩层】命令创建遮罩层

使用【遮罩层】命令创建遮罩层是最为方便的一种方法，具体操作步骤如下。

(1) 在【时间轴】面板中选择需要设置为遮罩层的图层。

(2) 单击鼠标右键，在弹出的菜单中选择【遮罩层】命令，即可将当前图层设置为遮罩层，其下的一个图层也被相应地设置为被遮罩层，二者以缩进形式显示，如图6-15所示。

2) 使用【图层属性】对话框创建遮罩层

在【图层属性】对话框中除了可以用于设置运动引导层外，还可以设置遮罩层与被遮罩层，具体操作步骤如下。

(1) 选择【时间轴】面板中需要设置为遮罩层的图层，单击菜单栏中的【修改】|【时间轴】|【图层属性】命令，或者在该图层处单击鼠标右键，选择弹出菜单中的【属性】命令，都可弹出【图层属性】对话框。

(2) 在【图层属性】对话框中，选择“类型”为“遮罩层”选项，如图6-16所示。

(3) 单击【确定】按钮，此时，将当前图层设置为遮罩层，如图6-17所示。

(4) 使用同样的方法，在【时间轴】面板中选择需要设置为被遮罩层的图层，单击鼠标右键，选择弹出菜单中的【属性】命令，在弹出的【图层属性】对话框中选择“类型”为“被遮罩”，可以将当前图层设置为被遮罩层，如图6-18所示。

2. 撤消遮罩或被遮罩图层

创建好遮罩层后，可以根据需要使用以下方法撤消图层的遮罩或被遮罩属性。

1) 使用【遮罩层】命令撤消遮罩

具体操作步骤如下。

(1) 在【时间轴】面板中选择要撤消的遮罩层。

(2) 单击鼠标右键，在弹出菜单中选择【遮罩层】命令，即可将当前的遮罩层撤消，其下被遮罩的图层也被相应地撤消被遮罩属性。

2) 使用【图层属性】对话框撤消遮罩

具体操作步骤如下。

(1) 选择【时间轴】面板中要撤消的遮罩层或被遮罩层，单击菜单栏中的【修改】|【时间轴】|【图层属性】命令，或者在该图层处单击鼠标右键，选择弹出菜单中的【属性】命令，都可弹出【图层属性】对话框。

(2) 在【图层属性】对话框中，选择“类型”为“一般”选项。

(3) 单击【确定】按钮，此时，当前图层就会变成普通图层。

任务实施

任务目标：使用遮罩动画技术制作放大镜效果，通过该放大镜图像将使用滤镜模糊后的图像的指定区域放大。

具体操作步骤如下。

(1) 启动Flash CS5程序，按【Ctrl+N】键新建一个Flash文档。

(2) 按【Ctrl+L】键打开【库】面板，导入图片素材“图片素材.gif”到库，将图片拖入舞台，在【属性】面板中更改舞台的大小使之与位图的大小相同，并将图片素材调整到与舞台重叠。

(3) 只有文本、按钮和影片剪辑才能够使用滤镜效果，因此要将图片转换成影片剪辑元件，命名为“模糊图”，如图6-19所示。

(4) 选中场景中的影片剪辑“模糊图”，在【属性】面板的“滤镜”选项中添加“模糊”效果，并设置模糊值为“10像素”，如图6-20所示。将“图层1”重命名为“模糊图”。

(5) 新建图层，命名为“清晰图”，将影片剪辑“模糊图”拖入舞台，使用任意变形工具将“清晰图”略微调大，在【对齐】面板中勾选“与舞台对齐”，再按【水平中齐】和【垂直中齐】，如图6-21所示。

(6) 在图层“清晰图”上方新建图层“遮罩”，使用椭圆工具并按【Shift】键绘制一个正圆，如图6-22所示。

(7) 将正圆转换成名为“圆”的影片剪辑元件。

(8) 在图层“模糊图”和“清晰图”第90帧处插入帧。在图层“遮罩”的第15帧、第30帧、第45帧、第60帧、第75帧和第90帧处分别插入关键帧，分别设置这些关键帧处影片剪辑“圆”的位置，并在每个关键帧之间创建传统补间，如图6-23所示。

(9) 选中图层“遮罩”，单击鼠标右键，在弹出的菜单中选择【遮罩层】命令，将图层“遮罩”设置成遮罩层，如图6-24所示。

(10) 按【Ctrl+S】键保存文档，然后按【Ctrl+Enter】键对动画进行测试，最终效果如图6-25所示。

任务三　制作腿部动画

知识准备

骨骼动画也称为反向运动(IK)动画，是一种使用骨骼的关节结构对一个对象或彼此相关的一组对象进行动画处理的方法。Flash CS5中创建骨骼动画的对象分为两种，一种为元件实例对象，另一种为图形形状。先使用【工具】面板中的骨骼工具在元件实例对象或图形形状上创建出对象的骨骼，然后移动其中的一块骨骼，与这块骨骼相连的其他骨骼也会移动，通过这些骨骼的移动即可创建出骨骼动画。使用骨骼进行动画处理时，只需指定对象的开始位置和结束位置，然后通过反向运动即可轻松自然地创建出骨骼的运动。例如，使用骨骼动画可以轻松地创建人物动画，如胳膊、腿和面部表情，如图6-26所示。

1. 基于元件的骨骼动画

要创建基于元件实例的骨骼，可以使用骨骼工具将多个元件实例进行骨骼绑定，移动其中的一块骨骼会带动相邻的骨骼运动。具体操作步骤如下。

(1) 使用矩形工具创建一个基本的形状，将矩形转换成影片剪辑元件。

(2) 按【Alt】键，拖动矩形实例，创建相同符号的多个实例，如图6-27所示。

(3) 在【工具】面板中选择骨骼工具，将光标放置到最左边矩形的中心位置处单击并向第二个矩形中心位置拖动，创建出骨骼。这一段将会是骨骼的第一段，也可称为根骨骼，如图6-28所示。

(4) 接下来继续使用骨骼工具从第二个矩形处向第三个矩形处拖动，创建出第二块骨骼，依此类推，所有矩形都使用骨骼工具进行连接，如图6-29所示。

(5) 此时自动创建出一个名为“骨架_1”的图层，图层中的所有矩形实例自动剪切到“骨架_1”图层中，如图6-30所示。

(6) 在图层“骨架_1”中的第20帧和第40帧处分别插入关键帧。选择第20帧，使用选择工具可以在舞台上拖动每个矩形，将这一段矩形调整成各种姿势，如图6-31所示。

(7) 分别在第1帧和第20帧、第20帧和第40帧之间添加传统补间动画。

(8) 按【Ctrl+Enter】键可以观看矩形摇摆的动画效果。

2. 基于图形的骨骼动画

在Flash CS5中，与创建基于元件实例的骨骼动画不同，基于图形形状的骨骼动画对象必须是简单的图形形状，在此图形中可以添加多块骨骼。在向单个形状或一组形状中添加第一块骨骼之前必须选择左右形状。将骨骼添加到所选内容后，Flash会将所有的形状和骨骼转换为骨骼形状对象，并将该对象移动到新的骨架图层。将某个形状转换为骨骼形状后，它无法再与其他形状进行合并操作。对基于图形形状的骨骼动画也需要使用骨骼工具创建。具体操作步骤如下。

(1) 使用矩形工具绘制一个矩形，使用部分选择工具的变形功能把矩形上部变得更窄，做成尾巴的形状，如图6-32所示。

(2) 选择骨骼工具从尾巴的底部开始，单击并向上拖动形状内部来创建根骨骼，如图6-33所示。在画第一块骨骼时，Flash会自动创建“骨架_1”图层。

(3) 继续向上一个接一个地创建骨骼，这样可以头尾相连。建议骨骼的长度逐渐变短，越到尾部关节会越多。这样就能创建出更切合实际的动作，如图6-34所示。

(4) 使用选择工具拖动位于链条顶端的最后一块骨骼(在尾部的最根部)。因为非常直的尾巴看起来并不自然，所以把骨架放置成了类似S形，如图6-35所示。

(5) 在“骨架_1”图层的第10帧、第22帧、第35帧、第42帧、第50帧处分别插入关键帧。如果想要创建一张无缝动画，就需要让第1帧和第50帧对象状态相同。

(6) 在“骨架_1”图层的第10帧、第22帧、第35帧、第42帧处分别调整形状的姿势，如图6-36所示。在每个关键帧之间添加传统补间动画。

(7) 在【属性】面板中选择“缓动”弹出菜单中的“简单(慢)”类型，如图6-37所示。缓动会影响两个关键帧之间的动作，可以应用不同类型的缓动，并给

每个动作使用不同的缓动强度来给每一段补间选择不同的缓和预设值，以及调整每个补间的强度。

(8) 按【Ctrl+Enter】键可以观看尾巴摆动的动画效果。

任务实施

任务目标：前面已经使用Flash中的骨骼工具创建了两种不同类型的骨骼动画，接下来将这些技术结合起来为卡通角色创建行走动作的循环。

具体操作步骤如下。

(1) 启动Flash CS5程序，按【Ctrl+N】键新建一个Flash文档。

(2) 绘制腿部的三个部分图形，将其转换为图形元件，如图6-38所示。

(3) 使用骨骼工具并连接这三个腿部对象，以上部的腿符号作为这个骨架中的根骨骼。完成后的骨架应该只包括两块骨骼，如图6-39所示。

(4) 约束每块骨骼的节点旋转。这会限制每块骨骼关节的旋转范围，以避免旋转到从解剖学上来说不合理的位置。

(5) 直接单击选中一块骨骼。在【属性】面板的“旋转”选项中，选择“约束”，使用单击文字出现的滑动条调整旋转所需的角度范围，如图6-40所示。

(6) 调整根骨骼的速度，速度影响的是被操纵时的反应。速度的值越低，相当于给骨骼越高的负重，这样相对值高的骨骼反应就要迟缓。可以将速度的值设置得稍微低，这样整个骨架的效果就更自然，如图6-41所示。

(7) 由于三个对象只用了两块骨骼，所以链条中的最后一个对象更难控制。因为它没有一块专用的骨骼去进行动作的约束，所以要在骨架中增加一个额外的对象。

(8) Flash不允许添加对象到骨架图层，所以需要创建一个新的图层暂时存放这个对象。这里使用的是椭圆工具绘制的红色圆点，如图6-42所示。新建图层用于放置这个圆点，并将圆点转换成图形元件，使用骨骼工具从当前骨架的末端拖到新对象上。这样它就会变成这个骨骼链的一部分，如图6-43所示。

(9) 开始制作行走动作循环的动画部分。选择菜单栏中的【视图】|【 标尺】命令，打开文档的标尺视图，然后经过工作区拖动标尺画出一条水平指示线。沿着鞋子的底部边缘放置这条水平线，这可以保证行走路线是完全水平的。

(10) 从最前面的位置开始腿部动画，然后再逐步往后。将帧指示器设置在中点上，共约15帧，就这个示例而言，为第8帧。

(11) 将运动鞋沿着水平线拖到右边，同时确保鞋子底部边缘与水平线完全对齐。要养成频繁回放动画的习惯，在早期阶段这种做法可以暴露腿部动画的问题。脚步是以弧线行进的，因为骨架并不是沿着X或Y轴移动的，这导致行进过程中鞋子会越过水平线，如图6-44所示。

(12) 修复的方法是，在每一帧里都设置帧指示器，选中鞋子符号，使用方向键微移直到底部边缘与水平线对齐。

(13) 在后续的帧中，设置帧指示器并按类似的姿势操作这个骨架，如图6-45所示。

(14) 完成腿部动画后，必须隐藏骨架尾部的额外对象。打开【库】面板，找到骨架尾部的符号。双击该符号，然后用鼠标右键单击包含该对象的图层，并将其转换为引导层。这样额外的对象就不会包括在发布的文件中了，如图6-46所示。

(15) 最终效果如图6-47所示。

深入解析

在制作引导层动画的过程中，使用选择工具调整运动对象时，要确定选择“吸铁石”选项，以方便对象吸附到路径上。当有多个被引导对象时，选择菜单栏中的【修改】|【时间轴】|【分散到图层】命令再进一步调整运动对象的属性，可得到复杂的动画效果。当路径出现交叉时，可在对应的帧处插入关键帧，并将运动对象分别放置在焦点两侧，使引导层动画的路径不发生错误。

遮罩动画是获得聚光灯效果或过渡效果的一种表现方式，可使用遮罩层创建一个像镜头一样的孔，通过这个孔可以看到下面的图层。遮罩项目可以是填充的形状、文字对象、图形元件的实例或影片剪辑。Flash会忽略遮罩层中的位图、渐变色、透明度、颜色和线条的样式。在遮罩层中，任何填充区域都是完全透明的，而任何非填充区域都是不透明的。

反向运动是一种使用骨骼的关节结构对一个对象或彼此相关的一组对象进行一致的、复杂的且自然的动作。添加骨骼的方式有两种：第一种是在几个实例之间建立连接各实例的骨骼，骨骼允许各实例连在一起移动；第二种是向单独图形或形状对象的内部添加骨骼，图形变为骨骼的容器。通过骨骼可以移动图形的各部分，并对其进行动画处理。

综合实训——制作网站活动广告

任务目标：制作如图6-48所示的网站活动广告。

具体操作步骤如下。

(1) 启动Flash CS5程序，按【Ctrl+N】键新建一个Flash文档，设置舞台大小为“635×284”像素，设置帧频率为“24.00”fps。

(2) 将图层重命名为“人物”，将绘制好的影片剪辑“人物”拖入场景中，打开【对齐】面板，按【水平中齐】、【垂直中齐】。影片剪辑“人物”内容包含文字的素材、人物和金币，如图6-49所示。

(3) 新建“背景”，将其放置到“人物”下方，单击第1帧，将元件“背景”从【库】面板中拖入场景，按【水平中齐】、【垂直中齐】，如图6-50所示。

(4) 下面制作一个遮罩动画。按【Ctrl+F8】键，新建影片剪辑“线条动画”，将背景色调成“黑色”。

(5) 使用矩形工具绘制一个矩形，按【Ctrl】键拖动矩形，组成一组矩形，选择任意变形工具，旋转这组矩形，如图6-51所示。

(6) 新建“图层2”，并将其放置在“图层1”的下方，使用矩形工具绘制一个矩形，选择矩形，打开【颜色】面板，在“类型”选项选择“线性”，调整其Alpha的值，如图6-52所示。

(7) 选择“矩形”的图层，在第40帧处插入关键帧，调整第1帧处“矩形”的位置，并在第1帧与第40帧之间创建传统补间，如图6-53所示。

(8) 分别在2个图层的第120帧处插入关键帧，延长动画的播放时间。新建图层3，在第120帧处插入空白关键帧，打开【动作】面板，添加动作脚本“stop()；”，如图6-54所示。

(9) 选择“图层1”，单击鼠标右键打开快捷菜单，选择“遮罩层”将绘制的矩形组所在的图层转换为遮罩层，如图6-55所示。

(10) 回到场景1，新建图层“线条”，单击时间轴第1帧，将影片剪辑元件“线条动画”从【库】面板拖入场景中，并调整位置，选中“人物”后新建图层“文字”，单击时间轴第1帧，将元件“文本动画”从【库】面板拖入场景中，并调整位置，如图6-56所示。

(11) 新建图层“框”，单击时间轴第1帧，将元件“圆角框”从【库】面板拖入场景中，并调整位置，如图6-57所示。

(12) 按【Ctrl+Enter】键，就可以看到预览动画效果了。