AS3 Zooming center of a dragable container with in a Mask

Question

HI, I have container movieclip and one mask layer with the height and width of the current screen. The continer is always bigger than the mask clip. so i need to zoom the container at the center of the mask clip. something link in MicroSoft XL zoom controller at the bottom right.

Does any once have the equation or any other demo links? Thanks in advance!!!

EDIT 1

private function slider (event:Event) {
    //event.target.value = 0 to 1  
    // possible values are 0, 0.1, 0.2, 0.3, ... 0.9, 1
    // mcMask.x =  mcMask.x = 0;
    // mcMask.width = stage.StageWidth, mcMask.height = stage.StageHeight
    // mcContainer.x and mcContainer.y may vary .. its greater than the mcMask clip. 
    // So its need to be drag on the mask clip. I have placed a lots of images in the container something like map. 
    // If the slider changes the values then the map(mcContainer) need to zoom to scale came from 'event.target.value'.

    // i want to zoom the mcContainer inside the mask, not the mouse cliked point, I want the current center 
    // posistion of the container with resepect to the  mask clip.

    mcContainer.scaleX = mcContainer.scaleY = (event.target.value);
    mcContainer.x = (mcMask.width - mcContainer.width)/2;
    mcContainer.y = (mcMask.height - mcContainer.height)/2;

    // I tried this but if i drag this mcContainer to the left or right it should not locate the center point.
}

any hope??? :(

EDIT 2

The Source Code: http://www.4shared.com/file/08X5mG99/AS3_Zooming.html

Answer 1

assuming that both clips have registration points top left, then you can use

mcContainer.x = (mcMask.width - mcContainer.width)/2;
mcContainer.y = (mcMask.height - mcContainer.height)/2;

This will center the container clip if you want to scale the container clip as well you need this

mcContainer.scaleX = mcContainer.scaleY = Math.min(mcMask.width/mcContainer.width, mcMask.height/mcContainer.height);

Changing Math.min to Math.max will change the "zoom" style from showing all, to filling the mask area. If you are zooming as well as positioning you will need to do the zooming before the positioning.

Answer 2

ok then, when you scale around a point, you have to know where the point is relatively, and then scale that up with the same scale as the clip you are resizing. therefore something like this should work (note, this isnt tested, but try tweaking it around a bit):

-- EDIT --

private function zoomContainer (event:Event):void {
        var relativeZoom:Number = event.target.value / mcContainer.scaleX;

        var origin:Point = new Point(stage.stageWidth/ 2, stage.stageHeight / 2);
        var centerPoint:Point = mcContainer.globalToLocal(origin);
        centerPoint.x *= relativeZoom;
        centerPoint.y *= relativeZoom;
        var newCenterPoint:Point = mcContainer.localToGlobal(centerPoint);
        var offset:Point = origin.subtract(newCenterPoint);

        mcContainer.x += offset.x;
        mcContainer.y += offset.y;
        mcContainer.scaleX *= relativeZoom; 
        mcContainer.scaleY *= relativeZoom;
    }