1
Flash动画设计项目教程
1.6 项目四 元件、实例与库

项目四 元件、实例与库

项目引入

元件、实例与库是Flash动画的三大元素,其中元件是构成动画的基本元素。元件是Flash中一种比较独特的、可重复使用的对象。将元件放入工作区并应用于动画的制作过程称为实例。库就是【库】面板,它是Flash软件中用于存放元件及其他各种动画元素的场所。

在Flash中,元件分为影片剪辑元件、图形元件和按钮元件三种形态。影片剪辑元件可以理解为电影中的小电影,可以完全独立于主场景时间轴并且可以重复播放。按钮元件是一个只有四帧的影片剪辑,它的时间轴不能播放,只能根据鼠标动作做出简单的响应,并转到相应的帧。通过舞台上的按钮,在实例中添加动作语句而实现Flash动画强大的交互性。图形元件是可以重复使用的静态图像,或者连接到主场景时间轴上的可重复播放的动画片段。图形元件与影片剪辑元件的时间轴同步运行。

任务一 了解元件、实例与库

1. 元件的概念

元件是指在动画的操作过程中,以重复使用为目的创建的对象。就好比,只要有模具就可以随时制作模型,Flash只用元件来注册对象,这样就不必每次都重新创建同样的新元件,而继续使用创建过一次的元件即可。由此可见,元件不仅可以使动画操作更加轻松便利,而且在元件个数过多的情况下,也可以不受文件大小的影响而随意使用多个元件。

元件是构成Flash动画的基本元素,用户可以根据动画的具体应用直接创建不同的元件类型。在Flash软件中,元件分为影片剪辑(Movie clip)元件、按钮(Button)元件和图形(Graphic)元件三种,且它们都有各自的特性与作用。

1) 影片剪辑元件

影片剪辑元件是一种万能的元件,它拥有自己独立的时间轴。在场景的舞台中,影片剪辑元件的播放不会受到主场景时间轴的影响,并且在Flash中还可以设置影片剪辑元件的ActionScript动作脚本。

2) 按钮元件

按钮元件是一种特殊的元件,在动画中使用按钮元件可以实现动画与用户的交互。当创建一种按钮元件时,Flash会创建一个拥有四帧的时间轴,分别为弹起、指针经过、按下和点击,如图4-1所示,前三帧显示鼠标弹起、指针经过、按下时的三种状态,第四帧用于定义按钮的活动区域。实际上它在时间轴上并不播放,它只是对指针运动和动作做出反应,跳到相应的帧。

图4-1 按钮元件的【时间轴】面板

3) 图形元件

图形元件是一种基本的动画元件,一般作为动画制作中的最小管理元素,同时也具有时间轴。但是,图形元件的播放会受到主场景的影响,且不能对图形元件进行ActionScript动作脚本的设置。

2. 元件、库及实例的关系

元件、库及实例之间具有非常密切的关系。创建元件以后,元件会自动保存到库中。库就像保管书籍的图书馆一样,是一个保管元件的场所。

实例的创建依赖于元件,实例其实就是“实例化的元件”,将元件从库中拖动到舞台中就创建了该元件的一个实例。一个元件可以创建多个实例,并且创建的实例继承了元件的类型。但是,此实例的类型并不是一成不变的,可以通过【属性】面板对舞台中实例的类型、颜色、大小等进行编辑操作。不过值得注意的是,如果要对舞台中的实例进行调整,那么仅影响当前实例是不会对元件产生任何影响的;而如果对【库】面板中的元件进行相应调整,那么舞台中所有该元件的实例都会相应地进行更新。图4-2所示就是【库】面板中的一个影片剪辑类型的元件拖动到舞台上生成的四个实例,并且对实例设置了不同属性后的效果。

图4-2 元件、库及实例的应用

3. 库的管理

1) 【库】面板

选择菜单栏中的【窗口】|【库】命令,或者按【Ctrl+L】键,或者按【F11】键,都可以展开【库】面板,这是用于存放各种动画元素的场所。当需要某个元素时,可以从【库】面板中直接调用,也可以对【库】面板中的各动画元素进行删除、排列、重命名等操作,其结构如图4-3所示。默认情况下,新建Flash文档的【库】面板中没有任何对象。

图4-3 【库】面板

【库】面板中各参数说明如下。

右键菜单:单击该按钮,可以弹出一个用于各项操作的右键菜单。

