Tutorial online

Simple AS3 Collision Detection Using the AS3 hitTestObject Method

In this tutorial, were going to learn how to create basic AS3 collision detection using the AS3 hitTestObject() method of the MovieClip class. Collision detection refers to the process of checking whether 2 or more objects are hitting each other - if parts or the whole of each object are occupying the same space on the stage (i.e. if they are overlapping). For this exercise, well put two square shaped MovieClip instances on the stage and make one of them draggable. When the user drags and then drops that instance, Flash will check whether the user moved it to a new location where it is now hitting the other instance.

Lets begin.

1. Create a new Flash ActionScript 3 document.
2. Draw a square shape on the stage and convert it into a Movie Clip symbol.
3. Put a total of 2 instances of this Movie Clip symbol on the stage.
4. In the Properties Inspector, give one of them an instance name of square1_mc, and give the other one an instance name of square2_mc.
5. Create a new layer for the ActionScript.
6. Bring up the Actions panel and add the following code:

square1_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(e:MouseEvent):void
{
 e.target.startDrag();
}

function drop(e:MouseEvent):void
{
 stopDrag();
 if (square1_mc.hitTestObject(square2_mc))
 {
  trace("Collision detected!");
 }
 else
 {
  trace("No collision.");
 }
}

When you test the movie, you should be able to drag and drop the square1_mc MovieClip instance. And when you drop it, Flash will check whether its hitting the other MovieClip instance or not. If they are hitting, you will see a message in the Output window that says: Collision detected! If they are not hitting, the message you will see is: No collision.

Heres the same code for our simple AS3 collision detection using the AS3 hitTestObject() method, but with comments:

/*You can use the AS3 hitTestObject() method of the MovieClip class
to test whether 2 objects are hitting each other. Hitting refers
to whenever objects collide or overlap on the stage.

Example:
mc1.hitTestObject(mc2);

The example above tests whether mc1 and mc2 are overlapping.
This statement returns a boolean value - true if the objects
are hitting and false if they are not. You can use this method
in an if statement condition.

In this example, we should have 2 MovieClip instances on the stage -
square1_mc and square2_mc.
We are going to make the square1_mc MovieClip
draggable. And when the user drops it, Flash will
check whether square1_mc and square2_mc are hitting.*/

/*Add the MOUSE_DOWN event listener to the MovieClip
instance that we would like to make draggable.*/
square1_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

/*Add the MOUSE_UP event listener to the stage.*/
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

/*This event listener function will make the first
MovieClip instance draggable.*/
function drag(e:MouseEvent):void
{
 e.target.startDrag();
}

/*This event listener function disables the dragging.
It also checks whether the MovieClip instance being dragged
overlaps with the other MovieClip instance after
it was dropped.*/
function drop(e:MouseEvent):void
{
 /*Drops the MovieClip thats currently being dragged.*/
 stopDrag();
 
 /*This if statement uses the AS3 hitTestObject() method to check
 whether the first MovieClip instance is hitting the 
 second one.*/
 if (square1_mc.hitTestObject(square2_mc))
 {
  /*Flash outputs this message if they are 
  hitting each other.*/
  trace("Collision detected!");
 }
 else
 {
  /*Flash outputs this message if they are 
  NOT hitting each other.*/
  trace("No collision.");
 }
}

And that concludes this tutorial on creating simple AS3 collision detection using the AS3 hitTestObject() method.