Saturday, 20 June 2009

Simple hit test in Actionscript 3

This Flash tutorial will teach you how to create a simple hit test in Actionscript 3.0. The AS3 hit test method is slightly different to the AS2 hit test method. In AS3, the hit test method has now been changed to ‘hitTestObject()’. This method basically evaluates if two different objects have intersected or overlapped with each other, which is exactly the same as Actionscript 2.0 version.

Simple hit test in Actionscript 3

Step 1 – Create shapes

Open a new Flash document with the stage size 400 x 200px.
Take the Rectangle tool and Oval tool and draw two shapes like below. I have used #0098FF colour for the circle and #CC6600 colour for the rectangle. Both of these shapes have 4pt for the stroke.



The rectangle shape is the hit test object which tests whether the circle shape has been intersected or overlapped.


Step 2 – Create message

Select the static text tool and type the message “Objects hit”. Place the message at the top of the stage like below. This message will be displayed when the two objects have hit.




Step 3 – Convert to symbols

Convert the shapes and the message into symbols by pressing F8.
Give both shapes and the message appropriate name, check movie clip and click ok.
Now give the objects the instances name: circle_mc, rectangle_mc and text_mc respectively.




Step 4 – Add code

On the timeline insert a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
circle_mc.addEventListener(Event.ENTER_FRAME, circleHit);

//2.
function circleHit(event:Event):void {
if (circle_mc.hitTestObject(rectangle_mc)) {
text_mc.visible = true;
} else {
circle_mc.x+=5;
text_mc.visible = false;
}
}

Code:
1. This contains an event listener with an ‘enter_frame’ event and the parameter circleHit. The enter_frame event evaluates repeatedly as soon as the movie is played.
2. This is the circleHit function which displays a message when the circle object has intersected/overlapped with the rectangle object. The circle object will move 5 pixels in the right direction until the object have hit. Also the message will stay invisible until the objects have hit.


Step 5 – Test movie

Test your hit test Ctrl + Enter. You should see a message appear when the two shapes have hit.



You should now be able to use a simple hit test in Actionscript 3.0.
Feel free to contact me for any questions or comments and remember to subscribe.



Multiple object hit test


The same hitTestObject method can also be used to detect multiple objects. In the example above only one object was detected. I will show you a quick example of how to detect multiple objects.

Firstly, you need to place all the objects into an array. Then create a new function with the parameter multiObjec passed. The final part involves creating a ‘For loop’ to cycle through all the object instances from the array.

var hitObjArray:Array=new Array(circle1_mc,circle2_mc,circle3_mc,circle4_mc);

function multiHitObjects(mulitObj:MovieClip):void {
hitObjArray[i].addEventListener(Event.ENTER_FRAME,circleHit);

function circleHit(event:Event):void {
if (mulitObj.hitTestObject(rectangle_mc)) {
text_mc.visible=true;
} else {
mulitObj.x+=5;
text_mc.visible=false;
}
}

}

for (var i:uint=0; i< hitObjArray.length; i++) {
multiHitObjects(hitObjArray[i]);
}

8 comments:

Buzz Killington 22 June 2009 05:45  

Excellent! Ty

bleedingheartsandartists 23 September 2009 08:38  

I liked this tutorial. However I am running into problems trying to get the start and restart to work in my application. Do you have another tutorial that addresses this?

Thanks

iliketo 23 September 2009 13:43  

@bleedingheartandartists

What kind of problem are you having, can you explain more?

Covo 7 November 2009 07:59  

Works beautifully. Now I'd like to get it to loup. please help

iliketo 7 November 2009 14:14  

@Covo

What is a loup?

Anonymous 5 December 2009 17:33  

A loop I guess. I didn't test it, but as far as I can see, this function only runs once, moving the ball towards the rectangle 5px once instead of continously. This should be packed in a for/while loop.

iliketo 6 December 2009 05:31  

@Anonymouse

Well, the circle movie clip is attached to an ‘Enter_Frame’ event which evaluates repeatedly, so the function will run more than once.

Why packed in a for/while loop?

Kilidoo 1 December 2011 04:44  

brilliant, it works perfect here! thanks!

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP