58第5章 元件和遮罩层

115 第5章元件和遮罩层本章通过完成5案例，介绍了“库”面板、元件的类型、实例的类型、创建元件和实例的方法、编辑元件和实例的方法、创建和编辑按钮元件的方法，介绍了使用遮罩层的方法等内容。同时，也介绍了一些制作Flash动画的技巧。5.1【案例18】四季变化【案例效果】“四季变化”动画。该动画运行后的 4 幅画面如图 5­1­1 所示。可以看到，画面中一幅“枫叶小路”图像的颜色和光颜色在不断变化，好像春夏秋冬四季变化一样。图 5­1­1 “四季变化”动画播放后的 4 幅画面【操作步骤】1．图像修理（1）新建一个 Flash 文档，设置舞台工作区宽 200 像素、高 270 像素，背景为白色。（2）单击“文件”→“导入”→“导入到舞台”菜单命令，导入一幅“枫叶小路”图像，如图5-1-2左图所示。调整图像的大小（宽200像素、高300像素）和位置。（3）选中导入的“枫叶小路”图像，单击“修改”→“分离”菜单命令，将选中的图象分离。使用工具箱内的“选择工具”，拖曳出一个选中图像上边一条边的矩形，选中矩形内的图像，如图5-1-2中图所示。然后，按Delete键，删除选中的图象，效果如图5-1-2右图所示。其目的是为了使整体图象颜色比较一致，删除左上角不协调的内容。图 5­1­2 “枫叶小路”图像的修理116 2．第1帧图像滤镜处理（1）选中修理后的图像，调整该图像的大小和位置，使它刚好将舞台工作区完全覆盖。单击“修改”→“转换为元件”菜单命令，调出“转换为元件”对话框。单击该对话框内的“确定”按钮，将选中的图像转换为影片剪辑元件的实例。其目的是为了可以使用滤镜。（2）选中该实例对象，单击“属性”面板内的“滤镜”标签，切换到“属性”面板的“滤镜”选项卡。单击“添加滤镜”按钮，即可调出滤镜菜单。单击该滤镜菜单菜单中的“调整颜色”菜单命令，此时的“属性”面板的“滤镜”选项卡，按照如图 5­1­3 所示进行设置，即可将图像调整为浅绿色。可以使图像的色相在-180到180之间变化，颜色可以在浅蓝色、蓝色、深蓝色、紫色、粉红色、红色、深绿色、绿色之间变化。（3）单击滤镜菜单中的“发光”菜单命令，按照图5-1-4所示进行设置，设置颜色为浅绿色。图5-1-3“调整颜色”滤镜设置图5-1-4“发光”滤镜设置3．制作变色动画（1）使用工具箱中“选择工具”，右击“彩球”图层第 1 帧，弹出一个帧快捷菜单，再单击该菜单中的“创建补间动画”菜单命令。此时，该帧具有了补间动画的属性。（2）按住 Shift 键，同时单击选中“图层 1”图层第 30 帧、第 60 帧、第 90 帧和第 120 帧，按 F6 键，创建“图层 1”图层第 1 帧到第 30 帧、第 60 帧、第 90 帧和第 120 帧的动作动画。第 30 帧、第 60 帧、第 90 帧和第 120 帧成为关键帧。（3）单击选中“图层 1”图层第 30 帧、，单击第 30 帧的图像实例对象。在“属性”面板的“滤镜”选项卡内的列表框中选中“调整颜色”选项，调整色相为-5，饱和度为-15，如图5-1-5所示。（4）选中列表框中的“发光”选项，按照图5-1-6所示进行设置，使图像内发浅橙色光。图5-1-5“发光”滤镜设置图5-1-6“发光”滤镜设置（5）按照上述方法，分别调整第 60 帧和第 90 帧内实例对象的“调整颜色”和“发光”滤镜，设置第 60 帧实例对象的发光颜色为浅黄色，设置第 90 帧实例对象的发光颜色为浅灰色。至此，这个动画制作完毕。117 【相关知识】元件和实例1．元件的分类单击“窗口”→“库”菜单命令，可以调出“库”面板，如图 5­1­7 所示；“库”面板用来存放各种元件。在“库”面板内除了有导入的图像元件、声音元件和视频元件外，以及在创建动作动画时自动产生的补间元件外，还可以自己创建图形元件、影片剪辑元件和按钮元件。（1）图形元件：它可以是矢量图形、图像、声音或动画等。它通常用来制作电影中的静态图形，不具有交互性。（2）影片剪辑元件：用来制作独立于主影片时间轴的动画。它可以包括交互性控制、声音甚至其他影片剪辑的实例。也可以把影片剪辑的实例放在按钮的时间轴中，从而实现动画按钮。为了实现交互性，单独的图像也可以做成影片剪辑。用两种元件创建的实例是不同的。影片剪辑实例只需要一个关键帧来播放动画，而图形实例必须出现在足够的帧中。创建新的图形元件和影片剪辑元件，可以通过单击“插入”→“新建元件”菜单命令或单击“库”面板左下角的“新建元件”按钮，调出“创建新元件”对话框来实现。（3）按钮元件：可以在影片中创建按钮元件的实例。在 Flash 中，首先要为按钮设计不同状态的外观，然后为按钮的实例分配事件（例如：鼠标单击等）和触发的动作。在编辑时，必须单击“控制”→“测试影片”菜单命令或单击“控制”→“测试场景”菜单命令，才能在播放器窗口内演示它的动画和交互效果。2．创建元件和实例（1）创建新元件的方法：单击“插入”→“新建元件”菜单命令，调出“创建新元件”对话框，如图 5­1­8 所示。在“名称”文本框内输入元件的名称，在“行为”栏内选择元件类型，单击“确定”按钮，即可进入相应的元件编辑状态。创建完动画后，回到主场景，即可完成元件的创建。（2）创建实例的方法：在需要元件对象上场时，只需用鼠标将“库”面板中的元件拖曳到舞台中即可。此时舞台中的该对象称为“实例”，即元件复制的样品。舞台中可以放置多个相同元件复制的实例对象，但在“库”面板中与之对应的元件只有一个。（3）将舞台工作区中的对象转换为元件的实例：选中舞台工作区中的对象，单击“修改”→“转换为元件”菜单命令或按 F8 键，调出“转换为元件”对话框，如图 5­1­9 所示。输入元件的名称，选择元件类型，单击中的小方块，调整元件的中心。单击“确定”按钮，即将选中的对象转换为元件。“库”面板内会增加一个名字为“元件 1”的元件，同时选中的对象会自动变为该元件的实例。（4）将舞台工作区中的动画转换为元件的实例：方法如下。◎选取动画的所有帧。单击鼠标右键，调出帧快捷菜单，单击帧快捷菜单内的“复制帧”菜单命令，将选中的所有帧复制到剪贴板中。图 5­1­7 “库”面板118 ◎单击“插入”→“新建元件”菜单命令，调出“创建新元件”对话框。图 5­1­8 “转换为元件”对话框图 5­1­9 “转换为元件”对话框◎在该对话框内，输入元件名字（例如“动画 1”），选择元件类型，再单击“确定”按钮。此时，“库”面板中增加了一个名字为“动画 1”的元件，但它还是一个空元件，没有内容。同时舞台工作区切换到元件编辑窗口。◎选中帧控制区域内第 1 帧，再单击鼠标右键，调出帧快捷菜单。单击该菜单内的“粘贴帧”菜单命令，将剪贴板内的所有帧粘贴到元件编辑窗口内。然后回到主场景。3．复制元件在“库”面板中，由一个元件复制出另一个相同的元件，再双击“库”面板内复制的元件，进入该元件的编辑状态，修改该元件后可获得一个新元件。复制元件的方法如下。（1）方法1——元件复制为元件的方法：右击“库”面板内的一个元件，调出该元件的快捷菜单。单击该菜单中的“直接复制”菜单命令，调出“直接复制元件”对话框，如图5-1-10左图所示。利用“直接复制元件”对话框选择元件类型和输入名称，再单击该对话框内的“确定”按钮，即可在“库”面板内复制一个新元件。（2）方法2——实例复制为元件的方法：选中舞台工作区内的一个元件实例，单击“修改”→“元件”→“直接复制元件”菜单命令，即可调出“直接复制元件”对话框，如图5-1-10右图所示。利用“直接复制元件”对话框选择元件类型和输入名称，再单击该对话框内的“确定”按钮，即可在“库”面板内复制一个新元件。图 5­1­10 “直接复制元件”对话框思考与练习5-1 1．创建一个名称为“五边形”的图形元件，该元件内是一幅绿色五边形图形。利用该元件在舞台工作区内生成 5 个相同的“五边形”图形元件的实例。将“库”面板内“五边形”图形元件的图形改为红色五角星形图形，观察舞台工作区内的 5 个实例有什么变化。 2．制作一个“变色碰撞彩球”动画，该动画播放后，两个不同颜色的彩球相对水平移动，碰撞后再朝相反的方向水平移到原来的位置，同时两个彩球的颜色还不断变化。 3．制作一个“日夜星辰”动画，该动画播放后，一幅图像逐渐变暗（星星和月亮逐渐显示），然后又逐渐变亮（星星和月亮逐渐消失），好像夜晚逐渐变为白天一样。119 4．制作一个“扇叶变色的电风扇”动画，该动画播放后的 2 幅画面如图 5­1­11 所示。可以看到，画面中一台电风扇，扇叶在顺时针转动，同时扇叶的颜色在不断变化。图5-1-11“扇叶变色的电风扇”动画播放后的2幅画面5.2【案例19】动感宝宝照像馆【案例效果】“动感宝宝照像馆”动画播放后的 2 幅画面如图 5­2­1 所示。可以看到，画面内正中间有一个宝宝照片图像不断变化的动画，右上角和左下角各有一个三原色图形，右下角和左上角各有一个模拟指针钟动画，指针的位置不一样，还有许多闪烁的白色光斑。三原色图形是一幅能反应红色、绿色和蓝色三原色混合效果的图形。图 5­2­1 “动感宝宝照像馆”动画播放后的 2 幅画面120 【操作步骤】1．制作“三原色”影片剪辑元件（1）设置舞台工作区的宽为 800 像素、高为 400 像素，背景为黑色。将该 Flash 文档一名称“动感宝宝照像馆.fla”保存在“【案例19】动感宝宝照像馆”文件夹内。（2）创建并进入“红圆”影片剪辑元件的编辑状态，使用工具箱内的“椭圆工具”。再在它的“属性”栏内设置无轮廓线，填充色为红色。按住 Shift 键，拖曳绘制一个直径为 120 像素的红色圆形图形。然后，单击元件编辑窗口中按钮，回到主场景。（3）选中“库”面板中的“红圆”影片剪辑元件，单击鼠标右键，弹出它的快捷菜单，单击该菜单中的“直接复制”菜单命令，调出“直接复制元件”对话框，将“名称”文本框中的内容改为“篮圆”文字。单击“确定”按钮，关闭“直接复制元件”对话框。此时，“库”面板中会增加一个“篮圆”影片剪辑元件。按照上述方法，再在“库”面板中复制一个“红圆”影片剪辑元件，影片剪辑元件的名称改为“绿圆”。（4）双击“库”面板中的“篮圆”的影片剪辑元件，进入它的编辑状态，使用工具箱内的“颜料桶工具”，将红色圆形图形的颜色改为蓝色。然后，回到主场景。（5）双击“库”面板中的“绿圆”的影片剪辑元件，进入它的编辑状态，将红色圆形图形的颜色改为绿色。然后，回到主场景。（6）创建并进入“三原色”影片剪辑元件的编辑状态，将“库”面板中的“红圆”、“篮圆”和“绿圆”三个影片剪辑元件依次拖曳到舞台工作区内，形成三个实例。再使用工具箱中“选择工具”，将它们移到相应的位置，使它们相互重叠一部分。而且，“篮圆”影片剪辑实例在最下边，“绿圆”影片剪辑实例在最上边。（7）单击选中“红圆”影片剪辑实例，在其“属性”面板内的“混合”下拉列表框中选择“增加”选项。单击选中“绿圆”影片剪辑实例，在其“属性”面板内的“混合”下拉列表框中也选择“增加”选项。（8）单击元件编辑窗口中的按钮，回到主场景。2．制作“宝宝照片”影片剪辑元件（1）导入“宝宝照片1.jpg”……“宝宝照片1.jpg”7 幅图像到“动感宝宝照像馆.fla”动画的“库”面板内。（2）创建并进入“宝宝照片”影片剪辑元件的编辑状态，选中“图层1”图层第1帧，将“库”面板内“宝宝照片1.jpg”图像拖曳到舞台工作区内，调整它的宽为320像素，高为300像素，X值为“-160.0”，Y值为“-150.0”。（3）选中“图层1”图层第10帧，按F7键，创建一个空关键帧。再将“库”面板内“宝宝照片2.jpg”图像拖曳到舞台工作区内，调整它的宽为320像素，高为300像素，X值为“-160.0”，Y值为“-150.0”。（4）以后按照上述方法，在第20、30、40、50、60帧放置相同大小和位置的不同图像。最后，单击选中“图层1”图层第70帧，按F5键，创建一个普通帧。（5）单击元件编辑窗口中的按钮，回到主场景。121 3．制作