Stricter hit testing with hitTestPoint

The other built-in hit testing method is called hitTestPoint. It takes three arguments to its constructor's parameter list. The first two are just the x and y of the point that we'd like to test for a hit. The third parameter is known as shapeFlag. This is a Boolean variable, so we send it a value of either true or false. Here are the implications of that choice:

  • true means that we want to test the x, y screen location against the subject's actual graphics.
  • false means that we want to test the x, y screen location against the subject's bounding box.

The first choice above makes the hit testing a little more strict than the second one, so we will be using that and setting shapeFlag to true. We also need to turn our statement around so that matchClip is the subject rather than currentClip. What I mean is this: our if statement previously looked like this:

if(currentClip.hitTestObject(matchClip)) {

Actually, using hitTestObject, it didn't matter which order we hit tested those movie clips. But now, when we run hitTestPoint, we need to run it on the matchClip instead:

if(matchClip.hitTestPoint(currentClip.x, currentClip.y, true)) {

Notice the x, y screen location we are using is the x, y location of the currentClip. But there is one more thing we need to do to make this work right. Right now, the registration point of all our movie clips is in their upper left hand corner. But we want to hit test using a point that's in the middle of the clip being dragged, so it would be way more convenient to have the registration point of all the clips already in the center. To move the registration point, do the following:

Double click on the rectangle to go into its edit mode. The graphics will be highlighted automatically:

Bring up the align panel by pressing CTRL-K. Make sure the "Align to stage" checkbox is checked. Then click the "align center horizontally" and "align center vertically" buttons. 

This will center the graphics:

Notice that when you do this, the other rectangle on the stage (the match clip) centers also. This is because both squares are instances of the same movie clip symbol in the library. This is fine, and poses no problem. Continue to do this for the other two symbols as well. When you are finished, go back to Scene 1. Select all of the movie clip instances on the stage, and move them over to the right and down, to correct the shifting that occured when their registration points were centered. Finished!

I would reproduce the code here again, but the only line that is different is line 28, where all we did was change the hitTestObject line to a hitTestPoint one instead. Here's how the swf behaves with these new changes:

Go ahead and try it out! You will find that now you have to be quite a bit more precise when you drop the clip. If the center point of the clip being dragged does not hit the actual graphics of the matching clip, it doesn't count as a hit. If you wanted to, you could make it a bit less strict by setting shapeFlag to false, and let the test be the point against the matching clip's bounding box. It's really all up to you, but now we have seen the basic options that these two built-in hit testing methods provide.