Problem scaling

1

Thanks for looking at my post and trying to help me out! I have some code that draws a basic shape, and adds a mouseover event which should make the image smaller or larger. However, when I use scaleX and scaleY the image scales, but it also moves across the screen. How can I scale the UIComponent correctly? This code makes a 100x100 pixel square starting at 300, 200. I want the square to remain at the same position, but grow or shrink during a mouse over. The application wont be using squares all the time; there will be many different polygons, but I can always calculate the center point. I just want it to grow or shrink from the center point rather than moving across the screen. One thing that I notice is that the square’s x and y are 0,0, which seems odd to me because I start the drawing at 300,200. Here’s my short code:




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.core.UIComponent;
        import mx.controls.Alert;

        private function square():void
        {
            var uic:UIComponent = new UIComponent();
            
            uic.graphics.beginFill(0xFF00FF, .5);
            uic.graphics.lineStyle(1, 0x000000, 1);
            
            uic.graphics.moveTo(300, 200);
            uic.graphics.lineTo(400, 200);
            uic.graphics.lineTo(400, 300);
            uic.graphics.lineTo(300, 300);
            
            uic.graphics.moveTo(100, 200);
            uic.graphics.endFill();
            var disp:DisplayObject = this.addChild(uic);
            disp.addEventListener(MouseEvent.MOUSE_OVER, myMouseOver);
        }
        
        private function myMouseOver(e:Event):void
        {
            //Alert.show(e.currentTarget.x.toString());
            //Alert.show(e.currentTarget.y.toString());
            e.currentTarget.scaleX = 1.5;
            e.currentTarget.scaleY = 1.5;
        }
    ]]>
</mx:Script>
<mx:Button id="theButton2" x="378" y="300" label="Draw Circle" click="{square()}"/>
</mx:Application>

If I change myMouseOver() to this:


private function myMouseOver(e:Event):void
{
    e.currentTarget.scaleX = 1.5;
    e.currentTarget.scaleY = 1.5;
    e.currentTarget.x = -175;
    e.currentTarget.y = -125;
}

Then the square scales as expected, but I don’t understand why. If I understood it, maybe I could figure out the math to scale my other objects, because the actual application contains all different kinds of polygons.

I appreciate any help!