Flex 4: Scale to a point (zoom into an image where the mouse was clicked)

Question

I've been trying to get this working and I can't seem to figure it out. There is an Image control that when I click on it I need to zoom in (using the center/transform point where the mouse is clicked).

I have the zoom transition working great, but when I set transformX & tranformY (with autoCenterTransform false) it doesn't zoom into that point.

Here is my code that only zooms in (not to a specific point)

<fx:Script>
        <![CDATA[

            protected function imgLogo_clickHandler(event:MouseEvent):void
            {
                transformer.play();
            }           
        ]]>
    </fx:Script>

    <fx:Declarations>       
        <s:Parallel id="transformer" target="{imgLogo}">
            <s:Scale scaleXBy="0.5" scaleYBy="0.5" />           
        </s:Parallel>
    </fx:Declarations>

    <mx:Image id="imgLogo"   width="250" x="100" y="100"
            maintainAspectRatio="true" source="@Embed('src/logo.png')"      
            click="imgLogo_clickHandler(event)"  />

Any help is greatly appreciated. Thanks

Answer 1

After some further digging, I was able to figure this out. You need to set the transformX and transformY to the stage coordinates (NOT the local ones) from the MouseEvent.

protected function imgLogo_clickHandler(event:MouseEvent):void
{
     scaleImg.transformX = event.stageX;
     scaleImg.transformY = event.stageY;
     transformer.play();
}  

And modify the declaration for the Scale like so

<s:Scale id="scaleImg" scaleXBy="0.5" scaleYBy="0.5" autoCenterTransform="false" />