AS3 Countdown Timer - Creating a Simple Countdown Timer in Flash Using ActionScript 3

In this tutorial, we'll learn how to create a very simple AS3 countdown timer in Flash.

Step 1
Create a new Flash ActionScript 3 document. Select the text tool once your document opens up.

Step 2
Go to the Properties Inspector and choose the following options:

• Text field type: Classic - Dynamic Text
  
  
• For the font family, you can choose either _sans, _serif, or _typewriter
  
  
• Anti-alias: Use device fonts
  
  
• For the text color, make sure that it's different from the background color of your stage
• You can choose whatever font size that you want

Step 3
Then click on the stage to add the text field. Make sure that the text field is big enough for whatever font size you chose.

Step 4
Make sure that your text field is selected, then go back to the Properties Inspector and give it an instance name. Let's name this timer_txt.

Step 5
Create a new layer for the actions, then select the first keyframe of this new layer, and open up the Actions panel.





Step 6
In the script pane of the Actions panel, create a number variable. Let's initialize it with a value of 10.

var nCount:Number = 10;

This will be our countdown number. We will be subtracting 1 from this number every 1 second in order to create the countdown effect.

Step 7
Assign the nCount variable to the text property of the timer_txt text field.

var nCount:Number = 10;

timer_txt.text = nCount.toString();

This will display the number in the text field. We have to use the toString() method so that the number gets converted into a string. It needs to be converted into a string so that it can be displayed as text.

Step 8
Test your movie. You should see the number displayed in the text field.

Step 9
Go back to the code, and this time, create a Timer object with a delay of 1000. And for the repeatCount parameter, let's pass the nCount variable. The delay is the first value we pass to the Timer() constructor. The repeatCount is the second value that we pass.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

This creates a new Timer object named myTimer with a delay of 1000. The 1000 stands for 1000 milliseconds. This means that the timer will count every 1000 milliseconds (or 1 second). For the repeatCount, it's going to have the same value as the initial value of nCount. Since our nCount variable has a value of 10 when we pass it to the repeatCount parameter, then repeatCount will also be 10. This means that our timer will count 10 times and then stop.

Step 10
Now let's create an event listener function for the TimerEvent.TIMER event. This event gets dispatched at a rate that depends on the delay that was specified. Since we specified a delay of 1000 milliseconds, then this means that the event listener function will get called every 1 second. Let's name this event listener function as countdown.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{

}

Step 11
In the event listener function, we want to subtract nCount by 1 so that each time the function gets called, nCount will decrease. And then we'll display the new value in the timer_txt text field again so that it gets updated.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{
 nCount--;
 timer_txt.text = nCount.toString();
}

Don't test the movie just yet. We still need to add one more line of code.

Step 12
Lastly, let's make sure that we start the timer using the start() method of the Timer class. If we don't start the timer, then we won't see anything happen.

var nCount:Number = 10;
var myTimer:Timer = new Timer(1000, nCount);

timer_txt.text = nCount.toString();
myTimer.start();

myTimer.addEventListener(TimerEvent.TIMER, countdown);

function countdown(e:TimerEvent):void
{
 nCount--;
 timer_txt.text = nCount.toString();
}

Step 13
Test the movie. You should now have a working countdown timer.

Properties and Methods in ActionScript 3

In the previous lesson, we learned about what classes and objects are. In this lesson, we'll be learning about properties and methods. Properties and methods are things that classes have. For example, here are some of the properties and methods available to the MovieClip class:

MovieClip Class
Properties	Methods
width height	play() stop()

These are just a few of the properties and methods that belong to the MovieClip class, and by extension, these properties and methods are available to all MovieClip objects.

To begin our understanding of properties and methods, it's important to think of objects in programming as being similar to real objects - things around us that we can see and touch, like a teacup, a book, a shoe or a ball. These objects have characteristics - small, large, colorful, etc... For example, a teacup can be small, a dress can be colorful, a pillow can be soft. These objects can also do things - a ball can bounce, a wheel can turn, and a phone can ring. So real objects have characteristics, and real objects can do things.

In programming, even though we can't actually touch these objects, they have characteristics and they can do things as well. These characteristics of programming objects are referred to as properties, while things that objects can do are referred to as methods.

Let's go back to the MovieClip class list of properties and methods posted above. In the left column of the list above, we see that MovieClip objects have the width and height properties. These properties define how wide and how high a specific MovieClip object is. The width and the height of a MovieClip object can be seen as characteristics, because they describe the appearance of a MovieClip. To use an analogy, properties are like adjectives - they describe objects.

In the right column of the list above, we find some of the methods of the MovieClip class - play() and stop(). Methods are basically the tasks that objects can perform. For MovieClip objects, when you talk about the play() method, this refers to the MovieClip playing the animation in its timeline. The stop() method refers to when the MovieClip stops the animation. To use an analogy, if properties are like adjectives, then methods are like verbs - they refer to the actions that objects can do. You'll also notice that methods end in parentheses. Properties do not.

How do we access the properties and methods of an object?
To access the properties and methods of an object, you type in the name of the object, followed by a dot, followed by the property or method that you want to access. This is called dot syntax, because we use dots.

Let's say you have a MovieClip object named square_mc. To access the width property, you would type this:

square_mc.width = 200;

Here, we are accessing the width of the square_mc MovieClip, and we are assigning to it a value of 200. This will make the square_mc object 200 pixels wide.

In some instances, you might just want to retrieve the value of a specific property. In the previous example, we accessed the width property and assigned a new value to it. In this next example, we'll just retrieve the value of the width property, and then compare it to another value. We won't be changing the value whatsoever:

