Flash Basics | Layers and Symbols

Layers and Symbols

Use Your Head. To get ahead in life, sometimes you've got to use your head. In this lesson, we'll use this yellow one to explore symbols.

Welcome to Lesson Two, in which we dig deeper into Flash, and learn about one of Flash's most powerful (and most confusing) core elements: symbols.

So far, you have learned how to use multiple layers on the Timeline to efficiently arrange the elements in your Flash movie, and worked with Flash's Tools panel to draw shapes.

Now we're going to take that expertise to the next level, with the introduction of symbols.

 

What are symbols, and why should you care? Symbols are objects that reside in your document's Library. You can use symbols over and over again, making copies on the Stage called instances.

As a Flash newbie, you may have already come to some realizations about how Flash works—namely, that many of the graphic elements in a Flash movie are graphic shapes that are drawn on the Timeline. This can work, but ultimately, it's not a good way to build a Flash piece, and here's why...

First, as you may have noted in the first exercise, it's easy to accidentally select and delete or move part of a graphic shape, thus messing up your artwork, and forcing you to go back and fix things.

Second, every graphic shape is a "new" graphic, and each new graphic requires more memory to draw it. While this isn't much of a problem with simple, solid shapes, it can rapidly eat up memory with more complex graphics.

Third, if you have multiple copies of a graphic shape in your piece and you change one of them, you will have to manually change all of the copies. For example, if you have a "Home page" icon on every frame in your Web site, and then you decide that you'd like the icon to be blue instead of green, you have to change every instance of that icon.

These limitations are no sweat once you add symbols to the mix. And, most importantly, you need to use symbols to achieve any kind of complex animation and interactivity, which we will get to in later lessons. If this is a little unclear, don't worry. After we work with symbols and instances for a while, you will understand how they work and why they are so essential to a well-organized Flash project.

A symbol encapsulates a graphic shape, group of shapes, type, or picture, and adds some special functionality. There are three types of symbols: Buttons, Graphics, and Movie clips.

	Buttons: Encapsulate the frames needed for typical button states (modes of action): up, over, down, and hit. Graphic: Used for encapsulating a graphic shape or group of shapes. Movie clip: The most versatile symbol, the movie clip (abbreviated "MC") contains its own Timeline that runs independently of the main Timeline, and can contain multiple layers and elements. Most importantly for the future, they can be controlled via ActionScript. In fact, they can also be used as buttons (a Button is just a custom movie clip that has the four frames and built-in ActionScript controlling them).

Since movie clips don't up take any more memory than a Graphic symbol, you'll almost always want to use Movie Clips!

Try It Out: Smiley Movie Clip

It's always best to learn by doing, so I'd like you to try creating your own movie clip symbol and create a classic smiley face. To get started, open up a new Flash document, following the setup instructions you used in Lesson One and Exercise One (800x600, 24 fps).

Now, select the Oval tool with both a line and fill defined. You can do the classic solid yellow fill and black line, add a Radial gradient like I did here, or create your own color combination. Draw a circle on the Stage. Then, with the Fill and Line selected with your Selection tool, go to Modify > Convert to Symbol. Then choose movie clip and enter "Smiley" in the Name field that appears at the top of the Convert to Symbol dialog.

The Flash pros' preferred method of creating symbols is to use the keyboard shortcut: F8. This is one of the most-used keyboard shortcuts, so practice using it until it becomes second nature!

HINT: Laptop users may have a problem trying to use the Function keys, because laptops generally don't come with the full-featured "extended" keyboard that desktop systems have. To use your Function keys, you will need to locate the "fn" (function) key (generally on the bottom left-hand side of the keyboard), then hold it down while pressing the Function key you want to use.

Symbols, Instances, and the Library

Next, we will look at one of the key advantages of symbols, and how they work with the Library—first, open up your Library (Ctrl+L or Window > Library), and you should see this:

Our oval is stored in the Library.

Think of the Library as the master collection of the symbols and other content of your Flash movie. Any time you put a symbol into your Flash movie, you are actually putting an instance (copy) of the master symbol into the movie. The key advantage of symbols is that multiple instances of a symbol can be added to your movie without adding any extra file size!

