Displaying enemy’s energy bar in Flash games

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…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

6 Responses to “Displaying enemy’s energy bar in Flash games”

  1. Maru on March 6th, 2008 2:27 pm

    Thanks, I’ve been working on one of those for a while now.

  2. David on March 6th, 2008 4:00 pm

    Thanks! I’ve waited for this! Now lets…. Code…

  3. Suely (Snakesue) on March 7th, 2008 3:47 am

    Thanks for all. Because this i need to report: Yesterday I visited the site flashkit and posted (2008-02-16) a source code named TILEBALL. Same background, same ball, same tile,same actionscript with more FEW frames only. Description:NOMAN YOUNIS | More By NOMAN YOUNIS
    »Email Contact This Author
    »Website http://www.nomanyounis.net.tc
    »Version Flash 8
    »Description This is very interesting multilevel ball and tile game, in this game you can also create your own levels. You will really enjoy this game…
    For me it was wrong of him and ungraceful any reference to name.

  4. Suely (Snakesue) on March 7th, 2008 4:02 am

    For me it was wrong of him and ungraceful any reference to your name, I want to say. Every game created with your tutorial must to contain
    your name and your link.

  5. Thomas on March 7th, 2008 4:31 am

    I agree with Suely.

  6. Emanuele Feronato on March 7th, 2008 2:30 pm

    I agree… I always give full credits to people that inspire my work, but it’s a thing I am not able to teach, as far as I know.

    http://www.triqui.com/play.php?id=882

Leave a Reply




flash games company