Flash CS5 THE MISSING MANUAL The book that should have been in the boxđ Flash CS5 Chris Grover Beijing ãCambridge ãFarnham • Köln • Sebastopol • Taipei • Tokyo Flash CS5: The Missing Manual by Chris Grover Copyright © 2010 Chris Grover All rights reserved Printed in the United States of America Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O’Reilly Media books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles: http://my.safaribooksonline.com For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@ oreilly.com May 2010: First Edition The Missing Manual is a registered trademark of O’Reilly Media, Inc The Missing Manual logo, and “The book that should have been in the box” are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media is aware of a trademark claim, the designations are capitalized While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it This book uses a durable and flexible lay-flat binding ISBN: 978-1-449-38025-0 [M] Table of Contents The Missing Credits xv Introduction Part One: Creating a Flash Animation Chapter 1: Getting Around Flash 13 Starting Flash A Tour of the Flash Workspace Menu Bar The Stage The Timeline Panels and Toolbars Toolbars Tools Panel Properties Panel Library Panel Other Flash Panels The Flash CS5 Test Drive Open a Flash File Explore the Properties Panel Resize the Stage Zoom In and Out Make It Move Play an Animation Save a File 13 18 20 20 21 22 24 25 27 28 29 32 32 33 34 36 37 38 39 Chapter 2: Creating Simple Drawings 41 Plan Before You Draw Creating a Storyboard Five Questions for a Better Result 41 42 43 v Preparing to Draw Setting Document Properties Adding Measurement Guides Drawing a Shape Choosing a Drawing Mode Merge Drawing Mode Object Drawing Mode Using Merge Mode and Object Mode Together Selecting Objects on the Stage Essential Drawing Terms Creating Original Artwork Drawing and Painting with Tools Aligning Objects with the Align Tools Erasing Mistakes with the Eraser Tool Copying and Pasting Drawn Objects Adding Color Changing the Color of a Stroke (Line) Changing the Color of a Fill Chapter 3: Animate Your Art Frame-by-Frame Animation Creating a Frame-by-Frame Animation Test Your Frame-by-Frame Animation Editing Your Frame-by-Frame Animation Selecting Frames and Keyframes Inserting and Deleting Keyframes and Frames Making It Move with Motion Tweens Tweening a Symbol’s Dimension Properties Copying and Pasting Frames Reversing Frames in a Frame Span Editing the Motion Path Moving the Motion Path Adding Curves to the Motion Path Moving End Points on the Motion Path Copying and Pasting a Motion Path Copying and Pasting Properties Shape Tweening (Morphing) Shape Hints Using Multiple Layers for Shape Tweens Classic Tween vi table of contents 87 87 88 92 93 94 95 98 102 104 106 107 107 108 109 109 110 111 115 117 118 45 46 49 50 53 53 55 57 58 60 61 62 74 75 78 79 80 83 Part Two: Advanced Drawing and Animation Chapter 4: rganizing Frames and Layers 121 O Working with Frames Copying and Pasting Frames Moving Frames and Keyframes Editing Multiple Frames Working with Multiple Layers Showing and Hiding Layers Working with Layers Renaming Layers Copying and Pasting Layers Reordering (Moving) Layers Deleting a Layer Locking and Unlocking Layers Organizing Layers Outline View Organizing Layers with Folders Spotlight Effect Using Mask Layers 121 121 124 126 129 133 135 136 138 139 140 141 142 142 143 145 Chapter 5: dvanced Drawing and Coloring 149 A Selecting Graphic Elements The Selection Tool The Subselection Tool The Lasso Tool Manipulating Graphic Elements Modifying Object Properties Moving, Cutting, Pasting, and Copying Transforming Objects Moving and Rotating Objects in 3-D Stacking Objects Converting Strokes to Fills Aligning Objects Spray Painting Symbols Drawing with the Deco Tool Advanced Color and Fills Color Basics RGB and HSB Creating Custom Colors Specifying Colors for ActionScript Saving Color Swatches Using an Image As a Fill “Color” 149 151 156 159 163 163 164 166 173 178 181 183 187 188 190 190 191 191 195 196 197 table of contents vii Applying a Gradient Importing a Custom Color Palette Copying Color with the Eyedropper 199 203 204 Chapter 6: hoosing and Formatting Text 209 C Text Questions Choosing TLF or Classic Text Choose a Text Type About Typefaces and Fonts Adding Text to Your Document Changing Text Position, Height, and Width Rotating, Skewing, and Moving in 3-D Changing Text Color Creating a Text Hyperlink Creating a Hyperlink Using Classic Text Choosing and Using Text Containers Creating Vertical Text Containers Multiline and Single-Line Text Containers Applying Advanced Formatting to Text Create a Multi-Column Text Container Flow Text from One Container to Another Animating Text Without ActionScript Experimenting with Animated Text Moving Text in Three Dimensions Text Properties by Subpanel Text Engine Properties Position and Size 3D Position and View (TLF Text Only) Character Advanced Character (TLF Text Only) Paragraph Options (Classic Text Only) Container and Flow (TLF Text Only) Color Effect (TLF Text Only) Display (TLF Text Only) Filters 210 210 211 213 213 216 217 217 218 219 220 221 222 223 224 225 226 230 230 232 232 232 233 233 235 236 236 236 237 237 237 Chapter 7: eusable Flash: Symbols and Templates 239 R Symbols and Instances Graphic Symbols Multiframe Graphic Symbols Movie Clip Symbols Button Symbols Templates Opening a Prebuilt Template Customizing the Photo Album Template viii table of contents 240 241 255 259 264 274 276 278 Drawing a Shape In the Fill and Stroke subpanel, drag the slider next to the word “Stroke” until the number in the Stroke height box is about or As you drag the slider, the number in the box to the right changes to show the stroke height (you may prefer to think of it as thickness) The Stroke slider goes from 0.10 pixels to 200 pixels, a huge range that makes the slider a little touchy If you have trouble getting the number you want, you can just type a number in the text box Click a spot on the stage and then, with the mouse button held down, drag to create a rectangle As you drag, you see an outline that indicates the size and shape of the object you’re drawing As long as you hold the mouse button down, you can continue to change the size and shape Release the mouse button The finished rectangle appears on the stage, as shown in Figure 2-7 The stroke is black and about or pixels thick It forms the outline for the rectangle The fill is blue and appears inside the stroke Stroke height Blue fill Black 3.9 pixel stroke Stroke color Fill color Figure 2-7: Shown here, in lovely black and white, is a rectangle with a black stroke and a blue fill Note the Rectangle tool selected in the Tools panel and the Rectangle properties displayed in the Properties panel Rectangle tool selected As advertised, your rectangle is made up of two graphic elements, a stroke and a fill You could have just as easily made a rectangle that was only a stroke outline or a solid fill When you’re drawing a shape, you can eliminate the stroke or the fill by choosing a “no color” option in the color picker The no color option appears in the upper-right corner of the color picker as a white box with a red diagonal line drawn through it, as shown in Figure 2-6 52 Flash CS5: The Missing Manual Choosing a Drawing Mode Flash gives you several tools to draw shapes You’ll find them all in the Tools panel Just click the Rectangle tool and continue to hold the mouse button down A flyout menu shows Rectangle tools, Oval tools, and the PolyStar tool You’ll learn all the in and outs of these tools throughout this book, but if you want to experiment, go right ahead Just like the Rectangle tool, the other shape tools can create both strokes and fills Other drawing tools create either strokes or fills For example, the Line (L), Pencil (Y), and Pen (P) tools create strokes, while the Brush (B) and the Deco (U) tools create fills Choosing a Drawing Mode If you’re new to Flash, here’s a tip that will save you hours of frustration Write these words on a sticky note on your monitor: Flash has two drawing modes—merge mode and object mode When drawings don’t behave as expected, I’m suffering from mode confusion Lines and shapes drawn in merge mode behave differently from those drawn in object mode This phenomenon becomes apparent when you try to move drawings around the screen or arrange them in front of or behind other graphics You use a simple toggle button or shortcut key to change from one mode to the other Keep in mind that you can use both drawing modes in a single Flash document, and there’s a good chance you’ll want to work that way You can even have graphics drawn in merge mode in the same layer and frame as graphics drawn in object mode Both types of graphics retain their native characteristics and eccentricities unless you purposely convert them to the other format Note: Want to check out the differences between the two modes? The Missing CD (www.missingmanuals com/cds) has two example files 02-1_Merge_Drawing_Mode.fla shows an oval and a rectangle drawn in merge drawing mode 02-2_Object_Drawing_Mode.fla shows a similar oval and rectangle drawn in object mode Merge Drawing Mode Originally, Flash offered only merge mode It’s unlike drawing tools you find in most programs, but merge mode works great for web animations because it keeps file sizes small and animations fast Flash assumes you want to use the merge drawing mode unless you tell it otherwise Graphics drawn in merge mode are called shapes In this mode, if one shape overlaps another shape, Flash erases the hidden portion of the bottom shape underneath—a fact you discover when you move the overlapping shape, as shown in Figure 2-8 (bottom) Many Flash veterans love merge mode, because they can draw quickly, using overlapping shapes like cookie cutters Out of the box, Flash assumes you want to work in merge drawing mode, so you don’t have to anything special to activate it the first time you use Flash But if you (or someone you share your copy of Flash with) has activated object drawing mode, Chapter 2: Creating Simple Drawings 53 Choosing a Drawing Mode then you need to toggle it back to merge mode In the following steps, you’ll learn how to make sure you’re in merge mode and discover some of its idiosyncrasies Figure 2-8: Top: Say you’re in merge mode and you draw a r ectangle and then an oval that overlaps it At first, it looks and behaves like any old graphic element Bottom: That changes when you select the shape and it sports a dotted pattern, as shown on the oval Drag the selected oval away, and you’ll see that Flash has erased the overlapped portion of the rectangle Notice that Flash repositioned the oval’s fill but left the outline in place That’s typical in merge drawing mode, where Flash treats shapes not as complete objects, but as a collection of disparate elements In the Tools panel, click the Rectangle tool (or press the R key) When the Rectangle tool is selected, the Options section at the bottom of the Tools panel displays the Object Drawing icon (Figure 2-9, left) If the icon (a circle in a square) appears pressed-down, then you’re in object drawing mode and need to switch back to merge drawing mode If necessary, click the Object Drawing button (or press J) to deselect object mode When the Object Drawing button is deselected, you’re in merge mode Draw a rectangle on the stage You can set the stroke and fill however you want before you draw the rectangle Select the Oval tool (O) and then change the fill and stroke color Set the stroke height to about or pixels If you need a refresher on setting the stroke and fill properties, see page 50 Draw an oval that partially overlaps the rectangle, as shown at the top of Figure 2-8 The oval is drawn on top of the rectangle In general, Flash places the most recently drawn graphic on top of previous graphics; however, there are some gotchas when you mix and match merge and object graphics 54 Flash CS5: The Missing Manual Choosing a Drawing Mode With the Selection tool (V), click the middle of the oval The fill portion of the oval displays a dotted highlight When you see a dotted highlight like this, it’s a signal that the graphic was drawn in merge mode And, sure enough, the Properties panel identifies the selection as a Shape Drag the oval away from the rectangle As you drag, the fill moves away from the rectangle, leaving the empty stage b eneath When shapes drawn in merge mode overlap, the bottom shape is erased Notice that the stroke portion of the oval remains behind A single click on the fill selects only the fill portion of the oval If you want to select the fill and the stroke, then double-click the fill There are more tips on using the Selection tool on page 58 When to use merge drawing mode As shown in Figure 2-8 (bottom), when you overlap objects in merge drawing mode, Flash erases the hidden portions of the objects underneath You’ll probably want to use merge mode if you fall into one of the following three categories: • You want to be able to select portions of objects or create a deliberate “cutout” effect by overlapping objects and letting Flash the cutting for you • You plan to create no more than one shape or object per timeline layer, so overlapping isn’t an issue For more details on layers, see page 129 • You’re familiar (and comfortable) with an older version of Flash Merge was the only drawing mode before Flash Object Drawing Mode The object drawing mode tells Flash to think of shapes the way most humans naturally think of them: as individual, coherent objects Overlapping shapes in object mode doesn’t erase anything, and when you select a shape, you select the entire shape— not just the fill, or line, or portion of the shape you selected If you’ve used Adobe I llustrator or the drawing tools in Microsoft Office, this drawing mode will seem a f miliar To get a feeling for object mode characteristics, repeat the steps that begin on page 54 In step 2, toggle object drawing mode on by making sure the Object Drawing button is depressed, as shown at left in Figure 2-9 As you draw, your shapes look similar to the ones drawn in merge mode However, when you select the oval in step 6, you won’t notice the dotted selection pattern Instead, you see a rectangular outline around the oval, as shown bottom right in Figure 2-9 That’s the object mode’s way to show that an object is selected The words “Drawing object” at the top of the Properties panel are another clue that you selected an object mode graphic Tip: The selection box for graphics drawn in object mode is rectangular That makes it a little difficult to spot when the selected object is a rectangle or a straight line In those cases, if you need to double-check, look for the words “Drawing object” in the Properties panel Chapter 2: Creating Simple Drawings 55 Choosing a Drawing Mode Figure 2-9: Left: To activate Flash’s object drawing mode, first click the Pencil, Pen, Line, Brush, or any of the Shape tools, and then click the Object Drawing icon that appears in the Options section of the Tools panel Top right: After you’ve activated the object drawing mode, you draw your lines, fills, and shapes as normal—with one difference When you select (V) an object, it’s all or nothing: Flash highlights the entire selection with a selection box (like around the oval selected here) Pencil tool Brush tool Bottom right: Unlike the shapes you create using the merge drawing mode, the shapes you create in object mode retain their integrity—even when you overlap them and move them around Object drawing mode Tip: You can mix and match modes in a single document For example, you can use object drawing mode for some shapes and merge drawing mode for others The drawing mode button on the Tools panel is a toggle, so the mode you choose remains in effect until you change it Flash even remembers the setting from one document to another So if you decide to use only object drawing mode, you can set it once and forget it When to use object drawing mode In early versions of Flash, you had to create your objects on separate layers if you wanted to overlap them with impunity In Flash CS5, simply activate object drawing mode and bingo—Flash lets you stack and overlap your objects on a single layer as easily as a deck of playing cards • Choose object mode if you want to work with entire objects (as opposed to portions of them) • Choose object mode if you’re used to working in programs like Adobe Illustrator and want a familiar graphics editing environment 56 Flash CS5: The Missing Manual Choosing a Drawing Mode Flash’s original drawing system, merge drawing mode, is unlike most other programs’ drawing tools, while the object drawing mode will seem familiar if you’re coming from other programs, like Adobe Illustrator Even if this is your first dventure with a a computer-based drawing program, you may find the object drawing mode easier to learn and use Each exercise in this book will clearly explain which drawing mode is used Figure 2-10: Each tool in the Tools panel (except the olyStar P tool) has a single-letter shortcut key Just press the key to activate that tool Some tools, such as the Brush tool and the Spray Brush tool, share the same shortcut key, so pressing the key toggles between the two tools Learning the shortcuts for the tools you use most often lets you work much faster Select - V Subselect - A Lasso - L Text - T Line - N Pencil - Y Deco - U Eyedropper - I Eraser - E Pan - H Zoom - Space Using Merge Mode and Object Mode Together You can use merge mode shapes and object mode graphics together in the same Flash document Here are a few tips that will make life with mixed graphics a little easier: • Merge mode shapes always appear underneath object mode graphics if they’re on the same timeline layer To make merge mode shapes appear on top of object graphics, place them on a separate timeline layer, as described on page 129 Chapter 2: Creating Simple Drawings 57 Choosing a Drawing Mode • If you’ve already created a drawing object using the object mode, you can c onvert it to a shape by selecting it and then choosing Modify➝Break Apart • If you’ve already created a shape in merge drawing mode and want to convert it to a drawing object, select the shape and then choose Modify➝Combine Objects➝Union The entire selection becomes an object Selecting Objects on the Stage Once you draw a line or a shape on your stage, you need to select it if you want to anything else to it—for example, if you want to change its color, make it bigger, move it, or delete it As you can see in Figure 2-11, the Tools panel has three tools that let you select an object on the stage—Selection, Subselection, and Lasso How these tools behave d epends on whether you’ve created your drawings in merge or object drawing mode (see the previous section) Selection tool Subselection tool Figure 2-11: Selecting an object on the stage to work with should be easy—and most of the time, it is; all you have to is click the Selection tool (circled) and then either click your object or click near it and drag a selection box around it But if your stage is crowded and you’re trying to pick out just one little tiny angle of a line or a portion of a drawing to manipulate, you may need to use either the Subselection tool or the Lasso tool Lasso tool Selection cursor Selection tool (shortcut key: V) This tool lets you select entire shapes, strokes, and fills, as well as symbols and bitmaps (If you’ve created objects in merge mode, the Selection tool also lets you select rectangular portions of those objects.) After you’ve made your selection, you can then work with it—move the object around the stage by dragging, for example • Using the Selection tool in merge mode To select a symbol, a bitmap, or one element of a shape (just the fill portion of a rectangle, for example) simply click the symbol, bitmap, or element To show that an object is selected, Flash covers selected merge mode graphic with a dotted pattern To select both the fill and stroke of a merge mode graphic, double-click the fill In merge mode, a single click on the stroke portion of a shape selects one line segment Double-clicking selects the entire stroke 58 Flash CS5: The Missing Manual Choosing a Drawing Mode To select a rectangular portion of a shape you’ve drawn in merge mode, click near (but not on) the shape and drag your cursor to create a selection box around just the portion you want to select To select an entire shape, create a selection box around the whole shape, or double-click the shape • Using the Selection tool in object mode To select an object created in object mode, click it A rectangular outline appears around the selected object Subselection tool (shortcut key: A) The Subselection tool lets you reposition the individual points that define and control your strokes and fills These points are called anchor points, and the connecting lines are called segments • Using the Subselection tool in merge mode To select a stroke or a fill created in merge mode, click the Subselection tool, and then click the stroke or outline of the fill you want to move or change Flash automatically redisplays that line as a bunch of individual anchor points and segments As you move your cursor over the selection, the arrow cursor displays either a black or a white box To move the entire stroke or fill, click and drag when a black move box appears on the cursor To change the shape of an object, click and drag when a white edit box appears on the cursor (See page 156 for details on editing graphics with anchor points.) • Using the Subselection tool in object mode The Subselection tool works in a similar way on objects drawn in object mode You can use it to move or change the shape of an object Move the cursor over the stroke or outline of an object, and you see the black move box or the white edit box Tip: You can’t select an object’s fill with the Subselection tool; however, you can “open up” an object graphic and edit it as if it were a merge shape Double-click the object with the Selection (V) tool Other graphics on the stage fade, and the drawing object opens in edit mode At this point it behaves like a merge shape When you’re finished editing, you close the graphic by clicking the left-pointing arrow in the upper-left corner of the work window Lasso tool The Lasso tool is the one to use when you want to select a weirdly shaped portion of an object—say, you want to create a hand-shaped hotspot in the middle of a square bitmap—or when you need to select a weirdly shaped object that’s super-close to another object • Using the Lasso tool in merge mode To select a nonrectangular portion of an object drawn in merge mode, first click the Lasso tool; then click near (or on) the object and drag your cursor (as if you were drawing with a pencil) to create a nonrectangular shape • Using the Lasso tool in object mode To select an entire object drawn in object mode, select the Lasso tool, click near the object, and then drag your cursor over Chapter 2: Creating Simple Drawings 59 Choosing a Drawing Mode the edge of the object In object mode, dragging over a portion of the object selects the whole object Note: If you need to deselect an object after you’ve selected it (say, you changed your mind and don’t want to change the object’s color after all), you have several choices You can press Esc; you can press Ctrl+Shift+A (Shift-c-A); you can click an empty spot on the stage; or you can select Edit➝Deselect All Special note to Photoshop fans: Ctrl+D (c-D on the Mac) works differently in Flash than it does in other Adobe programs In Photoshop or Photoshop Elements, Ctrl+D (c-D) is the keyboard shortcut that deselects an object In Flash, the same keystroke creates a duplicate of the selected object Essential Drawing Terms In Flash, a cigar isn’t just a cigar A circle isn’t even just a circle As explained earlier, every drawing you create using Flash’s drawing and painting tools is composed of strokes and fills As shown in Figure 2-12, you create strokes and fills with a variety of drawing tools: Line stroke Pen stroke Pencil stroke Brush fill Triangle shapes Rectangle shape Oval shape Star shape Figure 2-12: Here you see examples of strokes and fills The strokes appear black, while the fills show as gray Flash doesn’t automatically create fills when you create shapes with the Line, Pencil, and Brush tools, so as you see in the triangle shapes, the center remains the same color as the stage Later you’ll see how to manually create a fill or change a fill color with the Paint Bucket tool (page 83) Polygon shape Paint bucket • Strokes A stroke in Flash looks just like the stroke you make when you write your name on a piece of paper It can either be a plain line or the outline of a shape Strokes can be dotted or dashed lines You draw strokes in Flash using the Pen, Pencil, and Line tools When you use one of the Shape tools (for example, to create a square or polygon), Flash includes a stroke outline free of charge 60 Flash CS5: The Missing Manual Creating Original Artwork Tip: You can quickly add a stroke to outline a shape that doesn’t have a stroke Choose the Ink Bottle tool (S), and then click the shape If you don’t see the Ink Bottle on the Tools palette, click the Paint Bucket and continue to hold down the mouse button The Ink Bottle appears on a pop-out menu • Fills Flash recognizes two kinds of fills: the marks you make with the Brush tool, and the interior of a shape (in other words, everything inside the strokes that form the outline of a shape) In a lot of cases, your shapes comprise both strokes and fills You can create fill- and stroke-containing shapes in one fell swoop using Flash’s shape tools—Oval, Rectangle, and PolyStar If you draw a shape by hand using the Pen, Pencil, or Line tools, then you need to manually add a fill if you want one using the Paint Bucket tool That process is described on page 83 Why the emphasis on the technical terms “stroke” and “fill” when all you want to is draw a smiley face? For one very important reason: Flash treats strokes and fills differently You use different tools to create them and different tools to modify them If you don’t know the difference between a stroke and a fill, you won’t be able to a whole lot with the drawing and painting tools described in this chapter DESIGN TIME To Thine Own Self Be True When asked about her artistic process, a celebrated 20th century painter said that in order to create, she had to toss aside everything she knew about matching colors, standard techniques, and even the way she held her pencil and her paintbrush As a right-handed person with a strongly analytical mind, she discovered her ability to create only after she started drawing with her left hand She learned to ignore what everyone else told her about how she should be working almost exclusively, that doesn’t mean you should the same Experiment and find what works best for you! To help get your juices flowing, the stick figure you see in this chapter shows several ways you can use Flash’s painting and drawing tools Each of these tools has its pros and cons, so try them all out for yourself After all, the Flash police aren’t going to arrest you if you sketch a beard and moustache on your stick figure using the Brush tool instead of the Pencil There’s a moral to this story: Just because one person finds the Pencil or Brush the easiest tool to use and sticks to it Creating Original Artwork Before you can create an animation, you have to have something to animate You start with one drawing and then create a bunch more (often by altering the first drawing slightly) For example, if you want to create an animation showing a raccoon marching in place, you need to draw a picture of a raccoon standing still; another picture of the same raccoon lifting its left foot; and still more pictures showing the raccoon putting its left foot down, lifting its right foot, and so on Put them all together using Flash’s timeline (Chapter 3), and you’ve got yourself an animation Chapter 2: Creating Simple Drawings 61 Creating Original Artwork Note: You’re not limited to using your own drawings Flash lets you import, or pull in, existing drawings and photos—and even sound and video clips Page 329 shows you how to import files This section shows you how to use basic Flash tools to create a simple stick person drawing You’ll see the Line, Pencil, Pen, Brush, and shape tools (Oval, Rectangle, and PolyStar) in action and learn the differences among them (some are better for creating certain effects than others) You’ll also find out how to add color to a Flash drawing and how to erase your mistakes Drawing and Painting with Tools One of the true beauties of creating digital artwork—besides not having to clean up a mess of paint spatters and pencil shavings—is that you don’t have to track down your art supplies—the one pen that feels good in your hand, the right kind of paper, the sable brush that smells like paint thinner Instead, all you need to is display Flash’s Tools panel In this section, you’ll see Flash’s drawing and painting tools in action: the Line, Pen, Pencil, Brush, and shape tools You’ll have a chance to use the Selection, Subselection, and Lasso tools And finally, you’ll get a quickie introduction to color— specifically, how to change the colors of strokes and fills Line tool You use the Line tool in Flash to draw nice, straight lines—perfect all by themselves or for creating fancy shapes like exploding suns and spiky fur Make sure you’re in object drawing mode, and then follow these steps to start drawing your stick figure using the Line tool: In the Tools panel, click the Line tool, as shown in Figure 2-13 Flash highlights the Line tool in the Tools palette to let you know you’ve successfully selected it When you move your cursor over the stage, you see it’s turned into crosshairs Click anywhere on the stage and drag to create a short horizontal line To end your line, let go of the mouse Your line (technically called a stroke) appears on the stage Click above the horizontal line, and drag down to create a vertical line The result is a cross Next, you’ll add legs by drawing diagonal lines Click the bottom of the vertical line and drag down and to the left; then click the bottom of the vertical line again and drag down and to the right Figure 2-13 shows the result It doesn’t look like much yet, but it’s actually the basis for a stick figure you’ll create as you experiment with Flash’s drawing and painting tools in the following sections 62 Flash CS5: The Missing Manual Creating Original Artwork Figure 2-13: The Line tool is the easiest, quickest way to create straight lines in Flash (like the four straight lines you see here) If you’d like to customize the way your lines look, head to the Properties panel There you find options that let you make a line thicker, change it to a different color—even turn it into a dashed or dotted line, instead of a plain solid line (If you don’t see the Properties panel, choose Window➝Properties to display it.) Pencil tool The Pencil tool lets you draw free-form strokes on the stage, similar to the way you draw using a regular pencil on a regular sheet of paper Unlike the Line tool, the Pencil tool doesn’t make you stick to the straight and narrow, so it lends itself to curving lines and fine details, like hands and faces Here’s how to use the Pencil tool: In the Tools panel, click the Pencil tool Flash outlines the Pencil tool to let you know you’ve successfully selected it, and Pencil-related options appear in the Options section at the bottom of the Tools panel When you move your cursor over the stage, you see it’s turned into a miniature pencil In the Options section at the bottom of the Tools panel, click the down arrow A fly-out menu appears In the fly-out menu, turn on the checkbox next to Smooth The Smooth option gently corrects any jiggles you make as you draw with the pencil—essential when you’re trying to draw small lines, like this stick figure’s face and hands Click the stage and drag to draw a little face, hands, and feet similar to the ones in Figure 2-14 While you’re on the Options section, there are other ways you can modify how the Pencil tool works: The Straighten option emphasizes the corners you draw Chapter 2: Creating Simple Drawings 63 Creating Original Artwork with the Pencil (for example, turning squarish circles into squares or roundish squares into circles—definitely not what you want when you’re trying to draw the feet you see in Figure 2-14), and the Ink option leaves your Pencil strokes just as they are, jiggles and all Pencil tool Figure 2-14: Don’t be surprised if your results look a bit shakier than you might expect If you’ve got an extra hundred bucks lying around, you can buy a graphics tablet (see the box on the next page) to make drawing in Flash a bit easier, but most people start out using a computer mouse to draw—and it’s a lot harder than it looks Fortunately, Flash has Pencil options you can use to help you control your drawing results Pencil mode Here are some tips for drawing with the Pencil tool: • If the object you’re drawing with the Pencil is small, press Ctrl+= (c-=) to get a better view You can use the Hand tool (H) to position the stage where you want it When you’re ready to zoom out, press Ctrl+hyphen (c-hyphen) For more tips on changing the view, zoom over to page 36 • Don’t the same work twice For example, in Figure 2-14, a hand and shoe were drawn once, then duplicated (Ctrl+D or c-D) While still selected, they were flipped horizontally using Modify➝Transform➝Flip Horizontal • You can also straighten or smooth a line you’ve already drawn To so, select the line you want to modify using any selection tool—the Lasso tool (page 59) works great When a line is selected, buttons for the Straighten and Smooth commands also appear in the Options section of the Tools panel You can click multiple times to increase the effect 64 Flash CS5: The Missing Manual Creating Original Artwork UP TO SPEED Mouse vs Graphics Tablet If you expect to a lot of Flash work, yourself a f avor: Ditch your mouse and get yourself a graphics tablet (sometimes referred to as a digitizing tablet, graphics pad, or drawing tablet) A graphics tablet is basically an electronic sketch board with a stylus that doubles as a pen, pencil, and brush Today’s graphics tablets connect through the Universal Serial Bus (USB) port, typically located at the front or back of your computer, so they’re a snap to c onnect and remove With a graphics tablet, drawing and painting feels a whole lot more natural Your results will look a lot better, too When you use a graphics tablet, Flash recognizes and r ecords subtle changes, like when you change the pressure or slant of the stylus—something you don’t get with a plain old mouse (In fact, if you install your graphics tablet correctly, Flash displays extra icons on the Tools panel that relate only to graphics tablets For example, you can a djust how the tablet behaves when more or less pressure a is pplied.) Expect to spend anywhere from $100 to $500 on a good graphics tablet Pen tool If you want to create a complex shape consisting of a lot of perfect arcs and a lot of perfectly straight lines, then the Pen tool is your best choice To create straight lines with the Pen tool, click the stage to create anchor points, which Flash automatically connects using perfectly straight segments The more times you click, the more segments Flash creates—and the more precisely you can modify the shape you draw, since you can change each point and segment individually (see Chapter 5) When you want to stop creating anchor points, double-click the mouse or press the Esc key If you drag the Pen tool (instead of just clicking), the Pen lets you create perfectly curved arcs Note: Working with the Pen tool is a lot (a whole lot) less intuitive than working with the other Flash drawing tools Because you can easily whip out a triangle with the Line tool or a perfect circle with the Oval tool, save the Pen tool for when you’re trying to draw a more complex shape—like a baby grand piano—and need more control and precision than you can get freehanding it with the Pencil or Brush As you can see in the Tools panel in Figure 2-15, the Pen tool icon looks like the nib of an old-fashioned fountain pen To draw a straight line with the Pen tool: Select the Pen tool Your cursor changes into a miniature pen nib Click the stage, move your cursor an inch or so to the right, and then click again Two anchor points appear, connected by a straight segment Chapter 2: Creating Simple Drawings 65 Creating Original Artwork Pen tool Figure 2-15: After you select the Pen tool, click the stage once, move your mouse a couple of inches, and then click again Each time you click, Flash creates an anchor point As soon as you have two or more anchor points, Flash automatically connects them with straight-line segments Segment Anchor point Move the cursor again, stopping where you want to anchor the line, and then change direction again Figure 2-15 shows the results of several clicks Flash keeps connecting each a nchor point every time you click the stage To break a line and start a new one, double-click where you want the first line to end To draw a curve with the Pen tool: Select the Pen tool Your cursor changes into a miniature pen nib Click the stage once, and then move your cursor an inch or so to the right A single anchor point appears Note: Flash lets you change the way it displays anchor points, as well as the way your cursor appears, when you’re using the Pen tool You can even tell Flash to preview line segments for you, much as it previews curves To change any of these preferences, select Edit➝Preferences (Flash➝Preferences for the Mac) Then, in the Preferences window, select the Drawing category The Pen tool preferences appear at the top of the Preferences window Click again, but this time, without letting go of the mouse button, drag the cursor around 66 Flash CS5: The Missing Manual ... 14 9 15 1 15 6 15 9 16 3 16 3 16 4 16 6 17 3 17 8 18 1 18 3 18 7 18 8 19 0 19 0 19 1 19 1 19 5 19 6 19 7 table of contents vii Applying a Gradient Importing... 12 1 12 1 12 4 12 6 12 9 13 3 13 5 13 6 13 8 13 9 14 0 14 1 14 2 14 2 14 3 14 5 Chapter 5: dvanced Drawing and Coloring 14 9 A Selecting Graphic Elements ... Tween vi table of contents 87 87 88 92 93 94 95 98 10 2 10 4 10 6 10 7 10 7 10 8 10 9 10 9 11 0 11 1 11 5 11 7 11 8