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
They can be easily customized to meet the unique requirements of your project.
6 Responses to “Displaying enemy’s energy bar in Flash games”
Leave a Reply
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)







Thanks, I’ve been working on one of those for a while now.
Thanks! I’ve waited for this! Now lets…. Code…
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.
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.
I agree with Suely.
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