AS3 ScaleX is moving object across screen

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);
hpBar.graphics.endFill();
}

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.

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

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.