Title: Flash Physics Study
Author: Ka Wai Cheung, www.project99.tv
Difficulty: Advance
Requirements: Flash 5 and above
Prerequisites: Elementary mechanics, onClipEvent(), duplicateMovieClip()

Gravity and collision models have significant applications to Flash. They can be used in game design, movies, or simply just as models.
In this article, I'll explain how to create a simple implementation of gravity and collision using the trusted bouncing-ball model. We'll "fake" some of the physics for simplicity of code, and because the resulting visual is little improved with some of the more complicated nuances of physics.


Click here for DEMO
(New Window)
 

Before we get into the guts, let's first discuss what we want to accomplish.

First, we'd like to have a simple model of a ball that can bounce off a ground, a ceiling, and walls. We'll simply use the dimensions of our movie to represent the wall and floor.

Second, we'd like to represent the model in a quasi-3 dimensional fashion. Since we are simply using the boundaries of the movie to represent at least 2 of our dimensions, we can use the size of the ball to represent our third dimension. So, as the ball gets bigger, it has the appearance of coming toward you, and as the ball gets smaller...you guessed it. (Note: If we wanted to get more mathematically precise, we could rotate our coordinate system and have the view be at a non-perpendicular angle to each of the 3 axes. But again, the goal here is to create a model as simply as possible yet still make it look authentic.)

Finally, while we can account for the change in velocity in the y (up/down) direction due to gravity, we'll need some way of changing the velocity in the x (left/right) and z (front/back) positions. To do this, we'll insist that our floor has some friction. Each time our ball hits the floor, we'll account for this by reducing both x and z velocities.

As a quick note, I developed this demo in MX. If this were done in MX 04, I'd quickly strip out all the code in the onClipEvent() function into an external .as class file. You could, then, easily plug your bouncing ball model into other applications pretty easily this way.

So, the Flash implementation is quite simple. Disregarding the sliders that come with this demo, there's only a ball movieclip with an "EnterFrame" clip event defined. So, as the movieclip contines to loop back to itself, it will run the code defined inside that function. The function will be called at the rate of the flash movie (in this case, 30 frames per second). There's a crutch to this with an easy workaround, as I'll explain later.

Now, each time the function is called, we need it to do two main things. First, we'd like it to figure out what the new velocity of the ball is (This means, figuring out the velocity in the x, y, and z direction). Second, we'd like it to figure out what the new coordinate position is of this ball at the given time. When we know these two things, we're pretty much ready to move on and do it all over again.




No Screenshots Available

1 | 2 | 3 | 4 | Next

   
Main | Tutorials | BestFlash | Goodies | Forums | Portfolio | Contact Us
   
 
AEvision Tutorials 2.1 - All rights reserved AEvision Designs 2002-2007
 
 
Icons provided by iconpacks.com