Working With Symbols

Note: This lesson is adapted from lessons shared by Mr. Lister. He’s a good man.

Symbols & Instances

I think we can all agree that it is annoying to have a layer for each individual piece of each object on the main timeline. In addition to this, what happens if you want to use this same object again? To make things easier on us, Flash has introduced symbols.

If you draw or import a graphic or image into Flash, you create an object. Usually, objects are made up of a number of individual elements. For instance, if you draw a rectangle, an oval and a line on the same frame, they become an object together.

Once you are finished editing an object, you should convert it to a symbol. This will automatically save the object to your library. Symbols are useful because they can be easily animated and copied from project to project. There are three types of symbols you can create:

Movie Clip A symbol can be a complete animation
Button You have the possibility of assigning actions to a symbol. This way, the viewer can later interact with the movie or the Web site.
Graphic The type of symbol most often used: zooming, rotating, and fading a graphic in and out is easy.

The process has its advantages. Symbols allow you to create content that can be used over and over again. They help to make your animations smaller because each symbol is loaded only once and then re-used. So if you use the same character or object 80 times (each time is what we call an instance) in your movie it will still only take up the file size of the image being used once.

For example, if you created a symbol of a snowflake and added 50 instances of the snowflake to your timeline to create a snowfall effect, your file size would be much smaller than if you drew 50 separate snowflakes on your main timeline.

Start by creating a new Flash file and in the property inspector, leave the size as 550 x 400 and the canvas colour white. Save this file as leaf.fla in your DropBox or Drive folder.

To Create a Symbol

1. Choose Insert > New Symbol

This will bring up the New Symbol Dialog seen below.

Screen Shot 2013-09-26 at 10.46.42 PM

2. Choose “Graphic Symbol”

We will learn about the other types of symbols in the future.

3. Name the symbol leaf (see naming conventions below)

***Note*** It is important that you follow the following rules when naming your symbols

a) No Spaces – If you have multiple words separate them using and underscore (i.e. red_ball)

b) No Special Characters – Special characters have specific meaning in Action Script (Flash’s programming language), which can cause confusion for the program.

c) No Forward Slashes – Will be confused as a pathname

d) All Lowercase – Action script treats lowercase letters differently than uppercase. It may cause confusion it you use uppercase in one area and lowercase in another. To avoid confusion always use lowercase.

e) No Dots – Dots are reserved for Action Script Commands

f) Use Descriptive Name – By default flash will name it “Symbol#”. This is not helpful when you need to locate the symbol at a later date. Make sure you name your symbol something descriptive and useful.

4. Choose Ok

By looking at the Edit Bar, you will see that you are now no longer on the main timeline. Instead, you are now working inside of the symbol that you created so that you can design your symbol.

Screen Shot 2013-09-26 at 10.46.55 PM

5. Using the drawing tools we’ve been practicing, draw a leaf on the center of the stage.

You can find the center by locating the cross hair 

Screen Shot 2013-09-26 at 10.48.38 PM

Notice that everything you created was drawn on the same layer. If you wanted to separate each object onto a separate layer for ease of drawing, this could be done on the symbol timeline.

****Note**** The circle on your object is called the “Registration Point”. Flash uses the registration point to know where the center of your shape is. This is very important because when you are animating using rotation, the rotation will occur around this point. For now, make sure the registration point is in the middle of the leaf.

6. When you have finished drawing, you can choose “Scene 1” from the edit bar to return to your main timeline.

Congratulations, you’ve just created your first symbol! But where did your leaf go? The leaf is not automatically placed on your stage. Instead, it is stored in your Library.To access your symbol, you must use the library. We will discuss using the library in the next lesson.

Save this flash animation as leaf.fla and move on to the next lesson.


One thought on “Working With Symbols

  1. Pingback: Using Movie Clips | Mister Robson's World

Tell Mr. Robson what's on your mind!