Animation in Flash

The Library
The face you drew in the last tutorial is comprised of a collection of vector commands which make up your shape. It has no identity other than this. Often however, graphics are used more than once in a project (logos, button designs, interface elements etc.) and it is important to be able to reuse elements that are developed. Flash is able to store reusable elements in a Library. Each element is stored in a special form called a Symbol which acts as a template for copies made throughout a Flash document – or in other Flash documents (libraries can be shared).

Symbols are added to a Flash document in 3 main ways: -

Converting an existing graphic to a symbol.

Creating a new symbol using the Insert > New Symbol…menu item.

Importing from another Flash document’s library.

There are 3 types of symbols; graphics, buttons and movieClips.

The most important type is the last – a movieClip is a self-contained timeline (which can include animation and scripting). MovieClips are similar to Director’s film loops, but they are far more complex and powerful both in terms of animation and programming capabilities.

Converting a graphic to a symbol

Choose the Selection tool in the tool palette.

Drag around your face so that all elements are selected.

Select Modify > Convert to Symbol…

Fill in the settings for your new symbol as follows (if your dialogue box is more complex than this, click on the Basic button): -

Click on OK. You will see the property inspector change to reflect the change.

Select Window > Library. The library will appear in the right-hand panel set.

Click on the Face item in the lower Library pane. A preview appears in the upper pane.

Drag the Face item from the lower pane onto the stage. A second copy of your graphic will appear.

Each of the graphics on your stage are Instances of the Face Symbol (in Director, sprites relate to cast members in a very similar way). Just as with sprites in Director, you can edit each instance without affecting other instances (experiment with the Free Transform Tool or the transform panel – Windows > Design Panels > Transform).

Keyframe (Tweened) Animation in Flash
Flash is a very powerful animation tool, which is able to do all that Director can – and then some more! We will start by looking at the simplest animation type, using keyframes.

Save your Flash project as Animation_1 and then delete all but 1 of your Faces. Make sure you only have one instance of your Face symbol on the stage.

Choose the Selection tool from the Tool Palette and move your face to the top left-hand side of the stage.

In the timeline, select frame 30 and then right-click and choose Insert Keyframe from the menu that appears. This duplicates all the current layer information in a Keyframe. Your timeline should look like this: -

Move the playhead to frame 30.

Pick up the face and move it to the lower, right-hand side of the stage.

In the Timeline, click on the name of Layer 1 – to select all the frames with content, including the Keyframe at the end.

In the Property Inspector, you will see a Tweening option – select Motion: -

To view your animation, move the playback head to frame 1 (or choose Control > Rewind) and then press Return (or choose Control > Play).

Motion tweening can only be used on Layers that contain a single symbol or group of drawing objects. We could have tweened our original Face image by grouping its elements before animating it (Modify > Group).

Using symbols gives us additional transformation options though, so it is generally best to convert all drawn objects to symbols before animating them.

Further developments

Experiment with using the alpha property in your animation – can you make things fade out or in?

Select the last Keyframe (Frame 30) and the select the face instance. Use the free transform tool to change its size and rotation, then re-run your animation.

Experiment with creating tweening on different layers (remember you can only have 1 symbol on each).

This page was last updated on 2nd June 2008