Flex中如何利用timer控制改变ViewStack当前选中Index的例子

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"


        layout="vertical"


        verticalAlign="middle"


        backgroundColor="white"


        creationComplete="init();">


 


    <mx:Script>


        <![CDATA[


            private var timer:Timer;


 


            private function init():void {


                timer = new Timer(1000); /* 1000ms == 1second */


                timer.addEventListener(TimerEvent.TIMER, onTimer);


            }


 


            private function onTimer(evt:TimerEvent):void {


                var idx:uint = viewStack.selectedIndex;


                var max:uint = viewStack.numChildren;


 


                var newIdx:uint = ++idx % max;


                viewStack.selectedIndex = newIdx;


            }


 


            private function startTimer():void {


                if (!timer.running) {


                    timer.start();


                }


            }


 


            private function stopTimer():void {


                if (timer.running) {


                    timer.stop();


                }


            }


        ]]>


    </mx:Script>


 


    <mx:ApplicationControlBar dock="true">


        <mx:Button label="Start timer" click="startTimer();" />


        <mx:Button label="Stop timer" click="stopTimer();" />


 


        <mx:Spacer width="100%" />


 


        <mx:Label text="selectedIndex:" />


        <mx:HSlider id="slider"


                minimum="0"


                maximum="3"


                liveDragging="true"


                snapInterval="1"


                tickInterval="1"


                change="viewStack.selectedIndex = event.value;" />


    </mx:ApplicationControlBar>


 


    <mx:ViewStack id="viewStack" width="100%" height="100%">


        <mx:VBox backgroundColor="haloBlue"


                width="100%"


                height="100%">


            <mx:Label text="VBox 1" />


        </mx:VBox>


        <mx:VBox backgroundColor="haloGreen"


                width="100%"


                height="100%">


            <mx:Label text="VBox 2" />


        </mx:VBox>


        <mx:VBox backgroundColor="haloOrange"


                width="100%"


                height="100%">


            <mx:Label text="VBox 3" />


        </mx:VBox>


        <mx:VBox backgroundColor="haloSilver"


                width="100%"


                height="100%">


            <mx:Label text="VBox 4" />


        </mx:VBox>


    </mx:ViewStack>


</mx:Application>