Flash, Spring, Bounce, and Boing!

I recently created some Flash applications that utilized “bouncing” motions. After trying a variety of methods to acheive this effect, I eventually developed a surprisingly simple and flexible solution. Since I like the effect so much (and am sure that this is no real invention of mine), I decided to put together the following example and provide the source code.

Due to WordPress Blog limitations, please load the Flash file externally.

View the ActionScript code for the animation above. As you can see, the really useful code in the “onEnterFrame” function is only five lines long, and could be less. The concept of this method is simple: Calculate the clip’s acceleration using the “distance” to the goal, and use it accordingly. This works because, as the clip moves past its goal (via it’s momentum), the acceleration becomes negative and begins to counteract that momentum. Energy is taken from the system so that the clip will eventually reach stasis.

It would take a calculus and/or physics lesson to explain how position, speed, and acceleration are related… I’ll save that for another time. All that matters is that it works, right?

Finally, this solution is very flexible, as you can easily alter the speed and strength of the bounce by changing the “_accelStrength” and “_energyRetained” variables. Play around with these values, and let me know if you find any interesting results!

» This entry was posted on Monday, August 14th, 2006 at 3:52 pm and is filed under Development, Flash, User Experience. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.


Post a Comment
You must be logged in to post a comment.