| If you're familiar with Photoshop, Fireworks, or almost any other graphics editing tool, you are already familiar with using layers as a visual tool to control stacking order. In Flash, layers provide the same visual effect. But you have already learned that graphics can be stacked if they're Drawing Objects, grouped, or turned into symbols so why do we need layers? The True Purpose of Layers In Flash, multiple layers are really multiple Timelines and that's their value. The images contained in layers are stacked above or below other layers, but their primary purpose is to provide you with separate Timelines in which you can control animations independently. You might recall from Hour 8, "Using Motion Tweens to Animate," that the rule for motion tweens is that you can animate only one thing per layer (and that thing has to be an instance of a symbol). Suppose you want two circles, with one appearing to race past the other. It's simple; just use two layers. In the following task you'll try something simple to get started with layers. Try It Yourself: Use Two Layers to Animate Two Circles In this task you'll make two circles move across the screen. One will appear to move faster than the other. 1. | In a new file, draw a circle, select it, and convert it to a symbol (by pressing F8). Name it Circle, leave the behavior set to the default Movie Clip, and click OK.
| 2. | With the instance of Circle on the Stage, do a motion tween. To keep things from getting too complicated, name this layer Fast (indicating that the circle in this layer will move fast). To name the layer, click once in the Timeline so that it has the focus and then double-click on just the name of the layer (initially Layer 1) and type a new name.
By the Way: Focus Indicating Active Focus applies to all kinds of computer buttons and fields generally. For example, when you fill in an online form, only one field has focus at a time. That is, if you start typing, you'll be typing into whichever field currently has focus. When you tab through a form, the focus moves from one field to the next. In Flash, several buttons and fields also reflect focus. Even the Timeline can have focus (indicated by a subtle highlight on the name of the selected layer). When you click the stage, the timeline loses focus (indicated by the selected layer's highlight turning gray). Quite often, it might not be entirely clear which window, panel, or button has the focus, but you should be conscious of which does. |
| 3. | Because the Timeline has only one frame so far, position the instance of Circle on the left side of the Stage. Then click the cell in Frame 31 of the Fast layer. Select Insert, Timeline, Keyframe (or press F6).
| 4. | Make sure that the red current-frame marker is on Frame 31 and move the circle all the way to the right side of the Stage.
| 5. | To make a motion tween, either right-click (use Control+click on a Macintosh) on the first keyframe and select Create Motion Tween or select the first keyframe and from the Properties panel select Motion from the Tween drop-down list. (Most of this is a review of Hour 8.)
| 6. | Create a new layer by either selecting Insert, Timeline, Layer or clicking the Insert Layer button at the bottom left of the Timeline (see Figure 11.1). Name this new layer Slow, the same way you named the other layer Fast (in step 2).
Figure 11.1. Using the Insert Layer button at the bottom left of the Timeline is a quick way to insert a new layer (just like selecting Insert, Timeline, Layer). 
From this point forward, you need to be conscious of the layer in which you are currently editing (that is, you need to know where you are). You can only be "in" one layer at a time, which is indicated by the pencil icon in the layer (see Figure 11.2).
Figure 11.2. The pencil icon indicates which layer is currently active (in this case, Slow). 
| 7. | Next you'll copy an instance of Circle from the Fast layer and paste it in the Slow layer. To do this click an instance of Circle (to select it) and copy it (by pressing Ctrl+C). By clicking an object on the Stage from the Fast layer, you cause that layer to become active. Before you paste, make sure you make Slow the active layer by clicking the word Slow and then pasting. Position the copy of Circle you just pasted on the left side of the Stage, but do not cover the other one.
| 8. | To keep things straight, tint the instance of Circle in the Slow layer. Select it and in the Properties panel, select Tint from the Color Styles drop-down list and then select a color that is different from the color of the other circle.
| 9. | In Frame 31 of the Slow layer, select Insert, Keyframe. Move the instance of Circle in Frame 31 over to the right side of the Stage (but not as far to the right as you moved the circle in the Fast layer).
| 10. | Set a motion tween for the first frame of the Slow layer. Test the movie, and you see two circles moving across the screen two things animating at once!
| 11. | Save this file because you'll use it in the next task.
|
The discussion so far this hour shouldn't suggest that layers are to be avoided. Just the opposite: You should feel free to use as many layers as you need, even if only for visual layering. Although a Flash file with hundreds of layers might be harder to edit, all those layers are combined upon export (not unlike what happens with Photoshop's Flatten Image command). Although layers can be useful for organization and stacking purposes, they're absolutely necessary for animation effects. Layer Properties That Help You Edit You've already seen how the pencil icon indicates which layer is currently being edited. Other icons in the Timeline indicate layer properties that can be modified. Check out Figure 11.3 for a quick overview of these properties, and then we'll discuss each in detail. (By the way, most of the buttons and features listed have ToolTips.) Figure 11.3. There are several layer types and properties. 
Figure 11.3 shows almost every variation of layer property. Here's a quick introduction to each one: Layer Name This property lets you give any layer any name you like. You'll stay organized better if you take advantage of this feature and name layers logically. Show/Hide Layer This property allows you to hide the contents of any individual layer temporarily by clicking the dot beneath the eye. If you click the Eye button on top, you hide or show all layers. Remember that this affects only what is seen while editing because exporting a .swf sets all the layers to Show. Compare this to Guide layers (below) which don't appear in your .swf. Lock/Unlock Layer This property lets you individually lock or unlock layers selectively (or all at once). We'll revisit the previous task and you'll see how useful locking layers can be. Show Layer as Outlines This property lets you view the contents of a layer as outlines, almost like making the layer contents invisible but not as extreme. Similarly to Show/Hide, this setting affects only how the layer appears to you (the author). The outline color can be changed through the Layer Properties dialog box (available if you double-click the Layer Outlines button or the Layer Type icon, such as the Page Curl on the far left). In addition, if you use Edit, Preferences to open the Preferences dialog box, select the General tab, and select the Highlight color setting Use Layer Color, then the clips selected in this layer will highlight in the same color. Normal Layer This layer type is the plain page icon with a curl in the bottom-right corner. This is the default type of layer. Guide Layer (regular) This layer type is a special layer into which you can draw anything you want (usually shapes, to help align graphics or notes to other team members). Everything contained in a Guide layer is excluded from export when you create a .swf, so it won't show up in your final file, nor will it add to file size Motion Guide Layer This layer type acts like a Regular Guide (they're both guides, after all); however, a Motion Guide layer contains a line to which you associate a motion tween, which is in a Guided layer (see below). This is how you make a motion tween follow a path. Guided Layers This layer type is available only if the adjacent layer above it is set to Motion Guide. In the Guided layer, you can create a motion tween that follows the path drawn in the Motion Guide layer. Mask Layers This layer type lets you place any shape or Movie Clip symbol that will define the visible (and nonvisible) portion of the layer below it, which is set to Masked. Just like a mask you put on your face, in a Mask layer you draw where you want holes in the mask. Masked Layers This layer type is available only when the layer directly above is set to Mask. The contents of a Masked layer will be invisible except in areas where objects are placed in the Mask layer. You won't see this effect until you test the movie or lock both the Mask and Masked layers. Folders and Layer Folders These settings are very different from the other layer properties because you can't have any content in them. However, after you make a layer folder, you can nest other layers (and even other layer folders) inside it. And, when you make a Folder layer visible or invisible, all the contained layers follow suit.
Some of the icons indicating layer properties (in Figure 11.3) are easy to access, whereas others involve several steps. We'll look at Guide and Mask layer types later this hour. In the following task, you'll begin to work with the easy ones: Show/Hide, Lock/Unlock, Show as Outlines, and Layer Folders. Try It Yourself: Experiment with Hiding and Outlining Layers In this task you'll explore the visual layer properties: 1. | Open the file you created in the previous task and scrub a little to recall how it plays.
| 2. | How do you know which circle is in which layer? If the circles intersect the same area, you'll see one in front of the other. Move the current-frame marker to Frame 1. By just looking, you can't really tell which one is which. You could read the layer name that you wrote but Fast and Slow aren't very clear and, besides, you could have made a mistake. The fact that the layers contain instances of the same symbol makes it even more difficult to tell. To figure it out, temporarily change the Show/Hide option for one layer at a time. Try clicking the eye at the top of the Timeline. Notice that this hides every layer. Click the eye again, and the layers will all be shown again. To hide just one layer, click the dot under the eye in the layer of your choice. Click the dot in the Fast layer. Not only do you see a red _ over the dot (when it's hidden), but everything on the Stage from that layer is hidden (just temporarily). By process of elimination, you can figure out which layer is which by making one invisible.
| 3. | Make all the layers visible again, and you can determine which circle is which another way by using outlines. Click the square button on the top of the Timeline (see Figure 11.4) to Show All Layers as Outlines. This should make the contents on the Stage appear in outline form. Hopefully, they appear in different colors so that you can tell them apart.
Figure 11.4. The contents of layers can be viewed in outline form. 
| 4. | If both layers are showing up in the same color, just double-click the Show Layer as Outlines box for one layer. If you click the button once, it toggles between the Outline and Normal views. When you double-click, you're taken to the Layer Properties dialog box, which is similar to that shown in Figure 11.5. Alternatively, you can single-click a layer (to make it active) and then select Modify, Layer. We'll cover this dialog box more later, but for now, select a different color from the Outline Color swatch and then click OK. The outlines in that layer should have a different color now.
Figure 11.5. All layer settings are shown in the Layer Properties dialog box (which is accessible by selecting Modify, Layer or by double-clicking the Page Curl icon or the Show Outlines icon). 
|
Managing Layers On the surface, layer folders are a pretty straightforward feature. Remember that you can nest layers inside of folders. Although layer folders probably don't warrant an entire task, let me point out a couple hidden benefits. Besides just collapsing the Timeline, a folder can be hidden just like a layer can. When you hide or show a layer folder, you automatically hide or show all the nested layers. If hiding layers is a good feature, hiding layer folders is a great one. You can also lock or unlock layer folders. In practice these two subtle features may have greater value than layer folders themselves. Another way to manage a ton of layers is to select the Short option from the Timeline Properties menu as shown in Figure 11.6. This will shorten your timeline by about 30%. Figure 11.6. The timeline's short option squeezes more layers into a smaller space. 
|
