- Selection
- Task: Keypad Lock
- Dragging
- Drag and Drop
- Task: Matching Game
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Drag and Drop
Now that you can drag movie clips around the screen, where do you drag them? Chances are that you want to monitor the user's actions and determine where the user placed the movie clip.
Basic Drop Zone
The hitTest function can be used to determine when the movie clip is overlapping with another movie clip. In the following script, we'll use the simpler startDrag command so that the dragging portion of the script is simple and we can concentrate on the new functionality.
In the following script, the hitTest function is used to compare the movie clip that was dragged with another one named dragZone that is one level up, at the root level.
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag();
}
}
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.stopDrag();
// see if this mc is inside the dropZone mc
if (this.hitTest(_parent.dropZone)) {
trace("Dropped in zone");
} else {
trace("Dropped outside zone");
}
}
}
Notice that hitTest is not used in the same way as it was before. Instead of giving it an x and y location, we are now giving it another movie clip.
This form of hitTest compares the location and area of coverage of two movie clips. In this case, this is compared with _parent.dropZone. If these two movie clips overlap, hitTest returns true. To determine whether an overlap exists, the rectangles of both movie clips are used. So this means that when we use two circles, as in the example movie, the circles themselves don't even have to touch as long as the rectangles of the two movie clips touch.
To illustrate, look at Figure 8.2. Every one of the DRAG ME movie clips is overlapping with the drop zone. The dashed line around the movie clips demonstrates why this is so.
){kind=link}
Figure 8.2 The dashed lines show the invisible rectangle around all the movie clips that hitTest uses to determine an overlap. All these clips overlap the drop zone.
For many purposes, the way that hitTest determines an overlap is too liberal. There are other ways to use hitTest, however. First, we can go back to using it with x and y coordinates. We can use the center point of the draggable movie clips as the x and y location, and then use dropZone as the primary movie clip. The line would look like this:
if (_parent.dropZone.hitTest(this._x,this._y)) {
With this line, instead of the one in the previous example, the draggable movie clip's center must be inside the drop zone's rectangle.
We can go one step further with hitTest. By adding a third parameter, we can force hitTest to look at the exact shape of the movie clip and determine whether an x and y location is inside it. This third parameter needs to be true if you want this behavior. If it is false, it will act just like a normal hitTest function. Here is the final code:
if (_parent.dropZone.hitTest(this._x,this._y,true)) {
Now the draggable movie clips behave a little better. If you use the example movie 08drop.fla, the rightmost movie clip will use the original script and will signal an overlap when its rectangle overlaps the drop zone's rectangle. The other movie clip will use the more complex hitTest to only overlap when its center is on the drop zone's shape.