Chapter 4. Organizing Frames and Layers

Part 1 of this volume gets you started launching Wink, creating your own drawings, and transforming them into moving animations. Most animation work, though, takes identify later yous've got all the frames and layers in place. Similar a film director slaving away in the cutting room, equally an animator you spend nearly of your time testing, editing, and retesting your motion-picture show.

This chapter is your crash course in Flash animation editing. Here yous'll learn how to reorganize your animation horizontally (over fourth dimension) by cutting, pasting, and rearranging frames in the timeline. You'll also see how to reorganize your animation vertically by shuffling and restacking the layers you've added to it.

Working with Frames

When y'all create an blitheness, you build information technology from frames and keyframes. Editing your certificate is a simple matter of moving, cutting, and pasting those frames until they wait skillful and work well. You can perform these operations on private frames or on multiple frames by combining them into groups, as you lot'll meet at the terminate of this section.

Copying and Pasting Frames

Re-create and paste are the world's favorite computer commands with practiced reason. These functions permit you lot create a slice of work once (a discussion, line, shape, cartoon, or what take you) and then rapidly recreate information technology to build something even more complex with a minimum of effort. Well, Flash lets yous cut, copy, and paste not just the content of your frames but your frames themselves, from 1 part of your timeline to another.

Copying and pasting frames is a great way to cut downward on your development time. Here's how it works. Say yous accept a series of frames showing a weasel unwrapping a stick of chewing gum. It's a gag scene, ane you want to repeat throughout your blitheness for comic effect. Instead of having to insert all the keyframes and regular frames every time yous desire to skid in the weasel gag, all you lot need to practice is copy the weasel frames once, and then paste them onto your timeline wherever y'all want them to get.

Furthermore, copying and pasting isn't only useful for those times when y'all want a carbon copy of a scene. If y'all want to change something in each pasted scene—the brand of chewing glue the weasel's unwrapping, for example—yous can practice that, too, afterward you've pasted the frames.

Copying and pasting frames works about exactly like copying and pasting words or fatigued objects—with a few twists. Hither are some points to keep in mind:

  • Every bit usual, you have to select what you lot're going to copy earlier you ready off the command. You select frames in the timeline (see Editing Your Frame-by-Frame Animation for a refresher).

  • If the frames you're selecting span more than one layer, brand sure you select all the layers for each frame, as shown in Figure 4-1.

    To select multiple frames, click the first frame of the series you want to select, and then Shift-click the last frame. Flash automatically selects all the frames in between. To copy and paste frames in the same document, press the Alt key (Windows) or the Option key (Mac) while you drag a copy of the selected frames to a new spot.

    Figure 4-1. To select multiple frames, click the beginning frame of the series y'all desire to select, and then Shift-click the final frame. Wink automatically selects all the frames in betwixt. To copy and paste frames in the same document, press the Alt cardinal (Windows) or the Option primal (Mac) while you drag a copy of the selected frames to a new spot.

  • Copying and pasting tweened frames varies depending on the type of tween: motion, shape, or classic. While tweened frames are displayed as divide, distinct images, they're not. As y'all learned in Affiliate iii, only keyframes comprise distinct images. If you want to copy and paste an unabridged Shape or Archetype tween, yous have to select the beginning and terminate keyframes. The newer Motion tween is much easier-going when it comes to copying and pasting frames. You can select whatsoever frames from the middle of a Movement tween and paste them (as a tween) into another layer.

  • Flash doesn't limit yous to pasting within the same document. After yous copy, yous can open any other Flash animation and paste the frames right in.

Notation

Although Cutting, Copy, and Paste normally travel equally a threesome, in Flash things work a piddling differently. The Cutting Frames command on the Edit → Timeline submenu doesn't actually cut frames ; instead, it cuts the contents of the selected frame. To get rid of the frame itself, you need to use Edit → Timeline → Remove Frames, as described in the box on Editing Multiple Frames.