打开的文档:单击该处,可以弹出一个用于显示当前打开的文档名称的下拉列表,通过选择以快速查看选择文档的【库】面板,从而实现通过一个【库】面板查看多个库的项目。

固定当前库:单击该按钮后,原来的显示为,从而固定当前【库】面板,这样在文件切换时都会显示固定的库内容,而不会更新切换文件的【库】面板内容。

新建【库】面板:单击该按钮,创建一个与当前文档相同的【库】面板。

预览窗口:用于预览显示当前的【库】面板中选择的元素,当选择元件为影片剪辑元件或声音时,在右上角处出现按钮,通过它可以在该窗口中控制影片剪辑元件或声音的播放或停止。

搜索:通过在此处输入搜索的关键字进行元件名称的搜索,从而快速查找元件。

属性显示:【库】面板的对象共有5种属性,即名称、链接、使用次数、修改日期和类型,单击上方的不同属性显示后,可以进行相关的排列,而单击【切换排列顺序】按钮,可以进行不同的属性显示的倒转顺序排列。

新建元件:单击该按钮,可弹出【创建新元件】对话框,从而创建一个元件。

新建文件夹:单击该按钮,可以创建一个元件文件夹,并且名称以未命名文件夹1、未命名文件夹2……依次排列命名。

属性:选择【库】面板中的某个对象后,单击该按钮,可弹出用于修改相关属性的对话框。根据选择对象的不同,弹出的对话框也不同,如果选择的为元件,则弹出【元件属性】对话框;如果选择为位图,则弹出【位图属性】对话框等。

删除:单击该按钮,可以删除【库】面板中当前选择的对象。

2) 导入素材到库

导入素材到库的操作方法如下。

(1) 选择【文件】|【导入】|【导入到库】命令,弹出【导入到库】对话框。

(2) 选择素材所在位置,然后从中选择需要的素材,单击【打开】按钮。

(3) 将选中的素材导入当前制作动画的【库】面板中。

3) 导入图形到库

选择【文件】|【导入】|【导入到库】命令,在弹出的【导入到库】对话框中选择需要导入的文件,为方便浏览,可以选用缩略图的形式,如图4-4所示。

图4-4 【导入到库】对话框

注意:如果输入的文件名称以数字结尾,则表示该文件为一个序列的文件之一。这时,会弹出一个提示框,询问是否将相同序列的文件全部导入,如图4-5所示。单击【是】按钮,则将全部导入该序列文件。

图4-5 导入图像序列

导入文件只是获得位图的一种方式,也可以在其他程序中直接复制位图到Flash中。主要步骤如下。

(1) 在其他程序中复制图片,将图形复制到剪贴板中。

(2) 在Flash中选择【编辑】|【粘贴】命令。

(3) 如果作为对象粘贴,则可选择【编辑】|【选择性粘贴】命令,在弹出的对象属性选择框中选择想要的粘贴方式。

4) 导入音频到库

导入音频到库的具体操作步骤如下。

(1) 选择【文件】|【导入】|【导入到库】命令。

(2) 在弹出的【导入到库】对话框中选择需要导入的音频文件。

(3) 导入完成后,库中将显示“喇叭”图标,预览区显示为声波,如图4-6所示。

图4-6 导入声音

5) 公用库

为了方便调用元件,避免重复工作,提高工作效率,在Flash中附带了很多元件,并都保存在公用库中。选择菜单栏中的【窗口】|【公用库】命令,弹出【声音】、【按钮】、【类】子菜单,可选择打开相应公共【库】面板,如图4-7所示。

图4-7 公共【库】面板

4. 创建与编辑实例

1) 创建实例

创建实例的具体操作步骤如下。

(1) 在时间轴面板中选择任意图层中的一个空白关键帧。

(2) 单击菜单栏中的【窗口】|【库】命令,或者按【Ctrl+L】键,打开【库】面板,在此面板中显示了所有的元件。

(3) 在【库】面板中选择需要的元件并拖动到舞台中,即可创建此元件的实例。

2) 编辑实例

在Flash CS5中,舞台中实例的编辑方式有三种,即在当前位置编辑元件、在新窗口中编辑元件和在元件编辑模式下编辑元件。无论使用哪种方式编辑完成后,通过单击【时间轴】面板的按钮,或者单击左侧的按钮,都可以将当前编辑窗口切换到场景编辑窗口中。

