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

Lesson 10. 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. As you have seen in previous lessons, 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 lower.fla from this lesson's Start folder.

If you take a moment to look around, you'll see that the drag-and-drop monsters are all there, but they are simple bitmap graphics—not movie clips. The invisible buttons over each of the labels are already programmed to send the appropriate explanation text to the info box, as in the previous lesson. Likewise, the scrollbar component is set up so that it starts at the top whenever a user clicks a label. The script in frame 1 of the main timeline contains only a stop() action.


If you want extra practice adding dynamic text to the info box, you can use the optional FLA document called lower_extrapractice.fla, in which I have removed the info box, the scrollbar, and all scripts from the invisible buttons. To get this version of the file up to speed, you'll need to add the dynamic text field and its scrollbar, give them both instance names, and script the invisible buttons to pass the text to the dynamic text box. The content for each of the invisible buttons can be found, as before, in script_html.txt, included in this lesson's Start folder.

Select Chiron the centaur and press F8 to convert the bitmap graphic to a symbol. In the Convert to Symbol dialog, name the symbol chironMC, set its behavior to Movie Clip, set its registration to its top-left corner, and click OK.

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

In naming it chironMC, 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.

Repeat step 2 for the remaining three monsters. The second from the left should be called luciferMC, then geryonMC, and finally furyMC. The registration point for all of them should be the upper-left corner.

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

Give each of the monster movie clips an instance name. Left to right, the instance names should be as follows: chiron, lucifer, geryon, and fury.

Giving these movie clips instance names doesn't affect their ability to be dragged, since the script that does the work of making them draggable is internal to the clip and refers to its movie clip with the keyword this. Providing them instance names enables other parts of the movie to communicate with each instance.

Select the chiron instance, open the Actions panel, and enter the following script:

							on (press) {
							on (release) {

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 movie clip instance. The two event handlers cause the script to activate when the user clicks on the movie clip and then releases.

Press Command+Return/Ctrl+Enter to test the movie. 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 to the other three monsters. The script is about to get more complex, so you should wait until you perfect it, then copy and paste it 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