Flash基础教程与创作实例 第5章 使用元件实例.ppt

1、第5章 使用元件、实例和库,内容概述- 元件是在Flash中创建的图形、按钮或影片剪辑。元件只需创建一次，然后就可以重复使用。实例是舞台上的元件副本，编辑元件会更新它所有的实例，但对元件的一个实例应用效果则只更新该实例。元件在创作或运行时，可以作为共享库资源在文档间共享。使用元件、实例和库可以减少重复性工作，共享劳动成果，为创作出优秀的Flash作品提供帮助。,教学目标,1掌握元件、实例和库资源的基本概念，能够明确区分出元件、实例和库资源的差别，能够辨别出元件、实例和库资源之间的关系。 2学习如何创建和编辑元件，能够熟练的从系统中创建图形、按钮和影片剪辑三种元件，以及如何将已有的图形和电影剪辑

2、转换为元件，对已创建好的元件，能够熟练的进行编辑。 3了解实例的概念和好处，学习如何创建和编辑实例，如何改变实例属性和实例类型。 4了解库所包含的内容，熟悉库面板和相关操作，掌握处理库项目和编辑库项目的方法，了解公共库的内容。,5.1 关于元件、实例和库资源,元件是一种可重复使用的图形、按钮、或者影片剪辑等对象，而实例是元件在舞台上的一次具体使用。 通过在 Flash 文档中仅保存元件的一个副本，可以缩小文档文件的大小。元件是一种可重复使用的图形、按钮、或者影片剪辑等对象，而实例是元件在舞台上的一次具体使用。重复使用实例不会增加文件的大小，是使文档文件保持较小的策略中很好的一部分。所以对于一个

3、具有大量重复元素的动画来说，只要对元件作了修改，系统将自动地更新所有的实例。元件还简化了文档的编辑；当编辑元件时，该元件的所有实例都相应地更新以反映编辑。元件的另一个好处是使用它们可以创建完善的交互性。 通过在 Flash 文档中仅保存元件的一个副本，可以缩小文档文件的大小。,元件可以像按钮或图形那样简单，也可以像影片剪辑那样复杂。创建元件后，必须将其存储到 “库”面板中。 “库”面板存储并管理文档中的所有元件。要再次使用某个元件，请将它从 “库”面板拖动到 “舞台”上。这样， Flash 会在舞台上创建该元件的一个新实例。实例其实只是对原始元件的引用，它通知 Flash “在该位置绘制指定元

4、件的一个副本”。 通过使用元件和实例，可以使资源更易于组织，使 Flash 文件更小。此外，您还可以通过编辑元件来更新特定元件的所有实例的外观和行为。这些更改随即会反映到整个文档中该元件的所有实例中。,5.2 创建和编辑元件,5.2.1 元件的类型 5.2.2 创建新元件 5.2.3 将选定元素转换为元件 5.2.4 将舞台上的动画转换为影片剪辑 5.2.5 创建按钮元件 5.2.6 复制元件 5.2.7 编辑元件,5.2.1 元件的类型,在Flash中元件有图形、按钮、影片剪辑三种。不同的元件类型可产生不同的交互效果，因此利用元件能创建丰富多彩的动画。 （1）影片剪辑元件 影片剪辑元件即是一

5、段Flash动画，它是主动画的一个组成部分，它可独立于主动画进行播放。因此当播放主动画时，影片元件也在循环播放。 （2）按钮元件 按钮元件用于创建动画的交互控制按钮，以响应鼠标事件（如单击、滑过等）。按钮有4个不同的状态，可以分别在按钮的不同状态上创建内容，可是静止图形，也可是动画或影片，可以给按钮添加事件的交互动作，使按钮具有交互功能。 （3）图形元件 该元件是可反复使用的图形，图形元件可以是只含一帧的静止图片，也可以制作成由多个帧组成的动画。图形元件是制作动画的基本元素之一，但它不能添加交互、行为和声音控制。,5.2.2 创建新元件,利用菜单命令创建新元件 其创建方法如下： （1）单击“插

