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.

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]);
}