缩放式按钮如何制作?
具体步骤
我们需要准备两个影片剪辑,分别命名为“a”和“b”。影片剪辑a中一共有两个关键帧,第1关键帧中是一个黄颜色的矩形,也就是按钮的起始颜色。第2关键帧中是同样大小的蓝色矩形。分别在两个关键中上面添加as:stop();。如图3.3.99所示。

图3.3.99 影片剪辑a
影片剪辑b中一共有三个图层,每个图层各有6个关键帧。图层2中的6个空白关键帧得as都是stop();,图层1和图层3种的6个关键帧中分别是6个按钮。如图3.3.100所示。

图3.3.100 影片剪辑b
下面我们回到场景1,在第1帧中添加as:
先将按钮导入
for (var i = 0; i<=5; i++) {
a = attachMovie("a", "a"+i, i);
b = _root.a.attachMovie("b", "b"+i, (10+i));
b.gotoAndStop(i+1);
a.n = i;
a._x = 25+100*i;
b._x = 50;
b._y = -1;
a._y = 100;
a.old_x = a._x;
a.onRollOver = pres;
a.onRollOut = rele;
}
//定义_root.init值,当为1时表示恢复成最初的状态,0时表示放大移动状态
_root.init = 1;
下面是鼠标按下时,产生几个重要信息:_root.pressnumber 按下按钮的名字数字
_root.init = 0;告诉系统现在到了缩放的时候了
function pres() {
this.gotoAndStop(2);//第二贞是鼠标经过时按钮的画面
for (var i = 0; i<=5; i++) {
_root["a"+i]._x = _root["a"+i].old_x;
_root["a"+i]._width = 100;
}
_root.pressnumber = this.n;
_root.init = 0;
}
//鼠标滑出时恢复原始
function rele() {
this.gotoAndStop(1);
_root.init = 1;
}
//用主场景的onEnterFrame统一计算各个按钮尺寸
onEnterFrame = function () {
main = _root["a"+pressnumber];//简单化按下的按钮对象
//下面的代码是回复时的情况
if (!init) {
main.ax = (200-main._width)/2;
main.vx += main.ax;
main._width += main.vx;
//分几种情况请仔细体会:
if (pressnumber == 0) {
//如果最左边的按钮按下了,那么它右边的按钮pressnumber+1开始执行回复,他们回复的速度相同,等于原放大按钮回复速度的五分之一
for (var i = pressnumber+1; i<=5; i++) {
fol = _root["a"+i];
befor = _root["a"+(i-1)];//用前面的按钮位置来定自己的位置,最终焦点就是最左边的按钮了
fol._width -= (main.vx/5);
fol._x = befor._x+befor._width;
}
} else {//如果按下的按钮不是最左边的,先分大的两种情况,一是按下的按钮,一是其他没按的按钮,其他没按的按钮又分最左边的,与普通的,最左边的_x是不变的,其他的都改变。
for (var i = 0; i<=5; i++) {
fol = _root["a"+i];
if (i != pressnumber) {
fol._width -= (main.vx/5);
if (i != 0) {//这里面是要变位置的MC
befor = _root["a"+(i-1)];
fol._x = befor._x+befor._width;
}
} else {
befor = _root["a"+(pressnumber-1)];
main._x = befor._x+befor._width;
}
}
}
main.vx *= .6;//弹性系数,可以试试改改
} else {
//下面是按下按钮时的情况
main.ax = (100-main._width)/2;
main.vx += main.ax;
main._width += main.vx;
if (pressnumber == 0) {
for (var i = pressnumber+1; i<=5; i++) {
fol = _root["a"+i];
befor = _root["a"+(i-1)];
fol._width -= (main.vx/5);
fol._x = befor._x+befor._width;
}
} else {
for (var i = 0; i<=5; i++) {
fol = _root["a"+i];
if (i != pressnumber) {
fol._width -= (main.vx/5);
if (i != 0) {
befor = _root["a"+(i-1)];
fol._x = befor._x+befor._width;
}
} else {
befor = _root["a"+(pressnumber-1)];
main._x = befor._x+befor._width;
}
}
}
main.vx *= .6;
}
};
保存,测试一下效果吧!
特别说明
1、同一场景中的Mc的onEnterFrame事件并不是同时运行的,他们有一个先后顺序,所以不能指望每个Mc单独计算自己的位置,如果是那样的话,最终你看到的缩放是你想要的,但是在这个过程中,原本挨着的按钮由于速度的原因变得乱七八糟了,解决的办法很简单用一个Mc来计算所有MC的位置。
2、另外有一个问题是如果一个按钮由Rollover变成RollOut时,整个按钮尚未恢复到原始尺寸,又有新的按钮触发了onRollover事件,必然会推动整个按钮朝一个方向运动,解决的方法:在每一个onRollover事件最起初使所有的按钮都恢复到原始位置。
3、整个按钮隐含了一些特点,整个长度不变!!利用这个特点只要分两种情况:
第1,最左边的按钮按下的时候其位置属性是不改变的,在这种情况下其他所有的位置都
要改变!!
第2,以最左边为基础计算其他的按钮位置和_width属性,按钮的属性变化分放大的和缩小的,放大对象是鼠标经过的按钮。
