I am trying to make an HP bar for my game. I have the code here

private var hpBar:Sprite = new Sprite();
private function drawHPBar(s:Stage):void{
    hpBar.graphics.beginFill(0xFF1717); //Medium Red
    hpBar.graphics.drawRect(620, 165, 152, 22);
    s.addEventListener(KeyboardEvent.KEY_DOWN, displayKey);

private function displayKey(e:KeyboardEvent):void{
    hpBar.scaleX -= 0.02;

But when the hpBar.scaleX is decreased, the object shrinks and at the same time, moves left across the screen(stage). I am so confused because I saw videos on youtube about the scaleX and they don't seem to have a problem.

  • \$\begingroup\$ Maybe because the scale is applying from the top-left corner and not from the middle \$\endgroup\$
    – Bálint
    Commented Jul 8, 2016 at 20:53
  • \$\begingroup\$ I don't think its that. Can someone help please I have been having trouble with this for a while. \$\endgroup\$
    – Quasar Xrt
    Commented Jul 9, 2016 at 0:42

1 Answer 1


I found the problem. Finally!!

I had to set the X and Y manually, and leave the X and Y blank when I created a rectangle.

Here's an example:

        hpBar.x = 620;
        hpBar.y = 165;
        hpBar.graphics.beginFill(0xFF1717); //Medium Red
        hpBar.graphics.drawRect(0, 0, 152, 22);

Now, when the scaleX is changed, it will no longer move across the screen.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .