Creating an Animation: Part 3 – Animating a Falling, Bouncing Object

My first attempt at animation was disappointing.

I started on the easiest scene, or so I thought. Three blocks and a pound sign were to drop from the sky, one after another, to form a stack.
I imported the first image of a red block into Adobe Flash and successfully animating it using a motion tween which simply involves setting the object’s start and end positions and letting Adobe Flash take care of the frames in-between.
So, with my image happily moving from the top of the screen just out of the camera’s view to the bottom, where i imagined the ground would be, surely my task was complete? Well, not quite. The problem was that although the image of a block did unmistakably progress down the screen there was nothing remotely natural about its motion. It just didn’t look like it was really falling. Falling objects don’t move at a steady rate, and they don’t just stop dead when they hit the ground. They accelerate from when they are released until they reach terminal velocity or hit the ground, whichever comes first. Here’s a video I took of a 10cm Angry Bird being dropped 80cm onto a hard wooden floor to illustrate:

When we look at the movement in slow motion this effect becomes obvious:

I’ve annotated each frame with a measure, split into 10cm sections, to allow the acceleration of the bird to be clearly seen. It takes almost four frames (133ms) to clear the first 10cm marker but less than two frames (67ms) to clear the next one. When the ball hits the ground it abruptly stops, reverses direction and accelerates upwards, slowing as gravity exerts itself until gravity wins and the bird returns to the floor to bounce again. With each bounce, some energy is lost which causes the next bounce to be lower. This continues until there is no energy left and the bird comes to a rest. Different objects will have a different elasticity, and lose a different amount of energy on each bounce, but they all follow this general pattern:

Motion of falling, bouncing bird

With this knowledge, I modified my motion tween in the motion editor by adding a custom ease that mirrored the movement of the bird and applied this to the motion of the Y-axis:

Adobe Flash CS6 Motion Editor - falling, bouncing movement

This results in a more natural motion:

Below, you can see the result in the finished video. I had to suppress the bounce a little to fit in with the timing of the audio but you should still see a small but noticeable effect.

In my next post I’ll discuss another technique I picked up which helps enhance the bounce effect further.

This entry was posted in Techniques and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s