transition effects between viewstack

<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack selectedIndex="0" creationPolicy="all" xmlns:mx="http://www.adobe.com/2006/mxml">


	<mx:WipeDown duration="1000" id="wipeDown" />
	<mx:WipeUp duration="1000" id="wipeUp"/>
	
	<mx:Canvas id="folding" showEffect="{wipeDown}" hideEffect="{wipeUp}" backgroundColor="red"  width="400" height="298">
		
		<mx:Label text="Folding State" x="126" y="141" width="178" height="10%">
		</mx:Label>
		<mx:Button x="126" y="78" label="Switch" click="selectedChild=unfolding"/>
	</mx:Canvas>
	
	<mx:Canvas id="unfolding" showEffect="{wipeUp}" hideEffect="{wipeDown}" backgroundColor="blue" width="400" height="400">
		<mx:Label text="Unfolding State" x="10" y="132" width="380" height="21"/>
		<mx:Label text="Other Things" x="10" y="161" width="380" height="119"/>
		<mx:Button x="10" y="66" label="switch" click="selectedChild=folding"/>
	</mx:Canvas>
	
</mx:ViewStack>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:comp="comp.*">
	
	<mx:Script>
		<![CDATA[
			import mx.events.IndexChangedEvent;
			
			private function onSwitch(event:IndexChangedEvent):void {
				var oldIndex:int=event.oldIndex;
				var newIndex:int=event.newIndex;
				var newComp:Object=event.relatedObject; //new member view object
				trace("oldIndex="+oldIndex+" newIndex="+newIndex+" newComp="+newComp+" id="+newComp.id); 
				
			}
		]]>
	</mx:Script>
	

	<mx:Label text="Heading"/>
	
	<comp:PageViewsTransition id="viewid"  change="onSwitch(event)"/>

</mx:Application>