(1) 在当前位置编辑元件:选中一个元件的实例,选择【编辑】|【在当前位置编辑】命令,或者单击鼠标右键,在弹出的快捷菜单中选择【在当前位置编辑】命令,或者直接双击鼠标。

(2) 在新窗口中编辑元件:在工作区选中一个元件实例后,单击鼠标右键,从弹出的快捷菜单中选择【在新窗口中编辑】命令,选中的元件在新的独立窗口中出现。

(3) 在元件编辑模式下编辑元件:选中一个元件实例,然后单击鼠标右键,从弹出的快捷菜单中选择【编辑】命令,或者选择菜单中的【编辑】|【编辑元件】或【编辑所选项目】命令。

任务二 绘 制 星 空

知识准备

图形元件可用于静态图像中,并可用于创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。与影片剪辑元件和按钮元件不同,用户不能为图形元件提供实例名称,也不能在动作脚本中引用图形元件。

1. 创建图形元件

在制作Flash动画时,对使用一次以上的对象,要尽量将其转换为元件再使用,重复使用元件不会增加文件的大小,这是优化对象中的一种很好的方法。创建元件的方法有三种,一种是创建新元件,一种是转换为元件,还有一种是直接复制元件。

1) 创建新元件

创建新元件的具体操作步骤如下。

(1) 选择菜单栏中的【插入】|【新建元件】命令,弹出【创建新元件】对话框;或者单击【库】面板中的按钮,在弹出的菜单中选择【新建元件】命令;或者单击【库】面板最左下角的按钮,也可以打开【创建新元件】对话框,如图4-8所示。

图4-8 【创建新元件】对话框

(2) 输入元件的名称,选择元件的类型,单击【确定】按钮后,即可新建一个元件。

(3) 使用绘图工具绘图或导入媒体等在舞台上建立元件的内容。

(4) 当创建完元件后,单击舞台上方的“场景1”,返回到场景编辑状态,如图4-9所示。

图4-9 舞台中的场景与元件

2) 转换为元件

把工作区中的现有元素转换成元件,具体操作步骤如下。

(1) 选中工作区中的某个元素。

(2) 选择菜单栏中的【修改】|【转换成元件】命令,这时弹出【转换为元件】对话框,输入元件的名称并选择元件类型,如图4-10所示。

图4-10 【转换为元件】对话框

(3) 选择菜单栏中的【窗口】|【库】命令,打开【库】面板,即可看到刚才建立的新元件。

3) 直接复制元件

制作动画时,有时需要制作类似的元件,这时只需要复制一个稍作修改即可,具体操作步骤如下。

(1) 在【库】面板中选择一个元件。

(2) 单击【库】面板中的按钮,从弹出的菜单中选择【直接复制】命令,这时会弹出【直接复制元件】对话框,如图4-11所示。

图4-11 【直接复制元件】对话框

(3) 输入新元件的名称并选择所复制元件的类型。

(4) 确定后库窗口会增加一个与被复制元件一样的新元件,只需在元件编辑模式下对它进行一定的修改就可以成为一个新元件了。

2. 设置图形元件实例属性

在舞台中选择了图形实例后,此时的【属性】面板中将显示图形实例的相关属性设置,如图4-12所示。

图形实例的【属性】面板中的各参数说明如下。

(1) 实例类型图标:以图标的形式显示当前选择实例的元件类型。

图4-12 图形实例的【属性】面板

(2) 实例行为:用于重新设置实例的类型,单击按钮,在弹出的下拉列表中选择其他的实例类型即可进行转换,如图4-13所示。转换类型后的实例仅影响当前选择的实例,对舞台中的其他实例及【库】面板中的元件不产生任何影响,并且在转换类型后,在【属性】面板的实例类型图标处也会发生相应变化。

图4-13 弹出的下拉菜单

(3) 元件名称:用于显示当前选择实例所使用的元件名称。

(4) 交换元件:单击按钮,在弹出的【交换元件】对话框中选择相关的元件,可以将选择的元件替换为舞台当前选择的实例,在该对话框中当前选择实例的前面会显示一个黑色小圆形,如图4-14所示;而单击下方的【直接复制元件】按钮,在弹出的【直接复制元件】对话框中又可以进行当前选择元件的直接复制。

(5) “位置和大小”选项:用于设置选择实例的位置与大小,单击其左侧的小图标,可以将其展开,如图4-15所示。

