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.

The fill color vs the stroke color - Flash CS5 Beginners Tutorial

In the toolbar, you'll find two color boxes - one for the stroke color and one for the fill color:

The stroke color is for the pen, pencil, line and ink bottle tools:

So if you want to choose a color for any of the tools pictured above, make sure that you're choosing one from the stroke color box, and NOT the fill color box.

The fill color, on the other hand, is for the brush and paint bucket tools:

And if you are using any of the shape tools, then BOTH the fill and stroke colors can be used.

For shapes, the stroke color is for the outline of the shape, while the fill color is for the color inside the shape. In the image below, we see a circle with a black stroke and a red fill color.

To choose a fill or a stroke color, click on the fill or stroke color box to bring up the color swatches.

Then click on the desired color in order to select it.

Once you have your color selected, you can then choose the desired tool and start drawing.

To choose NO fill or stroke color, click on the fill or stroke color box to bring up the color swatches. And then click on the white square with a diagonal line that can be found at the top-right of the swatches.

PART 3 - Saving your Flash document and knowing the difference between the FLA and SWF files - Getting started with Flash CS5

• PART 1: Creating a new Flash document and choosing a workspace layout
• PART 2: The document window, the toolbar, and drawing on the stage with the brush tool
• PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files

Now that we have some artwork on the stage, let's go ahead and save our work. And in the process, we'll also learn about the two main file types associated with a Flash project.

Step 1

Let's first create a folder in which to save our document. Name this folder my-flash-project-[insert-your-name-here]. You can place this folder anywhere in your hard drive.

Step 2

Let's now save our Flash document.

To save your Flash document, go to File > Save As.

A dialog box for saving will come up. Let's name the file my-flash-document-[insert-your-name-here].fla. For format, make sure it says Flash CS5 Document. And then for the location in which to save the document, make sure you've selected the folder that you created in step 1. Then click on Save.

Step 3

After you've saved your document, open up your my-flash-project folder and take a look at the file you just saved.

This is your Flash document, commonly referred to as the FLA file (pronounced ef-el-ey) because it uses the .fla extension name. This is your main document. From this main document, you can export your Flash project into a variety of different formats. Let's take a look at one of those formats in the next steps.

Step 4

Go back to the Flash workspace where you have your Flash document open.

From the main menu, choose Control > Test Movie > in Flash Professional.

What we just did here is we previewed the movie. So you should see a preview window of your Flash project pop up.

The keyboard shortcut for testing a movie is ctrl + enter (PC) or cmd + return (Mac).

Step 5

Whenever you test a movie in Flash, you're actually generating a new file from that preview. Let's go back to the my-flash-project folder and open it up to view its contents. You should now see a second file inside the folder.

This new file that you see here is commonly referred to as a SWF file (pronounced swif). The SWF file is the compiled version of the FLA file. This is the format that can be embedded on a webpage. The SWF file is automatically generated whenever you test your Flash movie. If you make changes to the FLA file and then test the movie again, then the existing SWF file automatically gets updated with the new changes.

So these are the two main file formats associated with each Flash project that you create. The FLA file is your main file, which you can edit using the Flash authoring application. And the SWF file is the compiled version of your FLA file, which you can embed on a web page.

And that concludes this short tutorial series on Getting started with Flash CS5.

<< PREV: The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5 - PART 2

PART 2 - The document window, the toolbar, and drawing on the stage with the brush tool - Getting started with Flash CS5

• PART 1: Creating a new Flash document and choosing a workspace layout
• PART 2: The document window, the toolbar, and drawing on the stage with the brush tool
• PART 3: Saving your Flash document and knowing the difference between the FLA and SWF files

So now that we have a new Flash document, let's take a look at some of the parts of the workspace. And then after that, we'll draw some artwork on the stage.

The Document Window

First, switch to the Small Screen workspace layout by choosing Window > Workspace > Small Screen from the menu bar. And then go back to the menu bar and choose Window > Workspace > Reset 'Small Screen' to make sure that the layout is set to its default arrangement. I'm asking you to switch to this layout so that your Flash workspace will look similar to the screenshots in this tutorial.

