zoom mc_1 to center of reference point mc_2?

[Snickers76]

I am building a map app that allows you to drag a map around the screen and it is masked to only allow a portion of it to be seen as you zoom in. For zoom, I can only think of scaling the mc_1 (which is the map). Since my stage is larger than my map viewable area, i have placed a mc_2 as the background to the map. mc_2 is the "stage" for mc_1. So mc_1 is above mc_2.

I want to enlarge mc_1 by easing out...but don't know how to scale it where it looks like a real zoom effect. I figured I would just have the user click a + button and it would scale it to a predetermined size. Any ideas how to ease it in/out?

Main question:
Lets say my map was of the united states and I drag the map around my window and Texas is in the center point of the mc_2. How do I zoom in on Texas, instead of it just scaling mc_1?

I would greatly appreciate any assistance rendered. Thanks!

[AttackRabbit]

you can approixmate the registration point of the scaling movieclip to the desired location. so lets say texas, in relation to the movieclip , is at x : 500 , y : 250. You would want to set the registration point to 500 , 250 internally to the scaling clip. That way when you scale it will scale from that point up. Depending on how you have things nested you might need to do some globalToLocal point conversions , but it shouldnt be too hard.

[Snickers76]

you can approixmate the registration point of the scaling movieclip to the desired location. so lets say texas, in relation to the movieclip , is at x : 500 , y : 250. You would want to set the registration point to 500 , 250 internally to the scaling clip. That way when you scale it will scale from that point up. Depending on how you have things nested you might need to do some globalToLocal point conversions , but it shouldnt be too hard.

I don't understand globalToLocal point conversions. Do you know of any tutorials on the subject?

[er_gagan_deep]

http://blog.greensock.com/tweenlite/

may this site can help u if u want to show some simple zoom in zoom out effect.

[v5000]

I recently prototyped something similar. It's probably not exactly what you're after but should get you close.

doubleclick to zoom in.
shift+doubleclick to zoom out.
click and drag to move image.
shift+click and drag to move mask.

import fl.transitions.*;
import fl.transitions.easing.*;

var loader:Loader = new Loader();
loader.load( new URLRequest( "http://www.loscoltrahues.com/01-00-000%20Herramientas%20Camera%20Department%20-%20Camera%20Department%20Tools/01-01-000%20Ajustes%20y%20Calibracion%20-%20Adjustments%20and%20Calibration/dSam%20Depth%20of%20Field%20Test%20Chart.JPG" ) );

var image:Sprite = new Sprite();
image.addChild( loader );

var maskSprite:Sprite = new Sprite();
maskSprite.graphics.beginFill( 0 );
maskSprite.graphics.drawEllipse( 0, 0, 400, 400 );
maskSprite.graphics.endFill();

image.mask = maskSprite;
image.cacheAsBitmap = true;
image.doubleClickEnabled = true;
image.mouseChildren = false;
image.scaleX = 0.5;
image.scaleY = 0.5;

var tweenX:Tween = new Tween( image, "x", Regular.easeOut, image.x, image.x, 1, true );
var tweenY:Tween = new Tween( image, "y", Regular.easeOut, image.y, image.y, 1, true );
var tweenScaleX:Tween = new Tween( image, "scaleX", Regular.easeOut, image.scaleX, image.scaleX, 1, true );
var tweenScaleY:Tween = new Tween( image, "scaleY", Regular.easeOut, image.scaleY, image.scaleY, 1, true );

var scaleInc:Number = 2;
var scaleMin:Number = .0625;
var scaleMax:Number = 4;

function onImageDoubleClick( e:MouseEvent ):void {
    var scale:Number = e.shiftKey ? image.scaleX / scaleInc : image.scaleX * scaleInc;
    scale = Math.min( Math.max( scale, scaleMin ), scaleMax );
    
    var offsetX:Number = ( maskSprite.width / 2 +  maskSprite.x ) - ( image.mouseX * scale );
    var offsetY:Number = ( maskSprite.height / 2 +  maskSprite.y ) - ( image.mouseY * scale );
    
    updateTween( tweenX, image.x, offsetX );
    updateTween( tweenY, image.y, offsetY );
    updateTween( tweenScaleX, image.scaleX, scale );
    updateTween( tweenScaleY, image.scaleY, scale );
}
function updateTween( tween:Tween, begin:Number, finish:Number ):void {
    tween.stop();
    tween.begin = begin;
    tween.finish = finish;
    tween.start();
}
function onImageStartDrag( e:MouseEvent ):void {
    e.shiftKey ? maskSprite.startDrag() : image.startDrag();
    
    stage.addEventListener( MouseEvent.MOUSE_UP, onImageStopDrag );
}
function onImageStopDrag( e:MouseEvent ):void {
    stage.removeEventListener( MouseEvent.MOUSE_UP, onImageStopDrag );
    stopDrag();
}
image.addEventListener( MouseEvent.DOUBLE_CLICK, onImageDoubleClick, false, 0, true );
image.addEventListener( MouseEvent.MOUSE_DOWN, onImageStartDrag, false, 0, true );
addChild( image );