if(square_mc.width >= 200)

{

// do something

}

Here, we have an if statement where Flash is just going to retrieve whatever the current value of the width property of square_mc is, and then compare if it's greater than or equal to 200.

So in some instances, we might want access a property and assign a new value to it. In other instances, we might just want to retrieve a property's current value.

NOTE: Not all properties can be assigned values through code. Properties that cannot be assigned values through code are called read-only properties. You can only check for their current values, NOT assign them with new ones. For example, there is a property of the MovieClip class known as the currentFrame property. The currentFrame property of the MovieClip class tells you the current frame of the MovieClip object that the playhead is on. You won't be able to assign a value to this property. The value that it's going to have, is always just dependent on the movement of the playhead within the MovieClip object's timeline.

In this next example, we're accessing the stop() method. Here, we are telling the square_mc MovieClip to stop playing:

square_mc.stop();

Provided that the square_mc MovieClip has some animation in its timeline, then this line will cause that animation to stop.

In some cases, some methods need some extra information. You can pass this extra information by placing it inside the parentheses of the method. For example, the MovieClip class has a method called gotoAndStop(). This method tells the MovieClip to move to a specific frame within its timeline and then stop right there. So when you try to use the gotoAndStop() method, you don't just call the method, you have to give it some extra information. For the gotoAndStop() method, you also have to say which frame number to go to, because you could go to frame 5 or frame 12 or whatever other frame you want. How is Flash going to know unless you specify which frame to go to? So you need to pass that information by putting it inside the parentheses of the method. So let's say we wanted the square_mc MovieClip to go to frame no. 2 of its timeline and stop there, then we would type:

square_mc.gotoAndStop(2);

This will instruct the MovieClip to go to the 2nd frame in its timeline and stop.

And those are just a few examples of properties and methods in ActionScript 3. To recap:

• properties are like adjectives - they describe the object
• methods are like verbs - they are the actions that an object can do
• methods end in parentheses, properties do not
• you can access the properties and methods of an object using dot syntax
• some properties are read-only - you cannot assign values to them using code
• some methods require added information, which you pass to the method by typing the needed information inside the method's parentheses

Classes and Objects in ActionScript 3

In this lesson, I'll be explaining what classes and objects are. We'll be understanding these terms within the context of ActionScript, but classes and objects really are concepts that are part of most programming languages. So the general idea of what you'll learn here, can apply to other programming languages as well.

What is a class?
In programming, a class is a set of instructions that's used to build objects.

So from classes, we can create objects.

In some sense, a class is kind of like a factory. Factories are where products are built. A car factory produces cars, a toilet factory produces toilets, and so on.

Similarly, classes are used to produce objects.

Here are just some examples of ActionScript 3 classes:
MovieClip class
Sound class
TextField class

So from the MovieClip class, we can create MovieClip objects. From the Sound class, we can create Sound objects, and so on.

But what exactly are these objects then?
In programming, these objects are the different elements that make up the parts of the application that you're building. In the same way that a car has different parts - an engine, a steering wheel, doors - applications are also made up of different parts. These parts are referred to as objects, and these objects are needed in order for your application to do what it's supposed to do.

When you're building an interactive Flash movie, for example, Sound objects are used so that your application can play audio. TextField objects are used so that your Flash movie can display text. And MovieClip objects are used so that you can add some animation. Each type of object has a specific role. Sound objects are for sound. And TextField objects are for text. You can't use a Sound object to display text, and you can't use a TextField object to play sound.

All these objects are important, and you'll need to create these different objects depending on what your application needs to do. A car without an engine would not run properly, in the same way that a Flash music player application, for example, won't run properly if it doesn't have any Sound objects.

So how do you create these objects using ActionScript 3?
In ActionScript 3, you can create objects by using the new keyword, followed by the class constructor. The class constructor is a special function that "constructs" or creates an object. The constructor function uses the same name as the class. So for example, the constructor function of the MovieClip class would be MovieClip(). The constructor function of the Sound class would be Sound(). So whatever the name of the class is the name of the constructor function as well.

So if we wanted to create a new TextField object:

new TextField();

Creating an object is referred to as creating an instance of the class. So in the example above, we just created an instance of the TextField class. But this is still incomplete. This instance must have a name. In most cases, we shouldn't have a nameless TextfField object. What if we had 10 of those? Then it would be terribly confusing to distinguish which one is which. Our objects need to have names so that we can effectively communicate with them and give them instructions through code.

So how do we give it a name then?
We can give our instance a name by assigning it to a variable, like so:

var myTextField:TextField = new TextField();

Using the var keyword, we begin the variable declaration. It is then followed by the author-defined variable name that we want to give the instance. So in this example, the variable name is myTextField. We then follow it up with the data type. In this example, the data type is TextField. The data type you use would be whatever the class name is.

So the syntax for creating an object would be:

var variableName:DataType = new ClassConstructor();

In the example below, 4 new objects have been created:

We won't go into detail as to how these objects can be used. For now, I just want you to know how to create them. In future lessons, we'll be taking a look at some of the the most commonly-used ActionScript 3 classes in more detail.

Symbol instances are also objects
Did you know that when you convert something into a button or movie clip symbol that you're actually creating an object as well? Yes! In Flash, buttons are actually instances of a class called the SimpleButton class, while movie clips are instances of the MoveClip class. This would be referred to as creating symbols at authoring time, because we create the symbols while we are "authoring" or making the Flash movie. If you create an object using code, then that would be referred to as creating an object at runtime, because the object gets created only when the Flash movie itself starts running.