第六章 元件与实例.ppt

1、,第6章 元件与实例,学习要点,元件与实例的基本概念 创建和编辑元件 实例的操作 素材的使用,6.1.1知识讲解 元件和实例是Flash中最基本的概念。元件可以使编辑影片变得简单，如果想更改影片中的重复元素，只需对元件进行更改，Flash就会自动更新所有使用该元件的实例。实例是元件在舞台上的一次使用，重复使用实例不会增加动画文件的大小，这是使动画文件保持较小体积的一个很好的方法。每一个实例都有区别于其他实例的属性，这可以通过修改该实例属性面板的相关属性来实现。,6.1 元件与实例,1.元件的类型 （1）图形元件 图形元件 一般用于创建静态图像或创建可重复使用的、与主时间轴关联的动画，它有自己的

2、编辑区和时间轴。如果在场景中创建元件的实例，那么实例将受到主场景中时间轴的约束。换句话说，图形元件中的时间轴与其实例在主场景的时间轴同步。另外，在图形元件中可以使用矢量图、图像、声音和动画的元素，但不能为图形元件提供实例名称，也不能在动作脚本中引用图形元件，并且声音在图形元件中失效。,（2）按钮元件 按钮元件 可以创建用于响应鼠标单击、滑过或其它动作的交互式按钮。 可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。创建按钮元件的关键是设置4种不同状态的帧，即“弹起”、“指针经过”、“按下”和“点击”。 第一帧是弹起状态，代表指针没有经过按钮时该按钮的状态。 第二帧是指针经过状态，代表

3、指针滑过按钮时该按钮的外观。 第三帧是按下状态，代表单击按钮时该按钮的外观。 第四帧是点击状态，定义响应鼠标单击的区域。 此区域在 SWF 文件中是不可见的。,（3）影片剪辑元件 影片剪辑 元件除了可以包含静态图像外，还可以包含一些更高级的动画，它与图形元件的主要区别在于它支持ActionScript和声音。使用影片剪辑元件可用于创建独立于影片中主时间轴播放的可重复使用的动画部分。影片剪辑很像在影片中的小影片，它可以包含交互控制、声音甚至其他的影片剪辑实例，也可以在按钮元件的时间轴内放置影片剪辑实例来创建动画按钮。,2创建图形元件 执行【插入】|【新建元件】（按【Ctrl+F8】快捷键），弹出

4、“创建新元件”对话框，如图6-1所示，在“名称”选项的文本框中输入元件的名称，选中“图形”选项。,图6-1创建图形元件对话框,Flash将此元件自动添加到元件库中并自动切换为元件编辑模式。该编辑模式的主要特征为场景名称后追加了当前元件的名称，并且在舞台中心出现了一个小十字，它代表元件的中心。如图6-2所示。 使用绘图工具绘制图形，也可以导入外部素材到图形元件编辑窗口，编辑完成后，单击“返回”按钮或“场景名称”返回主场景，图形元件创建完毕。,元件名称,返回,场景名称,中心点,库文件,6-2图形元件编辑模式,3.创建影片剪辑元件 选择【插入】|【新建元件】（按【Ctrl+F8】快捷键），弹出“创建

5、新元件”对话框，如图6-3所示，在“名称”选项的文本框中输入元件的名称，选中“影片剪辑”选项。,图6-3创建影片剪辑元件对话框,Flash将此元件自动添加到元件库中并自动切换为元件编辑模式。该编辑模式的主要特征为场景名称后追加了当前元件的名称，并且在舞台中心出现了一个小十字，它代表元件的中心。 选择椭圆工具，笔触颜色设置为无，填充色设为放射状，选择第1帧，在中心点左侧绘制一个球，如图6-4所示。 选中第30帧，插入空白关键帧选择【插入】|【时间轴】|【空白关键帧】（按F7快捷键），在中心点右侧绘制一个球，如图6-5所示。,选中第1帧至第29帧的任意一帧，按右键，在弹出菜单中选择“创建补间动画”

6、，这是就完成一个运动球的补间动画，库面板中自动生成“补间1”和“补间2”的两个图形元件。 编辑完成后，单击“返回”按钮或“场景名称”返回主场景，影片剪辑元件创建完毕。,图6-4创建影片剪辑元件第1帧 图6-5创建影片剪辑元件第30帧,4.创建按钮元件 选择【插入】|【新建元件】（按Ctrl+F8快捷键），弹出“创建新元件”对话框，如图6-6所示，在“名称”选项的文本框中输入元件的名称，选中“按钮”选项。,图6-6创建按钮元件对话框,Flash将此元件自动添加到元件库中并自动切换为元件编辑模式，时间轴中将显示按钮的4各连续帧，并且分别标识为“弹起”、“指针经过”、“按下”和“点击”，第1个帧即“

