Flex领航菜单

<?xml version="1.0" encoding="utf-8"?>
<!--created:Oct 6, 2010 file:FLEX4EffectExample1.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:comp="comp.*"
			   creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="srcview/index.html">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center"
						  verticalAlign="middle"/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			private var myTimer:Timer;

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				this.currentState="s1";
				doShow();
				this.myTimer=new Timer(5000);
				myTimer.addEventListener(TimerEvent.TIMER, onMoveCover);
				this.myTimer.start();

			}

			private function onMoveCover(e:TimerEvent):void
			{

				switch (this.currentState)
				{
					case "s1":
						{
							this.currentState="s2";
							doShow();
							break;
						}
					case "s2":
						{
							this.currentState="s3";
							doShow();
							break;
						}
					case "s3":
						{
							this.currentState="s1";
							doShow();
							break;
						}
				}
			}


			protected function label_clickHandler(event:MouseEvent):void
			{
				this.currentState=event.target.id;
				this.myTimer.stop();
				this.myTimer.start();
				doShow();

			}

			private function doShow():void
			{
				this.myAnimate.end();
				this.cover.visible=false;
				this.imgHolder.visible=false;
				this.cover.width=0;
				this.cover.height=0;
				this.cover.depth=0;
				this.cover.visible=true;
				this.imgHolder.visible=true;
				this.myAnimate.play();
			}
		]]>
	</fx:Script>

	<s:states>
		<s:State name="s1"/>
		<s:State name="s2"/>
		<s:State name="s3"/>
	</s:states>
	<fx:Declarations>
		<s:Animate duration="600"
				   id="myAnimate"
				   target="{cover}">
			<s:SimpleMotionPath property="width"
								valueBy="330"/>
			<s:SimpleMotionPath property="height"
								valueBy="80"/>
		</s:Animate>
	</fx:Declarations>
	<s:BorderContainer borderVisible="false">
		<s:Group width="500"
				 height="200">
			<s:BorderContainer width="200"
							   height="80"
							   depth="1"
							   top="0"
							   backgroundAlpha="0"
							   borderVisible="false">
				<mx:Image source="images/a.png" 
						  left="10"
						  top="7"/>
				<s:Label text="ITEYE首页"
						 color="0"
						 left="90"
						 top="20"
						 fontSize="24"
						 color.s1="0xFFFFFF"
						 id="s1"
						 buttonMode="true"
						 click="label_clickHandler(event)"/>
				<s:Label text="欢迎加入我们"
						 color="0"
						 color.s1="0xFFFFFF"
						 left="80"
						 top="50"
						 fontSize="14"/>
			</s:BorderContainer>
			<s:BorderContainer width="200"
							   height="80"
							   top="80"
							   depth="1"
							   backgroundAlpha="0"
							   borderVisible="false">
				<mx:Image source="images/b.png"
						  left="10"
						  top="7"/>
				<s:Label text="热点新闻"
						 left="90"
						 top="20"
						 fontSize="24"
						 color="0"
						 color.s2="0xFFFFFF"
						 id="s2"
						 buttonMode="true"
						 click="label_clickHandler(event)"/>
				<s:Label text="ITEYE博客"
						 left="80"
						 top="50"
						 fontSize="14"
						 color="0"
						 color.s2="0xFFFFFF"/>
			</s:BorderContainer>
			<s:BorderContainer width="200"
							   height="80"
							   top="160"
							   depth="1"
							   backgroundAlpha="0"
							   borderVisible="false">
				<mx:Image source="images/c.png"
						  left="10"
						  top="7"/>
				<s:Label text="ITEYE论坛"
						 left="90"
						 top="20"
						 fontSize="24"
						 color="0"
						 color.s3="0xFFFFFF"
						 id="s3"
						 buttonMode="true"
						 click="label_clickHandler(event)"/>
				<s:Label text="问答社区"
						 left="80"
						 top="50"
						 fontSize="14"
						 color="0"
						 color.s3="0xFFFFFF"/>
			</s:BorderContainer>

			<s:BorderContainer width="400"
							   height="240"
							   left="300"
							   backgroundImage.s1="@Embed('images/img1.png')"
							   id="imgHolder"
							   backgroundImage.s2="@Embed('images/img2.png')"
							   backgroundImage.s3="@Embed('images/img3.png')"
							   backgroundImageFillMode="clip"
							   borderVisible="false"
							   showEffect="Fade"
							   visible="false"/>
			<comp:MyCover depth="0"
						  top.s1="0"
						  top.s2="80"
						  top.s3="160"
						  height="0"
						  width="0"
						  showEffect="{myAnimate}"
						  id="cover"
						  visible="false"/>
		</s:Group>

	</s:BorderContainer>

</s:Application>