Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

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.

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

[View full size image]

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 lessonexcept for the instance-level specifics (such as the instance name and the 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 map.

[View full size image]

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

In naming it chiron, remember that you're 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.

[View full size image]

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

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

[View full size image]

// Creates Chiron drag and drop functionality
chiron_mc.onPress = function() {
this.startDrag();
};
chiron_mc.onRelease = function() {
this.stopDrag();
};

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 timelinein this case, the chiron_mc movie clip instance. The two event handlers cause the script to activate when the user presses the mouse over the movie clip and then releases the mouse.

[View full size image]

The script is all you need to make the character fully draggable. At this stage the interaction is primitive, because 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.

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, and then copy and paste the script to add it to the other monsters. (You'll tweak each copied script to customize it for its specific monster.)