How To Animate A Bouncing Ball Along A Motion Path In Adobe Flash

INTRODUCTION TO ARCS

If ever your animation looks jerky or just feels a bit off, the first thing to check is the arcs. That is, how the constituent parts of your animation flow smoothly along an invisible path (i.e. arc) from point A to point B.  And it’s not something you’ll necessarily SEE, but it’s certainly something you’ll FEEL, especially if it’s not smooth. As such, it’s a good idea to step through your animation and make sure no drawing sits outside of the intended path of action.

Most things animate along smooth arcs. The exception would be machines and mechanical devices, especially when their mechanical nature is intended to be accentuated. So if your character moves a bit rigidly and feels like a robot (when he’s not supposed to) then check your arcs.

ARCS IN ADOBE FLASH

Using the bouncing ball travelling across the screen is a great way to practice your awareness of arcs.

In the first part of the tutorial, you can see that when I turn the onion skin tool on in Flash, you can see the arcs that the ball is traveling on between each bounce.  It almost seems too obvious to mention because it’s such a big part of a our physical reality. I actually drew the path first and set it as a transparent layer at the top of the layer stack. This then acted as a guide ensuring that the ball transitioned smoothly across the page. (If you were animating with pencil and paper, you would effectively do the same thing by drawing the arc on a sheet that was beneath all of your other drawings so you could see it shining through as a guide whilst animating).

The easiest way to make arcs in Flash is by using the Line Tool and creating spikey zig zags across the screen. The top and bottom of the zig zags are respectively where the ball will contact the floor and reach the apex of the bounce. Notice, that I’m not making the zig-zags in contact with the floor because the Flash symbol containing the ball shape will travel down the centre of this path. This is in order to make the ball look like it is squashing against the floor. Don’t worry about getting the points perfect first time, because you can move them (and the floor) later.

In order to now get the nice arc shape, Press A to select the Subselection Tool and click somewhere on the path. With the path selected, press C to invoke the Convert to anchor point tool. While holding shift, click and drag sideways on the top of each ‘zag’ and pull it out until you get a nice arc. Holding shift means that the vector handles will be horizontal creating a nice smooth, even arc.

Anyone familiar with vector programs like Illustrator will know we are essentially creating a vector path. Being able to draw these is great as it means you can use them as a guide for your animation to follow. If you want to go on to create a symbol (as in this tutorial) then you can actually get the ball to travel down the path. This can get quite fiddly so watch the video for full instructions! You can also grab the resource file for this tutorial to see exactly how the ball is animated along the path to create a convincing bouncing ball animation.

SUMMARY

The bouncing ball is a great way to learn and understand the principles of great animation. Skilfully applying them to a simple mass such as a ball gives you a great foundation to build upon as you progress to animating more complex masses – like humans or animals.

It’s tempting but don’t dismiss learning the principles in favour of the tool. Whether it’s wielding a pencil, a mouse or a lump of plasticine, what ultimately makes great animation is the masterful application of the principles.  The tools are always changing but the principles are timeless.