Skip to main content
March 7, 2011
Answered

panning image script

  • March 7, 2011
  • 1 reply
  • 1148 views

Hello all,

I am writting a new post about the same issue, sorry for that, but i really need help,

Finally, i am using the following code for panning a big image in my flash as3 project :

-------------

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_DOWN, 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);

}

     //tumpanel.y = imgLoader.y  + 405;

     //tumpanel.x = imgLoader.x  + 135;

}

}

panThisImage(imgLoader,1,1,2);

---------------

The big image (imgLoader) moves with the coordinate of the mouse. But finally, i want it to move when i press and drag imgLoader. Not by mouse move.

Can i change the code above?

Thanks for help

This topic has been closed for replies.
Correct answer Ned Murphy

Then you need to specify a rectangle as a boundary parameter in the startDrag() method.  If you look up the startDrag method in the help documents you will find what you need to do there.  You will probably find it helpful to also look up the Rectangle class to see how to define that.

1 reply

Ned Murphy
Legend
March 7, 2011

If you only want to drag the object, then you can get rid of all that code and just look into using the startDrag() and stopDrag() methods.

imgLoader.addEventListener(MouseEvent.MOUSE_DOWN, dragImgLoader);
imgLoader.addEventListener(MouseEvent.MOUSE_UP, releaseImgLoader);

function dragImgLoader(evt:MouseEvent):void {
    imgLoader.startDrag();
}

function releaseImgLoader(evt:MouseEvent):void {
    imgLoader.stopDrag();
}

March 7, 2011

thank you very much Ned,

but there is one thing that i have to solve;

image goes to end of screen when i drag it more... i want it to limit boundries image position 0,0 and stage.width and stage.height. I mean, i dont want let user to drag the image a lot.

Ned Murphy
Ned MurphyCorrect answer
Legend
March 7, 2011

Then you need to specify a rectangle as a boundary parameter in the startDrag() method.  If you look up the startDrag method in the help documents you will find what you need to do there.  You will probably find it helpful to also look up the Rectangle class to see how to define that.