How to drag an image to move it smoothly on screen, with ActionScript?

Question

I was thinking this is a simple task, but I\'m wrong.

I used a sprite to display an image, and when user drag it(MOUSE_DOWN and MOUSE_MOVE), I got the position in

Answer 1

Here, try this. It's just a simple black square, but it looks fine until you really start dragging it around. As was mentioned, setting the framerate to something higher is ideal. In this case, I decided to up the framerate to 60fps in the MOUSE_DOWN and drop it back to 24 in MOUSE_UP for memory reasons. You can obviously change that how you please.

import flash.display.*;
import flash.events.*;


var startX:Number;
var startY:Number;
var shape:Sprite = new Sprite();
shape.graphics.beginFill(0x000000);
shape.graphics.drawRect(0,0,50,50);
shape.graphics.endFill();
this.addChild(shape);

shape.addEventListener(MouseEvent.MOUSE_DOWN,this.mouseDown);

function mouseDown(e:MouseEvent = null):void{
    stage.frameRate = 60;
    startX = stage.mouseX - shape.x;
    startY = stage.mouseY - shape.y;
    stage.addEventListener(MouseEvent.MOUSE_MOVE,this.mouseMove);
    shape.addEventListener(MouseEvent.MOUSE_UP,this.mouseUp);
}

function mouseMove(e:MouseEvent = null):void{
    shape.x = stage.mouseX - startX;
    shape.y = stage.mouseY - startY;
}

function mouseUp(e:MouseEvent = null):void{
    shape.removeEventListener(MouseEvent.MOUSE_UP,this.mouseUp);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,this.mouseMove);
    stage.frameRate = 24;
}

Make sure you are removing the MOUSE_MOVE event on MOUSE_UP. That is key. Otherwise, you re-add the event on every MOUSE_DOWN and end up running the same code repeatedly, simultaneously. Sorry my syntax isn't 100% proper; I threw this together really quick in CS5.5 rather than doing it in Flash Builder.

Answer 2

Try calling event.updateAfterEvent() in your drag handler. The function tells Flash to redraw the stage immediately instead of waiting til the next frame.

Answer 3

If you're looking for smooth dragging experience, here is a method you could use: (let's say the thing you're dragging is called 'dragee' and this code is in the scope of dragee's parent)

function startDragging():void {
    dragee.addEventListener(Event.ENTER_FRAME,dragUpdate);
}

function stopDragging():void {
    dragee.removeEventListener(Event.ENTER_FRAME,dragUpdate);
}

var decay:Number = .25; //1 is no decay, .1 would be cazy slow

function dragUpdate(e:Event):void {
    dragee.x += decay * (mouseX - dragee.x);
    dragee.y += decay * (mouseY - dragee.y);
}

Answer 4

You must use a high framerate to have smooth movement. The optimal framerate is 60fps because it is the default for most LCD monitors.

I don't have the code under my hand so I put the code here (not tested)

yourClip.addeventListenner(MouseEvent.MOUSE_DOWN, startDrag);

function startDrag(e:MouseEvent = null):void{
    // record positon of the mouse relative to the clip
    deltaX=stage.mouseX-yourClip.x;
    deltaY=stage.mouseY-yourClip.y;
    // attach on mouse move event
    yourClip.addeventListenner(MouseEvent.MOUSE_MOVE, updateDrag);
    // attach stop event (on Stage)
    Stage.addeventListenner(MouseEvent.MOUSE_UP, stopDrag);
    }
function updateDrag(e:MouseEvent = null):void{
    yourClip.x=stage.mouseX-deltaX
    yourClip.y=stage.mouseY-deltaY
}

function stopDrag(e:MouseEvent = null):void{
   yourClip.removeEventListenner(MouseEvent.MOUSE_MOVE, updateDrag);
   stage.removeEventListenner(MouseEvent.MOUSE_UP, stopDrag);
}