《Flash 8动画制作案例教程》课件第4章

第4章图 层 与 元 件

4.1图层4.2元件课堂实践疑难解析课外拓展 4.1图层

4.1.1图层的概念与作用

1．图层的概念

图层就好像是一张透明的纸，可以在这张透明的纸上绘画，而没有画上的部分保持透明状态，可以看到这张纸下面的画面。在绘制动画对象时，先建立不同的图层来绘制图形的各个组成部分，并对各图层进行编辑处理，然后将这些图层按照想要的次序叠放在一起，就构成了一幅完整的图形。每个图层是互相独立的，在编辑的过程中不会互相影响。

2．图层的作用

在Flash中，图层的作用主要表现在以下三个方面。

(1)舞台中不同的元素需要分布在不同的图层上，不同图层上的元素互不影响，方便动画创作期间元素的编辑与管理。

(2)每个图层都有独立的时间帧，舞台中不同的运动补间动画需要分布在不同的图层上，因为在一个图层上只能有一个动画实例。(第5章将详细介绍补间动画的制作。)

(3)利用特殊类型的图层可以制作一些特殊的动画效果，例如使用遮罩图层制作遮罩特效等。(第6章将详细介绍遮罩的使用。)4.1.2图层的编辑

1．选取图层

在对图层进行复制、删除等操作前，都需要先选取图层。选取图层的方法有如下三种。

(1)选取单个图层。在时间轴上单击图层的名称或单击图层的某一帧，可选取单个图层，此时这个图层为当前图层，使用铅笔图标标识，如图4-1所示。

(2)选取相邻图层。单击图层名称选取图层后，按住Shift键，单击另一个图层的名称，可同时选取这两个图层之间的所有图层，如图4-2所示。

(3)选取不相邻图层。按住Ctrl键，逐个单击需要选择的图层的名称，可同时选取多个图层，如图4-3所示。图4-1选取单个图层图4-2选取相邻图层图4-3选取不相邻图层

2．新建图层

创建新文档时，系统会自动创建一个图层。用户可以单击“插入图层”按钮来添加新图层，新建的图层位于当前图层的上方。

当图层较多时，可以使用图层文件夹来组织管理图层。图层文件夹的功能类似于操作系统下的文件夹功能。单击“插入图层文件夹”按钮，可以在当前图层的上方新建一个图层文件夹，把要管理的图层直接拖到图层文件夹上即可。

3．命名图层

新建的图层自动命名为“图层1”、“图层2”、…。为了便于识别图层中的内容，最好为图层取一个与图层内容相符的名称。图层命名的方法是：在要重命名的图层名称上快速双击，然后输入新的图层名称即可。

4．复制图层

制作动画时，如果两个图层中的内容很相似，则可以在一个图层中制作动画，然后将该图层的内容全部复制到另一个图层上，再进行适当的修改。复制图层的操作步骤如下：

(1)选择要复制的图层。

(2)执行【编辑】→【时间轴】→【复制帧】命令。

(3)新建一个图层。

(4)执行【编辑】→【时间轴】→【粘贴帧】命令，把源图层中的内容粘贴到新建图层中，新复制的图层位于当前图层的上方。

5．删除图层

当不需要整个图层上的内容时，可以删除图层。使用下面的三种操作方法都可以删除图层。

(1)选择要删除的图层，单击“删除图层”按钮。

(2)把要删除的图层直接拖到“删除图层”按钮上。

(3)在图层上单击鼠标右键，执行“删除图层”菜单命令。

6．移动图层

移动图层是指调整图层的叠放顺序。其操作方法很简单，直接把图层拖到目标位置即可。

7．设置图层属性

创建图层后，还可以通过“图层属性”对话框设置图层名称、图层状态等属性。在要设置图层属性的图层上单击鼠标右键，在弹出的下拉菜单中选择“属性”命令，弹出“图层属性”对话框，如图4-4所示。图4-4“图层属性”对话框对话框中各参数含义如下。

①名称：名称输入框中可以输入图层的名称。

②显示：勾选此选项，显示该图层，否则就隐藏该图层。图层隐藏后，在舞台上将不显示该图层中的任何内容。

③锁定：勾选此选项，用于锁定该图层。图层锁定后，将不能对该图层上的对象进行任何编辑修改。

