Thursday, September 29, 2011

AS2: Health Bar

Source file available at: http://adf.ly/2xrNS

Welcome to Tutorial #4 on how to create a health bar in flash using AS2!

We will will work with dynamic text box variables and the _xscale command.

Let's start off by starting a new AS2 document in Flash.
First, draw your HpBar and convert it to a symbol by selecting it and hitting F8 on your keyboard.
I am naming my health bar, "hpBar". Put the registration point where you want the bar to compress down. For example, putting the reg point on the left center block will make the hpBar compress to the left when health is running out. No instance name is required for this tutorial.














Next, we need to create a Dynamic text box.
Give the text box a Variable name of "hp".













After that, go to the frame you are on, open its actions, and type:
hp=100;
"100" is how much health you want your player to have.

Now let's click on our hpBar movie clip, and open its actions. Type this:


onClipEvent(enterFrame){
this._xscale = _root.hp*(100/100)
        //keep the hpBar 100% to scale no matter how much health I have.
if(_root.hp<=0){
        //if the health is lower than 0, then make the hp text 0.
_root.hp=0;
}

         if(_root.hp>=100){
        //if the health is higher than 100, then make the hp text 100. _root.hp=100;
}

}


In the second line of this coding, look at "_root.hp*(100/100)"
The red 100 is required for a 100% scale hpBar. So keep this number.
The blue 100 is your maxHp. Change this to the highest amount of health the player can have.

Last thing we need to do is create a custom way for a player to lose health. As practice I will just create a simple button that once clicked, will decrease the health by a random amount. You can use your imagination to what way you want your player to lose health since I can't cover all of them. Anyways, I am creating my button and putting these actions on it:


on(release){
_root.hp-=random(10);
        //the 10 is the highest number of damage you want to cause.
}





















So once you test your movie, you should be able to lose health randomly! This concludes our tutorial and I hope it helped you! Feel free to download the source file for this tutorial.

Source file available at: http://adf.ly/2xrNS

No comments:

Post a Comment