sfmultimedia.net

sfmultimedia :: actionscript salons :: phun with physics

/

Actionscript Salon #13: Phun with Physics

Having trouble getting your wibbles to wobble? Afraid of things that go “SPROING” in the night? Bounce gone from your bungie?

Perhaps you’re having trouble getting that UI to “schwooooosh” in just the right way; or your mouse-following cursor is pointing in the wrong direction; maybe you’ve always wanted to add a more organic feel to your apps. If any of these sound familiar, then this Salon is for you.

This month we’re going to look at physics in a UI-oriented way. Even if you failed high school algebra and can’t tell an immovable object from an irresistible force, you’ll walk away with a better idea of how to mimic real-world interaction. We’ll explore SIMPLE algebra, geometry and trigonometry to make our Flash presentations more fun, more interactive and more flexible, and peek under the hood of MX 2004’s barely-documented easing class (a thin re-write of Robert Penner’s Math prototypes).

Ready...set...SPROIIIING!!!!

Relevance/availability: all the math here is, of course, as relevant today as it was for Pythagoras, Newton, Einstein or Mr. Spock. The specific Actionscript was written for Flash MX 2004 (Flash Player 7), but most techniques would work in any version of Flash using AS1, or (with minor modifications) AS2. Note that AS3 radically changes how objects are displayed onstage, and for that reason, much of the code wouldn't translate well into that arena.

Presentation slides (swf)

Right Triangles. Understanding the many uses of right triangles is very helpful for simulating physics. View the slide show for more information.

The Pythagorean Theorem. Use the famous equation a2 + b2 = c2 to find the distance between two points. The basic version just shows distance between two MovieClips. The advanced version shows how this can be applied to finding the distance between two objects, an object and the mouse, and more.

SOH-CAH-TOA. Find the angle between two points in this example.

Download the .fla files (Zip 28k)

Adding Vectors. Adding together forces moving in different directions helps us simulate the many forces acting on an object in motion (gravity, thrust, friction, wind, etc).

Additive Vectors. Manually control four forces and see the ball react.

Bounceball. Throw one or more balls around and see the cumulative effects of your throwing force, gravity, air friction, and ground friction.

There's another version of Bounceball which shows the balls bouncing off each other...but it's broken! If I get a chance to fix it, I'll post it here.

Download the .fla files (Zip 95k)

Easing. Mathematically adjusting numbers (and in this case objects) to provide smooth transitions. This helps give motion a more realistic feel.

World's simplest easing? A very simple equation for ease-out behavior.

The Penner equations. Robert Penner has written the more-or-less definitive set of easing equations. This example (not actually shown at the Salon) shows the use of a couple of them. This is my own AS1 API for Penner's equations.

MX 2004 Tween Class. Flash MX 2004 has a Tween class built around Robert Penner's equations, providing a standard AS2 API for tweening.

Download the .fla files (Zip 26k)

Hit Detection. One important side-effect of moving things around is that eventually they'll hit each other. Here are a couple of methods for determining whether a hit has occurred.

hitTest. The MovieClip.hitTest() method is simple and in some respects more accurate than getBounds, but you can test only one shape or bounding box against a point. Compare to...

getBounds. MovieClip.getBounds() is useful for finding the bounding areas of two or more items.

Download the .fla files (Zip 25k)

Lunar Lander. A recreation of the classic arcade game, employing many of this Salon's lessons. Swf only.

Download everything (slides, flas, and swfs -- 251k)