Flash CS3 Tutorial, Collisions

In this Flash CS3 Tutorial I am going to go over the method hitTestObject. This is a more advance Flash CS3 Tutorial, so is you get lost feel free to check out some of the earlier flash tutorials. You have already learned how to drag and drop and object. Now, you need to be able to detect if that object has hit another object. In this flash tutorial I will be using the mouse events, but you can easily change the code to work with key board commands.

As normal you will find some of the basic work in this flash tutorial has been done for you. I have created two object, named and labeled them. Let us start out by making the Chevelle dragable. Select the first key frame of the actions layer and the code from the example.

chevelle_mc.addEventListener(MouseEvent.MOUSE_DOWN, carStart)
function carStart(carMove:Event):void{

chevelle_mc.startDrag();
};
chevelle_mc.addEventListener(MouseEvent.MOUSE_UP, carStop)
function carStop(carMove:Event):void{
chevelle_mc.stopDrag();

chevelle_mc.stopDrag();
};

We are creating the drag and drop controls so the Chevelle can be controlled with the mouse. I have already covered this code, but I will briefly go over it once again. You are adding two event listeners to the chevelle_mc, one event listener is listening for the mouse event, mouse down and the other is listening for the mouse event mouse up. When flash heres one of these event it will either start or stop the Drag function. You may press Control-Enter, and you should be able to drag the chevelle around.

We need to be able to tell if the Chevelle has hit the truck. Start by adding the code from the example.
stage.addEventListener(Event.ENTER_FRAME, hitTest)
function hitTest(yourEvent:Event):void{

if (chevelle_mc.hitTestObject(truck_mc)){
trace("they hit");
}
};

In this code you are going to add an event listener to the stage, which you should be very comfortable with at this point. Next, you created a function called hitTest, the new part of This Flash CS4 Tutorial happens inside this function. You are using the method hitTestObject and are telling Flash to check if chevelle_mc has hit truck_mc. Then if they have hit output they hit. The trace is just a simple way to check and make sure they function is working.

Press Control-Enter and you will see that Flash is detecting when the two movie clips intersect.

At this point Flash knows what is going on, but the movie is still very boring. Lets make something happen when the two cars hit. Lets have the Chevelle push the truck if they hit each other. Remove the trace tag and add the new code from the example.
stage.addEventListener(Event.ENTER_FRAME, hitTest)
function hitTest(yourEvent:Event):void{

if (chevelle_mc.hitTestObject(truck_mc)){
truck_mc.x = chevelle_mc.x+135
}
};

This new code might simple confusing but it is very simple. Flash is going to take the x position of the truck and move it to match the x position of the Chevelle - 135 px. We subtract 135px because the x position is the center of the object. We do not want the truck to end up on top of the Chevelle, we want the truck in front of the Chevelle.

Press Control-Enter and move the Chevelle so that the front of the car hits the side of the truck.

So, this Flash Tutorial is getting better. Currently the Chevelle can hit the truck, but what happens if the Chevelle backs into the truck or hits the truck from the side. Lets add a few if statements to control the way the truck moves depending on how the Chevelle hits it. Add the new code from the example code.
stage.addEventListener(Event.ENTER_FRAME, hitTest)
function hitTest(yourEvent:Event):void{

if (chevelle_mc.hitTestObject(truck_mc)){
if (chevelle_mc.x < truck_mc.x-75){
truck_mc.x = chevelle_mc.x+135

} else
if (chevelle_mc.x > truck_mc.x+75){
truck_mc.x = chevelle_mc.x-123

} else
if (chevelle_mc.y < truck_mc.y+30){
truck_mc.y = chevelle_mc.y+115

}else
if (chevelle_mc.y > truck_mc.y+30){
truck_mc.y = chevelle_mc.y-130
}
}
};

If the Chevelle's x position is less then the trucks x position minus 75px. That code is checking to if the Chevelle is on the left side of the truck and if so, then it moves the truck same as before. The minus 75 is again based on the width of the truck. We need this if to work only if the truck is hit on the left side, therefor we -75 from the trucks position.

To fully understand you may need to play with the numbers and see what happens.

Next, if the Chevelle isn't on the left side of the truck check to see if it is on the right side. If the Chevelle's x position greater then the trucks x position plus 75, the Chevelle must be on the right side and if so when the Chevelle backs into the truck, the truck needs to move back wards. So, we set the trucks x position to the Chevelle's position - 123. This code is basically the same as if the truck were hit from the other side only we need to change the position of the truck while it is being pushed. Therefor we subtract - 123, this number is based off the width of the Chevelle and will need to be changed based on the size of your object.

Hopefully, at this point you in the Flash Tutorial you are getting the idea. Play with the last two if statements to see how the numbers effect the way the objects relate.

Press Control-Enter and you have a car that can push a truck around.

Download Source Files