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>