Creating Interaction with ActionScript > Creating complex interactivity > Detecting collisions

 

Detecting collisions

The hitTest method of the MovieClip object detects collisions in a movie. It checks to see if an object has collided with a movie clip and returns a Boolean value (true or false).

There are two cases in which you would want to know whether a collision has occurred: to test if the user has arrived at a certain static area on the Stage, and to determine when one movie clip has reached another. With the hitTest method, you can determine these results.

You can use the parameters of the hitTest method to specify the x and y coordinates of a hit area on the Stage, or use the target path of another movie clip as a hit area. When specifying x and y, hitTest returns true if the point identified by (x, y) is a nontransparent point. When a target is passed to hitTest, the bounding boxes of the two movie clips are compared. If they overlap, hitTest returns true. If the two boxes do not intersect, hitTest returns false.

Move the mouse over the shape in the movie to test the collision. The results of the hitTest method are returned in the text field.

You can also use the hitTest method to test a collision between two movie clips.

To test the collision, drag the car movie clip so that it touches the parking area movie clip. The results of the hitTest method are returned in the text field.

The following procedures show how to detect collision using the car example.

 
To perform collision detection between a movie clip and a point on the Stage (see shape_flag.fla):

1

Select a movie clip on the Stage.

2

Create a dynamic text box on the Stage and enter status as the instance name in the Property inspector.

3

Choose Window > Actions to open the Actions panel if it is not already visible.

4

In the Actions toolbox, click the Actions category, click Variables, double-click set variable, and name the variable _root.status. Then select the Expression check box for Value and enter the following code in the Value text box:

hitTest(_root._xmouse, _root._ymouse, true)

Flash automatically adds the onClipEvent handler.

5

Highlight the onClipEvent action and select enterFrame as the event.

6

Choose Control > Test Movie and move the mouse over the movie clip to test the collision.

The value true is displayed whenever the mouse is over a nontransparent pixel.

 
To perform collision detection on two movie clips (see hit_test.fla):

1

Drag two movie clips to the Stage and give them the instance names car and area.

2

Create a dynamic text box on the Stage and enter status as the instance name in the Property inspector.

3

Select area and choose Window > Actions if the Actions panel is not already visible.

4

To apply the hitTest test, in the Actions toolbox, click the Actions category, click Miscellaneous Actions, and double-click evaluate. Enter the following code in the Expression text box:

_root.status=this.hitTest(_root.car);

Flash automatically adds the onClipEvent handler.

5

Highlight the onClipEvent action and select enterFrame as the event.

6

Select car from the jump menu at the top of the Actions panel.

7

To apply movement to the car, in the Actions toolbox, click the Actions category, click Movie Clip Control, and double-click startDrag.

8

To limit the car's movement, select the Lock Mouse to Center and Constrain to Rectangle options, and enter 4 for Left, 70 for Top, 396 for Right, and 273 for Bottom.

Flash automatically adds the onClipEvent handler.

9

Highlight the onClipEvent action in the Script pane and choose the Mouse down event.

Your code should look like this:

onClipEvent (mouseDown) {
	startDrag("", true, 4, 70, 396, 273);
}

10

To stop the car, in the Actions toolbox, click the Actions category, click Movie Clip Control, and double-click stopDrag.

Flash automatically adds the onClipEvent handler.

11

Highlight the onClipEvent action in the Script pane and choose the Mouse up event.

Your code should look like the following code:

onClipEvent (mouseDown) {
	startDrag("", true, 4, 70, 396, 273);
}
onClipEvent (mouseUp) {
    stopDrag();
}

12

Choose Control > Test Movie and drag the movie clip to test the collision detection.

Whenever the bounding box of the car intersects the bounding box of the area, the status is true.

For more information, see MovieClip.hitTest in the ActionScript Dictionary.