7、弹起”帧是一个空白关键帧。使用绘画工具绘制一个如图6-7所示的信封。 把鼠标移动到“指针经过”帧，按F6快捷键复制第1个关键帧，然后修改信封的样式，如图6-8所示。然后依次在“按下”帧和“点击”帧按F6快捷键复制前1帧的状态。,图6-7绘制“弹起”帧 图6-8绘制“指针经过”帧,编辑完成后，单击“返回”按钮或“场景名称”返回主场景，按钮元件创建完毕。 【源文件所在位置】：光盘Chap5效果元件.fla,5.转换元件 （1）将图形转换为图形元件 选择矢量图形，如图6-9所示，选择【修改】|【转化为元件】（按【F8】快捷键），弹出“转化为元件”对话框，在“名称”选项的文本框中输入要转化元件的名称，

8、选中“图形”元件，如图6-10所示，单击“确定”按钮，矢量图形被转换为图形元件，如图6-11所示，库面板显示如图6-12所示。,图6-9绘制的图形,图6-10转化为元件对话框,图6-11转化的图形元件显示 图6-12库面板显示,设置图形元件的中心点，选择矢量图形后，选择【修改】|【转化为元件】（按【F8】快捷键），弹出“转化为元件”对话框，在对话框的“注册点”位置，可以选择9种不同的位置，图6-13所示列举几种不同注册点位置。,中心点在右上角,中心点在正中心,中心点在右下角,图6-13注册点不同位置的显示,6.实例的相关操作 （1）创建图形元件的实例 在时间轴上选择一层。 Flash CS3只

9、可以将实例放在关键帧中，并且总在当前图层上。 如果没有选择关键帧，Flash 会将实例添加到当前帧左侧的第一个关键帧上。 选择【窗口】|【库】（按【Ctrl+L】快捷键），弹出“库”面板，如图6-14所示。选中该元件，拖拽到舞台中央，如图6-15所示。,图6-13注册点不同位置的显示,图6-14 库面板 图6-15舞台中创建实例,选择【窗口】|【属性】|【属性】（按【Ctrl+F3】快捷键），弹出“属性”面板，如图6-16所示。,图6-15图形元件实例的属性面板 6-16实例播放控制,每个元件实例都各有独立于该元件的属性。“宽”和“高”选项：用于设置实例的宽度和高度。“X”和“Y”选项：用于设

10、置实例在舞台中位置。“交换”按钮：用于交换元件。 图形元件实例的播放控制：如图6-16所示 循环：按照当前实例占用的帧数来循环包含在该实例内的所有动画序列。 播放一次：从指定帧开始播放动画序列直到动画结束，然后停止。 单帧：显示动画序列的一帧。 指定要显示的帧。,（2）创建按钮元件的实例 选中“库”面板中的按钮元件“button”，将其拖拽到场景中，场景中的图形就是按钮元件“button”实例，如图6-17所示。选中该实例，属性面板如图6-18所示。 “实例名称”选项：可以在选项的文本框中为实例设置一个新的名称。 在“按钮”选项中：“当作按钮”：选择此选项，在动画运行中，当按钮元件被按下时画面

11、上的其他对象不再响应鼠标操作。“当作菜单项”：选择此选项，在动画运行中，当按钮元件被按下时其他对象还会响应鼠标操作。 按钮“属性”面板中的其他选项与图形“属性”面板中的选项作用相同，不再一一讲述。,图6-17创建按钮元件实例,图6-18按钮元件实例的属性面板,（3）创建影片剪辑元件的实例 选中“库”面板的影片剪辑元件“运动的球”，将其拖拽到场景中，场景中的运动的球就是影片剪辑元件“运动的球”的实例，如图6-19所示。 选中该实例，影片剪辑“属性”面板中的效果如图6-20所示。影片剪辑的“属性”面板，影片剪辑实例不能与图形实例对播放进行控制外，其他功能基本一致。,图6-19 创建影片剪辑元件实例

