sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpfull links


website solutions

Do you need a website?
We can have you online in 24 hrs for less then $100


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash Tutorial, Detecting Collisions

In this Flash CS3, CS4 Tutorial I am going to go over the method hitTestObject. This is a more advance Flash 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 keyboard commands.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

hitTestObject

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 hears one of these events 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 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)

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.

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. checks to see 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 need to play with the numbers and see what happens.

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. Therefore 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 are getting the idea. Play with the last two if statements to see how the numbers effect the way the objects relate.

Download Tutorials