Skip to main content

Home

Daniel C. Fergus

Artist & Educator

COMM 414 Introduction to Rich Media for the Web

Bouncing Ball (Motion Guide & Tweening)

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Introduction

Assignment

Create a bouncing ball using a classic tween, easing and a motion guide.

Procedure

  1. Draw a simple circle (fill it with any color, but don't use a stroke). Save the circle as a symbol.
  2. Move the circle off the stage temporarily.
  3. Click on the Motion Guide button to add a motion guide layer.
  4. On the guide layer, use the pencil or pen tool to draw a series of "bounces" that get smaller each bounce (click here for an example).
  5. Go to View and make sure "snap to objects" is on (View > Snapping > Snap to Objects).
  6. Lock the guide layer. Select the ball and place the center point right on the beginning end of the motion guide.
  7. Add about 30 frames to both layers.
  8. Click on the last frame on the ball layer and add a keyframe. Move the ball so that the center rests exactly on the end of the motion guide.
  9. Click somewhere between the keyframes and choose Motion Tween in the properties window (you can also right-click on the layer). Scrub back and forth on the timeline—the ball should follow the motion guide.
  10. To add a greater sense of realism place a keyframe at the top and bottom of each bounce. Select each of the bottom (impact) keframes and set the Ease Out to about 50.
  11. Select each of the upper keyframes and set the Ease In to about -50.
  12. Now "bracket" each of the lower keyframes (place a keyframe on either side in the timeline). Select each of the (middle) bounce keyframes and then "squash" it a little. The ball will appear to compress every time it hits the ground.
  13. Test your sequence by hitting command-return.
  14. Give me both .fla and .swf file via jump drive.

Go Above and Beyond

Some possibilities:

  • Add a background or context.
  • Add more balls.
  • Create other objects that the ball bouces off/against

 

Specifications:

  • Size: 550 x 400 (default Flash size)
  • Frame Rate: 15 fps
  • Length: appx 30 frames
  • Due Date: Week 4
  • Deliverables: both the FLA and exported SWF files.

Grading rubric

4 Went above & beyond and made something special
3 Did what was required and nothing more
2 Missing one or more required elements or contains one or more errors
0–1 Poor showing; mostly incomplete or full of errors.
decorative thumbnail

All text, images, and multimedia pieces (unless otherwise specified) copyright 2005–2011 Daniel C. Fergus. All rights reserved. No reproduction without permission.