12、,图6-20 影片剪辑元件实例的属性面板,（4）转换实例的类型 可以改变一个实例类型来重新定义它在影片中的类型。例如，如果一个图形实例包含动画，而又想使主影片时间轴独立播放，这时可以它这个图形元件作为影片剪辑重新定义。选中图形元件实例，在图6-21所示属性面板中进行修改为“影片剪辑”。,图6-21改变实例的类型,（5）交换实例的元件 如果需要替换实例所引用的元件，但保留所有的原始实例属性（如色彩效果或按钮动作）。如替换图形元件实例：选中需要替换的实例元件，选择图形“属性”面板中“交换”按钮 ，弹出“交换元件”对话框，在对话框中选中按钮元件“button”，如图6-22所示，单击“确定”按钮，图

13、形元件就变换为按钮元件，但按钮实例的不透明度没有改变。,图6-22 “交换元件”对话框,（6）改变实例的颜色和透明度 每个元件实例都可以有自己的色彩效果。要设置实例的颜色和透明度选项，请使用属性检查器。 属性检查器中的设置也会影响放置在元件内的位图。 亮度：调节图像的相对亮度或暗度，度量范围是从黑 (-100%) 到白 (100%)。 若要调整亮度，请单击此三角形并拖动滑块，或者在框中输入一个值。如图6-23所示为实例亮度效果的比较。,图6-23亮度效果的对比,80%,0%,-80%,色调：用相同的色相为实例着色。要设置色调百分比（从透明 (0%) 到完全饱和 (100%)），请使用属性检查器

14、中的色调滑块。若要调整色调，请单击此三角形并拖动滑块，或者在框中输入一个值。若要选择颜色，请在各自的框中输入红、绿和蓝色的值；或者单击颜色控件，然后从“颜色选择器”中选择一种颜色。如图6-24所示在透明度为50%情况下，颜色不同的设置实例色调效果的比较。,RGB（0，204，102）,RGB（255，255，0）,RGB（0，0，153）,图6-24 色调效果的对比,Alpha：调节实例的透明度，调节范围是从透明 (0%) 到完全饱和 (100%)。 若要调整 Alpha 值，请单击此三角形并拖动滑块，或者在框中输入一个值。如图6-25所示为实例透明度效果的比较。,100%,50%,20%,图

15、6-25透明度效果的对比,高级：分别调节实例的红色、绿色、蓝色和Alpha的值。对于在位图这样的对象上创建和制作具有微妙色彩效果的动画，此选项非常有用。左侧的控件使您可以按指定的百分比降低颜色或透明度的值，右侧的控件使您可以按常数值降低或增大颜色或透明度的值。,当前的红、绿、蓝和 Alpha 的值都乘以百分比值，然后加上右列中的常数值，产生新的颜色值。 例如，如图6-26所示，如果当前的红色值是 100，若将左侧的滑块设置为 50% 并将右侧滑块设置为 100%，则会产生一个新的红色值 150 (100 x .5 + 100 = 150)。 【源文件所在位置】：光盘Chap5效果改变实例的颜色

16、和透明度.fla,图6-26“高级效果”对话框,（7）分离实例 要断开一个实例与一个元件之间的链接，并将该实例放入未组合形状和线条的集合中，可以“分离”该实例。 此功能对于实质性更改实例而不影响任何其它实例非常有用。如果在分离实例之后修改该源元件，并不会用所作的更改来更新该实例。选中实例，选择【修改】|【分离】（按【Ctrl+B】快捷键）。,图6-27分离实例,【源文件所在位置】：光盘Chap5效果分离实例.fla,技巧提示：分离实例仅仅影响这个实例而不影响这个元件的其他实例。如果在分离实例后更改了源文件，这个实例不会有任何变化。,6.2.1.知识讲解 库相当于“零件仓库”，是用来存储和管理导

17、入的文件, 包括位图图形、声音文件、视频剪辑和创建的元件存放地。在制作动画时，只需要把这些元件从库中拿出来，进行装配即可，使用库可以节省很多重复操作，而且还可以在不同文档之间进行调用。 1.认识库面板 要显示库面板，选择【窗口】|【库】（按【Ctrl+L】快捷键），库面板如图6-28所示，库面板包括有标题栏、预览窗口、文件列表栏及库文件管理工具等。,6.2 素材的使用,图6-28库面板图 图6-29下拉菜单,标题栏：标题栏显示了当前文档的文件名。在标题栏右边有个下拉菜单按钮，单击可在弹出的菜单中选择并执行相关命令。下拉菜单中包含用于管理库项目的命令，如图所示6-29所示，此外还可以进行最大化

