27 May 2011

Wonderfl Flash Online Community

This post title is not misspelled. Wonderfl is the name of online Flash / ActionScript community with a collaboration on open source projects as primary goal.

Wonderfl is actually more than just a community, it is mature online Flash IDE. You are invited to fork any existing code and continue with adding new features. You can also download to your computer your project version or start new project from scratch.

If you are more interested in game development there is special part of the community Wonderlf Flash Games where you can use Platform features to create, edit or play online Flash games.



Wonderfl is created and operated by Japan based Kayac company.

*_*

19 May 2011

Poll Results: Favorite Flash Platform Topic

Thank you all who answered previous Poll question: "What would you like to read more on Flanture?". It was multiple choice Poll. I'll make sure future posts correspond to your wishes.

Here are Poll results.



*_*

14 May 2011

Math Quiz / Graphic Timer Example

Here is small math quiz as simple illustration how Graphic Timer can be used. It will look even better within some Flash game ;)

It is required only few changes to have desired timer thickness and colors. Click on screenshots below to download example file.



*_*

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.

*_*

 

template by blogger templates