The procedure of copying and pasting frames follows the same basic steps every time:

  1. In the timeline, select the frames you desire to copy .

    You probably want to make sure that the set of frames yous cull begins with a keyframe, as described in the third bullet point above. Either way, Flash highlights the selected frames and moves the playhead to the last selected frame.

  2. Choose Edit → Timeline → Copy Frames (or printing Ctrl+Alt+C on Windows; Selection-⌘-C on the Mac). Select the keyframe where y'all want to begin pasting the copied frames .

    In other words, select the frame after which you want to add the copied frames. You can paste copied frames into the document you currently accept open or into another document (select File → Open to open up another Flash document). If the frames you copied accept multiple layers, make sure the keyframe you select contains the same number of multiple layers.

  3. Select Edit → Timeline →Paste Frames .

    Flash pastes the copied frames, replacing the currently selected keyframe with the first copied frame. If y'all pasted frames into the middle of a timeline, Flash repositions your existing frames after the last pasted frame.

Moving Frames (Keyframes)

The timeline is series: When you run your animation, Wink displays the content in Frame 1, followed by the content in Frame 2, followed past the content in Frame 3, and then on. If you modify your heed almost the order in which you desire frames to appear, all you lot demand to exercise is motion them.

Elementary in theory—but moving frames in Flash isn't quite as cut and dried as you might think. Every bit you may recall, if yous've had a risk to read through Chapter 3, only keyframes tin contain actual images; regular frames incorporate either tweened or "held over" copies of the images placed in the previous keyframe. Then whether you motion a frame or a keyframe, you end up with a keyframe. Here'southward how information technology works:

  • Moving a keyframe . When you move a keyframe, what Flash actually moves is the keyframe's content and keyframe designation; Flash leaves behind a regular frame in the original keyframe's place. (And that regular frame may or may not exist empty, depending on whether or not a keyframe precedes information technology on the timeline.)

  • Moving a regular frame . Flash moves the regular frame, merely turns the moved frame into a keyframe. (If you move a serial of regular frames, Flash turns but the first moved frame into a keyframe.)

Tip

In that location's another way to change the order in which Wink plays frames: by creating an ActionScript activeness, every bit described in Affiliate 11. Creating an action lets you tell Flash how to play your frames: backwards, for case, or past rerunning the first 10 frames three times and then moving on. You desire to use ActionScript (as opposed to moving frames) when you desire to give your audition the selection of viewing your animation in different means.

To move frames, you only select then drag them. The process is the same whether you lot're moving frames, keyframes, or both, and all the usual rules of frame selection described earlier in this chapter still apply.

Hither are the steps in particular:

  1. In the timeline, select the frame(s) you want to move .

    Wink highlights the selected frame (or frames) and moves the playhead to the last selected frame.

  2. Elevate the selected frame(s) to the frame afterward which you lot want to identify the selected frames .

    As you lot drag the selected frames, Flash highlights the frames you're moving to help yous position them (Effigy 4-two).

Top: Click to select the frame you want to move, and then let go of your mouse. Then, drag to move the frame.Middle: As you make the move, Flash displays a highlighted frame, or group of frames if you selected more than one.Bottom: Here, you can tell the frame moved to frame 30 because the keyframe and end frame indicators have disappeared from their original locations (Frames 16 and 17) and reappeared in their new locations (Frames 29 and 30).

Figure iv-two. Peak: Click to select the frame y'all want to move, and then let go of your mouse. Then, drag to move the frame. Middle: As you make the move, Flash displays a highlighted frame, or group of frames if y'all selected more than than one. Bottom: Here, you lot can tell the frame moved to frame 30 because the keyframe and terminate frame indicators have disappeared from their original locations (Frames 16 and 17) and reappeared in their new locations (Frames 29 and 30).

Tip

To select multiple frames, drag in the timeline. You take to release the mouse push button to consummate the choice. And so, you can drag the selected frames to movement the whole bunch of highlighted frames to a new location. If dragging your frames isn't working, you lot can always copy and paste the frames you want to move (Working with Frames). Then use Edit → Timeline → Remove Frames to delete them from their original location (run across the box onEditing Multiple Frames).

Flash clears the selected frames from their original position, and then inserts them in their new location.

Editing Multiple Frames

Imagine you've just completed a 250-frame animation showing a character in a cherry-red t-shirt demonstrating your company's latest product, an electronic egg slicer. Suddenly, your boss comes in and declares that red'south out. (Blood-red is the colour your competitor is using for their egg slicer launch.) You take, your boss declares, until the end of the twenty-four hours to change all 250 frames.

