Counting Frames Method

First let’s go over the more basic, but ultimately more complex method. Since movieclips can execute commands every frame using an onEnterFrame event handler (a specially named function) if we know the framerate, we can count the frames and divide to find the number of seconds past.

Declare a new variable timeLeft and give it a value of 10 (our counter will count down from 10). Create a new Movieclip called tenSecondTimer and assign it properties for frameRate, and counter. We’ll use the counter to count how many frames have passed.

var timeLeft:Number = 10;
createEmptyMovieClip("tenSecondTimer", getNextHighestDepth());
tenSecondTimer.frameRate = 24; // this movie runs at 24 fps
tensecondTimer.counter = 0;

Now create an onEnterFrame event handler, which will be executed with every frame, that increases the counter, compares it to the framerate, and if they match (a second has passed) reduce the timeLeft by one. for this function we’ll use the modulo operator (%), the increment operator(++) and the decrement operator (–). The modulo operator (%divides two numbers and returns the remainder. if the remainder is 0 then the first number is evenly divisible by the second. The increment operator (++) increases the value by one. x++ is the same as x = x + 1. The decrement operator (–) reduces the value by 1. x– is the same as x = x – 1.

tenSecondTimer.onEnterFrame = funtion(){
    this.counter++;
    if (this.counter % this.frameRate == 0){
        _root.timeLeft--;
    }
}

In addition to decreasing the timeLeft after every second, we want it to do something when the time is up. Then remove the timer.

tenSecondTimer.onEnterFrame = funtion(){
    this.counter++;
    if (this.counter % this.frameRate == 0){
        _root.timeLeft--;
    }
    if (timeLeft <= 0){
        trace("TIME'S UP");
        this.removeMovieClip();
    }
}

We also have the button which we want to stop the clock, so we can define an onRelease event handler for it.

stopButton.onRelease = funtion(){
    trace("TIMER STOPPED");
    _root.tenSecondTimer.removeMovieClip();
}

setInterval Method

The second method for creating a countdown timer uses the setInterval command. setInterval creates a timer that will execute a function after a certain number of milliseconds. Otherwise the method is similar. This simplifies things a bit because now we don’t have to count frames to determine if a second has passed, flash will do that for us.

Setup the stage the same way as above, with the textfield and the stopButton.

Declare timeLeft, but this time we don’t need a counter or framerate, so all se need is to make a setInterval.

var timeLeft:Number = 10;

// execute the function countdown every 1000 miliseconds (1 second);
tenSecondTimer = setInterval(countDown, 1000);

now we need to define a function CountDown to decrease the limeLeft every second, and to do something once timeleft is 0.

function countDown(){
    timeLeft--;
    if (timeLeft <= 0){
        trace("TIME'S UP");
        clearInterval(tenSecondTimer);
    }
}

Be sure to clear the interval when time is up and when the stop button is clicked or else you will get “TIME’s UP” messages every second for the rest of your movie!

stopButton.onRelease = funtion(){
    trace("TIMER STOPPED");
    clearInterval(_root.tenSecondTimer);
}

There you have it. Two different methods to display a countdown timer and to stop the countdown with a stop button.

About the author: Patrick Gunderson is a web developer and designer at TWBA\Tequila in Los Angeles.