1、 本章导读本章导读 元件是可以重复使用的图形、动画和按钮。Flash中的元件一经创建即可无数次的重复使用，从而大大减小动画制作者的工作量。由于同一个元件，不论在舞台上使用了多少次，其所占空间只有一个元件大小，因而在动画制作过程中使用元件可有效减小文件和体积。当将创建好的元件由库中拖放到舞台上，便可称其为“实例”。本章主要介绍Flash CS5中元件、实例和库的具体使用方法。学习目标学习目标理解元件、实例与库的相关知识。掌握图形元件、影片剪辑元件及按钮元件的创建与编辑相关操作。了解将元素转换为元件的具体方法。掌握创建与编辑实例的相关操作。熟悉库面板的操作方法。元件、实例与库是制作Flash动画的
2、三大元素。元件是指一个可以重复使用的图像、动画或按钮，一共有三种类型：影片剪辑元件、按钮元件和图形元件。将元件拖放至工作区应用于动画的制作过程中就生成了一个实例。库是Flash中存放各种动画元素的场所，存放的元素可以自行创建，也可以是由外部导入的图像、声音、视频元素。一个元件允许重复创建多个实例，并且在工作区多次使用的元件不会增加文件的大小，大大节省了存储空间。了解三者的关系与操作，对于减小文件体积以及提高工作效率非常重要。课堂练习使用元件减小动画大小操作步骤：1）单击【文件】菜单中的【新建】命令，创建新文档，并从文件菜单中选择【导入】子菜单中的【导入至舞台】命令，将位图“蝴蝶.jpg”导入至
3、舞台。在“蝴蝶”图片上右击鼠标，在弹出的快捷菜单选择【转换为元件】命令，使其转换为影片元件。2）单击【窗口】菜单中的【库】命令，打开库面板，可以看到库面板上保存了名为“蝴蝶”的影片剪辑元件，如右图所示。4.1.1 使用元件可减小生成动画大小 根据以上介绍，我们已经了解使用元件可减少生成动画的大小。下面，我们就通过一个具体实例来验证一下。3）单击库面板中的“蝴蝶”影片剪辑元件，然后拖动鼠标将“蝴蝶”影片剪辑拖动到舞台上，形成单个“蝴蝶”实例。4)单击【文件】菜单中的【另存为】命令，将文件保存到指定文件夹下，并命名为“蝴蝶1.fla”，并单击【文件】菜单中的【导出】子菜单中的【导出影片】命令，在同
4、一文件夹下保存成文件“蝴蝶1.swf”，产生只使用一次元件的Flash文件。5）单击库面板中的“蝴蝶”影片剪辑元件，然后拖动鼠标将“蝴蝶”影片剪辑拖动到舞台上，形成多个“蝴蝶”实例，如右图所示。6）用同样方法，在同一文件夹下生成文件“蝴蝶2.fla”和“蝴蝶2.swf”。1）在FlashCS5中创建新文档，单击【文件】菜单中的【导入】命令，将“蝴蝶.jpg”导入至舞台，并将其转换为图形元件。在该文件的库面板中选中蝴蝶元件，将此元件拖动到舞台上，来回拖动两次使舞台上有两只蝴蝶元件的实例。2）鼠标右击左上方的蝴蝶，在弹出的快捷菜单中选择“任意变形”命令，按下Shift键不放，向外拖动蝴蝶4个角中的
5、任何一个将蝴蝶放大。将“蝴蝶”实例放大之后，观察元件库中该“蝴蝶”图形元件，形状没有发生任何改变，如右图所示。4.1.2 修改实例对元件的影响 如果修改实例，对元件又有哪些影响呢？我们可以通过以下实例来验证一下。3）在舞台中，我们不仅可以对实例的形状进行修改，还可以对实例的透明度进行修改。单击选择右下角的蝴蝶实例，在下方的属性面板中，选择“颜色”下拉列表框中的“亮度”选项卡，在后面的方框中可直接输入数值或单击输入框后面的下拉箭头拖动滑块将Alpha值为30%，4)可以看到舞台上的蝴蝶的亮度明显变暗，但在库面板中的元件并没有发生任何改变。如右图所示。修改实例对元件没有任何影响。4.1.3 4.1
6、.3 修改元件对实例的影响修改元件对实例的影响 如果对元件的属性进行修改，则舞台上的实例将如何变化？下面我们通过具体实例来说明修改元件对实例产生的影响。课堂练习修改元件1）接上例，在库面板的预览窗口中，双击蝴蝶元件，或在库面板的元件列表框中选中想要编辑的元件，单击鼠标的右键，在弹出的快捷菜单中选择编辑元件，进入元件编辑模式。2)用工具箱中的选则工具选中整个蝴蝶，然后右键单击蝴蝶，选择“任意变形”命令或在工具箱中选择“任意变形”工具，然后鼠标移动到蝴蝶的任何一角，当鼠标指针变为旋转箭头时，拖动蝴蝶进行旋转。3）单击“场景1”，回到影片场景，可以看到与该元件相关的两个实例，都已旋转了角度，如右图所
7、示。修改元件后，实例将会发生变化。4.1.4 4.1.4 区别元件与实例区别元件与实例 元件与实例两者既有联系又有区别。首先，实例的基本形状是由元件决定的，这就表明，实例不能脱离元件的原型而无规则地任意变化。一个元件可以有多个实例与它对应，但每个实例只能对应一个确定的元件。此外，一个元件的多个实例可以有自己的一些特有属性，例如大小、颜色、透明度的不同。这使得同一元件的多个实例可以变得各不相同，展现了实例的多样性，但无论怎样变化，实例的基本形状是一致的。FlashCS5中元件主要有三类：影片剪辑、按钮元件和图形元件，具体如下图所示。A：按钮元件 B：图形元件 C：影片剪辑 4.2.1 4.2.1
8、 创建图形元件创建图形元件 在FlashCS5中，图形元件主要用于静态图像的重复使用，或者创建与主时间轴相关联的变形动画。课堂练习1创建图形元件具体操作步骤如下：1）创建新文档，选择【插入】菜单中的【新建元件】命令或按下快捷键Ctrl+F8，弹出“创建新元件”对话框。2）在对话框中的“名称”文本框中输入元件名称，“类型”选择“图形”，单击“确定”按钮，进入图形元件的编辑模式。3)在元件的编辑区域中从外部导入图像“小狗.jpg”。4）单击文档窗口的左上角“场景1”按钮，退出元件编辑模式并返回主场景，单击【窗口】菜单中的【库】命令，打开“库”面板，在库面板中显示创建的图形元件，如右图所示。4.2.
9、2 4.2.2 创建影片剪辑元件创建影片剪辑元件 影片剪辑元件可以实现重复使用动画片段。影片剪辑元件可以包含多种素材类型，如：交互控制按钮、声音、图片和其他影片剪辑等。课堂练习创建影片剪辑具体操作步骤如下：1）选择【插入】菜单中的【新建元件】命令，弹出“创建新元件”对话框，在对话框中的“名称”文本框中输入元件的名称，“类型”选择“影片剪辑”。2）单击“确定”按钮，进入影片剪辑元件的编辑模式，单击工具箱中的文字工具，输入内容“welcome you”,设置文本相关属性，按下两次Ctrl+B命令，将文字打散为图形。3）单击【窗口】菜单中【时间轴】命令，打开“时间轴”面板，选中图层一的第15帧，右键
10、单击鼠标，在弹出的快捷菜单中选择【插入关键帧】命令或按下F6快捷键插入关键帧，重新设置文本属性，改变填充色。4）将光标放置在第1帧和第15帧之间的任意一帧上，单击鼠标右键，在弹出的快捷菜单中选择“创建补间形状”动画命令。5）单击【窗口】菜单中的【库】命令，打开“库”面板，显示创建的影片剪辑元件，单击预览窗口中的播放按钮，可以播放影片剪辑元件。4.2.3 4.2.3 创建按钮元件创建按钮元件 按钮元件实质上是一个包含4个关键帧的交互影片剪辑。我们可以根据按钮的不同状态显示不同的图像、响应鼠标动作和执行指定的行为。按钮元件的4种关键帧分别是：弹起帧、指针经过帧、按下帧和点击帧。具体介绍如下：弹起帧
11、：表示鼠标指针不在按钮上时的状态。指针经过帧：表示鼠标指针放置在按钮上时的状态。按下帧：表示鼠标单击按钮时的状态。点击帧：设定对鼠标单击动作时作出反应区域。课堂练习创建按钮元件操作步骤如下：（1）选择【插入】菜单中的【新建元件】命令，弹出“创建新元件”对话框，在对话框中的名称文本框中输入“按钮1”，类型选择为“按钮”。（2）选中时间轴上的“弹起”帧，选择工具箱中的矩形工具，在文档中绘制一个合适大小的矩形，并在图形上输入文字“按钮”，设置矩形的填充属性和文字属性。3）选中时间轴上的“指针经过”帧，右键单击从弹出的快捷菜单中选择“插入关键帧”或按下快捷键F6插入关键帧，在文档中改变图形及文字的颜色
12、。4）选中时间轴上的“按下”帧，按F6或右键单击从弹出的快捷菜单中选择“插入关键帧”，在文档中改变图形及文字的颜色。5）完成按钮元件的制作后，单击文档窗口左上角的“场景1”按钮，退出按钮元件编辑模式并返回主场景，在库面板中显示创建的按钮元件，单击预览窗口中的播放按钮，可以播放影片剪辑元件，如右图所示。课堂练习将元素转换为元件具体操作步骤如下:1）使用工具箱中在舞台中绘图工具绘制一朵花，用选择工具选取图形对象。2）单击【修改】菜单中的【转换为元件】命令，也可以右击鼠标，在弹出的快捷菜单中选择【转换为元件】，或者按下F8快捷键。3）在弹出的“转换为元件”对话框中，在“名称”文半框中键入元件的名称，
13、“类型”选择“图形”，把注册点设置为正中间，然后点击“确定”按钮。4）这时，舞台上的“小花”图形已经变成图形元件了，在库面板的预览窗口中可以看到名为“花朵”的图形元件，如右图所示。4.2.4 将元素转换为元件 4.2.5 编辑元件 舞台上的实例与库面板中对应的元件有一种类似于“父与子”的特殊关系。这种关系的一个优点是，如果你在库面板中改变了一个元件，那么舞台上的所有实例都将更新。当我们对整个Flash动画做大范围的更改时，这一特性将节省大量的时间，大大提高工作效率。进入元件编辑状态的方法有6种，具体如下：1）选择【编辑】菜单中的【编辑元件】命令。2）在舞台上的对象上单击鼠标右键，选择“编辑”命
14、令。3）在舞台上的对象上单击鼠标右键，选择“在当前位置编辑”命令。4）在舞台上的对象上单击鼠标右键，选择“在新窗口中编辑”命令。5）在库面板中选中元件，然后选择右上角【选项】菜单中的【编 辑】命令。6）在库面板中元件上单击鼠标右键，选择“编辑”命令。4.3.1 4.3.1 创建实例创建实例 在上例的库面板中，将“小狗”元件拖放至舞台上，这样就创建了一个实例。使用同样的方法，继续将元件拖放至舞台，创建第二个实例，如下图所示。4.3.2 4.3.2 改变与设置实例改变与设置实例 每个实例都有自己的属性，这些属性相对与元件来说是相对独立的。因此，我们可以改变实例的颜色、亮度、透明度，也可以对实例进行
15、缩放、旋转、扭曲等操作，还可以改变实例的类型和动画的播放模式，所有这些操作都不会影响元件和其他同元件产生的实例。1.1.改变实例的色彩效果改变实例的色彩效果 根据上面的实例，选择舞台上的小狗，单击【窗口】菜单中的【属性】命令，打开【属性】面板，可以设置实例的样式。实例样式属性包括5个选项，具体名称和含义如下：1）无：不添加任何样式的效果。2）亮度：用于调整实例的亮度,亮度值可以设置为100%-100%的百分数。该值为0%时，实例的亮度为本身的亮度值。该值为100%时，实例的亮度最高，为白色。改值为-100%时，实例的亮度最低，为黑色。3）色调：用于选择一种颜色对实例进行着色。可用颜色拾取器，也
16、可以直接输入RGB色值。着色程度为0100%的百分数，这个百分数表示在实例中“掺”入选取颜色的比例。0表示完全不用选择的颜色对实例进行着色。100%表示完全用选择的颜色对实例进行着色。4）Alpha：用于设置实例的透明度。值为0表示完全透明，实例完全不可见。值为100%时完全不透明，实例完全可见。可直接在文本框中输入数字，也可以用滑块来调节。5）高级：选择高级时，可以在一个面板上同时更精确的，调节色调和透明度的百分比和偏移值。2.2.实例的变形实例的变形如果我们要改变舞台中实例的形状，可以先选中对象，然后右击鼠标，在弹出的快捷菜单中选择【任意变形】命令，实现对象的缩放、扭曲、旋转等各种变形操作
17、。关于工具箱中“任意变形”工具的用法在前面的章节中我们已经做了详细介绍，现在可以试验一下实例变形效果，如下图所示。4.3.3 4.3.3 实例的分离实例的分离 根据上面的实例，选择舞台中的“小狗”，然后连续执行两次执行【修改】菜单中的【分离】命令或者两次按下快捷键Ctrl+B，将实例分离为图像。在这里执行两次分离的含义是：第一次分离将实例与元件进行分离，其实这次分离后，实例已经脱离和元件的联系，如果再次对元件进行修改时，刚才被分离的那个实例已经不再随元件而发生变化；第二次分离是将这个实例的组合属性进行分离，分离为轮廓和填充的图形对象。将“小狗”实例分离为图形后，改变图形填充颜色，调整后的效果如
18、下图所示。库面板用于存储和管理在FlashCS5中创建的各种元件和从外部导入的各种对象。库面板中除了包括我们自己创建的元件，还包括从外部导入的各种位图图形、声音文件和视频剪辑等。每种媒体都有与之对应的图标，所以比较轻松的就能识别出不同的库资源。4.4.14.4.1库面板介绍库面板介绍 为了更全面的了解库面板的组成部分，我们先把库面板单独显示出来。如果库面板在工作区中没有显示出来，可以通过【窗口】菜单中的【库】命令，在工作区的右侧显示库面板，然后单击库面板右上方的新建库面板按钮。为更好的查看库对象，可以将库面板拖动至场景中间。鼠标单击库面板右侧拖动条上面的库视图按钮。可以显示库面板中元件的名称、
19、AS链接、使用次数、修改日期、类型等信息。1.对象预览窗口 当在库面板中选中一个对象时，在对象预览窗口显示的是此对象的缩略图预览。如果此对象是影片剪辑或音频，则在预览窗口的右上方会出现播放和停止按钮，可以对影片剪辑或音频在预览窗口中进行播放和停止。2.分类和排序 库资源的分类和排序依据有5种，具体含义如下：1）名称：元件的名称，如果单击名称所有的元件会按照元件名开头字母的顺序进行排列，在单击一次，会按照字母顺序倒叙排列。2）类型：元件的种类,包括图形、按钮、影片剪辑、位图、声音等，如果单击类型对象会按照类型进行排序。3）使用次数：元件在影片中的使用次数。4）AS连接：元件可以被其他影片调用。5
20、）修改日期：显示为对象的最后修改日期。3.库菜单 单击库菜单按钮，会显示和库相关的各项操作命令。虽然包含的命令繁多，但各项命令在使用上还是比较简单的。4.固定当前库 单击固定当前库按钮，当前库被锁定，当在多个文档之间切换时，固定后的库面板不会随文档的改变而改变。5 5.新建库面板 单击新建库面板按钮，会弹出一个新的库面板，在多个库切换列表中可以选择不同文档的库，方便各库之间素材的复制。6.快捷按钮 快捷按钮有4个，具体如下：1）新建元件按钮：单击此按钮可快速创建新元件。2）新建文件夹按钮：创建一个管理元件的文件夹，当库中的元件较 多时，可以利用文件夹管理库中的元件。3）元件属性按钮：单击此按钮
21、会显示元件的属性等信息，可以在 “元件属性”对话框中对元件的属性进行修改。4）删除按钮：可以删除库面板中的元件或文件夹。4.4.2 4.4.2引用公共库元件引用公共库元件 在制作Flash动画的过程中，每个动画都可以引用软件自带的公共库；不仅如此，在Flash中还可以引用其他文件的库，这样在制作完成一个Flash影片时，如果在另一个影片中需要其中的某个元件，我们就不需要重新制作，只需把上个影片的库打开复制过来就可以了，这样极大的方便了不同文件之间元件的相互引用。库面板中按钮公共库如下图所示。4.4.3 4.4.3 通过库文件夹管理对象通过库文件夹管理对象 Flash提供了库文件夹，可以把元件分
22、别放入不同的库文件夹中，方便元件的查找和管理。1）当打开一个已经完成的动画作品时，我们可以看到库面板中有多个元件，为了使用方便，我们可以将这些元件分为：“演员”和“舞台背景”两大类，并创建两个库文件夹，2）两个库文件夹建立完成后，就可以将对象合理分类了。例如第一个元件“小狗”是属于演员文件夹，我们直接把它拖动到“演员”文件夹，拖动完毕后，它就会存放在“演员”文件夹中了。3）具体操作和Windows文件夹操作类似，可以按下Ctrl键不放，然后选择多个元件，把它们一起拖放至库文件夹中。用同样的方法把其余对象拖动至“舞台背景”文件夹中，此时库面板中只有两个文件夹，如左下图。4）双击文件夹可以展开，显
23、示出此文件夹下的所有对象，分别对这两个文件夹双击，查看展开后的效果，如右下图。4.5.14.5.1导入图像导入图像 在FlashCS5中，我们可以从外部导入各种位图和矢量图。图像导入到Flash文档中的方法有种：直接导入舞台、导入到库、通过剪贴板直接复制外部图像编辑软件中的图片。无论是通过哪种方式导入的图像，都会自动添加到该文档的库中。1.导入序列图像 当导入图像时，如果导入的文件名是以图像序列中的某一个数字结尾，而且该序列中的文件位于相同的文件夹中，这时FlashCS5就会自动将图像识别为图像序列，并弹出如图4-50所示对话框，提示是否导入图像序列。如果单击“是”按钮,Flash将导入该图像
24、序列的所有图片，如果单击“否”，则只导入指定图片。2通过剪贴板复制图像 除了通过【文件】菜单中的【导入】命令导入图像，也可以通过剪贴板将图像复制到Flash文档中，具体操作步骤如下：1）在画图工具或其它图像编辑软件中打开要导入的图像文件，利用自带的选择工具选取图像，右击鼠标，在弹出的快捷菜单中选择“复制”命令，复制图像。2）在FlashCS5中新建文档，在空白区域右击鼠标，在弹出的快捷菜单中选择“粘贴”命令，将图像粘贴到Flash文档中，如下图所示。4.5.24.5.2导入声音导入声音 优秀的Flash动画作品只有画面是远远不够的，最好再为其添加适当的声音。FLASH提供了强大的声音功能，使用
25、户可以从外界导入声音，并将导入的声音添加到文件中。添加后的声音可以独立播放，也可以和动画同步播放。声音文件是设计过程中必不可少的内容之一。音频文件种类繁多，但是在FlashCS5中能够直接引用的只有WAV和MP3两种音频格式的文件。WAV文件和MP3文件具体特点介绍如下：1）WAV:该格式文件直接保存对声音波形的采用数据，没过经过压缩，音质较好，因此在Windows系统中使用频率较高。由于WAV文件没有被压缩，所以体积较大，占用较大的磁盘空间，这是它的缺点。任何一个WAV文件都可以被导入到Flash文档中。2）MP3:该类型文件是大家非常熟悉的，也是在网络上最流行的音乐格式之一。MP3文件除了
26、具有类似于CD的俱佳音质外，最大的优点就是它的大小只占WAV文件的1/10,占用较少的磁盘空间。4.5.34.5.3导入视频导入视频 在FlashCS5中，除了可以导入各种类型的图像文件、声音文件，为了丰富动画内容，还可以导入视频文件。1.FlashCS5支持的视频文件格式 如果在计算机上安装了QuickTime 4以上的版本或者DirectX7以上版本，则可以导入汇总类型的视频文件，主要包括4种类型的文件：QuickTime影片文件(*.mov)、Windows视频文件（*.avi）、MPEG影片文件（*.mpge或*.mpg）、Windows Media文件（*.wmv）、Macromedia Flash视频文件（*.flv）。Macromedia Flash视频文件（*.flv）是Flash自带视频文件格式，是任何版本都能成功导入并顺利播放的视频文件类型。2.视频文件的导入 Macromedia Flash视频文件（*.flv）是Flash自带的视频文件格式，是任何版本都能成功导入并顺利播放的视频文件类型。综合实例综合实例制作制作Flash生日贺卡生日贺卡设计思想：该实例通过使用FlashCS5自带的绘图工具，绘制生日贺卡，结合本章创建元件的知识，创建图形元件和影片剪辑元件，最后完成生日贺卡制作。效果图如下：
