Flash: Timers Part I

[chili5]

Timers

You create a new Timer by creating a new Timer object. The constructor takes two parameters: the number of milliseconds to run and the number of events to cause.

One use of a timer is to create a clock. This Timer would run forever and would generate an event every second.

Creating a new timer

var clockTimer:Timer = new Timer(1000); // this timer generates an event every one second
var timer2:Timer = new Timer(2000,2); // this timer generates an every every 2000 seconds. It only generates 2 events before stopping.

The Date

To get the current date, we create a date object and use methods like getHours(), getMinutes, getSeconds() and other methods.

This code gets the time in the format h:mm:ss

var systemDate:Date = new Date();
var minutes:int = systemDate.getMinutes();
var hours:int = systemDate.getHours();
var seconds:int = systemDate.getSeconds();
var sSuffix:String;
var sMinutes:String;
var sSeconds:String;

if (hours > 12) {
	// time is in 24 hour time, so subtracting 12
	// puts it in 12 hour time
	hours -= 12;
	sSuffix = "P.M."; 
} else {
	sSuffix = "A.M.";
}

if (minutes < 10) {
	sMinutes = "0" + String(minutes);
} else {
	sMinutes = String(minutes);
}

if (seconds < 10) {
	sSeconds = "0" + String(seconds);
} else {
	sSeconds = String(seconds);
}

trace("The current time is " + String(hours) + ":" + sMinutes + ":" + String(sSeconds) + " " + sSuffix);

Example output:

The current time is 1:06:59 P.M.

Notice, how I subtract 12 from the hours? This is because time is given in 24 hour time. If we want to display it in 12 hour time, we subtract 12 hours and append a suffix to the end.

Now instead of tracing the command to the output, we can display the time in a label. Then all we need to do is put that code in a callback function for a timer and we will have ourselves a live clock in action script.

So, add a label to the stage and change it's name to lblTime. Feel free to change the formatting of the label to anything you want.

Creating a new timer:

var clockTimer:Timer = new Timer(1000);

The time changes every second. So we set the interval to every 1000 milli seconds. This timer generates events forever.

Now we to add an event listener so we can call a function everytime the timer generates an event.

clockTimer.addEventListener(TimerEvent.TIMER,updateTime);

The updateTime function is simply going to contain the code from above. However, instead of showing text in the output window we are going to update the label.

Here is the function:

function updateTime(e:TimerEvent):void {
	var systemDate:Date = new Date();
	var minutes:int = systemDate.getMinutes();
	var hours:int = systemDate.getHours();
	var seconds:int = systemDate.getSeconds();
	var sPrefix:String;
	var sMinutes:String;
	var sSeconds:String;
	
	if (hours > 12) {
		// time is in 24 hour time, so subtracting 12
		// puts it in 12 hour time
		hours -= 12;
		sPrefix = "P.M."; 
	} else {
		sPrefix = "A.M.";
	}
	
	if (minutes < 10) {
		sMinutes = "0" + String(minutes);
	} else {
		sMinutes = String(minutes);
	}
	
	if (seconds < 10) {
		sSeconds = "0" + String(seconds);
	} else {
		sSeconds = String(seconds);
	}
	
	lblTime.text =String(hours) + ":" + sMinutes + ":" + sSeconds + " " + sPrefix;
}

Now, all we have to do is start the timer outside of the function.

clockTimer.start();

You can view the result here.

In the next tutorial, we will look at how to stop timers. We will also look at how to create timers that don't run forever.

[Jordan]

What, no screenshots this time?
Nicely done. +rep

[chili5]

There wasn't a need for screen shots this time.

[MathX]

Superb!