Recipe 3.8. Managing Content with Layers

Problem

You need to manage two elements independently of one another.

Solution

Place the elements in separate layers. Manage layers with layer folders.

Discussion

Layers are a common feature of graphics software that are generally used to control the stacking order of elements as well as facilitating asset management within files. Elements stored in layers higher in the stack will block elements in layers lower in the stack when there is overlap. By storing different elements in their own descriptively named layers, you can more readily manage the artwork by deleting, hiding, outlining, locking, and otherwise working with layer content independently of other layers. Although layers are used in Flash for both of these purposes, layers have additional significance:

• Use layers to prevent overlapping Flash art from automatically cropping and blending with other art. (Another way to prevent this interaction is to group elements, as described in Recipe 3.16).

• Use layers to animate elements differently.

The second point is the more significant of the two. All the contents of a layer are tied to its keyframes and frames. Certain types of content, such as Flash's automated forms of animation, tweens, affect entire layers. If you want to animate two elements independently of one another, such as the eyes and mouth of a cartoon character, you must put these elements on different layers. In such an example, the eyes might blink every 45 frames, while the mouth is constantly animated, requiring keyframes every few frames.

Layers are a feature of .fla files and authoring in Flash. When you export a Flash movie in the .swf file format, Flash flattens all the layers to minimize file size. Thus, layers are primarily an authoring aid.

Layer maintenance is performed in the layer stack just to the left of the timeline, as well as in the small toolbar just beneath it:

• To insert a layer, click the Insert Layer button. A new layer is inserted above the active layer.

• To rename a layer, double-click its label and type a new name (exp 3pod.com). Press Enter or click elsewhere in Flash to apply the new name (exp 3pod.com). Always name (exp 3pod.com) your layers descriptively.

• To reorder layers, drag a layer by its name (exp 3pod.com), hovering in between the two layers where you want to place it, and release the mouse.

• To remove a layer and all its contents, select the layer and click the Delete Layer button.

Layers are not part of the movie's contents; remember, layers aren't even exported with the .swf file. A movie's contentsart, sounds, text, scripts, and moreare stored in layers and frames, much like clothes are stored in closets and drawers. Maintaining layers and maintaining movie contents are thus two different activities. These two activities come together inasmuch as content resides in a given keyframe of a given layer.

• To add content to a movie, select the keyframe in the layer into which you want to store the content.

• To modify existing content, select the appropriate keyframe and layer in which the content is stored, then select the element, and modify as needed. Likewise, to remove content from a movie, select the keyframe in the layer in which the content resides, and then select and remove the undesired element.

• In addition to copying and pasting individual elements in a movie, you can also copy and paste portions of the timeline, including entire layers and selections of contiguous frames elsewhere in the timeline, using Edit Copy Frames. This technique is discussed in Recipe 4.13.

In addition to the standard layers with their keyframes and regular frames discussed thus far in this chapter, Flash has a handful of specialized types of layers. These specialized layers are discussed in appropriate places in this book, but they are summarized here for quick reference:

Guide layers

Guide layers, like commented code, are for use at author time, but they are ignored when the file is output to SWF. Guide layers are discussed in Recipe 3.11.

Motion guide layers

Motion guide layers are used for animating elements along predefined paths (rather than straight lines). The path is stored in a motion guide layer, which Flash does not render, but instead uses to control the path of an animation. Motion guide layers are discussed in Recipe 4.1.

Mask layers

As their name (exp 3pod.com) suggests, mask layers are used for masks, creating an effect whereby one element controls the visibility of an underlying element. Mask layers are introduced in Recipe 6.8.

Layers are used, for one thing, to control the stacking order of overlapping elements. However, elements within a given layer also have a stacking order. In most cases, elements added more recently are stacked above elements added earlier. However, this is not universal. Vector art drawn in Flash always appears behind bitmap graphics in the same layer, regardless of the order in which they were added. There is no way to stack vector art above bitmap graphics without placing the art in a higher layer. Text, in contrast, can be stacked above bitmap graphics and art within a layer.

You can control the stacking order of elements within a layer, with the exception of vector artwork and bitmap graphics, using the commands in the Modify Arrange menu:

Bring to Front

Positions the selected element at the top of the stack within the current layer

Bring Forward

Moves the element one step closer to the top of the stack within the current layer

Send Backward

Moves the element one step closer to the bottom of the stack within the current layer

Send to Back

Sends the selected element to the bottom of the stack within the current layer

Although these options are available, it is generally better practice to avoid stacking multiple elements within layers, and instead to put elements in their own layers, especially when the elements are of different types (for example, bitmaps and vector art).