Some Flash games require level timers. If mission is not complete when timer runs out, hero is dead. Usually you have two types of timers, numerical level timer and graphical timer.
On the other hand, graphical timer can be discrete or continual. Actually all graphical timers are discrete, when you think about it, just updates happen more frequently and user sees it like continual.
Here is how to create both discrete and continual graphic timers.
step 1.
First we set up some background color.
// background elements
var b1:Sprite = new Sprite();
b1.graphics.beginFill(0x33cc33);
b1.graphics.drawRect(0,0,stage.stageWidth,20);
addChild(b1);
var b2:Sprite = new Sprite();
b2.graphics.beginFill(0x33cc33);
b2.graphics.drawRect(0,25,stage.stageWidth,20);
addChild(b2);
step 2. We write our discrete timer. Here is complete function.
function gTimer(seconds:int):void
{
var t:Timer = new Timer(1000, seconds);
var w:Number = stage.stageWidth;
var h:Number = 20;
var g:Sprite = new Sprite();
addChild(g);
t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gWidth:Number = (cc * w)/seconds;
g.graphics.beginFill(0x339933);
g.graphics.drawRect(0, 0, gWidth, h);
}
t.start();
}
Why this timer is 'discrete'? Because graphic update happens once every 1000 milliseconds. We see graphic change in distinct time intervals of one second.
Code is simple, only thing worth explanation is gWidth variable which is just proportion used to calculate current timer width.
step 3.We write our continual timer. Here is complete function.
function cgTimer(seconds:int):void
{
var t:Timer = new Timer(50, seconds*20);
var w:Number = stage.stageWidth;
var h:Number = 20;
var g:Sprite = new Sprite();
addChild(g);
t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gWidth:Number = (cc * w)/(seconds * 20);
g.graphics.beginFill(0x339933);
g.graphics.drawRect(0, 25, gWidth, h);
}
t.start();
}
Code is exactly the same as in discrete graphical timer, with one minor change. Timer is called every 50 milliseconds and because those time intervals are so small, user sees this timer as continual one.
step 4.We test our timers.
gTimer(24);
cgTimer(24);
Now, take your stopwatch and you will see that even both timers start in approximately the same time, discrete timer will finish first and both timers will finish after more than 24 seconds, discrete one in about 25,5 seconds and continual one almost 2 seconds later (at least on my computer).
This is not some error. Continual timer makes a lot more calculations than discrete one, hence difference. Just something you should be aware of when making games.
*_*
About two months ago I published my first e-book on Lulu. At first, idea was to create collection of better tutorials from this blog, which I'm writing for the past 3 and a half years. Initially, there was a small price under 5 bucks, but two months later I sold only 1 copy, so I decided to give it away for free. Actually, I wasn't selling the book, it was more like a small-donation-model to keep my blog running.
