Onebyone Design

Just playing around with an idea for a game timer and thought I’d share the results for anyone who might need something similar.

Basically, this is just an ‘odometer’ style scrolling number thing that counts down from a specified number of seconds to 0. It only allows 2 digits, meaning you can only count down from a max number of 99 seconds, but what do you want for free?

Once you have the .swc (available below) in your library and you’ve imported com.onebyonedesign.utils.timer.CountdownTimer, you’ll have access to these public methods/properties:

• setTime(time) – call this first – it sets the number of seconds to count down from
• setColor(color) – sets the color of the scrolling digits
• start() – starts the timer
• currentTime – read only property that tells what second the timer’s at. Useful, if you want to change the color at say 5 seconds or whatever.
• reset() – resets the timer back to the original time set with setTime()
• toggle() – will pause the timer if it’s running or re-start it, if it’s paused.

it dispatches the two events Event.CHANGE (every second) and Event.COMPLETE (when the timer’s done).

Here’s a quickie example:

package {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.utils.setTimeout;
	import com.onebyonedesign.utils.timer.CountdownTimer;

	/**
	 * Example usage of CountdownTimer
	 * @author Devon O.
	 */

	[SWF(width='400', height='200', backgroundColor='#FFFFFF', frameRate='40')]
	public class Main extends Sprite {

		private var _countdowntimer:CountdownTimer;
		private var _tf:TextField;

		public function Main():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			initTimer();
			initText();
		}

		private function initTimer():void {
			_countdowntimer = new CountdownTimer();

			// place on "whole" pixels for best visual result
			_countdowntimer.x = Math.round(stage.stageWidth * .5 - _countdowntimer.width * .5);
			_countdowntimer.y = Math.round(stage.stageHeight * .5 - _countdowntimer.height * .5);

			_countdowntimer.filters = [new DropShadowFilter(1)];
			_countdowntimer.addEventListener(Event.CHANGE, onTimerChange);
			_countdowntimer.addEventListener(Event.COMPLETE, onTimerComplete);

			// set the countdown time first
			_countdowntimer.setTime(20);

			// change color to dark red
			_countdowntimer.setColor(0x660000);
			addChild(_countdowntimer);

			stage.addEventListener(MouseEvent.CLICK, startTimer);
		}

		private function startTimer(event:MouseEvent):void {
			stage.removeEventListener(MouseEvent.CLICK, startTimer);

			// start the timer
			_countdowntimer.start();
		}

		private function onTimerChange(event:Event):void {
			_tf.text = String(_countdowntimer.currentTime);
		}

		private function onTimerComplete(event:Event):void {
			_tf.text = "TIMER'S DONE!";

			// wait 2 seconds then reset timer
			setTimeout(resetTimer, 2000);
		}

		private function resetTimer():void {
			_countdowntimer.reset();

			_tf.text = "Click stage to start timer.";
			stage.addEventListener(MouseEvent.CLICK, startTimer);
		}

		private function initText():void {
			_tf = new TextField();
			_tf.selectable = false;
			_tf.mouseEnabled = false;
			_tf.defaultTextFormat = new TextFormat("_sans");
			_tf.autoSize = TextFieldAutoSize.LEFT;
			_tf.x = _countdowntimer.x;
			_tf.y = _countdowntimer.y + _countdowntimer.height + 5;
			_tf.text = "Click stage to start timer.";
			addChild(_tf);
		}
	}
}

And that will give you:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”https://blog.onebyonedesign.com/wp-content/uploads/2010/01/timertest.swf” width=”400″ height=”200″ targetclass=”flashmovie”]

[/kml_flashembed]

Download the .swc file here (good for Flash Player 9 up).

Incidentally, it makes use of the great Greensock Tweenlite tweening engine. You won’t need this as it’s included in the .swc file, but I like to give credit where credit’s due.