# Image panning help!

**URL:** <https://forum.kirupa.com/t/image-panning-help/299467>\
**Category:** Uncategorized\
**Created:** [November 5, 2009, 12:37pm UTC](https://forum.kirupa.com/t/image-panning-help/299467 "2009-11-05T12:37:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![kaitlinK](https://avatars.discourse-cdn.com/v4/letter/k/b5a626/32.png) [@kaitlinK](https://forum.kirupa.com/u/kaitlinK)\
**Post date:** [November 5, 2009, 12:37pm UTC](https://forum.kirupa.com/t/image-panning-help/299467/1 "2009-11-05T12:37:29Z")

</div>

hi, everyone, i’m trying to achieve this cool image panning effect:[http://www.dvf.com/dvf/](http://www.dvf.com/dvf/)  
i think there are a about three layers in this, and as the mouse moves, you will notice that these three layers also move.

so far, i’ve achieved a similar effect, however only one layer is moving and the others aren’t.please tell me how i can make all layers move when the mouse moves too.

This is the code i have so far and using this code allows one image layer to move, this image is named bigPic and the activator - activator.

// Set variables for numbers we need in our equations  
var activatorWidth:int = activator.width;  
var activatorHeight:int = activator.height;  
var boundX:int = bigPic.x + activator.x \* 2;  
var boundY:int = bigPic.y + activator.y \* 2;  
var diffX:int = bigPic.width - activatorWidth;  
var diffY:int = bigPic.height - activatorHeight;  
var easeSpeed:int = 7;  
// Function that activates the movement (MOUSE\_OVER activator)  
function activate(event:Event):void {  
var divX:Number = mouseX / activatorWidth;  
var divY:Number = mouseY / activatorHeight;  
var moveX:Number = divX \* diffX;  
var moveY:Number = divY \* diffY;  
bigPic.x += (boundX - moveX - bigPic.x) / easeSpeed;  
bigPic.y += (boundY - moveY - bigPic.y) / easeSpeed;  
}  
// Listeners on the activator to Add / Remove Enter Frame Events  
activator.addEventListener(MouseEvent.MOUSE\_OVER, addEnterFrameEvent);  
activator.addEventListener(MouseEvent.MOUSE\_OUT, removeEnterFrameEvent);  
// Add Enter Frame Event Function  
function addEnterFrameEvent (event:MouseEvent):void {  
addEventListener(Event.ENTER\_FRAME, activate);  
}  
// Remove Enter Frame Event Function  
function removeEnterFrameEvent (event:MouseEvent):void {  
removeEventListener(Event.ENTER\_FRAME, activate);  
}

your help will be veryyy veryy much appreciated!  
xxxx