Wednesday, November 9, 2011

Working with layers - Flash CS5 Beginners Tutorial

The timeline, pictured below, allows you to separate your artwork into multiple layers. In the image below, you'll see that this timeline has 3 layers, each with a generic label - Layer 1, Layer 2, and Layer 3. In this tutorial, we'll learn what layers are all about.

What are layers?
Think of layers as separate sheets of transparent paper that you can draw on. Let's take a look at the images below and imagine that each image is a separate layer that has been drawn on.

The way layers work is that they are placed on top of each other to create the illusion that everything was drawn on one sheet. But in reality, they're all on separate layers. The image below shows how the layers above will look like if they were all stacked together.

It looks as if it's just one image, but in reality, we will be able to work on each layer separately. This is the benefit of working with multiple layers. Flash has features that allow you to lock and hide other layers so that you can focus only on the layers that you want to edit. Knowing how to work with layers will really help keep your Flash project more organized.

Adding layers

By default, your timeline will already have one layer when you create a new Flash document. To add another layer, click on the new layer button at the bottom of the timeline.

Each time you click on the new layer button, one layer is added to the timeline.

In the image below, there are 3 layers.

Deleting layers

To delete a layer, you must first click on it in order to select it. In the image below, I clicked on layer 2 in order to select it.

Once the layer is selected, click on the trash can at the bottom of the timeline in order to delete the selected layer.

Once you delete a layer, all of its contents are delete along with it.

Selecting a layer to draw on

To draw on a layer, you must make sure that it is selected by clicking on it. In the image below, layer 3 is selected and is therefore the active layer. You'll know that the layer is active because it's highlighted.

Once the layer is selected, you can then proceed to draw on the stage. Anything you draw will be placed in the active layer. In the image below, the circle was drawn while layer 3 was the active layer. So this means that the circle is on layer 3.

If you wish to draw on layer 2, then make sure that you click on layer 2 in order to make it the active layer. Then proceed to draw on the stage once the desired layer has been selected.

NOTE: Always be mindful of which layer is currently active. It's quite common for Flash users to make the mistake of drawing on the wrong layer, so always check the timeline to see which layer is highlighted.

Renaming layers

To rename a layer, position the mouse pointer on top of the layer name, and then double-click it in order to make it editable.

Once the text is editable, type in the new name and hit the enter (PC) or return (Mac) key.

It's a good idea to make the layer name descriptive of the layer's contents. If the layer contains a circle shape, then you might want to consider naming it circle as well. Using descriptive names will make layers easier to find and manage. Imagine having 100 layers named layer 1, layer 2, layer 3, all the way up to layer 100! That's going to make it difficult to find which objects are on which layers.

Reordering Layers

In the image below, there are two shapes on the stage - a circle and a square. The circle is at the back, and the square is in front of it.

Each shape is on its own layer. The square shape was drawn on the layer named square, while the circle shape was drawn on the layer named circle.

Here, you see that the circle layer is below the square layer. That is why the circle appears behind the square on the stage - the contents of the lower layer always appear behind the contents of the higher layer.

To move a layer, simply click and drag it. Drag up to move it higher or drag down to move it lower.

Once you start dragging, you'll see a black bar appear on top of the selected layer. In the image below, I clicked on the circle layer and began dragging upward.

If you keep dragging higher or lower, then that black bar moves higher or lower as well. In the image below, I continued to drag upward so that the black bar is now on top of the square layer.

So when I release the mouse, the circle layer will now be on top of the square layer. And on the stage, the circle will now appear in front of the square.

Hiding layers

If you want to hide a layer and all of its contents, look for the eye icon and click on the dot that corresponds to the layer that you want to hide.

Once you click on the dot, it's going to be replaced with an X.

This means that the contents of that layer are no longer visible. To make them visible again, click on the X to bring back the layer's visibility. The X will turn back into a dot.

To hide all your layers at once, click on the eye icon itself. Then click on the eye again in order to make all the layers visible again.

TIP: If you hold down the alt (PC) or option (Mac) key while clicking on a dot, it's going to make all the other layers invisible instead, so that only the layer that you clicked on will be visible.

Locking layers

Beside the eye icon is a lock icon.

Clicking on the dots under this column will allow you to lock the layers. When a layer is locked, you won't be able to edit its contents. They will still be visible but they will be protected from any form of editing. You won't even be able to select the contents of a locked layer.

Working with multiple layers may take a bit of getting used to, but the benefits of working with layers will help keep your Flash project more organized.
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