(6) “色彩效果”选项:在该选项中可以对选择实例进行颜色和透明度等属性设置,单击“色彩效果”选项中“样式”右侧的按钮,即可弹出如图4-16所示的“色彩效果”选项。

图4-14 【交换元件】对话框

图4-15 “位置和大小”选项

图4-16 “色彩效果”选项

(7) “循环”选项:用于设置选择实例的播放状态,如图4-17所示。该选项中的参数说明如下。

图4-17 “循环”选项

①选项:单击“选项”右侧的按钮,可以弹出一个下拉列表,包括“循环”、“播放一次”和“单帧”三项。

②第一帧:用于设置图形实例的起始播放帧,如设置为5,则此图形实例中的动画从第五帧开始播放。

任务实施

任务目标:使用图形元件制作如图4-18所示的星空画面效果。

图4-18 星空画面的效果图

具体操作步骤如下。

(1) 新建文件,在【属性】面板中单击【属性】旁边的【编辑】按钮打开【文档设置】对话框。在该对话框中设置文档属性,宽度设置为“500像素”、高度设置为“350像素”,背景颜色设置为“白色”,如图4-19所示。

图4-19 【文档设置】对话框

(2) 在工具栏中选择矩形工具绘制矩形,并将描边颜色设置为无、填充颜色设置为线性渐变,第一个色标设置为(#000000)、第二个色标设置为(#0033FF),如图4-20所示。

(3) 使用渐变变形工具调整填充角度,如图4-21所示。

图4-20 设置颜色面板1

图4-21 矩形填充效果

(4) 新建图层,使用刷子工具绘制泥土,填充为线性渐变,第一个色标设置为(#FFFFFF)、第二个色标设置为(# 0033FF),如图4-22、图4-23所示。

图4-22 使用刷子工具绘制的效果图

图4-23 设置颜色面板2

(5) 选择【插入】|【新建元件】命令,创建“叶片”图形元件,使用钢笔工具和填充工具绘制单个叶片,如图4-24所示。

(6) 新建图层,从库中拖动叶片元件到舞台,使用变形工具修改舞台上的实例形状、大小,并在【属性】面板中调整色彩效果,如图4-25、图4-26所示。

(7) 全选多个实例对象,按【Ctrl+G】键组合成一个组,单击鼠标右键,在弹出的快捷菜单中选择【转换为元件】命令,如图4-27所示。

图4-24 绘制叶片元件

图4-26 多个实例的效果图

图4-27 在快捷菜单中选择【转换为元件】命令

(8) 在打开的【转换为元件】对话框中,设置元件的名称为“叶丛”、类型为“图形”元件,如图4-28所示。

(9) 从【库】面板中拖动“叶丛”元件到舞台,效果如图4-29所示。

(10) 在时间轴的【层】面板中调整“叶丛”图层和“泥土”图层的顺序,效果如图4-30所示。

图4-28 【转换为元件】对话框

(11) 新建图层,绘制月亮,效果如图4-31所示。

图4-29 将元件复制到舞台

图4-30 改变图层顺序后的效果图

图4-31 绘制月亮的效果图

(12) 选择【插入】|【新建元件】命令,创建名为“星星”的图形元件,并用多角星形工具绘制星星,如图4-32所示。

(13) 新建图层,从【库】面板中拖动星星元件到舞台,并修改实例属性,如图4-33所示。

图4-32 设置属性

图4-33 设置星星实例的属性

(14) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。

任务三 制作立体按钮

知识准备

按钮元件是根据鼠标移动到某个位置或单击鼠标等鼠标事件来执行特定命令的元件。按钮元件与其他元件不同,编辑属性的时间轴形式也有所不同。使用按钮元件可以用于创建响应鼠标单击、滑过或其他动作的交互式按钮。

1. 创建按钮元件

可以使用任务二中所介绍的创建元件的三种方式(创建新元件、转换为元件、直接复制元件)中的任何一种来创建按钮元件。

创建好的按钮元件实际上是4帧的交互影片剪辑。这4帧分别为弹起、指针经过、按下和点击,如图4-34所示。前3帧显示按钮的3种可能状态,第4帧定义按钮的活动区域。时间轴实际上并不播放,它只是对鼠标运动和动作做出反应,跳转到相应的帧。

图4-34 按钮元件的【时间轴】面板

第1帧是弹起状态,代表指针没有经过按钮时该按钮的状态。

第2帧是指针经过状态,代表指针滑过按钮时该按钮的外观。

第3帧是按下状态,代表单击按钮时该按钮的外观。

第4帧是点击状态,定义响应鼠标单击的区域。此区域在.SWF文件中是不可见的。

2. 设置按钮元件实例属性

在舞台中选择按钮实例后,此时的【属性】面板中将显示按钮实例的相关属性设置,如图4-35所示。

与前面介绍的图形元件实例的【属性】面板相比,按钮实例的【属性】面板中少了“循环”选项,多了“显示”、“音轨”和“滤镜”选项。下面分别介绍之。

1) “显示”选项

在“显示”选项中可以为选择实例添加混合效果。混合可以将两个叠加在一起的对象产生混合重叠颜色的独特效果,类似于Photoshop中的图层混合模式。不过值得注意的是,混合的对象只能是按钮实例和影片剪辑。为对象添加混合效果,首先在舞台中选中按钮实例或影片剪辑,然后单击【属性】面板“显示”选项中“混合”右侧的按钮,即可弹出如图4-36所示的混合模式列表。

图4-35 按钮实例的【属性】面板

图4-36 “显示”选项

2) “音轨”选项

