Tutorial details:
Written by: J.D.Andrews / website
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash 4 or higher
Download fla



One of the most requested tutorials is on collision detection and how to use it. Collision detection is used to check to see if two or more objects have come in contact with one another. In this tutorial I'll show you how it works. I have made this tutorial as simple as possible for you so that you can immediately apply it to your own projects.

To begin with, here is the code for you to look at.

Set Variable: "red_x" = GetProperty ("/red",_x)
 Set Variable: "red_y" = GetProperty ("/red",_y)
 Set Variable: "green_x" = GetProperty ("/green",_x)
 Set Variable: "green_y" = GetProperty ("/green",_y)
 Set Variable: "red_h" = GetProperty ("/red",_height)/2
 Set Variable: "green_h" = GetProperty ("/green",_height)/2
 Set Variable: "red_w" = GetProperty ("/red",_width)/2
 Set Variable: "green_w" = GetProperty ("/green",_width)/2
 Set Variable: "distance_x" = red_x-green_x
 Set Variable: "distance_y" = red_y-green_y
 Set Variable: "area" = (red_h+red_w)*(green_h+green_w)
 If (distance_x*distance_x+distance_y*distance_y<=area)
 Set Variable: "/:status" = "Collision Detected"
 Else
 Set Variable: "/:status" = "No Collision Detected"
 End If


Let do this, step by step...

1) Start up a new movie in Flash 4.
2) Make the size 500 x 400.
3) Now make two squares and colour one RED, and other GREEN.
4) Next make a blank movie clip - To do this click on Insert> New symbol, choose Movie clip as its behavior, and name it processor. The reason it's named processor is because it will contain the actionscript mentioned earlier that will check for a collision.
5) Now make two more movie clips and name the first green,and the other one red.
6) Put the green square symbol graphic in the movie clip named green.
7) Put the red square symbol graphic in the movie clip named red. Note: Make sure they are centered on the registration marks.
8) In the Main timeline create 4 layers. Name them like this....
  • green square
  • red square
  • processor
  • status