Emanuele Feronato

Talking about Flash and Game development.

In almost all “kill the enemy” games you can see a green energy bar turning orange and red as the foe get wounded by our fire.

It’s time to show you how can you do this.

In this example, I will start from the Flash prototype of a game like Balloon Invasion example but obviously you can apply the same concept to whatever game you want.

The first thing to do is drawing the energy bar. You can do it dynamically with Flash drawing functions but I suggest you to create your bar as a tween movieclip because Flash drawing functions only allow you to draw primitives while if you design your bar by yourself you can make it look better.

In my example, I have a 25 frames energy bar that goes from a full green bar to an empty red one.

Then, I include the bar movieclip in the enemy movieclip with a instancing it as bar

Now the actionscript does not change a lot…

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:450, _y:350});
fire_array = new Array();
fire_delay = 30;
just_fired = 0;
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	if (angle>160) {
		angle = 160;
	}
	if (angle<20) {
		angle = 20;
	}
	firepower = Math.sqrt(mousex*mousex+mousey*mousey);
	if (firepower>200) {
		firepower = 200;
	}
	this.cannon._rotation = angle*-1;
};
function onMouseDown() {
	if (just_fired>fire_delay) {
		just_fired = 0;
		angle = tank.cannon._rotation;
		start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
		start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
		cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
		cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
		cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
		cannonball_fired.fire_coord_x = _root._xmouse;
		cannonball_fired.fire_coord_y = _root._ymouse;
		cannonball_fired.onEnterFrame = function() {
			this._x += this.dirx/50;
			this._y += this.diry/50;
			dist_x = this._x-this.fire_coord_x;
			dist_y = this._y-this.fire_coord_y;
			dist = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
			if (dist<20) {
				fire_array.push("explosion"+_root.getNextHighestDepth());
				exp = attachMovie("explosion", "explosion"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:this._x, _y:this._y});
				exp.onEnterFrame = function() {
					this._width += 2;
					this._height += 2;
					this._alpha -= 2;
					if (this._alpha<0) {
						for (x in fire_array) {
							if (this.name == _root[fire_array[x]].name) {
								fire_array.splice(x, 1);
							}
						}
						this.removeMovieClip();
					}
				};
				this.removeMovieClip();
			}
		};
	}
}
_root.onEnterFrame = function() {
	just_fired++;
	new_enemy = Math.random()*100;
	if (new_enemy<1) {
		enemy = attachMovie("enemy", "enemy"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:-40, _y:Math.random()*200+50});
		enemy.speed = Math.random()*2+1;
		enemy.energy = 100;
		enemy.onEnterFrame = function() {
			this._x += this.speed;
			if (this._x>550) {
				this.removeMovieClip();
			}
			for (x in fire_array) {
				dist_x = this._x-_root[fire_array[x]]._x;
				dist_y = this._y-_root[fire_array[x]]._y;
				dist = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
				if (dist<(this._width+_root[fire_array[x]]._width)/2) {
					this.energy -= 2;
					this.bar.gotoAndStop(25-(this.energy/4));
					if (this.energy<0) {
						this.removeMovieClip();
					}
				}
			}
		};
	}
};

And this is the result:

Download the source code and enjoy