Energy Bar Flash Game AS3 Tutorial

In some Flash games author often has a need to display energy bar for
hero character or enemy character or both. In this tutorial you will
learn how to create reusable energy bar which you can ..., well reuse, in
all your future projects. Code is pure ActionScript 3.0. I'm trying to
develop this habit to write small chunks of useful code for my future
games :)

step 1 - energyBar class

First obvoius step is to write energyBar class. Here is the code:

package
{
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.Event;

public class energyBar extends Sprite

{
private var _do:Sprite;
private var _ev:uint;

public function energyBar(displayObj, energyValue)

{
_do = displayObj;
_ev = energyValue;
init();
addEventListener(Event.ENTER_FRAME, onFrame);
}

private function onFrame(evt:Event):void

{
x = _do.x;
y = _do.y - 20;
}

private function init():void

{
x = _do.x;
y = _do.y - 20;
 this.graphics.lineStyle(1);
this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,102,15);
this.graphics.endFill();
this.graphics.beginFill(0x00ff00);
this.graphics.drawRect(1,1,_ev,13);
this.graphics.endFill();
}

public function updateBar(newval):void

{
_ev = newval;
this.graphics.clear();
this.graphics.lineStyle(1);
this.graphics.beginFill(0x000000);
this.graphics.drawRect(0,0,102,15);
this.graphics.endFill();
this.graphics.beginFill(0x00ff00);
this.graphics.drawRect(1,1,newval,13);
this.graphics.endFill();
}
}
}

And now code explanation. First we need to import some classes like
Sprite, Rectangle and Event. Then we write our class. We are extending
Sprite class so we can draw that energy bar. We have two private
variables: _do which is Display Object, in this case Sprite of our hero
character and _ev which holds energy value. With this kind of class you
can pass whatever Sprite you want and attach energy bar to it.

Inside constructor function we have init() function call and on enter

frame event listener. Listener function will change energy bar position
on every frame so our bar can follow hero around the stage. Change value
to suit your needs. Now, init function will draw energy bar with provided
values. Notice updateBar function which is almost the same as init
function, but it is declared as public, so we can update energy value
later.

step 2 - hero class

Insert your hero. My hero is simple blue circle shape with big H letter
inside. Very creative. Anyway, set linkage properties as image below
shows, name this class 'hero' and use next code to create hero class.

package
{
import flash.display.MovieClip;
import flash.events.Event;

public class hero extends MovieClip

{
 public function hero()
{
addEventListener(Event.ENTER_FRAME, onFrame);
}
private function onFrame(evt:Event):void
{
x++;
y++;
}
}
}

Place .as file in same folder where your .fla file is saved. You haven't
saved it yet? That's bad practise - do it now!

Previous code is just for testing purposes and you can also get away
without it.

step 3 - game class

Final step in this tutorial (yes, we are almost over) is to make game.as
class to put things together and make everything works right. Here is
your code:

package
{
import flash.display.Sprite;
import energyBar;
import flash.events.Event;
import flash.events.MouseEvent;

public class game extends Sprite

{
private var b:energyBar;
private var val:uint = 80;

public function game()

 {
init();
}

private function init():void

{
var a:hero = new hero();
a.x = 50;
a.y = 50;
addChild(a);

b = new energyBar(a, val);

addChild(b);

a.addEventListener(MouseEvent.CLICK, onClick);
}

private function onClick(evt:Event):void

{
if(val > 1) {
val-=5;
b.updateBar(val);
}else{
trace("game over.");
}
}
}
}

Notice that we have to import energyBar class besides other classes.

MouseEvent is for testing purposes too. When you click the hero, energy
will decrease if energy value is greater than 1 and accordingly using
updateBar function from energyBar class (remember that public function?)
we will update our drawing. However, if energy value drops below 0, you
will get nice relaxing message in output panel that says "game over."

When you make your own game you will probably not use energyBar in this
way, but instead energy value will decrease if your hero character gets
shot or is eaten by invinsible cosmic monster from Betelgeuse star system
or whatever.

Thanks for your time; I hope you have found this tutorial useful. And
fun.

*_*

Flanture

http://flanture.blogspot.com – more Flash Tutorials and freebies

http://flash2nd.com – free flash clocks

http://twitter.com/flanture