Let's now talk about the document window. The document window shows the Flash movie that you're currently working on. It contains the stage and the pasteboard.

The stage is the white rectangular area (but you also have the option to switch to a different background color). The area surrounding the stage is called the pasteboard.

The stage is your canvas. This is where you add the visual elements for your Flash movie. It can be artwork that you draw, text that you type, or graphics that you import.

The pasteboard is just some extra space where you can draw or place elements that you don't want to be seen. You can add elements to the pasteboard and place them on the stage later on. Or perhaps you might have some artwork that you want to remove from the stage without deleting them entirely. If so, you can move it to the pasteboard for the time being and decide what to do with it later on.

You can adjust the position of the stage by clicking and dragging the document window's scrollbars. I usually like to position the stage so that it's in the center of the document window.

You can also adjust the zoom level by typing in the desired zoom value in the zoom input field.

The Toolbar

The toolbar houses the tools that you need in order to create and edit the visual elements that you put on the stage. In the Small Screen layout, the toolbar can be found in the left side of the workspace.

Each tool is represented by an icon. To select a tool, simply click on it. For most of these tools, you'll be able to know what they do just by looking at the icon. You've got the brush tool, the text tool, and the eraser tool to name a few. Here's a closer look at some of the tool icons:

You'll notice that some tool icons have a tiny triangle on the lower-right corner. Whenever you see this, it means that you can click and hold the icon, and a menu containing more tools will pop up.

In the image below, I am clicking and holding the rectangle tool to reveal the other shape tools. If I want to switch to the oval tool, then I just have to click on it. As you've probably assumed, these shape tools allow you to draw different shapes.

Drawing on the Stage

Now let's go ahead and draw some artwork on the stage using the brush tool.

Step 1 - Selecting the brush tool

Let's use the brush tool to draw a random object on the stage. To select the brush tool, go to the toolbar and click on the brush tool icon.

Or you can also press the B key on your keyboard. That's the keyboard shortcut to access the brush tool.

Step 2 - Setting the tool options

Once you have the brush tool selected, you'll see some tool options at the bottom of the toolbar.

NOTE: It's possible that you'll only see 5 icons for the brush tool options, instead of the 7 icons depicted in the screen shot above. The last 2 icons are for systems that use pen tablets.

Depending on which tool you have selected, you'll see a different set of options in this area. Since we have the brush tool selected right now, then what we see are the brush tool options.

We've got the brush mode, which you can see in the image below. Click and hold the brush mode icon to see the different brush modes. We won't go through the different modes in this lesson so go ahead and just choose Paint Normal for now.

You can also choose from a set of brush sizes. Click and hold the brush size icon to bring up a menu of the different brush size options. Simply click on the desired brush size in order to select it.

You can also choose from a set of brush shapes.

I'm going to use a small, round brush. You can choose whatever you like.

Step 3 - Choosing the color of your brush

To choose the color for your brush tool, look for the fill color box, which can also be found in the toolbar.

Click on the color box to bring up the color swatches.

At the top-right of the swatches, you'll see the alpha level controls for the color.

This controls the visibility of the color you choose. You can click on the number and type in a value anywhere from 0 to 100. A value of 100 means that the color is fully visible. As you bring the alpha level down, the color becomes less and less visible until it becomes completely invisible with a value of 0. You can change the value by clicking on the number and typing in a new one. For now, make sure it's at 100%.

To choose a color, simply hover over the desired color and click on it.

Step 4 - Drawing the object

Now that you've selected a color, go ahead and draw a random object on the stage. To draw with the brush tool, simply click and drag on the stage to make your brush strokes. I'm going to draw a car.

After you've drawn your object, let's stop adding content for now. We'll cover the other drawing features in other tutorials. For now, let's move on to part 3 of the Getting started with Flash CS5 series.

<< PREV: Creating a new Flash document and choosing a workspace layout - Getting started with Flash CS5 - PART 1

Saving your Flash document and knowing the difference between the FLA and SWF files - Getting started with Flash CS5 - PART 3: NEXT >>