Creating a simple timer in Flex with the flash.utils.Timer class

Here’s an example of a simple timer which displays minutes, seconds, and milliseconds, which I built in Flex using the flash.utils.Timer class. You can start and stop the timer using two Button controls.

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>