课堂导入

  美丽的春天，蝴蝶在飞。画面很美？你想制作这样的动画吗？

学习目标

1、了解引导层动画的基本功能；

2、熟练掌握绘制引导层动画的基本方法。

学习任务单

素材下载

教学视频

教学课件

教学内容

复习导入

Flash的引导层动画

 Flash提供了一种简便方法来实现对象沿着复杂路径移动的效果，这就是引导层。带引导层的动画又叫轨迹动画。

 引导层可以实现如树叶飘落，小鸟飞翔，蝴蝶飞舞，星体运动，激光写字等效果的制作。

知识要点

• 掌握创建引导层的方法

• 掌握引导线的绘制方法

• 掌握将对象吸附到引导线起点和终点的方法
  

• 能通过模仿完成引导线动画实例的制作

Flash的引导层动画

 轨迹动画由引导层和被引导层组成，引导层用于放置对象运动的路径，被引导层用于放置运动的对象。制作引导动画的过程实际就是对引导层和被引导层的编辑过程。

一、引导层

1、内容：只放置绘制的运动路径。（引导线）

2、作用：使对象沿着绘制的运动路径（引导线）运动

3、图标：在引导层下方的图层称为“被引导层”,被引导层会比其它图层往里缩进一些。

引导层的创建方法

• 创建引导层的常用方法有：
  （1）用按钮创建
  （2）用菜单命令创建
  （3）将普通图层转换为引导层

  三种方式。
  

二、引导线

1、引导线不能是封闭的曲线，要有起点和终点

2、起点和终点之间的线条必须是连续的，不能间断，可以是任何形状

3、引导线转折处的线条弯转不宜过急、过多，否则Flash无法准确判定对象的运动路径

4、被引导对象必须准确吸附到引导线上，也就是元件编辑区中心必须位于引导线上，否则被引导对象将无法沿引导路径运动

5、引导线在最终生成动画时是不可见的

形状各异的引导线

引导层动画制作方法

1）在普通层中创建一个对象。

2）单击 按钮，在普通层上层新建一个引导层，普通层自动变为被引导层。

3）在引导层中绘制一条路径，然后将引导层中的路径沿用到某一帧。

4）在被引导层中将对象的中心控制点移动到路径的起点。

5）在被引导层的某一帧插入关键帧，并将对象移动到引导层中路径的终点。

6）在被引导层的两个关键帧之间创建动作补间动画，引导动画制作完成。

引导层动画的制作要点

1、一般将要移动的对象单独放在一个层，作为被引导层，在此层上面添加引导层。引导层一定要在被引导层的上方。

2、引导层中只绘制运动路径，在被引导层中设置动作补间动画。

3、启用“紧贴至对象”工具，指向元件的中心点,拖动对象吸附到引导线的起点和终点。

4、要使对象沿着路径旋转，需在被引导层的起始帧属性中，设置“调整到路径”。

5、按Enter键播放动画，或按Ctrl+Enter键测试影片。

多层引导动画

 多层引导动画，就是利用一个引导层同时引导多个被引导层中的对象。

 一般情况下，创建引导层后，引导层只与其下的一个图层建立链接关系。如果要使引导层能够引导多个图层，可以将图层拖移到引导层下方，或通过更改图层属性的方法添加需要被引导的图层。

 为一个引导层成功创建多个被引导层后，多层引导动画即创建完成。

任务——制作“蝶恋花”引导层动画实例

• 蝴蝶围绕着花儿飞动，营造蝶恋花效果。
  

• 简单引导层动画，在2课时内完成

• 提供素材：图片信息（蝴蝶、花儿矢量图）

• 力求做出动感，比例合适。

实例构成及设计思路

• 背景层：制作线形天蓝色到白色渐变背景，将花儿矢量图作为背景层一部分。

• 蝴蝶层：蝴蝶矢量图所在图层，用于固定蝴蝶起始和终了位置。

• 引导层：在此图层绘制引导线，制作引导动画。

• 根据构思，制作背景。

• 确定所需素材，并将素材导入到库中。

• 添加引导层并制作引导层动画。

制作时应注意的问题

• 色彩搭配和谐；

• 素材正确导入到库中；

• 正确应用引导层；

• 蝴蝶组件能正确沿引导线运动；

制作影片背景层

 为了使制作出的 Flash MX 动画生动活泼，我们通常要对影片设计一个好的背景，利用渐变色作为背景是最常见的方法之一。背景效果入图：

操作步骤

(1)启动 Flash　MX，新建一个文件，将影片大小设置为宽：300px，高：400px，背景色设置为白色，帧频为 12fps。

(2)双击层的名称，将层的名称改为“背景”。

(3)从工具箱中选择矩形工具 ，打开“混色器”面板将填充颜色设置为线性天蓝色到白色渐变，如图所示。然后在场景中绘制一个与影片尺寸等大的矩形。

(4)单击工具箱上的“填充变形”工具按钮 ，调整矩形中的渐变色为上蓝下白。

(5)选择“文件”→“导入”菜单命令导入素材中的“huaer.swf”文件。

(6)移动“花儿”图象，调整位置，使之位于影片中心。

(7)单击“背景”层的第 35 帧，按 F5 键插入一个帧，将帧扩展到第 35 帧处。

(8)锁定背景层。

制作影片蝴蝶组件

 蝴蝶是本动画实例的主角，下面我们就来制作位于被引导层的蝴蝶组件。蝴蝶组件如图：

