AS: Bars (Health/etc)

[Inglor]

AS: Main , it's better then sex with a n00b!

I'm aware this is not the only way, there's also the precent and xscale thing, feel free to post it if you wanna

This tutorial requires you knowing Variables (ignore our funny replies in that post) and understanding Symbols ... this will use the movieclip's ._x property and ._y property

if you really want to tune it corrently (have it grow EXACTLY as much as you need it each time, you will also need to understand and use Linear Increasment which also somewhat explains the concept.

First of all we start by defining a new movieclip, call it however you want and inside it draw a square or something similar (doesn't matter if it's a square or a rectangle)

Let's start by giving the movieclip some actions (by opening the actions window and clicking the movieclip), we start by declaring WHEN the actions happen, inside movieclips we always have to do this, I want the actions to happen each frame enter (meaning 1 / 12 per second for default) the code for this is

onClipEvent(enterFrame){

}

this does nothing yet, but it's the handler itself, in flash, a handler means something that triggers everytime something else happens, in this case that something is the frame increasing (works even if you used stop()).

Now a movieclip has a _width property, this specifies it's width on the stage, so all we have to do, is change it's width accordingly, I'll presume your score/health variable is _root.score , the name is irrelevant really... Let's say the score is around between 1 and 100 (this part is explained a lot better in AS: Linear Increasment), now presuming we want the bar's width to move between 1 and 100 and the score is between 1 and 100 all we have to do is type

this._width=_root.score;

In the bar's actions, we want this to happen on every "enterFrame", so now our code is:

onClipEvent(enterFrame){
this._width=_root.score;
}

Congrats, we have created a working bar... currently it's aligned to the center, but you can also align it to the right by adding this._x=baseX+this._width/2 (assuming you declared baseX in the 'load; part, which if i'm not mistaken my friend toast explained in AS variables. Same works for aligning it to the left.

Ask any questions! post any tutorials! (related)

[Rantzien]

Nice and simple. Thank you.

[23450]

I will post up percent and _xscale.

This kind of health bar requires a simple formula. The formula is: HealthRemaining/HealthTotal*100

You may recognize this formula from calculating how badly you failed your math test in school. So, you will have a number that is your remaining health, and devide that number by another that is how much health the character has total. Simple enough. Now make your health Bar. now you will use_xscale with the percentage formula. The entire line will read:

this._xscale= HealthRemaining/HealthTotal*100

Now your health bar will scale down according to how much health you have. Here is an example of a full working code:
onClipEvent (load) {
total = 100;
remaining = 100;
}
onClipEvent (enterFrame) {
this._xscale= remaining/total*100
}

To change the percentage you will minus or plus from the remaining health. Here is a working file:

http://www.sitesled...ove/Health%20Bar.swf

NOTE: If you want the bar to scale to the left only and not from both sides, you have to edit the bar so the registration point is on the left side of it.

[Inglor]

you can exchange the 100 with another number in case you want it to grow above it's original size (or less);

this is another useful thing to add to the code,
onClipEvent(enterFrame){
if(_root.score<=0){
this._xscale=1;
}else{
//normal forumla here
}
}

just a nice lil thing to prevent it from inverting

[Denvish]

Good topic. Often asked, and well-explained, with nice use of reference to other topics.

I was playing with this a few months ago, since it seems to be quite a popular question, and worked out this thing (swf). I can't be bothered digging into it, or creating an explanation, but feel free to download and dissect the .fla file from here (MX version).

[zoohl]

I made a rechargeable bar (pretty much like the Halo shield). It's like the above health bar with an extra twist:

fullWidth = 100; //the width of the recharge bar at 100 percent
damaged = false; //whether or not the player has just been hit
rechargeShield = false; //whether or not we are currently recharging

onEnterFrame = function() {
if(damaged) //see if it's time to start the recharge yet
{
var dt:Date = new Date();
if(dt.getTime() - rechargeTimer >= 2000)
{
damaged = false; //reset this so we don't enter into this code on the next frame
rechargeShield = true; //ok to recharge
}
delete dt;
}
if(rechargeShield) //we're recharging, increase the shield
{
//shieldstrength_mc is the actual recharge bar.

nw = shieldstrength_mc._width + 1;
if(nw > fullWidth)nw = fullWidth; //make sure we don't make it bigger than max
shieldstrength_mc._width = nw;
}
}

Soo, to damage this sucker, I use this:

function setShield(perc:Number):Void
{
shieldstrength_mc._width = fullWidth * perc;
if(perc < 100)
{
damaged = true;
rechargeShield = false;
var rdt:Date = new Date();
rechargeTimer = rdt.getTime();
delete rdt;
}
}

setShield() does two things:
1. Sets the recharge bar to the desired percentage.
2. If the bar is in the middle of recharging, it stops it and resets the timer, so the bar isn't recharging while the player is getting hit.

[Inglor]

mind posting a live example (imageshack)?

[zoohl]

Sorry I didn't add one before. Anyway, straight-forward graphics, and the recharge is set at 2 seconds, I think.

example

[liam]

You can also use setProperty, it's maybe a little more complicated but it works.

onClipEvent(enterFrame){
setProperty("mc instance", _xscale (or any other property), health variable (or any other variable));
}

[Inglor]

set property is teh silly

[dELtaluca]

setProperty should be removed, its pointless.

setProperty was introduced in flash 4, and if my memory serves, you didnt even have variables in flash 4 AS. so now there is no need for it anymore

[liam]

At 7/26/05 11:18 AM, Inglor wrote: set property is teh silly

Yeah, but some people may like it.

Lol.. no.

[Inglor]

set property was introduced becuase the variables in flash 4 were encapsulated...

[Lordfat]

Inglor you make all these tutorials but you never include any examples. Whats up with that? You should consider making samples for your future tutorials as it will make them 10x better (and will also make you better).

Anyways I've been working on a game with a healthbar and the bar uses very few lines of code so I may as well share it:

http://img338.images..age=delscene10ct.swf

If you want to see the healthbar in action just sit there and get hit. However, if you actually want to play it you can move around with the arrow keys and fight back using the 'a' key.

The healthbar is just a red rectangle I made and it uses the following code:

onClipEvent(load)
{
curHealth = 100;
width = _width;
}

onClipEvent(enterFrame)
{
_xscale = _root.chrono.health;

if(curHealth > _root.chrono.health)
{
//offset the change in width from xscale
_x -= (curHealth - _root.chrono.health)/2*width/100;

//set curHealth to chrono's new health value
curHealth = _root.chrono.health;
}
}

This works on chrono who has 100 health so if you're character has more/less than that you'll need to make a few very small changes. Hopefully I can get the tile engine working before too long and make this into a full length game. Enjoy!

[Inglor]

At 7/26/05 12:44 PM, Lordfat wrote: Inglor you make all these tutorials but you never include any examples. Whats up with that? You should consider making samples for your future tutorials as it will make them 10x better (and will also make you better).

you're missing the point... I'm not making these tutorials for myself, or to improve myself, I already know all this basic shit for over 3 years... I'm making these tutorials to make this forum cleaner of spam, and for us to have better answers to newbs when they ask questions, for example if a n00b asks how to make a health bar, or some sort of bar, there is no need for example (since the person refered knows what he wants), as for people who click on stuff on AS: Main , I have full faith in their understanding

And this is an open source project, noone is forbidding you from adding content, or submitting this thread modified and linking to if from here, or better, just adding more and more stuff to it here like you're doing... tnx for doing that.

[Toast]

At 7/26/05 12:48 PM, Inglor wrote:

Hahaha,Inglor teh hero ; )
Looks like someone wants to be like Schorhr here :P

