Simple Flash Blog

hitTest() method is very useful for flash developers especially when creating games or elearning applications. In this tutorial I will  give a simple example on how to detect collision between two movie clips using hitTest() method.

STEPS TO FOLLOW:

1. Create a new Flash document and save it as hitTest.fla on your computer. Go to Modify >> Document (Ctrl+J) and set width to 400 pixels and height to 300 pixels.

2. Insert three new layers and rename them from top to bottom: actions, spaceship, planet and background.

3. In the first frame of the background layer import what picture you desire: go to File >> Import >> Import to Stage and select the picture from your computer and click the Open button. Align the picture both horizontal and vertical.

4. Go to the planet layer and in the first frame draw or import a picture of a planet. Select the planet picture or drawing and convert it to a movie clip: go to Modify >> Convert to Symbol (F8) and from the window that appears select MovieClip as Type, center for registration point and give it a name of planetMC, then click Ok button. Select the movie clip, go to the Properties Inspector and type planet_mc in the Instance Name text field.

5. Now, in the first frame of the spaceship layer draw or or import a picture with a spaceship. Convert it to a movie clip with the name spaceshipMC. Give it also an instance name of spaceship_mc.

6. Go back to the background layer and put here a dynamic text field (use Text tool from the Tools panel). Choose Comic Sans MS font, size 14 and white color. Give to the text field an instance name of space_txt.

7. Go to the first frame of the actions layer, open the Actions panel (F9) and write the ActionScript code below:

spaceship_mc.onPress = function(){
startDrag(this, false, 40,15, 360, 285)
}spaceship_mc.onRelease = spaceship_mc.onReleaseOutside = function(){
this.stopDrag();
 if (spaceship_mc.hitTest(planet_mc)){
  space_txt.text="The spaceship is on the planet!"
 }else{
  space_txt.text="The spaceship is back in space!"
 }
}

8. Great! Now test your movie (Ctrl+Enter) and you’ll see that space_txt change the text displayed depending on spaceship_mc overlaps or not planet_mc.

This entry was posted on Monday, November 26th, 2007 at 10:34 am and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.