6、入”/“新建元件”命令，或用快捷键Ctrl+F8打开“新建元件”对话框， （2）在“名称”文本框中输入要创建的元件名如“皮球”。 （3）在“类型”项中选择“图形”单选项。 （4）单击确定按钮，一个名称为皮球的图形元件就建立，在元件编辑区的上方出现一个图形元件图标 此时Flash自动进入图形元件的编辑状态。 （5）使用绘图工具在图形元件编辑区中绘制需要的图形，或从其他位置导入图形。,5.2.3 将选定元素转换为元件,可以选择舞台上的图形并将它转换为图形元件。 （1） 在“工具”面板中，单击 “选择”工具。 （2） 在舞台上，在图形周围拖动，将其选中。 （3）选择“修改”/ “转换为元件”。 （4

7、）在“转换为元件”对话框中，输入古典乐器 作为名称并选择“图形”作为行为。 注意:注册网格使用黑色的小正方形来指示注册点位于元件限制框内的哪个位置。注册点是元件旋转时所围绕的轴，也是元件对齐时所沿的点。单击网格中的左上正方形选择注册点位置，然后单击“确定”。 （5）舞台上的乐器 现在是 古典乐器 元件的实例。可以用属性检查器显示图形元件实例的属性。 （6）打开“库”面板 （“窗口”/“库”）查看元件。 您将在“库”面板中找到“古典乐器”元件。Flash 将元件存储在库中。每个文档都有它自己的库，并且可以在不同的 FLA 文件之间共享库。,5.2.4 将舞台上的动画转换为影片剪辑,影片剪辑元件在

8、许多方面都类似于文档内的文档。此元件类型自己有不依赖主时间轴的时间轴。您可以在其它影片剪辑和按钮内添加影片剪辑以创建嵌套的影片剪辑。您还可以使用属性检查器为影片剪辑的实例分配实例名称，然后在 ActionScript 中引用该实例名称。除了新建元件和将对象转换为元件外，也可将已完成的小动画转换成影片元件，如果已经在场景中创建了一幅动画，并且以后可能还要用到它，或者希望将它作为实例来处理，则可以选取这个动画，并将它转换成一个影片元件。,（1） 在时间轴上从左上向右下拖动鼠标，选取要转换动画的所有层上的所有帧 （2）单击：“编辑”/“时间轴”/“复制帧”命令，或在选取的帧上单击右键从弹出的快捷菜单

9、中选择“复制帧”命令。,（3）单击“插入”/“新建元件”命令，在弹出的“创建新元件”对话框中输入元件的名称，并选择“影片剪辑”选项，单击“确定”按钮，进入影片剪辑元件编辑窗口。 （4）在第一帧上右击鼠标选择“粘贴帧”命令，或者单击“编辑” /“时间轴” /“粘贴帧”命令，即可将复制的帧粘贴到时间轴上,（4）在第一帧上右击鼠标选择“粘贴帧”命令，或者单击“编辑” /“时间轴” /“粘贴帧”命令，即可将复制的帧粘贴到时间轴上。,5.2.5 创建按钮元件,按钮实际上是四帧的交互影片剪辑。当为元件选择按钮行为时， Flash 会创建一个四帧的时间轴。前三帧显示按钮的三种可能状态，第四帧定义按钮的活动区

10、域。时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。要制作一个交互式按钮，可把该按钮元件的一个实例放在舞台上，然后给该实例指定动作。必须将动作指定给文档中按钮的实例，而不是指定给按钮时间轴中的帧。 若在“新建元件”对话框中选择“按钮”项则进入按钮编辑工作区，工作区上方出现图标，并且时间轴由“弹起”、“指针经过”、“按下”、“点击”四部分组成,时间轴中四个状态帧的用途,时间轴中四个状态帧的用途如下： 弹起：表示鼠标指针未移到按钮上时的状态，即是按钮的正常状态。该帧是空关键帧，单击该帧可以创建按钮的状态。 指针经过：表示指针移到按钮上时的状态，在该帧上要插入关键帧，再创建指针移

