NOTE: THIS POST HAS AN UPDATED PAGE HERE http://www.flashmadblog.com/2010/08/actionscript-3.0-image-panning-on-mouse-move/

Today i was looking for a image panning script in as3 and there was less scripts available. Many are broken and only one directional panning. So i thought to write one as3 image panning function which will move in x and y directions smoothly. Hope this will be helpful to many people who searching like me. I did searches on google with keywords “image panning as3, image panning class as3, image panning on mouse move ..etc etc… Any way this script is tested OK and you can use on your projects .

The function is simple : Target is your movieClip, speed is X speed and speed1 is Y speed. If you want to use a mask then just replace all stage.stageWidth codes with maske width and height.

DOWNLOAD SAMPLE HERE

Note: the code below may not work due to html formatting. [Some invisible characters coming up] . So download the sample file above.

function panThisImage(target:MovieClip, speed:Number,speed1:Number, dir:int) {
var mousePercent:Number = mouseX / stage.stageWidth;
var mousePercent1:Number = mouseY / stage.stageHeight;
stage.addEventListener(MouseEvent.MOUSE_MOVE, panImage);
target.cacheAsBitmap = true;

function panImage(E:MouseEvent):void {
var mSpeed:Number;
var mSpeed1:Number;
mousePercent = mouseX / stage.stageWidth;
mousePercent1 = mouseY / stage.stageHeight;
if (dir == 1) {
mSpeed = 1 – mousePercent;
} else {
mSpeed = mousePercent;
}
if (dir == 1) {
mSpeed1 = 1 – mousePercent1;
} else {
mSpeed1 = mousePercent1;
}
target.destX = Math.round(-((target.width – stage.stageWidth) * mSpeed));
target.destY = Math.round(-((target.height – stage.stageHeight) * mSpeed1));
if (target.hasEventListener(Event.ENTER_FRAME)) {
target.removeEventListener(Event.ENTER_FRAME, del);
}
target.addEventListener(Event.ENTER_FRAME, del);

}
function del(E:Event):void {
if (Math.abs(target.x – target.destX) <= 1) {
target.x = Math.round(target.destX);
target.removeEventListener(Event.ENTER_FRAME, arguments.callee);
} else {
target.x += (target.destX – target.x) * (speed / 100);
}
if (Math.abs(target.y – target.destY) <= 1) {
target.y = Math.round(target.destY);
target.removeEventListener(Event.ENTER_FRAME, arguments.callee);
} else {
target.y += (target.destY – target.y) * (speed1 / 100);
}
}
}
panThisImage(imgLoader, 2,2, 0);

Related posts:

1. ACTIONSCRIPT 3.0 IMAGE PANNING ON MOUSE MOVE