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