好久没有发表文章了，这天写了一个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
姜大叔 阅读(1375)
评论(0) 编辑 收藏 所属分类:
Flash/Flex