Hit Test

Hit test: Matching Game

A common activity in Flash-based interactives is dragging an object to a target area in order to trigger a specific effect. The sample to the right is a simple match game; must must drag the circles to the matching rings. Note how the solid circles snap in place if you release them within their rings. The "Done" button checks your accuracy—if all three circles in the proper place, you get a smiley face; otherwise you get a frowny face.

The key to accomplishing this is a "hit test," a method that Flash uses to determine whether two objects are in contact with one another.

Exercise

Create your own matching game.

Part One: Layout

Open a new Flash file and save it as yourName_matchGame.fla.

Create three different objects. They could be different colored shapes as I have in the example, or something more elaborate (like puzzle pieces).

Convert each shape into a movie clip. Give them the instance names drag1, drag2, and drag3. Important: make sure you center the registration for each clip.

Now make three target objects, like the colored rings above. Once again, center the registration.

Covert each target object into a movie clip as well. Give them the instance names dropZone1, dropZone2, and dropZone3.

Important: Send the three target objects behind the three dragable objects by choosing Modify > Arrange> Send to Back for each one (otherwise the dragable objects will get lost behind the targets instead of sitting on top of them).

Mix up the arrangement of the three dragable objects (and/or target objects).

Create two buttons: a "Done" button and a "Reset" button. Place them on stage.

Create a positive feedback movie clip and a negative feedback movie clip. In other words, something that suggests "Yay you got them right" and "Loser you got it wrong!" In my sample above I made a smiley face and a frowny face. Place both movie clips on your stage and give them instance names like "smiley" and "frowny." Don't worry that they're visible right now, we'll hide them later with Actionscript.

Option: Import one or more sound effects. Select the sounds in the library, right-click on them, and then set the Linkage to Export for Actionscript.

Part Two: Actionscript

Create a new actions layer. In frame 1 of the actions layer add the following script:

smiley._visible=false;

frowny._visible=false;

This will hide the feedback objects until needed. It also assumes that you named your feedback movie clips smiley and frowny. If you used different instance names, change the script to reflect the names you used.

Now select drag1 and open the script window. Add the following code:

// Get the movie clip's location and

// store the coordinates as variables
onClipEvent (load) {
origX = this._x;
origY = this._y;
}

As noted in the comment, this finds the starting x & y coordinates of the object and then stores those as variables called origX and origY. We'll use these variables further down...

Now add this code to the same script:

onClipEvent(enterFrame) {
// Make the movie clip dragable
this.onPress = function () {
startDrag(this)
}

This bit makes the object dragable.

Now a bigger chunk of code:

// Stop dragging the object
this.onRelease = this.onReleaseOutside = function () {
this.stopDrag();

// see if the dropZone contains 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 {

// if it's not in the drop zone,
// return to the original location
this._x = origX;
this._y = origY;
}
}

}

This piece of code accomplishes several things. First it stops the dragging function. Next it checks to see if drag1 is centered over the appropriate drop zone object by using a hit test. If it is, it snaps to the drop zone's center. If not, it jumps back to its starting location (the origX & origY).

Copy and paste this code onto the other two dragable objects (drag2 and drag3), but change the dropZone variables in each (so drag2 should look for dropZone2, and drag3 should aim for dropZone3).

Test it out. At this point, the dragging & dropping functions should work. So how about those buttons?

Select the Done button and open the script window. Add the following script:

on (release) {

// assume all are correct
correct = true;

// check to see that drag mc locations match
// drop zone locations
if ((drag1._x != dropZone1._x) or (drag1._y != dropZone1._y)) {
correct = false;
}
if ((drag2._x != dropZone2._x) or (drag2._y != dropZone2._y)) {
correct = false;
}
if ((drag3._x != dropZone3._x) or (drag3._y != dropZone3._y)) {
correct = false;
}

// signal to the Output window
if (correct) {
smiley._visible=true;
frowny._visible=false;
} else {
frowny._visible=true;
smiley._visible=false;
}

}

This code creates a variable called "correct" and sets it to "true." Then it looks to see of the three dragable objects are in the drop zones. If any one is not in the right place, the variable "correct" is changed to "false," and frowny appears. If all are true then the variable is left as is, and smiley is made visible.

Select the Reset button and write the following script:

on (release) {
frowny._visible=false;
smiley._visible=false;

drag1._x = drag1.origX;
drag1._y = drag1.origY;

drag2._x = drag2.origX;
drag2._y = drag2.origY;

drag3._x = drag3.origX;
drag3._y = drag3.origY;

}

This script hides both smiley and frowny, and then moves the objects back to their starting positions.

Theme and Variations

Okay, what about the sound effect? If you have a sound loaded up and ready to go, add the following script to each of the dragable objects (new code is in red):

// Stop dragging the object
this.onRelease = this.onReleaseOutside = function () {
this.stopDrag();

// see if the dropZone contains 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;

// create a sound effect when it's dropped in the drop zone
mySound = new Sound();
mySound.attachSound("boing", true);
mySound.start();

} else {

// if it's not in the drop zone,
// return to the original location
this._x = origX;
this._y = origY;
}
}

}

In this case I set the linkage name of the sound to "boing." Your script should reflect whatever linkage name you used (right-click on the sound in the library to set the linkage name).

Eliminating the snap-back. What if you don't want the objects to return to their starting positions every time they're released? What if you want them to stay put? Simply change the last part of the code from:

this._x = origX;

this._y = origY;

to:

this._x = this._x;

this._y = this._y;

Basically, just says "stay put."

Possible wrong answers. Maybe you would like to set it up so that it is possible to drag and drop an object on the wrong target to make the game a little harder. In this case one would have to press the "Done" button in order to determine if he/she had the right answer(s). Change the code for the dragable objects to this (new code is in red):

this.onRelease = this.onReleaseOutside = function () {
this.stopDrag();

// see if the dropZone contains 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 if (_parent.dropZone2.hitTest(this._x,this._y,true)) {
this._x = _parent.dropZone2._x;
this._y = _parent.dropZone2._y;

} else if (_parent.dropZone3.hitTest(this._x,this._y,true)) {
this._x = _parent.dropZone3._x;
this._y = _parent.dropZone3._y;

} else {
// return it to its original location
this._x = origX;
this._y = origY;
}
}

}

Invisible drop zones. Sometimes you may want the target area for a dragable area to remain hidden. For example, in the piece to the right, the puzzle pieces snap to invisible drop zones. To create an invisible drop zone simply create a shape filled with white (or your chosen background color) and convert it to a movie clip. Everything else can remain the same.

Part Three: Finishing Touches.

Try it out, does it work?

Make your matching game more interesting than circles. Experiment with the variations above.

Export a .swf file.

Embed the .swf file into an html page (called matchGame.html for example).

FTP the .swf, .html, and .fla files to your server space. Make a link to the html file from your home page.

Point Breakdown

4 pts	Portfolio quality design; great match game
3 pts	Good looking; above average work.
2 pts	It works, but it's nothing fancy.
1 pts	Something's not working right.
0 pts	Poor showing; mostly incomplete or full of errors.

VCB424 Advanced Interactive Design IV