Flash CS4快速入门 第5章

FlashCS4Professional

实用案例教程第5章千变万化

——元件、实例与库FLASHCS4PROFESSIONALSHIYONGANLIJIAOCHENG主编：洪光5.1

任务-01认识元件与库5.1.1

任务简介

本任务主要通过对元件的概念、实例的概念、库资源概念的了解，理解元件、实例与库的关系。通过对元件类型的认识，了解了元件的类型，为在后面动画制作中应用不同类型的元件创作出不同的动画效果、提高动画制作效率打下坚实的基础。任务快速流程

元件、实例与库的概念→元件与库的类型→库面板→库分类→公用库。5.1.2

知识点1.元件的概念

元件是Flash中一个重要而且使用非常频繁的概念，狭义的元件是指在Flash创作环境中或使用Button（AS2.0）、SimpleButton（AS3.0）和MovieClip类创建过一次的图形、按钮或影片剪辑这三种元件。5.1

任务-01认识元件与库2.实例的概念实例是指位于舞台上或嵌套在另一个元件内的元件副本。3.库资源的概念

库资源在创作或运行时，可以将元件作为共享库资源在文档间共享。运行时共享资源，可以把源文档中的资源链接到任意数量的目标文档中，而无需将这些资源导入目标文档。创作时共享的资源，可以用本地网络上可用的其他元件更新或替换一个元件。注意：

如果导入的库资源和库中已有的资源同名，可以解决命名冲突，而不会意外地覆盖现有的资源。5.1.2

知识点1.图形元件2.按钮元件3.影片剪辑元件5.2

任务-02认识库与公用库5.2.1

任务简介

FlashCS4Professional的库包括两种，当前编辑文件的【库】和FlashCS4Professional中自带的【公用库】，这两种库有着很多相似的使用方法和特点，但也有很多不同点，要掌握库的使用，首先需要对库有足够的认识。本任务从对库的认识入手，全面介绍当前的库与公用库。5.2.2

知识点1.认识库

FlashCS4Professional中的【库】与【公用库】有着相同的界面，如图5-1所示。5.2

任务-02认识库与公用库编辑工具在库界面左下方有4个按钮可以对库文件进行编辑。【新建元件】按钮【新建文件夹】按钮【元件属性】按钮【删除元件】按钮2.元件库

每一个FlashCS4Professional动画文件中都有一个元件库，这个元件库仅存放当前动画文件的元件。选择【窗口】→【库】命令或按Ctrl+L键，将打开当前编辑环境下的【库】面板。图5-1库的界面

5.2

任务-02认识库与公用库5.2.3

相关知识

选择【窗口】→【公用库】，可以在子菜单中看到声音、按钮、类这3项。1.按钮库

选择【窗口】→【公用库】→【按钮】，会打开【按钮库】面板，如图5-2所示。图5-2按钮库的按钮样式

5.2

任务-02认识库与公用库2.声音库

选择【窗口】→【公用库】→【声音】，会打开【声音库】面板，如图5-3所示。3.类库

FlashCS4Professional中有一个叫【类】的库，该库中共有3种组件，分别是数据绑定组件、应用组件和网络服务组件。选择【窗口】→【公用库】→【类】，会弹出如图5-4所示的【类】库面板。图5-3【声音库】面板

图5-4【类】库面板

5.3

任务-03“创建星形图形元件”案例5.3.1

任务简介

本任务主要通过新建元件、绘制与编辑图形元件、场景与库等操作来完成简单的“星形”图形元件的创建。创建完成后的星形图形元件出现在库中，等待随时调用。

5.3.2

知识点

应用基础绘画工具完成“星形”元件的绘制，并创建“星形”图形元件。5.3

任务-03“创建星形图形元件”案例5.3.3

快速上手

步骤1

新建Flash文件。选择【修改】→【文档】，设置背景色为黑色。选择【插入】→【新建元件】，将弹出【创建新元件】对话框，如图5-5所示。

步骤2

