Flash / AS



ASP.net / PHP






  Design & Effects
  Audio & Video
  User Interface






        by Jeremy Moseley : 24 July 2004

In this tutorial I am hoping (yes hoping) to teach you to do complicated collision. Now this tutorial is teaching advanced detection. If you have never worked with collision detection before I would recommend taking a look at Kirupa's Tutorial. It will get you started on the right track.

Now that you are familiarized with collision detection let's take a look at what this tutorial will help you accomplish.

The purpose of this tutorial is to teach you a slightly different method of collision detection than just simple hitTest. We will use a method that involves outlining the perimeter of an object with many smaller movieclips (the size depends completely on how much detail you desire) and individually checking those clips. You can see that I didn't use very much.

Here is an example you can see for yourself by dragging one shape towards the other shape:

[ drag one of the above shapes towards another ]

Here is How
Follow these steps to create something like the example above:

  1. First off you will want to Create/Open a Flash document.

  2. Now that the easy stuff is out of the way your ready to get started

    First off create two odd looking shapes (no squares/rectangles) allowed) and make them separate movieclips (F8). We'll name them shape1 and shape2 (creative I know). Remember to assign the clips instance names (shpae1 and shape2 respectively).

[ create two oddly shaped movieclips named shape1 and shape2 ]

  1. Now that you have your shapes to collision test you will want to select one to outline. You will probably want to select the least complicated one as it will be easier to outline. I selected shape 1.

  2. After you selected your shape you will want to create your "perimeter" clip. So double click the shape you chose to Edit the symbol and create a new layer called perimeter:

[ create a new layer and call it perimeter ]

  1. Now that you have your new perimeter layer it's time to add that perimeter. Ensure you lock the first layer to prevent an accident and then select the first frame of your newest layer. (It should be blank)

  2. Now we will want create an empty movieclip (Insert/New Symbol or Ctrl+F8). Call it perimeter. Place it on the first frame of the perimeter layer and give it the instance name "perimeter". This will contain all of the small clips. Now edit the perimeter clip that we just created and get ready to make the perimeter.

  3. Now create a small symbol that can used to outline the border of your shape. I chose a small rectangle 3x2 pixels in size. I named it perimeter_clip:

[ create a new layer and call it perimeter ]

  1. Now comes the really tedious part. We are going to align an indefinite number of these tiny rectangles end to end around the outside of our shape. Let's place the edge of the rectangle right along the edge of our shape:

[ place as many rectangles as needed ]

  1. The rectangles do not need to be exactly lined up (especially at 800% zoom) but you will want to close enough that you can't see any gaps at 100%. Once you are satisfied that the perimeter is complete your ready to start with the actionscript.

    [ perimeter complete ]

  2. So now your ready to do some programming. Select shape 2 and open the Actions panel.

  3. Enter this code (I'll elaborate later):

onClipEvent(enterFrame) {
//collision detection
hit = false; //set hit variable to false
for(i in _root.shape1.perimeter) { //loop through all opjects in perimeter clip
point = new Object(); //create a new generic object to hold the coordinates
point.x = _root.shape1.perimeter[i]._x; //x coordinate
point.y = _root.shape1.perimeter[i]._y; //y coordinate
_root.shape1.localToGlobal(point); //convert coordinates from local (within shape1) to global (_root)
if(this.hitTest(point.x, point.y, true)) { //check for collision between perimeter clip coordinates and shape 2
hit = true; //make our hit variable true
if(hit) { //check out hit variable for a true or false collision detection
this._alpha = 50; //do actions if they touching
} else {
this._alpha = 100; //do actions if they aren't touching
onClipEvent(mouseDown) {
if(this.hitTest(_root._xmouse, _root._ymouse, true)) { //check for mouse down ontop of this clip
this.startDrag(); //start drag
onClipEvent(mouseUp) {
stopDrag(); //stop drag on mouse up
  1. Now select shape 1 and open the actions panel, entering this code:

onClipEvent(mouseDown) {
if(this.hitTest(_root._xmouse, _root._ymouse, true)) { //check for mouse down ontop of this clip
this.startDrag(); //start drag
onClipEvent(mouseUp) {
stopDrag(); //stop drag on mouse up
You will notice this code is identical to some of the code on shape 2. This is just to allow you to move the clips around and test the collision detection. It is not important for the functionality of the collision detection.
  1. Now your all done the steps. I'll explain the code in the next page.

On the next page, I will explain what the code does.


page 1 of 2



kirupa.com's fast and reliable hosting provided by Media Temple.