18、、最小化 、关闭面板 等操作。 文档下拉列表：当用户打开多个Flash文档时，可以通过下拉列表在库面板中进行切换，如图6-30所示。 预览窗口：在列表栏中单击任何一个项目，在预览窗口中进行查看，如果选中的元件是多帧组成的动画，可以通过预览窗口右上角的播放按钮 和停止按钮 观看效果，如图6-31所示。,在库面板的下方有4个按钮： 新建元件按钮 ：用于创建元件。单击此按钮，弹出“创建新元件”对话框，可以创建新元件。 新建文件夹按钮 ：用于创建新文件夹。可以分门别类地建立文件夹，将相关的元件调入其中，以方便管理。 属性按钮 ：用于转换元件的类型。 删除按钮 ：用于删除“库”面板中被选中的元件或文件夹

19、。,图6-30文档下拉列表 图6-31 预览窗口,2.管理库文件 对库文件的管理主要有三个方面：重命名、使用文件夹和复制元件 （1）重命名 对库文件或文件夹重命名有四中方法： 方法一：用鼠标右击，弹出菜单中选择“重命名”，如图6-32所示。 方法二：双击要重命名的文件或文件夹名称。 方法三：选择要重命名的文件或文件夹，从库面板下拉菜单中选择“重命名”命令。 方法四：选择要重命名的文件或文件夹，然后单击库面板左下角的属性按钮，弹出“元件属性”的对话框，如图6-33所示。,执行上述操作中的任意一种，都会看到文件名称处的光标闪动，在这里输入新名称。,图6-32 选择重命名 图6-33元件属性对话框,

20、技巧提示：如果想恢复删除的文件或文件夹，可以按【Ctrl+Z】快捷键取消操作,（2）使用文件夹 使用文件夹组织和管理库面板中的文件，这个好像Windows资源管理器操作类似，能够更方便查找、调用和编辑库面板的文件。 文件夹的创建很简单，只需要单击库面板中左下角的新建文件夹按钮，在列表栏中输入文件夹的名称，如图6-34所示。 新建文件夹图标 是一个闭合的，可以展开或收缩，可以把一个文件拖拽到文件夹中，也可以把文件夹拖拽到另一个文件夹，如图6-35所示。如果新位置出现同名文件，Flash会提示您是否要替换正在移动的文件。,技巧提示：若选择连续的多个元件时，可以按下键盘上的Shift键，然后单击连续

21、的首尾元件； 若选择不连续的多个元件时，可以按下键盘上的Ctrl键，然后逐个单击需要选择的元件。,图6-34 新建文件夹 图6-35将“0123”声音文件拖入到文件夹中,（3）复制元件 在制作动画的过程中，有时候需要通过复制元件，来提高工作效率。比如制作第四届全国体育大会宣传广告制作的四个按钮，制作完“按钮1”，其它三个按钮就可以通过“复制元件”，稍加修改就可以完成，如图6-36所示，这样既避免重复劳动，又节省时间。具体操作过程见课程实例第四届全国体育大会宣传广告的任务2的第5步至第7步。,图6-36 复制元件得到元件,3.打开外部库 在制作Flash动画的过程中，若大家采用合作分工的形式，使

22、用已制作的动画中的元件，可以直接使用菜单来打开外部库。具体操作步骤： （1）新建一个文档，选择【文件】|【导入】|【打开外部库】（按【Ctrl+Shift+O】组合键），弹出“作为库打开”对话框，选择路径：光盘Chap6素材鱼游.fla，单击“打开”按钮，如图6-37所示。 （2）打开外部库面板如图6-38所示。,图6-37 作为库打开的对话框 图6-38打开外部库的面板,（3）可以把“鱼游3”影片剪辑元件拖拽到当前动画制作舞台中，如图6-39所示，这样该元件就被复制到当前文件的库中，如图6-40所示。 灵活使用其它文件的库，可以节约重新制作元件的时间，提高工作效率。,图6-39 拖拽外部库元

23、件到舞台 图6-40 当前文件库,技巧提示：外部库文件必须是Flash源文件，即扩展名为“.fla”。扩展名为“.swf”的Flash动画文件不能作为外部库文件打开。,4.导入和使用图像 在制作Flash动画的过程中，通过“导入”命令导入外部素材，这样制作Flash动画时节省大量的时间，Flash CS3可以使用在其他应用程序中的创建的插图，导入各种文件格式的矢量图形和位图。,（1）支持图像格式 Flash CS3可以支持各种文件格式的矢量图形和位图。矢量图形包括FreeHand文件、Illustrator文件、EPS文件、PDF文件及SWF文件；位图文件包括JPG、GIF、PNG、BMP、P