在“名称”栏输入“星形”，在“类型”中选择“图形”如图5-6所示。图5-5【创建新元件】对话框图5-6选择【图形】类型5.3

任务-03“创建星形图形元件”案例

步骤3

单击按钮，进入【星形】图形元件编辑模式，如图5-7所示。

步骤4选择【多角星形工具】，打开【属性】面板，如图5-8所示。

步骤5单击属性面板中的，在弹出的【工具设置】对话框中，设置样式为星形，边数为8，星形顶点大小为0.10，单击，如图5-9所示。图5-7【星形】图形元件编辑模式

图5-8打开【属性】面板

图5-9【工具设置】对话框5.3

任务-03“创建星形图形元件”案例

步骤６选择【窗口】→【颜色】，调出【颜色】面板，将笔触颜色设为无色。在“类型”下拉列表中选择“放射状”，调整渐变颜色，如图5-10所示。

步骤7

使用【多角星形工具】在舞台上拖动出一个星形，如图5-11所示。图5-10调整渐变颜色图5-11绘制星形5.3

任务-03“创建星形图形元件”案例

步骤8

选择【窗口】→【对齐】或按下Ctrl+K键，打开【对齐】面板，如图5-12所示。按下水平居中对齐和垂直居中对齐，将该图形中心与舞台中心对齐。

步骤9

单击“场景1”，退出图形元件的编辑模式，回到主场景，编辑的星形就已经保存在【库】中了。这样该动画的基本图形元件就已准备完毕了，如图5-13所示。图5-12【对齐】面板

图5-13【库】面板

5.3

任务-03“创建星形图形元件”案例5.3.4

相关知识——新增元件到库

在FlashCS4中，如果要将对象新增到元件库内，最常用的方法是从舞台中选择某个对象转换为元件。另外，还可以如上所述创建一个空元件，然后在元件编辑模式下再为其添加内容，如此可将绘制的元件新增到元件库内。5.3.5

快速上手

步骤1

选择【窗口】→【库】或按下快捷键Ctrl+L，打开当前文件的元件库，若是新文件，则元件库为空。

步骤2选择【文件】→【导入】→【导入到舞台】命令，打开【导入】对话框，从中选择要导入的“车2.JPG”文件，如图5-14所示。导入的“车2.JPG”图像文件便出现在舞台上了。选择【任意变形工具】，手动调整到舞台适当大小，如图5-15所示。5.3

任务-03“创建星形图形元件”案例图5-14【导入】对话框

图5-15调整导入车的图像文件

5.3

任务-03“创建星形图形元件”案例

步骤3在舞台上选择导入的位图对象，按下Ctrl+B键，将位图分离。用【套索工具】选项中的【魔棒工具】去除背景，再选择【修改】→【转换为元件】或按F8键，系统将弹出【转换为元件】对话框，在“名称”框中输入元件的名称“车”，在“类型”选项中选择“图形”，在“注册”中选择中心点，单击，如图5-16所示。转换后的“车”元件出现在舞台，元件的中心点有一个十字，如图5-17所示。图5-16【转换为元件】对话框

图5-17转换后的“车”元件

5.3

任务-03“创建星形图形元件”案例

步骤4

选择【窗口】→【库】，打开【库】面板。可以看到，在库中出现了新创建的元件，如图5-18所示。

步骤5

完成元件内容的制作后，选择【编辑】→【编辑文档】或按下快捷键Ctrl+E，还可以单击【时间轴】面板上的“场景1”标签，即退出元件编辑模式。此时，该元件的实例出现在舞台中。如图5-19所示。

步骤6

选择【文件】→【保存】，将该文件保存为“新增元件”，新增元件到库的操作便完成了。图5-18

打开【库】面板图5-19舞台中的元件实例

5.4

任务-04“创建星光闪烁影片剪辑元件”案例5.4.1

任务简介图5-20“星光闪烁”效果

本任务主要应用创建、编辑影片剪辑元件、库的操作以及传统补间动画的设置，来完成“星光闪烁”效果的制作。完成后的“星光闪烁”效果如图5-20所示。任务快速流程