操作步骤

(1)在选中背景层，插入一个新的图层，并将图层的名称改为“蝴蝶”。

(2)选择“文件”→“导入”菜单命令导入本书第四章素材中的“hudie.swf”矢量图文件。

(3)选择“蝴蝶”图案，选择“插入”→“转换为元件”命令，将蝴蝶矢量图转化为图形元件。

制作运动引导层

 引导层的目的是引导蝴蝶元件沿着引导层上的曲线路径运动，引导层上的曲线决定着蝴蝶的运动路线。绘制出引导线如图所示：

操作步骤

(1)在选中蝴蝶层，右键单击图层名，选择弹出的菜单中的“添加引导层”命令，在蝴蝶层上方添加一引导层，将引导层名称改为“引导层”。

(2)单击常用工具栏的“铅笔”工具，并将常用工具栏下方的选项按钮设置为“平滑”。

(3)利用铅笔工具围绕着花儿的上方绘制如图曲线。

(4)单击引导层的第 35 帧，按 F5 键插入一个帧，将帧扩展到第 35 帧处。

(5)锁定引导层

制作曲线运动效果

 制作好蝴蝶层与引导层，下一步是让蝴蝶沿着引导层做曲线运动，做出蝴蝶围绕着花儿飞翔的效果。

操作步骤

(1)选中蝴蝶层，单击引导层的第 1 帧。拖动蝴蝶元件，将蝴蝶元件的中心点与运动引导层的曲线起点对齐，如图所示。

(2)在时间线面板上单击蝴蝶层的 35 帧，按 F6 键插入关键帧。

(3)拖动蝴蝶元件，将蝴蝶元件的中心点与运动引导层的曲线终点对齐，如图所示。

(4)这一步操作的目的是确定蝴蝶沿曲线运动的起点和终点。效果如图显示： 

(5)在蝴蝶层的帧编辑区上，单击鼠标右键，在弹出的菜单选择“创建补间动画”命令，帧编辑区上出现浅蓝色背景箭头，建立蝴蝶从左端移动到右端的曲线运动动画。

(6)保存动画，按 Ctrl+Enter 键，预览动画效果。

实战演练

以上母亲节贺卡中的写字动画制作步骤如下：

1 制作爱心—插入图形—钢笔工具绘制爱心—复制与全选修改—组合—任意变形——旋转。

2 返回场景——1层命名“文字”——写上“妈妈，愿您安康幸福”。

3 添加层，命名“爱心”——拖入爱心图形——任意变形工具——中心移至笔头。

4 右击插入引导层——沿着文字层的内容，使用铅笔工具在舞台上沿着文字轮廓写字——在引导层第100帧插入帧，制成100帧动画。

5 将爱心沿着文字引导层的文字轮廓，制成多段动画，如下图所示。

6 文字层帧全选——转化为关键帧——使用橡皮与全选工具——逐帧擦除多余文字，如下图所示。

拓展资源

（一）思考一下：如何制作出下图过山车的运动效果？

（二）操作步骤

步骤1：新建一个空白文档，设置舞台尺寸为550×400像素，帧频为24 fps。

步骤2：背景制作。使用“矩形工具”绘制一个没有边框的矩形，然后打开“颜色”面板，设置渐变色类型为“线性”，再设置第一个色标颜色为（R：247，G：231，B：196），第二个色标颜色为（R：63，G：234，B：252），第三个色标颜色为（R：0，G：153，B：255），填充效果如下图：

步骤3：执行“文件/导入/导入到舞台”菜单命令，然后在弹出的对话框中导入素材“车道.ai”文件，再将车道放置在如下图所示位置。此时会自动出现一个图层“layer 1”。

步骤4：选中小车，再按F8键将其转换为影片剪辑（名称为“过山车”），如下图：

步骤5：建立过山车运行轨迹。进入影片剪辑“过山车”的编辑区，新建一个“引导层”图层， 在该图层上单击鼠标右键，并在弹出的菜单中选择“添加传统运动引导层”命令。如下图所示。使用“钢笔工具”在引导层沿车道绘制引导线，如下图：

步骤6：将小车拖拽到引导线的起始处，然后使用“任意变形工具”调整好小车的中心点（注册点），再将中心点拖拽到小车的底部，这样才能保证小车正确的沿着引导线运动（为了让元件的中心点紧贴引导线，最好是激活“工具箱”中的“贴紧至对象”按钮）。调整小车的角度，使小车与引导线的切线成90°。在两个图层的第100帧按F6键插入关键帧，然后将小车拖拽到引导线末端，再调整好小车的角度，使注册点与引导线终点对齐。如下图：

步骤7：选择“图层1”图层，然后在第一帧单击右键，并在弹出的菜单中选择“创建传统补间”命令，创建出第1-100帧的传统补间动画。

步骤8：单击“时间轴”下面的“绘图纸外观”按钮，查看动画效果，可以观察到小车沿着引导线运动。如下图：

步骤9：当小车下坡时，发现其角度并没有按引导线的角度运动，这时可在“属性”面板中勾选“调整到路径”选项，这样小车就会沿着引导线自动调整角度，如下图：

步骤10：新建3个图层，再将“图层1”中的帧复制到这3个图层中（注意每个小车之间间隔5帧的距离），然后拖拽“时间轴”上的帧观察效果，如下图：

步骤11：保存文件，按Ctrl+Enter组合键发布动画。

学习讨论