# Interactive Image Panning\_help

**URL:** <https://forum.kirupa.com/t/interactive-image-panning-help/252681>\
**Category:** flash\
**Created:** [February 22, 2008, 12:36pm UTC](https://forum.kirupa.com/t/interactive-image-panning-help/252681 "2008-02-22T12:36:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![pinero](https://avatars.discourse-cdn.com/v4/letter/p/e47774/32.png) [@pinero](https://forum.kirupa.com/u/pinero)\
**Post date:** [February 22, 2008, 12:36pm UTC](https://forum.kirupa.com/t/interactive-image-panning-help/252681/1 "2008-02-22T12:36:33Z")

</div>

Hi there, following the tutorial from:  
[\*\*Interactive \*\*Image Panning](http://www.kirupa.com/developer/flash8/interactive_image_pan3.htm)  
I made a map which can be zoomed,  
[http://www.zoexstudio.com/test/isa\_test.html](http://www.zoexstudio.com/test/isa_test.html)  
here is the code that i came up:

```auto
this.onMouseMove = function() {

    constrainedMove(bg_mc,5,0,0);

};
function constrainedMove(target:MovieClip, speed:Number, dir:Number, dir2:Number) {

    var mousePercent:Number = _xmouse/Stage.width;
    var mousePercent2:Number = _ymouse/Stage.height;
    var mSpeed:Number;
    var mSpeed2:Number;
    if (dir == 1) {

        mSpeed = 1-mousePercent;

    } else {

        mSpeed = mousePercent;

    }
    /////////////////////////////
    if (dir2 == 1) {

        mSpeed2 = 1-mousePercent2;

    } else {

        mSpeed2 = mousePercent2;

    }

    ////////////////////////
    target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
    target.destY = Math.round(-((target._height-Stage.height)*mSpeed2));
    target.onEnterFrame = function() {

        if (target._x == target.destX) {

            delete target.onEnterFrame;

        } else {

            target._x += Math.ceil((target.destX-target._x)*(speed/75));

        }
        if (target._y == target.destY) {

            delete target.onEnterFrame;

        } else {

            target._y += Math.ceil((target.destY-target._y)*(speed/75));

        }

    };

}

```

the image mc is called bg\_mc , and it has a left upper anchor point, so when i zoom(or scale it ) the image scales from 0,0 cordinates, here is my zooming code:

```auto
MouseControl.getInstance().addScroll("bg_mc",bg_mc,Delegate.create(_root, moveFirst));
var brzina:Number = 20;
var num:Number = 25;

function moveFirst(num:Number):Void {
//bg_mc._width += num*brzina;
//bg_mc._height += num*brzina;
bg_mc._width += num*brzina;
bg_mc._height += num*brzina;
    if(bg_mc._width>2500){
        bg_mc._width=2500;
    }
    if(bg_mc._width<950){
        bg_mc._width=950;
    }
    bg_mc._yscale = bg_mc._xscale;
}

```

is there any one to help about this problem?!?! all i want to do is to make this work with a center anchor point of the bg\_mc movie clip, i tried everything and got nothing :s im freaking out