Flash CS5 THE MISSING MANUAL phần 2 pot

67 C : C S D Creating Original Artwork As you drag, the anchor point you create sprouts two control lines, and your cursor turns into an arrow. As you can see in Figure 2-16, something different is happening. Flash displays a preview curve and a control line that lets you adjust the angle of the curve. Drag the end of the control line, and the shape of the curve changes. Figure 2-16: To create a curve using the Pen, click the stage to begin the curve. Then move your cursor an inch or so, click again, and then drag. While you’re dragging, Flash displays a temporary line with two small handles. These control lines don’t show in your document; you use them to shape your curve. Drag the handles on the ends of the control lines. As you adjust the control lines, the curve changes shape. Mouse cursor over curve control Anchor point Curve control line Curved line preview Anchor point Straight line 4. Release the mouse button. When you let go of the mouse button, Flash draws the curve on the stage. The control lines disappear when you choose another tool. Using the Pen tool, you can create both straight lines and curves, as shown in Figure 2-17. 5. Continue drawing connected lines by clicking other points on the stage. Click, move, and click to draw straight lines. Click, move, and drag to create curves. Adjust the curves using the handles on the end of the curve control lines. If you’ve never used tools like these before, don’t worry; you’ll get better with a little practice. 6. Create a closed loop shape by clicking the first point you created in step 2. When the cursor is over a point that closes the loop, you see a small circle to the right of the Pen tool cursor. 68 F CS: T M M Creating Original Artwork Figure 2-17: Here’s an example of two finished shapes drawn with the Pen tool. The head shape is made from curves that create a closed loop. The fill color was created with the Paint Bucket tool, as described on page 84. The hat is made of connected straight lines with the stroke thick- ness set to 5 pixels. Straight lines from pen tool Pen tool No fill color Curved lines from pen tool Paint bucket Fill color from paint bucket Tip: If you want to adjust a curve after the fact, choose the Subselection tool and then click an anchor point adjacent to the curve. The control lines appear, and you can change the shape of the curve by dragging the control points. 7. Once you feel comfortable drawing straight lines and curved lines, use curves to create a cartoon head, similar to the one in Figure 2-17. Then use straight lines to make a hat for your creation. Drawing curves can be a bit tough until you get the hang of controlling the shape of the curves as you draw. One of the great things about the Pen tool is that you can make adjustments after the fact. Here are some tips for working with the Pen tool: • You can change the path of a line or the shape of an object by moving anchor points with the Subselection tool (A). • To change the arc of a curve, click an adjacent anchor point with the Subselec- tion tool. The anchor point sprouts control lines, and you can adjust the curve by dragging the points on the end of the control lines. • Use the Convert Anchor Point tool (C) to turn hard angles into curves and vice versa. 69 C : C S D Creating Original Artwork • Use the Add Anchor Point tool (=) to—you guessed it—add anchor points to a line segment. The Delete Anchor Point tool (-) removes anchor points but leaves a line segment between the remaining anchor points. Once you get used to the Pen tool’s drawing system, you’ll find that you can draw very precise shapes. (Plus, all your practice with the Pen tool will pay off if you ever use Adobe Illustrator or similar programs that use the same Bezier curves to draw complex shapes.) Brush tool You use the Brush tool to create free-form drawings, much like the Pencil tool described on page 63. The differences between the two include the following: • You can change the shape and size of the Brush tool. You can choose a brush tip that’s fat, skinny, round, rectangular, or even slanted. • The Brush tool creates fills, while the Pencil tool creates strokes. This distinc- tion becomes important when it comes time to change the color of your drawings (see page 79). Note: The Brush tool really shows its stuff when you use it with a graphics tablet, as described in the box on page 65. That’s because the Brush tool makes great use of the tablet’s ability to sense pressure. Press hard for thick, bold lines. Lessen the pressure for thin, delicate lines. With practice, you can create great calligraphic effects. To use the Brush tool: 1. On the Tools panel, click the Brush tool (the little paintbrush icon). Flash displays your Brush options—including Brush Mode, Brush Size, and Brush Shape—in the Options section of the Tools panel. If you have a graphics tablet, you also see Brush Pressure and Use Tilt buttons. 2. From the Brush Size drop-down menu (Figure 2-18), select the third- or fourth-smallest brush size. The larger brushes let you paint great, sweeping strokes on the stage. But in this example, you’ll be drawing hairs on your fellow’s head, so a modest brush size is more appropriate. Your cursor changes to reflect your choice (you can see this change if you mouse over the stage). Tip: Whenever you make a mistake, or simply want to wipe out the very last thing you did in Flash, Press Ctrl+Z (c-Z) or select Edit➝Undo. 3. From the Brush Shape drop-down menu, choose the round brush shape. Each brush shape gives you a dramatically different look. To draw hair, as in this example, you may choose round because it most closely approximates the 70 F CS: T M M Creating Original Artwork results you get with a real brush. Once again, your cursor changes to reflect your choice. Figure 2-18: The options for controlling the brush size, shape, and mode appear at the bottom of the Tools panel after you choose the Brush tool. To make a size adjustment, click the Brush Size button and then select the size you want from the pop-up menu. Brush Mode Brush Size Brush Shape Brush Size menu 4. Click the down arrow next to Brush Mode, and then, from the pop-up menu that appears, choose Paint Normal. Brush modes change the way the Brush tool paints over or under strokes and fills already in your drawing. Figure 2-19 shows the different effects. Here you choose Paint Normal to draw hair that shows over the head shape and the hat. Later, you’ll see how to tuck that hair under the hat. Figure 2-19: Here you get an idea of how the different brush modes work. The hair was brushed into this picture using the five different brush modes. Brush tool Brush mode button Brush size Brush shape 71 C : C S D Creating Original Artwork Here’s a rundown of all the brush modes you can choose from: • Paint Normal. Flash uses this mode unless you tell it otherwise. If you brush over an existing object on the stage using Paint Normal, your brush stroke appears on top of the shape. • Paint Fill. When you brush over an existing object on the stage using Paint Fill, your brush stroke appears on top of the fill portion of the object, be- hind the stroke, and on the stage. • Paint Behind. When you brush over an existing object on the stage using Paint Behind, your brush stroke always appears behind the object. • Paint Selection. When you brush over an existing object on the stage using Paint Selection, your brush stroke appears only on the parts of the shape that are both fills and that you’ve previously selected. • Paint Inside. If you brush over an existing object on the stage using Paint Inside and begin inside the stroke outline, your brush stroke appears only inside the lines of an object (even if you color outside the lines). If you be- gin outside the lines, then your brush stroke appears only outside (even if you try to color inside them). 5. Click the stage just about where your stick person’s hair should be and drag your mouse upward; release the mouse button when the hair is the length you want it. Your paintbrush stroke appears on the stage. 6. Repeat to create additional locks of hair. You should see a result similar to the one shown in Figure 2-19. Arranging drawn objects forward and backward When you draw in object mode, each part of your drawing (the head, the hat, the hair) is an object, and you can place it in front of or behind the other objects. Imag- ine that the head, hat, and hair are each cardboard cutouts that you’re placing on your desktop. You set them down so that the head is at the bottom, the hair cutout covers the top of the head, and the hat covers part of the hair. Perfect! Flash works the same way. When you draw objects, Flash places each new object in front of the last. But what if you don’t draw them in the proper order? Suppose, in the cartoon face example, that you drew the hair on top of the hat? Flash can help. Follow these steps to move the hat to the front. Note: If you don’t have a drawing handy for this exercise, you can download 02-3_Arrange_Objects.fla from the Missing CD page at www.missingmanual.com/cds. 1. With the Selection tool, click the hat’s outline. Before you can rearrange the stacking order, you need to select an object to move. 72 F CS: T M M Creating Original Artwork 2. Go to Modify➝Arrange➝Bring to Front or press Shift+Ctrl+up arrow (Windows) or Option-Shift-up arrow (Mac) to move the hat to the front. The hat moves in front of both the head shape and the hair, as shown in Figure 2-20. You can still move the hat, hair, or head around the stage with the Selection tool. They stay in the same stacking order (head on bottom, hair in middle, hat on top) until you make another change using the Modify➝Arrange commands. Figure 2-20: Use the Modify➝ Arrange commands to position parts of your drawing in front of or behind other objects. Here the hat is brought to the front so that it partially covers the head and the hair. You can find a copy of this 02-3_ Arrange_Objects. fla on the Missing CD page (www.missing- manuals.com/cds). Hat selected and brought to front There are four commands that help you arrange the stacking order of the objects you’ve drawn: • Bring to Front. Moves the selected object to the very front of the stack. • Bring Forward. Moves the selected object forward one level in the stack. • Send to Back. Moves the selected object to the very back of the stack. • Send Backward. Moves the selected object back one level in the stack. As an alternative to using menu commands, you can select an object and then use Ctrl+up arrow or Ctrl+down arrow (c-up arrow or c-down arrow) to move the selected object forward or backward. Add the Shift key (Shift+Ctrl+up arrow or Shift+Ctrl+down arrow for PCs; Shift-c-up arrow or Shift-c-down arrow for Macs) to move all the way to the front or all the way to the back. Tip: Remember, shapes drawn in merge drawing mode always appear behind objects drawn in object drawing mode. If you want to rearrange mixed graphics, then you need to use the timeline layers, as explained in Chapter 4. 73 C : C S D Creating Original Artwork Shape tools: Oval, Rectangle, and PolyStar Flash gives you a quick way to create basic shapes: the Oval tool, which lets you draw everything from a narrow cigar shape to a perfect circle; the Rectangle tool, which lets you draw rectangles, from long and skinny to perfectly square; and the PolyStar tool, which you can use to create multisided polygons (the standard five-sided polygon, angled correctly, creates a not-too-horrible side view of a house) and star shapes. You can see the Oval, Rectangle, and PolyStar tools in Figure 2-21; Figure 2-22 shows you how to configure the PolyStar tool. Figure 2-21: The Oval, Rectangle, and PolyStar tools are all tucked under the same button on the Tools panel. The icon and related tooltip for the last-used shape appear on the button. The small triangle in the lower-right corner of the button is your clue that there are more options. To see the other shape options, click and hold down the button. A small menu appears showing all the options. Shapes button Shapes menu Figure 2-22: One of the shape tools is called PolyStar because it creates polygons and stars. After choosing PolyStar on the Tools panel, click the Options button in the Properties panel. Then, in the Tool Settings box, choose either “polygon” or “star” from the drop-down menu. Choose star or polygon Options button opens Tool Settings 74 F CS: T M M Creating Original Artwork Tip: You can always create a circle, a square, or a star using one of the other drawing tools, like the Pencil or the Line tool. But most people find the shape tools quicker and easier. Up To Speed Rectangle and Oval Primitives Flash has two special shapes: the rectangle and oval primi- tives. What makes these guys so primitive, and where and how should you use them? When you draw a rectangle or an oval using the standard tools, Flash just considers them shapes. You see one as having corners and the other curves, but to Flash they’re pretty much the same. When you draw them in merge mode, you can chop standard ovals and rectangles into little irregularly shaped pieces. Primitives are different in that you can’t erase part of a primitive or break it into parts. It’s all or nothing. Primi- tives have some special features that you won’t find in their counterparts. For example, using the Properties panel, you can add rounded or beveled corners to your rectangle primitives. With the Oval primitive, you can create pie slices by defining the arc angles. And as with the shapes drawn in object mode, you can adjust the width and height of the objects by typing mea- surements in the Properties panel. Last but not least, when they’re in the hands of an ActionScript programmer, these primitives can really jump through hoops. Draw a rectangle, and then select it. Look in the Proper- ties panel. If you drew it in object mode, then the Properties panel lists it as a drawing object. Otherwise, it describes it as a shape. Now draw a rectangle using the Rectangle Primitive tool. Sure enough, the Properties panel describes it as a rectangle primitive. To create a shape: 1. Click the shape tool you want (choose from Oval, Rectangle, or PolyStar, as shown in Figure 2-21). Your cursor changes into a cross. 2. Click the stage where you want to start your shape, and then drag your cur- sor to form the shape. When you’re satisfied with the way your shape looks, release your mouse button. Flash displays your shape on the stage. Tip: To create a perfectly round circle or a perfectly square square, simply hold down the Shift key while you drag to create your shape. If you want to create beveled or rounded corners, then before you release the mouse button, press the up or down arrow keys. Aligning Objects with the Align Tools Sometimes dragging stuff around the stage and eyeballing the result works just fine. Other times, you want to position your graphic elements with pinpoint precision. Using the Align panel, you can align graphic elements based on their edges (top, bot- tom, right, left) or by their centers. And you can base this alignment on the objects 75 C : C S D Creating Original Artwork themselves (for example, you can line up the tops of all your objects) or relative to the stage (useful if you want to position, say, several Freddy Flash heads precisely at the bottom of the stage, as shown in Figure 2-23). You can even distribute indi- vidual objects evenly with respect to one another. To display the Align panel, select Window➝Align or press Ctrl+K (Windows) or c-K (Mac). Figure 2-23: The Align panel gives you the opportunity to align a single object (or whole groups of se- lected objects) along the left side, right side, top, or bottom of the stage, and more. First select Modify➝Align➝To Stage. Select the objects you want to align, and then click the alignment icon from the Align panel. Erasing Mistakes with the Eraser Tool Only in the digital realm does an eraser work so effectively. Try erasing a goof on paper or canvas, and you not only have shredded eraser everywhere, but you’re also left with ghostly streaks of paint, lead, or charcoal. No so in Flash. Using the Eraser tool (Figure 2-24), you can effectively wipe anything off the stage, from a little speck to your entire drawing. Figure 2-24: Here the Eraser tool is rubbing out the PolyStar shape. Erasing in Flash isn’t useful just for fixing mistakes; you can create cool effects (like pat- terns) by erasing, too. If you happen to start erasing the wrong thing, no problem; just press Ctrl+Z (c-Z). 76 F CS: T M M Creating Original Artwork Note: Using the Eraser tool is similar to selecting Edit➝Undo only in the sense that they both remove objects from your drawing. The difference: Edit➝Undo tells Flash to work sequentially backward to undo your last actions or changes, the most recent one first. The Eraser tool, on the other hand, lets you wipe stuff off the stage regardless of the order in which you added it. To use the Eraser tool: 1. In the Tools section of the Tools panel, click the Eraser tool to select it. Your cursor changes to the size and shape of eraser Flash assumes you want. To make your eraser larger or smaller, head to the Options section at the bottom of the Tools panel and, from the Eraser Shape pop-up menu (Figure 2-25), select the eraser size and shape you want. (You want a nice fat eraser if you have a lot to erase, or a skinny one if you’re just touching up the edges of a drawing.) Figure 2-25: How your Eraser works depends on which Eraser mode you’ve selected. Here, you see the effects of each of the modes on the fills and strokes of the same shape. Erase Mode menu Erase shape Erase Mode button 2. On the stage, click where you want to begin erasing, and drag your cursor back and forth. Flash erases everything your cursor touches (or not, depending on the Eraser mode you’ve chosen—see the following section for details). Tip: To erase a line or a fill in one fell swoop, click the Faucet option, and then click the line or fill you want to erase. To erase everything on the stage and the Pasteboard (the area surrounding the stage) double-click the Eraser icon on the Tools panel. Configuring the Eraser Flash has a ton of Eraser modes you can use to control how the Eraser tool works (and what it erases). To see them, click the Erase Mode button in the Options area (Figure 2-25), and then, from the fly-out menu that appears, select one of the following modes. [...]... (Figure 2- 32) The color picker appears, and as you mouse over the different colors, you notice that your cursor looks like a tiny eyedropper 2 Click a color to choose it The color picker disappears, and Flash redisplays the Fill Color icon using the color you just selected 3 On the stage, click the fill(s) you want to recolor Flash recolors each fill you click, as shown in Figure 2- 33 84 Flash CS5: The... select the stroke you want to change A highlight appears around or on the selected stroke 80 Flash CS5: The Missing Manual Adding Color 2 If the Properties panel isn’t open, press Ctrl+F3 (c-F3) The Properties panel shows settings related to the stroke, as shown in Figure 2- 28 Properties panel Stroke selected Figure 2- 28:  Using the Properties panel is a quick and easy way to change the color of a single... bottle share same button 2 In the Properties panel, click the Stroke Color swatch (Figure 2- 30) The color picker appears, and as you mouse over the different colors, you ­ otice n that your cursor looks like a tiny eyedropper Selected color Alpha setting Scrubber cursor 82 Flash CS5: The Missing Manual Figure 2- 30:  Clicking the Stroke Color icon displays the color picker All of Flash s color pickers... Edit➝Paste in Center Tells Flash to paste the image in the center of the viewing area • Edit➝Paste in Place Tells Flash to paste the image in the same spot it was on the original stage (If you choose this option to paste an image to the same stage as the original, then you need to drag the pasted copy off the original to see it.) 78 Flash CS5: The Missing Manual Adding Color Figure 2- 26:  Copying and pasting... colors), you can click either of the Stroke or Fill icons in the Colors section to bring up a color palette, as shown in Figure 2- 27 Choose a color from the color palette, and Flash applies that color to the objects you draw Chapter 2: Creating Simple Drawings 79 Adding Color Figure 2- 27:  Before you begin drawing with the Pen or Pencil tools (both of which let you create strokes), you can choose the color... (page 24 0) To copy and paste an image: 1 On the stage, select the image you want to copy Page 58 gives you an overview of the selection tools In Figure 2- 26, Freddy Flash is selected 2 Choose Edit➝Copy (or press Ctrl+C in Windows, c-C on the Mac) Then select the keyframe into which you want to paste the image ­ You can paste the image in the keyframe you’re in, or you can select another one Flash doesn’t... the Ink Bottle isn’t showing, then click and hold the Paint Bucket until you see Chapter 2: Creating Simple Drawings 81 Adding Color the fly-out menu, as shown in Figure 2- 29, and then select the Ink Bottle tool Now, as you mouse over the stage, you notice that your cursor looks like a little ink bottle Figure 2- 29:  Use the Ink Bottle tool to change the color strokes To change the color of strokes... Animation Follow these steps to see how frame-by-frame animation works: 1 Open a blank Flash document by choosing File➝New and then selecting ActionScript 3.0 and pressing OK ­ You have a spanking new Flash document As the timeline in Figure 3 -2 shows, Flash starts you out in Layer 1, Frame 1, because initially, a Flash document has only one frame, a keyframe at Layer 1, Frame 1 Tip: If you don’t see... rectangle under the number 20 Flash highlights the rectangle, as shown in Figure 3-4 Notice that the playhead doesn’t move, because at this point your animation contains only one frame 4 Turn the selected frame into a blank keyframe by pressing F7 Flash moves the playhead to the selected frame (Frame 20 in Figure 3-4), inserts a keyframe icon, and clears the stage Tip: In Flash, you often have several... Here, the playhead is over the second keyframe, which tells Flash to place the content on the stage in the second keyframe (Frame 20 ) When it detects a new keyframe, Flash displays only the new contents, so Frames 2 19 carry forward the content from Frame 1 (the first keyframe) You can verify this behavior by dragging the playhead from Frame 20 back to Frame 1 Chapter 3: Animate Your Art 91 Frame-by-Frame . can see the Oval, Rectangle, and PolyStar tools in Figure 2- 21; Figure 2- 22 shows you how to configure the PolyStar tool. Figure 2- 21: The Oval, Rectangle, and PolyStar tools are all tucked. or charcoal. No so in Flash. Using the Eraser tool (Figure 2- 24), you can effectively wipe anything off the stage, from a little speck to your entire drawing. Figure 2- 24: Here the Eraser tool. (page 24 0). To copy and paste an image: 1. On the stage, select the image you want to copy. Page 58 gives you an overview of the selection tools. In Figure 2- 26, Freddy Flash is selected. 2. Choose