Macromedia Studio 8 [Electronic resources] : Training from the Source

Creating Drag-and-Drop Targets

Drag-and-drop gets a lot more meaningful when users have a target on which to drop the dragged objects. Whether you're building an online shopping cart or creating learning media, targets provide a way for users to trigger events by manipulating onscreen objects so that they interact with each other.

In this task, you'll create drop targets for the monsters. In addition, you'll set up a test to determine whether a user dropped the monster on the correct target. Along the way, you'll learn two new actions: you'll use the hitTest() action to determine whether a monster was released over its target, and you'll use the trace() action to make Macromedia Flash generate feedback to make sure that hitTest() actually worked. After you verify that drag-and-drop works, you'll remove the TRace() action and add real code to create the desired behaviors.

The monsterTarget movie clip is simply a white rectangle with a black border large enough to enclose each of the monsters. This particular instance is the target for Chiron, hence the instance name chiron_targ_mc. The instance name enables you to write the ActionScript that can compare the _x and _y position attributes of the two objects (the chiron_mc drag object and the chiron_targ_mc target). If these two sets of position coordinates are the same (or close), then the ActionScript knows that Chiron was dropped over its target.

[View full size image]

if (this.hitTest(_root.chiron_targ_mc)) {
trace("Bull's eye!");
} else {
trace("Nope!");
}

The hitTest() movie clip method evaluates whether the object it's attached to (here, it's this, which refers to chiron_mc) intersects with the object listed as a parameter of the hitTest() action (in this case, _root.chiron_targ_mc). The hitTest() always returns either true or false. Note that hitTest() evaluates whether any pixel of one object is over any pixel of the other. The chiron_mc instance doesn't have to be perfectly positioned inside the chiron target; just a part of it needs to be inside the target.

Note

Remember, parameters are stored in the parentheses, so for hitTest() the object being tested is _root.chiron_targ. We must use the _root prefix, because chiron_targ_mc is on the main timeline, but the hitTest() action is associated with the chiron_mc movie clip instance. Because the event specified in this script (chiron_mc.onRelease) refers to one location (the instance chiron_mc), and yet the object it's comparing (chiron_targ_mc) is in a different location (on the main timeline), you must provide explicit addressing .

The hitTest() method is enclosed in an if action, which evaluates a condition to see whether it's true or false. In plain terms, the first line of this new block simply says, "if the chiron_mc instance overlaps the chiron_targ_mc instance." Because true or false is exactly what hitTest() returns, you don't need to add anything to the if action for it to work properly.

Finally, let's take a look at the trace() action. The trace() action is used for debugging, which refers to the process of troubleshooting scripts. It works by popping up a special debugging window, and displays the message passed as its parameter when it's called. The trace() action is very useful for creating a temporary dummy action that you can have fire off only under certain circumstances.

In this case, trace("Bull's eye!") executes only if the if expression evaluates to true. You could have entered real actions in the if...else block, but if something were to go wrong you wouldn't know whether the problem was one of the enclosed actions or the block itself. Using trace(), you have an easy way to make sure the framework is functioning. If it is, then you can replace TRace() with real code. The trace() commands are temporary, so don't bother putting polished text strings in them.

As you release Chiron in various places, the Output window pops up and displays the appropriate text string. If you see "Bull's Eye!" or "Nope!" no matter where you drop Chiron, you know something is wrong with your script. Otherwise, the script works, and you'll see a mix of responses.

Notice that if you drop the chiron instance so that it's half in and half out of chiron_targ, the "Bull's eye!" text appears, but the instance remains half in and half out of the targetnot very pleasing to the eye.

[View full size image]

this._x=122;
this._y=78;

If these coordinates look familiar, it's because they're just a couple pixels from where you placed the chiron_targ_mc instance in Step 1 of this task. These two lines of code snap the chiron_mc instance into place if the user releases Chiron anywhere over the chiron_targ_mc instance.

this._x=562;
this._y=342;

These two lines make the chiron_mc instance snap back to its starting point if it's released anywhere outside the parameters of the chiron_targ_mc instance.

The chiron_mc instance now snaps into place no matter where it's dropped. If it's dropped over the target, it snaps to the target. If it's dropped anywhere other than the target, it snaps back to its original position. Don't worry if Chiron snaps back to a position that's slightly out of line with the rest of the monsters. You'll fix this problem later in the lessonwith mathematical precision.

This snapping to position provides one form of feedback to the user, but you're not going to stop there.