# Image panning

**URL:** <https://forum.kirupa.com/t/image-panning/273121>\
**Category:** Uncategorized\
**Created:** [October 11, 2008, 4:51pm UTC](https://forum.kirupa.com/t/image-panning/273121 "2008-10-11T16:51:21Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![magarik](https://avatars.discourse-cdn.com/v4/letter/m/df788c/32.png) [@magarik](https://forum.kirupa.com/u/magarik)\
**Post date:** [October 11, 2008, 4:51pm UTC](https://forum.kirupa.com/t/image-panning/273121/1 "2008-10-11T16:51:21Z")

</div>

Hello everyone  
i need to design a website for someone, and i am a total beginner in matters of coding, so i apologize for possible blindness to obvious things.  
i am having a great difficulty to create a simple code for image/mc panning with an easing effect. there’s a tutorial here for doing this in as2, but nothing similar for as3.  
i tried to write a very simple code, there it is

```auto
stage.addEventListener(MouseEvent.MOUSE_MOVE,mur)
function mur(e:MouseEvent):void {
	sq.x=stage.stageWidth -mouseX;
}

```

but i got stuck on thinking how to add easing=\> how to slow down and stop when reaching the mc’s edge? to see the swf, [click here](http://indra-design.com/swf/pantest1.swf)

so i searched the web and found this code, but, as you’ll see if you’ll follow the link below, for some reason it all trembles weirdly, and i dont know how to make it smooth.

```auto

function panImage(E:MouseEvent):void {
var target:MovieClip = bg_mc;
var mousePercent:Number = mouseX/stage.stageWidth;
var mSpeed:Number;
var dir:Number = 1;

target.cacheAsBitmap = true;
if (dir == 1) {
mSpeed = 1 - mousePercent;
} else {
mSpeed = mousePercent;
}
target.destX = Math.round(-((target.width-stage.stageWidth)*mSpeed));
target.addEventListener(Event.ENTER_FRAME, del);
}

function del(E:Event):void {
var speed:Number = 2;
var myMovie:MovieClip=MovieClip(E.target);
if (myMovie.x == myMovie.destX) {
borra(myMovie);
} else if (myMovie.x>myMovie.destX) {
myMovie.x -= Math.ceil((myMovie.x-myMovie.destX)*speed/100);
} else if (myMovie.x<myMovie.destX) {
myMovie.x += Math.ceil((myMovie.destX-myMovie.x)*speed/100);
}
}
function borra(cual) {
cual.removeEventListener(Event.ENTER_FRAME, del);
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, panImage);

```

for crystal clearness, the rectangle in the swf is instantiated as “bg\_mc”.  
to see the swf, [click here](http://indra-design.com/swf/pantest2.swf)

please please help me out, with either of the codes, my dinner depends on it

PS.  
if somebody could also tell me how to control the amount of panning (speed) to mouse  
movement ratio i’d be eternally grateful…

thanks,  
michael