在“音轨”选项中单击“选项”右侧的按钮,即可弹出一个包括“音轨作为按钮”和“音轨作为菜单项”的下拉列表,如图4-37所示。

图4-37 “音轨”选项

3) “滤镜”选项

在【属性】面板“滤镜”选项中可以为选择的实例轻松添加一些投影、发光等特殊滤镜效果,使用它们可以大大方便Flash编辑,从而完成更多的动画特效。与“显示”选项中的对象混合相比,滤镜效果的添加对象也有限制,只能适用于文本、按钮实例和影片剪辑,不能应用于图形实例。

展开【属性】面板中的“滤镜”选项,如图4-38所示。

单击【添加滤镜】按钮,在弹出如图4-39所示的下拉列表中可以为当前选择对象进行添加滤镜操作,共有7种,分别是投影、模糊、发光、斜角、渐变发光、渐变斜角和调整颜色。

图4-38 “滤镜”选项

图4-39 添加滤镜下拉列表

任务实施

任务目标:使用按钮元件制作如图4-40所示的立体按钮效果。

图4-40 立体按钮效果图

具体操作步骤如下。

(1) 启动Flash CS5,新建一个文件,选择【插入】|【新建元件】命令,创建按钮元件,如图4-41所示。

图4-41 创建按钮元件

(2) 在按钮元件1编辑窗口,这时在时间轴的“弹起”栏处会有一个空心关键帧,在工作区使用椭圆工具画上一个圈,作为按键的最外圈,并填充黑色的径向渐变图案。注意要让白色的中心点偏左上,这样立体感更强,如图4-42所示。

图4-42 “弹起”状态下的底框1绘制

(3) 新建图层,命名为“底框2 ”,再如步骤(2) 那样画一个圆,并比底框1小一些,它的大小决定了底框的宽度。要注意的是在填色时要让黑色渐变的中心点偏右下,如图4-43所示。

(4) 新建图层,命名为“按钮”,使用同样的方式画一个圆,不过这次用红色的渐变色来填充,白色的中心点偏左上,如图4-44所示。

图4-43 【弹起】状态下的底框2绘制

图4-44 【弹起】状态下的按钮绘制

(5) 新建图层,绘制一个“心”形,填充黑色;再复制一个心,将其缩小些,然后填充红色的渐变色,放在大的心上;选中两个心,按【Ctrl+G】键将它们合并,如图4-45所示。

图4-45 【弹起】状态下的心形绘制

(6) 在时间轴上的“指针经过”状态栏中,在每一层都按【F6】键插入关键帧,这样就把“弹起”时的状态全都复制到“指针经过”状态了;再将“按钮”层和“心”形层的图案都用黄色的渐变色来代替红色的渐变色填充,如图4-46所示。

图4-46 “指针经过”状态制作

(7) 在时间轴的“按下”栏中,在每一层都按【F6】键插入关键帧,在“按钮”层选择按钮图形并将其缩小,然后填充红色的渐变色,且要将白色的中心点偏右下。在“心”形层中同样将心也缩小,如图4-47所示。

图4-47 “按下”状态制作

(8) 单击场景1切换至主场景,将制作好的按钮从库中拖动到舞台,选择菜单栏中的【控制】|【启动简单按钮】命令,这时按钮就能感应鼠标动作了,如图4-48所示。

