Question

I’m having toruble with an image that I zoom into in flash. I got everything to work, only I want the clicked X and Y coordinats to center to the stage. ( so that the area clicked on always zooms in and position the area clicked to the middle of the stage)
the image is a movieclip and it zooms with a tween, but i tried everything but the image wont center the stage..

does anyone have a clue for wich actionscript 3 code I can use to do this?

my code is:

const TWEEN_IN:String = "tweenIn";
const TWEEN_OUT:String = "tweenOut";
var tweenDirection:String;

var internalPoint:Point;
var externalPoint:Point;
var tw:Tween;

square.x = stage.stageWidth - square.width/2;
square.y = stage.stageHeight - square.height/2;

square.addEventListener(MouseEvent.CLICK, zoomIn);

function zoomIn($e:MouseEvent):void
{
    square.removeEventListener(MouseEvent.CLICK, zoomIn);
    //internalPoint = new Point(stage.width/2, stage.height/2);
    internalPoint = new Point(square.mouseX, square.mouseY);
    //externalPoint = new Point(500, 350);
    externalPoint = new Point(stage.mouseX, stage.mouseY);
    tweenDirection = TWEEN_IN;
    tw = new Tween(null, "", Strong.easeOut, square.scaleX, 3, 1, true);
    tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

function _syncScale($e:TweenEvent):void
{
    square.scaleX = square.scaleY = tw.position;
    var matrix:Matrix = square.transform.matrix;
    MatrixTransformer.matchInternalPointWithExternal(matrix, internalPoint, externalPoint);
    square.transform.matrix = matrix;
}

function _cleanTween($e:TweenEvent):void
{
    tw.removeEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.removeEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
    tw = null;
    if(tweenDirection == TWEEN_IN)
    stage.addEventListener(MouseEvent.CLICK, zoomOut);
    else if(tweenDirection == TWEEN_OUT)
    square.addEventListener(MouseEvent.CLICK, zoomIn);
}

function zoomOut($e:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.CLICK, zoomOut);
    //internalPoint = new Point(0, 0);
    //externalPoint = new Point(0, 0);
    externalPoint = square.localToGlobal(internalPoint);
    internalPoint = square.globalToLocal(externalPoint);
    tweenDirection = TWEEN_OUT;
    tw = new Tween(null, "", Strong.easeOut, square.scaleX, 1, 1, true);
    tw.addEventListener(TweenEvent.MOTION_CHANGE, _syncScale);
    tw.addEventListener(TweenEvent.MOTION_FINISH, _cleanTween);
}

Answer 1

Just do this as you’re zooming in:

square.x = externalPoint.x - (internalPoint.x * square.scaleX);
square.y = externalPoint.y - (internalPoint.y * square.scaleY);

This assumes that the square has it’s origin/registration point in the top left, and works by taking the distance between registration point and click (internalPoint) and then making sure that the same distance is kept, albeit scaled, after the scale is complete.

Explained in another way, it stores the center of the click in internalPoint (which is relevant to the top left of the square), and the stage position of that same point in externalPoint (which is absolute). This means that were you to instantly (before zooming) do the following, it would have no effect:

square.x = externalPoint.x - internalPoint.x;

After the scale however, the internalPoint no longer gives an accurate measurement of the absolute distance between the top left corner and the mouse click. Instead, you need to scale it the same amount that the square has been scaled, for that to be accurate, which is why my suggestion above should work.