To see instances in action, simply drag-and-drop the "Smiley" symbol from the Library onto the Stage—do this multiple times, and you'll see that multiple instances of the symbol are placed onstage.

Here's where things get slightly confusing: You can change the outward appearance of an instance by changing its properties—the properties of a movie clip (MC) are as follows:

	x-(horizontal) position y-(vertical) position width height xScale yScale rotation alpha tint brightness blend modes (in Flash 8 and CS3)

To change the properties of an instance, select one of the instances on the Stage and use one of the following: the Free Transform tool (width, height, rotation), the Info panel (x/y position, width, height), or the Properties panel, to set the Instance's alpha (transparency). To do this, select Alpha from the Color dropdown menu, then use the slider to set the Instance's alpha value (0=invisible to 100=fully opaque).

It's important to note: When you change any of these properties, you are not changing the master symbol! You are only changing that one instance of the symbol.

Take some time to experiment with these tools, changing the Properties on different instances in your FLA file, like this:

One symbol, many instances.

Arranging Symbols

While you're doing this, without thinking, you'll probably be pasting all of the Instances onto the same layer—this is fine for this little test, but the layer rule is this: Use one symbol per layer so that you can arrange the visual stacking order of the instances by dragging layers up and down in the Timeline! We'll begin learning about the Timeline in earnest in Lesson Three.

Changing a Symbol's "DNA"

Let's turn to biology for our next metaphor. In the previous little experiment, what you did was essentially "clone" the original symbol into many instances, and then you made some external changes. Say you had identical twins—this is the equivalent of dying one's hair red. The change is external, but the internal DNA is unchanged.

Unlike real-life biology, in Flash it's a snap to go in and change a symbol's DNA. To do this, you need to get "inside" of the symbol, which you can do in the following ways:

	Double-click on an instance onstage. Right-click (Control-click on a Mac) on an instance and select Edit in Place. Double-click on the master symbol in the Library.

All three of these will do the same thing: Put you inside the movie clip master symbol. You can tell you're inside the MC when you see the dot pattern rather than the blue rectangle around the outside of the MC. If you're editing a symbol onstage (in place), you'll see the other Stage content outside of the MC is faded back so that you can clearly see the content of the symbol you're working on.

Also, at the top left, you'll see a wayfinding tab that shows your current location:

Wayfinding information is at the top left of the Stage.

Also, note that each movie clip has its own Timeline and layers, which act independently of the main Timeline. This is tremendously important, and understanding this will be very important to your future Flash projects! We will cover this in much more detail later.

Now, select your shape's fill, and do something to change it (remove it, change the color, whatever strikes your fancy), and you'll see that every instance of the symbol will change, because you've changed the internal DNA of the symbol! (To get back out to the main stage, click "Scene 1" in the wayfinding tab.)

Nesting Movie Clips

Now, let's get back to creating the rest of our smiley face—you've probably been doing all sorts of crazy stuff on the Stage, so it's time to get back to the core task, and cut out the confusion—literally.

If you haven't already, go back to the main Timeline by clicking on "Scene 1" in the wayfinding tab (in the upper left). Now select everything with Ctrl+A or by drag-selecting all of the instances onstage and then hit the Delete key to clear the Stage. Don't worry, you still have the symbol in the Library to work with! You just deleted the instances.

Now, double-click on the "Smiley" symbol in the Library to add the rest of its features like you did in the first exercise (every part on its own layer), matching my Timeline in the graphic above. Go ahead and make three new layers. Making new layers is as simple as clicking the little page icon on the Timeline. Double click the layer names to rename them "left eye," "right eye," and "mouth." Name the first layer with the circle, "head."

To draw the mouth, here's a quick trick. Select the Oval tool, with no fill selected (diagonal red slash) and a black line. Draw an oval and then click away from it to deselect it. (Remember to turn off Object Drawing in Flash 8 and CS3 as you did in Exercise One.) Then use the Selection tool (black arrow) to drag-select the top half of the oval. Lock the head layer, so you don't accidentally delete part of it. To do this, click the dot below the lock icon next to the layer name on the Timeline. Click again to unlock.

Once you've got the top half of the oval shape selected, hit the Delete key to remove it, and voila, a smile! (You can use the Free Transform tool or other transform tools to edit this shape to get it the way you like it.)

