Home arrow Flash arrow Page 6 - Flash 101 (part 3): Bouncing Around

Bouncing Balls - Flash

Last time, you learned the basics of animation by creating aframe-by-frame motion clip. This time, find out how Flash's powerfultweening tools can help you create good-looking animation clips withminimal time and effort. Also covered: shape hints and motion guides.

  1. Flash 101 (part 3): Bouncing Around
  2. For The Cool In You
  3. The Colour Purple
  4. A Tint Of Scarlet
  5. Taking The Scenic Route
  6. Bouncing Balls
  7. Zooming In
  8. Curves In All The Right Places
  9. Taking A Hint...Or Two...Or Three
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 15
December 27, 2000

print this article


Motion tweening is a great way to create animation clips that look good and are simple to put together - as this next example demonstrates.

How did I do this? Very simple.

First, draw a circle on the Stage and fill it with a gradient fill - I've used blue, but feel free to experiment - to create a smooth bouncing ball. Convert it to a graphic symbol - you'll be using this symbol throughout the exercise.

Next, select frame #7, insert a new keyframe, and move the ball vertically downwards. Use the scaling handles to flatten it vertically and stretch it horizontally, so that it looks like it's been squashed.

Go back to frame #1 and create a motion tween between the two keyframes (you can also do this by right-clicking anywhere between the two keyframes and selecting the "Create Motion Tween" command)

Now, move on to frame #14, insert a new keyframe, and move the ball back up to its original location. Pop open the Transform panel, and use the Reset button (bottom right corner) to restore the symbol to its original state. Insert a motion tween between frame #7 and frame #14.

When you play your clip, you'll see something like this:

If you think the clip would look better if it played a little faster, you can alter the frame rate through the Modify -> Movie dialog.

There are just a couple more steps to this animation. First, select frame #7 (the flattened ball) and move the symbol about 100 pixels to the left. Do the same with frame #14, the final keyframe, except that the symbol should be moved to the right When you play the clip, the ball will appear to bounce across the screen.

And finally, the fade-in/fade-out effect. Select the ball in the first frame, and use the Effects panel to add an alpha effect, so that the ball is partially transparent. Do the same for the final keyframe.This time, when you play the clip back, the ball will slowly solidify as it moves downwards, and fade out as it bounces upwards.

How long did that take? About five minutes, I'd say - and the result is a pretty good-looking animation clip. Plus, since the entire clip is built using a symbol, you can easily alter the colour and size of the ball in symbol-editing mode, and have your changes immediately reflected in the clip itself. Try it yourself and you'll see what I mean!

This article copyright Melonfire 2000. All rights reserved.

>>> More Flash Articles          >>> More By icarus, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- An Overview of Flash and ActionScript
- Building Web Forms In Flash
- Building Data-Driven Flash Movies
- Flash 101 (part 6): The Final Countdown
- Flash 101 (part 5): Spiralling Out Of Control
- Flash 101 (Part 4): Don't Touch Me!
- Flash 101 (part 3): Bouncing Around

Developer Shed Affiliates


Dev Shed Tutorial Topics: