Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/using-a-timer-to-change-the-selected-index-of-a-viewstack-container-in-flex/ -->
<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>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/14/creating-a-simple-timer-in-flex-with-the-flashutilstimer-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import flash.utils.Timer;
            import flash.events.TimerEvent;

            private const MIN_MASK:String = "00";
            private const SEC_MASK:String = "00";
            private const MS_MASK:String = "000";
            private const TIMER_INTERVAL:int = 10;

            private var baseTimer:int;

            private var t:Timer;

            private function init():void {
                t = new Timer(TIMER_INTERVAL);
                t.addEventListener(TimerEvent.TIMER, updateTimer);
            }

            private function updateTimer(evt:TimerEvent):void {
                var d:Date = new Date(getTimer() - baseTimer);
                var min:String = (MIN_MASK + d.minutes).substr(-MIN_MASK.length);
                var sec:String = (SEC_MASK + d.seconds).substr(-SEC_MASK.length);
                var ms:String = (MS_MASK + d.milliseconds).substr(-MS_MASK.length);
                counter.text = String(min + ":" + sec + "." + ms);
            }

            private function startTimer():void {
                baseTimer = getTimer();
                t.start();
            }

            private function stopTimer():void {
                t.stop();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Start timer" click="startTimer()" />
        <mx:Button label="Stop timer" click="stopTimer()" />
    </mx:ApplicationControlBar>

    <mx:Label id="counter" fontSize="96" />

</mx:Application>

View source is enabled in the following example.

Here’s a similar version using the DateFormatter class. Note that unlike the previous code, this version doesn’t include milliseconds in the output.

<?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[
            import flash.utils.Timer;
            import flash.events.TimerEvent;

            private const TIMER_INTERVAL:int = 10;

            private var baseTimer:int;

            private var t:Timer;

            private function init():void {
                t = new Timer(TIMER_INTERVAL);
                t.addEventListener(TimerEvent.TIMER, updateTimer);
            }

            private function updateTimer(evt:TimerEvent):void {
                var d:Date = new Date(getTimer() - baseTimer);
                counter.text = dateFormatter.format(d);
            }

            private function startTimer():void {
                baseTimer = getTimer();
                t.start();
            }

            private function stopTimer():void {
                t.stop();
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Start timer" click="startTimer()" />
        <mx:Button label="Stop timer" click="stopTimer()" />
    </mx:ApplicationControlBar>

    <mx:Label id="counter" fontSize="96" />

</mx:Application>