drag'n'drop in flash
A new feature in Flash 4 is drag'n'drop, which allows the user to pick up objects with the mouse pointer and move them around the movie stage. Drag'n'drop in Flash is based entirely on Movie Clips. The only objects that can be moved with the mouse are Movie Clip instances. So if you want a drawing of a triangle to be moveable by the user, you have to first put that triangle into a Movie Clip, and then place a named instance of that clip onto the stage. Flash's drag'n'drop support is fairly broad, but more complicated dragn'n'drop behaviors require a little Action Script knowledge. We'll cover building drag'n'drop Movie Clips in two parts: Drag'n'Drop Basics and Advanced Drag'n'Drop.

drag'n'drop basics
In mouse-based computer interfaces, the most common form of drag'n'drop goes like this: a user points to an object with the mouse pointer, then clicks on the object to begin moving it, then releases the mouse button to stop moving it. Because drag'n'drop in Flash only works with Movie Clips and because buttons are the only objects that can respond to mouse clicks, this common form of drag'n'drop in Flash is produced by embedding a button in a Movie Clip and then attaching a Drag Movie Clip Action to that button. Here's how:

It is possible to use a button that is not contained in the draggable Movie Clip to stop the dragging Action. If you use a button like that, remember that when your only Event Handler is "On (Release)" your Action will not be executed if the mouse button is released when it is no longer over the button (which is likely to happen when the user is dragging things around). You should also add an "On (Release Outside)" event handler to capture all Release events.

So it worked? Great, now we can tell you about the other basic settings for Drag Movie Clip...

constrain to rectangle
Check this setting in order to specify the limits of the rectangular region within which a draggable Movie Clip instance can be dragged. Once you've checked "Constrain to Rectangle", enter the pixel locations of the four corners of the rectangle. The pixel coordinates are set relative to the top left corner of the stage upon which the draggable Movie Clip instance resides. For example "Start Drag ("/drag-me", L=0, T=0, R=300, B=300)" would constrain the draggable Movie Clip instance named "drag-me" to a 300 pixel square region in the top left corner of the main stage. Note: if the draggable Movie Clip instance is located outside of the defined drag region when the Drag Movie Clip Action occurs, then the instance is automatically moved into the closest portion of the drag region.

lock mouse to center
This setting makes the dragged Movie Clip instance center itself under the mouse pointer for the duration of the drag. If the dragged Movie Clip instance is not already under the mouse pointer when the Drag Movie Clip Action occurs, the instance will automatically be moved under the pointer, providing that the pointer is not outside the region defined by "Constrain to Rectangle".

advanced drag'n'drop
In Drag'n'Drop Basics we showed how to make Movie Clip instances that can moved around by the user. But what if we wanted to force the user to move an object into a certain location before we allowed them to drop it? For instance, consider a child's shape matching game where a small circle, square, and triangle should be dragged onto corresponding larger shapes. If the child drops the small circle onto the large square or large triangle, the circle returns to its original location. If, on the other hand, the child drops the small circle onto the large circle, the small circle should stay where it is dropped, and the child should receive a "Correct!" message. That kind of game is quite possible in Flash but it requires some understanding of Get Property and Set Property (both of which are covered in Chapter 15).

Here's how it works-we'll take the circle as an example. First, you create a draggable instance of the little circle Movie Clip just as you did in Drag'n'Drop Basics (put a button in a Movie Clip, then put a named instance of that clip on stage, then attach the start and stop Drag Movie Clip Actions to the button). Then, you create a large circle graphic Symbol, put it into a Movie Clip, and place an instance of that Movie Clip onto the main stage. Name the large circle Movie Clip "circle-big". Here's where the new Flash 4 Movie Clip Properties come in: when the user drops any Movie Clip instance, the instance's "_droptarget" Property is updated. The "_droptarget" Property specifies the name of the Movie Clip instance upon which the dragged Movie Clip instance was last dropped. So if the user dropped the little circle Movie Clip instance onto the large circle instance, the "_droptarget" Property for the little circle instance would be set to "/circle-big". Knowing that, we can add an "If…Else" condition to check whether or not the little circle was dropped onto the big circle. If it was, we simply let the little circle stay dropped, then we display a "Correct" message using Tell Target to update a status-message Movie Clip. If it wasn't, we return the little circle to its place of origin by setting the x and y coordinates of the little circle instance with Set Property. Here's what the code on the little circle button would look like (note that the Stop Drag Action must occur before we check the "_droptarget" Property):

On (Press)
   Start Drag ("/circle")
End On
On (Release)
   Stop Drag
If (GetProperty ("/circle", _droptarget ) eq "/circle-big")
   Begin Tell Target ("/status")
   Go to and Play ("correct")
End Tell Target
   Set Property ("/circle", X Position) = "112"
   Set Property ("/circle", Y Position) = "316" End If
End On

on the cd-rom
For further study, we've included this basic child's drag'n'drop game as a sample movie called "dragndrop.fla" on the Flash Bible CD-ROM in the Chapter 14 folder. Excerpt readers can download the .zip file here.


about this info
this documentation is a short excerpt from colin moock's section of the 600 page book "the flash 4 bible", (idg books). to order, or for general information about the book, visit colin's flash 4 bible page.

revision history
november 30, 1999: created.
december 1, 1999: posted.