| Now that you've worked with the document Timeline a little, you should learn more about how to use layers. As you've seen, layers are in the Timeline and can be stacked on top of one another. You can create new layers by using the Insert Layer button in the Timeline or by using Insert > Timeline > Layer. Layers are really an organizational tool for the various assets you will use in any document you produce. In Flash, layers are used to do everything to create the illusion of depth and perspective to storing sounds and ActionScript in keyframes. It is considered a best practice to organize like content into aptly named layers; all your static text would go into a layer named something like Static Text, as opposed to Layer 15, which doesn't mean anything. This brings you to your next best practice: Layers should be named descriptive of their content wherever possible.  Note Layer names don't mean anything to Flash in the published version of the file, apart from defining a stacking order. Layer names are for human types.
One of the interesting things about Flash is that layers can have special properties. We have normal layers, which we use for general display of content; guide layers, which you would use for tracing (among other things); motion guide layers, which cause an animation to follow a path; and mask layers, which can be used to do very cool things like transitions. Guide layers don't publish with the SWF file, and motion guides are invisible when published. What's more, all these layers can be organized into layer folders to conserve screen space in the Layers pane. In the next exercise, you will learn how to add and name new layers and change their properties. You will also learn how to organize layers into layer folders. You should still be using bookstore2.fla for this exercise. 1. | If the Timeline is not already open, select Window > Timeline from the main menu or click the Timeline button in the upper-right corner of the document window.
| 2. | Rename Layer 1 by double-clicking the layer's name and typing in background.
After you double-click the layer name, the name becomes editable and you can type in a new name for the layer. Press Enter after you finish typing background as the new name for Layer 1.
Tip You can also double-click the layer's type icon, which opens up the Layer Properties dialog box, in which you not only change the name but also what kind of layer it is. The Layer Type icon is the little thumbnail immediately to the left of the layer name. | 3. | Add a new layer by clicking the Insert Layer button and rename the layer labels.
When you add a new layer, Flash automatically names the layer something like Layer 2. The number is indicative only of how many layers have thus far been created in the document; it has no meaning otherwise. It's a good idea to rename the layer right away.
Double-click the layer name and rename it labels. This layer is now active because you selected it in the Layers pane. Anything created or dragged on to the Stage is placed in the active layer. When you select a layer with content in the Layers pane, all the content in the layer is likewise selected.
 The active layer has a small pencil icon next to its name. Click the background layer now. If anything is created or dragged onto the Stage, it is placed on the active layer. Any edits you make to a layer are made to the active layer.
| 4. | Add a frame label to the new labels layer.
Frame labels are used to name a particular frame number so it can be referred to with ActionScript. There are a number of advantages to specifying frame labels over frame numbers in ActionScript, because they can be moved around in the Timeline.
First, only keyframes can be labeled, so anywhere you need to add a frame label, you must have a keyframe. To label the keyframe, select it in the Timeline. In the upper-left corner of the Property inspector is a field with dimmed text in it that says <Frame Label>. Enter home into that field and hit Enter.
 Note There are three frame label types: name (which you just created), comment (which is used just to store information about the frame), and anchor. As of this writing, anchor works only with Internet Explorer and is implemented so that users can bookmark these frames and click the Back and Forward buttons on their browser to navigate through your Flash SWF file. | 5. | Lock the label layer by clicking the Lock Layer button.
Click the dot that is under the lock layer icon, and a small icon of a lock replaces it. Clicking the dot locks the label layer so you cannot add anything to the Stage on that layer. Clicking the button again will unlock it.
Tip If you Right-click a layer, you can select Lock Others from the context menu, so that every layer except the one you are actively editing is locked. Locking layers is very useful when you want to control your selections and avoid accidentally placing elements on the Stage in the wrong layer (which can break an animation). You can also change the visibility of a layer by using the small dot under the Show/Hide layer icon that looks like an eye. When a layer is hidden, it cannot be edited, and an X replaces the dot in the Layers pane.
| 6. | Create a layer folder by clicking the New Layer Folder button.
Folders help you organize layers into related content. Select the background layer and then click the New Layer Folder button, which is the third button from the left in the lower-left corner of the Layers pane. A layer folder, called Folder 1 by default, is created above the background layer. Double-click the layer folder name and change it to graphics.
The folder doesn't have any contents. Drag the background layer into the layer folder; it indents to indicate that it is now in the folder, and the folder itself can be expanded or collapsed. Click the arrow to the left of the layer folder name to expand and collapse the layer folder.
 | 7. | Create a new layer and then create a shape on the Stage using the Rectangle tool.
Select the background layer; then click the New Layer icon to create a new layer above it. Name the new layer temp.
We haven't covered drawing yet; we'll do that in Lesson 2. For now, verify that the Tools panel is open. If not, select Window > Tools to open it. Select the Rectangle tool from the Tools panel and draw a rectangle of any size or shape in the new layer. To draw a rectangle, click and drag the cursor diagonally anywhere on the Stage with the tool selected. While you're dragging, you see an outline of what the rectangle will look like when it's created. When you have a shape that you like, release the mouse button to create the rectangle.
 | 8. | Create an oval shape in the background layer.
Highlight the background layer, select the Oval tool, and click and drag diagonally across the Stage to draw the oval. Notice that the rectangle is layered on top of the oval because the oval is in a lower layer.
 | 9. | Change the order in which the background and temp layers are stacked.
To change layer order, simply click and drag layers up or down in the Layers pane. To change the order of the background and temp layers, click the temp layer and drag it below the background layer. When you see a thick line underneath the background layer, you can let go of the mouse because the temp layer is now in position.
Notice now that the stacking order of the rectangle and the oval is reversed. This demonstrates layer stacking order and how layers can be used to spatially organize content. Because you won't actually be using these graphics throughout the project, delete them.
To delete the graphic in the background layer, select Frame 1 of the background layer; this selects all the background layer's contents. Press Backspace or Delete to remove the graphic.
| 10. | Delete the temp layer.
To delete a layer, select it first in the Layers pane; then click the trash can icon in the pane's lower-right corner.
Highlight the temp layer; then click the trash can icon. This removes all contents of the layer, as well as the layer itself.
Tip You can also Right- or Control-click the layer name and select Delete Layer from the context menu. | 11. | Save your changes.
|
|
