关于按钮

按钮概述

按钮是Flash中的3类元件之一，它在制作交互式动画中起着重要的作用。

按钮元件只有4个帧，如下所示是一个新创建的按钮元件的时间轴。

Up（弹起）是按钮的正常状态，即未将鼠标移到按钮上时按钮呈现的状态。Over（指针经过）帧是当鼠标指针经过按钮时按钮要呈现的状态。Down（按下）帧是在按钮上按下鼠标左键时它要呈现的状态。Hit（点击）帧与前3帧不同，它不是按钮要呈现出的状态，而是作为该按钮感应鼠标动作的热区，即只有当鼠标指针移到该帧中的图形范围内时按钮才会作出响应。

按钮元件的前3个帧既可以是静态的图像，也可以是动态的影片剪辑。由于按钮的这种特性，可以使用它来制作非常丰富的交互特效。

如下所示是为一个按钮元件制作的4个关键帧。

如下所示分别是该按钮在动画中的3种状态。

除了可以在按钮的3种状态中放置不同的图像或动画，还可以向其中添加声音。

要让按钮实现更多的交互功能，就需要为按钮添加脚本。为按钮添加的脚本也是一种事件处理函数，它以on关键字开头。当选中按钮并打开其“动作”面板时，面板的标题栏显示“Actions-Button”。在脚本编辑区输入on(后可以看到Flash给出的提示，如下所示。

在光标下面的列表框中显示了与按钮相关的事件，直接输入或选择相应的事件即可为该事件设置事件处理函数。在播放动画时，如果触发了按钮的事件，即会执行相应的事件处理函数。

如下所示，在场景中添加了前例的按钮和一个动态文本框，文本变量为txt。

在按钮的“动作”面板中添加如下脚本：

on (rollOver) {

txt = "拿开你的鼠标！";

}

on (press) {

txt = "快快放手！";

}

on (release) {

txt = "叫你不许碰我！";

}

on (rollOut) {

txt = ""; }

添加脚本后的“动作”面板如下所示。

按Ctrl+Enter键测试动画，当鼠标指针移到按钮上时，执行on(rollOver)后的事件处理函数，效果如下所示。

当在按钮上按下鼠标左键时，效果如下所示。

在上例中，用到了按钮的几种事件，其中rollOver是鼠标指针经过按钮的事件，press是在按钮上按下鼠标左键的事件，release是在按钮上按下鼠标左键并释放（即单击）的事件，rollOut是鼠标指针从按钮上移开的事件。该例中的脚本都较简单，如果为按钮事件添加更复杂的处理函数，即可以实现更复杂的功能。
点击浏览该文件
点击浏览该文件

下面利用按钮的功能制作一个交互式相册，如下所示。

该Flash相册的制作步骤如下：

（1）将背景大小设置为400×360，并将背景颜色设为黑色。

（2）选择文本工具，将字体设为幼圆粗体，字号设为81，颜色设为灰色（#666666），在场景中添加文本“三国演义”。

（3）选择创建的文本，按Ctrl+C键进行复制，再按Ctrl+Shift+V键将复制的文本粘贴到当前位置。在“属性”面板中将复制的文本颜色改为橙色（#FF9900）。

（4）使用键盘上的方向键将复制的文本向左上方移动部分距离。

（5）选择下层的文本，按Ctrl+B键将其打散成矢量图。

（6）选择Modify→Shape→Expand Fill（扩散填充）菜单命令，打开对话框，将Distance的值设为4px，然后单击OK按钮，进行扩散填充。

（7）选中上下两层文本，按Ctrl+G键将其组合，然后将其对齐场景中心偏上的位置。

（8）在第2帧按F7键插入空白关键帧。选择File→Import→Import to Stage菜单命令，找到素材图片，并选中1.jpg，如下所示。

（9）单击打开按钮，出现如下所示对话框。

（10）单击是按钮，将图片序列导入到场景中，时间轴中自动插入3~17帧。

（11）逐一调整各帧中的图片大小和方向，使其宽度匹配场景的宽度。

（12）单击按钮新建一个图层，选择Window→Other Panels→Common Libraries→Buttons菜单命令，打开系统提供的按钮库。在其中找到如下所示的按钮，将其添加到场景中（左向按钮可以通过复制右向按钮并进行水平反向得到：选择Modifty→Transform→Flip Horizontal菜单命令）。其中，第1个按钮用于查看上一张图片，第2个按钮用于自动播放，第3个按钮用于停止自动播放，第4个按钮用于查看下一张图片。

（13）选中图层Layer 2的第1帧，按F9键打开其“动作”面板，在其中添加如下语句：

stop();

此时的时间轴状态如下所示。

（14）选中第1个按钮，在其“动作”面板中添加如下脚本：

on (release) {

_root.autoplay = false;

if (_root._currentframe != 2) {

prevFrame();

} else {

gotoAndStop(_root._totalframes);

} }

其中，_root._currentframe用来获取当前动画在主时间轴中的帧位置，_root._totalframes用来获取主时间轴中的总帧数。prevFrame()用于使用动画回退1帧并停止。

添加脚本后的“动作”面板如下所示。

（15）选中第4个按钮，在其“动作”面板中添加如下脚本：

on (release) {

_root.autoplay = false;

if (_root._currentframe != _root._totalframes) {

nextFrame();

} else {

gotoAndStop(2);

} }

其中，nextFrame()使动画播放到下一帧并停止。

（16）选中第2个按钮，在其“动作”面板中添加如下脚本：

on (release) {

_root.autoplay = true;

_root.counttime = 0;

_root.wait = 20;

_root.onEnterFrame = function() {

if (_root.autoplay == true) {

_root.counttime++;

if (_root.counttime == _root.wait && _root._currentframe != _root._totalframes) {

nextFrame();

_root.counttime = 0;

} else if (_root.counttime == _root.wait && _root._currentframe == _root._totalframes) {

gotoAndStop(2);

_root.counttime = 0;

}

}

}; }

单击该按钮时，即使变量_root.autoplay为true，每经过1帧的时间即让变量_root.counttime加1，当_root.counttime与_root.wait的值相等时跳转到下一帧，并将_root.counttime重新置为0，这样即实现了每经过20帧的时间即自动播放1帧。

（17）选中第3个按钮，在其“动作”面板中添加如下脚本：

on (release) {

_root.autoplay = false; }

单击该按钮将变量_root.autoplay重新置为false，即停止自动播放。

（18）按Ctrl+Enter键测试动画，效果如下所示。

点击浏览该文件
点击浏览该文件