At present, if you had to change all 250 frames one at a time, you'd never be able to meet your borderline; and even if you did, you'd probably make a few mistakes forth the mode, like accidentally repositioning the t-shirt in a couple of frames or missing a few frames altogether. But information technology's precisely this kind of en masse editing job that Flash's multiple frame editing capability was designed to handle.

Using a technique called onion skinning , you can run across the contents of several frames at once. There are three unlike modes for onion-skinning: Onion Pare, Onion Skin Outlines, and Edit Multiple Frames. Each is helpful for a unlike type of task. You use the buttons at the bottom of the timeline to cull an onion skin mode, every bit shown in Effigy four-3; utilise the onion markers in the timeline to cull which frames are displayed.

Top: Click the Onion Skin button, and the image for selected frame appears bold. The images on the adjacent frames appear faded out.Middle: Click Onion Skin Outlines, and images on the non-selected frames appear as outlines.Bottom: Click the Edit Multiple Frames button, and all the images within the onion markers appear 100% opaque.

Figure four-3. Top: Click the Onion Skin button, and the image for selected frame appears bold. The images on the adjacent frames appear faded out. Middle: Click Onion Skin Outlines, and images on the non-selected frames appear every bit outlines. Bottom: Click the Edit Multiple Frames push button, and all the images within the onion markers appear 100% opaque.

The Edit Multiple Frames manner makes it easy to deal with that red t-shirt issue, considering yous tin rapidly place (and change) the frames containing ruby t-shirts. Onion skinning is also useful for those times when you desire to hand-draw an "in-between" frame because you tin can see both the preceding and succeeding frames on the stage at the same time.

Note

Technically speaking, when you edit multiple frames in Flash, y'all're actually editing multiple keyframes . Keyframes are the merely frames that contain unique, editable art. (Regular frames just "hold over" the contents of the previous keyframe, and Wink stores tweened frames non every bit editable images, but a bunch of calculations.)

To edit multiple frames using onion skinning:

  1. In the timeline, click the Edit Multiple Frames icon .

    Flash displays multiple frames on the stage and adds onion markers to the frame brandish (bottom Figure 4-3). These commencement and ending onion markers tell Flash which frames you desire information technology to display on the stage.

  2. Click the Alter Onion Markers icon .

    Flash displays a popular-up menu.

  3. From the popular-up carte, select Onion All (Figure iv-iv) .

    Wink displays onion markers from the beginning of your timeline's frame span to the end, and shows the contents of each of your frames on the stage. (If you don't desire to edit all the frames in your blitheness, you can drag the onion markers independently to surround whatever subset of your frame span you want.)

    Here you see the result of selecting Onion All. The onion markers surround the entire frame span (Frame 1 through Frame 20) and all 20 images appear on the same stage, ready for you to edit en masse.

    Effigy 4-4. Here you see the upshot of selecting Onion All. The onion markers surround the entire frame bridge (Frame one through Frame 20) and all xx images announced on the same phase, prepare for yous to edit en masse.

  4. Edit the frames .

    Because you tin see all the content on a single stage, you tin make your edits more than hands than having to hunt and peck individually through every frame in your animation. In Figure 4-5, 4 frames are selected with the onion markers. The contents are first re-colored and then moved in one fell swoop. When the move is complete, your stage looks like Figure 4-6.

  5. Click Edit Multiple Frames again .

    Flash returns to regular ane-frame-at-a-time editing fashion and displays only the contents of the current frame on the stage.

You can work with multiple images just as easily as single images. For example, you can select several (or all of them) and apply whatever edits you like — moving them, coloring them, reshaping them, and so on.

Figure 4-v. You can work with multiple images just equally easily as single images. For example, you lot can select several (or all of them) and apply whatever edits y'all like — moving them, coloring them, reshaping them, and so on.

With onion skinning turned on, you can see multiple frames, but you can edit only the content of the selected frame. Use the Edit Multiple Frames mode when you want to see and edit several frames at once.

Figure 4-6. With onion skinning turned on, you can run across multiple frames, but you can edit just the content of the selected frame. Use the Edit Multiple Frames mode when you want to see and edit several frames at in one case.

