This site is now just an archive over the rise and fall of Flash. The domain is available for sale
Login | Register

The importance of Symbols and how they work (Flash 4)

They key to making fast downloadable flash-files is understanding the three symbols, and what they can do.

28. AUGUST 2000, Jens Chr. Brynildsen Observe: this tutorial teaches Flash 4 style actionscript. It will be rewritten to Flash 5/MX style when time allows

In the first versions of Flash, there were only two symbols: graphic and button. When Macromedia launched Flash 3, they introduced the Movieclip. The MovieClip was extended further in Flash 4/5, and might be the most powerful symbol of them all, and when used together these three symbols can do incredible things.

There is something called symbols in Flash, but why should you use them? Isn't it much easier to just draw the things you need on separate layers? Well, not quite so. To see the power of symbols. and how they impact the size of your flash-file, Download this document, and open it in Flash. Click the Drawing layer, and make a drawing of a face, or something more complex than a circle.

When finished drawing, go to the Control menu and choose test movie. By default Flash will now open the document along with the Bandwidth Profiler (If it did not open,go to the View-menu and choose Bandwidth Profiler). The Bandwidth Profiler is a tool built into Flash that lets you see a visual representation of the data in your Flash-file. It can be used for many purposes. The Bandwidth Profiler tells that the filesize of my drawing is 766 bytes (blue arrow).

Let's assume I wanted a shadow beneath my drawing. To do this, click on the keyframe containing the drawing and copy it using the Edit-menu. Click the Shadow-layer, and choose "paste in place" from the Edit-menu. Use the arrow keys to nudge the shadow into a slightly different position than the drawing, and use the Bucket tool to fill the whole shape with Black color. Test the movie (Control menu -> test movie) and have a look at the new size.

The size of my document almost doubled! It's now 1488 bytes in size. Now, let's try using symbols. Click the keyframe containing the graphics on the Shadow-layer and delete it. Then click the same keyframe on the Drawing layer. This will select all the contents of this layer. Open the Insert-menu, choose "Convert to symbol". In the dialog that appears, "Graphic"-symbol has already been selected for us. Name the symbol "Original drawing" and press the OK-button. Copy the symbol to the shadow layer, and choose Modify -> Instance. Press the Color Effect-tab and set Brightness to -100. Nudge the symbol for the shadow effect, and test the movie (Control menu -> test movie).

The new size of this document is just slightly bigger than version 1, and it looks just like version two. This is why you should use symbols. If you don't convert anything that might be used more than one time into symbols, your flash-file will grow, grow, grow. This is also one of the best ways to tell if someone really knows how to use Flash vs. someone that has only been playing around with it...

By now, you should know why you should use symbols and how to create them. Let's now explain how the different symbols work, and explain the multiple timelines of Flash.

The concept of timelines is maybe the most difficult concept to grasp for beginners starting out with Flash. It's also the most powerful feature of Flash, that will enable even non-programmers to do incredibly advanced stuff.

In Flash there are 3 different symbols:

They all have some things in common, but they function very differently. The most obvious one is maybe the button.

Button symbols
Buttons is simply a symbol that contains four frames (also referred to as "states"): Up, Over, Down and Hit. Buttons are used to start events in Flash-movies when the user clicks, moves the mouse over or drags the mouse across them.

Up: is how your button will look like if the user is not doing anything and not moving the mouse over it.
Over: is how your button will look like if the user moves the mouse over the button.
Down: is the look of the button when it's clicked with the mouse
Hit: defines which area of the button that will trigger the above 3 states

There is often some confusion related to the Hit-field in the buttons. Let's use an example to show how it'll work in real-life. Click here to download the file "m2buttons-fla" to your harddrive and choose "Test Movie" from the control-menu.

Move your mouse over the buttons and see what happens. If you move the mouse over the first button, you'll see the problem if you move your mouse to the left of the button. The first button has an empty Hit-frame

The result is that Flash will use the contents of the Down-frame to define the Hit-area. This is what causes the weird looking effect when you drag the mouse over the letters. If we only define the cirlcle as the Hit-State - like in the sample on your right - we get a better looking result

Only use the states you need in the buttons. All unnecessary frames will add to the total size of your movie. To keep the file-size down, make sure you don't draw directly into your buttons. Use Graphic symbols instead.

Classic errors with buttons:
Make sure you never drag a button within another button. This is a certain way to make your Flash-file crash, and it's often hard to find the button used within the button... Another classic mistake is to add actions to buttons within the buttons themselves. Actions are placed ON a button symbol, NOT within.

Graphic symbols and MovieClips
These two symbols may at first seem very alike, as they both may contain still graphics and animations. There is however a very big difference: Graphics can be displayed, MovieClips can be both displayed and programmed.

Let's use an example. Click here to download the file "m2symbols.fla" to your harddrive.

The movie contains 2 different symbols from the standard Libraries that come with Flash 4. The bird is a graphic and the fish is a MovieClip. Test the movie (control-menu -> Test Movie). You'll see the bird standing still, while the fish is swimming around. Right-click (Mac: CTRL-click) frame 3 in the movie and choose "Insert frame" from the popup-menu

Test the movie. Now you'll see the bird starting to flap its wings, but it all seems a bit unfinished. Right-click (Mac: CTRL-click) frame 8 in the movie and Insert a frame. Now it looks much better, right?

What happened and why? The biggest difference between a graphic and a MovieClip is that the graphic is controlled by the timeline it's residing on (In this example, the main timeline). A Movie Clip's timeline is not affected by any other timeline than it's own.

Sounds difficult? Let's use a tractor for an example. A tractor consists of many parts moving independently or depending on each other. The engine can be running, even though the wheels are not turning. If it's going down a hill, the wheels can be turning without the engine running. The shovel can move up and down, the cassette player may be playing or not... All of these things are movements that have independent timelines, i.e. they can "animate" without any relation to each other.

Download "Tractor.fla", and use the "test-movie"-command to view it.

The movie consists of six MovieClips. Three of these are buttons, and the three others make up the tractor. Double-Click the wheels. Notice the symbol of the selected MovieClip in the popup window. It's white and blue to display that this actually IS a MovieClip.

When do you use MovieClip and when do you use Graphic?
Well, the basic rule could be that a MovieClip usually contains many graphic symbols, and it's very seldom the other way around. Here are some more rules:

1. Anything that is going to be used as an element in other symbols should be a Graphic.

2. Any symbol that will be triggered in any way (start animating, moving etc.) should be a MovieClip.

There will be times when you'll need to not follow these rules. If you need to avoid them to achieve an effect, you'll easier understand what to do if you know and follow these rules.
The next lesson will tell you about "the Magic of MovieClips", and how to use them in real life.

Tip: If you wish, you may change a movie-clip into a Graphic or even a Button, but as a general rule, don't do this. You might remember that you did this now, but will you remember tomorrow? It's usually smarter to make a separate symbol that really is a Graphic or a Button for such things unless you have a very "sticky" brain.


About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!



No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register