利用ViewStack实现页面的跳转

   1. <?xml version="1.0" encoding="utf-8"?>
   2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   3.         layout="vertical"
   4.         verticalAlign="middle"
   5.         backgroundColor="white"
   6.         creationComplete="init();">
   7.  
   8.     <mx:Script>
   9.         <![CDATA[
  10.             private var timer:Timer;
  11.  
  12.             private function init():void {
  13.                 timer = new Timer(1000); /* 1000ms == 1second */
  14.                 timer.addEventListener(TimerEvent.TIMER, onTimer);
  15.             }
  16.  
  17.             private function onTimer(evt:TimerEvent):void {
  18.                 var idx:uint = viewStack.selectedIndex;
  19.                 var max:uint = viewStack.numChildren;
  20.  
  21.                 var newIdx:uint = ++idx % max;    //这一句很牛x
  22.                 viewStack.selectedIndex = newIdx;
  23.             }
  24.  
  25.             private function startTimer():void {
  26.                 if (!timer.running) {
  27.                     timer.start();
  28.                 }
  29.             }
  30.  
  31.             private function stopTimer():void {
  32.                 if (timer.running) {
  33.                     timer.stop();
  34.                 }
  35.             }
  36.         ]]>
  37.     </mx:Script>
  38.  
  39.     <mx:ApplicationControlBar dock="true">
  40.         <mx:Button label="Start timer" click="startTimer();" />
  41.         <mx:Button label="Stop timer" click="stopTimer();" />
  42.  
  43.         <mx:Spacer width="100%" />
  44.  
  45.         <mx:Label text="selectedIndex:" />
  46.         <mx:HSlider id="slider"
  47.                 minimum="0"
  48.                 maximum="3"
  49.                 liveDragging="true"
  50.                 snapInterval="1"
  51.                 tickInterval="1"
  52.                 change="viewStack.selectedIndex = event.value;" />
  53.     </mx:ApplicationControlBar>
  54.  
  55.     <mx:ViewStack id="viewStack" width="100%" height="100%">
  56.         <mx:VBox backgroundColor="haloBlue"
  57.                 width="100%"
  58.                 height="100%">
  59.             <mx:Label text="VBox 1" />
  60.         </mx:VBox>
  61.         <mx:VBox backgroundColor="haloGreen"
  62.                 width="100%"
  63.                 height="100%">
  64.             <mx:Label text="VBox 2" />
  65.         </mx:VBox>
  66.         <mx:VBox backgroundColor="haloOrange"
  67.                 width="100%"
  68.                 height="100%">
  69.             <mx:Label text="VBox 3" />
  70.         </mx:VBox>
  71.         <mx:VBox backgroundColor="haloSilver"
  72.                 width="100%"
  73.                 height="100%">
  74.             <mx:Label text="VBox 4" />
  75.         </mx:VBox>
  76.     </mx:ViewStack>
  77.  
  78. </mx:Application>