Flash AS3 - How to center an object around a point after scale

Question

I've created an mc which functions as my map and controls to go with that which allow the map to be moved around and key points navigated to and zoomed in on at varying zoom levels.

I'm using scaleX and scaleY to scale the map mc and a list of x and y positions to correctly position the map for each key point.

When I want to go to a certain area I perform this calculation (offsetX and offsetY are the center of the screen):

newX = posX * scale + offsetX;
newY = posY * scale + offsetY;

Then I tween the position and scale of the map to smoothly scale and move the map to the correct position:

var tween = new TweenLite(_background, EASING_SPEED, {x:newX, y:newY,scaleX:scale.getScale(),scaleY:scale,ease:EASING_TYPE,onComplete:moveToComplete,onCompleteParams:[room]});

I now need to implement a zoom in / out function and this is what I'm struggling with. The zoom should use the center of the screen as the reg point for the scale, so I've been trying something along the lines of the following to get the correct positioning:

var newX = offsetX - (offsetX - _background.x) * scale;
var newY = offsetY - (offsetY - _background.y) * scale;

So in my mind this gets the distance from the current position of the map relative to the center point of the screen (offsetX, offsetY) then scales that distance by the new scale.

However, this is clearly wrong because it's not working and the positioning of the map is wrong.

I've also tried using a transform matrix to get the correct values but I know even less about them and not got the right results.

function scale(target:MovieClip, center:Point, scale:Number):Point {
    var m:Matrix = new Matrix();
    m.translate(-center.x, -center.y);//move the center into (0,0)
    m.scale(scale, scale);//scale relatively to (0,0) (which is where our center is now)
    m.translate(center.x, center.y);//move the center back to its original position
    return m.transformPoint(new Point());//transform (0,0) using the whole transformation matrix to calculate the destination of the upper left corner
}

If someone could shed some light on where I'm going wrong, I'd be really grateful!

Answer 1

function scaleAroundPoint (object:DisplayObject, offsetX:Number, offsetY:Number, absScaleX:Number, absScaleY:Number ):void {
    var relScaleX:Number = absScaleX / object.scaleX;
    var relScaleY:Number = absScaleY / object.scaleY;
    var AC:Point = new Point( offsetX, offsetY );
    AC = object.localToGlobal( AC );
    AC = object.parent.globalToLocal( AC );
    var AB:Point = new Point( object.x, object.y );
    var CB:Point = AB.subtract( AC );
    CB.x *= relScaleX;
    CB.y *= relScaleY;
    AB = AC.add( CB );
    object.scaleX *= relScaleX;
    object.scaleY *= relScaleY;
    object.x = AB.x;
    object.y = AB.y;
}

From http://timwhitlock.info/blog/2008/04/13/scale-rotate-around-an-arbitrary-centre/

Usage example of the above function:

var currentScale:Number = 1;
mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick (e:MouseEvent):void {
    var point:Point = new Point(e.localX, e.localY);
    currentScale += .1;
    scaleAroundPoint(mc, point.x, point.y, currentScale, currentScale);
}

Answer 2

I had a similar issue where I wanted the image to rotate on the center of the image when I changed the image rotation but instead the image would rotate around the 0,0 point.

In both cases( yours and mine ) there are 2 work around for this.
The first approach would be to set it with math when the scaling changes.

var newX = stage.width/2 - _background.width/2
var newY = stage.height/2- _background.height/2

The other way which once loaded will require no additional code.
Add another movieClip inside _background in that movieclip the image will go. This image will be positioned with the center point at the 0,0 point instead of the topleft of the image being 0,0. So basically

image.x = -(image.width/2)
image.y = -(image.height/2)

This will work for scaling and rotation of the image all centering on the center of the image.

[EDIT]
Ok so what you need to do is start a new project and create something like this diagram.

Put the image in a container movieclip
The image and the container will have the same height and width
Move the image so the center of it is at the 0,0 point of the MovieClip
Put the container on stage. 2 buttons on click event add .1 the other to substract .1 to the scale on the container.
Now run the test
As you can see the scaleing is centered on the image
Now for test 2 open up the container and drag the image more left Run the test again.
You see the image is now scaling in and out to the right of center(opposite of where you dragged).

So to sum it up the offset is inverse movement from the center of the image.(+2 points if you understand that one)

image.x = -(image.width/2) - offsetX
image.y = -(image.height/2) - offsetY

NOTE: scaling will apply to the container not the image directly where as image movement will still be image.x and image.y

Answer 3

When you scale an object , the point of focus should retain the same coordinates. Since you're scaling the object , you should probably use this point's coordinates as relative to the map size.

Since that point remains in the same stage position , it should then be possible to calculate the map coordinates relative to that fixed value.

//Pseudo Code
   // the point you want to zoom in
   // Record Mouse Click Coordinates , store in variable
   var origin:Point = new Point ( mouseX , mouseY );

   //calculate these coordinates as percentage of 
   //the map's width & height
    //store in variable 
    var percent:Object = { x% , y%}

   //during scaling, calculate the point's 
    //position using the "percent" values and
   //tween back to original ( var origin ) position 

well, I haven't tried but that would be my first approach :)

Hope it helps!

Let's say that your map at a 1:1 ratio is 800x400. The center would then be at (400 , 200 ). If you scale the map up, let's say 1600x800 , the center point will moved to (800, 400 ). You would then need to tween the map in order to get that point back to ( 400 , 200 ) this will effectively give the impression that the center point stayed in place.

The example I gave you was based on the idea that the "zoom in" point vas variable, wherever the mouse clicks, for instance . If it isn't then you should simply move your registration point to the centre :)

Answer 4

People, I think this is just a math problem. You can change the x,y position while do the scale at the same time in an animation:

public function FadeInWithGrowth(_obj:*, _timeSec:Number=DEFAULT_TIMESEC_FADE_IN, _ease:Ease=null):void{
        var _endAlpha:int = _obj.alpha;
        var _startScaleX:int = _obj.scaleX/2;
        var _startScaleY:int = _obj.scaleY/2;
        var _endScaleX:int = _obj.scaleX;
        var _endScaleY:int = _obj.scaleY;
        var _startX:int = _obj.width/2 -(_startScaleX*_obj.width/2);
        var _startY:int = _obj.height/2 -(_startScaleY*_obj.height/2);
        var _endX:int = _obj.x;
        var _endY:int = _obj.y;
        _ease = _ease ? _ease : Back.easeOut;
        //Para que o scale ocorra centralizado e não a partir do topo
        TweenMax.fromTo(_obj, DEFAULT_TIMESEC_FADE_IN,
            {alpha:0, scaleX:_startScaleX, scaleY:_startScaleY, x:_startX, y:_startY},
            {alpha:_endAlpha, scaleX:_endScaleX, scaleY:_endScaleY, x:_endX, y:_endY, ease:_ease}
        );
    }

Answer 5

You can centralize the objects in this way:

object.x=( stage.stageWidth/2 - object.width/2);
object.y=( stage.stageHeight/2 -object.height/2);

Follow same pattern for the div's in HTML:

You divide the canvas and put the object positioned on the center of the canvas, subtracting your half's value.