图4-48 执行【启用简单按钮】

(9) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。

任务四 制作生日快乐

知识准备

影片剪辑是动画形式的元件,即元件本身具有动画效果。因此,只要把影片剪辑放到舞台上,就可以得到动画效果。

影片剪辑元件是一种可重复使用的动画片段,它拥有各自独立于主时间轴的多帧时间轴。例如,时钟的秒针、分针和时针一直都以中心点不动,只要按一定间隔旋转即可。因此,在制作时钟时,应将这些指针创建为影片剪辑元件。

用户不仅可以把场景上任何看得到的对象,甚至整个时间轴内容创建为一个影片剪辑元件,而且可以将这个影片剪辑元件放置到另一个影片剪辑元件中,还可以将一段动画(如逐帧动画)转换成影片剪辑元件。

1. 创建影片剪辑元件

可以使用任务二中所介绍的创建元件的三种方式(创建新元件、转换为元件、直接复制元件)中的任何一种来创建影片剪辑元件,如图4-49所示。

图4-49 创建影片剪辑元件

2. 设置影片剪辑实例属性

在舞台中选择影片剪辑实例后,此时的【属性】面板中将显示影片剪辑实例的相关属性设置,如图4-50所示。

与前面介绍的图形元件实例和按钮元件实例的【属性】面板相比,影片剪辑实例的【属性】面板中少了“循环”、“音轨”选项,多了“3D定位和查看”选项。“3D定位和查看”选项用于设置影片剪辑的3D位置、透视角度、消失点等,单击其左侧的小图标并将其展开,如图4-51所示。

图4-50 影片剪辑实例的【属性】面板

图4-51 “3D定位和查看”选项

任务实施

任务目标:使用按钮元件制作如图4-52所示的生日快乐动画效果。

具体操作步骤如下。

(1) 新建文档,设置大小为“600×460”像素,设置背景为“白色”,如图4-53所示。

