第3章 元件与实例
在Flash作品设计中可以说几乎离不开元件的应用。元件即是在元件库中存放的图形、影片剪辑、按钮、导入的音频和视频文件。但一般常指前三者：图形元件、按钮元件和影片剪辑元件。元件是一种可以重复使用的对象，即只需创建一次，以后即可在整个文档或其他文档中重复使用，从而大大提高工作效率。
3.1 项目1 制作电子动画贺卡“母亲节快乐”
本项目介绍使用元件来制作的“母亲节”动画贺卡，其效果如图3.1所示。本项目分解为4个任务制作完成。
图3.1“珍珠项链”效果图
3.1.1 任务1 使用图形元件制作“珍珠项链”
3.1.1.1任务说明
图形元件一般用于静态图像，但也可以用于创建连接到主时间轴的可重复使用的动画片段。图形元件的时间轴是与主时间轴同步的。图形元件是可以嵌套的，即在一个图形元件中可以包含另一个图形元件，但是交互式控件和声音在图形元件的动画序列中是不起作用的。本任务主要介绍使用图形元件制作一串珍珠项链，其效果如图3.2所示。
图3.2 任务1的“珍珠项链”效果图
3.1.1.2任务步骤
1.打开Flash CS5应用程序，新建一个Flash文档，文档尺寸设置为“400px×400px”，背景颜色为“黑色（#000000）”。
2.选择菜单项“文件”→“导入”→“导入到舞台”，从素材库中找到“chap3\素材文件\背景.jpg”图片文件，将该文件导入到舞台。
3.选择菜单项“修改”→“对齐”→“水平居中”和“垂直居中”，使图片刚好铺满舞台，用做背景，如图3.3所示。
图3.3 导入图片用做背景
4.选择图层1，将其重命名为“背景”。
5.选择菜单项“插入”→“新建元件”，或者按Ctrl+F8组合键，弹出“创建新元件”对话框，在该对话框的名称文本框中输入元件名称为“珍珠”，选择类型为“图形”，如图3.4所示。
图3.4 创建“珍珠”图形元件
6.进入“珍珠”元件的编辑窗口。选择“椭圆工具”。在其“属性”面板中设置“笔触颜色”为取消，单击“填充颜色”按钮
，在弹出的调色板中，在下方任意选择一个径向渐变的小球。
7.打开“颜色”面板，在“渐变定义栏”中将左边色块设置为“灰色（#A09090）”，且稍向右移，如图3.5所示，右边色块设置为“浅黄色（#F3F0D6）”，且稍向左移。
8.设定之后，将鼠标移到舞台，在图层1 按住Shift键绘制一个正圆，如图3.6所示。
9.使用“填充变形工具”将渐变的中心略向上移，其效果如图3.7所示。
图3.5 设置径向渐变的左边颜色块的值
图3.6 绘制一个正圆（珍珠）
图3.7 调整渐变中心后的效果
10.为了使制作出的珍珠具有光泽感，可复制前面制作出的珍珠图形。选择菜单项“编辑”→“复制”。
11.在“图层1”的上方添加一个新图层“图层2”，选择新建的“图层2”的第1帧，选择菜单项“编辑”→“粘贴到当前位置”。该方法使新复制的珍珠图形和原图形重叠在一起。
12.选定“图层2”新复制的珍珠图形，为了便于选择，可以先将“图层1”隐藏，如图3.8所示。
图3.8 隐藏图层2
13.打开“颜色”面板，将渐变定义栏中左边的色块设置为“白色（#FFFFFF）”，右边的色块设为“浅黄色（#F3F0D6）”，“Alpha”值设为“0%”，如图3.9所示。这样两个图层的效果叠加起来，就制作出了珍珠的光泽效果，如图3.10所示。
14.下面把制作好的“珍珠”串成一串项链。
15.再新建一个图形元件，命名为“项链”。
16.进入到该元件的编辑窗口，选择“图层1”，在其第1帧上用“钢笔工具”绘制一个心形曲线，如图3.11所示。
图3.9 “颜色”面板中的渐变参数
图3.10 制作好的“珍珠”效果
图3.11 使用钢笔工具绘制的心形曲线
17.添加一个新图层“图层2”，选择“图层2”的第1 帧，打开“库”面板，如图3.12所示。在“库”面板下方的名称栏中选择“珍珠”，面板上方的预览窗口中出现其图形，用鼠标从预览窗口将“珍珠”图形元件拖放进舞台，使用“任意变形”工具调整其大小合适，如图3.13所示。
图3.12 从“库”面板中拖放“珍珠”元件
图3.13 将“珍珠”拖放进“项链”元件
18.鼠标指针移到窗口中，按住Alt键，拖住“珍珠”实例进行复制，且复制多个。
19.调整每一个珍珠实例，让它们沿着“图层1”中绘制好的曲线排列，这样就串成了一串“珍珠”，如图3.14所示。
图3.14 串成一串的珍珠
20.用鼠标单击“时间轴”面板中的
按钮，切换到“场景”窗口。
21.打开“库”面板，将其中前面绘制好的“珍珠”元件拖放到舞台。
22.该任务制作完成，保存文件，命名为“项目1_电子贺卡.fla”。
3.1.1.3技术支持
1.图形元件的修改
如果需要修改已经绘制好的图形元件，则可以先选定要编辑的图形元件，然后右键单击，在弹出的快捷菜单中选择一种编辑元件的方式。此处一共提供了三种元件编辑方式：“在当前位置编辑”、“在新窗口中编辑”和“编辑”，如图3.15所示。
图3.15 三种元件编辑方式
（1）“在当前位置编辑”命令。该元件和其他对象一起出现在舞台上，该元件处于可以编辑状态，但其他对象是以灰色的不可编辑的方式出现的，这样很容易将它们区别开来。正在被编辑的元件名称显示在舞台上方场景名称右侧的编辑栏内。
（2）“在新窗口中编辑”命令。这是在一个单独的窗口中打开编辑元件的命令，即窗口中只有该元件，其他的对象均不出现。正在编辑的元件名称会显示在舞台上方的编辑栏内。
（3）“编辑”命令。可将窗口从舞台视图更改为只显示该元件的单独视图来编辑元件。正在被编辑的元件名称显示在舞台上方场景名称右侧的编辑栏内。
2.图形元件如果被修改了，则所有用到该元件的地方都需要修改（如下例）
（1）新建一个Flash文档，新建一个图形元件。
（2）进入该图形元件编辑窗口，选择“多角星形工具”，在该窗口中绘制一个红色的五角星形。
（3）切换到场景中，把该元件拖入场景，如图3.16 所示。此时“库”面板中的元件形状与舞台场景的图形形状一致。
图3.16 将制作好的“五角星”图形元件拖入场景
（4）进入五角星图形元件编辑窗口，使用“选择工具”拖曳改变其图形形状。
（5）单击“主场景”按钮，返回到场景中，发现此时主场景中的图案也随之改变。
3.可以将已经绘制好的图形转换为元件
如果已经在主场景中绘制了图形，但要将其转为元件，可不需要在元件编辑窗口中再绘制一次，只需在主场景中先选中该图形，然后选择菜单项“修改”→“转换为元件”，即可将当前已经绘制好的图形转换为元件。
3.1.2 任务2 应用影片剪辑元件制作“星光闪烁”
3.1.2.1任务说明
一般将可重复使用的动画片段制作成影片剪辑元件。影片剪辑元件拥有独立于主时间轴的独立时间轴，可以看做是主时间轴中嵌套着另一个时间轴，它可以包含交互式控件、声音，还可以包含图形元件或是其他影片剪辑元件等。本任务是在任务1完成的基础之上，应用影片剪辑元件制作一个星光闪烁的动画效果，其效果如图3.17所示。
图3.17 任务2“星光闪烁”效果图
3.1.2.2任务步骤
1.打开Flash CS5应用程序，打开任务1中制作完成的文档“项目1_电子贺卡.fla”。
2.新建一个图形元件，将其命名为“光”。
3.进入该元件的编辑窗口，选择“椭圆工具”，在其“属性”面板中，设置笔触颜色为“取消”，填充颜色为任意一个的径向渐变小球。
4.打开“颜色”面板，在面板下方渐变编辑栏中间单击两次，添加两个颜色块，如图3.18所示。
5.设置最左边的颜色块颜色为“白色（#FFFFFF）”，Alpha值为100%；左边第二个颜色块颜色为“白色（#FFFFFF）”，Alpha值为100%；左边第三个颜色块颜色为“白色（#FFFFFF）”，Alpha值为19%；最右边的颜色块颜色为“白色（#FFFFFF）”，Alpha值为0%。
6.将鼠标移到舞台中，按住Shift键，绘制一个正圆，如图3.19所示。
图3.18 在“颜色”面板中添加两个颜色块
图3.19 绘制正圆
7.新建一个图形元件，将其命名为“星”。
8.进入该元件的编辑窗口，重复步骤3～步骤5，在图层1 绘制一个椭圆，如图3.20所示。
9.在图层1上新建一个图层2，在图层2中再绘制一个椭圆，如图3.21所示。
图3.20 绘制椭圆1
图3.21 绘制椭圆2
10.在图层2上新建一个图层3，在图层3中再绘制一个椭圆，如图3.22所示。
11.在图层3上新建一个图层4，在图层4中再绘制一个椭圆，如图3.23所示。
图3.22 绘制椭圆3
图3.23 绘制椭圆4
12.选择菜单项“插入”→“新建元件”，在弹出的“创建新元件”对话框中创建一个影片剪辑元件，将其命名为“闪烁的星”，如图3.24所示。
图3.24 创建影片剪辑元件
13.进入该元件的编辑窗口，选择图层1的第1帧，将“库”面板中的元件“光”拖入舞台。
14.选择图层1 的第2 帧，鼠标右击，选择快捷菜单“插入关键帧”，如图3.25所示。
15.重复8次步骤14，再插入8个关键帧，“时间轴”面板如图3.26所示。
图3.25 选择“插入关键帧”
图3.26 插入关键帧后的“时间轴”面板
16.使用“任意变形工具”，从第1帧到第5帧，逐一调整各帧中的元件实例的大小使其越来越小。
17.使用“任意变形工具”，从第6帧到第10帧，逐一调整各帧中的元件实例的大小使其越来越大。
18.在图层1的上方新建一个图层2，将“库”面板中的元件“星”拖入图层2的第1帧，其效果如图3.27所示。
19.选择图层2的第2帧，鼠标右击，选择快捷菜单“插入关键帧”。
20.重复8次步骤19，再插入8个关键帧，“时间轴”面板如图3.28所示。
图3.27 拖入“星”元件
图3.28“时间轴”面板
21.使用“任意变形工具”，从第1帧到第5帧，逐一调整各帧中的元件实例的大小使其越来越大。
22.使用“任意变形工具”，从第6帧到第10帧，逐一调整各帧中的元件实例的大小使其越来越小。
23.单击“场景1”按钮，返回到主场景中。
24.在“项链”图层的上方新建一个图层，命名为“闪光”。
25.从“库”面板中将制作好的影片剪辑元件“闪烁的星”拖入“闪光”图层的第1帧。
26.调整舞台中“闪烁的星”实例的位置和大小，如图3.29所示。
27.选中该实例，按住Alt键拖动，复制一个；使用“任意变形工具”调整其大小和位置，如图3.30所示。
28.该任务制作完成，保存文档，测试影片。
图3.29 拖入“闪烁的星”
图3.30 复制一个“闪烁的星”
3.1.2.3技术支持
影片剪辑元件是制作复杂动画必不可少的元件，实际上一个影片剪辑元件就是一个小Flash影片。
1.影片剪辑元件和图形元件的相同点
影片剪辑元件和图形元件都是可以重复使用的，而且使用方便，都可以直接从“库”面板中拖出来使用。
2.影片剪辑元件和图形元件的不同点
（1）首先，影片剪辑元件的时间轴是独立于主时间轴的，而图形元件的时间轴其实是和主时间轴同步的。下面来看一个小例子。
① 新建一个Flash文档。新建一个图形元件“A”。
② 进入该元件的编辑窗口，选择图层的第1帧，用“椭圆工具”绘制一个椭圆。
③ 单击选择第10帧，右键单击，在弹出的快捷菜单中选择“插入空关键帧”。选择第20帧，在该元件的编辑窗口中，用“矩形工具”绘制一个矩形。
④ 返回，单击选择第1帧，右击鼠标，选择“创建补间形状”。用鼠标在“时间轴”面板中拖动播放头测试，动画正常。
⑤ 单击“场景1”按钮，返回到主场景。选择主时间轴的第1帧。选择“库”面板中的图形元件“A”并将其拖放到主场景中，选择菜单项“控制”→“测试”→“测试影片”，弹出播放器播放影片。发现此时画面是静止的，没有播放动画，这是因为图形元件的时间轴和主时间轴是同步的。
⑥ 下面用两种操作进行修改使动画播放正常。第一种操作，在“库”面板中，选中“A”图形元件的名称，右键单击，在弹出的快捷菜单中选择“类型”→“影片元件”，将图形元件“A”修改为影片剪辑元件类型。返回主场景，将原先拖入的实例删除，将修改类型后的“A”影片剪辑元件重新拖入舞台中。重新测试，发现此时动画播放正常，这是因为影片剪辑元件的时间轴是独立的。第二种操作，不修改元件的类型，保持元件“A”为图形元件，但选择主场景时间轴的第10 帧，右键单击“插入关键帧”，再选择菜单项“控制”→“测试”→“测试影片”，测试影片，发现此时动画正常了。这是因为图形元件的时间轴和主场景的时间轴是同一个。
（2）其次，在编辑环境中，只要按Enter键就可以查看图形元件的动画效果。而对于影片剪辑元件来说，只有导出动画，才可以查看效果。
（3）影片剪辑元件中可以使用ActionScript脚本。可以用动作脚本控制它的播放、暂停、跳转和颜色设置等。影片剪辑元件可包含音频文件，而图形元件即使包含音频文件，也是不会发出声音的。
3.影片剪辑元件可以设置实例名称
同一个元件可以创建多个实例，每个实例可以有不同的名称。实例名称一般在动作脚本中使用，相关内容将在第7章介绍。
4.元件可以嵌套
元件嵌套是指一个元件可以包含另一个元件，如在图形元件中可以包含一个图形元件，在一个影片剪辑元件中可以包含图形元件或者包含另一个影片剪辑元件。
3.1.3 任务3 应用按钮元件制作“献上祝福”
3.1.3.1任务说明
按钮元件可以创建响应鼠标单击、滑过或其他动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。本任务就是在任务2的基础上，使用按钮元件制作响应鼠标显示动态祝福文字效果，其效果如图3.31所示。
图3.31 任务3“动态立体按钮”的效果图
3.1.3.2任务步骤
1.打开Flash CS5应用程序，打开任务2中制作完成的文档“项目1_电子贺卡.fla”。
2.选择菜单项“插入”→“新建元件”，在弹出的对话框中，设置类型为“按钮”，名称为“祝福”，如图3.32所示。
图3.32 创建按钮元件
3.选择菜单项“插入”→“新建元件”，新建一个图形元件，命名为“文字1”。
4.进入该元件的编辑窗口，使用文本工具输入文本“单击送上祝福”，在其“属性”面板中设置文本属性，文字效果及其参数如图3.33所示。
图3.33 文字效果及参数
5.再新建一个影片剪辑元件，命名为“文字2”。
6.进入该元件的编辑窗口，使用文本工具输入文本“祝福妈妈！母亲节快乐！”，在其“属性”面板中设置文本属性，文字效果及其参数如图3.34所示。
图3.34 文字效果及参数
7.选择第5 帧，按F6 键，插入关键帧，选择该帧的文字，在“属性”面板中将文字颜色修改为“粉红色（#FF99FF）”。
8.选择第10帧，按F6键，插入关键帧，选择该帧的文字，在“属性”面板中将文字颜色修改为“浅绿色（#CCFF99）”。
9.选择第15帧，按F6键，插入关键帧，选择该帧的文字，在“属性”面板中将文字颜色修改为“浅黄色（#FFFFCC）”。
10.新建一个图形元件，命名为“文字3”。
11.进入该元件的编辑窗口，使用文本工具输入文本“深恩如海！”，该文字的颜色设置为“玫瑰色（#CC0099）”，其他参数不变。
12.选择舞台中该元件的实例，在其“属性”面板的“色彩效果”栏中设置“样式”类型为“色调”，其具体参数如图3.35所示。
图3.35 选择样式类型
13.在“库”面板中选择“祝福”按钮元件，双击其预览窗，进入该元件的编辑窗口，如图3.36所示。
14.选择“弹起”帧，从库中将“文字1”图形元件拖入舞台。调整其中心点和元件的中心点“+”对齐，如图3.37所示。
图3.36 进入编辑窗口
图3.37 将“文字1”拖入舞台
15.选择“指针”帧，按F7键，插入空白关键帧；选中该帧，从库中将“文字2”影片剪辑元件拖入舞台。调整其中心点和元件的中心点“+”对齐，如图3.38所示。
16.选择“按下”帧，按F7键，插入空白关键帧；选中该帧，从库中将“文字3”图形元件拖入舞台。调整其中心点和元件的中心点“+”对齐，如图3.39所示。
17.“祝福”按钮元件制作完成，单击“场景1”返回到主场景中。
18.在图层“闪光”之上新建一个图层，重命名为“文字”。
19.从“库”面板中将按钮元件“祝福”拖入图层“文字”的第1 帧，如图3.40所示。
20.该任务制作完成，保存文档，测试影片。
图3.38 将“文字2”拖入舞台
图3.39 将“文字3”拖入舞台
图3.40 文字图层
3.1.3.3技术支持
1.按钮元件的帧面板与图形元件和影片剪辑元件的帧面板不同，它只有4个帧：弹起、指针经过、按下和单击。
（1）弹起：表示鼠标指针不在按钮上时的状态。
（2）指针经过：表示鼠标指针在按钮上时的状态。
（3）按下：表示在按钮上按下鼠标时的状态。
（4）单击：用于设置鼠标单击有效的区域。如果没有特意设置，则默认“按下”帧的图形区域。
2.Flash中还自带了公用库，公用库有按钮、声音和类三种类型。可以将公用库中的元素添加到文档中。选择菜单项“窗口”→“公用库”，在“公用库”菜单中进行选择，如图3.41、图3.42和图3.43所示。
图3.41“按钮”库
图3.42“声音”库
图3.43“类”库
3.外部库中元素的调用。如果要使用外部库中的素材，可以选择菜单项“文件”→“导入”→“打开外部库”，打开其他Flash文档文件中的“库”面板，将外部库中的元素拖入当前正在编辑的文件中，以达到调用外部库中素材的目的。在调用外部库时，会在当前的文档库中生成对应的元素。另外，如果在编辑窗口中打开了多个Flash文档，则打开“库”面板，单击其中的
，在弹出的文件列表中选择其他的文件名，则可以打开该文件的“库”面板，也可以在当前文件中调用该文件的元素。
3.1.4 任务4 应用元件和实例的关系及对象编辑制作“五彩风车”
3.1.4.1任务说明
把库中的元件拖放到工作区后，工作区中的这个对象就称为实例。对于实例可以进行选取、移动、复制、旋转、缩放、排列和打散等操作，它是组成动画的基础，从前面的任务中都可以体会到。但是实例和元件之间有着怎样的关系？本任务将告诉读者。本任务只制作一个风车，然后通过实例属性的调整，制作出五彩的风车，添加到任务3完成的效果中，使画面更丰富多样，本任务完成后的效果如图3.44所示。
图3.44 任务4“五彩风车”效果图
3.1.4.2任务步骤
1.打开Flash CS5应用程序，打开任务3中制作完成的文档“项目1_电子贺卡.fla”。件
2.新建一个图形元件，命名为“风车”。
3.在“风车”图形元件编辑窗口中，利用绘图工具制作一个风车，如图3.45所示。例
4.再新建一个影片剪辑元件，命名为“旋转的风车”，进入该元件的编辑窗口。
5.从库中将“风车”图形元件拖入第1帧。
6.选择第30帧，右键单击选择“插入关键帧”。
7.选择第30帧的风车图形，使用“任意变形工具”对它进行旋转。
8.返回选择第1 帧，鼠标右击，选择“创建传统补间”。该元件制作完毕，如图3.46所示。
图3.45 风车图形
图3.46 旋转的风车
9.返回到主场景，在“文字”图层的上方新建一个图层“风车”。选择该图层的第1帧，从“库”面板中选择“旋转的风车”影片剪辑元件，连续三次拖入舞台中，使舞台上有三个风车，且调整大小，如图3.47所示。
图3.47 将“旋转的风车”拖入“风车”图层
10.选中“风车”图层中最左边的风车实例，然后单击“属性”面板中的“色彩效果”栏，选择“样式”类型为“色调”，具体参数如图3.48所示。
11.选择最右边的风车实例，然后单击“属性”面板中的“色彩效果”，选择“样式”类型为“高级”，且设置其各项参数，具体数值如图3.49所示。
图3.48 设置“色调”参数
图3.49 设置“高级”参数
12.本任务制作完毕。保存文件，测试影片。
3.1.4.3技术支持
元件制作好后，将元件放置在舞台上或者放置在其他元件中，就创建了该元件的实例。如果对元件进行修改，则该元件所对应的实例也随着改变。另外，每个实例又有自己的属性，而且这些属性相对于元件是独立的。所以从上面的任务制作中可以得知，对实例旋转、缩放或改变实例的颜色、亮度和透明度等，是不会改变元件、也不会影响其他元件的。相反，如果对元件进行编辑和修改，是会影响实例的。
1.当选中某个实例后，打开“属性”面板，就可以设置实例的颜色、亮度和透明度等属性，这些属性的修改仅仅针对于选中的实例，对其他实例则没有影响。如图3.50所示就是实例的“属性”面板，在其中可以进行改变实例类型、亮度、色调、透明度和替换实例等操作。
图3.50 元件的“属性”面板
（1）改变元件和实例的类型。每个元件创建之后，其类型是可以更改的。可以在“库”面板中的列表中选择元件，鼠标右击，在弹出的快捷菜单中选择“类型”；实例的最初类型都和其所对应的元件类型相同，但是实例的类型是可以更改的。可以在舞台中单击选中实例，然后选择单击“属性”面板中实例类型的列表项进行修改。
（2）改变实例的亮度。在“属性”面板中“色彩效果”的“样式”列表选择“亮度”选项，弹出其相应参数进行设置，如图3.51 所示；可以在其中输入亮度参数，其值介于0～100之间；或者单击按钮，拖动滑块，改变其亮度参数就可以改变该实例的亮度。
（3）改变实例的色调。使用色调可以将实例的颜色从一种变到另一种，如图3.52所示。选中该实例后，单击“色调”按钮右侧色块，弹出调色板，从中选择新的颜色；或者依次调整其中的“色调”、“红”、“绿”和“蓝”各项参数。再或者，可以拖动滑块来设置；可以指定新颜色的纯度，该参数值越高，颜色越纯；如果该值为0%，则不起作用。
图3.51“亮度”选项
图3.52“色调”选项
（4）改变实例的透明度。选中实例后，在“色彩效果”的“样式”列表中选择“Alpha”，可以在文本框中输入0～100之间的参数值后按Enter键，或者单击按钮，拖动滑块，改变实例的透明度。如图3.53 所示。该值越低，图形越透明，如果调到0%，则实例完全看不见。
（5）通过“高级”效果对话框改变实例的颜色。选中实例后，单击
右侧的黑色三角按钮，选择“高级”，弹出“高级效果”对话框，如图3.54所示。在该对话框中分别单击红、绿、蓝三原色、透明度和明亮度右侧的按钮，拖动滑块，可以改变实例的颜色和透明度。
图3.53“AIpha”选项
图3.54“高级效果”对话框
（6）替换实例。选中实例后，单击“属性”面板中的
按钮，在弹出的菜单中选择“交换元件”，可以弹出“交换元件”对话框，如图3.55所示。在该对话框中显示当前应用的元件，在中间的元件列表中单击要替换现有元件的元件，然后再单击右侧的“确定”按钮，即可替换当前元件，而且在替换的同时保持实例原来的位置和变形等相关属性。该操作也可以通过先选中实例，右键单击，在弹出的快捷菜单中选择“交换元件”菜单项来完成，或者选择菜单项“修改”→“元件”→“交换元件”来完成。
图3.55“交换元件”对话框
2.实例可以进行分离。它的分离与文字的分离、图片的打散操作相同。因为一般情况下，对实例应用上述的修改设置即能满足需求，但有时又需要只对实例的局部做一些调整，而不是对实例进行整体的改变，因此要在执行实例的分离、中断与元件之间的关联后，才可以对其进行个别的编辑修改。
（1）新建一个Flash文档，新建一个图形元件。
（2）进入该元件编辑窗口，选择“多角星形工具”，在该窗口中绘制一个五角星形。
（3）切换到场景，把该元件拖入舞台中，如图3.56所示。
图3.56 舞台上的实例和库中元件的图形一样
（4）如果需要对舞台的五角星形实例进行修改，则按Ctrl+B组合键，将该实例打散。
（5）对其进行调整，如选择“自由变形工具”对它进行变形调整。
（6）打开“库”面板，发现库中的图形元件不受任何影响，没有任何变化，还是五角星形，如图3.57所示。
图3.57 分离后舞台上的实例和库中元件的图形不一样
（7）进入“元件1”图形元件编辑窗口，对五角星形进行调整。
（8）观察舞台中的实例，它不随元件的变化而变化，即不做任何改变，即实例与元件之间已经中断关联了，如图3.58所示。
图3.58 分离后舞台上的实例和元件中断关联
3.2 项目2 操作进阶——综合应用三种类型元件制作“变幻的花”
3.2.1 项目说明
本项目主要是综合应用三种类型的元件制作的。项目制作中，在影片剪辑元件中嵌套图形元件，按钮元件中又嵌套图形元件和影片剪辑元件，其效果如图3.59所示。
图3.59“项目2_变幻的花”效果图
3.2.2 操作步骤
1.新建一个Flash文档，尺寸为“400px×300px”，背景颜色为“黑色（#000000）”。选择菜单项“插入”→“新建元件”，如图3.60所示。在该对话框中，将元件命名为“花瓣”，类型为“图形”。
图3.60 创建“花瓣”图形元件
2.进入该元件的编辑窗口，利用“钢笔”工具绘制花瓣的形状，且选中绘制好的形状，打开“颜色”面板，将花瓣的颜色填充类型选为“放射状”，渐变编辑栏中左边的颜色块为“金黄色（#E177OF）”，具体参数如图3.61所示；右边的颜色块为“白色（#FFFFFF）”，再使用“渐变变形工具”调整填充的颜色，最后的花瓣效果如图3.62所示。
3.新建一个图形元件，命名为“花朵”。
4.进入该元件的编辑窗口，选择第1帧，然后将“库”面板中的“花瓣”图形元件拖入舞台；在窗口中，按住Alt键拖动该“花瓣”元件的实例，复制出多个实例，调整各个花瓣的位置，排列成一朵花朵的形状，效果如图3.63所示。
图3.61“混色器”参数
图3.62 填充颜色后的花瓣效果
5.新建一个影片剪辑元件，将该元件命名为“旋转的花”。
6.进入该影片剪辑元件编辑窗口，在“图层1”的第1帧将“库”面板中的“花朵”影片剪辑拖放到窗口中，接着选择第11帧，右键单击，在快捷菜单中选择“插入关键帧”，或者直接按F6功能键插入关键帧。
7.选择第11帧的“花朵”实例，将在“属性”面板中“色彩效果”的“样式”设置为“Alpha”类型，且设置其值为“62%”，如图3.64所示。
图3.63 复制“花瓣”后的花朵
图3.64“AIpha”参数
8.选择该层的第1帧，鼠标右击，选择“创建传统补间”，设置成功后的时间轴为
。
9.在“图层1”的上方，新建“图层2”；选择“图层1”的第1帧，右击，选择“复制帧”；选择“图层2”的第1帧，右击，选择“粘贴帧”。选择该层的第11帧，右键单击，设置该帧为插入关键帧，在窗口中选择第11帧的“花朵”实例，将“属性”面板上“色彩效果”中的“样式”选择为“Alpha”，且将其值改成“0%”，如图3.65所示。同时在该帧对“花朵”实例使用“工具”面板中的“任意变形工具”
，使其缩小，且移动到左上角，如图3.66所示。
图3.65“AIpha”参数
图3.66“图层2”中实例位置和形状改变后的效果图
10.选择该层的第1帧，鼠标右击，选择“创建传统补间”，设置成功后的时间轴为
。
11.重复三次步骤9至步骤10的操作，新建三个图层“图层3”、“图层4”和“图层5”，且分别在这三个图层的第11帧缩小“花朵”实例并调整其位置到右边、上方和下方。最后的图层位置及效果如图3.67所示。
12.在“图层5”的上方新建一个图层“图层6”，将图层1的第1帧复制到该图层的第1帧，选择第11帧，右键单击，将该帧设置为插入关键帧，选择该帧的“花朵”实例，在“属性”面板中将“Alpha”值改为“0%”。
13.选择该层的第1帧，设置为“动画补间”，如
，最后所有图层的位置及效果如图3.68所示。
图3.67 各图层中实例的位置和形状
图3.68“旋转的花”效果图
14.新建一个按钮元件，命名为“变化花”。
15.进入该按钮元件的编辑窗口，在“弹起”帧中，把“花朵”图形元件从“库”面板中拖入，且调整到编辑窗口的中央。
16.选择“指针”帧，按F7键插入空白关键帧，将“库”面板中“旋转的花”的影片剪辑元件拖入。注意该帧的实例位置和“弹起”帧的实例位置要一致，
17.选择“按下”帧，按F7键插入空白关键帧，把“花朵”图形元件从“库”面板中再次拖入，且其实例位置与前面两帧的一致，如图3.69所示。
18.返回到主场景，将“库”面板中制作好的按钮元件“变化花”拖入舞台。本案例制作完毕，保存文档，命名为“项目2_变幻的花.fla”，测试文档。
图3.69 制作好的“变化花”按钮元件
习题
1.填空题
（1）元件用于存储可重复使用的图形、按钮和动画，在Flash中可以创建__________、__________和__________三种类型的元件。
（2）如果要将实例设置为完全透明，则要将该实例的__________值设置为__________。
（3）将影片剪辑元件的实例类型改为__________后，变成可以指定实例的开始帧。
（4）执行菜单项__________，可以打开“新建元件”对话框，创建各种类型的元件。
（5）在__________中可以使用ActionScript脚本。
2.选择题
（1）__________元件必须为其指定足够的帧才能播放动画效果。
A.按钮
B.影片
C.图形
D.所有类型
（2）在Flash编辑窗口中，__________查看影片剪辑元件的动画效果。
A.可以
B.不可以
（3）在下列的__________帧中可以定义按钮响应鼠标的响应区域。
A.“弹起”
B.“指针”
C.“按下”
D.“点击”
（4）以下各种关于图形元件的叙述，正确的是__________。
A.可用来创建可重复使用的并依赖于主电影时间轴的动画片段
B.可用来创建可重复使用的，但不依赖于主电影时间轴的动画片段
C.可以在图形元件中使用声音
D.可以在图形元件中使用交互式控件
（5）下列关于元件和实例的说法，正确的是__________。
A.修改实例，则元件也随着改变
B.修改实例，则元件不随着改变
C.修改元件，则实例也随着改变
D.实例和所对应的元件没有任何关系
3.思考题
（1）什么是元件？什么是实例？二者之间存在什么关系？
（2）图形元件和影片剪辑元件的区别是什么？
实训五Flash三种类型元件的创建和实例的应用
一、实训目的
掌握三种元件的创建和应用。掌握实例和元件的关系。
二、操作内容
1.应用图形元件和影片剪辑元件制作海底世界，如图3.70所示。
图3.70 海底世界
（1）新建文档。插入图形元件，在图形元件中使用“绘图工具”绘制。
（2）分别插入三个图形元件，在这三个图形元件中分别使用“绘图工具”绘制鱼、水草和气泡。
（3）插入一个影片剪辑元件，将图形元件“气泡”拖入，使用“补间动画”制作气泡向上冒的效果。
（4）返回主场景，将“鱼”拖入舞台中，并使用“任意变形工具”将“鱼”调整成不同形状，选择“属性”面板中的“颜色”选项，给“鱼”设置不同的颜色和透明度等。
（5）在主场影中，将气泡向上冒的影片剪辑元件拖入。本题即制作完毕。
2.应用图形元件和影片剪辑元件制作一个“时钟”，如图3.71所示。
图3.71 时钟
（1）新建一个Flash文档。导入一个图片用做背景。
（2）使用图形元件制作时针元件、秒针元件和钟盘。
（3）插入一个影片剪辑元件，将钟盘图形元件拖入，将时针元件导入用做时针；再导入一次，缩放调整后用做分针；将秒针元件导入；分别对时针、分针和秒针设置动画补间，实现它们绕钟盘中心点旋转的效果。
（4）将制作好的时钟拖入主场景中。本题即制作完毕。
3.应用图形元件、影片剪辑元件和按钮元件制作“变幻的图案”，如图3.72所示。
图3.72 变幻的图案
（1）新建Flash文档。
（2）插入图形元件，使用“绘图工具”制作如图3.72所示的图形。
（3）插入影片剪辑元件，将图形拖入，改变其颜色选项，且设置成绕左上顶点旋转的动画补间效果。
（4）插入按钮元件，将图形元件拖入按钮元件的“弹起”帧，将影片剪辑元件拖入按钮的“指针经过”帧，再将图形元件拖入按钮的“按下”帧。本题即制作完毕。