[Inglor]

Naa... I just have wet dreams about him at night ;)

wait a minute, you never knew schorhr... I just told you about him in the context of APS accounts...

[FlashStation]

AS: Main , it's better then sex with a n00b!

wats sex wid a noob like neway?

[Inglor]

At 7/28/05 09:41 AM, FlashStation2 wrote:

AS: Main , it's better then sex with a n00b!

wats sex wid a noob like neway?

some people sadly just don't get the inner jokes....

[FlashStation]

At 7/28/05 09:43 AM, Inglor wrote: some people sadly just don't get the inner jokes...

no, some people just don't get the inglor jokes, lol.

[Rustygames]

At 7/28/05 11:15 AM, FlashStation2 wrote:

At 7/28/05 09:43 AM, Inglor wrote: some people sadly just don't get the inner jokes...

no, some people just don't get the inglor jokes, lol.

Yeah but that because some people are stupid

[Streetproject]

as easy as the "gotoAndPlay" scripting is, i am having difficulty. I made a health bar, I want it to go to another frame when you die, but whenever it goes under, it just keeps going. I put a trace in just to make sure everything is right, and everything is so far. Help please.

[icpfreek]

yeah um i want the bar to only take off of the right and u said to add this ._x=baseX+this._width/2 but where? here doesnt work:
onClipEvent (enterFrame) {
this._width = _root.score._x=baseX+this._width/2;
}

