Feb 15 2009

Simple countdown timer in ActionScript3.0

For a private site-project I did a very simple countdown timer in pure actionscript3.0. The timer extends a textfield and updates itself every seconds. Since it is very simple it should be easy to extend it in various ways. Right now it shows the remaining time in the following format:

DAYS:HOURS:MINUTES:SECONDS

countdown-timer-scr

The code itself is very basic - nothing really special. Only one thing really confused me. Have a look at line number 20. The second parameter of Date-constructor specifies the month. There is something special about it - months are enumerated from 0 to 11 whereas days for example are enumerated from 1 to 31. This is something I find very confusing and strange. So keep this in mind when you are using the Date object in actionscript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

package
{
	import flash.display.Sprite;
	import flash.events.DataEvent;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	/**
	 * Little countdown timer extending a normal textfield
	 *
	 * @author benny!weltenkonstrukteur.de
	 */
	public class Countdown extends Sprite
	{
		// CONFIG THIS VALUE TO THE DESTINATION DATE
                // FORMAT YYYY:MM:DD:HH::MM:SS::MSMS
                // MONTH STARTS WITH ZERO
		private static var DEST_DATE:Date = new Date(2009, 05, 15, 20, 42, 0, 0);
 
		// Member variables
		private var cntTxt:TextField = null;
		private	var cntTime:uint = 0;
		private var cntTimer:Timer = null;
 
		/**
		 * Constructor
		 */
		public function Countdown()
		{
			this.init();
			cntTimer.start();
		}
 
		/**
		 * Inits all stuff on startup
		 */
		private function init():void
		{
			// Setup the text format
			var tf:TextFormat = new TextFormat();
			tf.font = 'Courier New';
			tf.size = 24;
			tf.color = 0x33ff33;
			tf.bold = true;
 
			// Setup text field
			cntTxt = new TextField();;
			cntTxt.width = stage.stageWidth;
			cntTxt.defaultTextFormat = tf;
 
			// Setup timer
			cntTimer = new Timer(1000);
			cntTimer.addEventListener(TimerEvent.TIMER, onTimer);
 
			// Add text field to stage
			addChild(cntTxt);
		}
 
		/**
		 * Handler for timer event
		 * @param	e, TimerEvent
		 */
		private function onTimer(e:TimerEvent):void
		{
			// Calculate the remaining time
			var asec:int = Math.round((DEST_DATE.getTime() - new Date().getTime()) / 1000);
 
			trace(asec);
 
			// If countdown is passed
			if ( asec < 0 )
			{
				// Show zeros instead
				cntTxt.text = "000:00:00:00";
			}
 
			// Otherwise
			else
			{
				// Calculate time parts
				var secs:uint = asec % 60;
				var amin:uint = Math.round(asec / 60);
				var mins:uint = amin % 60;
				var ahr:uint  = Math.round(amin / 60);
				var hrs:uint  = ahr % 24;
				var days:uint = Math.round(ahr / 24);
				var strSecs:String, strMins:String, strHrs:String, strDays:String;
 
				// Format with inital 0
				( secs < 10 ) ? strSecs = "0" + secs.toString() : strSecs = secs.toString();
				( mins < 10 ) ? strMins = "0" + mins.toString() : strMins = mins.toString();
				( hrs < 10  ) ? strHrs  = "0" + hrs.toString()  : strHrs = hrs.toString();
				if ( days < 10 )
				{
					strDays = "00" + days.toString();
				}
				else if ( days > 10 && days < 100 )
				{
					strDays = "0" + days.toString();
				}
				else
				{
					strDays = days.toString();
				}
 
				// Update time
				cntTxt.text = strDays + ":" + strHrs + ":" + strMins + ":" +strSecs;
			}
		}
	}
}

no comments   |  tags: , , , , | posted in ActionScript