Skip to main content
Known Participant
May 16, 2011
Answered

How to make a "health bar" ?

  • May 16, 2011
  • 3 replies
  • 4903 views

Hi, I need a tutorial on how to create a "health bar" - I don't have a better word for it, but my idea is to have a bar (showing hapiness of a pet), and each time you push a button - the pet gains hapiness - and the "health bar" grows. What is this called, and is there a guide I can read telling me how to create such a code?

This topic has been closed for replies.
Correct answer Ned Murphy

Create a rectangular movieclip for the bar and adjust its width or height property.  Example, were bar is the instance name of the health bar abd btn is the instance name of the button

bar.width = 0;

var growValue:Number = 10;

btn.addEventListener(MouseEvent.CLICK, growBar);

function growBar(evt:MouseEvent):void {

     bar.width += growValue;

}

3 replies

Known Participant
May 19, 2011

Hi it's me again - additional question 

So, I figured out how to stop the happybar from growing when it reached 100%. But when I press the CUTE button, it resets, nomatter how happy it is. Why?

Second problem: I want sound to stop from animations when I play a new animation. It works on all, except from my FOOD animation. If I put in my code the sounds stops on the animations that was running before BUT there is no sound on the FOOD animation either. Why?

stop();

//Happy bar

bar.width = 0;
var growValue:Number = 50;

cute_btn.addEventListener(MouseEvent.CLICK, growBar);
mad_btn.addEventListener(MouseEvent.CLICK, growBar);
leg_btn.addEventListener(MouseEvent.CLICK, growBar);
sove_btn.addEventListener(MouseEvent.CLICK, growBar);

function growBar(evt:MouseEvent):void
{
     bar.width += growValue;
 
  if(bar.width >= 250)
  {
  bar.width = 250;
  cute_btn.removeEventListener(MouseEvent.CLICK, growBar);
  mad_btn.removeEventListener(MouseEvent.CLICK, growBar);
  leg_btn.removeEventListener(MouseEvent.CLICK, growBar);
  sove_btn.removeEventListener(MouseEvent.CLICK, growBar);
  }
}


//Cute button
cute_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_1);
function fl_ClickToGoToAndPlayFromFrame_1(event:MouseEvent):void
{
   gotoAndStop("nuttet");
   nuttet_mc.play();
}

cute_btn.addEventListener(MouseEvent.CLICK, fl_ClickToStopAllSounds);

function fl_ClickToStopAllSounds(event:MouseEvent):void
{
SoundMixer.stopAll();
}


//Play button
leg_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_2);
function fl_ClickToGoToAndPlayFromFrame_2(event:MouseEvent):void
{
   gotoAndStop("leg");
   leg_mc.play();
}

leg_btn.addEventListener(MouseEvent.CLICK, fl_ClickToStopAllSounds_2);

function fl_ClickToStopAllSounds_2(event:MouseEvent):void
{
SoundMixer.stopAll();
}


//Food button
mad_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_10);

function fl_ClickToGoToAndPlayFromFrame_10(event:MouseEvent):void
{
gotoAndStop("mad");
mad_mc.play();
}

/*mad_btn.addEventListener(MouseEvent.CLICK, fl_ClickToStopAllSounds_3);

function fl_ClickToStopAllSounds_3(event:MouseEvent):void
{
SoundMixer.stopAll();
}*/

//Sleep button
sove_btn.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_11);

function fl_ClickToGoToAndPlayFromFrame_11(event:MouseEvent):void
{
gotoAndStop("sove");
sove_mc.play();
}

sove_btn.addEventListener(MouseEvent.CLICK, fl_ClickToStopAllSounds_2);

function fl_ClickToStopAllSounds_4(event:MouseEvent):void
{
SoundMixer.stopAll();
}

Known Participant
May 16, 2011

It is actually pretty simple and what you can do to create this "petbar" is to first make a movieclip named happybar or something. Put it so the registrationpoint is on the left edge of the bar. The variablename of the bar should be happybar and then create the pet button with the variablaname petbutton. Now off for the script:

var happiness:Number = 0;

addEventListener(Event.ENTER_FRAME, healthbarlenght);
petbutton.addEventListener(MouseEvent.CLICK, petgain);

function healthbarlenght (event:Event):void{
happybar.width = happiness;
}


function petgain (event:MouseEvent):void{
happiness += 10;
}

And there you have it, when you click the petbutton; the length of the happybar increases.

Known Participant
May 16, 2011

Thanks both of you

  - now the next problem. How do I tell the code, that I got 4 buttons that should all have the samme effect on my petbar? I tried copy/paste, but it doesn't like the same code being there several times (yeah I should have learned by now).

Ned Murphy
Legend
May 16, 2011

btn1.addEventListener(MouseEvent.CLICK, growBar);

btn2.addEventListener(MouseEvent.CLICK, growBar);

btn3.addEventListener(MouseEvent.CLICK, growBar);

btn4.addEventListener(MouseEvent.CLICK, growBar);

Ned Murphy
Ned MurphyCorrect answer
Legend
May 16, 2011

Create a rectangular movieclip for the bar and adjust its width or height property.  Example, were bar is the instance name of the health bar abd btn is the instance name of the button

bar.width = 0;

var growValue:Number = 10;

btn.addEventListener(MouseEvent.CLICK, growBar);

function growBar(evt:MouseEvent):void {

     bar.width += growValue;

}