如何制作动态缩放式按钮效果?

文章类别：Flash | 发表日期:2008-9-21 15:04:02

　　

如何制作动态缩放式按钮效果?
解决思路

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

?
图1??????影片剪辑a
影片剪辑b中一共有三个图层，每个图层各有6个要害帧。图层2中的6个空白要害帧得as都是stop();，图层1和图层3种的6个要害帧中分别是6个按钮。如图2所示。
图2????影片剪辑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;
?}
};
保存，测试一下效果吧！
buttonarray.fla

非凡说明

1、同一场景中的Mc的onEnterFrame事件并不是同时运行的，他们有一个先后顺序，所以不能指望每个Mc单独计算自己的位置，假如是那样的话，最终你看到的缩放是你想要的，但是在这个过程中，原本挨着的按钮由于速度的原因变得乱七八糟了，解决的办法很简单用一个Mc来计算所有MC的位置。
2、另外有一个问题是假如一个按钮由Rollover变成RollOut时，整个按钮尚未恢复到原始尺寸，又有新的按钮触发了onRollover事件，必然会推动整个按钮朝一个方向运动，解决的方法：在每一个onRollover事件最起初使所有的按钮都恢复到原始位置。
3、整个按钮隐含了一些特点，整个长度不变！！利用这个特点只要分两种情况：
?第1，最左边的按钮按下的时候其位置属性是不改变的，在这种情况下其他所有的位置都
要改变！！
??第2，以最左边为基础计算其他的按钮位置和_width属性，按钮的属性变化分放大的和缩小的，放大对象是鼠标经过的按钮。

上一篇：{技巧}如何制作文字鼠标跟随？ 人气:2020
下一篇：{技巧}鼠标跟随怎样实现？ 人气:8071

Flash视频教程