11、动过按钮时的状态。一般该帧相对于弹起帧应有所改变。如可以定义当鼠标指针移到按钮上时按钮变色或放大等。对于文字按钮可以定义当鼠标拖动到按钮上时，文字变亮等效果。 按下：表示按下按钮时的状态。在该帧上也需插入关键帧，再创建鼠标按下按钮的状态。对于图形按钮来说，定义按钮被按下的效果比未被按下要小一些，这样当按下按钮时，按钮自动缩小，出现动态效果。 点击：表示鼠标能单击到按钮时的范围，该帧画面不显示在工作中，只用来表示作用范围。它可以使用一个实心的图形来代替，便于鼠标对按钮发生作用。,创建该元件的实例,（1）选择“编辑”/“取消全选”来确保没有选择舞台上的任何内容。 （2）选择“插入”/“新建元件”，

12、或者按 Control+F8。要创建按钮，可将按钮帧转换为关键帧。 （3）在“创建新元件”对话框中，输入新按钮元件的名称；对于“类型”，请选择“按钮”。Flash 会切换到元件编辑模式。时间轴的标题会变为显示四个标签分别为“弹起”、“指针经过”、“按下”和“点击”的连续帧。第一帧（“弹起”）是一个空白关键帧。 （4）要创建弹起状态的按钮图像，可以使用绘画工具、导入一幅图形或者在舞台上放置另一个元件的实例。您可以在按钮中使用图形或影片剪辑元件，但不能在按钮中使用另一个按钮。如果要把按钮制成动画按钮，可使用影片剪辑元件。 （5）单击标示为“指针经过”的第二帧，然后选择“时间轴”/“关键帧”。Fla

13、sh 会插入复制了“一般”帧内容的关键帧。,（6）将按钮图像更改为“指针经过”状态。 （7）为“按下”帧和“点击”帧重复步骤 5 和步骤 6。 “点击”帧在舞台上不可见，但它定义了单击按钮时该按钮的响应区域。确保“点击”帧的图形是一个实心区域，它的大小足以包含“弹起” 、“按下”和“指针经过”帧的所有图形元素。它也可以比可见按钮大。如果没有指定“点击”帧，“一般”状态的图像会被用作“点击”帧。 您可以创建一个脱节的图像变换，在该图像变换中，将指针移到按钮上将导致舞台上的另一个图形发生变化。要这样做，可把“点击”帧放在一个不同于其他按钮帧的位置上。,（8）要为按钮状态指定声音，请在时间轴选择该状

14、态帧，选择“属性面板”/“声音”中选择一种声音。 （9）完成之后，选择“编辑”/“编辑文档”。从“库”面板中拖出按钮元件即可在文档中创建该元件的实例。,5.2.6 复制元件,创建元件后，您可以在文档中重复使用它的实例。您可以修改单个实例的以下实例属性，而不会影响其它实例或原始元件：颜色、缩放比例、旋转、Alpha 透明度、亮度、色调、高度、宽度和位置。如果稍后编辑元件，则该实例除了获得元件编辑效果外，还保留它修改后 的属性。,您现在将直接复制乐器的实例，然后改变副本的色调。 （1）在舞台上，选择乐器。按 Alt 键并将乐器向右拖动以创建另一个实例。如图1所示。 （2）保持副本处于选中状态，从属

15、性检查器的 “颜色”下拉菜单中选择“色调”。如图2所示。,（3）在 RGB 区域中，在“红色”弹出菜单中输入 0，在“绿色”弹出菜单中输入 255，在“蓝色”弹出菜单中输入 0。然后按 Enter 键。重复的实例变为蓝色，但原始实例保持不变。如图所示。,5.2.7 编辑元件,通过双击元件的任何实例可以进入元件编辑模式。在元件编辑模式下进行的更改会影响该元件的所有实例。 （1）执行以下其中一项操作可以进入元件编辑模式： 在舞台上，双击乐器实例之一： 在“库”面板中，双击 乐器 元件。 元件的名称会出现在场景 1 的旁边、工作区的顶部，这表明您处于指定元件的元件编辑模式下。 （2）在“工具”面板中

