Welcome To VertexTemplates.com Flash MX 2004 Tutorials Area - Collision Detection
Learn how to use hitTarget to detect collisions and how to make it work for your movies.
1. First open up a new Flash document. For this example I set my stage to 400x200. The first object we are going to create is our target movie clip. I made a box that was 150x150 and filled it with a medium gray. Once you make the box select it and press F8 to make it a symbol. Make sure that Movie Clip is set as the behavior type and name it target. Now that it is a symbol give it an instance name of target_mc.
2. The next step is to setup our smaller, draggable box. This movie clip will have two frames each with a different color box so that our box will change color when it collides with the target movie clip. Hit ctrl F8 to make a new symbol. Make sure that movie clip is selected as the behavior type and name it box. In the first frame draw a gox that is 50x50 and fill it with any color as long as it doesn't match the color of your target movie clip. Now press F6 on the second frame and select the box and change the color so that it is different the other two boxes you have made. Now add a new layer and name it actions. In the first frame in that layer open up your actions panel by pressing F9 and add the following code.
stop();
3. The last thing to do is to setup the dynamic textbox to tell the user whether or not the boxes are colliding. To do this, select your type tool. In the properties tab make sure it is set to Dynamic Text and draw the text box so that it is big enough to display our text. Finally we need to give it a variable name (not an instance name) of "result" so that we can address it with actionScript.
4. Now we can get into programming the collision detection. We are going to look for the collision detection on every frame of our movie. If there is a collision the box will then change colors and our result text box will display a message telling the usre that there has been a collision. If there is no collision the color will stay the same and our result text box will display that there is no collision. The first bit of code we are going to add is going to make our smaller box draggable. Make a new layer on your root timeline and name it actions. Add the following code on the first frame.
_root.box_mc.onPress = function() {
this.startDrag(false, 0, 0, 400, 200);
this.onMouseMove = function() {
updateAfterEvent();
}
}
_root.box_mc.onRelease = function() {
stopDrag();
};
Hopefully all of this looks kind of familiar, but if it doesn't what we are doing here is using our movie clip as a button and telling it that whenever it is pressed it should be dragged by the mouse and when it is released it will stop being dragged. In the startDrag() function we set "lock center" to false and the numbers are simply the boundaries of where we can drag our box (left, top, right, bottom respectively). Something that might be new is our onMouseMove() function. What we are telling flash to do is to update the box position everytime the mouse moves. Without this bit of code the box will move the mouse position everyframe, but our mouse is moving around alot and it will look pretty choppy without this little addition.
5. The last bit of code we need to add is our collision detection function. To do this we are going to use flash's built in hitTarget() function. Add the following code under what we just wrote.
_root.box_mc.onEnterFrame = function() {
if(this.hitTest(_root.target_mc)) {
this.gotoAndStop(2);
_root.result="the boxes are touching";
} else {
this.gotoAndStop(1);
_root.result="the boxes are not touching";
}
};
In order to test every frame if there has been a collision detection we use an onEnterFrame clip event. Then we test to see if your box movie clip by using hitTest. Then we tell the movie clip to change colors and change our dynamic to display text telling the user that there has been a collision. Then if there is not a collision we make sure that our movie clip goes back to it's original color and reset our text message.
6. Where to go from here. This function has many uses, but also many limitations. One limitation is that the hitTest will not work accurately with odd shapes, because flash tests to see if any part of the movie clips bounding box touches another movie clips bounding box touches. So cirlces, stars, and other shapes don't function properly. However this function has many uses. I am currently working on a Flash VCR where the user drags tapes to a vcr and I use hitTest to see if the tape is on the VCR input. I hope this tutorial has helped you out, if you have any questions be sure to email me.
All Rights Reserved © 2005 VertexTemplates.com
Read our Terms Of Use and Privacy Policy
Flash Templates by Metamorphosis Design
