flashCS3元件、实例和库.doc

第 6 章 Flash CS3 元件、实例、库 教学目标 通过本章的学习，掌握元件、实例、库的概念。对实例、元件有熟练使用的能力，对 库能熟练操作。掌握实例、元件、库的使用方法和技巧。 教学要求 知识要点 元件的概念 新建、转换元件 能力要求 熟练掌握各种元件特点及适用情况 熟练掌握新建、转换元件的方法 实例的概念及与元件的 了解元件与实例的关系，并熟练使用 关系 库的概念 动感按钮、隐形按钮的 操作 实例的各种属性 熟练掌握库的操作以及公用库的使用 方法 熟练掌握动感、隐形按钮的操作方法 关联知识 图形元件、影片剪辑元件、按钮元件 新建或转换图形元件、影片剪辑元 件、按钮元件 实例的属性、元件与实例的关系 编辑库，使用公用库 按钮的 4 个状态、图层的添加、元件 的嵌套 Flash CS3 动画制作案例教程 6.1 Flash CS3 元件、实例、库概述 元件在 Flash 中应用非常广泛，Flash 如果缺少了元件就相当于一部电影没有演员。实 例就像演员在影片中的应用。库是 Flash 里必不可少的。每个 Flash 文件都有一个元件库， 用于存放动画中的所有元件、图片、声音和视频等文件。 元件是动画中可以反复从库中取出在整个文档或者其他文档中使用的一个部件，它可 以是图形、按钮或一个小动画，可以独立于主动画进行播放。元件可以反复使用，因而不 必反复制作相同的动画或素材，大大提高了工作效率。另外，使用元件制作影片可以加快 影片在网络中的载入速度。Flash 的元件有图形元件、按钮元件、影片剪辑元件 3 种类型。 6.2 漂浮的小花案例 本节为漂浮的小花案例。运用图形元件和实例，制作多个在湖泊上漂浮着的五颜 六色的小花，效果如图 6.1 所示。 图 6.1 漂浮的小花效果图 6.2.1 操作步骤 (1) 打开素材文件并保存。本案例是在花变星 1和花变星 2案例的基础上制作 而成的。保存在素材文件夹的 ch06 文件夹下。 启动 Adobe Flash CS3 后，打开本案例对应的素材文件夹中的花变星案例文件。将 案例中的小花复制到新建的漂浮的小花案例的场景里。 (2) 选中复制的小花，按 F8 键，在弹出的【转换为元件】对话框中进行如图 6.2 所示 的设置。 100 第 6 章 Flash CS3 元件、实例、库 图 6.2 【转换为元件】对话框 (3) 新建一个图层命名为背景，在此图层用矩形工具画一个无边的矩形，【颜色】 面板的设置如图 6.3 所示。 图 6.3 填充设置 (4) 用渐变变形工具，调整矩形的填充位置以及填充属性，如图 6.4 所示。 (5) 使用工具箱中的任意变形工具 来调节单个花实例，效果如图 6.5 所示。 图 6.4 填充矩形 图 6.5 调整元件的形状 (6) 在舞台上复制一个单个花实例，选中复制的实例，选择【属性】面板的【颜 色】下拉列表框的【高级】选项，如图 6.6 所示。 图 6.6 【属性】面板设置 101 Flash CS3 动画制作案例教程 (7) 单击图 6.6 所示的【设置】按钮，弹出【高级效果】对话框，并进行如图 6.7 所示 的设置。 图 6.7 【属性】面板颜色设置 (8) 按照上面的方法，重复复制单个花实例，并调整图 6.7 所示【高级效果】对话 框里各项的数值。这样，湖泊上面将漂浮着很多五颜六色的小花，最终效果如图 6.1 所示。 6.2.2 本节知识点 1. 图形元件 图形元件是静态的，一般是一个静止图像，还可以是矢量图和位图。动画序列和交互 控件以及声音在图形元件里是不起任何作用的。 2. 实例 实例是元件的一个应用，要使用元件必须打开【库】面板，将元件拖曳到场景中，这 个过程就称为建立了该元件的一个实例，场景中的元件就称为一个实例。由于一个元件可 以调用多次，且调用一次就产生一个实例，因此一个元件可以产生多个实例。 3. 转换元件 在 Flash 中，用户可以将舞台上的一个或者多个元素转换为元件使用，或者将某个元 件转换为其他类型的元件使用。 要将舞台中的元素转换为元件，可以先选中该元素，然后执行【修改】|【转换为元件】 命令，将弹出【转换为元件】对话框，如图 6.8 所示，选择转换的类型，在【名称】文本 框中输入元件名，单击【确定】按钮即可。 图 6.8 【转换为元件】对话框 如果要转换库里的元件，可以右击要转换的元件，在出现的快捷菜单中选择【类型】 102 第 6 章 Flash CS3 元件、实例、库 命令，然后在其子菜单中选择所需元件类型即可。 4. 元件与实例的关系 1) 元件与元素 用矩形工具在舞台上创建一个矩形，然后创建一个矩形元件，将其拖到舞台上，比较 两者的【属性】面板，图 6.9 为元素【属性】面板，图 6.10 为元件【属性】面板。 图 6.9 元素的【属性】面板 图 6.10 元件的【属性】面板 从上面两个【属性】面板中可以看出元素比元件的属性丰富得多。 2) 元件与实例 创建元件后，可以在文档中重复使用它的实例。还可以修改单个实例的以下实例属性， 而不会影响其他实例或原始元件：颜色、缩放比例、旋转、Alpha 透明度、亮度、色调、 高度、宽度和位置。 更新一个元件，影片中该元件的所有实例都将得到更新，更新实例，则实例所应用的 元件以及其他实例不会更新。 6.3 按钮制作案例 本节为按钮制作案例，通过此案例掌握按钮的制作方法，效果如图 6.11 所示。 图 6.11 按钮制作效果图 103 Flash CS3 动画制作案例教程 6.3.1 操作步骤 (1) 新建一个文档，大小为 550400 像素，背景颜色为#FFFFCC，帧频为 12fps。 (2) 执行【文件】|【导入】|【导入到舞台】命令，选择需要导入的指针经过的声音。 (3) 执行【插入】|【新建元件】命令，新建一个名称为弹起的图形元件，如图 6.12 所示。 图 6.12 新建弹起图形元件 (4) 在弹起元件图层 1 的第 1 帧上，配合 Shift 键绘制一正圆，笔触高度为 3，实 线，笔触颜色为#0066CC。 (5) 再用椭圆工具绘制一正圆。打开混色器面板，选择类型为线性；填充颜色左滑块： #19568D ，右滑块：#8FD3E6。笔触颜色为无，效果如图 6.13 所示。 (6) 在刚绘制的图形旁边，绘制一椭圆，混色器面板中设置线性填充，左滑块为 #FFFFFF，右滑块为#8FD3E6，笔触颜色为无。再用选择工具将圆拉成半圆，然后将其选 中并移动到图形的上方。 (7) 用文本工具输入静态文本ENTER，效果如图 6.14 所示。 图 6.13 弹起图形元件的底图 图 6.14 弹起图形元件效果 (8) 同步骤(3)，新建一个按下和指针经过的图形元件。根据自己的喜欢分别 在按下和指针经过中绘制相应的图形。本案例中两个图形元件如图 6.15 所示。 图 6.15 按下和指针经过图形元件的效果 104 第 6 章 Flash CS3 元件、实例、库 (9) 同步骤(3)，新建一个名为按钮的按钮元件，如图 6.16 所示。 图 6.16 新建按钮元件 (10) 按钮元件的时间轴如图 6.17 所示。 图 6.17 按钮元件的时间轴效果 (11) 执行【窗口】|【库】命令，或按快捷键 Ctrl+L，打开【库】面板，如图 6.18 所示。 图 6.18 【库】面板 (12) 选中弹起帧，从库中将弹起图形元件拖入舞台中。 (13) 执行【窗口】|【对齐】命令，打开【对齐】面板，单击【相对于舞台】命令，【水 平平均间隔】和【垂直平均间隔】按钮。 (14) 选中按钮按钮元件的经过帧，右击，执行【插入空白关键帧】命令。从库中 将指针经过图形元件拖入舞台中。同步骤(13)，将元件置于舞台中央。 (15) 重复步骤(14)，将按下图形拖入按钮按钮元件的按下帧，并置于舞 台中央。 105 Flash CS3 动画制作案例教程 (16) 选中指针经过帧，在【属性】面板的【声音】下拉列表框中选择【鼠标划过】 选项，如图 6.19 所示。 (17) 在舞台上单击【场景 1】按钮，回到场景中，将按钮元件拖进第 1 帧，如 图 6.20 所示。 图 6.19 指针经过帧的【属性】面板 (18) 保存并测试影片。 6.3.2 本节知识点 1. 创建元件 图 6.20 回场景按钮 要创建元件，可以执行【插入】|【新建元件】命令，在【创建新元件】对话框的【名 称】文本框输入元件名，在【类型】单选按钮组里选择元件类型，如图 6.21 所示，这样， 一个元件就创建好了。 图 6.21 【创建新元件】对话框 2. 按钮元件 按钮元件是 Flash 的基本元件之一，它具有【弹起】、【指针经过】、【按下】、【点击】4 种状态，并且能够响应鼠标事件。执行指定的动作是实现动画交互效果的灵魂。 外观上，按钮可以是任何形式的。比如，可以是一幅位图，也可以是矢量图，可以是 矩形，也可以是多边形，可以是一根线条，也可以是一个线框，甚至还可以是看不见的透 明按钮。 按钮实际上是 4 帧的交互影片剪辑。当为元件选择按钮行为时，Flash 会创建一个包含 4 帧的时间轴。前 3 帧显示按钮的 3 种可能状态；第 4 帧定义按钮的活动区域。时间轴实 际上并不播放，它只是对指针运动和动作做出反应，跳转到相应的帧。 要制作一个交互式按钮，可把该按钮元件的一个实例放在舞台上，然后给该实例指定 动作。必须将动作分配给文档中按钮的实例，而不是分配给按钮时间轴中的帧。 默认情况下，Flash 在创建按钮时会将它们保持在禁用状态，可以很容易地选择和处理 这些按钮。当按钮处于禁用状态时，单击该按钮就可以选择它。 当按钮处于启用状态时，它会响应已指定的鼠标事件，就如同 SWF 文件正在播放时仍 106 第 6 章 Flash CS3 元件、实例、库 然可以选择已启用的按钮一样。可在工作时禁用按钮，然后启用按钮以便快速测试其行为。 3. 库 Flash 为每个 Flash 文件提供了一个元件库，用于放置动画中的所有位图、元件、声音 和视频等文件，实现资源管理的便利工具，【库】面板是使用频度最高的面板之一，库可以 将里面的资源分类存放在不同的文件夹中。库里有一个比较重要的库是公用库。 打开库的方式是执行【窗口】|【库】命令或按快捷键 Ctrl+L。 4. 认识 库】面板 【库】面板如图 6.22 所示，【库】面板中的列表主要用于显示库中所有项目的名称，用 户可以通过其查看并组织这些文档中的元素。【库】面板中项目名称旁边的图标表示该项目 的文件类型。 图 6.22 【库】面板 如果库中项目比较多，可以将其分类，在库建立文件夹进行分类。 另外，【库】面板里显示项目的几种标注信息，分别是名称、类型、使用次数、链接、 修改日期 5 种。【库】面板的大小可以通过右边的 【窄库视窗】和 【宽库视窗】按钮 来改变窄、宽。 图 6.22 左下角的 4 个按钮分别表示【新建元件】、【新建文件夹】、【属性】、【删除】 命令。 5. 编辑库项目 在【库】面板中，可以使用选项菜单中命令对库中的项目进行编辑，然后进入元件的 编辑模式进行编辑。要对元件进行操作比如复制、剪切、删除等，可以右击元件，在快捷 菜单中进行操作。还可以利用【库】面板左下角的命令进行。 在制作 Flash 时，库项目可以在一个或者多个库之间进行操作，可以打开任意文档的 库，并能够将该文档的库项目应用(复制)到打开的任何文档中，如图 6.23 所示，在【库】 面板的左上角有个下拉菜单。这里显示打开的所有文档，如果要从不同的库进行复制时， 可以从这个菜单进行切换。当然也可以直接复制库项目。 在进行比较复杂的 Flash 动画制作的时候，随着制作的进展，库项目将变得越来越多， 107 Flash CS3 动画制作案例教程 可能有很多个被放弃不用的项目，会占有源文件空间，这时候可以从选项菜单里选择【未 用库项目】命令。Flash 会把这些未用的库项目选中，可以将它们删除。 图 6.23 【库】面板操作 6. 使用公用库 Flash 自带公用库，执行【窗口】|【公用库】命令，然后从其子 菜单中选择所需的库即可，如图 6.24 所示。这里提供了【学习交互】、 【按钮】、【类】3 个类型，这些库里的元件可以直接拖放到场景里进 行应用。其编辑和操作方法与自己制作的元件一样。公用库大大提 高了工作效率。 图 6.24 公用库子菜单 公用库可以扩充，扩充方法是，在 Flash 的安装文件目录下，有一个叫Libraries的 文件夹，它的位置如下：X:AdobeAdobe Flash CS3zh_cnConfigurationLibraries， Libraries 是 Flash 的公用库(X 是安装盘符)。将创建或者复制的.fla 文件放置到上述目录的 Libraries 里，那么.fla 文件的库就可以成为公用库中的一个类型。 6.4 舞案例 本节为舞案例。运用形状补间动画、影片 剪辑，制作多个舞者跳舞的动画，效果如图 6.25 所 示。 6.4.1 操作步骤 (1) 新建一个文档，大小为 550400 像素。 (2) 执行【插入】|【新建元件】命令，新建一 个名为舞蹈者的影片剪辑，如图 6.26 所示。 图 6.25 舞效果图 108 第 6 章 Flash CS3 元件、实例、库 图 6.26 新建舞蹈者影片剪辑 (3) 在舞蹈者影片剪辑中，用形状补间做小人跳舞的动画。时间轴如图 6.27 所示， 各个关键帧的形状如图 6.28 所示。 图 6.27 舞蹈者影片剪辑时间轴 (a) 第 1 帧 (b) 第 10 帧 (c) 第 20 帧 (d) 第 30 帧 (e) 第 40 帧 (f) 第 50 帧 图 6.28 舞蹈者影片剪辑各关键帧 提示：在做形状补间时，做一段动画测试一下，如不是想象的， 可以添加形状提示点或调整形状提示的位置，一段舞蹈 效果做好后，再做下一段。 (4) 回到场景 1 中，将元件拖入场景 1，并复制多个实例， 调制其【色调】属性，如图 6.29 所示。 (5) 将图层改名为舞蹈，并新建一层命名为背景， 图 6.29 实例的【色调】属性 109 Flash CS3 动画制作案例教程 将背景图片导入至舞台，调整大小，并将该层拖至舞蹈层下方，如图 6.30 所示。 (6) 测试后保存发布影片。 图 6.30 时间轴效果 6.4.2 本节知识点 1. 影片剪辑元件 影片剪辑元件是能力较强、适应性较广的元件，它的能力涵盖了按钮元件和图形元件。 也就是说，凡是用按钮元件和图形元件可以实现的，都可以用影片剪辑元件来实现。 在时间轴方面，影片剪辑元件的时间轴是完全独立的，不受制于场景中的时间轴(即主 时间轴)。 2. 3 种元件的特点、特性及适用情况 3 种元件在 Flash 中各有各的用处，它们的能力范围不同，也并不是完全独立的，而且 有些是重叠的。有时既可以用这种元件来实现，也可以用那种元件来实现；有时却只有一 种元件可以胜任。 3 种元件有一些共同的特点：它们都有自己的时间轴，正是因为这些私有的时间 轴的存在，才使得在元件内部创建动画成为可能。同样，它们也都有层和舞台。 此外，3 种元件都具有多级嵌套能力。换句话说，可以把一个按钮元件放置到一个影 片剪辑元件中，然后再把这个影片剪辑元件放置到一个图形元件中。 6.5 炫彩按钮案例 本节为炫彩按钮案例。运用形状补间动画、影片剪辑，制作一个富有动感的按钮， 效果见源文件。 6.5.1 操作步骤 (1) 新建一个名为炫彩按钮的按钮元件。 (2) 进入按钮编辑状态，将图层 1 改名为边框，在弹起帧，用工具栏的基本矩 形工具，如图 6.31 所示，在舞台上绘制一个矩形。 (3) 基本矩形的【属性】面板设置如图 6.32 所示，【矩形边角半径】下拉列表框是用来 调整圆角矩形的曲率的。 110 第 6 章 Flash CS3 元件、实例、库 图 6.31 基本矩形工具 图 6.32 基本矩形的属性面板 (4) 选中圆角矩形，复制，再按组合键 Ctrl+Shift+V 粘贴； 打开【变形】面板，修改属性如图 6.33 所示。 (5) 将变形后的小圆角矩形复制。 (6) 新建一个名为颜色变换的影片剪辑，将复制的小圆 角矩形粘贴。打开【颜色】面板，将笔触色设置为无，填充色类 型为线性。分别取色#000000、#FFFF00。 在第 5 帧插入关键帧，取色分别为#000000、#66FFFF。 在第 10 帧插入关键帧，取色分别为#000000、#66FF99。 在第 15 帧插入关键帧，取色分别为#000000、#FFFF00。 (7) 选择图层中所有帧，补间类型为形状。 图 6.33 【变形】面板 (8) 进入炫彩按钮按钮编辑状态，插入图层，并改名为颜色，在弹起帧， 将颜色变换影片剪辑拖入舞台，并调整好位置。 (9) 再插入一新图层，改名为白条，在弹起帧，用笔触大小为 5，颜色为白色 的线条工具，绘制一直线，如图 6.34 所示。 (10) 插入一新图层，改为文字，在指针经过帧插入关键帧，用文本工具在按 钮上输入炫彩按钮。在按下帧插入关键帧，将炫彩按钮这几个字改变一下颜色， 效果如图 6.35 所示。 图 6.34 白条的位置 (11) 按钮元件的时间轴如图 6.36 所示。 图 6.35 加文字的效果 图 6.36 按钮元件的时间轴 111 Flash CS3 动画制作案例教程 (12) 将按钮拖入主场景的舞台中，测试并保存。 6.5.2 本节知识点 1. 创建动感按钮 按钮元件主要用来创建按钮。尽管按钮元件也有自己的时间轴，但只有时间轴中那些 已经被命名的帧的(弹起、指针经过、按下、点击)才是有意义的。实际中常需 要配合新的图层来创建动态按钮。 2. 实现动感效果 由于按钮元件时间轴的局限，无法在按钮元件中创建补间动画，所以，可以通过在按 钮元件中嵌入影片剪辑元件来间接地实现补间动画，从而让按钮有动感效果。 6.6 隐形按钮案例 本节为隐形按钮案例，介绍隐形按钮的制作，了解按钮元件的 4 帧状态，效果见 源文件。 6.6.1 操作步骤 (1) 新建一个文档，大小为 800600 像素，背景色为白色，帧频 12fps。执行【文件】 |【保存】命令，命名为隐形按钮。 (2) 选择图层 1 命名为背景图片。执行【文件】|【导入】|【导入到舞台】命令，弹 出【导入】对话框,在素材文件夹中选择瓜果.jpg。 (3) 执行【窗口】|【对齐】命令，依次单击【相对于舞台】、【水平中齐】、【垂直中齐】 按钮，将图片置于舞台中央。锁定背景图片图层。 (4) 新建图层 2，命名为按钮。 (5) 执行【插入】|【新建元件】命令，插入一个按钮元件，命名为蘑菇。进入蘑 菇按钮元件的编辑模式下，用文本工具在舞台上输入蘑 菇，【属性】面板设置字体为黑体，字体大小 50，文本 填充颜色#990000。选择指针经过帧，插入关键帧。 (6) 返回场景 1，从库中将蘑菇按钮拖到舞台， 如图 6.37 所示。 (7) 双击蘑菇按钮，再次进入蘑菇按钮的编 辑状态，效果如图 6.38 所示。在弹起帧中选中文字， 按 Delete 键删除。 图 6.37 将【蘑菇】按钮拖到舞台 (8) 选择按下帧，右击，执行【插入关键帧】命令。单击文字蘑菇，在【属性】 面板中，设置文本填充颜色：#99CC00。 112 第 6 章 Flash CS3 元件、实例、库 (9) 选择点击帧，右击，执行【插入空白关键帧】命令。利用绘图工具把蘑菇的 轮廓描下来，再填色，如图 6.39 所示。 图 6.38 在舞台中双击按钮的效果 (10) 重复步骤(5)(9)，制作剩余的几个按钮。 图 6.39 描完蘑菇的效果 (11) 回到场景 1，隐藏按钮效果完成，测试并保存。 6.6.2 本节知识点 按钮元件的 4 个状态。 按钮时间轴上的每一帧都有一个特定的功能。 第 1 帧是弹起状态，代表指针没有经过按钮时该按钮的状态。 第 2 帧是指针经过状态，代表当指针滑过按钮时该按钮的外观。 第 3 帧是按下状态，代表单击按钮时该按钮的外观。 第 4 帧是单击状态，定义响应鼠标单击的区域。此区域在 SWF 文件中是不可见的。 6.7 本 章 小 结 本章主要介绍了元件、实例以及库的概念。通过漂浮的小花、按钮制作、舞、炫 彩按钮、隐形按钮5 个案例介绍了 Flash 中实例、元件、库的应用以及制作技巧。通过本 章的学习，读者可以在 Flash 中熟练地使用元件与实例了，这样能大大提高制作效率。 6.8 习 题 1. 填空题 (1) 常见的元件类型有 (2) 、 和 。 本身也是一段动画，拥有自己的时间轴，可以看作是主时间轴的嵌套 时间轴，可以独立播放。 113 Flash CS3 动画制作案例教程 (3) (4) 是静态的，一般是一个静止图像，可以是