Simple AS3 Collision Detection Using the AS3 hitTestObject() Method
Tutorials

Simple AS3 Collision Detection Using the AS3 hitTestObject() Method


In this tutorial, we're 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, we'll 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.

Let's 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 it's 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.

Here's 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 that's 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.




- How To Use Actionscript 3 To Create A New Movie Clip Instance From The Library And Then Add It To The Stage
In this tutorial, we'll learn how to use ActionScript 3 to create an instance of a movie clip symbol that's inside the library. This is useful if you want to create any type of functionality where you'll need to generate instances at runtime....

- Creating A Simple Volume Bar In Flash
In this tutorial, we'll learn how to create a simple volume bar in Flash. We'll create a rectangle that grows bigger or smaller whenever we click on the volume buttons. [VIEW SAMPLE FILE] Step 1 Use the rectangle tool to draw a vertical bar. This...

- The As3 'this' Keyword And How To Randomize The Size Of A Movieclip Instance On The Stage
In this lesson, we'll learn about the this keyword. But before I explain what the this keyword is, let's first recall that we can put some ActionScript code on keyframes in the main timeline. But we can also put some ActionScript code on the keyframes...

- As3 Sound
Exercise Files: Sound.fla CheerfulSong.mp3 In this lesson, we're going to learn how to control sound in Flash using ActionScript 3. We're going to learn: how to load an external sound file into a Flash moviehow to play and stop the soundhow to...

- As3: Enabling The User To Submit The Contents Inside An Input Text Field
In this lesson, we're going to learn how to add some ActionScript 3 functionality that will let a user submit the contents of an input text field by clicking on a button or pressing a keyboard key. We'll create a simple example of a Flash movie...



Tutorials








.