flex中使用states和viewStack场景切换

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">
	
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void {
				currentState = "state2";//当前场景
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	<!--声明两个场景-->
	<s:states>
		<s:State name="state1"/>
		<s:State name="state2"/>
	</s:states>
	<!--panel在State1不可见-->
	<s:Panel title="panel" visible.state1="false">
	</s:Panel>
	<!--button在State2不可见 鼠标点击会改变currentState的值 从而切换场景 -->
	<s:Button label="Button" visible.state2="false" 
			  click.state1="button1_clickHandler(event)"/>
	
	<mx:ViewStack id="vs">
		<s:NavigatorContent>
			<s:Panel title="panel1">
				<s:Button label="跳转到第二个panel" click="vs.selectedIndex=1"/>
			</s:Panel>
		</s:NavigatorContent>
		<s:NavigatorContent>
			<s:Panel title="pannel2"/>
		</s:NavigatorContent>
	</mx:ViewStack>
</s:Application>