④类型：设置图层的类型。

⑤轮廓颜色：单击“拾色器”按钮，可以为轮廓显示模式的图层选择轮廓颜色。

⑥将图层视为轮廓：勾选此选项，可将图层上的对象以轮廓线显示。

⑦图层高度：从下拉列表中可以选择图层的显示高度。该选项常用于观察声音的波形。4.1.3设置图层状态

在动画制作过程中，为了在操作时不影响其他图层上的对象，可以将其他图层隐藏或锁定。为了观察所有图层中对象的形状和位置关系，可以把图层设置为轮廓显示模式，这在编辑图形时会非常有用。

设置图层的状态除了可以使用“图层属性”对话框之外，在实际应用中还常常使用时间轴上的图层状态设置按钮来完成。图层状态设置按钮如图4-5所示。图4-5图层状态设置按钮

4.2元件

4.2.1元件与实例的概念

对于初学者来说，元件与实例是一对全新而又陌生的概念。打个比方，元件与实例的关系就像是工厂里模具与零件的关系，工人使用模具铸造零件，使用不同的零件来装配机器；模具就好像Flash中的元件，零件就好像是实例，机器就好比Flash动画，只要制作出模具，就可以源源不断地铸造出零件，供不同的机器来装配使用。

在Flash中，元件就是指创建一次即可多次重复使用的对象，它可以是图形，也可以是动画，还可以是按钮。创建元件后，元件自动保存在库中。元件在动画中只存储一次。实例是元件在场景中的应用，实例是元件的副本，但其外观和动作又可以和元件有所不同。

在Flash动画制作中，使用元件具有重要的意义，其表现在以下几个方面。

(1)使用元件可以大大减小文件的体积。因为不管元件引用多少次，它在动画中只存储一次，占用很少的空间。

(2)元件实例比图形具有更多的属性。例如可以设置实例的亮度、透明度等属性。

(3)使用元件为动画的编辑修改带来了很大的方便。例如一个元件被引用了多次，当编辑修改这个元件时，所有的引用都会自动更新。

(4)使用元件为制作丰富的动画效果提供了平台。例如创建一个蝴蝶展翅的影片剪辑元件，引用这个元件后，它会不停地循环播放，可以用来制作蝴蝶飞舞的动画效果。

(5)使用元件和库面板，能实现对动画资源的有效管理。

(6)使用元件还可以加快SWF文件的回放速度。因为一个元件只需下载一次。4.2.2元件的种类

在Flash动画制作中，根据在文档中使用元件的不同要求，可以创建三种类型的元件。

(1)“图形”元件：用于静态图像，或连接到主影片时间轴上的可重复播放的动画片段。图形元件与主时间轴同步运行。

(2)“按钮”元件：可以创建响应鼠标事件的交互按钮。

(3)“影片剪辑”元件：可以创建可重用的动画片段，其用途最为广泛。影片剪辑拥有自己独立的时间轴，它与场景中的主时间轴彼此之间相互独立。也就是说，即使主动画停止，主动画中的影片剪辑仍然可以继续播放。4.2.3创建元件和实例

1．创建元件

执行【插入】→【新建元件】命令或按Ctrl+F8快捷键，弹出“创建新元件”对话框，如图4-6所示。图4-6“创建新元件”对话框

2．创建实例

创建元件之后，可以在文档的任何位置创建实例。不管元件是什么类型的，创建实例的方法都相同。把元件拖入舞台或元件编辑窗口，即创建了一个元件的实例。一个元件可以有多个实例，且每一个实例都可以拥有各自的属性。案例4-1：椰树

案例展示与任务

绘制一棵椰树，效果如图4-7所示。要求首先把树叶、椰子和树干制作成元件，然后在舞台上引用元件制作椰树。实例最终效果参见随书光盘中“第4章/案例1/椰树.fla”。图4-7椰树制作分析

首先制作树叶、椰子和树干图形元件，然后在舞台中引用这三个元件，制作椰树。

操作步骤

(1)新建文档，命名为“椰树.fla”。

