Felx之菜单导航

Felx之菜单导航

环境搭建：MyEclipse 6.5+Flex Builder 3 Plug-in

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:states>
		<mx:State name="index1"><!-- 新建"index1"状态-->
			<mx:AddChild position="lastChild">
				<!-- 添加VBox组件，组件颜色为"#FFFFFF",透明度为0.5-->
				<mx:VBox id="myVBox1" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}"
				width="{myMenuBar.width}" height="248" backgroundColor="#FFFFFF" backgroundAlpha="0.5">
				</mx:VBox>
			</mx:AddChild>
		</mx:State>
		<mx:State name="index2"><!-- 新建"index2"状态-->
			<mx:AddChild position="lastChild">
				<!-- 添加VBox组件，组件颜色为"#F5E531",透明度为0.5-->
				<mx:VBox id="myVBox2" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}"
				width="{myMenuBar.width}" height="248" backgroundColor="#F5E531" backgroundAlpha="0.5">
				</mx:VBox>
			</mx:AddChild>
		</mx:State>
		<mx:State name="index3"><!-- 新建"index3"状态-->
			<mx:AddChild position="lastChild">
				<!-- 添加VBox组件，组件颜色为"#8DF531",透明度为0.5-->
				<mx:VBox id="myVBox3" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}"
				width="{myMenuBar.width}" height="248" backgroundColor="#8DF531" backgroundAlpha="0.5">
				</mx:VBox>
			</mx:AddChild>
		</mx:State>
		<mx:State name="index4"><!-- 新建"index4"状态-->
			<mx:AddChild position="lastChild">
				<!-- 添加VBox组件，组件颜色为"#31F5E5",透明度为0.5-->
				<mx:VBox id="myVBox4" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}"
				width="{myMenuBar.width}" height="248" backgroundColor="#31F5E5" backgroundAlpha="0.5">
				</mx:VBox>
			</mx:AddChild>
		</mx:State>
		<mx:State name="index5"><!-- 新建"index5"状态-->
			<mx:AddChild position="lastChild">
				<!-- 添加VBox组件，组件颜色为"#F731F5",透明度为0.5-->
				<mx:VBox id="myVBox5" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}"
				width="{myMenuBar.width}" height="248" backgroundColor="#F731F5" backgroundAlpha="0.5">
				</mx:VBox>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:Script>
		<![CDATA[
			import mx.events.MenuEvent;//引用MenuEvent类
			private function menuClickHandle(e:MenuEvent):void{
				if(e.label=="SubMenu1")//单击"SubMenu1"时切换至"index1"
				currentState="index1";
				else if(e.label=="SubMenu2")
				currentState="index2";
				else if(e.label=="SubMenu3")
				currentState="index3";
				else if(e.label=="SubMenu4")
				currentState="index4";
				else if(e.label=="SubMenu5")
				currentState="index5";
			}
		]]>
	</mx:Script>
	<mx:XMLList id="myXMLList">
		<menuitem id="Menu1">
			<menuitem id="SubMenu1" type="radio" groupName="one"/>
			<menuitem id="SubMenu2" type="radio" groupName="one"/>
		</menuitem>
		<menuitem id="Menu2"/>
		<menuitem id="Menu3"/>
		<menuitem id="Menu4">
			<menuitem id="SubMenu3" type="radio" groupName="two"/>
			<menuitem id="SubMenu4" type="radio" groupName="two" selected="true"/>
			<menutiem id="SubMenu5" type="radio" groupName="two"/>
		</menuitem>
	</mx:XMLList><!--MenuBar组件 菜单项数据来自XMLList组件-->
	<mx:MenuBar id="myMenuBar" dataProvider="{myXMLList}" labelField="@id"
		showRoot="false" width="293" horizontalCenter="0" y="24" change="menuClickHandle(event)"/>

	<mx:transitions><!-- 过渡效果集合-->
		<!--过渡效果，从"*"至"index1"-->
		<mx:Transition id="myTransition1" fromState="*" toState="index1">
			<mx:Parallel target="{myVBox1}"><!--效果组合，对象为myVBox1-->
				<mx:WipeDown duration="2000"/><!--从上至下显示效果-->
				<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/><!--透明度渐变效果-->
			</mx:Parallel>
		</mx:Transition>
		<!--过渡效果，从"*"至"index2"-->
		<mx:Transition id="myTransition2" fromState="*" toState="index2">
			<mx:Parallel target="{myVBox2}"><!--效果组合，对象为myVBox2-->
				<mx:WipeLeft duration="2000"/><!--从右至左显示效果-->
				<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/><!--透明度渐变效果-->
			</mx:Parallel>
		</mx:Transition>
		<!--过渡效果，从"*"至"index3"-->
		<mx:Transition id="myTransition3" fromState="*" toState="index3">
			<mx:Parallel target="{myVBox3}"><!--效果组合，对象为myVBox3-->
				<mx:WipeRight duration="2000"/><!--从左至右显示效果-->
				<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/><!--透明度渐变效果-->
			</mx:Parallel>
		</mx:Transition>
		<!--过渡效果，从"*"至"index4"-->
		<mx:Transition id="myTransition4" fromState="*" toState="index4">
			<mx:Parallel target="{myVBox4}"><!--效果组合，对象为myVBox4-->
				<mx:WipeUp duration="2000"/><!--从下至上显示效果-->
				<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/><!--透明度渐变效果-->
			</mx:Parallel>
		</mx:Transition>
		<!--过渡效果，从"*"至"index5"-->
		<mx:Transition id="myTransition5" fromState="*" toState="index5">
			<mx:Parallel target="{myVBox5}"><!--效果组合，对象为myVBox5-->
				<mx:Blur blurXFrom="0" blurXTo="100" duration="2000"/><!--模糊效果-->
				<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/><!--透明度渐变效果-->
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
</mx:Application>