Flash - Countdown Timer

Flash - Countdown Timer

This is my first Flash tutorial. It will teach you how to create a timer that can be used within many aspects of Flash. Here we will be using it to count down to 0 then the movie will play.

Just as a note for any future Flash tutorial posts: I work on Adobe Flash CS3 Professional and I code in ActionScript2.0. Unless told otherwise, presume I am working in 2.0.

1. Okay, first we need to open Flash and set the Stage Dimensions to 300x300 by clicking on the Size button in the Properties panel.

2. Now, select the Text Tool (T) and drag out a Dynamic Text Box. Change the following:

Text Type: Dynamic

Instance Name: "timer"

Variable: "timer"

Line Type: Single

Selectable: NO

3. We now need to add the ActionScript. Deselect everything (Shortcut: Ctrl+Shft+A) and open up the Actions panel (Shortcut: F9). Paste the following:

stop();

_root.timer = 60;

clearInterval(id);

id = setInterval(function () {

_root.timer -=1

}, 1000);

Explanation:

stop(); - stops the main timeline on the current frame

_root.timer = 60; - the timer starts at 60

_root.timer -=1},1000); - time in Flash works in milliseconds, so this decreases (-=) the timer by 1 every one thousand milliseconds (one second).

4. Test your movie (Shortcut: Ctrl+Enter). The timer will count down from 60 seconds. If you want to change the time it counts down from, change the line:

_root.timer = 60;

5. So the timer counts down, but what happens when it hits zero? -1...-2...-3... Not very helpful! Now you can make anything happen when the timer hits zero, but we're going to make it go to the next frame. So create a blank keyframe after the one you are working on. Put what you want on the frame, I'm going to write a piece of text denoting that the movie should start here. Remember to delete the timer if you created a normal Keyframe.

6. Add stop(); to the frame to ensure that it stops on the next frame if you want it to. Now go back to the first frame and create a new Symbol (Shortcut: Ctrl:F8), select MovieClip. Use the Rectangle Tool (Shortcut: R) to draw a small square. The design of this does not really matter because it will later be hidden off stage.

7. Hit the small blue arrow underneath the timeline to the left to return to the main timeline. Open up your Library (Shortcut: Ctrl+L), locate the square and drag it onto the stage. Then select it, open up the Actions panel and paste the following code:

onClipEvent(enterFrame){

if(_root.timer <= 0){

_root.gotoAndPlay(2);

}

}

Explanation:

if(_root.timer <0)- if the timer is less than or equal to 0

_root.gotoAndPlay(2); - the main timeline should go to the 2nd frame

8. If you wish you can drag the square off the stage so it does not appear when you publish the movie. Hit Ctrl+Enter to test the movie. When the timer hits zero, it will display the 2nd frame.