# Zooming problem

**URL:** <https://forum.kirupa.com/t/zooming-problem/285272>\
**Category:** flash\
**Created:** [March 29, 2009, 8:49pm UTC](https://forum.kirupa.com/t/zooming-problem/285272 "2009-03-29T20:49:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniel\_mihalcea](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@daniel\_mihalcea](https://forum.kirupa.com/u/daniel_mihalcea)\
**Post date:** [March 29, 2009, 8:49pm UTC](https://forum.kirupa.com/t/zooming-problem/285272/1 "2009-03-29T20:49:43Z")

</div>

Scenario: I have a movie clip(a large image that has the same size as the stage) and a button in a square that is small (150x150) . The zoom has to be like this:  
I click on the button once and I have to zoom in (only once) exactly where the square is (in the center of it).  
When I click the zoom button again I have to zoom out and every thing has to be like like the beginning. This is the code I have:  
//declare vars  
//The TweenLite classes  
import gs.\*;  
//mouse object  
var mouseListener:Object = {};  
//How much you want to scale the map clip  
var scale:Number = 500;  
//In/out scale  
var scaled\_in:Boolean = false;  
///org map size  
orig\_map\_width = map.\_width;  
orig\_map\_height = map.\_height;  
orig\_map\_x = map.\_x;  
orig\_map\_y = map.\_y;

//\*\*\*\*\*\*\*\*\*pan/zoom  
map.onPress = function() {  
///start drag map  
startDrag(map);  
};

map.onReleaseOutside = function() {  
map.stopDrag();  
};

map.onRelease = function() {  
///stop drag map  
map.stopDrag();

```
///get timmer
var clickTime:Number = getTimer();

//if double clicked auto zoom
if (clickTime-lastClickTime&lt;700) {

    //do we want to zoom in our out
    if (scaled_in == false) {
        //trace("scale in");
        scaled_in = true;
        scale = 500;
        zoom_it();

    } else {
        //trace("scale out");
        scaled_in = false;
        scale = 100;
        ///send zoom
        TweenLite.to(map,0.5,{_xscale:scale, _yscale:scale, _x:orig_map_x, _y:orig_map_y});
    }

} else {
    ///they are panning
    map.stopDrag();
}

/////Store last click time//////////
lastClickTime = clickTime;

```

};

///zoom function  
\_global.zoom\_it = function() {

```
//Mouse x/y position in map clip
var centerx:Number = map._xmouse;
var centery:Number = map._ymouse;

//Percentage of how far in we're in to the map clip 
var xpercent:Number = (centerx/map._width);
var ypercent:Number = (centery/map._height);

var targetx:Number = ((Stage.width/2)-(((orig_map_width*(scale/100))*xpercent)));
var targety:Number = ((Stage.height/2)-(((orig_map_height*(scale/100))*ypercent)));

trace(scale);
///is it larger then 1000 and less then 1
if (scale&lt;1000 or scale&gt;26) {
    trace("zooming");

    TweenLite.to(map,0.5,{_xscale:scale, _yscale:scale, _x:targetx, _y:targety});
}

```

};

///mouse wheel  
/\*mouseListener.onMouseWheel = function(delta, target) {

```
//trace("mouse Scroll");
///get total results of scale
scale = map._yscale+(delta*20);

//Zoom it
zoom_it();

```

};

Mouse.addListener(mouseListener);  
\*/  
stop();

This is not working properly and I don’t know how to have different functionality every time I press a button.  
Thank you.