元件与实例-Flash.ppt

第五章元件与实例,元件实例库资源应用举例水中花本章小结习题五,所谓元件是指可重复使用的影片剪辑、按钮或图形。元件只需创建一次，然后即可作为库资源在整个文档或其他文档中重复使用。一、元件的类型在Flash中，元件被分为影片剪辑、按钮和图形3种类型，对它们的功能介绍如下：（1）影片剪辑：用于创建可重复使用的动画片段。该类元件拥有独立的时间轴，是主动画的一个组成部分。,第一节元件,（2）按钮：用于创建响应鼠标事件的交互式按钮，有“弹起”、“指针经过”、“按下”和“点击”4个状态帧（见图5.1.1），可以在各状态帧中创建不同的内容。（3）图形：用于存储静态的图形或图像。,图5.1.1按钮元件的4个状态帧,二、创建元件在Flash中，可以直接创建一个空白元件，然后向其中添加内容，也可以将现有对象或动画转换为元件。1直接创建元件直接创建元件的操作步骤如下：（1）选择“插入”“新建元件”命令，弹出“创建新元件”对话框，如图5.1.2所示。,图5.1.2“创建新元件”对话框,（2）在“名称”文本框中输入新建元件的名称。（3）在“类型”选项区中选择新建元件的类型。（4）单击“确定”按钮，进入元件的编辑窗口（见图5.1.3），其中的号表示元件的坐标原点位置。,（5）在其中输入文本、绘制图形或导入图像。2将现有对象转换为元件在Flash中，允许用户将工作区中的对象直接转换为元件，操作步骤如下：（1）选中要转换为元件的对象。（2）单击鼠标右键，在弹出的快捷菜单中选择“转换为元件”命令，弹出“转换为元件”对话框，如图5.1.4所示。,图5.1.4“转换为元件”对话框,（3）在“名称”文本框中输入元件的名称。（4）在“类型”选项区中选择元件的类型。（5）单击“确定”按钮完成转换。提示：如果要对转换的元件进行编辑，可以单击时间轴面板中的“编辑元件”按钮，在弹出的下拉菜单中选择该元件的名称，进入其编辑窗口即可进行编辑。,3将现有动画转换为影片元件除了可以直接创建元件和将现有对象转换为元件以外，还可以将现有动画转换为影片剪辑元件，操作步骤如下：（1）打开要转换为影片剪辑的动画，在时间轴面板中从左上向右下拖动鼠标，选中该动画的所有帧，如图5.1.5所示。（2）单击鼠标右键，在弹出的快捷菜单中选择“复制帧”命令，复制选取帧。（3）选择“插入”“新建元件”命令，弹出“创建新元件”对话框，如图5.1.2所示。,图5.1.5选中所有帧,（4）在“名称”文本框中输入要创建影片剪辑元件的名称。（5）在“类型”选项区中选中“影片剪辑”单选按钮。（6）单击“确定”按钮，进入影片剪辑元件的编辑窗口。（7）选中第1帧，单击鼠标右键，在弹出的快捷菜单中选择“粘贴帧”命令，将所复制的帧粘贴到影片剪辑元件的时间轴上即可，如图5.1.6所示。,图5.1.6粘贴帧,三、编辑元件如果用户对创建的元件不满意，可以随时对它们进行编辑，操作步骤如下：（1）选中需要编辑的元件，如图5.1.7所示。（2）单击鼠标右键，在弹出的快捷菜单中选择需要的编辑方式。1）编辑：使用该方式编辑元件，只有被选中的元件显示在编辑窗口中，如图5.1.8所示。,2）在当前位置编辑：使用该方式编辑元件，工作区中的所有对象都会显示在编辑窗口中，但只能对选中的元件进行编辑，并且其他对象的透明度会降低，如图5.1.9所示。3）在新窗口中编辑：使用该方式编辑元件，将打开一个新的工作区窗口，并且在该窗口中只显示选中的元件，如图5.1.10所示。注意：不论使用何种方式编辑元件，编辑结果都将影响元件本身及其所有实例。（3）在编辑窗口中进行编辑操作。（4）编辑完成后，单击“场景1”图标，返回到主场景。,图5.1.9使用“在当前位置编辑”方式编辑元件图5.1.10使用“在新窗口中编辑”方式编辑元件,四、重命名元件重命名元件的操作步骤如下：（1）在库面板中选中要重命名的元件，如图5.1.11所示。（2）单击鼠标右键，在弹出的快捷菜单中选择“重命名”命令，该元件的名称变为输入框，如图5.1.12所示。（3）在其中输入新的名称，然后按Enter键即可。,图5.1.11选中元件图5.1.12元件的名称变为输入框,五、复制元件在Flash中，用户可以通过库面板或元件实例来复制元件，下面分别进行介绍。1通过库面板复制元件通过库面板复制元件的操作步骤如下：（1）在库面板中选中要复制的元件。（2）单击鼠标右键，在弹出的快捷菜单中选择“直接复制”命令，弹出“直接复制元件”对话框，如图5.1.13所示。（3）在“名称”文本框中输入复制元件的名称，在“类型”选项区中选择复制元件的类型，如图5.1.14所示。,图5.1.13“直接复制元件”对话框图5.1.14设置复制元件的名称和类型,2通过元件实例复制元件通过元件实例复制元件的操作步骤如下：（1）在工作区中选中要复制元件的一个实例，如图5.1.15所示。,图5.1.15选中要复制元件的一个实例,（2）单击鼠标右键，在弹出的快捷菜单中选择“直接复制元件”命令，弹出“直接复制元件”对话框，如图5.1.16所示。,图5.1.16“直接复制元件”对话框,注意：通过元件实例复制元件，无法改变复制元件的类型。（3）在“元件名称”文本框中输入复制后元件的名称（见图5.1.17），单击“确定”按钮完成复制。,图5.1.17输入复制后元件的名称,注意：复制后，选中实例的关联元件将变成复制后的元件，如图5.1.18所示。,六、改变元件的行为方式对元件行为方式的改变只影响改变之后所创建的实例，并不影响已经存在的该元件的实例。改变元件行为方式的操作步骤如下：（1）在库面板中选中要改变行为方式的元件。（2）单击“属性”按钮，弹出“元件属性”对话框，如图5.1.19所示。（3）在“类型”选项区中选择其他行为方式。提示：如果用户对元件效果不满意，可以单击“编辑”按钮，进入其编辑窗口进行编辑，如图5.1.20所示。（4）单击“确定”按钮关闭对话框。,图5.1.19“元件属性”对话框图5.1.20编辑元件,七、删除无用元件删除无用元件的操作步骤如下：（1）单击库面板右上角的“面板菜单”按钮，在弹出的下拉菜单中选择“选择未用项目”命令，Flash8将查找到的无用元件高亮显示，如图5.1.21所示。（2）按Delete键或单击“删除”按钮，可以将无用元件删除，如图5.1.22所示。,图5.1.21高亮显示无用元件图5.1.22删除无用元件,所谓实例就是元件在动画中的具体应用，在创建了元件之后，就可以在动画中的任何地方创建它的实例了。,第二节实例,一、创建实例创建实例的操作步骤如下：（1）选中一个关键帧。（2）选择“窗口”“库”命令或按Ctrl+L键，打开库面板。（3）从库面板中拖动要创建实例的元件到工作区中（见图5.2.1），则创建了该元件的一个实例，如图5.2.2所示。,图5.2.1拖动过程中图5.2.2创建实例,二、更改实例属性用户可以改变实例的各种属性，包括实例的行为方式、亮度、色调、透明度、高级设置、大小和位置等。注意：更改某实例时，与该实例相对应的元件并不改变，其他的实例也不受任何影响。1更改实例的行为方式用户可以对实例的行为方式进行更改，操作步骤如下：（1）选中要改变行为方式的实例。（2）选择“窗口”“属性”命令，打开属性面板，如图5.2.3所示。,图5.2.3属性面板,（3）在“实例行为”下拉列表中选择一种其他方式。,2更改实例的亮度更改实例亮度的操作步骤如下：（1）选中要更改亮度的实例。（2）在属性面板的“颜色”下拉列表中选择“亮度”选项，属性面板如图5.2.4所示。,图5.2.4选择“亮度”选项时的属性面板,（3）在其后的文本框中输入亮度值，如“80%”，效果如图5.2.5所示。提示：亮度值越大，图像亮度越高。数值大于0，相对原图亮度升高，数值为100%时，实例变成纯白色；数值小于0，相对原图亮度降低，数值为-100%时，实例变成纯黑色。,3更改实例的色调更改实例色调的操作步骤如下：（1）选中要更改色调的实例。（2）在属性面板的“颜色”下拉列表中选择“色调”选项，属性面板如图5.2.6所示。,图5.2.6选择“色调”选项时的属性面板,（3）单击“色调”选项后的“颜色”按钮，打开颜色列表，从中选择需要的颜色进行更改，如图5.2.7所示。,图5.2.7更改实例的色调,提示：还可以在“色调”选项下的文本框中输入红、绿、蓝3种颜色的值，从而比较精确地获得一种颜色。4更改实例的透明度更改实例透明度的操作步骤如下：（1）选中要更改透明度的实例。（2）在属性面板的“颜色”下拉列表中选择“Alpha”选项，属性面板如图5.2.8所示。,图5.2.8选择“Alpha”选项时的属性面板,（3）在“Alpha”选项后的文本框中输入Alpha值，更改实例的透明度，如图5.2.9所示。,提示：Alpha的默认值为100%，也就是完全不透明，其取值范围为0100%，数值越小图像越透明。5更改实例的高级设置更改实例高级设置的操作步骤如下：（1）选中要进行高级设置的实例。（2）在属性面板的“颜色”下拉列表中选择“高级”选项，属性面板如图5.2.10所示。,图5.2.10选择“高级”选项时的属性面板,（3）单击“设置”按钮，弹出“高级效果”对话框，在其中调整实例的红、绿、蓝三原色和透明度，单击“确定”按钮进行更改，如图5.2.11所示。,提示：“高级效果”对话框左侧的前3个文本框用来给原图设置一个新色调，数值越大，对应的颜色就越亮；第4个文本框用来调整透明度，其作用和属性面板中的Alpha一样，数值越大，图像越不透明，反之就越透明；右侧最上面文本框的输入数值范围为-255255，默认值为0，数值越大，实例的颜色就越红，当数值为255时呈现纯红色；同理，右侧第2（3）个文本框用来调整绿色（蓝色）的深浅程度，数值越大绿色（蓝色）越深，反之越浅；右侧最后一个文本框用来校正前面的Alpha值，数值越大，图像越不透明，反之就越透明。,6更改实例的大小和位置通过属性面板可以精确调整实例的大小和位置，操作步骤如下：（1）选中要修改大小和位置的实例。（2）在属性面板中的“宽”文本框中输入实例的宽度；在“高”文本框中输入实例的高度；在“X：”文本框中输入实例的横坐标；在“Y：”文本框中输入实例的纵坐标，如图5.2.12所示。,三、设置图形实例和按钮实例的播放特性影片剪辑实例拥有自己独立的时间轴，用户可以在时间轴中设置其播放特性，而图形实例和按钮实例使用的是主影片的时间轴，为了更改它们的播放特性，Flash软件的开发者们特意在属性面板中安排了设置选项，如图5.2.13所示。,对其中的选项说明如下：（1）循环：表示动画重复播放。（2）播放一次：表示动画从头到尾只播放一次。（3）单帧：表示只显示在“第一帧”文本框中指定的那一帧。（4）当作按钮：表示当按钮实例被按下时，播放画面上的其他对象不再对鼠标操作有反应。（5）当作菜单项：表示当按钮实例被按下时，其他对象还会对鼠标操作有反应。,四、分离实例若要断开实例与元件之间的链接，使之成为未组合的形状和线条，可以对实例进行分离，操作步骤如下：（1）选中要与元件断开链接的实例。（2）选择“修改”“分离”命令分离实例，如图5.2.14所示。,提示：修改分离后的对象，不会影响到它的元件以及该元件的其他实例，而修改相应的元件，被分离的实例也不会随之更新。,五、交换实例用户可以在保持实例属性不变的情况下，将实例变为另一个元件的实例，即将实例进行交换，操作步骤如下：（1）选中要交换的实例。（2）单击属性面板的“交换”按钮，在弹出的“交换元件”对话框中选择用来交换的元件，如图5.2.15所示。,图5.2.15“交换元件”对话框,（3）单击“确定”按钮进行交换，如图5.2.16所示。,交换前交换后图5.2.16交换实例,六、命名实例在Flash中，为元件命名实例的目的在于可以用ActionScript脚本语言对其进行控制，命名实例的操作步骤如下：（1）选中要命名的实例。（2）在属性面板的“实例名称”文本框中输入实例的名称，例如“gift”，如图5.2.17所示。,图5.2.17给实例命名,通过库面板，可以查找、组织和使用Flash文档中的可用资源，为Flash动画的创作提供了方便。选择“窗口”“库”命令，打开库面板（见图5.3.1），对其中的各项说明如下：,第三节库资源,（1）“新建元件”按钮：单击该按钮创建新元件。（2）“新建文件夹”按钮：单击该按钮创建库文件夹，从而对库资源进行分类管理。（3）“属性”按钮：在库面板中选中某项库资源后，单击该按钮可弹出相应的属性对话框。（4）“删除”按钮：单击该按钮删除选中的库资源。（5）“切换排序顺序”按钮：单击该按钮改变库资源在库面板中的排列顺序。（6）“窄库视图”按钮：单击该按钮使库面板以正常模式显示，即只显示库资源的名称，如图5.3.1所示。,（7）“宽库视图”按钮：单击该按钮使库面板以加宽模式显示，以浏览库资源的名称、类型、使用次数、链接和修改日期等内容，如图5.3.2所示。,图5.3.1正常模式下的库面板图5.3.2加宽模式下的库面板,一、使用公用库资源Flash8自带了许多公用库资源，分别存放在“学习交互”、“按钮”和“类”库中，用户可以直接使用它们。选择“窗口”“公用库”命令下的子菜单命令，分别打开3种类型的公用库，如图5.3.3所示。,“学习交互”库“按钮”库“类”库图5.3.3系统自带的公用库,若要使用公用库中的资源，直接从库面板中拖动它们到工作区中即可，如图5.3.4所示。,图5.3.4使用公用库资源,二、解决库资源之间的冲突如果将一个库资源导入或复制到已经含有同名的不同资源的文档中时，将弹出“解决库冲突”对话框，用户可以选择是否用新项目替换现有项目，如图5.3.5所示。,图5.3.5“解决库冲突”对话框,如果选中“不要替换现有项目”单选按钮，Flash8将使用现有项目，而不使用正在导入或复制的新项目，因此，不会改变Flash文档中现有项目的实例。如果选中“替换现有项目”单选按钮，Flash8将使用同名的新项目替换现有项目，同时替换现有项目的所有实例。注意：用这种方法替换库项目是无法撤销的，所以在执行替换之前一定要将Flash文档进行备份。,三、库资源的更新与替换在对库资源进行更新与替换时，库资源的原始名称和属性都会被保留，但其内容会被新内容所替换。更新与替换库资源的操作步骤如下：（1）在库面板中选中要更新或替换的库资源。（2）单击“属性”按钮，弹出“元件属性”对话框，如图5.3.6所示。,图5.3.6“元件属性”对话框,（3）单击“高级”按钮，将“元件属性”对话框从基本模式转换为高级模式，以显示链接和源选项区，如图5.3.7所示。（4）单击“浏览”按钮，在弹出的“定位MacromediaFlash文档文件”对话框中选择一个包含更新或替换资源的Flash文档，如图5.3.8所示。,图5.3.7“元件属性”对话框图5.3.8“定位MacromediaFlash文档文件”对话框,（5）单击“打开”按钮，弹出“选择源元件”对话框，在其中显示了选中文件的所有资源（见图5.3.9），选择用于更新或替换的资源，单击“确定”按钮，关闭“选择源元件”对话框。（6）单击“确定”按钮，关闭“元件属性”对话框。,图5.3.9“选择源元件”对话框,四、在文档之间复制库资源用户可以通过多种方式将库资源从源文档复制到目标文档，下面介绍常见的3种。1通过复制或粘贴来复制库资源通过复制或粘贴的方式在文档之间复制库资源的操作步骤如下：（1）打开源文档和目标文档。（2）切换源文档为当前文档，选中要复制的库资源，选择“编辑”“复制”命令进行复制。（3）切换目标文档为当前文档，选择“编辑”“粘贴到当前位置”命令进行粘贴。,2通过拖动来复制库资源通过拖动方式在文档之间复制库资源的操作步骤如下：（1）打开源文档的库面板和目标文档。（2）在源文档的库面板中选中要复制的库资源。（3）将资源拖入到目标文档中。3通过在目标文档中打开外部库来复制库资源通过在目标文档中打开外部库方式在文档之间复制库资源的操作步骤如下：（1）打开目标文档。（2）选择“文件”“导入”“打开外部库”命令，弹出“作为库打开”对话框，如图5.3.10所示。,图5.3.10“作为库打开”对话框,（3）在“作为库打开”对话框中选择源文件，然后单击“打开”按钮将其打开。（4）将资源从源文档的库中拖入到目标文档中。,下面根据本章所学的知识来制作“水中花”，操作步骤如下：（1）选择“文件”“新建”命令，创建一个新的动画文件。（2）选择“修改”“文档”命令，弹出“文档属性”对话框，设置“尺寸”为“550px400px”，“背景颜色”为“#33FF99”，单击“确定”按钮。（3）选择工具箱中的矩形工具，设置笔触颜色为“无”，填充颜色为“白色”，在工作区中绘制一个矩形，如图5.4.1所示。,第四节应用举例水中花,（4）选择“文件”“导入”“导入到舞台”命令