Hi Everyone,
I’m having a really tough time figuring out the math for a mapping system I’m developing. The problem starts with the zoom in.
I’ve looked through some existing posts in this forum. But none of them seemed to pertain to my issue. I’ve also tried googling a bunch of “zoom in/out” flash as3 programs, but I can’t figure out how to make it work for me.
So basically, I have a map image that’s original size is 1057.3 x 701, and it’s centered on stage with registration at center of the image. My stage is 550 x 300.
The user can already drag the map image around the stage, which works great.
The zoom also works fine, all I do is use a tween to increase the scaleX and scaleY of the image.
However, I cannot figure out how to get the viewable stage area to be centered when a user zooms in after dragging to a different point. I cannot figure out how to keep it centered to the mouseX and mouseY either.
I have tried multiple theories and have been looking for outside help. Can anyone pleassse help me with this? I just can’t figure out the math for this problem!
I would appreciate any help, Thank you.
Below is my current mouse wheel code.
public function zoomIn(e:MouseEvent):void
{
var zoomMod = 0.7;
var zoomSpeed = 0.2;
if(e.delta > 0) {
/** Zoom into the image (increase the total scale) **/
var goInx = new Tween(map_mc, "scaleX", Regular.easeOut, map_mc.scaleX, map_mc.scaleX+zoomMod, zoomSpeed, true);
var goIny = new Tween(map_mc, "scaleY", Regular.easeOut, map_mc.scaleY, map_mc.scaleY+zoomMod, zoomSpeed, true);
var newMapX = stage.stageWidth/2 - map_mc.x;
var newMapY = stage.stageHeight/2 - map_mc.y;
newMapX = ((2 * mouseX) - (2 * (map_mc.mouseX * map_mc.scaleX))) / 2;
newMapY = ((2 * mouseY) - (2 * (map_mc.mouseY * map_mc.scaleY))) / 2;
var movInx = new Tween(map_mc, "x", Regular.easeOut, map_mc.x, newMapX, zoomSpeed, true);
var movIny = new Tween(map_mc, "y", Regular.easeOut, map_mc.y, newMapY, zoomSpeed, true);
}
else{
var goOutx = new Tween(map_mc, "scaleX", Regular.easeOut, map_mc.scaleX, map_mc.scaleX-zoomMod, zoomSpeed, true);
var goOuty = new Tween(map_mc, "scaleY", Regular.easeOut, map_mc.scaleY, map_mc.scaleY-zoomMod, zoomSpeed, true);
}
}