After you've done this, lock the "mouth" layer, and select the Oval tool to draw the eyes (you can use whatever line and fill you wish). Here, I'll show you another way to take advantage of symbols...

Normally, you would draw the eyes as two separate shapes, and since eyes are normally symmetrical, you'd have to work to get the two shapes to look identical.

However, with symbols, you just need to draw one eye and turn it into another movie clip by hitting F8 (don't forget to name the symbol "eye" when you create it). Then, select the eye instance onstage, and hit Ctrl+C to copy it, select the "right eye" layer, and hit Ctrl+V to paste it on to the right eye layer. (Copy and Past are also found in the Edit menu.) You could drag an instance of the eye from the Library, but copy and pasting is a much faster way to create instances, so practice it!

Notice one of Flash's key features here—inside the "Smiley" symbol, you've placed instances of the eye symbol. These are called nested movie clips. Double-click on an eye instance inside the Smiley movie clip and notice the wayfinding line—you're now inside two movie clips, and are two levels away from the main Timeline. This is going to play a big role in your future, so keep it in mind!

The wayfinding info shows the eye is a nested movie clip.

Once you've done this, your Smiley is done. You've completed an entire movie clip, with multiple layers and nested movie clips. Much more than just a graphic, your smiley MC can be used to create multiple instances onstage with no memory penalty. You have many additional options for making changes to the individual instances, or you can make a global change to affect the DNA of all the instances simultaneously—that's the power of Movie Clips!

Duplicating and Reusing Symbols

You want to get in the habit of duplicating your symbols where you can so that you greatly reduce the overall file size of your Flash documents. So let's take Mr. Smiley on a trip to the country and take our newfound knowledge of creating and duplicating symbols for a test drive.

Mr. Smiley against a pastoral backdrop. This scene is created using many duplicate symbols.

In the course download area you fill find a Mr. Smiley (smileyscene.fla) complete with torso and chapeau. You'll also find the beginnings of a scene: a hill, cloud, flower, plane, and rainbow.

What you'll want to do is take these symbols and duplicate and resize them so that they create a complete scene like the one shown above. So, try it out right now...

First create a new layer (Insert > Timeline > Layer) and name it "Hills." Cut (Ctrl+X) and paste in place (Shift+Ctrl+V) the hill symbol into that layer and continue to paste duplicates of it into that layer as well. In the above example there are three hill symbols.

Now you'll want to add visual variation to the hills so they don't all look the same.

Here is the hill symbol duplicated three times with the tint and scale modifications. You'll notice here that the hill layers are currently above the others—to get the hills to the back, drag your layer names into the order you want.

You can scale the hills to different heights and widths so that there is some visual difference. Or you can change the tint of each slightly. For a sense of perspective, you may want the hills in the foreground to be a lighter green and the hills in the background to be darker. Click on each hill symbol and in the Properties panel go to Color and choose Tint, then give it a percentage of green (or whatever color you like) until you have a variation on color.

Finally, you can horizontally flip the hill symbols so that they reflect each other. Do this by selecting a hill and going to Modify > Transform > Flip Horizontal. In the example above, hill symbol 2 has been flipped horizontal so that it faces the other two hills.

Next you'll want to take a similar approach with the clouds and flowers. Cut and paste each original symbol into its own layer. Create duplicates and then modify the duplicates using Scale, Tint, and Flip Horizontal (or Flip Vertical in the instance of the clouds).

Once you are done adjusting your symbols, take the rainbow and put it on its own layer below the cloud layer. And take the plane symbol and put it on its own layer as well. Later on in the course you may want to try and animate your plane so that it goes across the sky—the sky is the limit!

Here is the final movie with layers for each aspect of the scene.

In this lesson, you've received an introduction to one of Flash's key elements, and the most used symbols, which are movie clips. In the following exercise, you will put the power of symbols to work by building a cityscape that uses movie clips as reusable building blocks. It's something for you to keep in mind for the future: Symbols, especially movie clips, are the "building blocks" of Flash design!

Exercise Create a Flash cityscape for animation, one house and window at a time, using symbols. Discussion What examples of symbol usage can you find at your favorite Flash sites? Share your thoughts and opinions with other students at the Discussion Board.