Flex: A Timer API

Let’s say you want something to happen in your application every once in a while automatically. The Timer class is the way to do it. I was already familiar with the Timer class from Java, the Flex one isn’t all that different. Let’s create a simple exmple, just switching an image every XX seconds.

First, set up your layout, we only need an image, declare it using MXML:

<mx:Image width="1024" height="768"/>

</code>

//Now we need some variable to store the current image URL in, 
// make it a private var in your script section:
[cc lang="actionscript"]
<mx:Script>
    <![CDATA[
            
    [Bindable]
    private var currentImageUrl:String = 
            "<image path>/image1.jpg";
    ]]>
</mx:Script>

OK, with that done we need that Timer to that we talked about, let’s create an initialize method that creates a Timer with a delay of five seconds (5000 milliseconds) and starts the timer:

private function init():void{
                
    var timer:Timer = new Timer(5000);
    timer.addEventListener(TimerEvent.TIMER, switchImage);
    timer.start();

} 

Add it to the initialize event in the application tag:

<mx:Application initialize="init()" 
    xmlns:mx="http://www.adobe.com/2006/mxml" 

    layout="absolute"> 

Notice that I added an event listener to the timer variable before starting it. This event listener is called every time the Timer reaches five seconds, let’s implement the event listener:

private function switchImage(event:TimerEvent):void{
                
    if(currentImageUrl == 
            "<image path>/image1.jpg")
    {
        currentImageUrl = 
            "<image path>/image2.jpg";
    }
    else
    {
        currentImageUrl = 
            "<image path>/image1.jpg";
    }          
}

This example is simple, it just checks whether the current image is image1 and switches it to image2 if it is. If it isn’t, the current image must be image2 so image1 has to be shown.

So now you have a basic understanding of the Timer class, it’s very useful sometimes!

Full application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application initialize="init()" xmlns:mx="http://www.adobe.com/2006/mxml" 

                layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var currentImageUrl:String = "<path>/image1.jpg";
            
            private function init():void{
                
                var timer:Timer = new Timer(5000);
                timer.addEventListener(TimerEvent.TIMER, switchImage);
                timer.start();
                
            }
            private function switchImage(event:TimerEvent):void{
                
                if(currentImageUrl == "<path>/image1.jpg"){

                   currentImageUrl = "<path>/image2.jpg";

                }
                else{
                    currentImageUrl = "<path>/image1.jpg";

                }
            }
        ]]>
    </mx:Script>
    <mx:Image source="{currentImageUrl}" width="1024" height="768"/>
</mx:Application>