Home arrow Flash arrow Page 2 - Organizing Frames and Layers for Flash Animation

Organizing Frames and Layers for Flash Animation

In this second part of a two-part series on Flash animation editing, you'll learn how to work with layers. This article is excerpted from chapter four of the book Flash CS3: The Missing Manual, written by E.A. Vander Veer (O'Reilly, 2007; ISBN: 0596510446). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
September 04, 2008
  1. · Organizing Frames and Layers for Flash Animation
  2. · Working with Layers
  3. · Copy and Paste a Layer
  4. · Delete a Layer
  5. · Outline View
  6. · Organizing Your Layers with Layer Folders

print this article

Organizing Frames and Layers for Flash Animation - Working with Layers
(Page 2 of 6 )

The more layers you have, the more important it is to keep them organized. In this section, you see how to give your layers meaningful names, so that you can remember which images, sounds, or actions you placed in which layers. You also see how to order your layer so that your composite images appear just the way you want them and to copy and paste your layers (to cut down on the work you have to do to create similar layered effects).

Renaming Layers

The names that Flash gives the layers you create—Layer 1, Layer 2, Layer 3, and so on—aren’t particularly useful when you’ve created 20 layers and can’t remember which layer contains the ocean background you spent 10 hours drawing. Get into the habit of renaming your layers as soon you create them, and you’ll have an easier time locating the specific elements you need when you need them.


Why Layer?

In addition to making it much, much easier for you to change your animations, working with layers gives you the following benefits:

  • You can create multi-tweened animations. Flash lets you create only one tween (Chapter 3) per layer. So if you want to show two baseballs bonking a parked car—one ball sailing in from the right, and one from the left—you need to either draw the entire animated sequence for each ball by hand, or use two separate layers, each containing one tween.
  • You can create more realistic effects. Since you can shuffle layers, putting some layers behind others and even adjusting the transparency of some layers, you can add depth and perspective to your drawings. And because you can distribute your drawings to layers at whatever level of detail you want, you can create separate layers that give you independent control over, say, your characters’ facial expressions and arm and leg movements.
  • You can split up the work. TV and movie animators use layers (technically, they use transparent sheets of plastic called cels, but it’s the same concept) to divvy up their workload, and so can you. While you’re crafting the dog layer, one of your teammates can be working on the cloud layer, and another two can be working on the two character layers. When you’re all finished, all you need to do is copy everyone’s layers and paste them onto a single Timeline, and bingo—instant animation.
  • You can organize your animations. As you begin to create more sophisticated animations that may include not just images and animated effects, but symbols (Chapter 7), sounds (Chapter 8), and actions (Chapter 9), you quickly realize you need to organize your work. Layers help you get organized. If you get into the habit of putting all your animation’s actions into a single layer (called actions), all the sounds into a single layer (called sounds or soundtrack), all the text into a single layer (called text), and so on, you can quickly spot the element you’re looking for when it comes time to edit your animation.

This section builds on the example you created earlier in this chapter. If you haven’t had a chance to work through that section, you can download flowers.fla from this book’s “Missing CD” Web page and use it instead.

To rename a layer:

  1. Open the file flowers.fla.

    If you created your own Flash document when you worked through “Adding Content to Multiple Layers ” (page 120), you can use that document instead. 


Layer Properties

Flash gives you two different ways to change the propertie associated with your layers: for example, the name of your layer, whether you want to show the content of a layer on the Stage or hide it, whether you want to lock a layer or leave it editable, and so on.

One way is clicking the icons in the Layers window. (That’s the approach described in this chapter.) The other way is by using the Layer Properties dialog box shown in Figure 4-14.

To display the Layer Properties dialog box, click to select alayer; then do one of the following:

    • Double-click the layer icon you find just to the left of the layer name). Right-click the layer name and, from the shortcut menu, choose Properties.
    • Select Modify -> Timeline -> Layer Properties.

The Layer Properties dialog box lets you change any or all of the following layer properties in one fell swoop:

    • Name. Type a name in this text box to change the name of your layer.
    • Show. Turn on this checkbox to show the contents of this layer on the Stage; turn it off it to hide the contents of this layer.
    • Lock. Turn on this checkbox to prevent yourself (or anyone else) from editing any of the content in this layer; turn it off to make the layer editable once again.
    • Type. Click to choose one of the following layer types:

      — Normal. The type of layer described in this chapter.

      — Guide. A special type of layer that you use to position objects on a guided layer, and which doesn’t appear in the finished animation (Chapter 3).

      — Guided. A regular layer that appears below a guide layer (Chapter 3).

      — Mask. A type of layer you use to carve out “portholes” through which the content on an underlying masked layer appears (Chapter 6).

      — Masked. A regular layer that appears below a mask layer (Chapter 6).

      — Folder. Not a layer at all, but a container you can drag layers into to help you organize your animation (page 134).
    • Outline color. Click to choose the color you want Flash to use when you turn on the checkbox “View layer as outlines.”
    • View layer as outlines. Turning on this checkbox tells Flash to display the content for this layer on the Stage, but to display it as outlines (instead of the
      way it actually looks, when you run the animation). Find out more on page 133.
    • Layer height. Click the arrow next to this dropdown list to choose a display height for your layer in the Timeline: 100% (normal), 200% (twice as big), or 300% (three times as big). You may find this option useful for visually setting off one of your layers, making it easy for you to spot quickly.

After you make your changes, click OK to tell Flash to apply your changes to your layer.

Figure 4-14.  When you open the Layer Properties box you’ve got all the layer settings in one place. You can change the layer name, show, hide, or lock your layer and much more.

    1. Double-click the name Layer 4.

      Flash redisplays the layer name in an editable text box (Figure 4-15). On the Stage, you see the content for this layer (the birds) selected.

      Figure 4-15.  If you can’t remember what a particular layer contains, check the Stage: When you double-click a layer name to rename it, Flash automatically highlights the content associated with that layer.

      Note: Instead of double-clicking the layer name, you can use the Layer Properties dialog box to rename your layer. Check out the box on page 128 for details.

    2. Click inside the text box and then type birds; then click anywhere else in the workspace.

      Flash displays the new name for your layer. 
    3. Repeat steps 1 and 2 for Layers 3, 2, and 1, renaming them cloud, flowers, and fence, respectively.

      When you’re done, your renamed layers should look like Figure4-16.

Figure 4-16.  The Layers area of the Timeline isn’t particularly big, so it’s best to keep your layer names short and sweet. If you need more room, just click and drag the bar that separates the names from the frames.

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials