Flash Physics: Velocity and Acceleration
Flash Physics: Velocity and Acceleration
Flash, by definition, brings 2D drawing to life. But it lets you do even more: To give your Flash animations a sense of realistic movement, you can apply the laws of physics and mimic the way objects behave in nature.
Flash physics draws mainly upon classical mechanics, which describes familiar concepts such as speed, velocity, momentum, friction, and movement in a gravitational field. Some real-world examples of classical mechanics include the behavior of a thrown baseball, a falling object, a car skidding to a stop, billiard balls colliding, and a spring oscillating.
Flash designers are using physics in surprisingly creative ways to simulate realistic movement. Many Flash-created navigation systems now feature windows or buttons that slide onto a page, slow down, and stop. Other animations simulate pool table-like collisions. Games are a great proving ground for Flash physics. (To see an example of physics in Flash, check out this Mini-Golf game that I programmed: www.electrotank.com/games/ playGames.cfm?gameID=31.)
Velocity and Acceleration
In this exercise you'll learn the basics of programming movement in Flash. It's easy to program velocity and acceleration, so it's a great place to start.
Time-Based Animation vs. Frame-Based Animation
There are two primary types of animation: time-based animation (TBA) and frame-based animation (FBA). With TBA, an animation lasts a certain amount of time; with FBA, the animation lasts a certain number of frames. TBA ensures that an animation will play at the same speed on all computers, but it may drop frames to make up for processor speed on less powerful machines. Conversely, FBA will always play every single frame of an animation, but the playback speed may slow down on less powerful machines.
In nature, physics is time-based. In this exercise, however, we'll use frame-based animation because we want the playback and interactions to be the same on all machines--even if it takes longer to play back. Therefore, we'll replace time variables in all physics equations with frame variables. And because we'll be performing calculations on every frame, the frame variable will always be 1.
Moving at a Constant Velocity
We're all familiar with the term speed, which we know as distance/time. Because we're using frame-based animation, we're going to see speed as distance/frame. This makes things simple because we update positions every frame. If an object has a velocity of 3, that means the object moves 3 pixels every frame. Because we're not dealing with unit variations like kilopixels or megaframes, it's OK to forget about the units from now on. (My physics professors would slap me if they read this.) So, a speed of 3 pixels/frame can just be seen as 3 with no units.
The following physics equation gives you the position of an object if you know its initial position, its velocity, and the time elapsed since it was at its initial position (Figure 1):
Figure 1 Comparing a position equation using time and frames.
In Flash, because we calculate a new position every frame, the value used for frames is always 1. The initial position in this equation is always where the object was in the previous frame. By replacing time in the first equation in the figure with frames, we arrive at the second equation in the figure.
Because velocity is a vector, it has a magnitude and direction. This magnitude is called speed. In Flash, we give direction to a vector either by modifying the magnitude with a sign (+ or -) or by giving it an angular direction. For example:
xVelocity=-3;
could be used as a vector because its magnitude is 3 and its direction is -.
Also:
angle=120; speed=2;
could be used together as a vector. If given this second example, you'd most likely want to convert it to the first example--it's easier to use the projection method discussed earlier with the first example.
Now let's move on to some real Flash examples. Here's how you create a movie clip that moves at a constant velocity:
-
Create a movie clip.
-
Define velocity and position variables.
-
Update the position of the movie clip every frame, based on the velocity.
Although there are several ways to accomplish these steps, here's how I recommend doing it. (You can perform these steps in Flash, or open velocity_no_acceleration.fla from the Chapter 3 folder on the CD-ROM that comes with Macromedia Flash Super Samurai to follow along. )
Draw a simple shape and convert it to a movie clip.
Give this movie clip an instance name of Ball.
Click on Ball and open the Actions window so you can add clip events to it.
Define a variable called xVelocity and one called yVelocity in an onLoad clip event. These variables control the amount that the movie clip will move on the stage every frame in both the x, and y directions.
Define position variables in the onLoad clip event established in the previous step. These variables will be updated every frame and will store the position of the movie clip. This is good practice; you'll see its power later on.
Update the position variables by adding the velocities in an enterFrame clip event.
Update the position of the movie clip on the stage in the enterFrame clip event.
xVelocity=2; yVelocity=3;
xPos=_x; yPos=_y;
xPos+=xVelocity; yPos+=yVelocity;
_x=xPos; _y=yPos;
When finished, the code on your movie clip should look like this:
onClipEvent (load) { xVelocity=2; yVelocity=3; xPos=_x; yPos=_y; } onClipEvent (enterFrame) { xPos+=xVelocity; yPos+=yVelocity; _x=xPos; _y=yPos; }
When you test the movie, you'll see the movie clip move toward the bottom right of the screen.
As we've seen, velocity is distance/time with a direction to modify it. Well, acceleration is change in velocity/time with a direction to modify it. Therefore, whenever the velocity changes (either magnitude or direction), acceleration has occurred. Although the word "acceleration" can also mean deceleration, in physics, it's used whether velocity is increasing or decreasing.
It's easy to modify the previous code example to include acceleration. We know acceleration occurs when velocity changes, so if we change the velocity variables xVelocity and yVelocity every frame, we have acceleration.
You can edit the previous example or view the file velocity_and_acceleration.fla from the CD-ROM.
Define an acceleration variable in the onLoad clip event on the Ball movie clip.
Change the Velocity variables every frame in the enterFrame clip event.
accel=1;
xVelocity+=accel; yVelocity+=accel;
The entire code should look like this:
onClipEvent (load) { xVelocity=2; yVelocity=3; accel=1; xPos=_x; yPos=_y; } onClipEvent (enterFrame) { xVelocity+=accel; yVelocity+=accel; xPos+=xVelocity; yPos+=yVelocity; _x=xPos; _y=yPos; }
Now when you play this movie, you should see the movie clip velocity change as frames pass.
Most of the cool effects you can create using Flash physics involve acceleration. Many of these use acceleration that changes every frame, which is known as jerk (change in acceleration/time). The acceleration in the code we have just written is based on a variable, so we can change it as often as we like.
Jobe Makar, who specializes in games and applications programming, holds a B.S. in Physics from East Carolina University and an M.S. in Physics from North Carolina State University. He is co-founder of Electrotank, Inc. (www.electrotank.com), where he is Senior Game Developer. He is also Senior Interactivity Developer at Allen Interactions, a computer-based training firm. Jobe is based in Raleigh, North Carolina.