Note

You can't edit multiple frames on a locked layer (Locking and Unlocking Layers). In fact, when y'all click Edit Multiple Frames on a locked layer, Wink doesn't fifty-fifty show y'all the content of the frames in the locked layer (not even in onion peel form).

Adding Content to Multiple Layers

A layer is zippo more than a named sequence of frames. So you lot won't be surprised to learn that, afterward you lot create a couple of layers equally described in Affiliate 3, you demand to fill up each layer's frames with content. This section shows y'all how.

When you're working with a single layer, adding content to frames is piece of cake because you don't have to worry virtually which layer yous're working with: You simply click a keyframe and apply Flash'due south drawing and painting tools to create an image on the phase.

Merely when you're working with multiple layers—for example, when you're creating a composite cartoon past adding a background layer, a foreground layer, and a carve up layer for your sound clips—you may discover adding content a scrap trickier because y'all have to exist enlightened of the layer to which you're adding your content. Fortunately, as yous see in the steps below, the timeline'south Testify/Hide icon helps y'all go on 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_begin.fla .

    You lot can find this file (and all the other example files for this book) on the "Missing CD" folio at http://missingmanuals.com/cds.

  2. Click the first keyframe in Layer 1 .

    Flash highlights the selected frame, as well as the layer name. Yous likewise see a petty pencil icon that lets you know this frame is now ready for editing.

  3. Apply Flash'south drawing and painting tools to draw a fence on the stage .

    Your contend doesn't have to be fancy; a quick "wooden" fence, like the 1 in Figure four-vii, is fine.

    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.

    Figure 4-7. Yous can tell at a glance which layer is active (editable) by the pencil icon next to the layer'due south name. Here, Layer 1 is agile.

  4. Hibernate Layer one by clicking the Show/Hide push button adjacent to Layer ane .

    The content on the stage temporarily disappears. Wink replaces the Evidence/Hide icon with an Ten and draws a slash through the pencil icon next to Layer 1 to permit you know this layer is no longer editable.

    Note

    Technically, you don't have to hibernate the contents of one layer while you're working with some other; in fact, in some cases, you lot want to see the contents of both layers on the phase at the same time (To hide a layer). But for this example, hiding is the best style to go.

  5. Click the first keyframe in Layer ii .

    Flash highlights the selected frame, besides every bit the layer name (Layer two). Now the pencil icon is next to Layer 2.

  6. Use Flash'southward drawing and painting tools to depict a few flowers on the phase .

    Your workspace should now await similar the one in 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 flowers).

    Figure four-viii. Sometimes you want to see the frame contents of two or more layers at the aforementioned time, similar when y'all're trying to line up objects in multiple layers. Simply sometimes seeing all those different objects on the aforementioned stage—some of which you can edit and some of which you can't, since Flash simply lets you edit one layer at a time—is simply plain confusing. Hither, the argue in the first frame of Layer one is hidden (you can tell by the large X in the Evidence/ Hide column) and then that you lot can focus on the contents of Layer 2 (the flowers).

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

    The content on the stage temporarily disappears. Flash replaces the Testify/Hide icon with an X and draws a slash through the pencil icon adjacent to Layer 2 to let you know that this layer is no longer editable.

  8. Echo steps 4-6 for Layers 3 and 4, adding some greyness clouds to Layer iii (Effigy 4-9) and some flight birds to Layer 4 (Figure iv-ten) .

  9. To see the content for all four layers, click to remove the Show/Hide X icon side by side to Layer three, Layer 2, and Layer i, equally shown in Figure four-11 .

    Flash displays the content for all iv layers on the same stage.

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

Figure 4-ix. Creating split layers for different graphic elements gives you lot more than control over how each chemical element appears in your finished blitheness.

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.

Figure iv-ten. In this example, the images are static, but you tin identify everything from motion and shape tweens to movie clips, backgrounds, actions, and sounds on their own layers. Hiding layers affects only what yous see on the stage; when you select Command → Test Movie to test your animation, Flash displays all layers, whether or not you've checked them equally Hidden.

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 .

