FlashCS6中文版基础教程：第9章 元件、实例和库

1第9章元件、实例和库元件是动画中可以反复从【库】中取出使用的一个小动画部件，它可以是“图形”、“按钮”或一个“动画”，它可以独立于主动画外进行播放。元件的重要特性就是可以反复使用，节省了重复制作一个相同动画的时间，极大地提高了工作效率。要使用元件必须打开【库】面板，将元件拖放到场景中，这个过程就称为建立了该元件的一个实例，场景中的元件就称为一个实例。由于一个元件可以调用多次，且调用一次就产生一个实例，因此一个元件可以产生多个实例。元件【库】用于装载动画中的所有“位图”、“元件”、“声音”和“视频”等文件，如图9-1所示。在本章的学习中，我们通过对元件、实例、库的详解介绍，来学习和了解它们的相关知识，以及在动画制作过程中的应用技巧。29.1元件概述元件是FlashCS6中非常重要的基本元素，对文件的大小和交互能力的大小起着举足轻重的作用。元件类型有以下几种：按钮元件、图形元件和影片剪辑元件，如图9-2所示。39.1.1按钮元件按钮元件用于创建动画的控制按钮，以响应鼠标的按下、单击等事件，按钮元件包括“弹起”、“指针经过”、“按下”和“点击”4种状态。下面我们来直观地学习按钮元件的4种状态。(1)首先打开一个场景文件，如图9-3所示。(2)观察打开的场景文件中，按钮元件现在就是“弹起”状态，如图9-4所示。49.1.1按钮元件(3)在按钮元件上双击，进入按钮元件的编辑状态，选择【指针经过】选项，让按钮处于“指针经过”状态，如图9-5所示。(4)继续在元件的编辑状态下，选择【按下】选项，让按钮处于“按下”状态，如图9-6所示。59.1.1按钮元件(5)继续在元件的编辑状态下，选择【点击】选项，让按钮处于“点击”状态，如图9-7所示。(6)以上所展示的就是【按钮】元件的4种状态，想要更加直观地观看4种状态的变化，可以对当前文件进行测试。在测试画面中，用鼠标对按钮进行各种操作，如图9-8所示。69.1.2图形元件了解了按钮元件后，我们再来学习什么是图形元件。图形元件用于创建可反复使用的图形，它可以是静止图片，也可以是由多个帧组成的动画。它的特点是拥有独立的编辑区域，如果将其调用到场景中，会受到场景中帧的约束。(1)打开一个场景文件，里边已经有了一个图形元件，如图9-9所示。(2)这个图形元件是一个静止的图片。现在我们来对它进行编辑，用鼠标双击场景中的图形元件，进入元件的独立编辑区域，如图9-10所示。79.1.2图形元件(3)在这个编辑区域中，我们可以对元件中的内容进行任意编辑。单击【工具】面板中的【颜料桶工具】按钮，为元件中的女孩的上衣填充一个新的颜色，如图9-11所示。(4)单击【返回到场景】按钮，返回到场景中，观察场景中的文件会发现，刚才在图形元件内部进行的编辑，在返回到场景后也保留了下来，如图9-12所示。89.1.2图形元件(5)双击元件再次回到元件编辑界面，在图形元件内部的1～40帧之间添加一段移动的动画，如图9-13所示。(6)单击【返回到场景】按钮，返回到场景中，对动画进行测试，如图9-14所示。我们在图形元件内部制作的移动动画，并没有被播放出来。这就是图形元件的重要特性，在图形元件内部制作的动画，会受到场景帧数的限制。因此我们需要把【场景】中图层1的帧数也延长到40帧，如图9-15所示。这样场景的帧数长度和图形元件内部的帧数长度是一样的，再测试动画就不会出问题了。99.1.3影片剪辑影片剪辑元件本身也是一段动画，可以独立播放。当播放主动画时，影片剪辑元件也在循环播放，它与图形元件的最大不同就是不会受到场景中帧的约束。(1)返回到上一个场景中，在【库】面板中选择图形元件，如图9-16所示。(2)在图形元件上右击，在弹出的快捷菜单中选择【属性】命令，在弹出的【元件属性】对话框的【类型】下拉列表框中选择【影片剪辑】选项，如图9-17所示。109.1.3影片剪辑(3)这样就将图形元件转换成了影片剪辑元件。而影片剪辑元件与图形元件最大的不同在于，它不会受到场景中帧数的限制。另一个特性是可以为影片剪辑元件添加滤镜，如图9-18所示。(4)添加滤镜后的效果如图9-19所示。119.2创建元件上一小节我们了解了元件的类型和基本特性，下面来学习如何创建这三种不同种类的元件。129.2.1创建图形元件1.创建图形元件2.将图形转换成图形元件139.2.2创建影片剪辑1.直接创建影片剪辑元件的方法2.将场景中的动画转换成影片剪辑元件149.2.3创建按钮元件按钮元件实际是一个4帧的影片剪辑元件。创建一个按钮元件，前3帧是用来设定显示按钮的状态的，最后1帧是用来定义按钮的点击范围的。下面我们学习创建【按钮】元件的方法。(1)打开一个绘制好的场景文件，如图9-49所示。(2)选择【插入】|【新建元件】命令，打开【创建新元件】对话框，设置元件【名称】为“按钮1”，设置元件的【类型】为【按钮】，如图9-50所示。159.2.3创建按钮元件(3)单击【确定】按钮，进入“按钮1”元件编辑界面，如图9-51所示。(4)使用【工具】面板中的【绘图工具】，在场景中绘制一个按钮的形状，如图9-52所示。(5)单击【图层1】的【指针经过】帧，按下F6键插入关键帧。然后以相同的方法在【按下】和【点击】帧，分别插入关键帧，如图9-53所示。169.2.3创建按钮元件(6)单击【图层1】的【指针经过】帧，选中界面中的图形，更改其颜色，如图9-54所示。(7)在【图层1】的上面新创建一个图层，命名为“文字”，如图9-55所示。179.2.3创建按钮元件(8)选择【工具】面板中的【文本工具】，确认当前帧是文字图层的第一帧，输入“进入按钮”文字，如图9-56所示。(9)返回到场景中，拖曳按钮元件到适当的位置，测试影片，如图9-57所示。完成按钮元件的创建。189.3编辑元件本节我们将学习元件的编辑，以及了解它们在进行编辑时不同的特点。199.3.1复制元件复制元件是一个很有用的功能。在Flash动画的制作过程中，复制元件也是我们经常要用到的，下面进行详细讲解。(1)打开一个绘制好的场景文件，如图9-58所示。(2)单击【图层3】的第1帧，打开【库】面板，把【星星】元件拖曳到场景中，并调整其大小和位置，如图9-59所示。209.3.1复制元件(3)复制元件有以下两种方法。第一种方法是，在元件上面右击，在弹出的快捷菜单中选择【复制】命令，如图9-60所示。选择【复制】命令后，在场景空白处右击，在弹出的快捷菜单中选择【粘贴】命令，这样就完成了对元件的复制操作，如图9-61所示。第二种方法是，选择【工具】面板中的【选择工具】，在元件上按住Ctrl键单击，拖曳元件到要复制的地方，完成元件的复制操作，如图9-62所示。(4)用这两种方法再复制几个【星星】元件，测试影片，如图9-63所示。219.3.2元件的编辑方式1.在当前模式下编辑元件2.在元件模式下编辑元件229.4创建实例在Flash动画影片中用到的是元件的实例属性，并不是元件本身，只有把一个元件添加到场景中，即是创建了该元件的一个实例。下面讲解创建实例的具体方法。(1)打开要创建实例的场景，如图9-68所示。(2)在【库】中找到要创建实例的元件，用鼠标将它拖曳到场景中，如图9-69所示。239.4创建实例(3)在【属性】检查器面板的实例名称文本框中，为场景中的实例命名，如图9-70所示。249.5改变实例属性实例是元件的一个副本，所以修改一个实例的属性时不会对元件本身产生任何影响。要更改实例的属性，首先要打开实例的【属性】检查器面板，如图9-71和图9-72所示。在这里可以对实例的位置和大小、3D定位和查看、色彩效果、显示和滤镜等属性进行修改。259.5改变实例属性1.在【属性】检查器面板中修改实例的播放方式2.修改实例的大小和位置3.设置实例的颜色和透明度269.5.1替换实例替换实例功能是为场景中的实例指定不同的元件。在交换元件时，新的实例将保留所有的被替换实例的属性。简单地说就是在原实例上所做的各种效果都将保留在替换的新实例上。下面我们详细讲解替换实例的操作步骤。(1)在场景中选择实例，如图9-78所示。279.5.1替换实例(2)在【属性】检查器面板中，单击【交换】按钮，打开【交换元件】对话框，如图9-79所示。(3)在【交换元件】对话框中选择一个元件，替换当前场景中的元件，如图9-80所示，单击【确定】按钮。289.5.2改变实例颜色接下来我们学习改变实例颜色的具体操作方法。(1)首先打开一个绘制好的场景文件，如图9-81所示。(2)单击场景中的实例，打开实例的【属性】检查器面板，如图9-82所示。(3)在【样式】下拉列表框中选择【色调】选项，如图9-83所示。299.5.2改变实例颜色(4)单击【着色】按钮，在弹出的混色器中选择“红色”，如图9-84所示。(5)返回场景中，观察场景中的实例颜色发生了变化，变成了红色，如图9-85所示。(6)单击【色调】按钮右侧的文本框，输入“50”，修改红色的透明度为“50%”，如图9-86所示。场景中的实例颜色发生了改变。309.5.3分离实例下面讲解分离实例的具体操作方法。(1)首先选中场景中要分离的元件，如图9-87所示。(2)选择【修改】|【分离】菜单命令，如图9-88所示。(3)回到场景中，观察后发现刚才场景中的实例已经被分离出来了，如图9-89所示。319.6使用库选择【窗口】|【库】菜单命令，打开【库】面板，如图9-90所示。【库】面板中主要分为两个部分，上面的部分是“符号窗口”，下面的部分是“对象名称窗口”，当单击元件名称时，该元件的内的图形信息将出现在“符号窗口”中，如图9-91所示。单击【菜单】按钮，弹出有关【库】的控制命令，其基本涵盖了【库】中所有的操作指令，如图9-92所示。329.6.1导入图片Flash可以使用在其他应用程序中创建的插图，可以导入各种文件格式的矢量图和位图，比如BMP、JPG、GIF、Flash动画等都可以导入到【库】中。当导入位图时，可以应用【压缩】和【消除锯齿】功能，将位图直接放置在Flash文档中，使用位图作为填充，在外部编辑器中编辑位图，将位图分离为像素并在Flash中编辑它或者将位图转换为矢量图，如图9-93所示。339.6.2导入声音声音文件也可以像图形文件那样导入到库资源中去，支持的声音文件格式包括WAV、MP3等。它们和图形元件一样在场景中只需要一个声音文件的副本，就可以在影片中以各种方式使用这个声音文件，如图9-94所示。349.6.3导入视频文件视频文件的导入需要系统安装QuickTime或者更高版本的播放器，才能正常导入MOV、AVI、MPEG等视频格式。视频剪辑可以导入为链接文件或嵌入文件。(1)选择【文件】|【导入】|【导入视频】菜单命令，打开【导入视频】对话框，如图9-95所示。(2)单击【浏览】按钮，在打开的【打开】对话框中找到要导入的视频，如图9-96所示。359.6.3导入视频文件(3)单击【打开】按钮，打开要导入的视频，如图9-97所示。(4)单击【下一步】按钮，设定视频的外观，如图9-98所示。369.6.3导入视频文件(5)单击【下一步】按钮，进入到【完成视频导入】界面，然后单击【完成】按钮，如图9-99所示，完成视频导入操作。查看【库】中导入的视频，在编辑后可以将导入的视频文件(见图9-100)发布为SWF文件进行播放。379.7上机实践操作本范例源文件：\09\9-11.fla、花.jpg、楼房1.jpg、楼房2.jpg、云彩.jpg。本范例完成文件：\09\9章实例.fla、9章实例.swf。多媒体教学路径：光盘→多媒体教学→第9章。389.7.1实例介绍和展示本例通过运用【打开】命令、【创建新元件】对话框、【导入到库】命令、【库】面板、【创建传统补间】命令、【选择工具】、【任意变形工具】、【测试影片】命令制作美丽的“田园生活”的动画，效果如图9-101所示。399.7.2创建新元件(1)打开光盘中的场景文件9-11，如图9-102所示。(2)按Ctrl+F8组合键，在弹出的【创建新元件】对话框中，输入元件的【名称】为“楼房1”。选择元件的【类型】为【图形】，如图9-103所示。单击【确定】按钮。(3)进入元件的编辑界面，如图9-104所示。409.7.2创建新元件(4)选择【文件】|【导入】|【导入到库】命令，如图9-105所示。(5)把素材文件“楼房1”导入到库中，在【库】面板中单击我们刚刚导入的素材“楼房1”，把它拖曳到元件的编辑界面中去，如图9-106所示。(6)返回到场景中，新创建一个图层，并命名为“房屋”，如图9-107所示。419.7.2创建新元件(7)把“楼房1”元件从【库】面板中拖曳到场景中，创建第一个实例，如图9-108所示。(8)使用【工具】面板中的【任意变形工具】，调整实例的大小和位置，如图9-109所示。429.7.3导入素材创建实例(1)按Ctrl+F8组合键，在弹出的【创建新元件】对话框中，输入元件的【名称】为“楼房2”。选择元件的【类型】为【图形】，单击【确定】按钮，如图9-110所示。(2)选择【文件】|【导入】|【导入到库】命令，把素材文件“楼房2”导入到【库】中，再拖曳到“楼房2”元件的编辑界面中，如图9-111所示。(3)返回到场景中，把“楼房2”元件从【库】中拖动到场景中，创建按第二个实例，如图9-112所示。439.7.3导入素材创建实例(4)按Ctrl+F8组合键，在弹出的【创建新元件】对话框中，输入元件的【名称】为“云彩”，选择元件的【类型】为【影片剪辑】，如图9-113所示。单击【确定】按钮。(5)进入元件的编辑界面，选择【文件】|【导入】|【导入到库】命令，把素材文件“云彩”导入到【库】中，再拖曳到【云彩】元件的编辑界面中，如图9-114所示。(6)确认在【云彩】元件的编辑界面，在【图层1】的第100帧，按F6键插入关键帧，如图9-115所示。449.7.3导入素材创建实例(7)单击【工具】面板中的【选择工具】图标，在第50帧上移动“云彩”的位置，如图9-116所示。(8)在【图层1】的时间轴上右击，在弹出的快捷菜单中选择【创建传统补间】命令，如图9-117所示。(9)用鼠标拨动时间轴上的控制按钮，看到云彩移动的效果，如图9-118所示。459.