Make a lives display in HUD, Flash AS3 (not text!)

Question

I've been searching the internet all day and I can't find the answer I'm looking for.

In my HUD I want to use orange dots to represent lives. The user starts off with 5 lives and every time they die, I want a dot to be removed. Pretty straight forward.

So far my idea is to make a movie clip that has the five dots in a line. There would be 5 frames on the timeline (because after the last life it goes to a game over screen right away).

I would have a variable set up to store the number of lives and a function to keep track of lives. So every hit of an obstacle would result in livesCounter--;. Then I would set up something like this:

switch(livesCounter){

    case 5: livesDisplay.gotoAndPlay(1);
    break;

    case 4: livesDisplay.gotoAndPlay(2);
    break;

    case 3: livesDisplay.gotoAndPlay(3);
    break;

    case 2: livesDisplay.gotoAndPlay(4);
    break;

    case 1: livesDisplay.gotoAndPlay(5);
    break;
}

I feel like there has to be an easier way to do this where I could just have a movie clip of a single orange dot that I could replicate across an x value based on the number of lives. Maybe the dots would be stored in an array? When the user loses a life, a dot on the right end of the line is removed.

So in the end the counter would look like this:

* * * * *
* * * *
* * *
* *
*      (last life lost results in the end game screen)

EDIT: code based on suggestions by Zhafur and Arthur Wolf White

package  {
import flash.display.MovieClip;
import flash.events.*;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.display.Sprite;
import flash.text.*;
import flash.utils.getTimer;

public class CollisionMouse extends MovieClip{

    public var mySprite:Sprite = new Sprite(); 
    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
    public var replacement:newSprite = new newSprite;
    public var score:int = 0;
    public var obstScore:int = -50;
    public var targetScore:int = 200;
    public var startTime:uint = 0;
    public var gameTime:uint;
    public var pauseScreen:PauseScreen = new PauseScreen();
    public var hitTarget:Boolean = false;
    public var hitObj:Boolean = false;
    public var currLevel:Number = 1;
    public var heroLives:int  = 5;
    public var life:Sprite;


    public function CollisionMouse() {
        mySprite.graphics.beginFill(0xff0000); 
        mySprite.graphics.drawRect(0,0,40,40); 
        addChild(mySprite);
        mySprite.x = 200;
        mySprite.y = 200;

        pauseScreen.x = stage.width/2;
        pauseScreen.y = stage.height/2;

        life = new Sprite();
        life.x = 210;

        stage.addEventListener(MouseEvent.MOUSE_MOVE,followMouse); 
        /*mySprite.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);*/
        //checkLevel();
        timeCheck();
        trackLives();
    }
    public function timeCheck(){
            addEventListener(Event.ENTER_FRAME, showTime);
    }

    public function showTime(e:Event) {
        gameTime = getTimer()-startTime;
        rm1_mc.timeDisplay.text = clockTime(gameTime);
        rm1_mc.livesDisplay.text = String(heroLives);
    }

    public function clockTime(ms:int) {
        var seconds:int = Math.floor(ms/1000);
        var minutes:int = Math.floor(seconds/60);
        seconds -= minutes*60;
        var timeString:String = minutes+":"+String(seconds+100).substr(1,2);
        return timeString;
    }

    public function trackLives(){

        for(var i:int=0; i<heroLives; i++){
            life.graphics.lineStyle(1, 0xff9900);
            life.graphics.beginFill(0xff9900, 1);
            life.graphics.drawCircle(i*15, 45, 6);
            life.graphics.endFill();
            addChild(life);
        }
    }

    function followMouse(e:MouseEvent){
        mySprite.x=mouseX;
        mySprite.y=mouseY;

        trackCollisions();
    }

    function trackCollisions(){
        if(mySprite.hitTestObject(rm1_mc.obst1) || mySprite.hitTestObject(rm1_mc.obst2)){
            hitObjects();
        }
        else if(mySprite.hitTestObject(rm1_mc.target_mc)){
            hitTarg();
        }
    }

    function hitObjects(){
        addChild(replacement);
        mySprite.x ^= replacement.x;
        replacement.x ^= mySprite.x;
        mySprite.x ^= replacement.x;
        mySprite.y ^= replacement.y;
        replacement.y ^= mySprite.y;
        mySprite.y ^= replacement.y;

    stage.removeEventListener(MouseEvent.MOUSE_MOVE, followMouse);
        removeChild(mySprite);
        hitObj = true;
        checkScore();
    }

    function hitTarg(){
        addChild(replacement);
        mySprite.x ^= replacement.x;
        replacement.x ^= mySprite.x;
        mySprite.x ^= replacement.x;

        mySprite.y ^= replacement.y;
        replacement.y ^= mySprite.y;
        mySprite.y ^= replacement.y;

        stage.removeEventListener(MouseEvent.MOUSE_MOVE, followMouse);
        removeEventListener(Event.ENTER_FRAME, showTime);
        removeChild(mySprite);
        hitTarget = true;
        currLevel++;
        checkScore();   
    }

    function checkScore(){
        if(hitObj){
            score += obstScore;
            heroLives--;
            removeChild(life);
        }
        else if(hitTarget){
            score += targetScore;
        }
        rm1_mc.scoreDisplay.text = String(score);
        rm1_mc.livesDisplay.text = String(heroLives);
        trackLives();
    }
}
   }

Answer 1

If you want to keep your MovieClip, then you could set the frame with:

livesDisplay.gotoAndStop(6-livesCounter);

Or you could reverse the frames, thus the first frame would show 5 health, the second would 4 and so on.

Edit:
Then as Arthur Wulf White said, you can loop your hp and draw the graphics.Though the following example will use a custom shapes (the ones you have drawn) and not programmatically drawn shapes.
Example:

var hpContainer:Sprite = new Sprite(); //this will contain the graphics
var newHeart:MovieClip; 
for(var i:int = 0;i<HERO.health;i++){
    newHeart = new HeartMovieClip();//The HeartMovieClip is the AS Linkage
                                    //of a movieclip in your library.
    newHeart.x = i*(50);//50 represents the width of your heart graphics, you can
                        //add spacing between them aswell by adding +number at the end
                        //of the equation.
    newHeart.y = 0;//The Y position of every heart will be 0. (So they will be in the
                   //top left corner.
    hpContainer.addChild(newHeart);//add the new heart to the container
}//endfor
...
function refreshHud():void{
    while(hpContainer.numChildren>0) hpContainer.removeChildAt(0); //removes every child
    //places the graphics again.
    for(var i:int = 0;i<HERO.health;i++){
        newHeart = new HeartMovieClip();//The HeartMovieClip is the AS Linkage
                                        //of a movieclip in your library.
        newHeart.x = i*(50);//50 represents the width of your heart graphics, you can
                        //add spacing between them aswell by adding +number at the end
                        //of the equation.
        newHeart.y = 0;//The Y position of every heart will be 0. (So they will be in the
                       //top left corner.
        hpContainer.addChild(newHeart);//add the new heart to the container
    }//endfor
}//endfunction

Or another way is to draw all the hearts once, then set the visibility of each one on hud refresh.

Answer 2

You seem to need to read the ActionScript 3 bible. This is not the way to do it. A slightly more reasonable way to do this is:

1. Create a Shape instance once.
2. Loop livesCounter times.
3. use Graphics to drawCircle in the correct place ie (i * 20, 10, 5)
4. Now addChild the shape.
5. Upon death removeChild the shape.
6. Use Graphics clear on it.
7. Deduct 1 from the livesCounter => go to step 2