Flash
  Home arrow Flash arrow Page 2 - Organizing Frames and Layers for Flash Ani...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
FLASH

Organizing Frames and Layers for Flash Animation
By: O'Reilly Media
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 3
    2008-09-04

    Table of Contents:
  • Organizing Frames and Layers for Flash Animation
  • Working with Layers
  • Copy and Paste a Layer
  • Delete a Layer
  • Outline View
  • Organizing Your Layers with Layer Folders

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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.

    UP TO SPEED

    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. 

    UP TO SPEED

    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.

    More Flash Articles
    More By O'Reilly Media


       · This article is an excerpt from the book "Flash CS3: The Missing Manual," published...
     

    Buy this book now. 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). Check it out today at your favorite bookstore. Buy this book now.

    FLASH ARTICLES

    - 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
    - Organizing Frames and Layers for Flash Anima...
    - Organizing Frames and Layers
    - Using XML and ActionScript with Flex Applica...
    - Interfaces and Events with ActionScript and ...
    - Manipulating Data with ActionScript in Flex ...
    - ActionScript Syntax for Flex Applications







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 2 Hosted by Hostway
    Stay green...Green IT