新建文件→新建元件→创建星形→创建传统补间→编辑元件→库→编辑场景→测试影片→导入背景→喷涂刷→应用影片剪辑→保存动画。5.4.2

知识点

本任务主要完成“星形”影片剪辑元件的创建与库的操作以及编辑影片剪辑元件,调整其透明度，创建传统补间动画，并在场景中应用影片剪辑，完成“星光闪烁”动画的制作。5.4

任务-04“创建星光闪烁影片剪辑元件”案例5.4.3

快速上手

步骤1

新建文件，设置文档背景为黑色。选择【插入】→【新建元件】命令，打开【创建新元件】对话框，如图5-21所示。设置“名称”为“star_mc”，设置“类型”为“影片剪辑”，单击。

步骤2

选择【多角星形工具】选项中的【星形】工具，绘制一个“star_mc”图形。在【属性】面板中调整图形的位置和大小，完成效果如图5-22所示。图5-21【创建新元件】对话框

图5-22绘制“star_mc”图形

5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤3

分别选中该层的第6帧和第12帧，按F6键插入关键帧，如图5-23所示。

步骤4

选中时间轴上任意一帧，选择【插入】→【传统补间】或右击，在弹出的快捷菜单中选择【创建传统补间】，在3个关键帧中添加两个补间动画，时间轴效果如图5-24所示。图5-23插入关键帧

图5-24创建传统补间

5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤5

调整星形的透明度。在舞台上分别选中第1帧和第12帧的图形元件，在【属性】面板中将其Alpha属性改为9%或更小，如图5-25所示。

步骤6

回到“场景1”，打开【库】面板，如图5-26所示。图5-25【属性】面板图5-26【库】面板

5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤7

将创建完成的影片剪辑多次拖入到场景中，此时影片剪辑占据了主场景中的一个关键帧，如图5-27所示。

步骤8测试影片。可以看到虽然场景中只有一帧，但是动画依然可以播放，如图5-28所示。在这里，如果把影片剪辑想象为一个时间轴，理解起来就很容易了。图5-27影片剪辑只占据了一帧

图5-28测试影片

5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤9

为了使影片剪辑看上去更生动，我们在时间轴上增加一新层，如图5-29所示。

步骤10

导入本章素材文件夹中名为“星空”的背景图像，放在下面的层中，在上面层中添加若干星星，如图5-30所示。图5-29增加一新层

图5-30导入“星空”的背景图像

5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤11

将库中的影片剪辑元件拖入场景中若干次，在【属性】面板中单击“色彩效果”选项左侧的小三角，打开“样式”下拉菜单，选择“高级”，打开“红、绿、蓝”选项，拖动滑块，对星星的色调进行编辑修改，如图5-31所示。图5-31【属性】面板

5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤12

还可以选择【喷涂刷工具】，【属性】面板如图5-32所示，再单击，选择【库】中的影片剪辑元件“star_mc”，选择“随机缩放”，然后在舞台中进行喷涂。

步骤13

按下Ctrl+Enter键，测试影片。完成的效果如图5-20所示。

图5-32随机设置

5.4

任务-04“创建星光闪烁影片剪辑元件”案例5.4.4

相关知识——“将动画转换成影片剪辑”

步骤1

打开一个动画文件，在时间轴左边的层编辑区中，按Shift键，选取所有的图层，如图5-33所示。图5-33选择所有的图层

步骤2

在时间轴的帧上右击，然后从弹出的菜单中选择【复制帧】命令或者选择【编辑】→【时间轴】→【复制帧】命令，复制所有的动画帧。

步骤3

选择【插入】→【新建元件】命令或按下Ctrl+F8键，在【创建新元件】对话框中，将元件命名为“电影片段”，元件类型选择“影片剪辑”，单击，如图5-34所示。5.4

任务-04“创建星光闪烁影片剪辑元件”案例

步骤4

