Actionscript Cookbook

7.13. Creating a Draggable Movie Clip

Problem

You want a user to be able to drag a movie clip with the mouse.

Solution

Use the startDrag( ) method.

Discussion

You can allow the user to drag any movie clip with the mouse by invoking the startDrag( ) method on the clip. When invoked without parameters, startDrag( ) moves the movie clip relative to the pointer at the moment the method was invoked (the clip moves with the pointer but maintains the same distance from the pointer). You can see this for yourself.

1. Place the following code on the first frame of the main timeline of a new Flash document:

   // Include DrawingMethods.as from Chapter 4 for its drawCircle(  ) method.
   #include "DrawingMethods.as"
   
   // Create a movie clip and draw a circle in it.
   _root.createEmptyMovieClip("circle_mc", 1);
   circle_mc.lineStyle(1, 0x000000, 100);
   circle_mc.drawCircle(100);
   
   // Call the startDrag() method from circle_mc.
   circle_mc.startDrag(  );

2. Move the pointer so that it appears on the right side of the Player when you test it.

3. Test the movie. Notice that the movie clip moves with the pointer but always maintains the same distance.

The startDrag( ) method can be called with no parameters, as shown in the previous example. Optionally, you can also specify one Boolean parameter that explicitly tells the movie clip whether or not to snap to the mouse pointer:

_root.createEmptyMovieClip("circle_mc", 1);
circle_mc.lineStyle(1, 0x000000, 100);
circle_mc.drawCircle(100);

// Call the startDrag(  ) method from circle_mc ...