ActionScript - Using the Mouse to Drag Something

Using a mouse to "drag" an item is a recurring problem in user interface design. The basic procedure is

When the button is pressed
- Record the current mouse position
- Set a flag
- Optionally, change the mouse cursor
If the mouse moves while the flag is set
- Compute the change in position
- Do something based on the change
- Record the new mouse position
When the button is released
- Reset the flag
- Restore the mouse cursor (if necessary)

The "Flag"

In most programs, I have used a variable as the "flag".

The Flash help suggests another approach - attach and release the Mouse_Move event. I like this because no code is called, and there is no need to test some flag, when the mouse is moving ... until the button is pressed.

The next 2 sections show these techniques. Note that the mouse is moving an object named canvas and that the mouse events are connected to the stage.

Using a "flag" Variable

This ActionScript code works - it leaves the MOUSE_MOVE event attached and checks a "flag" variable.

var Drag_Flag:Boolean = false;
var Mouse_x:int;

stage.addEventListener(MouseEvent.MOUSE_DOWN,canvas_OnMouseDown)
stage.addEventListener(MouseEvent.MOUSE_UP,  canvas_OnMouseUp)
stage.addEventListener(MouseEvent.MOUSE_MOVE,canvas_OnMouseMove)

function canvas_OnMouseDown(m:MouseEvent){
  Drag_Flag = true;
  Mouse_x   = m.stageX;
}
function canvas_OnMouseUp(m:MouseEvent){
  Drag_Flag = false	
}

function canvas_OnMouseMove(m:MouseEvent){
  if (Drag_Flag) {
    canvas.x -= Mouse_x - m.stageX;
    Mouse_x   = m.stageX; // Save the new position
    m.updateAfterEvent(); // This makes the scrolling much smoother
  }
}

Adding and Removing an Event

This ActionScript code works - it adds and removes the MOUSE_MOVE event as appropriate.

var Mouse_x:int;

stage.addEventListener(MouseEvent.MOUSE_DOWN,canvas_OnMouseDown)
stage.addEventListener(MouseEvent.MOUSE_UP,  canvas_OnMouseUp)

function canvas_OnMouseDown(m:MouseEvent){
  Mouse_x = m.stageX;
  stage.addEventListener(MouseEvent.MOUSE_MOVE,canvas_OnMouseMove)
}
function canvas_OnMouseUp(m:MouseEvent){
  stage.removeEventListener(MouseEvent.MOUSE_MOVE,canvas_OnMouseMove)
}

function canvas_OnMouseMove(m:MouseEvent){
  canvas.x -= Mouse_x - m.stageX;
  Mouse_x   = m.stageX; // Save the new position
  m.updateAfterEvent(); // This makes the scrolling much smoother
}

Notes

A few notes on the above examples

In the code, the addEventListener function calls do NOT end in semicolons. I checked, the code actually works that way. I have no idea why, any real language would have required the semicolons. I left them that way here because I thought it was kind of strange.
m.updateAfterEvent() makes the display much smoother - without it, the display jerks a little ... the mouse moves then the image catches up ... in little hops.
Only the x-values are used - the object scrolls sideways only - both x- and y-values could be used.

Drag Class

This isn't a lot of code ... but it is required in many programs. As a result, I thought it would be useful to create a class to encapsulate this. If it is done "right", then the class can be expanded to also handle changes in the mouse icon. The following is all the code necessary to use the TMouse class to perform the same function as the two examples above.

var m_drag: TMouse = new TMouse;

m_drag.Target      = stage;
m_drag.OnMouseMove = canvas_move;

function canvas_move(dX:int, dY:int){
  canvas.x -= dX;
}

References

In the Flash help

Programming ActionScript 3.0 
Display programming > Manipulating display objects > Changing position

   Creating drag-and-drop interaction

Provides several examples on how to drag objects. The first example uses the startDrag() method which they admit (and I agree) is fairly limiting. The second example uses the MOUSE_MOVE event and provides much more capability. The third shows how several objects can share the same methods. I strongly suggest reading these.

For related information, scroll to the bottom of the Mouse class help for a custom cursor example - create a graphic that extends Shape, hide the real cursor, draw the graphic, and reposition the image as the mouse moves.

This example suggests disabling the drag and restoring the cursor when the mouse leaves the component (MOUSE_OUT) or the form (MOUSE_LEAVE).

Author: Robert Clemenzi - clemenzi@cpcug.org