Clicked SWF/IMAGE position to center : FLEX

Question

Iam trying to make clicked position to center in flex. My code is

<fx:Declarations>
    <s:Parallel id="transformer" target="{swe}">
        <s:Scale id="scaleby" scaleXBy="0.2" scaleYBy="0.2" autoCenterTransform="false"/>           
    </s:Parallel>
</fx:Declarations>




   <s:Group width="500" height="350" clipAndEnableScrolling="true">
               <s:SWFLoader source="CasuarinaBigMap.swf"  width="500"   height="350" id="swe" click="swe_clickHandler(event)"/> 

 </s:Group>


protected function swe_clickHandler(event:MouseEvent):void
{
        scaleby.transformX = event.mouseX;
        scaleby.transformY = event.mouseY;
        transformer.play(); 
}

My qustion is How can I make clicked point pan into the center of the box? Pls help.

Thanks.

Partitive

Answer 1

This ought to do the trick:

<fx:Declarations>
    <s:Move id="moveEffect" />
</fx:Declarations>

<s:Group id="mapContainer" width="300" height="300" clipAndEnableScrolling="true"
         click="pan(event.localX, event.localY)">

    <s:Image id="map" source="@Embed('bigMap.png')" />
</s:Group>

'localX' and 'localY' are the mouse's 'x' and 'y' position relative to the mapContainer.

And now the pan() method:

private function pan(mouseX:Number, mouseY:Number):void {
    //calculate the offset from mapContainer's center
    var diffX:Number = mapContainer.width/2 - mouseX;
    var diffY:Number = mapContainer.height/2 - mouseY;

    //move the map through the move effect
    moveEffect.xFrom = map.x;
    moveEffect.yFrom = map.y;
    moveEffect.xTo = diffX;
    moveEffect.yTo = diffY;

    moveEffect.play([map]);
}

Aguascalientes

Could the person who downvoted this answer please clarify what he thinks is wrong with it? Also couldn't help but notice that this answer was downvoted roughly at the same time... – Aguascalientes

Answer 2

Try using a Move effect instead of a Scale effect.

Sahaptin