INFORMATION NOW

In this tutorial, well 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 its 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. Lets 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. Lets 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, lets 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, its 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 lets 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. Lets 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 well 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();
}

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

Step 12
Lastly, lets make sure that we start the timer using the start() method of the Timer class. If we dont start the timer, then we wont 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.

In the previous lesson, we learned about what classes and objects are. In this lesson, well 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, its 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 cant 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.

Lets 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. Youll 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.

Lets say you have a MovieClip object named square_mc. To access the width property, you would type this:
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, well just retrieve the value of the width property, and then compare it to another value. We wont be changing the value whatsoever:
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 its 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 propertys 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 wont be able to assign a value to this property. The value that its going to have, is always just dependent on the movement of the playhead within the MovieClip objects timeline.

In this next example, were accessing the stop() method. Here, we are telling the square_mc MovieClip to stop playing:
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 dont 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 lets say we wanted the square_mc MovieClip to go to frame no. 2 of its timeline and stop there, then we would type:
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 methods parentheses