FlashCS6中文版基础教程：第16章 按钮

1第16章按钮本章主要介绍按钮的本质、如何创建按钮、如何测试按钮以及如何使用按钮。216.1认识按钮元件按钮实际上是4帧的交互影片剪辑。当为元件选择按钮行为时，Flash会创建一个包含4帧的时间轴。前3帧显示按钮的3种可能状态；第4帧定义按钮的活动区域。时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳转到相应的帧。要制作一个交互式按钮，可把该按钮元件的一个实例放在舞台上，然后为该实例指定动作。必须将动作分配给文档中按钮的实例，而不是分配给按钮时间轴中的帧。按钮元件的时间轴上的每一帧都有一个特定的功能。(1)第1帧是弹起状态，代表指针没有经过按钮时该按钮的状态。(2)第2帧是指针经过状态，代表指针滑过按钮时该按钮的外观。(3)第3帧是按下状态，代表单击按钮时该按钮的外观。(4)第4帧是单击状态，定义响应鼠标单击的区域。此区域在SWF文件中是不可见的。316.2制作按钮本节主要讲解按钮的本质，并通过简单动态按钮的制作，来讲解按钮的制作方法。要求按钮的形状和颜色会随着鼠标事件而发生变化。416.2.1按钮的本质在观看Flash作品时，如果观众只能被动地观看，那么就少了许多的趣味。我们知道按钮是Flash元件中的一种，使用按钮是根据用户鼠标的动作，使得动画可以做出相应的反应。这样通过不同种类、不同作用的按钮，就可以实现人与Flash之间的交互。在Flash中，按钮是作为一个元件来制作的。在动画中合理地使用各种按钮，可以使动画更具人性化，操作感更强。516.2.2创建按钮1.创建按钮的大致步骤2.创建按钮的详细操作步骤616.3使用按钮使用按钮包括启用、编辑和测试按钮。默认情况下，Flash在创建按钮时会将它们保持在禁用状态，从而可以更容易地选择和处理这些按钮。当按钮处于禁用状态时，单击该按钮就可以选择它。当按钮处于启用状态时，它会响应我们已指定的鼠标事件，就如同SWF文件正在播放时一样，仍然可以选择已启用的按钮。可在工作时禁用按钮，然后启用按钮以便快速测试其行为。1.启用和禁用按钮2.选择、移动或编辑已启用的按钮3.测试按钮716.4上机实践操作本范例完成文件：\16\范例按钮.fla、范例按钮.swf。多媒体教学路径：光盘→多媒体教学→第16章。816.4.1实例介绍和展示本例通过运用【新建元件】命令、绘图工具、【保存】命令等制作一个弹性按钮。按钮效果如图16-24所示。916.4.2扩展形状启动FlashCS6，选择【文件】|【新建】菜单命令，创建一个新空白文档，文档大小为200200像素。1016.4.3绘制红色按钮(1)在舞台上按住Shift键以及鼠标左键不放画一个正圆，笔触颜色选择黑色，无填充色，高和宽为“163”，如图16-25所示。把这个正圆形拖曳到舞台以外，以作备用。(2)复制一个圆形，把这个复制的圆形拖曳到舞台中间，在【工具】面板中单击【颜料桶工具】按钮，在【混色器】面板中选择【类型】为【放射状渐变】，渐变颜色为从白色到浅黑色(数值为“#666666”)渐变，鼠标变成时，对准工作区的圆偏左上单击，这样能让白色的中心点偏左上，立体感更强，如图16-26所示。在【工具】面板中单击【选择工具】按钮，选中这个圆形，选择【修改】|【组合】菜单命令，把这个圆形也拖曳到舞台外面。1116.4.3绘制红色按钮(3)再复制一个圆形，拖曳到舞台中间来。用【任意变形工具】按钮修改这个圆形，将宽和高的值设置为“140”，如图16-27所示。(4)给这个小圆也进行和大圆一样的渐变填充，这次让白色的中心点偏右下，如图16-28所示。把这个小圆的黑边拖曳到一边备用，如图16-29所示。并且把没有黑边的小圆进行组合。1216.4.3绘制红色按钮(5)现在把这个小圆和大圆的中心位置对齐，放置在一起，如图16-30所示。记得要把它们进行组合。(6)把小圆的黑边再次进行渐变填充，白色和数值为“#FF000”的红色，白色中心点偏右下。填充颜色后，把黑色边拖曳到一边，只把红色小圆进行组合。按住Shift键等比例缩小红色小球，和步骤(5)中的按钮中心对齐，放置在一起，这样按钮就做好了，如图16-31所示。1316.4.4绘制黄色按钮复制一个红色按钮，别忘了红色按钮是个组合。把中间的红色部分填充为白色和“#FFFF00”的黄色渐变，白色中心点放在偏左上方，这样黄色按钮也做好了，如图16-32所示。1416.4.5绘制心形(1)绘制一个正圆形，宽和高的值为“53.5”，取消笔触，填充黑色。再复制一个正圆形，把两个圆水平紧挨着放置在一起，如图16-33所示。(2)绘制一个宽和高的值为“96.5”的方形，取消笔触，填充黑色，并旋转45度，把黑色方形朝上边的一个角擦去，将这个图形进行组合，如图16-34的所示。1516.4.5绘制心形(3)把步骤(1)和步骤(2)中心位置对齐，上下放置一起，用键盘上的方向键进行微调，如图16-35所示。把调整好的黑色心形分离，使之成为一个形状。(4)复制一个同样的心形，填充为红色渐变，配合红色按钮的亮点，白色中心点偏右下。把刚才的黑色心形放置在下层，露出一点，像是阴影的效果，如图16-36所示。把红色心形组合，调整宽为“75.7”、高为“69.5”。1616.4.5绘制心形(5)用同样的方法绘制一个蓝色心形，白色中心点如图16-37所示。把蓝色心形组合，调整宽为“75.7”、高为“69.5”。1716.4.6分别把红、蓝色心形放置在黄色和红色按钮上把红色心形、蓝色心形分别放置在黄色按钮和红色按钮上，效果如图16-38所示。把红、蓝色心形按钮分别进行组合。1816.4.7把做好的按钮转换为元件(1)在【工具】面板中单击【选择工具】按钮，选中红色心形按钮，选择【修改】|【转换为元件】菜单命令，弹出【转换为元件】对话框，设置【名称】为“按钮弹起时”，【类型】为【影片剪辑】，如图16-39所示，单击【确定】按钮。(2)在【工具】面板中单击【选择工具】按钮，再次选中红色心形按钮，选择【修改】|【转换为元件】菜单命令，弹出【转换为元件】对话框，设置【名称】为“鼠标按下时”，类型为【影片剪辑】，单击【确定】按钮。(3)在【工具】面板中选择【选择工具】，选中蓝色心形按钮，选择【修改】|【转换为元件】菜单命令，弹出【转换为元件】对话框，设置【名称】为“鼠标经过时”，【类型】为【影片剪辑】，单击【确定】按钮。1916.4.8导入声音素材(1)当我们用“鼠标按下”这个制作的按钮时，会发出声音，这个声音素材就要我们加入到库中作为元件。选择【文件】|【导入】|【导入到库】菜单命令，弹出【导入到库】对话框，把我们要用到的声音文件按路径找到，选中要导入的声音文件“Button2”，单击【打开】按钮。或双击要导入的声音文件“Button2”，如图16-40所示。这时候再看【库】面板，刚才导入的声音已经存在。(2)选择【插入】|【新建元件】菜单命令，弹出【创建新元件】对话框，设置【名称】为“心形按钮”，【类型】为【按钮】，如图16-41所示。单击【确定】按钮。2016.4.8导入声音素材(3)这时候场景有些变化，如图16-42所示。(4)当【弹起】帧红色显示时，把【库】面板中的【按钮弹起时】影片剪辑元件拖曳到舞台上。选择【窗口】|【对齐】菜单命令，调出【对齐】面板，在【工具】面板中单击【选择工具】按钮，选择【按钮弹起时】元件，启用【对齐面板】中的【相对于舞台分布】复选框，分别单击【水平对齐】按钮和【垂直对齐】按钮，该元件就置于舞台正中。其他元件也用同样的方法确保置于舞台正中。2116.4.8导入声音素材(5)单击【指针经过】帧，然后右击，在弹出的快捷菜单中选择【插入关键帧】命令，把【库】面板中的【鼠标经过时】影片剪辑元件拖曳到舞台上并对齐。(6)单击【按下】帧，然后右击，在弹出的快捷菜单中选择【插入关键帧】命令，把【库】面板中的【鼠标按下时】影片剪辑元件拖曳到舞台上并对齐。(7)把【库】面板中的声音文件“Button2”也拖曳到当前【鼠标按下时】元件上，则加入声音元件后的【按下】帧显示为。至此，心形按钮编辑完毕，单击返回场景模式。2216.4.9把制作好的按钮元件拖曳到舞台上(1)把【库】面板中的【心形按钮】元件拖曳到舞台中间，如图16-43所示。(2)选择【控制】|【测试影片】菜单命令，会测试播放我们当前正在编辑的文档，如图16-44所示。当鼠标经过按钮的时候，按钮颜色会发生改变；当鼠