- 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
Task: Matching Game
Now let's create a movie that has more than one draggable movie clip and more than one drop zone. This will be a little game where the user has to match movie clips on one side of the screen with movie clips on the other side.
Figure 8.3 shows the movie in its starting state. The three movie clips on the left are draggable. The three on the right are drop zones. The three on the right have the names dropZone1, dropZone2, and dropZone3. All six movie clip instances are made from different movie clips in the library. This is because their text contents are different.
){kind=link}
Figure 8.3 The starting positions of the movie clips in the matching game.
-
Start with the example movie 08matchinggame-noscripts.fla. Or, you can create your own movie with six similar movie clips. Just make sure that the three drop zones are properly named.
-
Notice that the movie clips are arranged out of order. "Au" is "Gold," but "Ag" is "Silver," and "Pb" is "Lead." So the user will have to work a little to get this right.
-
All the code is in the movie clip scripts attached to the movie clips on the left. It is similar to the last example of drag-and-drop code, except for what happens when the drag is over.
-
First, the original position of the movie clip is noted and stored in the variables origX and origY. Then, if the movie clip isn't over the proper drop zone, the _x and _y locations are reset to these values. However, if the movie clip is over the right drop zone, the draggable clip's location is set to the center of the drop zone. Here is the code:
TIP
Note that I had to select the drop zones, one by one, and choose Modify, Arrange, Send To Back to make sure that they would all be behind the draggable movie clips when the user moves them into the same space.
onClipEvent (load) {
origX = this._x;
origY = this._y;
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag();
}
}
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.stopDrag();
// see if the dropZone conatins the center of this mc
if (_parent.dropZone1.hitTest(this._x,this._y,true)) {
// center it on the drop zone
this._x = _parent.dropZone1._x;
this._y = _parent.dropZone1._y;
} else {
// return it to its original location
this._x = origX;
this._y = origY;
}
}
}
The other two movie clips have the same code, except that dropZone1 is replaced with dropZone2 and dropZone3 in all three places that it appears in the code.
Give the movie a try to see how it works. The example movie 08machinggame.fla contains the complete code.
NOTE
So how do you finish a game like this? The code should check to see whether the user got all the answers right. It is a little early in the book to throw this complexity in, but I have included it in the example movie as a button in case you are curious.