Effigy iv-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. Detect the display order: The flowers (Layer 2) appear in forepart of the fence (Layer 1), and the birds (Layer 4) in forepart of the deject (Layer 3). Flash automatically displays the layer at the lesser of the list starting time (Layer one), followed by the next layer upward (Layer 2), followed by the next layer (Layer 3), so on. Merely y'all tin can modify this stacking gild, as you lot encounter on Copy and Paste a Layer.

Viewing Layers

This section shows you how to use Wink's layer tools (including locking/unlocking and hiding/showing) to keep from going crazy when you're editing content in multiple layers (Figure 4-12). (Two layers aren't so bad, simply if y'all need to add six, eight, x, or even more layers, you'll find it's pretty easy to lose track of which layer you're working in.) Then, in the following section, you see how to edit the content in your layers.

This animation contains three layers: one containing a motion tween of a buzzing fly; one containing the path the fly takes as it buzzes around the frog's head; and one containing the highly interested frog. In some situations, showing all layers is fine, but here it's confusing to see all those images on the stage at the same time.

Figure 4-12. This animation contains 3 layers: 1 containing a movement tween of a buzzing wing; one containing the path the wing takes as it buzzes effectually the frog's head; and one containing the highly interested frog. In some situations, showing all layers is fine, but hither it's confusing to see all those images on the stage at the same time.

Showing and Hiding Layers

Whether or not you lot want Flash to testify the contents of your layered frames on the phase depends on the state of affairs. Typically, when you're creating the content for a new layer, you desire to hide all the other layers and then that you tin focus on what you're drawing without any distractions. But after you've created a agglomeration of layers, you're probably going to want to see them all at in one case so that you have an idea of what your finished animation looks like and make adjustments as necessary.

Flash shows all layers until you lot tell it otherwise.

Tip

You can tell Flash to show (or hide) all your layers by clicking the Show/Hide All Layers icon yous see in Effigy 4-8. Click the icon again to turn off showing (or hiding).

To hide a layer

In the timeline, click the dot (the Show/Hide icon) next to the layer you want to hide. When you lot practise, Flash redisplays the dot as an X, and temporarily hides the contents of the layer (Figure 4-13).

Hiding the motion guide layer lets you focus on the two main elements of this animation: the frog and the fly.

Figure four-13. Hiding the motion guide layer lets yous focus on the two main elements of this animation: the frog and the fly.

To show a layer

In the timeline, click the 10 (the Show/Hibernate icon) adjacent to the layer you want to prove. When you do, Flash redisplays the Ten as a dot and displays the contents of the layer on the stage.

To hide (or testify) all layers except the one you're currently editing

In the timeline, Alt-click (Windows) or Option-click (Mac) the Show/Hide icon next to the layer you're editing. Wink immediately hides (or shows) all the layers, except the one you're editing.

Tip

If you try to edit a hidden layer by drawing on the stage, Wink displays a alert dialog box that gives you the opportunity to show (and then edit) the layer. Not so if you try to drag a symbol onto the stage—Wink just refuses to permit you drop the symbol on the stage. Oddly plenty, all the same, Flash does let you add together a keyframe to a locked layer.

Working with Layers

The more than layers you have, the more than important information technology is to continue them organized. In this section, y'all come across how to requite your layers meaningful names, so that y'all tin can remember which images, sounds, or actions you placed in which layers. You also learn how to lodge your layer so that your blended images appear merely the way you want them, and to copy and paste your layers (to cut down on the piece of work you have to practice to create like layered effects).

Renaming Layers

The names that Flash gives the layers yous create—Layer i, Layer two, Layer three, and then on—aren't especially useful when you lot've created 20 layers and can't remember which layer contains the ocean background you spent ten hours cartoon. Get into the habit of renaming your layers equally soon yous create them, and you'll have an easier fourth dimension locating the specific elements you need when you need them.

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.

Figure 4-xiv. When you open the Layer Properties box yous've got all the layer settings in one place. You can modify the layer name, show, hide, or lock your layer, and much more than.

This department builds on the example you created earlier in this affiliate. If yous haven't had a chance to work through that section, y'all tin download flowers.fla from this book'southward "Missing CD" page (http://missingmanuals.com/cds) and utilise it instead.

To rename a layer:

  1. Open the file flowers.fla .

    If you created your own Flash document when you worked through "Calculation Content to Multiple Layers" (Adding Content to Multiple Layers), y'all can use that document instead.

  2. Double-click the name Layer 4 .

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

    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.

    Figure four-15. If yous tin can't remember what a item layer contains, check the stage: When you lot 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 Working with Layers for details.

  3. Click within the text box, blazon birds , and then click anywhere else in the workspace .

    Flash displays the new name for your layer.

  4. Repeat steps 1 and 2 for Layers 3, 2, and 1, renaming them deject, flowers , and fence , respectively .

    When y'all're done, your renamed layers should look like 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 drag the bar that separates the names from the frames.

Figure 4-sixteen. The Layers area of the timeline isn't peculiarly big, so it's all-time to go along your layer names brusque and sweet. If y'all need more than room, but drag the bar that separates the names from the frames.

Copy and Paste a Layer

Earlier in this chapter, you saw how to copy and paste individual series of frames. Just Wink also lets you copy and paste unabridged layers—useful when you want to create a fill-in layer for safekeeping, or when yous want to create a duplicate layer you'll later change slightly from the original.

For instance, if you lot want your animation to show an thespian beingness pelted with tomatoes from different angles, you can create a layer that shows a tomato coming in from stage correct—possibly using a motion or shape tween (Chapter 3). So you lot can copy that layer, paste it back into the Layers window, rename it, and tweak it so that the tomato comes from phase left. Maximum effect for minimum effort: That's what copying and pasting gives y'all.

To copy and paste a layer:

  1. In the Layers window, click the name of the layer you want to select .

    Flash highlights the layer name, as well every bit all the frames in the layer.

  2. Select Edit → Timeline → Copy Frames .

    If yous don't take a layer waiting to have the copied frames, create a new layer now before going on to the next footstep.

  3. In the Layers window, select the name of the destination layer. Then choose Edit → Timeline → Paste Frames .

    Flash pastes the copied frames onto the new layer, commencement with the first frame. It likewise pastes the name of the copied layer onto the new layer.

Reordering (Moving) Layers

Flash always draws layers from the lesser up. For instance, it displays the contents of the bottom layer first; then, on meridian of the bottom layer, it displays the contents of the next layer up; and then, on acme of both of those layers, it displays the contents of the 3rd layer up; and and so on. Figure 4-17 shows yous an case.

Flash treats layers the same way you treat a stack of transparencies: The image on the bottom gets covered by the image above it, which gets covered by the image above it, and so on. Stacking isn't an issue if none of your images overlap. But when they do, you need to decide which layers you want in front and which behind.

Figure 4-17. Wink treats layers the aforementioned way you treat a stack of transparencies: The epitome on the lesser gets covered past the epitome higher up it, which gets covered by the paradigm above it, and so on. Stacking isn't an event if none of your images overlap. But when they do, you lot demand to decide which layers y'all want in front and which behind.

Because Wink always displays layers from the bottom upward, if you want to reorder your layers, you lot need to reorder their position in the layers list. Doing so is uncomplicated: All you have to do is click the name of a layer to select it and then—without letting up on your mouse—drag the layer to reposition it. Effigy iv-18 shows you an example.

Delete a Layer

Flash gives you three dissimilar ways to delete a layer:

  • In the timeline, right-click (on the Mac, Control-click) the layer you want to delete, and then, from the shortcut menu that appears, choose Delete Layer.

  • Drag the layer you desire to delete to the Trash can (see Figure 4-nineteen).

  • Click the layer y'all desire to delete to select it (or Shift-click to select several layers), and and then click the Trash can.

Whichever method yous choose, Wink immediately deletes the layer or layers (including all the frames associated with that layer or layers) from the Layers window.

Tip

If you delete the incorrect layer by error, choose Edit → Undo Delete Layer.

Moving a layer is easy: Just click to select a layer, and then drag it to reposition it (and change the order in which Flash displays the content of your frames). Here, the cloud layer has been moved to the bottom of the list, so it now appears behind the other images. The birds layer is in the process of being moved; you can tell by the thick gray line you see beneath the cursor.

Figure iv-18. Moving a layer is like shooting fish in a barrel: Just click to select a layer, and so elevate it to reposition information technology (and change the order in which Flash displays the content of your frames). Here, the cloud layer has been moved to the bottom of the list, then it at present appears behind the other images. The birds layer is in the process of existence moved; you can tell by the thick gray line you see beneath the cursor.

The quickest way to dispose of a layer is to select it, and then click the Trash can. All Flash animations have at least one layer, so you can't delete the last layer. If you try, Flash doesn't display any error—it just quietly ignores you.

Effigy 4-19. The quickest style to dispose of a layer is to select it, so click the Trash tin can. All Flash animations take at least one layer, so you can't delete the terminal layer. If you try, Wink doesn't display any error—it but quietly ignores you.

Locking and Unlocking Layers

Working with layers tin can be confusing, particularly at outset. So Flash lets you lock individual layers as a kind of safeguard, to continue yourself from accidentally changing content you didn't mean to change:

  • To lock a layer , click the Unlocked icon (the dot in Effigy 4-20) adjacent to the layer y'all want to lock. When you do, Flash turns the dot into a little padlock icon and deselects any objects that you'd selected on the phase in that layer. If you locked the active layer, Flash draws a slash through the pencil icon next to the layer's name as a visual reminder that you tin can't edit it.

    Here, the cloud and fence layers are unlocked, and the birds layer (and the selected flowers layer) are locked. Some people get into the habit of locking all the layers they're not currently editing. That way, they can't possibly add a shape or a tween to the wrong layer.

    Figure iv-20. Here, the cloud and fence layers are unlocked, and the birds layer (and the selected flowers layer) are locked. Some people get into the addiction of locking all the layers they're not currently editing. That way, they can't possibly add a shape or a tween to the wrong layer.

  • To unlock a layer , click the Locked icon (the padlock in Figure 4-20) next to the layer you desire to unlock. Instantly, the padlock turns into a dot, Flash reselects your objects, and you can edit them once again on the stage.

  • To lock (or unlock) all of your layers all at one time , click the Lock/Unlock All Layers icon. Click the icon once more to return to unlocked (or locked) layers. Ctrl-click (⌘-click) on any show/hibernate push button also locks or unlocks all layers.

  • To lock (or unlock) all layers except the one you lot're currently editing , Alt-click (Windows) or Choice-click (Mac) the unlocked icon side by side to the layer yous're editing.

Notation

If you effort to edit a locked layer, Wink displays a warning dialog box that gives you the opportunity to unlock (and then edit) the layer.

Organizing Layers

Wink gives you a couple of options that help you organize your layers both in your finished blitheness and in Flash. The outline view helps you tweak the way the content of your layers appears in your finished animation. You use the outline view to help position the objects on one layer with respect to the objects on all the other layers. Layer folders help you organize your layers in the timeline so that you tin can find and piece of work with them more than easily.

Outline View

To help you fit your layers together only the way you lot want them, Flash lets you display the contents of your layers in outline form. Instead of seeing solid pictures on the stage, you see wireframe images, equally in Figure 4-21. Looking at your layer content in outline grade is useful in a variety of situations: for example, when yous want to align the content of one layer with respect to the content of some other.

Depending on the visual effect you're going for, you might want to align the centers of your flowers with the crosspieces of your fence. But when you look at the content normally, it's hard to see the alignment, because both your flowers and your fence are opaque. Here, Flash displays the flowers and fence layers in outline form so that you can concentrate on shape and placement without being distracted by extraneous details.

Figure 4-21. Depending on the visual effect you're going for, you might want to align the centers of your flowers with the crosspieces of your contend. But when you look at the content ordinarily, it's hard to run into the alignment, because both your flowers and your fence are opaque. Here, Flash displays the flowers and contend layers in outline form so that you lot can concentrate on shape and placement without being distracted by inapplicable details.

Tip

To brandish the content of all your layers as outlines, click the Show All Layers Equally Outlines icon. (Clicking it once again redisplays your layers normally.) Or, to outline the contents of every layer except the 1 you lot're working on, Alt-click (Windows) or Option-click (Mac) the outline icon for that layer.

  • To evidence layer content in outline form , in the Layers window, click the Non-Outline icon (the filled foursquare in Figure 4-21) displayed next to the layer. When you practise, Flash changes the filled square to a hollow square (the Outline icon) and displays your layer content in outline form on the stage.

  • To return your layer to normal , click the Outline icon (the hollow foursquare) next to the layer.

Tip

You can change the colour that Flash uses to sketch your outlined content. For example, you can modify the color from light to dark so that you tin more easily run into the outline confronting a light background or and then that there's more contrast betwixt 2 overlapping outlines. To modify the outline colour for a layer, start select the layer, and so select Modify → Timeline → Layer Backdrop. From the Layer Properties dialog box (Figure 4-21) that appears, click the Outline Colour swatch, and so select a color from the Color Picker that appears.

Organizing Your Layers with Layer Folders

When your blitheness has only a handful of layers, organization isn't such a big bargain. But if yous find yourself creating 10, 20, or even more layers, you'll desire to use layer folders to continue your layers tidy (and yourself from going nuts).

A layer folder is only a folder you can add to the Layers window. Layer folders aren't associated with frames; you can't place images direct into them. (If you effort, you see the error message shown in Figure iv-22.)

If you try to draw on the stage when you've selected a folder instead of a layer, Flash lets you know in no uncertain terms. (An interpolated frame is a tweened frame; as you learn in , you can't place images in a tweened frame, either.)

Figure 4-22. If you lot endeavour to draw on the stage when you've selected a binder instead of a layer, Flash lets you know in no uncertain terms. (An interpolated frame is a tweened frame; every bit you lot learn in Chapter 3, y'all can't place images in a tweened frame, either.)

Instead, layer folders human activity every bit containers to organize your layers. For case, you lot might want to put all the layers pertaining to a certain drawing (like a logo or grapheme) into a single layer binder, and name the folder logo or Ralph . That way, you don't accept to scroll through a bunch of layers to detect the one paradigm you're looking for.

Note

As you might expect, showing, hiding, locking, unlocking, and outlining a layer folder affects every layer within that folder.

Creating layer folders

When you offset working with layer folders, y'all may want to drag to increase the size of the timeline so that yous can see all your layers. If so, proceed as follows:

  1. Click the name of a layer to select it .

    It doesn't much thing which layer you select since you'll exist moving layers as well every bit the layer binder.

  2. Click the Insert Layer Binder icon. (If you adopt, you tin choose Insert → Timeline → Layer Binder or right-click the layer, and then, from the shortcut menu that appears, choose Insert Binder.)

    Flash creates a new layer folder named Binder 1 and places information technology above the layer you selected (Figure 4-23).

  3. Drag layers onto the layer folder .

    If the folder is already expanded, you encounter the layers appear beneath. If the binder is closed, click the triangle button to view the layers inside.

Tip

You tin place layer folders within other layer folders, only don't go wild; the point is to organize your layers so that you can find them easily, not to meet how few folders yous tin display in the Layers window.

Newly created layer folders appear expanded, like Folder 1 here (note the down arrow). Clicking the down arrow collapses the folder and changes the down arrow to a right arrow. When you drag layers into an open folder (or expand a collapsed folder), the layers appear beneath the folder. You rename a layer folder the same way you rename a layer: by double-clicking the existing name and then typing in one of your own. You can move layer folders around the same way you move layers around, too: by dragging.

Figure 4-23. Newly created layer folders appear expanded, like Folder 1 here (note the down pointer). Clicking the downward arrow collapses the folder and changes the down arrow to a right pointer. When you drag layers into an open folder (or expand a collapsed folder), the layers appear below the binder. You rename a layer folder the same mode you rename a layer: by double-clicking the existing name and then typing in one of your ain. You can movement layer folders effectually the same way you movement layers around, too: by dragging.

Deleting a layer folder

To delete a layer folder, and all the layers and folders within , right-click the layer folder, and then, from the shortcut menu that appears, select Delete Folder. Flash pops upward a warning message informing you that you're nearly to delete not just the binder, but also everything in it. If that's what yous want, click Yes; otherwise, click No.

Get Flash CS4: The Missing Manual at present with the O'Reilly learning platform.

O'Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.