You can turn your new artwork into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain images and animations along with other types of content.

1. Click the Selection tool in the Tools panel (see Figure 1).

   Figure 1. Tools panel with the Selection tool selected

2. Click the circle on the Stage to select it. A bounding box selection appears around the circle.
3. With the circle still selected, choose Modify > Convert to Symbol (or press F8) to bring up the Convert to Symbol dialog box (see Figure 2).Note: You can also convert a graphic into a symbol by selecting it and dragging it into the Library panel.

   

   Figure 2. Convert to Symbol dialog box

4. Click OK. A square bounding box appears around the circle. You have now created a reusable asset, called a symbol, in your document. In this case, you created a movie clip symbol.If the Library panel is not open, choose Window > Library. The new symbol appears in the Library panel.

Animating the circle

Now that you have some artwork in your document, you can make it more interesting by animating it to move across the Stage:

1. Drag the circle to just left of the Stage area (see Figure 3).

   Figure 3. Circle moved to the left of the Stage area

2. Right-click the dot (also called the keyframe) on frame 1 of the Timeline and choose the Create Motion Tween option from the menu. Notice that the Timeline is automatically extended to frame 24 and the red marker (current frame indicator or playhead) is located at frame 24 (see Figure 4). This indicates that the timeline is ready for editing at 1 second—that is, at frame 24 when the frame rate is 24 fps.

   Figure 4. Extended Timeline ready for editing on frame 24

3. Select the circle on the Stage and drag it to the right of the Stage area. This step just created the tweened animation. Notice the dot (keyframe) which appears at frame 24. Also notice the motion guide line showing the path of motion between frame 1 and frame 24 (see Figure 5).

   Figure 5. A 24-frame animation showing the circle at the end of the animation on frame 24

4. In the Timeline, drag the red playhead back and forth from frame 1 to frame 24 to preview the animation by scrubbing the Timeline.
5. Add a change in direction in the middle of the animation by dragging the playhead to frame 12 and then moving the circle to another location on the screen. Notice the change in the motion guide line and the new dot on the Timeline at frame 10 (see Figure 6). The dots on the Timeline are keyframes which mark where (at what frame) objects change on the screen.

   Figure 6. The tweened animation showing a change in direction at frame 12

6. Experiment with changing the shape of the motion guide path. Click the Selection tool in the Tools panel and then click a section of the motion guide line and drag it to bend the line shape (see Figure 7).

   Figure 7. The tweened animation showing curves added to the motion guide line

7. Choose Control > Test Movie to test the FLA file.
8. Close the Test Movie window.

What is a Flash Symbol?

A symbol is a reusable object used/created in Flash. A Symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols: Graphics, Buttons, and Movieclips.

A copy of a symbol used in the movie is called an Instance, which can have its own independent properties (like color, size, function, etc.) different from the original symbol. All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie. When a symbol is edited all of its instances get updated, but changing the properties, effects or dimensions of an instance of a symbol does not affect the original symbol or other instances.

Importance of using Flash Symbols

Using flash symbols is very crucial to the file size of your Flash movie. The Flash file size depends largely on the size of all the graphics and texts used in the movie (both symbols and non-symbols) – here the major advantage of using symbols is that a symbol’s size is taken into consideration only once even if it is used a hundred times – this is the true power of Flash. Unused symbols in your library are not counted in the size of your movie.

Important Tip: Get used to using symbols in flash right from the beginning and name them neatly for easy maintenance. It is a very tough job optimizing your file size if you don’t use symbols from scratch!

The Three Types of Symbols

Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. They have only one frame in their timeline. Learn how to create a graphic symbol.

Button symbols are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout, and other actions. You define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in their timeline – one each for the up, over and down states, and one to define the hit area of the button. Learn how to create a button symbol.

Movieclip symbols are reusable pieces of flash animation – consisting of one or more graphic/button symbols – thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames – just like the main timeline) that plays independent of the main movie’s Timeline. The best thing about using movieclips is that you can control them from actionscript – you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. Learn how to create a movieclip symbol.

The three symbols appear in the flash library similar to the three symbols the above image. Let’s look at how to create these three types of flash symbols now.