(2)打开“库”面板，按Ctrl+F8快捷键，弹出“创建新元件”对话框，输入元件名称“树叶”，选择“图形”元件类型，单击“确定”按钮，进入元件编辑窗口。使用绘图工具在元件编辑窗口中绘制如图4-8所示的树叶，使用“对齐”面板把树叶的中心点与注册点“”重合。

(3)按上面的方法创建“椰子”和“树干”的图形元件，效果如图4-9和图4-10所示。注册点

图4-8树叶元件图4-9椰子元件

图4-10树干元件图4-11为图层命名

(5)单击“树干”图层使之成为当前图层，从库中把“树干”元件拖到舞台中，创建“树干”元件的实例。

(6)在“椰子”图层中创建6个“椰子”元件的实例，调整其位置及大小。

(7)在“树叶”图层中创建8个“树叶”元件的实例，通过旋转操作布局树叶实例。

(8)制作完成，保存文件。4.2.4编辑元件

在动画制作中，有时候需要对已经创建的元件进行编辑修改。编辑修改元件后，该元件引用的所有实例会自动更新。常用的编辑修改元件的操作方法有如下两种：

(1)单击时间轴右上方的“编辑元件”按钮，从下拉列表中选择需要编辑的元件。

(2)在“库”面板中双击元件图标或元件缩览图。

提示：在舞台上双击元件实例，也可以进入元件编辑状态，此时，舞台中的其他图形对象将变灰，与当前编辑的元件区别开来。4.2.5编辑实例

1．改变实例的外观形状

每个元件的实例都有独立于该元件的，属于自己的属性。可以利用“属性”面板对实例进行编辑修改，例如更改实例的色调、透明度和亮度等属性，还可以对实例进行缩放、旋转、倾斜等操作。编辑修改实例后，并不会改变引用的元件。案例4-2：椰树投影

案例展示与任务

利用元件功能制作案例4-1中椰树的投影，效果如图4-12所示，实例最终效果参见随书光盘中“第4章/案例2/椰树投影.fla”。图4-12椰树投影制作分析

首先把舞台中的椰树图形转换为椰树元件，创建椰树元件的实例，对该实例进行属性设置、缩放变形等操作，制作椰树的投影。

操作步骤

(1)打开案例4-1中的“椰树.fla”文档。

(2)按Ctrl+A键全选舞台中的椰树图形，按F8功能键，在弹出的“创建新元件”对话框中输入元件名称为“椰树”，类型为“图形”元件，单击“确定”按钮。此时“树干”和“椰子”图层上的对象自动合并到“树叶”图层中。

(3)单击“椰子”图层名称，按住Shift键，单击“树干”图层，然后再单击“删除图层”按钮，删除“椰子”和“树干”图层。

(4)单击“插入图层”按钮，新建“投影”图层。

(5)单击“投影”图层名称，确保“投影”图层为当前图层。从库中把“椰树”元件拖入到舞台中。