24、SD等或位图序列文件格式。 FreeHand文件：FreeHand文件导入到Flash中的矢量图形的最佳选择，可以保留层、文本块、库文件和页面，并且可以选择要导入的页面范围。 Illustrator文件：AI是Illustrator的默认格式，可以导入和导出Illustrator8.0或更低版本格式的文件，支持对曲线、线条样式和填充信息的非常精确的转换。 EPS文件：EPS文件是用PostScript语言描述的一种ASCII码文件格式，它既可以存储矢量图，也可以存储位图，最高可表达32为颜色深度。 SWF文件：由于Flash在创作矢量动画中，对3D动画表现不足，需要在像Swift 3D这样的三

25、维矢量动画创作软件中制作出所需的三维动画，然后将其导出成SWF文件，再导入到Flash中,JPEG格式：是一种有损压缩格式，可以应用不同的压缩比例对文件进行压缩，只有运用得当，在视觉效果上几乎看不到什么损伤。 GIF格式：是一种只支持256色的网络流行格式，GIF格式常用于具有透明区域的图形和动画。 PNG格式：能把位图文件压缩到极限以利于网络传输，能保留所有与位图品质有关的信息，很重要特性：支持透明位图，在制作Flash动画经常使用该格式。 BMP格式：在Windows平台下广泛使用的图像格式，兼容性高。缺点是文件大，不适合网络传输,技巧提示：Flash对位图图像对导入有一定限制，像PSD文

26、件、TIFF文件或TGA等文件，需要安装QuickTime软件之后，才能导入。软件见光盘：光盘Chap6素材QuickTimeInstall.zip,（2）导入图像方法 导入图像有两种方法：一是选择【文件】|【导入】|【导入到舞台】（按【Ctrl+R】快捷键），弹出如图6-41所示的对话框，选择想要的图像素材，然后单击“打开”按钮；二是选择【文件】|【导入】|【导入到库】。 导入到舞台和导入到库区别，前者不仅出现在舞台且出现库文件中，后者不出现在舞台上，需要使用时，可以通过鼠标拖拽。,操作步骤：首先选择【文件】|【导入】|【导入到舞台】，然后在弹出对话框中选择需要的素材（光盘Chap6素材图像

27、序列图片01.png），最后单击“打开”按钮。,图6-41 导入对话框,如果导入的文件名以数字结尾，并且在那个文件夹中还有按这个数字顺序排列的序列文件，这时就会有一个提示对话框出现，如图6-42所示对话框，如果单击“是”按钮，Flash将导入所有这些文件，否则，Flash只导入选定的那个文件。,图6-42 提示对话框,在Flash可以导入Adobe Illustrator AI文件，但必须取消对象的组合，并且在导入后可以对其进行编辑处理，如果没有取消组合，在打入文件中，会弹出以下对话框，如图6-43所示。,图6-43 导入Illustrator文件对话框,（3）位图的编辑 将图像导入到Flas

28、h CS3之后，有时导入的图像并不是不一定合适，需要对其进行编辑处理。 方法一：利用“套索工具” 对图像进行编辑。在第五章第三节已经讲叙。 方法二：选择【修改】|【位图】|【转换位图为矢量图】，打开“转换位图为矢量图”对话框。设置参数后单击“确定”按钮，就会将位图转换为矢量图，如图6-44所示。,图6-44 转换位图为矢量图的过程,【源文件所在位置】：光盘Chap5效果位图转化为矢量图.fla 颜色阈值：设置颜色之间的差值，范围为1-500之间的整数。阈值越小，转换的矢量图颜色越丰富。 最小区域：范围为1-1000之间的整数。值越小，转化后图像越精确，与原图像越接近。 曲线拟合：设置转换时如何

29、平滑图形轮廓线，范围从“像素”到“非常平滑”，“像素”表示不平滑。 角阈值：设置是保留锐利边缘，或进行平滑处理，范围从“较多转角”到“较少转角”。,技巧提示：如果将“阈值” 设置为50可以得到水粉画效果，如果设为150-500可以得到剪贴画和剪影的效果。,方法三：可以利用“编辑方式”命令对位图进行编辑。外部编辑的步骤是右击库面板中要编辑的位图，在弹出的菜单中选择“编辑方法”命令，打开“选择外部编辑器”对话框，如图6-45所示。在对话框中选择常用的图像处理软件Photoshop或Firework等，在图像处理软件处理保存后，Flash中位图就会发生改变。,图6-45选择外部编辑器,5.默认公用库 在制作Flash动画的