FlashCS3中文版基础与实例教程下.doc

第十一课 按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。 从外观上，按钮可以是任何形式。比如，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。 11.1.1 认识按钮元件 下面通过制作来详细认识按钮元件。 （1）新建一个影片文档，选择“插入”|“新建元件”命令，弹出一个【创建新元件】对话框，在“名称”中输入“按钮”，选择“类型”为“按钮”，如图1所示。 图1 新建按钮元件 （2）单击“确定”按钮，进入到按钮元件的编辑场景中，如图2所示。 图2 按钮元件的时间轴 按钮有特殊的编辑环境，通过在四个不同状态的帧时间轴上创建关键帧，可以指定不同的按钮状态。 “弹起”帧：表示鼠标指针不在按钮上时的状态。 “指针经过”帧：表示鼠标指针在按钮上时的状态。 “按下”帧：表示鼠标单击按钮时的状态。 “点击”帧：定义对鼠标做出反应的区域，这个反应区域在影片播放时是看不到的。 11.1.2变色按钮 本小节我们要制作一个变色按钮，按钮是一个蓝色的椭圆形，当鼠标指向按钮时，椭圆变为黄色，当鼠标单击按钮时，椭圆变为绿色。如图3所示。 图3　范例效果 具体的制作步骤如下： （1）新建一个影片文档，选择“插入”|“新建元件”命令，弹出【创建新元件】对话框，在“名称”中输入“椭圆”，选择“类型”为“按钮”，如图4所示。 图4 新建按钮元件 （2）单击“确定”按钮，进入到按钮元件的编辑场景中，选择椭圆工具，设置“填充色”为样本色中的“蓝色球形”。如图5所示。 图5 选择填充色 单击“确定”按钮。在场景中绘制一个如图6所示的椭圆。 图6 椭圆 （3）选择“指针经过”帧，按F6键插入一个关键帧。把该帧上的图形重新填充为黄色到黑色的放射状渐变色，效果如图7所示。 图7 “指针经过”帧上的图形 （4）选择“按下”帧，按F6键插入一个关键帧。把该帧上的图形重新填充为绿色到黑色的放射状渐变色，效果如图8所示。 图8 “按下”帧上的图形 （5）选择“点击”帧，按F6键插入一个关键帧，这样就定义了鼠标的响应区为椭圆。“点击”帧中的内容，在播放时是看不到的，但是它可以定义对鼠标单击所能够做出反应的按钮区域。也可以不定义“点击”帧，这时“弹起”状态下的对象就会被作为鼠标响应区。 至此，这个按钮元件就制作好了。现在返回“场景1”，并从“库”面板中将“椭圆”按钮元件拖放到舞台上，然后按下Ctrl＋Enter组合键测试一下，将鼠标指针移动到按钮上，按钮会变色了。 11.1.3 文字按钮 文字按钮是导航菜单中经常使用的元素。如图9所示，这就是一个网站导航菜单，里面包括5个文字按钮。 图9 导航菜单 下面我们先制作这个包括5个文字按钮的导航菜单。 （1）新建一个Flash CS3影片文档。设置舞台尺寸为480×80像素，背景颜色为黑色。 （2）选择“插入”|“新建元件”命令，弹出【创建新元件】对话框，在“名称”中输入“首页按钮”，选择“类型”为“按钮”，单击“确定”按钮，进入到按钮元件的编辑场景中。 （3）选择“文本工具”，在“属性”面板中，设置“文本类型”为静态文本，“字体”为楷体，“字体大小”为40，“文本颜色”为白色。在场景中输入“首页”文字。如图10所示。 图10 制作“弹起”帧上的文字 （4）选择“指针经过”帧，按F6键插入一个关键帧。把该帧上的文字颜色重新设置为黄色。 （5）选择“按下”帧，按F6键插入一个关键帧。把该帧上的文字颜色重新设置为红色。如图11所示。 图11制作“按下”帧上的文字 （6）选择“点击”帧，按F7键插入一个空白关键帧。单击“编辑多个帧”按钮，如图12所示。这样可以使文字显示出来，辅助创建“点击”帧上的感应区。 图12 单击“编辑多个帧”按钮 （7）选择“矩形工具”，绘制一个刚好覆盖着文字的矩形。如图13所示。这个矩形是文字按钮的鼠标感应区域。如果不创建这个矩形，默认情况下感应区域是文字线条，这样就会出现按钮感应不灵敏的现象，只有鼠标刚好指向文字线条上才能感应。 图13 绘制矩形 （8）返回“场景1”，并从“库”面板中将“首页”按钮元件拖放到舞台上，然后按下Ctrl＋Enter组合键测试。 （9）其他4个文字按钮的制作方法类似。制作完成以后，整齐排列在舞台上即可。 11.1.4透明按钮 透明按钮是一种很特殊的按钮，利用透明按钮制作上小节的导航菜单会更简便。