16、，选择“任意变形”工具，并在最下面的乐器周围拖动以选择整个汽车。 在元件编辑模式下，该乐器为图形，您可以在元件内像对其它任何矢量图形一样对它进行操作,5.3 创建和编辑实例,5.3.1 创建实例 5.3.2 改变实例的颜色和透明度 5.3.3 交换元件实例 5.3.4 改变实例类型 5.3.5 设置图形实例的动画 5.3.6 分离实例 5.3.7 查看实例信息,5.3.1 创建实例,创建元件之后，可以在文档中任何需要的地方（包括在其它元件内）创建该元件的实例。当您修改元件时，Flash 会更新元件的所有实例。 当您创建影片剪辑和按钮实例时，Flash 将为它们指定默认的实例名称。可以在“属性”

17、检查器中将自定义的名称应用于实例。 （1）在时间轴上选择一层。 Flash 只可以把实例放在关键帧中，并且总在当前层上。如果没有选择关键帧，Flash 会将实例添加到当前帧左侧的第一个关键帧上。 (2）选择“窗口”/“库”来打开库。 （3）将该元件从库中拖到舞台上。 （4）如果已经创建了图形元件的实例，请选择“插入”/“时间轴”/“帧”来添加一定数量的帧，这些帧将会包含该图形元件,5.3.2 改变实例的颜色和透明度,每个元件实例都可以有自己的色彩效果。要设置实例的颜色和透明度选项，可使用“属性”检查器。“属性”检查器中的设置也会影响放置在元件内的位图。当在特定帧内改变实例的颜色和透明度时，Fl

18、ash 会在播放该帧时立即进行这些更改。要进行渐变颜色更改，必须使用补间动画。当补间颜色时，要在实例的开始关键帧和结束关键帧输入不同的效果设置，然后补间这些设置，以便让实例的颜色随着时间逐渐变化。,（1）在舞台上选择该实例，然后选择“窗口”/“属性”。 如图1所示。,图1 选择实例属性 图2 修改实例属性后的效果 （2）从“属性”检查器内的“颜色”弹出菜单中选择以下选项之一。,“亮度”调节图像的相对亮度或暗度，度量范围为从黑 (100%) 到白 (100%)。单击该三角形然后拖动滑块，或者在文本框中输入一个值来调节亮度。 “色调”用相同的色相为实例着色。使用“属性”检查器中的色调滑块设置色调百

19、分比，从透明 (0%) 到完全饱和 (100%)。单击该三角形然后拖动滑块，或者在文本框中输入一个值来调节色调。可以使用以下方法选择颜色：在各自的文本框中输入红、绿和蓝色的值；单击颜色框然后从弹出窗口中选择一种颜色；或者单击“颜色选择器”按钮。 “Alpha”调节实例的透明度，从透明 (0%) 到完全饱和 (100%)。要调整 Alpha 值，单击此三角形并拖动滑块，或者在文本框中输入一个值。 “高级”分别调节实例的红、绿、蓝和透明度的值。对于在诸如位图这样的对象上创建和制作具有微妙色彩效果的动画时，该选项非常有用。左侧的控件使您可以按指定的百分比 降低颜色或透明度的值。右侧的控件使您可以按常

20、数值降低或增大颜色或透明度的值。当前的红、绿、蓝和 Alpha 的值都乘以百分比值，然后加上右列中的常数值，产生新的颜色值。例如，如果当前红色值是 100，把左侧的滑块设置到 50% 并把右侧滑块设置到 100，就会产生一个新的红色值 150 (100 x .5 + 100 = 150)。,5.3.3 交换元件实例,可以给实例指定不同的元件，从而在舞台上显示不同的实例，并保留所有的原始实例属性（如色彩效果或按钮动作）例如，假定您正在使用 古典乐器 元件创建一个影片中的角色，但决定将该角色改为 西洋乐器。您可以用西洋乐器元件替换古典乐器元件，并让更新的角色出现在所有帧中大致相同的位置上。,（1）

21、在舞台上选择该实例，然后选择“窗口”/“属性”。 （2）在“属性”检查器中单击 “交换”按钮。 （3）在“交换元件”对话框中，选择一个元件来替换当前分配给该实例的元件。要直接复制选定的元件，请单击对话框底部的“直接复制元件”按钮。 如果制作的是几个具有细微差别的元件，那么直接复制使您可以在库中现有元件的基础 上建立一个新元件，并将复制工作减到最少。 （4）单击“确定”。 要替换元件的所有实例： （1）将与您正在替换的元件同名的元件拖到“库”面板中。 （2）在“解决库项目冲突”对话框中，单击 “替换”。,5.3.4 改变实例类型,您可以改变实例的类型来重新定义它在 Flash 应用程序中的行为。

22、例如，如果一个图形实例包含您想要独立于主时间轴播放的动画，您可以将该图形实例重新定义为影片剪辑实例。,若要改实例类型，请执行以下操作： （1）在舞台上选择该实例，然后选择“窗口”/“属性”。 （2）从“属性”检查器左上角的弹出菜单中选择 “图形”、“按钮”或“影片剪辑”。 如图所示。,5.3.5 设置图形实例的动画,通过设置“属性”检查器中的选项，可以决定如何播放 Flash 应用程序中图形实例内的动画序列。 动画图形元件是与放置该元件的文档的时间轴联系在一起的。相比之下，影片剪辑元件拥有自己独立的时间轴。因为动画图形元件使用与主文档相同的时间轴，所以在文档编辑模式下显示它们的动画。影片剪辑元

23、件作为一个静态的对象出现在舞台上，并不会作为动画出现在Flash 编辑环境中。,设置图形实例的循环： （1）在舞台上选择图形实例，然后选择“窗口”/“属性”。 （2）在“属性”检查器中，从实例名称下方的弹出菜单中选择一个动画选项： “循环”会按照当前实例占用的帧数来循环包含在该实例内的所有动画序列。 “播放一次”从指定帧开始播放动画序列，直到动画结束，然后停止。 “单帧”显示动画序列的一帧。指定要显示的帧。,5.3.6 分离实例,要断开实例与元件之间的链接，并把实例放入未组合形状和线条的集合中，可以“分离”该实例。这对于充分地改变实例而不影响任何其它实例非常有用。如果在分离实例之后修改该源元件

24、，并不会用所作的更改来更新该实例。,分离元件的一个实例：,（1）在舞台上选择该实例。如图1所示。 （2）选择“修改”/“分离”。这样就会把实例分离成它的几个组件图形元素。 （3）使用绘制和涂色工具来根据需要修改这些元素。如图2所示。,5.3.7 查看实例信息,创建 Flash 应用程序时，特别是在处理同一元件的多个实例时，识别舞台上元件的特定实例是很困难的。您可以使用“属性”检查器、“信息”面板或影片浏览器进行识别。,“属性”检查器和“信息”面板会显示选定实例的元件名称，并有一个图标指明其类型（图形、按钮或影片剪辑）。此外，还可以查看下列信息： 在“属性”检查器中，您可以查看实例的行为和设置；

25、对于所有实例类型，均可以查看色彩效果设置、位置和大小；对于图形，还可以查看循环模式和包含该图形的第一帧；对于按钮，还可以查看实例名称（如果指定）和跟踪选项；对于影片剪辑，还可以查看实例名称（如果指定）。对于位置，“属性”检查器显示元件注册点或元件左上角的 x 和 y 坐标，具体取决于在“信息”面板上选择的选项。,在“信息”面板上，可以查看实例的大小和位置、实例注册点的位置、实例的红色 (R)、绿色 (G)、蓝色 (B) 和 Alpha (A) 值（如果实例有实心填充）；以及指针的位置。“信息”面板还显示元件注册点或元件左上角的 x 和 y 坐标，具体视所选的选项而定。要显示注册点的坐标，请单击

26、“信息”面板内坐标网格中的中心方框。要显示左上角的坐标，请单击坐标网格中的左上角方框。在影片浏览器中，可以查看当前文档的内容，包括实例和元件。 此外，在“动作”面板中，还可以查看分配给按钮或影片剪辑的所有动作。 若想获取舞台上有关实例的信息： （1）在舞台上选择该实例。 （2）显示“属性”检查器或要使用的面板，,5.4 使用库和共享库资源,5.4.1 【库】面板的组成 5.4.2 处理库项目 5.4.3 编辑库项目 5.4.4 使用公用库 5.4.5 使用共享库资源,5.4 使用库和共享库资源,库存放了编辑动画需要的各种元件，这些元件可以随时调出使用。若将元件调出放到场景中，就生成了该元件的一

27、个实例。改变场景中实例的属性，并不改变图库中元件的属性，但改变元件的属性，则场景中对应的实例属性也随之改变。,5.4.1 【库】面板的组成,库面板中各按钮的功能：,5.4.2 处理库项目,当选择“库”面板中的项目时，“库”板的顶部会出现该项目的缩略图预览。如果选定项目是动画或者声音文件，则可以使用库预览窗口或“控制器”中的“播放”按钮预览该项目。可以在库中使用文件夹来组织库项目。,（1）要在当前文档中使用库项目，请执行以下操作： 将项目从“库”面板拖动到舞台上。 该项目就会添加到当前层上。 （2）要将对象转换为库中的元件，请执行以下操作： 将项目从舞台拖动到当前“库”面板上。 （3）要在另一文

28、档内使用当前文档中的库项目： 将项目从库或舞台拖入另一个文档的库或舞台中。 （4）要复制另一个文档的库项目，请执行以下操作： 选择包含这些库项目的文档。 在“库”面板中选择库项目。 选择“编辑”/“复制”，可复制库项目。 选择要复制这些库项目的目标文档。 选择该文件的“库”面板。 选择“编辑”/“粘贴”，把库项目粘贴到“库面板”。,5.4.3 编辑库项目,要编辑库项目（包括导入的文件），请从“库”选项菜单中选择选项。 也可以在外部编辑器中编辑完导入的文件之后更新这些文件，方法是使用“库”选项菜单中的“更新”选项。要编辑库项目，请执行以下操作： （1）在“库”面板中选择项目。 （2）从“库”选项

29、菜单中选择下列选项之一： 选择“编辑”以在 Flash 中编辑项目。 选择“编辑方式”，然后选择一个外部应用程序编辑该项目,5.4.4 使用公用库,可以使用 Flash 附带的范例公用库向文档中添加按钮或声音。还可以创建自定义公用库，然后与创建的任何文档一起使用。,要在文档中使用公用库中的项目，请执行以下操作： （1）选择“窗口”/“公用库”，然后从子菜单中选择一个库。如图1所示。,图1 编辑库项目内容 图2 3种公共库内容 （2）将项目从公用库拖入当前文档的库。如图2所示。,要为 Flash 应用程序创建公用库： （1）用一个库创建 Flash 文件，该库中包含您想包括在永久库中的元件。 （2）将该 Flash 文件放在硬盘上 Flash 应用程序文件夹中的 Libraries 文件夹下。如图3所示。,图3 从公共库中选择按钮,5.4.5 使用共享库资源,共享库资源使您可以在多个目标文档中使用源文档的资源。可使用两种不同的方法来共享库资源： （1）对于运行时共享资源，源文档的资源是以外部文件的形式链接到目标文档中的。运行时资源在文档回放期间（即在运行时）加载到目标文档中。在制作目标文档时，