(6)在“属性”面板中单击“颜色”下拉按钮，选择“色调”选项，单击颜色选择框，选择“黑灰”(#666666)色调作投影颜色，“属性”面板设置如图4-13所示。

(7)选择“投影”图层，把“投影”层拖到“树叶”层的下面。

(8)选择任意变形工具，对投影实例进行缩放、倾斜操作，适当调整其位置，制作椰树的投影效果。

(9)制作完成，把文件另存为“椰树投影.fla”。图4-13设置投影属性2．交换元件

所谓交换元件，就是指为实例重新指定另外的元件。

案例4-3：蓝猫变企鹅

案例展示与任务

打开随书光盘中“第4章/案例3/4-3.fla”案例文件，利用元件交换功能把舞台右边的蓝猫替换为企鹅，效果如图4-14所示。实例最终效果参见随书光盘中“第4章/案例3/蓝猫变企鹅.fla”。图4-14交换元件操作步骤

(1)打开随书光盘中“第4章/案例3/4-3.fla”案例文件。

(2)选择舞台右边的蓝猫实例，在“属性”面板中单击“交换”按钮，弹出“交换元件”对话框，如图4-15所示。在“交换元件”对话框中，选择“企鹅”元件，然后单击“确定”按钮。

(3)单击“确定”按钮后，舞台右边的蓝猫实例被替换成了企鹅的实例。图4-15“交换元件”对话框

3．分离实例

实例不能像图形或文字那样改变填充颜色，但是如果将实例打散分离后，它就变成了普通图形，可以使用工具箱中的工具对它进行任何编辑修改。

当一个实例被打散分离后，该实例与元件之间的链接关系自动断开，元件的编辑修改不再对该实例产生影响。案例4-4：笑脸变哭脸

案例展示与任务

打开随书光盘中“第4章/案例4/4-4.fla”案例文件，把舞台中绿色的笑脸变为红色的哭脸，效果如图4-16所示，实例最终效果参见随书光盘中“第4章/案例4/笑脸变哭脸.fla”。图4-16分离实例操作步骤

(1)打开随书光盘中“第4章/案例4/4-4.fla”案例文件。

(2)选择笑脸实例，连续两次执行【修改】→【分离】命令或按Ctrl+B快捷键两次，把笑脸实例打散。

(3)使用选取工具对“嘴”进行线条整形，填充红色，把笑脸变成哭脸。

4．更改实例的类型

当在舞台上创建实例后，该实例自动继承引用元件的属性类型。用户可以通过“属性”面板来重新定义实例在Flash文档中的类型，如图4-17所示。图4-17更改实例类型4.2.6使用库面板管理元件

“库”面板中除了元件之外，还存储了动画的各种资源，包括位图、视频、声音等外部导入的素材。选择【窗口】→【库】命令，可以显示“库”面板，如图4-18所示。利用“库”面板可以方便地查找、编辑和使用元件，实现对资源的有效管理。图4-18“库”面板

1．更改元件的类型

选择要更改类型的元件，单击“库”面板中的“属性”按钮，弹出“元件属性”对话框，如图4-19所示，重新选择元件的类型。图4-19“元件属性”对话框

2．复制元件

在同一个Flash文档中，如果想利用已有的元件来创建新元件，这时可以先复制一个元件副本，然后编辑副本以创建新元件。复制元件副本的操作方法是：

在“库”面板中要复制的元件上单击鼠标右键，执行“直接复制”命令，弹出“直接复制元件”对话框，如图4-20所示。在该对话框中输入元件名称，为元件副本指定新的元件类型，最后单击“确定”按钮。图4-20“直接复制元件”对话框如果要将元件复制到另一个Flash文档，有以下两种操作方法。

(1)在“库”面板中用鼠标右键单击需要复制的元件，执行“复制”命令，然后切换到目标文档，在“库”面板中单击鼠标右键，执行“粘贴”命令。

(2)将舞台上的元件实例复制到剪贴板，然后切换到目标文档，将实例复制到目标文档舞台上，此时实例所链接的元件也同时被复制到目标文档的“库”中。

3．删除元件

删除元件的操作方法是：选取要删除的元件，再单击“库”面板底部的“删除”按钮即可。删除元件后，该元件在舞台上的所有实例也同时被删除。

提示：制作动画时，为了减小动画文件的体积，可以将没有使用的元件删除。其操作方法是：单击“库”面板菜单按钮，执行“选择未用项目”命令，系统自动选取所有没有使用的元件，再单击“删除”按钮。

4．重命名元件

要重命名元件，只需双击元件的名称，再输入元件的新名称即可。

5．排序元件

在“库”面板中列出了各种资源的名称、类型、使用次数等信息，要对“库”中的项目进行排序，只要单击列标题即可按该列进行排序。单击“库”面板上的“切换排列顺序”按钮，可以按降序排序。

6．更新元件

如果动画中使用了导入的素材，则当素材源文件被编辑修改后，需要更新导入的素材。其操作方法是：在“属性”面板中需要更新的元件上单击鼠标右键，执行“更新”命令，弹出“更新库项目”对话框，如图4-21所示。在“更新库项目”对话框中勾选要更新的素材，然后单击“更新”按钮即可。图4-21“更新库项目”对话框

课堂实践

(1)使用图层与元件功能制作如图4-22所示的紫葡萄，要求把叶子和果子制作成元件。实例最终效果参见随书光盘中“第4章/案例5/紫葡萄.fla”。图4-22紫葡萄

(2)把第(1)题中的紫葡萄变为青葡萄，实例最终效果参见随书光盘中“第4章/案例6/青葡萄.fla”。

(3)