Adding more layers to Interactive Image Pan

Hello.

I am trying to achieve something like this: http://reclipse.net/kirupa/reefScroll/reefScroll.html

I have successfully gone through and executed the Interactive Image Pan tutorial you have on here. However I am looking to add more of a sense of depth, so would like some images in the “foreground” to scroll by faster (than the background) as the cursor is moved.

To accomplish this I have made the foreground image cover a much bigger width than the background, as it makes sense to me that this would make it scroll faster, using the same code as the background.

So my question is what code do I need to add to the original code to make the foreground image scroll too? It’s a MC called fg_mc. Here’s the original code for quick reference:

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));
  }
 };
}

Thank you for any help, a speedy response is appreciated :slight_smile: