随笔-31  评论-257  文章-0  trackbacks-0
      好久没有发表文章了,这天写了一个Flash的一个动画菜单的效果,在之前看到一个站的一个菜单效果挺不错,就试着自已也用纯AS3写一个出来试试。看了一下研究了一个算法,自已也写了个出来,写得比较粗糙,所以运行时可能还会有点小问题,有空要再优化一下算法才行。


有点像 Apple 的菜单效果。原本是计划用图片的,不过后右为简单起见,就只用Sprite画的一个小方格代替了,供大家学习学习,也希望高手指点一下算法!
以下是代码:
  1 package {
  2     import flash.display.Sprite;
  3     import flash.geom.Point;
  4     import flash.events.MouseEvent;
  5     import flash.events.Event;
  6     import fl.transitions.Tween;
  7     import fl.transitions.easing.*;
  8 
  9     public class jiangmenu extends Sprite
 10     {
 11         private var photoList:Array;            //存放所有方格的数组
 12         private var defaultLocation:Array;        //存放对应方格数组的默认位置信息
 13         private var targetLocation:Array;        //存放对应方格数组的改变的目标位置信息
 14         private var defaultScale:Array;            //存放对应方格数组的默认缩放比例信息
 15         private var targetScale:Array;            //存放对应方格数组的目标缩放比例信息
 16        
 17         private var maxScale:Number = 1.8;        //最大的缩放比例(即鼠标指向的那个方格)
 18         private var scaleRate:Number = 0.65;    //缩放比例向两边衰减的值
 19         private var sideWidth:Number = 30;        //方格的边长
 20        
 21         private var tween:Tween;
 22        
 23         /**
 24          * 构造函数
 25          */
 26         public function jiangmenu()
 27         {
 28             photoList = createPhotoList();
 29             createDefaultLocation();
 30             createDefaultScale();
 31             addListener();
 32         }
 33        
 34         /**
 35          * 该函数作于对每个按钮(小方格)增加侦听器
 36          */
 37         private function addListener():void{
 38             for(var i:int=0;i<photoList.length;i++){
 39                 var p:Point = defaultLocation[i] as Point;
 40                 var sp:Sprite = photoList[i] as Sprite;
 41                 sp.x = p.x;
 42                 sp.y = p.y;
 43                 addChild(sp);
 44                 sp.addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);
 45                 sp.addEventListener(MouseEvent.MOUSE_OUT,onMouseOut);
 46             }
 47            
 48         }
 49        
 50         /**
 51          * 鼠标离开小方格时
 52          */
 53         private function onMouseOut(e:MouseEvent):void{
 54             playDefault();
 55         }
 56        
 57         /**
 58          * 鼠标移动到小方格时
 59          */
 60         private function onMouseOver(e:MouseEvent):void{
 61             var sp:Sprite = e.target as Sprite;
 62             var index:int = photoList.indexOf(sp);
 63             var dp:Point = defaultLocation[index] as Point;
 64             Point(targetLocation[index]).x = dp.x;
 65             Point(targetLocation[index]).y = dp.y;
 66             targetScale[index] = 1*maxScale;
 67            
 68             playSingle(index);
 69            
 70             setFrontPhoto(index);
 71             setBackPhoto(index);
 72            
 73         }
 74        
 75         /**
 76          * 为单个方格进行播放动画效果
 77          */
 78         private var tmpSP:Sprite;
 79         private function playSingle(index:Number):void{
 80             tmpSP = photoList[index] as Sprite;
 81            
 82             new Tween(tmpSP,"scaleX",Elastic.easeOut,tmpSP.scaleX,targetScale[index],1,true);
 83             new Tween(tmpSP,"scaleY",Elastic.easeOut,tmpSP.scaleY,targetScale[index],1,true);
 84             new Tween(tmpSP,"y",Elastic.easeOut,tmpSP.y,Point(targetLocation[index]).y,1,true);
 85         }
 86        
 87         /**
 88          * 当鼠标离开小方格时,将播放还原到默认大小时的动画
 89          */
 90         private function playDefault():void{
 91             for(var i:int=0;i<photoList.length;i++){
 92                 tmpSP = photoList[i] as Sprite;
 93                 new Tween(tmpSP,"scaleX",Elastic.easeOut,tmpSP.scaleX,defaultScale[i],1,true);
 94                 new Tween(tmpSP,"scaleY",Elastic.easeOut,tmpSP.scaleY,defaultScale[i],1,true);
 95                 new Tween(tmpSP,"y",Elastic.easeOut,tmpSP.y,Point(defaultLocation[i]).y,1,true);
 96             }
 97         }
 98        
 99         /**
100          * 以鼠标移动到当前方格的索引为参数,设置该方格前面的方格的位置与缩放信息并播放
101          * 设置完成后再设置前面的(使用递归)
102          */
103         private function setFrontPhoto(index:int):void{
104             if(index == 0){
105                 return;
106             }
107             var bp:Point = targetLocation[index] as Point;
108             var bs:Number = targetScale[index];
109            
110             var ms:Number = bs * scaleRate;
111             var mp:Point = new Point(bp.x,bp.y - sideWidth*bs*.5 - sideWidth*ms*.5);
112            
113             targetLocation[index - 1= mp;
114             targetScale[index - 1= ms;
115            
116             playSingle(index - 1);
117            
118             setFrontPhoto(index - 1);
119         }
120        
121         /**
122          * 以鼠标移动到当前方格的索引为参数,设置该方格后面的方格的位置与缩放信息并播放
123          * 设置完成后再设置后面的(使用递归)
124          */
125         private function setBackPhoto(index:int):void{
126             if(index == (targetLocation.length - 1)){
127                 return;
128             }
129             var bp:Point = targetLocation[index] as Point;
130             var bs:Number = targetScale[index];
131            
132             var ms:Number = bs * scaleRate;
133             var mp:Point = new Point(bp.x,bp.y + sideWidth*bs*.5 + sideWidth*ms*.5);
134            
135             targetLocation[index + 1= mp;
136             targetScale[index + 1= ms;
137            
138             playSingle(index + 1);
139            
140             setBackPhoto(index + 1);
141         }
142        
143         /**
144          * 创建默认的原始大小时的缩放比例
145          */
146         private function createDefaultScale():void{
147             defaultScale = new Array();
148             targetScale = new Array();
149             for(var i:int=0;i<10;i++){
150                 defaultScale[i] = 1;
151                 targetScale[i] = 1;
152             }
153         }
154        
155         /**
156          * 创建默认的原始大小时位置(X,Y)信息
157          */
158         private function createDefaultLocation():void{
159             defaultLocation = new Array();
160             targetLocation = new Array();
161             for(var i:int=0;i<10;i++){
162                 var point:Point = new Point();
163                 point.x = 100;
164                 point.y = 30 * i + 50;
165                 defaultLocation.push(point);
166                 targetLocation.push(point);
167             }
168         }
169        
170         /**
171          * 创建10个小方格,这里直接产生了,不用循环了
172          */
173         private function createPhotoList():Array{
174             var arr:Array = new Array();
175            
176             var sp1:Sprite = new Sprite();
177             var sp2:Sprite = new Sprite();
178             var sp3:Sprite = new Sprite();
179             var sp4:Sprite = new Sprite();
180             var sp5:Sprite = new Sprite();
181             var sp6:Sprite = new Sprite();
182             var sp7:Sprite = new Sprite();
183             var sp8:Sprite = new Sprite();
184             var sp9:Sprite = new Sprite();
185             var sp10:Sprite = new Sprite();
186            
187             sp1.graphics.beginFill(0xff0000);
188             sp1.graphics.drawRect(-15,-15,sideWidth,sideWidth);
189             sp1.graphics.endFill();
190            
191             sp2.graphics.beginFill(0x00ff00);
192             sp2.graphics.drawRect(-15,-15,sideWidth,sideWidth);
193             sp2.graphics.endFill();
194            
195             sp3.graphics.beginFill(0x0000ff);
196             sp3.graphics.drawRect(-15,-15,sideWidth,sideWidth);
197             sp3.graphics.endFill();
198            
199             sp4.graphics.beginFill(0x00ffff);
200             sp4.graphics.drawRect(-15,-15,sideWidth,sideWidth);
201             sp4.graphics.endFill();
202            
203             sp5.graphics.beginFill(0xffff00);
204             sp5.graphics.drawRect(-15,-15,sideWidth,sideWidth);
205             sp5.graphics.endFill();
206            
207             sp6.graphics.beginFill(0x0f0f0f);
208             sp6.graphics.drawRect(-15,-15,sideWidth,sideWidth);
209             sp6.graphics.endFill();
210            
211             sp7.graphics.beginFill(0xf0f0f0);
212             sp7.graphics.drawRect(-15,-15,sideWidth,sideWidth);
213             sp7.graphics.endFill();
214            
215             sp8.graphics.beginFill(0xff00ff);
216             sp8.graphics.drawRect(-15,-15,sideWidth,sideWidth);
217             sp8.graphics.endFill();
218            
219             sp9.graphics.beginFill(0x000000);
220             sp9.graphics.drawRect(-15,-15,sideWidth,sideWidth);
221             sp9.graphics.endFill();
222            
223             sp10.graphics.beginFill(0xffffff);
224             sp10.graphics.drawRect(-15,-15,sideWidth,sideWidth);
225             sp10.graphics.endFill();
226            
227             arr = [sp1,sp2,sp3,sp4,sp5,sp6,sp7,sp8,sp9,sp10];
228            
229             return arr;
230         }
231     }
232 }
233 



posted on 2008-07-29 14:33 姜大叔 阅读(1364) 评论(0)  编辑  收藏 所属分类: Flash/Flex

只有注册用户登录后才能发表评论。


网站导航: