Home arrow Flash arrow Page 5 - Organizing Frames and Layers

Organizing Frames and Layers

If you've ever wanted to learn how to do Flash animation editing, you've come to the right place. This two-part series offers you a crash course. It 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: 5 stars5 stars5 stars5 stars5 stars / 9
August 28, 2008
  1. · Organizing Frames and Layers
  2. · Working with Frames
  3. · Moving Frames (Keyframes)
  4. · Editing Multiple Frames
  5. · Adding Content to Multiple Layers

print this article

Organizing Frames and Layers - Adding Content to Multiple Layers
(Page 5 of 5 )


Figure 4-6.  If you need to differentiate between the content in the selected frame and the content in the other frames, click Edit Multiple Frames and then click Onion Skin Outlines. All the non-selected frames appear in outline form, as shown here. (Clicking Onion Skin shows the content of non-selected frames in semi-transparent form). With onion skinning turned on, you can see multiple frames, but you can edit only the content of the selected frame. Click Edit Multiple Frames to return to multiple-frame editing mode.

A layer is nothing more than a named sequence of frames. So you won’t be surprised to learn that, after you create a couple of layers as described in Chapter 3, you need to fill up each layer’s frames with content. This section shows you how.

When you’re working with a single layer, adding content to frames is easy because you don’t have to worry about which layer you’re working with: You simply click a keyframe and use Flash’s drawing and painting tools to create an image on the Stage.

But when you’re working with multiple layers—for example, when you’re creating a composite drawing by adding a background layer, a foreground layer, and a separate layer for your sound clips—you may find adding content a bit trickier because you have to be aware of the layer to which you’re adding your content. Fortunately, as you see in the steps below, the Timeline’s Show/Hide icon helps you keep track of which content you’ve placed on which layers.

Here’s how to add content to multiple layers:

  1. Open the file multiple_layers.fla.

    You can find this file (and all the other example files for this book) on the “Missing CD” page at www.missingmanuals.com/cds
  2. Click the first keyframe in Layer 1.

    Flash highlights the selected frame, as well as the layer name. You also see a little pencil icon that lets you know this frame is now ready for editing. 
  3. Use Flash’s drawing and painting tools to draw a fence on the Stage.

    Your fence doesn’t have to be fancy; a quick “wooden” fence, like the one in Figure 4-7, is fine. 

    Figure 4-7.  You can tell at a glance which layer is active (editable) by the pencil icon next to the layer’s name. Here, Layer 1 is active.

  4. Hide Layer 1 by clicking the Show/Hide icon next to Layer 1.

    The content on the Stage temporarily disappears. Flash replaces the Show/Hide icon with an X and draws a slash through the pencil icon next to Layer 1 to let you know this layer is no longer editable.

    Note: Technically, you don’t have to hide the contents of one layer while you’re working with another; in fact, in some cases, you want to see the contents of both layers on the Stage at the same time (page 124). But for this example, hiding is the best way to go. 

  5. Click the first keyframe in Layer 2.

    Flash highlights the selected frame, as well as the layer name (Layer 2). Now the pencil icon is next to Layer 2. 
  6. Use Flash’s drawing and painting tools to draw a few flowers on the Stage.

    Your workspace should look like the one in Figure4-8. 

    Figure 4-8.  Sometimes you want to see the frame contents of two or more layers at the
    same time, like when you’re trying to line up
    objects in multiple layers. But sometimes seeing all those different objects on the same Stage—some of which you can edit and some of which you can’t, since Flash only lets you edit one layer at a time—is just plain confusing. Here, the fence in the first frame of Layer 1 is hidden (you can tell by the big X in the Show/Hide column) so that you can focus on the contents of Layer 2 (the

  7. Hide Layer 2 by clicking the Show/Hide icon next to Layer 2.

    The content on the Stage temporarily disappears. Flash replaces the Show/Hide icon with an X and draws a slash through the pencil icon next to Layer 2 to let you know that this layer is no longer editable. 
  8. Repeat steps 4–6 for Layers 3 and 4, adding some gray clouds to Layer 3 (Figure4-9) and some flying birds to Layer 4 (Figure4-10). 

    Figure 4-9. Creating separate layers for different graphic elements gives you more control over how each element appears in your finished animation.

    Figure 4-10.  In this example, the images are static, but you can place everything from motion and shape tweens to movie clips, backgrounds, actions, and sounds on their own layers. Hiding layers affects only what you see on the Stage; when you select Control -> Test Movie to test your
    animation, Flash displays all layers, whether or not
    you’ve checked them as Hidden.

  9. To see the content for all four layers, click to remove the Show/Hide X icon next to Layer 3, Layer 2, and Layer 1, as shown in Figure4-11.

    Flash displays the content for all four layers on the same Stage.

    Figure 4-11.  Here’s what the composite drawing for Frame 1 looks like: the fence, the flowers, the cloud, and the birds, all together on one Stage. Notice the display order: The flowers (Layer 2) appear in front of the fence (Layer 1), and the birds (Layer 4) in front of the cloud (Layer 3). Flash automatically displays the layer at the bottom of the list first (Layer 1), followed by the next layer up (Layer 2), followed by the next layer (Layer 3), and so on. But you can change this stacking order, as you see on page 130.



Editing Multiple Frames with Find and Replace

Another way to edit the content of multiple frames is to use Flash's "Find and Replace" function. Similar to the find-and-replace you've undoubtedly used in word processing programs, this function lets you search every frame of your animation for a specific bit of text (or even a certain color or bitmap file) and either replace the occurrences yourself, or tell Flash to replace them for you using the text (or color or bitmap file) you tell it to use.

To use this function, select Edit -> Find and Replace. Then, in the "Find and Replace" window that appears, head to the For drop-down menu and select the item you want to find. Your choices include Text, Font, Color, Symbol, Sound, Video, and Bitmap.

To change the occurrences yourself, click Find Next or Find All (and then make your changes on the Stage). To tell Flash to change the occurrences, add a Replace With option (for example, the color or text you want to insert) and then click Replace or Replace All.

Please check back next week for the conclusion to this article.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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