Flash Components      Flash Menu      Flash Gallery      Flash Slideshow      FLV Player      Flash Form      MP3 Player      PhotoFlow      Flash CMS      3D Wall      Flash Scroller

Flash / AS

Silverlight

WPF

ASP.net / PHP

Photoshop

Forums

Blog

About

 


FlashComponents
  Galleries
  Slideshows
  Menus
  Design & Effects
  Audio & Video
  User Interface
  Templates

 

 

 

 


Collision Detection Among Multiple Objects
       by kirupa  |  12 August 2005

Now that you have your Flash animation working from the previous page, let's take a look at why it works.

ActionScript Explained
Let's find out what part each line in our above code plays:

target_mc = ["circle0", "circle1", "circle2", "circle3", "circle4", "circle5"];

I declare an array called target_mc, and its values are the instance names of the movie clips that we are interesting in testing for collisions. If you recall, in the FLA you have open, the circles have the instance names circle0, circle1, etc.

Your movie clip names do not have to follow the name + number format as my movie clips though. You can give them as strange a name as you want. As long as your movie clip name is mentioned in the above array, Flash will read it.

Also, you can use a loop to populate the target_mc array as movie clips get added to your stage. One of the FLAs I will provide towards the end of this tutorial contains a series of circles that are simply loaded from the Library using the attachMovie command.

hitTester = function () {

I will be placing all of my code inside a function called hitTester. In the past, I encouraged using functions because it is simply easy to manage the code. In this case, using a function is absolutely necessary, for we will be calling our hitTester function numerous times to run the collision detection code contained within it.

numCircles = target_mc.length;

Since our target_mc variable is an array, I can use the length property to count the number of items in our array. I store the number of items in our array in a variable called numCircles.

for (i=0; i<numCircles; i++) {
circleA = target_mc[i];

This is the first of our two for loops. The loop ranges from 0 to the number of items stored in your array. For each value of i, the variable circleA stores a movie clip name from our target_mc array.

for (j=i+1; j<numCircles; j++) {
circleB = target_mc[j];

This is our second loop. It gets accessed for each value of i in the first loop, but notice its range. It's range isn't from 0, but instead, its range starts from i+1. Starting at that value ensures that we don't revisit movie clips already covered by our first loop. This is what makes our more efficient collision detection code better than our, well, less efficient collision detection code.

Similar to how I used circleA in the first loop to store a movie clip instance name from our array, I use circleB to store a second movie clip instance name from that array. So, right now, both the circleA and circleB variables store a movie clip instance.

temp_A = eval(circleA);
temp_B = eval(circleB);

I store the reference to the circleA and circleB values via the eval function in the temp_A and temp_B variables. I do that because I will be using eval(circleA) and eval(circleB) a lot in the next few lines of code. Storing it as temp_A and temp_B simply saves me time in having to type extra characters.

if (temp_A.hitTest(temp_B)) {
// Your code
dirChanger(temp_A, temp_B);
//
}

The first line checks if the two movie clips stored in temp_A and temp_B collide with each other. The ordering of the movie clips in the hitTest function doesn't matter. If you were to use temp_B.hitTest(temp_A), you would get the same result. That is why, if you remember, I didn't mind flagging a lot of redundant collision checks in our "Less Efficient Method".

The hitTest function returns a boolean value, so we don't need any conditional such as == in our if statement. If there is a collision, I simply make a call to a function called dirChanger that takes in our temp_A and temp_B values to move our circles around.

I won't elaborate on the rest of the code, for that really deviates this tutorial's goal of explaining collision detection involving a lot of objects. I have provided several FLAs that use the same collision detection code but have some minor variations that you may find useful for your projects.

Tutorial Source - Final
Dynamically Created Movies with Collision
Collision with Mouse Follow/Click

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums
New, Upcoming, and In-Progress Tutorials
How to Help out kirupa.com
Writing Tutorials
 
Cheers!
Kirupa Chinnathambi
kirupaBlog

 


page 3 of 3


 


kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components
flash menus, buttons and components Digicrafts Components
The best flash components ever! Entheos Flash Website Templates
Buy and sell FLAs at Ultrashock! Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com
Purchase & Download Flash Components flash components
Learn how to advertise on kirupa.com