Flash CS5 THE MISSING MANUAL phần 3 ppt

138 F CS: T M M Working with Multiple Layers 2. Double-click the name Layer4. Flash displays 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, then 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 136 for details. 3. Click inside the text box, type 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 cloud, flowers, and fence, respectively. When you’re done, your renamed layers should look like Figure 4-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 drag the bar that separates the names from the frames. Copying and Pasting Layers Earlier in this chapter, you saw how to copy and paste individual series of frames. But Flash also lets you copy and paste entire layers—useful when you want to create a backup layer for safekeeping or when you want to create a duplicate layer you’ll later change slightly from the original. For example, if you want your animation to show an actor being pelted with toma- toes from different angles, you can create a layer that shows a tomato coming in from stage right—perhaps using a Motion or Shape tween (Chapter 3). Then you can copy that layer, paste it back into the Layers window, rename it, and tweak it so that 139 C : O F  L Working with Multiple Layers the tomato comes from stage left. Maximum effect for minimum effort—that’s what copying and pasting gives you. To copy and paste a layer: 1. In the timeline, click the name of the layer you want to select. Flash highlights the layer name, as well as all the frames in the layer. 2. Select Edit➝Timeline➝Copy Frames. If you don’t have a layer waiting to accept the copied frames, then create a new layer now before going on to the next step. 3. In the Layers window, select the name of the destination layer. Then choose Edit➝Timeline➝Paste Frames. Flash pastes the copied frames into the new layer, beginning with the first frame. It also pastes the name of the copied layer into the new layer. Reordering (Moving) Layers You can change the way images, text fields, and other objects overlap on the stage by rearranging the layers in the timeline. For example, in Figure 4-17, the fence seems to be behind the flowers because, in the timeline, the fence layer is below the flowers layer. If you’d rather have the flowers behind the fence, just drag the flowers layer below the fence. Figure 4-18 shows you an example. Figure 4-17: 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. 140 F CS: T M M Working with Multiple Layers Figure 4-18: 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. Deleting a Layer Flash gives you three ways to delete a layer: • In the timeline, right-click (Control-click) the layer you want to delete and then, from the shortcut menu that appears, choose Delete Layer. • Drag the layer you want to delete to the trash can (see Figure 4-19). • Click the layer you want to delete to select it (or Shift-click to select several layers), and then click the trash can. Whichever method you choose, Flash immediately deletes the layer or layers (in- cluding all the frames associated with that layer or layers) from the Layers window. Tip: If you delete the wrong layer by mistake, choose Edit➝Undo Delete Layer or press Ctrl+Z (c-Z). 141 C : O F  L Working with Multiple Layers Figure 4-19: 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. Locking and Unlocking Layers Working with layers can be confusing, especially at first. So Flash lets you lock in- dividual layers as a kind of safeguard, to keep yourself from accidentally changing content you didn’t mean to change: • To lock a layer, click the dot under the padlock, as shown in Figure 4-20. When you do, the dot turns into a little padlock icon and deselects any objects that you’d selected on the stage 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 can’t edit it. Figure 4-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 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. • To unlock a layer, click the padlock (Figure 4-20). 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 your layers all at once, click the Lock or Unlock All Layers icon (padlock at the top). Click the icon again to return to unlocked (or locked) layers. Ctrl-clicking (c-clicking) on any Show/Hide button also locks or unlocks all layers. 142 F CS: T M M Organizing Layers • To lock (or unlock) all layers except one, Alt-click (Option-click) the dot or padlock in the layer you want to edit. Note: If you try to edit a locked layer, Flash displays a warning dialog box that gives you the opportunity to unlock (and then edit) the layer. Organizing Layers Flash gives you a couple of options that help you organize your layers while you’re working. The Outline view removes the fill from drawings, showing only a wire- frame outline. Outline view is helpful when you want to simplify the artwork on a cluttered screen. Layer folders help you organize your layers into a hierarchy, which is helpful when you’re working with dozens of layers. The ability to put several layers in a single folder makes it easier to lock and hide related materials. Outline View Flash lets you display the contents of your layers in outline form. Instead of seeing solid pictures on the stage, you see wireframe images, as in Figure 4-21. Looking at your layer content in outline form is useful in a variety of situations—for ex- ample, when you want to align the content of one layer with respect to the content of another. Figure 4-21: Depending on the visual effect you’re going for, you might want to align the cen- ters 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 you can concentrate on shape and placement without being distracted by extraneous details. Outline layer Normal layer Select outline color View layer as outlines check box 143 C : O F  L Organizing Layers • To display the content of all your layers as outlines, click the Show All Layers As Outlines icon (next to the padlock). Clicking it again displays your layers normally. • To show a single layer’s content in outline form, click the filled square, as shown in Figure 4-20. When you do, 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 square again. • To outline the contents of every layer except one, Alt-click (Option-click) the outline icon for that layer. Tip: You can change the color Flash uses to sketch your outlined content. For example, you can change the color from light to dark so that you can more easily see the outline against a light background or so that there’s more contrast between two overlapping outlines. To change the outline color for a layer, first select the layer, and then select Modify➝Timeline➝Layer Properties. From the Layer Properties dialog box (Figure 4-21) that appears, click the Outline Color swatch and then select a color from the color picker that appears. Organizing Layers with Folders When your animation has only a handful of layers, organization isn’t such a big deal. But if you find yourself creating 10, 20, or even more layers, you’ll want to use layer folders to keep your layers tidy (and yourself from going nuts). A layer folder is simply a folder you can add to the Layers window. Layer folders aren’t associated with frames; you can’t place images directly into them. (If you try, you see the error message shown in Figure 4-22.) Figure 4-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 learned in Chapter 3, you can’t place images in a tweened frame, either.) Instead, layer folders act as containers to organize your layers. For example, you might want to put all the layers pertaining to a certain drawing (like a logo or a char- acter) into a single layer folder and name the folder logo or Ralph. That way you don’t have to scroll through a bunch of layers to find the one image you’re looking for. Note: As you might expect, showing, hiding, locking, unlocking, and outlining a layer folder affects every layer inside that folder. 144 F CS: T M M Organizing Layers Each folder you add takes up a line in the timeline, and eventually there’s not enough room to display all the layers and folders in the panel. You can use the scroll bar on the right side of the timeline find your layers, or you can increase the height of the timeline panel by dragging the panel’s top edge. Creating layer folders To create a layer folder: 1. Click the name of a layer to select it. When you create a folder, it appears above the selected layer; but you’ll be able to drag your folder and its contents to a new location. 2. Click the Insert Layer Folder icon. (If you prefer, you can choose Insert➝Timeline➝Layer Folder or right-click the layer, and then, from the shortcut menu that appears, choose Insert Folder.) Flash creates a new layer folder named Folder1, as shown in Figure 4-23. 3. Drag layers onto the layer folder. If the folder is already expanded, you see the layers appear beneath. If the folder is closed, then click the triangle button to view the layers inside. Tip: You can place layer folders inside other layer folders, but don’t go wild; the point is to organize your layers so that you can find them easily, not to see how few folders you can display in the Layers window. Figure 4-23: 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. 145 C : O F  L Spotlight Effect Using Mask Layers Deleting a layer folder To delete a layer folder, and all the layers and folders inside, right-click the layer folder, and then, from the shortcut menu that appears, select Delete Folder. Flash pops up a warning message informing you that you’re about to delete not just the folder, but also everything in it. If that’s what you want, then click Yes; otherwise, click No. Spotlight Effect Using Mask Layers Imagine placing a sheet of red construction paper containing a cutout of a starover a piece of green construction paper. The result you see, when you look at the two sheets stacked on top of each other, is a green star on a red background. That’s the concept behind mask layers, a special type of layer that lets you create shaped “port- holes” through which an underlying (masked) layer appears. At a masquerade ball, masks hide the important stuff—your face. It’s a little different in Flash and other graphic arts endeavors. Masks hide part of a picture in order to reveal the important stuff—the subject. You use masks to direct the eye of your audi- ence. And when you apply a classic tween to the porthole, you can create an effect that looks like a spotlight playing over an image—mighty cool, indeed. Here’s how you go about it: 1. Open the file 04-3_Mask_Layer.fla. You can download this file, a working example of the file (04-4_Mask_Layer_ done.fla), and all the other examples shown in this chapter from the Missing CD page at www.missingmanuals.com/cds. 2. Click Layer 1 to select it. In the example file for this section (04-3_Mask_Layer.fla), Layer 1 contains a bitmap image. 3. Click the Insert Layer button. (The Insert Layer button is on the bar below the layer names and looks like a folded-over page.) Flash creates a new layer named Layer 2 and places it above Layer 1. 4. Double-click the layer icon next to Layer 2. The Layer Properties window appears (Figure 4-24). 146 F CS: T M M Spotlight Effect Using Mask Layers Figure 4-24: Use the Layer Properties window to change the layer from one type to another. In this example, you create a Mask layer and a Masked Layer. Mask Masked 5. In the Layer Properties window, turn on the Mask checkbox, and then click OK. Flash displays the mask icon next to Layer 2. 6. Double-click the layer icon next to Layer 1. The Layer Properties window appears again. 7. This time, turn on the checkbox next to Masked, and then click OK. Flash displays the masked icon next to Layer 1. Tip: Flash gives you a bunch of ways to create masks and masked layers (by right-clicking an existing layer, and then choosing Mask or Masked, for example), but one thing doesn’t change: Masked layers have to appear directly below mask layers in the Layers window for the effect to work. If you create a mask layer and a masked layer in the wrong order, just drag the mask layer above the masked layer, and you’re all set. 8. Select Frame 20 in both Layer 1 and Layer 2, and then select Insert➝ Timeline➝Frame. Flash extends both layers to frame 20. 9. Click to select the first frame in Layer 2 (the mask layer). On the stage, click the Oval tool, and then draw a circle in the upper-right corner of the stage (Figure 4-25). The oval can be any color you choose, since it won’t appear in the finished effect; instead, it’ll act as a see-through portal. 147 C : O F  L Spotlight Effect Using Mask Layers Figure 4-25: The shape you use as a portal has to be either a fill (like the circle shown here) or a symbol. Because the Brush tool creates fills, you can use the Brush to draw a freehand portal. (Strokes on the mask layer have no effect.) Mask shape 10. With the circle still selected, press F8. A Convert to Symbol box appears. If you want to animate a mask with a Motion Tween, you need to use a symbol. 11. In the Name box, type Circle Mask. Choose Movie Clip for type and then press OK. Now, the circle symbol on the stage is an instance of the Circle Mask movie clip symbol 12. Right-click Layer 2 and choose Create Motion Tween. Layer 2 shows the blue motion tween highlight. [...]... stage using object drawing mode or chosen to stick with merge drawing mode (which Flash assumes you want until you tell it differently) See page 53 for a rundown on the two drawing modes 150 Flash CS5: The Missing Manual S ‌ electing Graphic Elements The Selection Tool The aptly named Selection tool (V) is the workhorse of Flash s selection tools; with it, you can select individual graphic elements like... to look In this chapter, you’ll get more acquainted with Flash s selection tools—the tools you use to tell Flash which specific part of a drawing you want to change Then you’ll apply Flash s editing tools from basic (copying, pasting, and moving) to advanced (scaling, rotating, stacking, grouping, and more) You’ll also do more with color in Flash drawings than you saw in Chapter 2 After a quick background... elements) using the Selection tool: 1 In the Tools panel, click the Selection tool Flash highlights the Selection tool, and Selection tool–specific options appear in the Options section at the bottom of the Tools panel (Figure 5 -3) Chapter 5: Advanced Drawing and Coloring 151 S ‌ electing Graphic Elements Figure 5 -3:   Flash displays a selection box around selected objects (like the circle and rectangle... you can make any modifications you want to the object using the main menu options, Flash s Color or Transform tools (pages 79 and 104), or any of the panels, like the Properties panel 152 Flash CS5: The Missing Manual Selecting Graphic Elements‌ Note: If you use the Selection tool to select an ungrouped line or shape, Flash displays the Straighten and Smooth options (check out the Options section of... Pencil, Brush, Line, or Shape), Flash redisplays the line as a series of segments and points Click any segment (the cursor displays a tiny black square as you mouse over a segment), and Flash lets you move the entire object Click a point (a hollow square) instead, and Flash lets you change the object’s shape Chapter 5: Advanced Drawing and Coloring 157 Selecting Graphic Elements 3 Mouse over any of the line... point in any direction to reshape your object Right: When you let go of the mouse, Flash displays your transformed object 158 Flash CS5: The Missing Manual Selecting Graphic Elements Tip: If the anchor point defines a curve (in other words, if you see a hollow square at the end of a curved line), clicking the point tells Flash to display control handles that are used to define the curve You can drag one... shows you an example 3 When you’ve completely encircled your object, let go of the mouse button Flash selects everything inside the loop you drew with the Lasso tool Tip: You can have a tricky time drawing a precise loop using the Lasso, especially if you’re using a mouse instead of a graphics tablet Fortunately, Flash has got your back; if you don’t completely close the loop, Flash closes it for you,... polygon mode, which lets you click to surround an area (Flash takes care of filling in the straight lines between your clicks so you don’t have to.) 160 Flash CS5: The Missing Manual Selecting Graphic Elements To use the Lasso tool to select objects (and portions of objects) by pointing and clicking: 1 In the Tools panel, click the Lasso tool Flash highlights the Lasso tool In the options section of... bitmaps with the Magic Wand Flash treats bitmaps—for example photos in the JPEG format—differently from the way it treats the shapes you create using its drawing tools And if you take a look at Figure 5- 13, you’ll see why While you can’t manipulate bitmaps in Flash anywhere near as easily or as completely as you can manipulate the shapes and lines you draw directly onto the stage, Flash does have a special... range Flash highlights bits of selected color 5 Click the bitmap again (click a similarly colored area) Flash highlights the bits of color that match your selection You can modify the highlighted bits of fill color as you go (cut them, recolor them using the E ­ yedropper tool described on page 204, and so on), or continue to click the b ­ itmap as you did in step 4 to add to the selection 162 Flash CS5: . page 136 for details. 3. Click inside the text box, type 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, . from the shortcut menu that appears, choose Insert Folder.) Flash creates a new layer folder named Folder1, as shown in Figure 4- 23. 3. Drag layers onto the layer folder. If the folder is already. (04 -3_ Mask_Layer.fla), Layer 1 contains a bitmap image. 3. Click the Insert Layer button. (The Insert Layer button is on the bar below the layer names and looks like a folded-over page.) Flash