在出现的元件编辑模式下，单击时间轴上的第1帧，从菜单中选择【编辑】→【时间轴】→【粘贴帧】命令；或者在第1帧上右击，从弹出的菜单中选择【粘贴帧】命令，将已复制的全部动画帧粘贴进来，如图5-35所示。图5-34【创建新元件】对话框图5-35复制为影片剪辑元件

步骤5

选择【编辑】→【编辑文档】或者单击时间轴面板上的“场景1”标签，退出元件编辑模式。至此，将动画转换为影片剪辑的操作便完成了。测试影片，观看影片效果。5.5

任务-05“创建交互式按钮元件”案例

5.5.1

任务简介

本任务通过调入“公用库”中的按钮，分析按钮元件的构造，了解按钮的功能。通过导入的位图创建“花形按钮”图形，并将该图形应用于按钮的各种状态中。完成的效果如图5-36所示任务快速流程

打开按钮库→查看按钮→新建文件→创建按钮元件→编辑按钮→测试按钮。5.5

任务-05“创建交互式按钮元件”案例

5.5.2

任务简介

通过打开的按钮元件，进一步了解按钮的构造与功能，以便更好地应用按钮元件。

步骤1

打开按钮元件库，如图5-37所示。将一个按钮元件拖到舞台上舞台上将出现该元件的实例。

步骤2

选取舞台上的实例，选择【编辑】→【编辑元件】或按Ctrl+E键，进入按钮元件编辑模式。可以看到新增了一个“gelRight”标签，如图5-38所示。图5-37按钮元件库

图5-38按钮元件编辑模式

5.5

任务-05“创建交互式按钮元件”案例

可以看到，在按钮元件编辑模式中，时间轴有4个帧，分别是弹起（Up）指针经过（Over）按下（Down）和点击（Hit），每一帧都有一个特定的功能，说明如下：

弹起（Up）：表示鼠标指针没有滑过按钮或者单击按钮后又立刻释放后的状态。

指针经过（Over）：表示鼠标指针经过按钮上面时的状态。

按下（Down）：表示鼠标单击按钮时的外观。

点击（Hit）：用来定义可以响应鼠标单击动作的有效区域。这个区域在动画中是不可见的。但它定义了按钮响应鼠标事件的最大区域。如果这一帧没有定义图形，鼠标的响应区域则由指针经过和弹起两帧的图形来定义。可以选择移动【时间轴】面板上的播放头或选择【控制】→【测试影片】或按Ctrl+Enter键，查看舞台上按钮在不同情况下的外观。如图5-39所示。5.5

任务-05“创建交互式按钮元件”案例

弹起指针经过按下图5-39按钮在不同状态下的外观

5.5.3

快速上手

步骤1

新建Flash文件，创建按钮所用的图形元件。选择【插入】→【新建元件】或按Ctrl+F8键，弹出【创建新元件】对话框，在“名称”框中输入“花”，在“类型”选项中选择“图形”，单击，进入图形元件编辑模式，如图5-40所示。5.5

任务-05“创建交互式按钮元件”案例

步骤2

导入一幅鲜花图片，按下Ctrl+B键分离后去除背景，将分离后的花朵与场景的中心对齐，创建一个名为“花”的图形元件，如图5-41所示。5.5

任务-05“创建交互式按钮元件”案例

步骤3

选择【编辑】→【编辑文档】或单击左上角的“场景1”，返回主界面。这时，刚刚编辑的名为“花”的图形元件将出现在库中，如图5-42所示。

步骤4

再创建一按钮元件，名称为“按钮”，单击后，进入按钮元件编辑模式，时间轴变为4帧，如图5-43所示。图5-42库中的“花”图形元件

图5-43按钮的编辑模式

5.5

任务-05“创建交互式按钮元件”案例

步骤5

在“弹起”帧上右击，从弹出的菜单中选择【插入关键帧】命令，或将库中名为“花”的图形元件拖入舞台中央与中心点对齐，这样就创建了“弹起”帧的图像，如图5-44所示。

步骤6

在“指针经过”帧上右击，从弹出的菜单中选择【插入关键帧】第2帧的图像就出现在舞台上了。选中该图像，在【属性】面板中的“颜色”选项中选择“高级”，进行设置，更改图形颜色，效果如图5-45所示。图5-44创建“弹起”帧的图像

