Flex Move Effect

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	width="100" height="100" borderStyle="solid" backgroundColor="#ffffff">
	<mx:Script>
		<![CDATA[
			import mx.events.EffectEvent;						
			import mx.effects.Move;			
			
			public var idx:Number;
			private var m1:Move = null;
			public function MoveTo( x:Number, y:Number):void
			{
				if( m1 == null)
				{
					m1 = new Move( this);
					m1.yFrom = this.y;
					m1.yTo = y;
					m1.xFrom = this.x;
					m1.xTo = x;
					m1.duration = 500;
					m1.addEventListener(EffectEvent.EFFECT_END, function(event:Event):void
                    {
                       m1 = null;
                    },false,0,true);					
                    m1.play();	
			    }	
			    else
			    {
					if( m1.xTo != x || m1.yTo != y)
					{
						m1.pause();	
						m1.yTo = y;
						m1.xTo = x;
						m1.play();
					}
			    }
			}
		]]>
	</mx:Script>
</mx:Canvas>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="components.*" width="950" height="575">
	<mx:Script>
		<![CDATA[
			import mx.events.*;
			import mx.containers.Tile;
			import mx.controls.Button;
			import mx.states.*;
			import mx.controls.Alert;
			import mx.rpc.events.*;
			import mx.collections.*;
			import mx.effects.*;
			import mx.core.*;
			import flash.utils.*;
			import flash.events.*;
			
			[Bindable]
			public var searchData:ArrayCollection;
			public var prodID:int = 0;
			
			
			private function giveID():int
			{
				prodID = prodID+1;
				return(prodID);
			}
			
			private function isClicked(clickObject:Object):void
			{
				Alert.show(clickObject.target.id.toString());
			}
			
			//private var prodTiles:Array = new Array();
			private var prodTiles:Array = new Array();
			
			private function createTile():void
			{
//				var prodTileTEST:Canvas = new Canvas;
				var prodTileTEST:myTile = new myTile();
				prodTileTEST.width = 100;
				prodTileTEST.height = 100;
				prodTileTEST.setStyle("backgroundColor",0xff0000);
				prodTileTEST.id = "p"+0;
				prodTileTEST.addEventListener(MouseEvent.CLICK, zoomOut);
				prodHBox.addChild(prodTileTEST);
				prodTiles.push(prodTileTEST);
				var i:int;
				for (i=1; i<10; i++)
				{
//					var prodTile:Canvas = new Canvas;
					var prodTile:myTile = new myTile();					
					prodTile.width = 100;
					prodTile.height = 100;
					prodTile.setStyle("backgroundColor",0x00ff00);
					prodTile.id = "p"+i;
					prodTile.visible = true;
					var theLabel:Label = new Label;
					theLabel.text = prodTile.id;
					prodTile.addChild(theLabel);
					//prodTile.addEventListener(MouseEvent.CLICK, zoomOut);
					prodTile.addEventListener(MoveEvent.MOVE, slideProd);
					prodHBox.addChild(prodTile);
					prodTiles.push(prodTile);
				}
				var cols:int = prodHBox.width / 110;
	        	var row:int = 0;
	        	var col:int = 0;
				for ( i = 0; i < prodTiles.length; i++)
	            {
		            prodTiles[i].MoveTo( 10 + (col * 110), 10 + (row * 110));
		            if( ++col >= cols)
		            {
						row++;
						col = 0;
		            }
	            }				
			}
			
			
			private function zoomOut(evt:Event):void
			{
				var zoomProdOut:Zoom = new Zoom(evt.target);
				zoomProdOut.zoomHeightTo = 0;
				zoomProdOut.zoomWidthTo = 0;
				zoomProdOut.duration = 500;
				zoomProdOut.play();
				zoomProdOut.addEventListener(EffectEvent.EFFECT_END,remChild);
			}
			private function remChild(evt:Event):void
			{
				prodHBox.removeChildAt(0);
			}
			
			private function slideProd(evt:Event):void
			{
				//pause();
				//Alert.show(evt.effectInstance.toString());
			}
			
			private function zoomIn(evt:Event):void
			{
				evt.target.width=10;
				evt.target.height=10;
				var zoomProdIn:Zoom = new Zoom(evt.target);
				zoomProdIn.zoomHeightTo = 50;
				zoomProdIn.zoomWidthTo = 50;
				zoomProdIn.duration = 500;
				zoomProdIn.play();
			}
			
			
			private function addBack():void
			{
				prodHBox.addChildAt(prodTiles[0],0);
			}
			
			/*
			private function timeMaker():void
			{
				var vanishTimer:Timer = new Timer(1,10);
				vanishTimer.addEventListener(TimerEvent.TIMER,alertHello);
				vanishTimer.start();
			}
			*/
			
			
			
			private function clearType():void
			{
				typeMenu.selectedIndex = 0;
			}
			private function filterSeries():void
			{
				if (seriesMenu.selectedIndex == 0)
				{
					searchData.filterFunction = null;
				}
				else
				{
					searchData.filterFunction = compareSeries;
				}
				searchData.refresh();
			}
			private function compareSeries(data:Object):Boolean
			{
				var currentProduct:String = seriesMenu.selectedLabel;
				return (currentProduct == data.search.series);
			}
			
			//---------------------------------------------------------------
 
			private function clearSeries():void
			{
				seriesMenu.selectedIndex = 0;
			}
			private function filterType():void
			{
				if (typeMenu.selectedIndex == 0)
				{
					searchData.filterFunction = null;
				}
				else
				{
					searchData.filterFunction = compareType;
				}
				searchData.refresh();
			}
			
			private function compareType(data:Object):Boolean
				{
				var showType:Boolean = false;
				if (data.search.type is String)
				{
					showType = (data.search.type == typeMenu.selectedLabel);
				}
				if (data.search.type is ArrayCollection)
				{
					for each (var s:String in data.search.type)
					{
						if (s == typeMenu.selectedLabel)
						{
							showType = true;
						}
					}
				}
				return showType;
			}
 
		]]>
	</mx:Script>
 
	
 
	<mx:Tile autoLayout="true" id="prodHBox" horizontalScrollPolicy="{ScrollPolicy.OFF}" verticalAlign="middle" horizontalAlign="center" width="635" height="489" borderStyle="solid" borderColor="#c7d3e3" x="315" y="86">
	</mx:Tile>
	<mx:VBox verticalGap="0" x="62" y="105" width="200" height="310" horizontalAlign="right">
		<mx:Label text="Narrow Your Selection" fontWeight="bold" color="#003a85" />
		<mx:Spacer height="8" />
		<mx:Label text="By Series" color="#003a85" />
		<mx:ComboBox id="seriesMenu" click="clearType()" change="filterSeries()" width="150">
			<mx:dataProvider>
				<mx:ArrayCollection>
					<mx:String>Show All</mx:String>
					<mx:String>1000</mx:String>
					<mx:String>1100</mx:String>
					<mx:String>1200</mx:String>
					<mx:String>2400</mx:String>
					<mx:String>3200</mx:String>
					<mx:String>S-Type</mx:String>
					<mx:String>WMC Miniature</mx:String>
				</mx:ArrayCollection>
			</mx:dataProvider>
		</mx:ComboBox>
		<mx:Spacer height="8" />
		<mx:Label text="By Type" color="#003a85" />
		<mx:ComboBox id="typeMenu" click="clearSeries()" change="filterType()" width="150">
			<mx:dataProvider>
				<mx:ArrayCollection>
					<mx:String>Show All</mx:String>
					<mx:String>Low Profile</mx:String>
					<mx:String>Stainless Steel</mx:String>
					<mx:String>Amplified</mx:String>
					<mx:String>Calibration Grade</mx:String>
					<mx:String>Miniature</mx:String>
					<mx:String>S-Type</mx:String>
					<mx:String>Load Buttons</mx:String>
					<mx:String>Load Washers</mx:String>
					<mx:String>Beam Type</mx:String>
					<mx:String>Single Point</mx:String>
					<mx:String>Column/Rod End</mx:String>
					<mx:String>Multi Axis</mx:String>
					<mx:String>Custom or Special Design</mx:String>
					<mx:String>Fatigue Rated</mx:String>
					<mx:String>Flange Style</mx:String>
					<mx:String>Load Pin</mx:String>
					<mx:String>Pancake Style</mx:String>
				</mx:ArrayCollection>
			</mx:dataProvider>
		</mx:ComboBox>
		<mx:Spacer height="8" />
		<mx:Label text="By Rated Capacity" color="#003a85" />
		<mx:VSlider/>
	</mx:VBox>
	<mx:Button x="700" y="28" label="Show" click="createTile();"/>
	<mx:Button x="890" y="28" label="Hide" />
	<mx:Label x="47" y="10" text="Label" id="testLabel" width="601"/>
	<mx:Button x="794" y="28" label="Add Back" click="addBack()"/>
</mx:Canvas>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248: