减小字体
增大字体
- ·上一篇文章：关于按钮 制作导航菜单
- ·下一篇文章：关于按钮 制作鼠标跟随动画
关于按钮 制作交互式相册
下面利用按钮的功能制作一个交互式相册，如下所示。
该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个按钮，在其“动作”面板中添加如下脚本：
_root.autoplay = false;
if (_root._currentframe != 2) {
prevFrame();
} else {
gotoAndStop(_root._totalframes);
}
}
其中，_root._currentframe用来获取当前动画在主时间轴中的帧位置，_root._totalframes用来获取主时间轴中的总帧数。prevFrame()用于使用动画回退1帧并停止。
on (release) {
添加脚本后的“动作”面板如下所示。
（15）选中第4个按钮，在其“动作”面板中添加如下脚本：
_root.autoplay = false;
if (_root._currentframe != _root._totalframes) {
nextFrame();
} else {
gotoAndStop(2);
}
}
其中，nextFrame()使动画播放到下一帧并停止。
on (release) {
（16）选中第2个按钮，在其“动作”面板中添加如下脚本：
_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帧。
on (release) {
（17）选中第3个按钮，在其“动作”面板中添加如下脚本：
_root.autoplay = false;
}
单击该按钮将变量_root.autoplay重新置为false，即停止自动播放。
on (release) {
（18）按Ctrl+Enter键测试动画，效果如下所示。
