# Interactive Image Panning

**URL:** https://forum.kirupa.com/t/interactive-image-panning/273944
**Category:** Uncategorized
**Created:** [October 22, 2008, 8:59pm UTC](https://forum.kirupa.com/t/interactive-image-panning/273944 "2008-10-22T20:59:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![natsully](https://avatars.discourse-cdn.com/v4/letter/n/96bed5/32.png) [@natsully](https://forum.kirupa.com/u/natsully)
#### Post date: [October 22, 2008, 8:59pm UTC](https://forum.kirupa.com/t/interactive-image-panning/273944/1 "2008-10-22T20:59:24Z")

</div>

I’ve done a website just as explained in the “Interactive Image Panning” tutorial on the [kirupa.com](http://kirupa.com) website ([http://www.kirupa.com/developer/flash8/interactive\_image\_pan.htm](http://www.kirupa.com/developer/flash8/interactive_image_pan.htm))  
but as my image pans to the right, it continues to pan beyond the edge of the image and begins to show the background color.  
How do I make it stop at the edge of my image.

My whole website is contained inside the “bg\_mc” Movie Clip and this is the code I have I the frame in which the movie clip is:

this.onMouseMove = function() {  
constrainedMove(bg\_mc, 4, 1);  
};  
function constrainedMove(target:MovieClip, speed:Number, dir:Number) {  
var mousePercent:Number = \_xmouse/Stage.width;  
var mSpeed:Number;  
if (dir == 0) {  
mSpeed = 1-mousePercent;  
} else {  
mSpeed = mousePercent;  
}  
target.destX = Math.round(-((target.\_width-Stage.width)_mSpeed));  
target.onEnterFrame = function() {  
if (target.\_x == target.destX) {  
delete target.onEnterFrame;  
} else if (target.\_x\>target.destX) {  
target.\_x -= Math.ceil((target.\_x-target.destX)_(speed/100));  
} else if (target.\_x\<target.destX) {  
target.\_x += Math.ceil((target.destX-target.\_x)\*(speed/100));  
}  
};  
}

HELP!!!