Timer Event - Count a Number

Timer Event - Count a Number

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add a Timer Using Flash ActionScript

 

 

There are numerous events that occur in flash. Once an event happens, a function is run. Examples of events include clicking a button, mousing over an object and checking the progress of a download.

You can also have events that are tied to the document's frame rate. In other words, if you're project is set to 24 frames per second (fps), the event occurs 24 times per second.

In this example we will illustrate how to create a Timer Event. Once the timer starts, it will start at 10 and count down to zero.

For more information on Events, see topics, Enter Frame Event - Rotate Object at Current Frame Rate, Keyboard Press - Move Object and Mouse Event - Drag Object.

Tutorial Elements

Dynamic Text object with instance name of count_txt

Button Symbol with instance name of start_btn

 

Step One

Open a new document and add a new layer above the default layer.

Step Two

Name the upper layer Actions and the lower layer Content.

Step Three

Using the Text tool, add a Dynamic Text object to the Content layer. The text object should contain no text.

Step Four

With text object selected, assign it an instance name of count_txt in the Properties panel.

Step Five

Add a Button Symbol to the Content layer. For an instant button, choose Window > Common Libraries > Buttons.

Step Six

Select the button and assign it an instance name of start_btn in the Properties panel.

Step Seven

Open the ActionScript panel for your keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe

Step Eight

Copy/Paste the following code in the ActionScript Panel:

var countTimer:Timer=new Timer(1000,11);

var countValue:int=10;

countTimer.addEventListener(TimerEvent.TIMER, countInterval);

start_btn.addEventListener(MouseEvent.CLICK, onClick01);

function onClick01(e:MouseEvent):void {

countTimer.start();

}

function countInterval(e:TimerEvent):void{

count_txt.text=String(countValue);

countValue-=1;

}

Step Nine

Click the Auto Format button to format the code

Step Ten

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). Click the button and the counter starts at 10 and begins counting down.

Dissecting the Code

The first two lines of the code at Step Eight establish two new variables, one for the timer and the second is the starting count value. Notice that the timer variable has two values assigned to it, 1000 and 11. The first value is the timer increment in milliseconds and we set that to 1000 (one second). The second value sets the number of timer steps. By setting it at 11, the counter will increment from ten to zero, one step at a time.

The next line adds an event listener to the start_btn. If the button is click, the onClick01 function is run.

Inside the function, the counterTimer is started. An event listener is added to the countTimer. Each time the timer counts, the countInterval function is run.

The countInterval function places the countValue in the Dynamic Text field and decreases countValue by one.

This Causes That

Events (start_btn click) and Event Handlers (onClick01 function) work as a team. When you click the Button Symbol, the function is run and the timer is started.

 

Stock Photos from 123RF