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

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