首页 |上一页 | 下一页

第十课 按钮元件

    按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。

    从外观上，“按钮”可以是任何形式，比如，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。

    按钮有特殊的编辑环境，通过在四个不同状态的帧时间轴上创建关键帧，可以指定不同的按钮状态，如图 10-1所示。

图10-1 按钮的四帧编辑环境

    【弹起】帧：表示鼠标指针不在按钮上时的状态。

    【指针经过】帧：表示鼠标指针在按钮上时的状态。

    【按下】帧：表示鼠标单击按钮时的状态。

    【点击】帧：定义对鼠标做出反应的区域，这个反应区域在影片播放时是看不到的。

    【点击】帧比较特殊，这个关键帧中的图形将决定按钮有效范围。它不应该与前3个帧的内容一样，但这个图形应该大到足够包容前3个帧的内容。

    注意：有的朋友总是抱怨：怎么我的按钮“一闪闪的”，很难单击它！这一般发生在文字类按钮，如果你没在“按钮有效区”关键帧设置一个适当图形，那么，这个按钮的有效区仅是第一帧的对象，文字的线条较细且分散，难怪很难找到“有效区”了！

    “有效区”图形还可以充满整个屏幕，退出按钮编辑后，“有效区”图形是不可见的。

    根据实际需要，你还可以把按钮做成如图 10-2所示的结构。

图 10-2 按钮的帧内容可以随意扩充

    从图 10-2中可以看到，按钮的3个“状态关键帧”中，可以放置除按钮本身以外的任何Flash对象，其中：【状态音效】图层设置了2种音效；【按钮动画】图层使鼠标不同操作出现不同动画效果，而【按钮底图】中可放置不同的图片。

    你可以想象一下：利用这个特点，我们可以把按钮做成何等有声有色、变化无限的效果！

    在Flash 5及之前的版本中，按钮的“状态关键帧”还接受ActionScript指令，从Flash MX开始已经废弃了这一功能，事实上，在按钮实例中加入“事件指令”更方便、更灵活！

    按钮的“事件指令”以及在这些“事件”中进行的动画编程，使按钮的创作空间变得无比宽广！有关按钮事件及其应用请你参阅第六章的相关内容。

    另外，“按钮”还可以设置“实例名”，从而使按钮成为能被ActionScript控制的对象。

    你一定为那些精彩的动画游戏以及丰富多彩的网络交互动画所惊叹，按钮在其中起着举足轻重的作用，其实，通过自己不断的磨练，你完全能够做出让别人赞叹的作品！

影片剪辑在按钮元件中的应用范例－放电按钮

    本小节要制作一个放电的按钮，当鼠标放到按钮上，发出夺目的光芒，炫耀无比。效果如图 10-3所示。

图 10-3 放电按钮

1．创建“放电”影片剪辑元件 

    （１）新建一个Flash 8影片文档，设置舞台尺寸为200×50像素，背景颜色设置为蓝色，其他保持默认设置。

    （2）新建一名为“放电”的影片剪辑元件。在这个元件的编辑场景中，选择“线条工具”，笔触颜色为“白色”，在场景中画一段宽高约20像素折线。如图 10-4所示。

图 10-4 绘制折线（放大到800%）

    （3）在第３帧插入关键帧，用“任意变形工具”将场景中的折线向左拉约至60像素。 

    （4）单击第1帧，打开“属性”面板，创建“补间形状”。在第５帧插入帧。

    （5）新建“图层2”。在第３帧插入空白关键帧。选择“椭圆工具”，无笔触颜色。打开“混色器”面板，设置填充样式为“放射状”，左色标为白色，Alpha值100％，右色标也为白色，Alpha值0％，如图 10-5所示。

图 10-5 “混色器”面板

    在场景中画一个圆。打开“属性”面板，将其大小设定为（120×126）。将其拖放到折线的左端。如图 10-6所示。 

图 10-6 放电图

2．创建“放电按钮”元件 

    （1）新建一名为“放电按钮”的按钮元件。在这个元件编辑场景中，将“图层1”更名为“按钮”。双击“矩形工具”，在弹出的“矩形设置”对话框中设置“边角半径”为“20点”，如图 10-7所示。

图 10-7 设置矩形的边角半径

    设置“笔触颜色”为无，“填充色”任意，在场景中画一个矩形。打开“属性”面板，设置这个矩形的大小为250×45像素，坐标为（0，0）。

    （2）选中矩形，打开“混色器”面板，填充类型为“线性”，增加一个色标，自左向右三个色标颜色值为“#000000、#AFB5FA、#333333”，对矩形进行填充。设置如图 10-8所示。

图 10-8 按钮填充色设置

    （3）选中矩形，单击“填充变形工具”，旋转“旋转手柄”90度，向下拉动“缩放”手柄，调整填充色如图 10-9所示。

图 10-9 调整渐变填充

    （4）在“点击”帧按F6插入关键帧。

    （5）新建一名为“发光”的图层。选中“发光”层的矩形，打开“混色器”面板，设置如图 10-10所示。自左向右色标颜色值为“#FFFFFF、#B7C7FF、##B7C7FF/0%”。

图 10-10 发光填充色设置

    在该图层“指针经过”帧插入空白关键帧，选用“椭圆工具”绘制一个无笔触颜色的圆，选中圆，打开“属性”面板，设置圆的大小为80×80像素，坐标为（-107.6，0）。在“点击”帧按F7插入空白关键帧。

    （6）新建一名为“白光”的图层。在该图层“指针经过”帧插入空白关键帧，选用“椭圆工具”绘制一个无笔触颜色的圆。选中圆，打开“混色器”面板，设置如图 10-11所示，自左向右色标颜色值为“#BFC3EE、#FFFFFF”。打开“属性”面板，设置圆的大小为60×60像素，坐标为（-187，0）。在“点击”帧按F7插入空白关键帧。

图 10-11 白光填充色设置

    （7）新建一名为“圆球”的图层。在该图层“弹起”帧，选用“椭圆工具”绘制一个无笔触颜色的圆。选中圆，打开“混色器”面板，设置如图 10-12所示。自左向右色标颜色值为“#DDDFFC、#ABB2FA、#424366”。打开“属性”面板，设置圆的大小为50×50像素，坐标为（-187,0）。在“点击”帧按F7插入空白关键帧。

图 10-12 圆球填充色设置

    （8）新建一名为“动画”的图层。在“指针经过”、“点击”帧按F7插入空白关键帧。选择“指针经过”帧，打开“库”面板，将库中的“放电”元件拖入场景。打开“属性”面板，设置其坐标为（-118，0）。

    （9）新建一名为“文字”的图层，在“弹起”帧输入文字“Button”。打开“属性”面板，设置字体为“Arial Black”，字母间距“12”，字体大小“24”，文本颜色“#000000”；在“指针经过”帧插入关键帧，改变字体颜色“#444444”；在“按下”帧插入关键帧，改变字体颜色“#808080”；在“点击”帧插入空白关键帧。

图 10-13 图层结构

    转回“场景1”，将“放电按钮”元件从库中拖入主场景中央，即完成本节范例。

    本小节制作按钮，主要是在按钮某个帧上添加动画效果（影片剪辑元件），从而组合成一款炫丽的动态按钮。

最终效果