• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 13. Drag-and-Drop Interactions > Creating Basic Drag-and-Drop Interactiv...

Creating Basic Drag-and-Drop Interactivity

Drag-and-drop functionality is made possible by the startDrag() and stopDrag() methods of movie clips. Because these are movie clip methods, the only objects you can make draggable are, well, movie clips. Remember, just because you have to use a movie clip symbol for something doesn't mean it must include an animation. It could be a single object on a single frame, which is what we'll use in this task.

Open dante.fla—either the version you completed from Lesson 12 or the one in this lesson's Start folder. Click Frame 10 in any layer to see the lower half of the Inferno.

If you take a moment to click on each of the drag-and-drop monsters, you'll see that they are all there, but they are simple bitmap graphics—not movie clips.

The script for this keyframe has been partially written (look in Frame 10 of the actions layer), so that the invisible buttons over each of the labels are already programmed to send the appropriate explanation text to the text area. The script is the same as the one you wrote in the previous lesson—except the instance-level particulars (such as the instance name and the actual text sent to the text area). Likewise, the script has already been written so that the Up button returns the user to the upper half of the Inferno.

Select Chiron the centaur and press F8 to convert the bitmap graphic to a symbol. In the Convert to Symbol dialog, name the symbol chiron, set its Behavior to Movie Clip, set its Registration to the top-left corner (if necessary), and click OK.

By converting the bitmap graphic to a movie clip, you enable the drag capability. At this point, you cannot drag the movie clip, but the potential is there.

In naming it chiron, remember you are naming the symbol itself, as it will be listed in the Library. You are not naming the instance, even though the graphic is now in a movie clip instance on the stage.

By setting its registration point to the upper-left corner, you make it easier to position the graphic later.

Repeat Step 2 for the remaining three monsters. Name the second monster from the left lucifer, then geryon, and finally fury. The Registration for all of the monsters should be the upper-left corner.

At this point, you have made it possible for each of the monsters to be dragged.

In the Property inspector give each of the monster movie clips an instance name. Left to right, the instance names should be as follows: chiron_mc, lucifer_mc, geryon_mc, and fury_mc.

Giving these movie clips instance names enables you to make them draggable and lets other parts of the movie communicate with each instance.

Click Frame 10 of the actions layer, press F9 if necessary to open the Actions panel, and at the bottom of the existing script, add the following code:

// Creates Chiron drag and drop functionality
chiron_mc.onPress = function() {
chiron_mc.onRelease = function() {

Even if you haven't used the startDrag() and stopDrag() actions before, you can probably read this script without any trouble. The keyword this simply refers to the current timeline—in this case, the chiron_mc movie clip instance. The two event handlers cause the script to activate when the user presses the movie clip and then releases.

Press Command+Return/Ctrl+Enter to test the movie. Click the Down button to get to Lower Hell. Try dragging and dropping Chiron.

The script is all you need to make the character fully draggable. At this stage, the interaction is primitive, since nothing happens when you drag and drop the character, and there's nowhere special to drop it. Still, you can see how easy it is to add this sort of functionality to a movie clip.

Return to the main movie and save your file.

Now it's time to make this simple interaction more meaningful.

For now, don't bother adding the same script for the other three monsters. The script is about to get more complex, so you should wait until you perfect it, then copy and paste the script to add it to the other monsters. (You will tweak each copied script to customize it for its specific monster.)



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint