10 May 2011

ActionScript3.0 Tutorial : All Around Continual Graphic Timer

This tutorial is requested by Andreas Folkesson.

First of all if you aren't familiar with my previous post Discrete versus continual graphical AS3 Timer read it so you can continue with this ActionScript 3.0 tutorial. For his specific project Andreas needed all round graphic continual timer and I thought it's interesting problem so I took the challenge.

All around timer means that timer graphic is "docked" to all four sides of scene and time is up when timer makes a whole trip around the scene. Take a look at the image.



Let's make those backgrounds.

// background elements

// timer background thickness
var thickness:int = 20;
var timerDuration:int = 20;

// background top
var bTop:Sprite = new Sprite();
bTop.graphics.beginFill(0x33cc33);
bTop.graphics.drawRect(0,0,stage.stageWidth,thickness);
addChild(bTop);

// background right
var bRight:Sprite = new Sprite();
bRight.graphics.beginFill(0x33cc33);
bRight.graphics.drawRect(stage.stageWidth-thickness,0,thickness,stage.stageHeight);
addChild(bRight);

// background bottom
var bBottom:Sprite = new Sprite();
bBottom.graphics.beginFill(0x33cc33);
bBottom.graphics.drawRect(0,stage.stageHeight-thickness,stage.stageWidth, thickness);
addChild(bBottom);

// background left
var bLeft:Sprite = new Sprite();
bLeft.graphics.beginFill(0x33cc33);
bLeft.graphics.drawRect(0,0,thickness, stage.stageHeight);
addChild(bLeft);


There are two variables you need to pay attention about. First one is "thickness" which is thickness of graphic timer, which is nice thing if you can change it according to your project needs. Second variable is timerDuration and it refers to entire timer (all four sides).

So how this problem is solved? I used four different timers. Each one starts after previous timer is finished. For this I'm using TimerEvent.TIMER_COMPLETE event listener. Here is rest of the code.

// graphic level timer

function aroundTimer(seconds:int):void
{
seconds = seconds / 4;
var t:Timer = new Timer(50, seconds*thickness);

// graphic element
var w:Number = stage.stageWidth;
var h:Number = thickness;
var g:Sprite = new Sprite();
addChild(g);

// find percent and draw it!
t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gWidth:Number = (cc * w)/(seconds * thickness);
g.graphics.beginFill(0x339933);
g.graphics.drawRect(0, 0, gWidth, h);
}
t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
function onComplete(evt:Event):void
{
trace("top timer end.");
timerRight(seconds);
}
t.start();
}

function timerRight(seconds:int):void
{
var t:Timer = new Timer(50, seconds*thickness);

// graphic element
var w:Number = thickness;
var h:Number = stage.stageHeight-thickness;
var g:Sprite = new Sprite();
addChild(g);

// find percent and draw it!
t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gHeight:Number = (cc * h)/(seconds * thickness);
g.graphics.beginFill(0x339933);
g.graphics.drawRect(stage.stageWidth-thickness, thickness, w, gHeight);
}
t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
function onComplete(evt:Event):void
{
trace("right timer end.");
timerBottom(seconds);
}
t.start();
}

function timerBottom(seconds:int):void
{
var t:Timer = new Timer(50, seconds*thickness);

// graphic element
var w:Number = stage.stageWidth-thickness;
var h:Number = thickness;
var g:Sprite = new Sprite();
addChild(g);

// find percent and draw it!
t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gWidth:Number = (cc * w)/(seconds * thickness);
g.graphics.beginFill(0x339933);
g.graphics.drawRect(stage.stageWidth-thickness, stage.stageHeight-thickness, -gWidth, h);
}
t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
function onComplete(evt:Event):void
{
trace("bottom timer end.");
timerLeft(seconds);
}
t.start();
}

function timerLeft(seconds:int):void
{
var t:Timer = new Timer(50, seconds*thickness);

// graphic element
var w:Number = thickness;
var h:Number = stage.stageHeight-thickness;
var g:Sprite = new Sprite();
addChild(g);

// find percent and draw it!
t.addEventListener(TimerEvent.TIMER, onTimer);
function onTimer(evt:Event):void
{
var cc:int = evt.target.currentCount;
var gHeight:Number = (cc * h)/(seconds * thickness);
g.graphics.beginFill(0x339933);
g.graphics.drawRect(0, stage.stageHeight-thickness, w, -gHeight);
}
t.addEventListener(TimerEvent.TIMER_COMPLETE, onComplete);
function onComplete(evt:Event):void
{
trace("time is up!");
}
t.start();
}

aroundTimer(timerDuration);


Sure, trace lines can be omitted. When timerLeft finishes you can end your level and start new one.

I hope this Flash Tutorial will be useful to someone. If you have any questions feel free to ask them here or on Facebook discussions page.

*_*

0 comments:

 

template by blogger templates