Monday, November 14, 2011

PART 2 - Going inside a symbol's timeline - Introduction to Flash Symbols

Whenever you create a symbol, it's automatically going to have it's own timeline. Inside a symbol's timeline, you can also add layers and frames the same way you would on the main timeline.

Let's go ahead and take a look at the Car symbol's timeline.

Step 1

Before we access the Car symbol's timeline, let's first take a look at the edit bar found at the top of the document window.


The edit bar tells you where you are in your Flash document. Right now, the edit bar says Scene 1, which means that we are on the main timeline.

Step 2

To access a symbol's timeline, we'll need to edit it.

Go to the library, right-click on the Car symbol then choose Edit.


After you click on Edit, take a look at the edit bar again. You should now see that it says Scene 1 > Car.


This means that we are now inside the Car symbol's timeline. So whatever changes that we make here will apply to the Car symbol. If we draw something on the stage, it will become a part of the Car symbol. If we add layers to the timeline, then those layers will belong to the Car symbol.

If you look at the symbol's timeline in our exercise file, you'll see that it already has a couple of layers.


When this symbol was created, the artwork was separated into different layers within the symbol's timeline. This means that the layers that you see here, they belong to the Car symbol's timeline and NOT the main timeline.

It's not a requirement to use multiple layers inside a symbol's timeline, but you do have that option if you wish to make things more organized. Managing layers inside a symbol's timeline is no different from managing layers on the main timeline. You can add, delete, rename, move, hide, and lock layers just like you would on the main timeline.

Step 3

Let's make a small change to the symbol. Using the paint bucket tool, change the color of the car's body.

First, select the paint bucket tool, and click on the fill color box to select any new color that you like.


Then position the paint bucket tool over the car's red body and click on it to apply the new color. You don't have to worry about accidentally editing the contents of the other layers, because the other layers are currently locked.

So now, you should have a new color for the car's body.

Step 4

After we've made changes to the symbol, let's now go back to the main timeline. To go back to the main timeline, click on the Scene 1 link in the edit bar.


When you go back to the main timeline, you'll notice a few things:

  1. The edit bar now says Scene 1, which confirms that we are back on the main timeline.
  2. The timeline no longer shows the layers of the Car symbol's timeline, because we are now back on the main timeline.
  3. All three instances of the Car symbol have the new color applied to them. Because we edited the Car symbol and changed the color of the car, all the instances will reflect the same changes as well. Since the symbol is the master copy of all the instances, making changes to the master copy affects all the instances that exist in the Flash document.

This is another benefit of working with symbols, if you decide to make changes to the symbol by editing it, then all the instances will reflect the changes, thus helping you save more time.


In the next part of this tutorial series, we'll take a quick look at the different types of symbols.

<< PREV: What is a symbol? - Introduction to Flash Symbols PART 1


Featured Flash Professional Training Courses

For more Flash Professional training, I recommend these excellent online training courses listed below. Click on the links to find out more information about each course. Each course details page has free videos that you can view immediately. Just click on the free video links (the blue ones) under the table of contents. And as a special promotion, you can get full access to all of the videos in all of these courses by signing up for a free 10-day trial. This trial pass will give you full access to all of the courses from lynda.com

No comments:

Post a Comment