Attention, Zin 的交互设计之路。

之前见别人做过，也用过一次，但改来改去总不方便，还是自己写一个比较好用，效果就向苹果系统的导航菜单，一个鱼眼效果，鼠标移上去当前按钮放大，两侧依次梯度缩小。
制作步骤，
1.打开flash，创建两个层，as，mask；
2.在mask层制作一个大小随意的movieclip，注册点为左中，透明度设置为0；
3.制作按钮，请阅读代码部分，链接命名为mc，因为是attachmovie的，然后按照编号逐一控制显示，所以要将制作好的按钮按照顺序在mc的时间轴上一个按钮占一帧的排列，而每个按钮包含一个实例名为bg的作为热区（这是实例中fishEyesBtns的设置，另外一个sample更简单一些）；
4.as层写入以下代码
//x start var ex:Number = 70; //y align var ey:Number = 100; //mc width,height var ew:Number = 145; var eh:Number = 208; // distance var eDis:Number = 5; // scale var scMax = 110; var scMid = 80; //scale first ew = Math.round(ew*scMid/100); eh = Math.round(eh*scMid/100); var scMin = 60; var scStep = 15; //movieclip's x move speed < 1 var xMoveSpeed:Number = 0.2; //movieclip's scalse speed < 1 var scSpeed:Number = 0.2; //attach movieclip on base, modify it by yourself function attachMov(base:MovieClip, nameStr:String, n:Number):Void {   for (i=1; i<=n; i++) {     base.attachMovie("mc", nameStr+i, i, {_x:ex+(i-1)*(ew+eDis), _y:ey, id:i, sc:100});   } } //put the movieclips on right position and add event function setMov(base:MovieClip, nameStr:String, n:Number):Void {   attachMov(base, nameStr, n);   base.rol = 0;   base.tempRol = base.rol;   base.totalWidth = (ew+eDis)*n-eDis;   base.bg.onRollOver = function() {     base.rol = base.tempRol;   };   base.bg.onRollOut = function() {     base.rol = 0;     base.tempRol = base.rol;   };   base.bg.onEnterFrame = function() {     this._y = ey;     this._x = base[nameStr+1]._x-base[nameStr+1]._width/2;     this._width = base.totalWidth;     base.rol ? this._height=base[nameStr+base.rol].bg._height : this._height=eh;   };   for (i=1; i<=n; i++) {     base[nameStr+i].tempW = ew;     base[nameStr+i].myx = base[nameStr+i]._x;     base[nameStr+i].bg.onRollOver = function() {       base.rol = this._parent.id;       base.tempRol = base.rol;     };     base[nameStr+i].bg.onRollOut = function() {       base.rol = 0;     };     base[nameStr+i].bg.onRelease = function() {       trace(this._parent.id);     };     base[nameStr+i].onEnterFrame = function() {       base.totalWidth += (this._width-this.tempW);       this.tempW = this._width;       if (base.rol) {         if (this.id>base.rol) {           this.prevFrame();           this.sc = scMax-(this.id-base.rol)*scStep;           this.sc>scMin ? this.sc=this.sc : this.sc=scMin;           this.tx = base[nameStr+(this.id-1)]._x+base[nameStr+(this.id-1)]._width/2+this._width/2+eDis;         } else if (this.id<base.rol) {           this.prevFrame();           this.sc = scMax+(this.id-base.rol)*scStep;           this.sc>scMin ? this.sc=this.sc : this.sc=scMin;           this.tx = base[nameStr+(this.id+1)]._x-base[nameStr+(this.id+1)]._width/2-this._width/2-eDis;         } else {           this.nextFrame();           this.sc = scMax;           this.tx = this.myx;         }       } else {         this.prevFrame();         this.sc = scMid;         this.tx = this.myx;       }       this._x += (this.tx-this._x)*xMoveSpeed;       this._xscale += (this.sc-this._xscale)*scSpeed;       this._yscale = this._xscale;     };   } } setMov(this, "mc", 9);
5.完成，测试

源文件下载[fishEyesBtns.zip包含fishEyesBtns.fla, fishEyesBtnsSample.fla]

转载请注明出处，有问题请留言，谢谢。