Flash 101 - Part 3: Bouncing Around

Rapid Animation Development

If you've been following along, you should now have some idea about how basic frame-by-frame animation works in Flash. But animating a sequence one frame after another is a tedious process - especially when the sequence is a complex one - and Flash comes with some powerful tools to assist in this process.

This week, I'm going to take a look at the alternative to frame-by-frame animation, a technique known as "tweening" in Flash lingo. I'll be showing you how Flash's powerful tweening tools can substantially cut down the time you spend on an animation clip, with some simple demonstrations of how they can be used effectively.

For The Cool In You

Most people - novices included - consider tweening to be the coolest thing about Flash. It's not hard to understand why - Flash's tweening capabilities, combined with some easy-to-learn techniques, allow novices and experts alike to quickly and easily create good-looking animation sequences with minimal effort.

Find that hard to believe? I'll do my best to make you a believer by the end of this article - but first, a little theory.

A tweened animation differs from the frame-by-frame animation you learnt about before in that it doesn't require the animator to animate each and every frame of the animation clip; instead, the animator need only specify the starting and ending frame of the clip, with Flash creating all the intermediate frames.

Consider a simple example: a stone rolling downhill. In traditional frame-by-frame animation, it would be necessary to animate the stone every step of the way on its downhill journey; with tweening, it's only necessary to create two frames - the initial frame, with the stone at the top of the hill, and the final frame, with the stone at the bottom - and Flash will do the rest.

Flash offers two types of tweening: "shape tweening", used primarily to morph one shape into another; and "motion tweening", used to create the illusion of motion (although, as you'll see, you can do a lot more with it too). Shape tweening cannot be applied to symbol instances or text blocks, while motion tweening works on symbol instances, grouped elements and text blocks.

The Colour Purple

Let's begin with a simple motion tween that will better illustrate the concept. Open up a new Flash movie, and use the Circle tool to draw a simple ellipse. Fill it with your favourite colour.

You'll notice that Flash automatically adds a keyframe at frame #1 when you create the ellipse.

Convert the ellipse to a graphic symbol - it should show up in the Library window.

Now, click on frame #10, insert a new keyframe, and move the ellipse to a new location on the Stage. Go back to frame #1, and pop open the Window -> Panels -> Frame panel. Select "Motion" in the Tweening box. The area between frames #1 and #10 should fill up with a light purple colour and a solid arrow - this indicates a motion tween.

Play the animation - your ellipse should move smoothly from its original location to the new location you specified.

And that's your very first motion tween. Simple, huh?

Copyright Melonfire, 2000. All rights reserved.