(2) 选择【插入】|【新建元件】命令新建新元件,类型为“图形元件”,命名为“背景”;在元件编辑区使用矩形工具绘制和舞台大小一样大的矩形,即“600 ×460”像素,填充设置为“纯色(#FFF8C6) ”。新建图层,使用钢笔工具绘制心形,填充设置为“纯色(#FEEC9C)”,按【Alt】键同时拖动心形,以复制多个心形对象,再使用任意变形工具改变大小并进行旋转,效果如图4-54所示。

图4-52 生日快乐动画效果

图4-53 设置文档属性

(3) 回到场景1,打开【库】面板,拖动已建立的背景图形元件到舞台;在【对齐】面板中设置水平居中对齐和垂直居中对齐,如图4-55所示。

图4-54 绘制背景图形元件

图4-55 【对齐】面板

(4) 选择【插入】|【新建元件】命令创建新元件,类型为“影片剪辑”,命名为“彩灯”,如图4-56所示。

图4-56 创建“彩灯”影片剪辑

(5) 在“彩灯”元件编辑区,使用矩形工具绘制大小为“482×158”像素的矩形,填充设置为“红色”;使用刷子工具设置不同的刷子形状、大小,依次在矩形上画出白色对象,效果如图4-57所示。

图4-57 绘制图案

(6) 新建图层,输入文字“HAPPY BIRTHDAY”,在【属性】面板中设置字体为“ArbuckleFat”,颜色设置为“黄色”,大小设置为“51.0”点,效果如图4-58所示。

(7) 新建图层,使用椭圆工具绘制直径为“29”像素的圆,边框设置为“黑色”,填充设置为“红色”。按【Alt】键同时拖动圆复制,并修改填充颜色,效果如图4-59所示。

图4-58 输入文字

图4-59 绘制圆

(8) 选择圆形图案所在的图层3,分别选择第3帧、第5帧、第7帧,按【F6】键分别插入关键帧;在第8帧处按【F5】键插入帧;在图层1、图层2的第8帧处按【F5】键插入帧,如图4-60所示。

(9) 分别选中图层3的第3帧、第5帧、第7帧,在编辑区依次修改圆形的填充颜色(提示:每个圆形的填充颜色在第1帧、第3帧、第5帧、第7帧中的显示顺序可按红、黄、蓝、绿的顺序设置)。

(10) 新建图层,在第1帧绘制白色的图案以表示圆形上的高光点,从而增加圆球的立体感,效果如图4-61所示。

图4-60 插入关键帧

图4-61 绘制图案

(11) 选择【插入】|【新建元件】命令,创建新元件,类型为“影片剪辑”,命名为“猪”,如图4-62所示。

图4-62 创建“猪”影片剪辑

(12) 在“猪”的元件编辑区选择第1帧,执行【文件】|【导入】|【导入到舞台】命令,将素材“睁眼猪”图像导入,在【对齐】面板中设置水平居中对齐和垂直居中对齐;选择第15帧,执行【文件】|【导入】|【导入到舞台】命令,将素材“闭眼猪”图像导入,同样设置水平居中对齐和垂直居中对齐;选择第30帧,按【F5】键插入帧,效果如图4-63所示。

(13) 回到场景1,新建图层,命名为“彩灯”,选择该层第1帧,从【库】面板中将建立的“彩灯”影片剪辑拖动到舞台上;再新建图层,命名为“猪”,选择该层第1帧,从【库】面板中将建立的“猪”影片剪辑拖动到舞台上;又新建图层,命名为“礼盒”,选择该层第1帧,执行【文件】|【导入】|【导入到舞台】命令,将礼盒图像素材导入舞台上,效果如图4-64所示。

图4-63 插入关键帧

图4-64 场景效果图

(14) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。

深入解析

在Flash中,使用元件可以简化舞台界面,将本来一段复杂的影片剪辑压缩为一个关键帧点,从而使舞台变得更简洁。简化影片编辑,可以把要多次使用的元素做成元件,当修改元件以后,其所有实例都会随之更新。应用元件还可以使影片文件的尺寸大大缩小。

实例是出现在舞台上的元件或嵌套在其他元件中的元件,它具有元件的一切特性,但是元件与其实例有本质上的不同,如下。

(1) 使用范围不同:实例在前台,元件在台后。

(2) 编辑方式不同:舞台的实例使用属性编辑,【库】面板中的元件使用工具编辑。

(3) 修改效果不同:元件修改后,舞台上的所有实例将同步被修改。实例修改后并不影响元件,也不影响其他实例,且实例只有进行属性修改后,元件才能进行编辑修改。

(4) 虚实关系不同:元件是实体,实例是元件的映像。

元件的编辑界面与主场景编辑界面完全一样,编辑完成后将自动保留在库内备用,返回主场景后即可进行调用。库中的元件是伴随Flash文件的存在而存在的,打开其他文件或新建文件重新建库,原库元件将不复存在。

元件之间可以相互调用,称为元件的“嵌套”。也就是说,按钮元件里也可以使用图形元件或影片剪辑元件,影片剪辑元件里也可以使用按钮等。

元件在主场景运用后形成的实例,使用时间轴 【播放】不能呈现元件动画效果,必须使用【测试影片】或 【测试场景】方可呈现,这是因为【播放】只是在编辑现场上的行为,而【测试影片】才是文件运行时的效果,二者是有区别的。

综合实训——制作动感按钮

任务目标:结合图形元件、按钮元件、影片剪辑元件的技术制作一张动感按钮动画。

具体操作步骤如下。

(1) 新建文档,设置文档背景色为“深灰色”;选择【插入】|【新建元件】命令,在弹出的【创建新元件】对话框中选择“按钮”类型。

(2) 在按钮元件编辑区,先设置“弹起”状态,选中图层1的第1帧,使用椭圆工具在编辑区绘制一个圆,设置边框线为“无”、填充为“灰色线性渐变”,如图4-65所示。

(3) 新建图层,再使用椭圆工具绘制一个小一点的圆,设置填充为“红色线性渐变”,如图4-66所示。

图4-65 灰色线性渐变设置

图4-66 红色线性渐变设置

(4) 选中红色渐变圆,单击鼠标右键,在弹出的快捷菜单中选择【转换为元件】命令,将该对象转换成名称为“红色渐变圆”的图形元件,如图4-67所示。

图4-67 【转换为元件】对话框

(5) 新建图层,输入字符“1”,并设置颜色为“白色”、大小为“14”点,调整位置居于圆形中间。单击鼠标右键,在弹出的快捷菜单中执行【转换为元件】命令,将该对象转换并命名为“字符”图形元件。

(6) 再新建图层,绘制两个黑色实心三角图形,如图4-68所示(提示:可显示标尺、拖出参考线,使绘制的三角图形在规定范围内)。

图4-68 绘制三角图形

(7) 选中绘制的图形,单击鼠标右键,在弹出的快捷菜单中执行【转换为元件】命令,将图形转换为图形元件,并命名为“箭头”,如图4-69所示。

图4-69 将图形转换为图形元件并命名为“箭头”

(8) 执行【插入】|【新建元件】命令,新建元件,名称为“红到黄渐变”、类型为“影片剪辑”,如图4-70所示。

图4-70 创建“红到黄渐变”影片剪辑

(9) 在打开的“红到黄渐变”影片剪辑元件编辑区,选择第1帧,从【库】面板中拖动“红色渐变圆”图形元件到舞台;在【对齐】面板中设置水平居中对齐和垂直居中对齐,选择第10帧,按【F6】键插入关键帧,并在【属性】面板中调整色彩效果,使颜色调整为“黄色”,如图4-71所示。

图4-71 色彩效果调整

(10) 在时间轴第1帧到第10帧的空白处,单击鼠标右键,在弹出的快捷菜单中选择“创建传统补间”,创建从红色到黄色的变化效果,如图4-72所示。

图4-72 创建传统补间

(11) 选择第10帧,单击鼠标右键,在弹出的快捷菜单中选择“动作”,并为该帧添加一个指令,如图4-73所示。

(12) 在打开的【动作】面板中输入“stop();”指令。

(13) 关闭【动作】面板,在元件编辑区的时间轴上可看到第10帧处的变化,如图4-74所示。

(14) 选择【插入】|【新建元件】命令,新建元件,名称为“箭头转动”、类型为“影片剪辑”。

图4-73 为帧添加“动作”

(15) 在打开的“箭头转动”影片剪辑元件编辑区,选择第1帧,从【库】面板中拖动“箭头”图形元件到舞台;在【对齐】面板中设置水平居中和垂直居中对齐,选择第15帧,按【F6】键插入关键帧,并在【变形】面板中放大到165.0%、旋转90.0°,如图4-75所示。

图4-74 动作帧

图4-75 【变形】面板

(16) 在两个关键帧之间创建传统补间,并给第15帧添加stop的动作指令,效果如图4-76所示。

图4-76 “箭头转动”影片剪辑元件

(17) 单击工作区右上方的元件菜单,选择进入“元件1”编辑区,如图4-77所示。

(18) 在图层1(灰色圆底)的“指针经过”状态对应帧上按【F5】键插入帧;在图层2(红色渐变)、图层3(字符)、图层4(箭头)的“指针经过”状态对应帧上按【F6】键插入关键帧;最后将图层4放置在最下方,如图4-78所示。

图4-77 进入“元件1”编辑区

图4-78 时间轴

(19) 选中图层2的“指针经过”状态对应关键帧,在【属性】面板中单击【交换】按钮,打开【交换元件】对话框,选择“红到黄渐变”影片剪辑元件,这样将“红色渐变圆”图形元件交换为“红到黄渐变”影片剪辑元件,如图4-79所示。

图4-79 【交换元件】对话框

(20) 选中图层3的“指针经过”状态对应关键帧,在【属性】面板中修改字符实例的色彩效果,将亮度调为“-100%”,使字符显示“黑色”,如图4-80所示。

图4-80 调整字符实例亮度后的效果

(21) 选中图层4的“指针经过”状态对应关键帧,在【属性】面板中将“箭头”图形元件交换为“箭头转动”影片剪辑元件。

(22) 至此一个动感按钮就制作好了,回到场景1,从【库】面板中拖动按钮元件1到舞台上,进行测试并观看效果。

(23) 如果要多制作几个按钮,可在【库】面板中选择按钮元件1,单击鼠标右键,从弹出的菜单中选择【直接复制】命令,复制并命名按钮元件1,如图4-81所示。

图4-81 【直接复制元件】对话框

(24) 同理,复制多个并命名字符图形元件,再分别进入字符图形元件编辑区修改字符数字。

(25) 在【库】面板中,双击按钮元件2进入其编辑区。将图层3(字符)“弹起”状态、“指针经过”状态对应关键帧里的对象在【属性】面板中交换为“字符2”图形元件。

(26) 同上一步,分别修改其他按钮元件里的字符元件。

(27) 回到场景1,从【库】面板中拖动各按钮元件到舞台上,测试、观看效果并保存文件。最终效果如图4-82所示。

图4-82 动感按钮效果图