[Vengeance]

At 9/2/05 09:22 PM, icpfreek wrote: yeah um i want the bar to only take off of the right and u said to add this ._x=baseX+this._width/2 but where? here doesnt work:
onClipEvent (enterFrame) {
this._width = _root.score._x=baseX+this._width/2;
}

you would have to change it and put it as:
onClipEvent(load){
//script
}

as easy as the "gotoAndPlay" scripting is, i am having difficulty. I made a health bar ,I want it to go to another frame when you die, but whenever it goes under, it just keeps going. I put a trace in just to make sure everything is right, and everything is so far. Help please.

I had the same troubles too. the problem is that it is on the onClipEvent(enterFrame) effect. but if you have it on onClipEvent(load) it wont check for it automatically. its hard to figure out. i posted a post like this ages ago and i was told to change my whole actionscript for the health bar. i just thought of a way but im not sure if it will work: make a blank mc with 2 frames. and in each of the frames have a frame action like this:
if (health._xscale<0){
tellTarget("/"){
gotoAndPlay("lose-message")}}
else if(opponent-health._xscale<0){
tellTarget("/"){
gotoAndPlay("win-message")}
}
have that in both frames of the mc and it should repeat and check for those variables every frame so when you reach 0 it will goto and play the lose/win message

[Trippy-Hippie]

for the regenerating bar, is there a backwards version? I mean, i need a bar that goes down by NOT doing anything, and gains score by hitting a key or something.

[neowolf22964]

Denvish, those links dont exist.

[iv00w]

i need a script so when my char hits a ball or something, the score will increase by 10.

sum1 help me?

[Rantzien]

At 12/11/05 08:20 AM, iv00w wrote: i need a script so when my char hits a ball or something, the score will increase by 10.

Read in on these:

To check when the ball hits:
AS: Collisions by Glaiel_Gamer
AS: Collision Detection by BleeBlap

For the score:
AS: Variables
AS: Maths - Basic by T-H

[Rule]

Well, I think I understand.

So for
onClipEvent(enterFrame){
this._width=_root.score;
}

to make that work, youd need the object thats connected to that code, to collide with another thing for it to decrease?

[Rule]

At 12/11/05 12:00 PM, -Rule- wrote: Well, I think I understand.

So for
onClipEvent(enterFrame){
this._width=_root.score;
}

to make that work, youd need the object thats connected to that code, to collide with another thing for it to decrease?

Let me explain a bit better.
I'm trying to create a game.
So I made a ship. I put the movement code already, but I want a collision.

So I put this code inside the ship.

if (hitTest(_root.enemy1)==true)

{_root.healthbar.

Then what?