Adobe Flash – Symbols and animating using classic tweens

End of path

Working with symbols is essential in Flash. They keep file size down, keep you organized and allow you to manipulate their size, motion and shape. They also enable Flash to be interactive.

There are 3 types of Symbols:

Graphic – they are used for static images. You can also animate them and use them in your main animations timeline.
Button – interactive animation (responds to clicks). They can be programmed using actionscript.
Movie Clip – reusable animation. They have their own timeline that’s independent of the main timeline. For instance if you place a movie with 30 frames of animation in to the main timeline that only has one frame, the movie clip will still play all 30 frames of it’s animation. That’s different from a graphic since it needs the same amount of frames in the main timeline as in it’s own timeline to animate.

Any symbol can be change to another at any given time. To create a symbol you can either open the library (window/library) and click on the “create new layer” button. Then you can choose the symbol you want. The other way is to select a shape you drew on the main timeline and convert it in to a symbol (modify/convert to symbol).

Convert to symbol
Animating Tween

Now that you know at least the bear basics of symbols we can animate a moving shape the easy way (not frame by frame). First draw a shape in the first frame and convert it in to a symbol. Convert it in to a graphic.

Now select the 24th frame (remember 1 second in 24 frames) and create a new key frame with f6. In this key frame move the shape somewhere else on the stage (I moved it to the right).

Right click on any of the first 23 frames and select “create classic tween”. The first 23 frames will now have an arrow in their display. If the arrow is divided you did something wrong.

The symbol will now move from the position in the first frame to the position in the last frame.

You can now create another key frame and place the symbol somewhere else again. Click on any frame between the 24th and last and create a classic tween again. Now the symbol will move to another position again.

Multiple tweens
Move along a set path

There is also a way to create a guide or pathway on witch the shape will move. Create a new file and place an object on the stage. Again, convert it to a graphic symbol. Go to frame 70 and create a new key frame with f6.

Now create a new layer in the timeline and rename it “guide”. In this layer draw the path you want your object to travel. Now go to frame 70 and press f5 to create 69 continuous frames. Right click on the layer (not the frame) and click on “guide”. A little hammer will appear in the layer.

Little hammer

Go back to your first layer (the one that contains the object) and place it in to the guide layer. Now the hammer should turn in to a little arc.

Little arc

Place the object in the first frame in the beginning of the path. Now click on frame 70 and create a new key frame with f6. Move the object in this frame to the end of the path. You can also make the guide layer invisible by clicking on the first dot in the layer display. A red cross will appear indicating the layer is invisible.

Now you have an object that moves on a set path.

Moving in a loop

You may have noticed that all the animations are in a loop. That’s because we haven’t told Flash that once it reaches the end it should stop the animation. We can do this by using actionscript 3 (or 2 but that version is phasing out).

Click on the last key frame (it needs to be a key frame) of any of your animations and open the action window (window/action). The window comes with most commands preloaded in to the GUI but this is simple so we’ll just type it by hand. All you have to do is type in “stop();” without the “”. Now the animation will stop when it reaches the end of the timeline.

Download example file

If you like what I do and appreciate my posts and freebies, please consider supporting my work.