Tutorial details:
Written by: J.D.Andrews [email:jydnas_@hotmail.com] / 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.

[code]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[/code]

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
  
  

Now open up your library (Ctrl+L). This will list all the symbols you have made.

9) Take the Movie clip named processor and put it in the layer called processor.
10) Take the Movie clip named green and put it into the layer called green square.
11) Now take the Movie clip named red and put it in to the layer called red square.
12) Next give the instances of the movie clips red and green names. To do this select the movie and
choose Modify> Instance. Keep it simple, name the movie clip red (instance name red) and the movie clip green (instance name green).
13) Click on the text tool icon and then click the text field modifier below the tool bar.
14) In the layer called status, drag the mouse across the work area to create a small text field box.
15) Now right click on the text field box, choose Properties and this window will appear.



16) Type in the word "status" in the Variable box and check the boxes corresponding to that of the picture above.
17) Next you will need to edit the Movie Clip named processor. So right click on the movie clip and choose Edit.



18) In layer 1 add another Keyframe so that there are 2 key frames.
19) Click on first frame and add the following collision code.

Here is the action script code.

[code] 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[/code]

First let's consider the first two lines of actionscript:

[code]Set Variable: "red_x" = GetProperty ("/red",_x)
Set Variable: "red_y" = GetProperty ("/red",_y)[/code]

The code contains two key elements, the action and the property. The actions set value of the variables 'red_x' and 'red_y' to be the x and y properties of the movie clip red

*Definition: Variable - A variable is a mathematical quantity or a symbol that represents it.

For those of you who may need a refresher on what _x and _y are, here is a simple x and y axis picture. You most likely remember this from school.


The x axis is the horizontal line and the y axis is the vertical line. The variable "red_x" contains the x coordinates of the instance of the movie clip red. The variable "red_y" contains the y coordinates. The next 2 lines of actionscript do the same for the instance of green. It sets up the x and y coordinates like so.

Set Variable: "green_x" = GetProperty ("/green",_x)
Set Variable: "green_y" = GetProperty ("/green",_y)

The next 4 lines of actionscript get the height and the width of both movie clips, red and green.

[code]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[/code]

The next 2 lines of actionscript set up 2 variables for distance .

[code]Set Variable: "distance_x" = red_x-green_x
Set Variable: "distance_y" = red_y-green_y[/code]

The distance_x = the movieclip red's x axis minus the movie clip green's x axis.
The distance_y = the movie clip red's y axis minus the movie clip green's y axis.

This is a very important part because it is used to calculate the distance between the two.With out it there is no way to check on how close the two object are to each other based on the _x and _y coordinates of both objects.

The next line of actionscript sets up a variable named area . The area is the height and width of each movie clip. This is also very important, because you need to the size of each object in order to get an accurate collision check

[code]Set Variable: "area" = (red_h+red_w)*(green_h+green_w)[/code]

The area is red's height and width * (times) green's height and width.

*Definition: If - The If statement is use to check if certain condition are true.

The next line of action script contains all the above information and is the start of the If statement which will check to see if certain conditions are true.

[code]If (distance_x*distance_x+distance_y*distance_y<=area)[/code]

If the distance_x * the distance_x + the distance_y * the distance_y is less then or = to the variable "area" then a collision has occured and the text field box named status prints out "Collision Detected. This is used to give you a visual clue that a collision has taken place.

[code]Set Variable: "/:status" = "Collision Detected"[/code]

*Definition Else: The Else statement is used to assign an alternate statement if conditions are false.

Else....

[code]Set Variable: "/:status" = "No Collision Detected"[/code]

In this case the text field box named status is instructed to print out..."no Collision Detected.

[code]End If[/code]

Which ends the If statement. Now that you are done with the Collision checking actionscript, in the movie clip processor Put this action script in the key frame in frame 2.

[code]Go to and Play (1)[/code]

And finally go back to the main time line and use Motion tweening and make the movie clips move across the scene and at some point collide with one another. In my example i made the scene 48 frames long and tweened the movie clips across the scene.



Well that's it. If you have any Question Flash Kit has an excellent message board forum called "Action Scripting". Just go there and post you question and one of the moderators like myself or a member will help you.