In this Flash tutorial you will learn how to create a countdown timer in Actionscript 2.0. Countdown timers can be used in multimedia applications, games etc. For example, a countdown timer can be used to simulate a rocket countdown or a countdown timer in game. The end results of the countdown timer will show numbered values decrementing every second. Here we will be using it to count down to 0 then the warning about time's up will play.
Here are the steps :
Step 1
Create a new Flash document and set the Stage Dimensions to 300x300 by clicking on the Size button in the Properties panel.
Select the Text tool with static text and type your message on the stage. I have typed the message 'CountDown', but you can type whatever message you wish.
Step 2
Select the Text tool with dynamic text and drag a small box shape like below:
and change the following:
Text Type: Dynamic
Instance Name: "timer"
Variable: "timer"
Line Type: Single
Selectable: NO
Step 3
Deselect everything (Shortcut: Ctrl+Shft+A) and open up the Actions panel (Shortcut: F9) or on the timeline right click on the first frame of layer 1 and select 'Actions' and enter the following lines of code in the Actions panel:
stop();
_root.timer = 60;
clearInterval(id);
id = setInterval(function () {
_root.timer -=1
}, 1000);
**The current count is 60 seconds, but you can change it to whatever you wish. This code contains the cleartInterval() method which stops the function call. And also contains the setInterval() method which calls the time in milliseconds.
Step 4
Test your countdown timer Ctrl + enter. You should now see a countdown from 60 seconds.
Step 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 warning about the time is up. Remember to delete the timer if you created a normal Keyframe.
Step 6
Select the Text tool with static text and type your message on the stage of frame 2. I have typed the message 'TIME'S UP!', but you can type whatever message you wish. Deselect anything and click on frame 2 and on the actionscript 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.
Step 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 the square, 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
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. |
Copyright © 2002 - 2010 by Nick Jones.
Guests Online: 1
