flash_元件与影片剪辑.doc

第五讲元件和实例打印本页随着动画复杂度的提高，必然会出现两种情况：首先是有些元素会重复使用；其次是有些对象会要求有特殊的同步行为和交互行为。这时，就需要用到Flash中的元件，并通过元件来创建实例。5.1 元件与实例学习目标本节学习的概念比较多。元件（symbol），又称符号，是一种比较独特的、可重复使用的对象。以元件为样本，创建出来的对象叫做实例。元件的引入使得动画的制作更为简单，动画文档的大小明显减小，播放速度也显著提高。而库面板则是管理元件的主要工具，每个动画文档都有自己库，存放着各自的元件，就像每个工厂将材料存放在自己的仓库中一样。 5.1.1 元件的分类在Flash中，元件包括图形、按钮、影片剪辑三类。每个元件都有一个唯一的时间轴和舞台。创建元件时要选择元件类型，这取决于元件在文档中的工作方式。三类元件的介绍如下：1. 图形元件可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。 2. 按钮元件可以创建响应鼠标点击、滑过或其它动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。 3. 影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有它们自己的独立于主时间轴的多帧时间轴。可以将影片剪辑看作是主时间轴内的嵌套时间轴，它们可以包含交互式控件、声音甚至其它影片剪辑实例。也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。5.1.2 使用库面板库面板用于存储和组织在Flash中所创建的图标以及导入的声音文件。其中，图标由图片、按钮、电影片段构成。库面板也包括在文件夹中存储的库存项目列表，从中可以看出电影中的一个图标使用的频度，并且可以将其按照类型排序。库面板的主要操作都在单击右上角的 按钮后打开的弹出菜单中。单击该按钮，弹出菜单。 库面板的相关操作包括以下内容。1. 显示库面板在主菜单中选择窗口/库，可以显示或者隐藏库面板。2. 在库面板中查看项目库面板中的每个Flash文件包括元件、位图和声音文件。当用户在库面板中选择项目时，该项目的内容就出现在窗口上部的预览界面中。如果选定的项目是动画或是声音文件，也可以应用控制器进行预览的控制。库面板的纵栏依次是列表项的名字、类型、在动画文件中使用的次数、链接和上一次修改的时间。可以在库面板中按任何项目排序。单击纵栏项目头，按照字母顺序等进行排列，也可以单击右上角的三角形按钮使项目按某一列的逆向排序。3. 使用库面板中的文件夹单击下部的新建文件夹的按钮 ，可以加入一个新的文件夹。当创建新元件时，新元件将出现在当前选定的文件夹里。如果没选定文件夹，它将出现在库面板的最下边，可以用鼠标把它从某个文件夹拖到另一个文件夹中。5.1.3 创建实例创建元件之后，可以在文档中任何需要的地方（甚至在其它元件内）创建该元件的实例。元件和实例的关系，就是本质与现象的关系。同一个本质可以有不同的现象。所以，同一个元件可以有多个外观不同的实例；在修改元件时，Flash 会更新元件的所有实例；修改实例，不会影响到原来的元件。 下面的简单例子可以帮助我们认识这些关系。（1）新建Flash文档，选择菜单栏插入/新建元件命令，在打开的创建新元件对话框中选择图形单选项。（2）此时时间轴已经不再是原来舞台的时间轴，而变成了元件1的时间轴，这点可以从舞台上方的提示栏看出，场景1后面多了元件1。（3）用多角星形工具 在舞台中绘制一个多边形，此时可以看到库面板中多出了元件1一项（如果库面板没有打开，则选择菜单栏的窗口/库命令将其打开）。（4）单击场景1或者其前面的箭头 按钮，返回到原来的舞台，可以看到舞台上什么都没有。 （5）用鼠标按住并拖拽库中的元件1到舞台上，连续拖拽3个。这3个多边形便称之为元件1的实例。（6）对舞台上的第1个多边形用任意变形工具 进行变形，对第2个多边形先用任意变形工具 进行变形，然后用选择工具 选中，并打开属性面板。选择颜色下拉列表的高级选项。（7）单击旁边的设置按钮，在打开的高级效果对话框中进行设置，将该对象变成绿色、半透明。（8）此时可以看到，舞台中前两个多边形的变化并不影响库中元件1，也不影响第3个实例。（9）双击库面板中的元件1切换至元件编辑状态，用选择工具 将多边形进行修改。（10）此时退出元件编辑模式，再回到舞台上，可以看到3个实例均发生了变化。5.1.4 编辑元件的方法使用选择工具双击舞台上的实例，或者右击实例，在弹出的菜单中选择在当前位置编辑即可。这时就进入了元件编辑模式，而其它对象以灰显方式出现。正在编辑的元件名称显示在舞台上方的编辑栏内，位于当前场景名称的右侧。舞台上的狼是一个元件实例。使用选择工具双击它之后，就进入了编辑模式，狼周围的树林颜色变淡了，同时在时间轴上方的场景 1右边出现了狼标签，这就表示当前是在场景 1中编辑狼元件。此外，还可以使用在新窗口中编辑命令在一个单独的窗口中编辑元件。在单独的窗口中编辑元件，就可以同时看到该元件和主时间轴。正在编辑的元件名称会显示在舞台上方的编辑栏内。5.2 使用图形元件学习目标图形元件是比较简单的元件类型。本节的学习目的，就是掌握图形元件实例的颜色和循环方式设置。5.2.1 设置元件实例的颜色在前面说过，修改实例并不会影响原来的元件。在这里看看如何设置图形元件的颜色设置。实际上所有元件的颜色设置方法是一样的。学习了图形元件的颜色设置，读者可以用同样的方法在以后设置影片剪辑和按钮。首先看舞台上的一个图形元件实例，例如一个人物。使用选择工具单击它，然后使用菜单窗口/属性/属性打开属性面板。可以看到在属性面板的右半部分有 颜色下拉菜单。在下拉菜单中，如果选择无，那么不应用任何颜色效果。除此之外，可以选择四种颜色效果。1. 亮度选择了亮度之后，可以修改图形元件的亮度。亮度为0表示无效果，100%表示最亮，-100%表示。2. 色调色调的设置效果，是给整个图形对象加上颜色偏移的效果。例如想让整个人物变绿，那么可以将偏移颜色 设置为绿色，再将其后面的偏移值设置成一个正数，那么舞台上的图形对象就带上绿色效果了。 3. 不透明度（Alpha）Alpha值的作用是控制对象的不透明度。当Alpha值为100的时候，对象是完全不透明的，没有任何效果；当Alpha值小于100而大于0的时候，对象是半透明的；当Alpha值等于0的时候，对象就变成完全透明的，看不见了。4. 高级选择了高级项之后，就会在后面出现设置按钮。单击设置按钮，将会进行高级设置。在这里简单说一下计算的方法。假设有一个颜色为#CCFF33，Alpha值为90的点，应用了图中的设置，那么应该变成什么样子？可以分4步：（1）先计算红色成分。原来的红色成分是十六进制的CC，也就是十进制的204，按图中的换算规则是乘以80%，取整后为163，也就是十六进制的A3。（2）再计算绿色成分。原来的绿色成分是十六进制的FF，也就是十进制的255，按图中的换算规则是乘以50%再加上30，取整后为158，也就是十六进制的9E。（3）然后计算蓝色成分。原来的蓝色成分是十六进制的33，也就是十进制的51，按图中的换算规则是乘以20%再加上负80，取整后为负70。但是颜色值的取值范围是0255，所以只能取最小值0。（4）接下来计算Alpha值。原来的Alpha值是90，这本来就是十进制的，按图中的换算规则是乘以80%再加上30，结果是102。但是Alpha值的取值范围是0100，所以只能取最大值100。（5）最后综合上面的计算结果，可以得到应用效果后的颜色值为#A39E00，Alpha值为100。5.2.2 设置图形元件的循环方式选中图形元件之后，可以在属性面板的中部设置图形元件的循环方式，共有三种循环方式供选择。在后面的第一帧文本框中，可以设置动画的起始帧。各种循环方式的特点如下：循环：播放到最后一帧之后，又回到开头继续播放。播放一次：播放到最后一帧之后，就静止不动了。单帧：只显示一帧。5.2.3 操作实例：旋转的风车上机实践本实例是在制作图形元件的基础上，掌握如何设置图形元件的播放。 （1）首先创建一个新文档，文档大小保持默认状态即可。使用线条工具 在舞台中绘制出一片风车叶子的轮廓。在绘制线条时启用工具箱中的贴紧至对象 功能，可以使绘制出来的线条处于封合状态。（2）使用颜料桶工具 对舞台上的图形进行颜色填充，填充颜色可以根据个人爱好自由设定，这里填充的是绿色和深绿色。（3）使用任意变形工具 选中舞台中的图形，然后将变形中心点的位置拖拽到图形左下角的位置上。（4）打开变形面板，将旋转的角度设置为90度，点击3次复制并应用变形按钮，制作出风车的其余3个叶片。（5）接下来使用选择工具 选中整个风车叶片，按键盘上的F8功能键，准备将舞台上的风车图形转换为影片剪辑元件。（6）按了F8功能键之后，会弹出转换为元件对话框，设置元件名称为风车，元件类型选择为图形，最后单击确定按钮，将舞台上的图形转换为图形元件。（7）将舞台上的风车复制两次，并适当调整大小。（8）使用绘图工具绘制风车的柄。（9）这时三架风车的扇页位置是完全相同的。但是在现实中，很少出现多个风车扇页位置一致的现象。这时可以进行调整。选中左边的风车扇页，在属性面板中将第一帧设置为3。（10）将右边风车扇页的第一帧设置为2。这时风车的扇页错落有致。（11）最后还有很关键的一步。在主时间轴中，单击选中第20帧，按F5快捷键插入帧。如果少了这一步，那么主时间轴中只有一帧，图形元件是与时间轴同步的，也只能显示一帧了。（12）至此动画制作完成，保存并测试动画。5.3 使用影片剪辑学习目标影片剪辑作为Flash元件的一个重要类型，在动画制作中一直发挥着不可替代的作用，合理地运用影片剪辑可以制作出很多奇特的效果。此外，影片剪辑实例的颜色设置与图形实例是相同的，在此不再赘述。5.3.1 创建影片剪辑要创建影片剪辑，可以有两种方法：1. 创建空白的影片剪辑使用菜单命令插入/新建元件，可以创建一个空白的元件。在创建新元件对话框中设置元件的名称，并将元件的行为设置为影片剪辑，单击确定按钮就可以了。2. 将舞台上的对象转换为影片剪辑使用选择工具选中舞台上的对象，使用菜单修改/转换为元件或者快捷键F8，在对话框中设置元件的名称，并将元件的行为设置为影片剪辑，然后设置注册点位置，再单击确定按钮就可以了。在这里说一下注册点。注册点就是转换为元件之后的元件坐标原点。例如将注册点位置设置为右上，那么转换为元件之后，元件的坐标原点将位于被选中的对象的右上方。5.3.2 操作实例：蜡烛上机实践元件在动画制作过程中是不可缺少的元素，不仅可以反复使用它，而且还可以对它进行属性修改等。这一实例就通过制作一个燃烧的蜡烛效果，初步认识元件的作用。（1）创建一个尺寸为400300的新文档，文档的背景颜色为黑色。这里将背景颜色设置为黑色是为了衬托出蜡烛的光芒。（2）在舞台中绘制一个渐变矩形，在矩形的上方再绘制一个渐变椭圆，对其进行变形后制作出蜡烛图形。由于前面已经深入的讲解过图形的绘制方法，这里就不再细述。（3）绘制好蜡烛图形后，现在来制作晃动的灯心效果。执行菜单栏插入/新建元件命令，此时会弹出创建新元件对话框。（4）在弹出的创建新元件对话框中，名称指的是元件的名称，这里命名为灯心；类型指的是元件类型，这里选择为影片剪辑。（5）单击确定按钮，进入元件的编辑状态。使用工具箱中的椭圆工具 在舞台上绘制一个线性渐变椭圆，再结合选择工具 调节渐变椭圆的形状，调整完成后的图形作为灯心效果。灯心的渐变颜色由下而上依次为黄色#FFFF00到桔红色#FF6600，再到深红色#D22B00的渐变。（6）在时间轴的第2、3、4、5帧上按F6功能键插入关键帧，然后在这几帧所对应的舞台上，使用选择工具 分别适当调整灯心顶端在不同帧上的不同形状，制作出火苗因为燃烧而产生晃动的动画效果。（7）灯心的效果就制作到此，接下来执行菜单栏插入/新建元件命令，此时会弹出创建新元件对话框。（8）在该对话框中，将元件名称命名为光晕，元件类型选择为影片剪辑元件。（9）单击确定按钮，进行光晕元件的编辑区。在舞台上绘制一个放射状渐变椭圆，渐变颜色同第5步骤中的相同。（10）选中舞台上的渐变椭圆，执行菜单栏修改/形状/柔化填充边缘命令，此时柔化填充边缘对话框将被打开。在该对话框中将距离和步骤数均设置为10，方向为默认的扩展。（11）单击确定按钮完成设置。（12）在时间轴的第2到5帧上分别按下F6功能键插入关键帧，然后使用键盘上的方向键移动每帧所对应的光晕图形。每帧上光晕移动的距离只需要相差1到2个像素即可，以强化火焰燃烧时的动感。（13）完成光晕的动画制作后，点击时间轴上的场景1按钮，回到主场景中。执行菜单栏窗口/库命令，此时会将库面板打开。（14）在库面板中可以看到刚才创建的灯心和光晕两个影片剪辑元件，使用选择工具 直接将光晕影片剪辑元件拖拽至舞台中，并放置于蜡烛之上。（15）接着再将灯心影片剪辑元件拖拽至舞台上，同样放置于蜡烛之上。再使用选择工具 选中舞台上的光晕元件，将该元件向上移动，构成一幅完整的蜡烛图像。（16）最后使用Ctrl + Enter预览动画，一根正在燃烧的蜡烛动画就制作完成。5.3.3 操作实例：一群小鸟上机实践在上一章的飞行的小鸟实例中，已经初步认识了影片剪辑元件的作用，本例将在它的基础上继续了解元件的功能。（1）打开第5章中制作过的飞行的小鸟实例，然后执行菜单栏文件/另存为命令，将该文档另存为一群小鸟。（2）将文件另存之后，在时间轴上锁定图层2，点击插入图层按钮创建一个新的图层3，在该图层的第3帧上按F6功能键插入关键帧。（3）执行菜单栏窗口/库命令，此时会打开库面板。使用选择工具 直接将库面板中的元件1拖拽至舞台上。（4）使用任意变形工具 适当缩小舞台上的小鸟图形，缩放完成后，将小鸟图形放置在舞台中的右侧边缘处。（5）在第3帧上单击鼠标右键，在弹出的菜单中选择创建补间动画命令，创建一个补间动作。再在第25帧处按F6功能键插入一个关键帧，同样在该帧上单击鼠标右键，在弹出的菜单中选择删除补间命令，删除第25帧以后的补间动作。（6）继续选中第25帧，然后在舞台中将小鸟图形移动至舞台的最左侧边缘。这样运用同一个元件创建的第二个运动动画就制作完成。（7）分别在时间轴的三个图层的第40帧上按F5功能键插入帧，再在图层2的第30帧上单击鼠标右键，在弹出的菜单中选择删除补间命令，删除第30帧以后的补间动作。（8）锁定图层3，创建一个新的图层4，在该图层的第10帧上按F6功能键插入一个关键帧。（9）继续选中第10帧，再次将元件1从库面板中拖拽至舞台上，将小鸟图形放置在舞台的右侧边缘的任意位置。（10）在第10帧上单击鼠标右键，在弹出的菜单中选择创建补间动画命令，创建一个补间动作。再在第40帧处按F6功能键插入一个关键帧。（11）创建好补间动作之后，继续选中第40帧，在舞台中将小鸟移动到舞台左侧边缘的任意位置上。（12）最后使用Ctrl + Enter预览动画，一群小鸟从天空飞翔而过的动画效果就制作完成。当然还可以用相同的方法创建多个运动动画，使在天空中飞翔的小鸟增多。5.3.4 操作实例：海里的鱼上机实践在前面的实例学习中，已经知道了元件可以反复使用。在这一实例中将学习如何修改元件的颜色属性。（1）打开上一章制作过的游动的小鱼实例，本实例将在此例的基础上进行制作。执行菜单栏文件/另存为命令，将该实例另存为海里的鱼。（2）将文件另存之后，在时间轴上选择图层1，即选中小鱼动画所在的图层。选中图层1后，该层时间轴上的所有帧都处于选中状态，然后在该层的时间轴上单击鼠标右键，在弹出的菜单中选择剪切帧命令，准备将该层上的整个运动动画剪切到新的位置。（3）执行了剪切帧命令之后，执行菜单栏插入/新建元件命令，此时会弹出创建新元件对话框，在该对话框中，名称保持默认即可，元件类型选择为影片剪辑。（4）单击确定按钮，进入新创建的元件编辑区。在元件编辑状态下，点击时间轴的第1帧后，单击鼠标右键，在弹出的菜单中选择粘贴帧命令，这样就将主场景中的整个动画粘贴到了元件1中。（5）完成后点击时间轴上的场景1按钮，回到主场景中。观察时间轴上的图层1，此时该层上的帧已被变成空白帧。（6）执行菜单栏窗口/库命令，此时会弹出库面板，在该面板下可以看到创建的影片剪辑元件1已经放置在其中。（7）使用选择工具 直接拖拽元件1至舞台中，将它放置于舞台右侧边缘的任意位置上。（8）锁定图层1，点击插入图层按钮创建一个新的图层3。在该图层的第5帧上按F6功能键插入一个关键帧，然后从库面板中将元件1拖拽至舞台右侧的任意位置上。（9）使用工具箱中的任意变形工具 适当缩小小鱼图形的大小，然后使用选择工具 选中该元件。打开滤镜面板，点击添加滤镜按钮，在弹出的列表中选择调整颜色命令。（10）在点击了调整颜色对话框后，就进入了调整颜色属性对话框。在该属性框中适当调整饱和度和色相的值。一边调整一边观察舞台上选中的小鱼的颜色变化，这里饱和度和色相的值的设定没有固定约束，只要和图层1中小鱼的颜色不一致就可以了。（11）接下来锁定图层3，创建一个新的图层4，在该图层的第3帧上按F6功能键插入关键帧。然后从库面板中将元件1拖拽至舞台的任意位置。（12）使用选择工具 选中图层4中的小鱼元件，然后打开滤镜面板，点击添加滤镜按钮，在弹出的菜单中选择调整颜色命令。在打开的调整颜色属性面板中，适当调整图像饱和度和色相值，使该图层中的小鱼颜色与前两个图层中小鱼的颜色有所区别。（13）应用相同的方法，可以在时间轴上创建若干图层，在不同图层的不同帧上放置元件1，然后对小鱼图形进行任意的缩放和颜色修改。这里再添加两个图层。（14）最后使用Ctrl + Enter预览动画。5.3.5 使用滤镜使用滤镜，可以为文本、按钮和影片剪辑增添有趣的视觉效果，并且经常用于将投影、模糊、发光和斜角应用于图形元素。Flash 所独有的一个功能是您可以使用补间动画让应用的滤镜活动起来。例如，如果创建一个具有投影的球（即球体），可以在时间轴中将投影位置从起始帧移到终止帧，来模拟光源从对象一侧移到另一侧的效果。下面是一个简单的小例子。（1）使用文本工具，在舞台上创建一个静态文本，键入文字闪动天下，并将文本颜色设置为桔红色。使用选择工具单击文本，将其选中。（2）使用菜单窗口/属性/滤镜，打开滤镜面板。（3）在这里先为文字添加凸起的斜角效果。单击添加滤镜按钮 ，在弹出的菜单中选择斜角。（4）这时可以看到在滤镜面板左端的滤镜列表中出现了斜角滤镜条目。单击斜角滤镜条目，可以显示出它的详细参数。每个滤镜都可以设置品质。品质越高，滤镜效果就越细腻，但是系统需求就越高。此外，对于斜角滤镜，可以进行以下设置：首先从类型弹出菜单上，选择要应用到对象的斜角类型。可以选择内斜角、外斜角或者完全斜角。设置模糊 X和模糊 Y的值，设置斜角的宽度和高度。 选择斜角的阴影和加亮颜色。在这里分别设置为暗桔黄色和亮桔黄色。一般要求与文本本身的颜色是同一个色系的，否则看起来会比较怪异。设置强度的值，设置斜角的不透明度。调整角度值，更改斜边投下的阴影角度。设置距离的值，定义斜角的宽度。 选中挖空复选框可以从视觉上隐藏源对象，并在挖空图像上只显示斜角。（5）然后，还希望文字从舞台上漂浮起来，这就需要添加投影效果。使用同样的方法，再添加一个投影滤镜。以进行设置的内容如下：调整模糊 X和模糊 Y滑块，设置投影的宽度和高度。 拖动距离滑块，设置阴影与对象之间的距离。 单击颜色框，打开颜色弹出窗口，然后设置阴影颜色。 拖动强度滑块，设置阴影暗度。数值越大，阴影就越暗。 对于角度，输入一个值来设置阴影的角度。 选中挖空复选框从视觉上隐藏源对象，并在挖空图像上只显示投影。 选择内侧阴影复选框，在对象边界内应用阴影。 选中隐藏对象复选框隐藏对象，并只显示其阴影。使用隐藏对象选项可以更轻松地创建逼真的阴影。 选择投影的质量级别。把质量级别设置为高就近似于高斯模糊。建议把质量级别设置为低，以实现最佳的回放性能。5.4 使用按钮学习目标按钮是四帧的交互对象。在Flash的发展过程中，按钮是最早用于交互控制的元素。本节学习的是按钮的使用方法。此外，按钮的颜色设置与图形实例是相同的，在此不再赘述。5.4.1 按钮的结构创建按钮的时候，Flash 会创建一个四帧的时间轴。前三帧显示按钮的三种可能状态；第四帧定义按钮的活动区域。时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。具体地说，按钮元件的时间轴上的每一帧都有一个特定的功能：第一帧是弹起状态，代表指针没有经过按钮时该按钮的状态。 第二帧是指针经过状态，代表当指针滑过按钮时，该按钮的外观。 第三帧是按下状态，代表单击按钮时，该按钮的外观。 第四帧是点击状态，定义响应鼠标单击的区域。此区域在 SWF 文件中是不可见的。 复杂按钮的时间轴可以包含多个图层。每个图层都可以包含4个帧。值得注意的是，如果按钮上的某个帧是缺失的（注意，不是空白关键帧），那么Flash将会在该帧插入普通帧，所以该帧的内容将与它前面的关键帧相同