containers.mxml

QS我也没用过

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml" horizontalGap="0" xmlns:qs="qs.containers.*" horizontalAlign="left" paddingLeft="30" paddingTop="30" paddingBottom="30" paddingRight="30" layout="horizontal" 
	backgroundColor="#343434"  initialize="initApp()" fillColors=""
viewSourceURL="srcview/index.html" xmlns:f="flash.filters.*" >	

		<Style>
		
		.insetBox {
			paddingBottom: 30;
			paddingLeft: 30;
			paddingRight: 30;
			paddingTop: 30;	
		}
		
		Application {
			color: #FFFFFF;
		}
		
		
	</Style>
	<Script>
		<![CDATA[
			import mx.core.UIComponent;

			
			
			private function initApp():void
			{
			}

			private function rollOver(event:MouseEvent):void			
			{
				event.target.percentWidth = 100;
			}
			private function rollOut(event:MouseEvent):void			
			{
				event.target.percentWidth = 50;
			}
						
			private function moveToFront(event:MouseEvent):void
			{
				var box:UIComponent = UIComponent(event.currentTarget);
				for(var i:int = 0;i<box.numChildren;i++)
				{
					var stagPt:Point = box.localToGlobal(new Point(box.mouseX,box.mouseY));
					if(box.getChildAt(i).hitTestPoint(stagPt.x,stagPt.y,true))
					{
						box.setChildIndex(box.getChildAt(i),0);
						break;
					}
				}
			}
		]]>
		</Script>			
		
		<qs:AnimatedPanel title="animated panel" layout="vertical"  width="100%" height="100%" verticalGap="30" styleName="insetBox" id="top">
				
			<qs:AnimatedHBox id="c1" width="100%" height="100%" click="moveToFront(event);" >
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
			</qs:AnimatedHBox>							
			<qs:AnimatedHBox id="c2" width="100%" height="100%" click="moveToFront(event);" >
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
			</qs:AnimatedHBox>							
			<qs:AnimatedTile id="c3" tileHeight="100" tileWidth="100" verticalScrollPolicy="auto" width="100%" height="100%" click="moveToFront(event);" >
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#FFAAAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAFFAA" rollOut="rollOut(event)" rollOver="rollOver(event)" />
				<HBox width="50%" height="100%" backgroundColor="#AAAAFF" rollOut="rollOut(event)" rollOver="rollOver(event)" />
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																
			</qs:AnimatedTile>							
		</qs:AnimatedPanel>
</Application>