Cooking With Flash: Animating a Bouncing Ball

Animating a bouncing ball is one of the first things you learn in a classical animation program. These days, many programs teach video game development, including art asset prep, concept art, 3d modelling, etc etc, but they gloss over (or don’t even bother teaching) some very basic concepts than any creator should know.

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/ball-good.swf, 300, 200[/SWF]

Here’s how to animate a bouncing ball convincingly using Flash CS5 (though these steps will work in most – if not all -iterations of the Flash software).

Step 1: Create the Ball

  1. In the tool palette, click and hold the mouse button on the “stroke” swatch.

    stroke swatch

  2. Select the strike-through swatch. Our ball art won’t have a stroke.

    strikethrough

  3. Optionally, click and hold the mouse button on the “fill” swatch and choose a colour for your ball. i went with classic cherry red (#0xCC0000).
  4. Again in the tool palette, Select the Oval tool. If you can’t see it, press and hold on the Rectangle tool – the Oval tool is hiding in a fly-out. You could also press the “O” key on your keyboard.

    Flash oval tool

  5. Click and drag the mouse to draw a circle on the screen. Hold the SHIFT key to constrain the circle’s proportions so that you don’t end up with an oblong ellipse.

    draw oval in Flash

  6. Click the selection (black arrow) tool. You use this one a lot, so why not learn the keyboard shortcut? It’s “V”. (Pointy, like an arrow. Get it?)

    Flash selection tool

  7. Either double-click the raw circle artwork, or range select it (drag a selection box around the artwork). It goes “fuzzy”. (And it wouldn’t be an Untold Entertainment tutorial without some mention of fuzzy balls.)

    fuzzy ball

  8. With the artwork selected, choose Modify>Convert to Symbol in the menu, or press the F8 key.
  9. In the resulting pop-up, type “Ball” as the MovieClip’s name.
  10. Choose the bottom-middle for the registration point. This is key to animating a bouncing ball properly!

    Convert to symbol

On or around the Flash MX release, the Flash engineers added a feature where a MovieClip can have its registration point in a certain place (ours is at the bottom of the ball), but there’s a second point – an anchor point – that can move around according to the needs of our animation. i don’t know why the anchor point doesn’t move to the bottom of the ball when we clearly want it there. Anyway, the last bit in this section is to move the ball’s anchor point down to the bottom middle, where its registration point is.

  1. Make sure that snapping is turned ON. The Anchor icon in the Tool palette should be depressed (cheer up, little icon – things can only get better). You can quickly toggle snapping with the shortcut CTRL + SHIFT + /.

    Flash Snap Tool

  2. Click on the Free Transform Tool. In addition to rotating, skewing and scaling things, this tool lets us move our anchor point around.

    Flash Free Transform Tool

  3. The anchor point is the white dot in the center of the ball MovieClip. Click and drag it to the bottom-middle of the ball. Since snapping’s turned on, it should snap into place.

    Snap Anchor

With the anchor point snapped to the bottom of the ball, we can properly squash and stretch it. “Squash n’ stretch” is one of the principles of animation laid out by Disney’s Twelve Old Men in the indispensible book The ILLUSION OF LIFE: DISNEY ANIMATION.

The Illusion of Life

If you’re interested in animation, i highly recommend studying that book and the Disney principles: arc of motion, squash n’ stretch, anticipation, secondary motion, follow-through … fantastic stuff!

Step 2: Rough-In the Animation

Thanks to the magic of computerized interpolative animation (AKA “tweening”), it’s a pretty quick job to get the ball bouncing. Getting it bouncing convincingly takes a tiny bit more effort.

So let’s rough it in first:

  1. Click on frame 5 in the Timeline.
  2. Click Insert>Timeline>Keyframe in the menu. If you’re going to do even a smidge of animation in Flash, you should really learn the Timeline shortcuts:

    – F5: insert a blank frame
    – F6: insert a keyframe
    – F7: insert a blank keyframe
    – SHIFT + F5: delete a blank frame
    – SHIFT + F6: delete a keyframe
    – SHIFT + F7: delete a blank keyframe

    Flash insert keyframe

    Inserting a keyframe copies everything from the previous keyframe (the first one Flash finds travelling backwards along the timeline). In the case of our Ball MovieClip, Flash copies the ball’s position, rotation, scale, and colour effects. This is a Good Thing.™

  3. Click on frame 10 of the Timeline, and press F6 to add another keyframe.

    Flash insert keyframe

    Now we have three instances of the Ball, on frames 1, 5, and 10. Frames 1 and 10 will depict the Ball in its “up” state, and frame 5 will be the “down” state.

  4. Click on frame 5.
  5. Click on the Ball MovieClip, and move it down the screen. i moved mine about 90 pixels down, and my Ball is 50 pixels in diameter. Don’t worry about botching this step – you can easily adjust your animation later.
  6. Click on any frame in the Timeline from 1-4.
  7. Right-click and choose “Create Classic Tween” from the context menu, or choose the same option from the program menu – Insert>Classic Tween.

    Flash Create Classic Tween

    Flash offers two different styles of interpolative animation: the new Motion Tween, for designers who want full spline control over every axis of an animation, and Classic Tween, for us old-schoolers who can’t be arsed. (Guess which kind of developer i am?)

  8. Similarly, add a Classic tween between frames 5 and 10.

Flash Classic Tweens

The first tween we created tells Flash to figure out the in-between drawings (“tweens”) from the Ball’s “up” keyframe and its “down” keyframe. Likewise, the second tween tells Flash to calculate the in-between drawings from the ball’s “down” keyframe to its “up” keyframe.

Play your animation by pressing the ENTER key on your keyboard, or better yet, click Control>Test Movie>Test in the menus, or hit CTRL+ENTER. Your Ball should animate up and down, crappily.

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/ball-crappy.swf, 300, 200[/SWF]

Our Ball is moving, but it’s not animating. The Illusion of Life isn’t there. We’re going to change that.

Step 3: Breath Some Life Into It

The type of ball we’ve got bouncing right now is very very stiff. It’s a cue ball or a bowling ball or a brass ball. It isn’t a very fun ball. It’s not soft or squishy. It has no personality. By adding a tiny bit of squash n’ stretch, we can eke a lot more verve out of it.

The squash n’ stretch principal is this: squishy, bouncy, rubbery things are more fun to watch on screen than rigid things. You’re “allowed” to squash or stretch something as much as you like, even to extremes, as long as the body’s volume stays the same. So if you stretch something up very tall, it has to simultaneously get very thin, or else it appears to gain mass, and it just won’t look right.

By the same token, if you flatten something by making it short, all that stuff has to seep out somewhere, so the shape has to simultaneously become very wide.

It makes sense to add a squash to the ball on the frame when it hits the ground, and maybe a slight stretch when it’s up in the air. Let’s do it:

  1. Click on frame 5.
  2. Click on the Free Transform tool.
  3. Select the Ball MovieClip.
  4. Drag the handles around to make your ball short and squat. Try to conserve the ball’s mass. For every inch that you flatten it, you’ve gotta squash it by the same amount.

Now test your movie.

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/ballEarlySquish.swf, 300, 200[/SWF]

Uh-oh … this isn’t good. Something doesn’t quite look right. Sure, the ball squishes when it lands, but … what’s going on?

The reason it doesn’t play well is that Flash is interpolating the squish from frame 1, when the ball is up in the air, all the way down to frame 5, when it hits the ground. Of course, the ball’s only going to squish when it actually makes contact with a hard surface.

Pres CTRL+Z or choose the Undo options from the Edit menu to undo the last few steps, until the ball on frame 5 is unsquished, and there are no Classic Tweens in the timeline. (If you undo too many steps, you can choose CTRL + Y or Edit>Redo to undo your undo

Step 4: Protect the Squish

In order to prevent Flash from interpolating the squish all the way through the animation, we need to “protect” the squish frame. We can do this by placing two keyframes, one on either side of frame 5. By doing this, we ask Flash to tween only the ball’s position on the way down, and only its position on the way up. Then, on the “protected” 5th frame, we squish the ball.

  1. Place a keyframe on frame 6. This copies the ball in its “down” state from frame 5.
  2. Press CTRL+C on the keyboard, or Edit>Copy to copy the ball in this position.
  3. Place a new blank keyframe on frame 4.

    Flash blank keyframe

  4. Press CTRL+SHIFT+V or choose Edit>Paste in Place to paste the ball in its “down” position, exactly as it is on frames 5 and 6.
  5. Re-add the Classic Tweens leading from frames 1 and 6.

    Protected squish

  6. Now that the squish frame is protected, you can go back and add the squish to the ball on frame 5.

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/ballGoodSquish.swf, 300, 200[/SWF]

It’s better with the squish, but it’s not perfect. Let’s try adding a stretch to the “up” positions.

  1. On frame 1, stretch the ball out a touch using the Free Transform tool.
  2. Since the animation loops, the first and the last frames have to match. Copy the ball from this frame.
  3. Click on the last frame, frame 10.
  4. Delete the ball from frame 10. This breaks our Classic Tween, and we get a dotted line leading to a blank keyframe.

    Broken tween

  5. Press CTRL+SHIFT+V or select Edit>Past in Place to paste the stretched ball. The Classic Tween is back to normal, now that it has something to animate towards.

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/ballWithStretch.swf, 300, 200[/SWF]

Okay! Almost there! It’s looking better with that stretch. You may wonder why i’m not asking you to “protect” the stretch frames like we did with the squashed frame. That’s because while the ball shouldn’t squish until it hits the floor, it actually should lengthen as it travels up through the air.

The worst thing about our animation right now is the timing. The ball moves pretty robotically, and it has a real “computer animated” feel to it. In order to soften this up, we’ll apply some timing to the animation.

Step 5: Apply Timing

To make the ball a little more phyiscally believable, we need to slow it down on the way up. If you’ve ever seen super-slow-motion footage of someone hitting a baseball, or if you’ve studied Newtonian physics, you’ll know that the baseball actually comes to a dead stop as its energy is transferred to the bat. The bat, in turn, applies force in the opposite direction to the ball.

Similarly, there’s a point at which our ball hangs in the air and stops moving, before heading back down towards the ground. It decelerates (moves increasingly more slowly) as it reaches the apex of its bounce, and accelerates as it reverses direction and heads towards the ground.

We need to apply some easing to the ball to imitate this real-world behaviour.

Easing can front- or back-load a tween animation so that it’s slower or faster at the beginning or the end.

Here’s a picture of a tweened box animation with no easing:

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/boxNoEasing.swf, 550, 400[/SWF]

The box’s in-between frames are evenly distributed between the start and end points.

And here it is with “Ease In”:

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/boxEaseIn.swf, 550, 400[/SWF]

The box appears to move more slowly at the beginning of its animation, and it speeds up as it reaches the end point. We can see this is because the box’s in-betweens are bunched together at the beginning.

Finally, here’s what “Ease Out” looks like:

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/boxEaseOut.swf, 550, 400[/SWF]

The box appears to slow down at the end of the animation, because its in-between frames are bunched together there.

So we return to our bouncing ball. We want the tween coming out of frame 1 to Ease In, so that it accelerates towards the ground. We want the tween coming into frame 10 to Ease Out, so that the ball slows down when it reaches the top of its bounce.

  1. Click on frame 1.
  2. In the properties panel, drag the number 0 next to the “Ease:” label all the way to the left, until it reaches -100 and the word “in” appears. You can also single-click on the number and it becomes an input field. Type “-100” into the field and press ENTER.

    Flash Ease In

  3. Click on frame 6.
  4. In the properties panel, slide the Ease: to the right until it reaches 100/out, or single-click the field and type “100”, then press ENTER.
  5. For the finishing touches, i decided to slow the squish down a bit. First i added a frame on either side of the squish:

    Animated ball in Flash finishing touches

  6. … and then i added Classic Tweens coming into and going out of the squish.

    Animated ball in Flash finishing touches

Test your movie.

[SWF]http://www.untoldentertainment.com/blog/img/2011_04_20/ball-good.swf, 300, 200[/SWF]

The combination of easing and squash n’ stretch give the ball a lot of spunk and life! Instead of a ball that looks like it was animated by a robot, we’ve got a spunky, squishy object that’s a lot more fun to watch.

4 thoughts on “Cooking With Flash: Animating a Bouncing Ball

  1. IRAH

    at the same ball bouncing, do it in as3.0 coding.. use the ball movieclip directly, and jump the ball on same place at continuously and use the simple physics concept gravity and velocity like that.. very simple code must be understandable…….

    Reply

Leave a Reply to IRAH Cancel reply

Your email address will not be published. Required fields are marked *