THE FLASH 4 BIBLE (IDG BOOKS)

DRAG'N'DROP IN FLASH

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:

• Start a new movie. Create a new Movie Clip named "drag object".
• Create a simple button and place it on Frame 1, Layer 1 of the "drag object" Movie Clip.
• Return to the main stage by choosing Edit>>Edit Movie (Ctrl+E or Command+E). Place a copy of the "drag object" Movie Clip on stage, then with it still selected, choose Modify>>Instance. On the Definition tab under Instance Options, type "drag-me" in the Instance Name text field (without the quotes), then click OK. This names our Movie Clip Instance so it can be referred to in the Drag Movie Clip Action.
• Return to the "drag object" Movie Clip stage by choosing Edit>>Edit Movie (Ctrl+E or Command+E). Bring up the Instance Properties dialog box for the button you placed on the stage by selecting it and choosing Modify>>Instance (Command+I or Ctrl+I).
• Click the plus (+) button in the top left corner of the Actions tab and select Drag Movie Clip. Make sure the "Start drag operation" radial button is selected, then type "/drag-me" in the Target text field. The Target option specifies which Movie Clip should begin dragging when the Drag Movie Clip Action is executed. Note that though our Drag Movie Clip action will be applied to the same Movie Clip that houses our button, a Drag Movie Clip Action can refer to any Movie Clip from any button, or even from any Keyframe. Also note that an empty target refers to the current movieclip, thus you can eliminate the '/drag-me' target and the button will still drag the current movieclip.
• Now remember that we want to make our Movie Clip start moving as soon as the user depresses the mouse button. So change the button's Event Handler from "On (Release)" to "On (Press)" by selecting the "On (Release)" line in the Actions listbox, then unchecking the Release option of the Event setting and checking Press.
• So far our button, when clicked, will cause the "drag-me" Movie Clip Instance to start following the mouse pointer. Now we have to tell the Movie Clip to stop following the pointer when the mouse button is released. With the words "End On" highlighted in the Actions listbox, click the plus (+) button and select Drag Movie Clip. Then select the "Stop drag operation" radial button. The default Event Handler added is "On (Release)", which is what we want, so that's all we have to do. The "Stop drag operation" Action stops any current dragging Movie Clip from following the mouse pointer. Since only one Movie Clip can be dragged at a time, it's not necessary to specify a Target as we did with "Start drag operation". Click OK to finish.

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
Else
   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.