COMM 414 Introduction to Rich Media for the Web
Bouncing Ball (Motion Guide & Tweening)
Introduction
Assignment
Create a bouncing ball using a classic tween, easing and a motion guide.
Procedure
- Draw a simple circle (fill it with any color, but don't use a stroke). Save the circle as a symbol.
- Move the circle off the stage temporarily.
- Click on the Motion Guide button to add a motion guide layer.
- 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).
- Go to View and make sure "snap to objects" is on (View > Snapping > Snap to Objects).
- Lock the guide layer. Select the ball and place the center point right on the beginning end of the motion guide.
- Add about 30 frames to both layers.
- 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.
- 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.
- 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.
- Select each of the upper keyframes and set the Ease In to about -50.
- 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.
- Test your sequence by hitting command-return.
- 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. |