图5-45更改图形颜色效果

5.5

任务-05“创建交互式按钮元件”案例

步骤7

复制第1帧，在“按下”帧上右击，从弹出的菜单中选择【插入关键帧】或将库中名为“花”的图形元件拖入舞台中央与中心点对齐，第3帧“按下”帧的图像就出现在舞台上了。应用【任意变形工具】，将该图形元件进行缩小，结果如图5-46所示。

步骤8

在“点击”帧上右击，从弹出的菜单中选择【插入关键帧】，第4帧的图像就出现在舞台上了。应用【任意变形工具】，将该图形元件进行放大，设置感应区域，结果如图5-47所示。图5-46“按下”帧的图像

图5-47“点击”帧的图像

5.5

任务-05“创建交互式按钮元件”案例

步骤9

整个按钮元件创建完毕后，返回主界面“场景1”。将库中存放着的按钮元件拖曳到舞台中央，如图5-48、图5-49所示。图5-48库中的按钮元件

图5-49拖曳到舞台的按钮

步骤10

选择【控制】→【测试影片】或选择【启用简单按钮】测试结果如图5-36所示。5.6

任务-06创建与编辑实例

5.6.1

任务简介

创建元件之后，就可以将元件应用到工作区中。所有创建实例的方法都是一样的，即选中库中的元件，按住鼠标左键拖曳到舞台上再释放鼠标即可。元件一旦从元件库中被拖曳到工作区，就变成了“实例”。可以在文档中任何地方（包括在其他元件内）创建该元件的实例。当修改元件时，Flash会更新元件的所有实例。5.6.2

知识点

创建影片剪辑的实例与创建包含动画的图形实例是不同的，影片剪辑是只需要一个帧就可以播放的动画，而且编辑环境中不能演示动画效果；而包含动画的图形元件实例，则必须在与其元件同样长的帧中放置，才能显示完整的动画。5.6

任务-06创建与编辑实例

5.6.3

快速上手注意：

步骤1

在时间轴上选择一层。Flash只可以将实例放在关键帧中，并且总在当前图层上。如果没有选择关键帧，Flash会将实例添加到当前帧左侧的第一个关键帧上。

步骤2

选择【窗口】→【库】命令。

步骤3

将该元件从库中拖到舞台上。

步骤4

如果已经创建了图形元件的实例，若要添加将包含该图形元件的帧数，可选择【插入】→【时间轴】→【帧】命令。

一个元件可以创建多个实例，而且每一个实例在创建时都拥有和其元件相同的属性。5.6

任务-06创建与编辑实例

5.6.4

相关知识要编辑实例的属性，可以使用【属性】面板，如图5-50所示。1.编辑实例的色彩效果

在【属性】面板中，打开“色彩效果”选项中的“样式”下拉列表，可以看到其设置，如图5-51所示。图5-50实例的【属性】面板

图5-51“样式”下拉列表

5.6

任务-06创建与编辑实例

无：表示不进行色彩调整工作。

亮度：可以调整实例的亮度，在后面的框中设置范围，从黑色-100%到白色100%，数值越小则越暗。

色调：可以调整实例的色调，在颜色框中选择一种颜色，或从颜色面板中选择一种颜色，或在RGB框中输入红色、绿色、蓝色值，最后设定色调的百分比，100%表示实例被该颜色百分之百渗透。

Alpha：可以调整实例的透明度，数值越高越不透明。

高级：可以分别调节实例的红、绿、蓝和透明度的值。对于在诸如位图这样的对象上创建和制作具有微妙色彩效果的动画时，该选项非常重要。5.6

任务-06创建与编辑实例

2.改变实例类型

在实例【属性】面板中，“实例行为”下拉列表中有3种：影片剪辑、按钮和图形，要改变实例的行为，可进行如下设置：

影片剪辑：当选择了【影片剪辑】后，在“实例名称”框内可以为实例输入一个名