42
3 Using the Drawing and Color Tools Drawing Tools Defined 29 Lines, Strokes, and Fills Defined 31 Drawing with the Pencil Tool 32 Using the Oval and Rectangle Tools 34 Using the Brush Tool 37 Modifying Strokes and Fills 46 Understanding the Flash Drawing Models 49 The Merge and Object Drawing Models 51 Grouping Objects 55 Creating Gradients 57 Drawing with the Pen Tool 61 Modifying Paths 65 Flash 8 has a powerful set of drawing and color tools to help you create artwork for your animations. In addition to creating drawings from scratch, you can also import existing artwork into Flash 8 from other pro- grams such as FreeHand, Fireworks, Photoshop, or Illustrator. You’ll learn how in Chapter 19, “Integration.” In this chapter, you’ll learn how to create drawings from scratch in Flash 8 using the drawing and color tools. You’ll also learn how to apply complex gradients to objects, and you’ll learn about the new object drawing model, which makes it easier to work with and modify shapes. Flash Professional 8 : HOT 28

Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

3Using the Drawing andColor Tools

Drawing Tools Defined 29

Lines, Strokes, and Fills Defined 31

Drawing with the Pencil Tool 32

Using the Oval and Rectangle Tools 34

Using the Brush Tool 37

Modifying Strokes and Fills 46

Understanding the Flash Drawing Models 49

The Merge and Object Drawing Models 51

Grouping Objects 55

Creating Gradients 57

Drawing with the Pen Tool 61

Modifying Paths 65

Flash 8 has a powerful set of drawing and color tools to help you create

artwork for your animations. In addition to creating drawings from

scratch, you can also import existing artwork into Flash 8 from other pro-

grams such as FreeHand, Fireworks, Photoshop, or Illustrator. You’ll learn

how in Chapter 19, “Integration.”

In this chapter, you’ll learn how to create drawings from scratch in Flash 8

using the drawing and color tools. You’ll also learn how to apply complex

gradients to objects, and you’ll learn about the new object drawing

model, which makes it easier to work with and modify shapes.

Flash Professional 8 : H•O•T28

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 28

Page 2: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Flash 8 contains a set of powerful drawing tools.Although many of them may be familiar to youfrom other programs, you‘ll find some tools arequite unique. The following chart outlines thebehavior of each drawing tool, including the asso-ciated keyboard shortcuts, which may be familiar

to you from Chapter 2, “Understanding theInterface.” Don’t feel compelled to read througheverything here. If you want to jump into the exer-cises, go right ahead. Either way, you’ll be com-fortable drawing in Flash 8 in a very short time!

29Chapter 3 : Using the Drawing and Color Tools

Drawing Tools Defined

Drawing Tools in Flash 8

Icon Name What Does It Do?

Selection (V) Selects, moves, and edits shapes and drawings.

Subselection (A) Modifies the anchor points and tangent handles of a shape’s pathor outline.

Free Transform (Q) Freely transforms objects, groups, instances, or text blocks. Withthis tool, you can move, rotate, scale, skew, and distort individualtransformations or combine several transformations all at once.

Gradient Modifies the gradient fills of shapes. With this tool, you can adjustTransform (F) the size, direction, or center of the fill; precisely control the loca-

tion of the gradient focal point; and apply other parameters toyour gradients.

Line (N) Draws straight lines. Holding down the Shift key lets you con-strain the lines to 45-degree angles. You can modify the linesdrawn with this tool with the Ink Bottle tool or by using the con-trols in the Property Inspector.

Lasso (L) Creates irregular-shaped selections of your artwork by drawing afreehand selection around it. Use the Lasso options to fine-tuneand adjust your selections.

Pen (P) Creates straight or curved line segments and is the only drawingtool in Flash 8 that lets you create Bézier curves, which gives youprecise control of your line segments.

Text (T) Creates static text or text fields. With text fields, you can acceptuser input and even display HTML-formatted text that’s beenloaded from an external text file into a movie.

Oval (O) Creates circles and ovals composed of fills and strokes, just fills,or just strokes. Holding down the Shift key lets you create perfectcircles. Holding down the Alt key (Windows) or the Option key(Mac) lets you draw a circle or oval from the center.

continues on next page

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 29

Page 3: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

30 Flash Professional 8 : H•O•T

Drawing Tools in Flash 8 continued

Icon Name What Does It Do?

Rectangle (R) Creates rectangles and squares composed of strokes and fills, juststrokes, or just fills. Holding down the Shift key creates perfectsquares. Holding down the Alt key (Windows) or the Option key(Mac) lets you draw a rectangle or square from the center.

Pencil (Y) Creates lines in one of three different modes: Straighten, Smooth,and Ink.

Brush (B) Creates shapes with fills only. You can adjust the size, style, andbehavior of the brush by adjusting the tool options or by usingthe Property Inspector.

Ink Bottle (S) Changes the color or width of a line or adds a stroke to a shape.The Ink Bottle has no effect on the fill of a shape.

Paint Bucket (K) Adds a fill inside a shape and can change the color of a fill. ThePaint Bucket has no effect on the stroke of a shape.

Eyedropper (I) Copies the fill or stroke attributes of an object so you can applythem to another object. This tool is especially useful when youwant to copy the exact color of one object and use it on anotherobject.

Eraser (E) Removes any unwanted image areas on the Stage. Holding down the Shift key lets you erase in perfect horizontal and vertical lines.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 30

Page 4: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

In addition to learning how each of the drawingtools behave, you need to understand the differ-ence between fills, strokes, lines, and shapes.These differences can be confusing because the

interface refers to both lines and strokes. The fol-lowing chart provides an example and a briefexplanation of each:

31Chapter 3 : Using the Drawing and Color Tools

Lines, Strokes, and Fills Defined

Lines, Strokes, and Fills

Lines and strokes Create line drawings with the Pencil, Pen, andLine tools. Create strokes or outlines with theRectangle and Oval tools. The terms stroke andfill are used interchangeably in the Flash 8 docu-mentation and throughout this book because youcan modify both shapes and strokes using thesame tools. Lines and strokes are independent offills, and you can modify them using the InkBottle, the Color and Tool modifiers in the tool-bar, the Color Mixer panel, or using the StrokeColor in the Property Inspector.

Fills Create fills with the Brush and Paint Bucket tools.You can create fills without strokes, as shown inthe illustration here. You can modify fills using thePaint Bucket, the Color and Tool modifiers in thetoolbar, the Color Mixer panel, or the PropertyInspector.

Strokes, lines, fills, Attach strokes and lines to fills, as shown in the and shapes illustration here, with the Ink Bottle tool. Modify

them using the Ink Bottle, the Color and Toolmodifiers in the toolbar, the Color Mixer panel, or the Property Inspector. Flash 8 refers tostrokes, lines, fills, or a combination thereof, asshapes. Shapes appear as a dotted mesh on theStage and display the word shape in the PropertyInspector.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 31

Page 5: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

The Pencil tool creates freehand line drawings. By selecting one of the three modes—Straighten,Smooth, or Ink—you can control how the lines are drawn. In this exercise, you will draw a circle with the Pencil tool using each of the three modes, so you can better understand how each one behaves.

Copy the chap_03 folder from the HOT CD-ROM to your Desktop. Open pencil.fla from thechap_03 folder.

As you can see, pencil.fla is a blank file with the Stage dimensions set to 400 x 200 pixels, which shouldbe enough space for you to draw some shapes.

Select the Pencil tool from the toolbar and choose Straighten from the Options pop-up menu.

As you can see, the Options section of the toolbar is context-sensitive based on the tool selected in the toolbar.

2

1

32 Flash Professional 8 : H•O•T

1E X E R C I S E

Drawing with the Pencil Tool

N O T E : About the Pencil Tool ModesIn Flash 8, the Pencil tool is similar to tools in other graphics programs, such as AdobeIllustrator and Adobe Photoshop. One of the great features of the Pencil tool in Flash8 is the different drawing modes—Straighten, Smooth, and Ink—which give you moreprecise control over your drawings.

As you can see in the illustration here, drawing with the Straighten mode creates perfect, geometric shapes, drawing with the Smooth mode smoothes out the edges of shapes, and drawing with the Ink mode represents the line exactly as you draw it,giving it the most hand-drawn appearance of the three modes.

StraightenPerfect look

InkHand-drawn look

SmoothSmooth look

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 32

Page 6: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

The circles as you draw in Straighten mode The circle when you finish drawing in Straighten mode

Click and drag to draw a circle on the Stage.

Notice when you release the mouse, the shape automatically snaps to a perfect circle. The Straightenmode guesses what shape you are trying to draw and automatically creates a perfect, geometric shape.

In the toolbar, choose Smooth from the Options pop-up menu.

The circle as you draw in Smooth mode The circle when you finish drawing in Smooth mode

Click and drag to draw another circle on the Stage.

Notice when your release the mouse, the circle gets smoother, but the change is less significant thanwhen you used Straighten mode.

The circle as you draw in Ink mode The circle when you release the mouse button

In the toolbar, choose Ink from the Options pop-up menu. Click and drag to draw a third circle onthe Stage.

Notice when using the Ink mode there is very little change in the circle when you release the mouse.

Tired of drawing circles? Go ahead and practice drawing other simple shapes, such as squares, trian-gles, polygons, and so on, with each of the different Pencil options. You’ll get an even better idea of howeach drawing mode works and how they can help you create artwork in Flash 8.

Tip: To clear the Stage, press Ctrl+A (Windows) or Cmd+A (Mac) to select everything on the Stage, thenpress the Delete key.

When you are done playing with the Pencil tool, close pencil.fla. You don’t need to save your changes.8

7

6

5

4

3

33Chapter 3 : Using the Drawing and Color Tools

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 33

Page 7: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

The Oval and Rectangle tools are ideal for creating geometric shapes, such as ovals, circles, rectangles,and squares. You can create simple shapes with independent lines and fills quickly and effortlessly. In thisexercise, you’ll learn how to use these tools.

Open shapes.fla, which is a blank file you can use to draw shapes, from the chap_03 folder.

Select the Oval tool from the toolbar. At the bottomof the toolbar are two options: Object Drawing, which letsyou choose which drawing model to use (you will learnabout drawing models later in this chapter), and Snap toObjects, which makes it easier to align objects on theStage. Click the Snap to Objects button.

In this exercise, you’ll learn how to create shapes using themerge drawing model (the default drawing model) and theSnap to Objects feature. Later in this chapter, you’ll createshapes using the new object drawing model.

Hold down the Shift key and click and drag to draw acircle on the Stage.

Holding down the Shift key while drawing creates a perfectcircle. Notice Flash 8 automatically uses the current fill andstroke colors to create the circle.

Click and drag to create an oval on the Stage.

Notice when you don’t hold down the Shift key while draw-ing, Flash 8 doesn’t constrain the shape as a perfect circle.Also notice the drawing pointer is different than it was inStep 3. The pointer change is a visual clue that you aredrawing an oval or a circle.

4

3

2

1

34 Flash Professional 8 : H•O•T

2E X E R C I S E

Using the Oval and Rectangle Tools

Object Drawing

Snap to Objects

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 34

Page 8: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select the Rectangle tool from the toolbar. Inthe Options area of the toolbar, leave the Snap toObjects button turned on and the Object Drawingbutton turned off.

Hold down the Shift key and click and drag tocreate a square on the Stage.

Notice the pointer indicates you are drawing a“perfect shape,” the same as it did when you created a circle in Step 3. Again, just as when you createdthe circle and oval, Flash 8 uses the selected fill and line colors.

Take a look at the corners of the square you just drew. Notice they are square, 90 degree corners. What ifyou want to create rounded corners? Not to worry, you can easily create rounded corners using the SetCorner Radius feature. You’ll learn how in the next steps.

At the bottom of the toolbar, click the Set Corner Radius button to open the Rectangle Settings dialog box.

Type 25 in the Corner radius field and clickOK.

This option will add rounded corners with a 25-point radius to the next rectangle you draw.You can enter a value between 0 and 999 in theRectangle Settings dialog box. The higher the number, the more rounded the corners.

Click and drag to draw another rectangle onthe Stage.

Notice the corners of the rectangle are rounded,reflecting the value you entered in the RectangleSettings dialog box. Nice!

9

8

7

6

5

35Chapter 3 : Using the Drawing and Color Tools

Object Drawing Off

Snap to Objects On

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 35

Page 9: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Save your changes to shapes.fla; you will need this file again in Exercise 6. Close the file.10

36 Flash Professional 8 : H•O•T

T I P : Rounding Corners As You DrawYou may find it difficult to determine the exact radius of the corners you want beforeyou draw a rectangle and, unfortunately, you can’t use the Set Corner Radius optionafter you draw a rectangle. Luckily, a handy keyboard shortcut helps you interactivelycreate rounded corners as you draw rectangles in Flash 8. As you click and drag todraw a rectangle, press the down arrow to increase the corner radius or press the uparrow to increase the corner radius. This is a very cool little shortcut you’ll use often!

N O T E : Oval and Rectangle SettingsIf you want to create a specific-sizedoval or rectangle, you may find itdifficult to do so with the Oval toolor Rectangle tool. Fortunately, youcan also specify the width andheight of ovals and rectangles, aswell as the corner radius of rectan-gles, by using the controls in the Oval Settings and Rectangle Settings dialog boxes.

With either the Oval tool or Rectangle tool selected in the toolbar, Alt+click(Windows) or Option+click (Mac) an empty area of the Stage where you want to cre-ate the oval or rectangle. In the Oval Settings or Rectangle Settings dialog box, spec-ify your settings and click OK. Flash 8 automatically draws an appropriate-sized oval orrectangle where you clicked.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 36

Page 10: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

You can use the Brush tool to paint shapes with solid colors, gradients, and even bitmaps fills. In thisexercise, you’ll learn how to use the Brush tool to create and modify shapes.

Open paint.fla, which is a blank file you can use to paint shapes, from the chap_03 folder.

Select the Brush tool from the toolbar.

Notice there are several options for the Brushtool—Object Drawing, Lock Fill, Brush Mode, Brush Size, and Brush Shape. You’ll learn aboutthese options in this exercise.

Draw a circle on the Stage.

Notice Flash 8 uses the fill color for this shape, notthe stroke color. The Brush tool creates shapesthat are fills and, therefore, only uses the fill color.

At the bottom of the toolbar, click to expandthe contents of the Brush Size pop-up menu.Select the fourth size from the top.

As you can see from the preview, this is a smallerbrush tip than the default brush tip you worked within Step 3. You’ll see how it works in the next step.

Draw a smaller circle inside the large one onthe Stage.

Notice the smaller brush size creates a narrower fillshape than the shape you drew in Step 3.

5

4

3

2

1

37Chapter 3 : Using the Drawing and Color Tools

3E X E R C I S E

Using the Brush Tool

Brush Size

Brush Shape

Lock Fill

Brush Mode

Object Drawing

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 37

Page 11: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

At the bottom of the toolbar, click to expand the con-tents of the Brush Shape pop-up menu. Select the fifthshape from the bottom.

As you can see from the preview, this tip has a differentshape than the default, round brush you’ve been workingwith. You’ll see how it works in the next step.

Draw another circle on the Stage.

Notice the different result between this brush shape andthe one you used in Steps 3 and 5. You can produce somevery nice calligraphy effects with this brush shape because itchanges thickness depending on the direction of your brushstroke—just like working with a calligraphy pen or a flat paintbrush.

Experiment with the other brush shapes and sizes so you are more comfortable with the Brush tool.If you have a graphics tablet, try out the pressure sensitivity with the Brush tool.8

7

6

38 Flash Professional 8 : H•O•T

T I P : Working with a Wacom TabletFlash 8 offers support for most pressure-sensitive graphics tablets, including Wacomtablets. Using a tablet can help you create natural-looking shapes with a hand-drawn look.As you increase pressure on the tablet, the width of the shape will increase, whereas lesspressure will create a thinner shape. For more information, refer to the Wacom Web site:www.wacom.com.

T I P : Adding Strokes to Brush ShapesBecause the Brush tool creates shapes thatare fills, you can use the Ink Bottle to easilyadd a stroke to the shapes you create. You’lllearn how to use the Ink Bottle in Exercise 4.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 38

Page 12: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

When you are done experimenting with the Brush tool, close paint.fla. You don’t need to save yourchanges.9

39Chapter 3 : Using the Drawing and Color Tools

V I D E O : painting.movIn the last exercise, you learned how to create and edit brush strokes. There are anumber of other useful features you can use with the Brush tool, such as Paint Fills,Paint Selections, Paint Behind, and Paint Inside. To learn more about these features,check out painting.mov in the videos folder on the HOT CD-ROM.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 39

Page 13: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

In the last three exercises, you learned how to draw lines and create shapes with the Brush, Oval, andRectangle tools. You’ll learn how modify these shapes in the next two exercises. In this exercise, you’lllearn how to use the Property Inspector and Ink Bottle to modify the appearance of existing lines. Inaddition, you will learn some of the nuances involved in selecting lines and when to use the Ink Bottleversus the Property Inspector.

Open strokes.fla from the chap_03 folder.

This file contains shapes created with lines and fills,which you’ll use to modify lines and add strokes toshapes.

Select the Selection tool from the toolbar, andclick the squiggle drawing to select it.

Notice when you select the line, it gets a bit thicker,and a dotted mesh appears over it, indicating theline is selected.

Make sure the Property Inspector is visible. If it’s not, choose Window > Properties > Properties.

Note: You must select a line before you can modify its stroke settings using the Property Inspector.

3

2

1

40 Flash Professional 8 : H•O•T

4E X E R C I S E

Modifying Lines and Shapes

Unselected lineSelected line

Custom stroke styleStroke Height

Fill Color Stroke Style anchor pointStroke Color

Shape dimensions

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 40

Page 14: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

With the line still selected, choosethe dotted line from the Stroke Stylepop-up menu (the fourth style from thetop). Click a blank area of the Stage todeselect the line so you can clearly seethe change you just made.

Use the Property Inspector as a quick, easy way tomodify selected artwork. When you have a lineselected, the Property Inspector displays the currentsettings for that line. This is helpful when you need toknow what the line settings are for a particular object.The default stroke settings are a 1-point, solid black line.

With the line still selected on theStage, click the arrow next to StrokeHeight in the Property Inspector toreveal the Stroke Height slider. Clickand drag the slider to a setting of 4 toincrease the thickness of the line. (Youcan choose a line thickness from 0.25to 10.) Deselect the line by clicking ablank area of the Stage to clearly seethe changes.

5

4

41Chapter 3 : Using the Drawing and Color Tools

N O T E : The Property InspectorWhen you’re work-ing in Flash 8, you’llconstantly use theProperty Inspectorbecause it conve-niently displays, and lets you change, the settings associated with the currentlyselected object on the Stage, including text, symbols, video, frames, and even tools,all in one easy-to-use interface.

Deselect the line to see thechange in Stroke style

T I P : Hiding SelectionsWhen lines are selected, it can be hard to see the changes you’ve made. To temporar-ily hide the dotted mesh so you can better see the changes, press Ctrl+H (Windows)or Shift+Cmd+E (Mac) to hide and show the selection.

Deselect the line to show thechange in the stroke height.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 41

Page 15: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Click to select the line on theStage. In the Property Inspector,click the Stroke Color box andchoose another color. As you canprobably guess, changing thestroke color changes the color ofthe line. Deselect the line by click-ing a blank area of the Stage toclearly see the changes.

You’ve now learned how to selectand modify the style, height, andcolor of an entire stroke. Nextyou’ll learn how to modify theseproperties for just a line segment.

With the Selection tool selected in the tool-bar, position your pointer over the bottom line ofthe arrow.

As you position the pointer over the line, noticethe pointer changes to an arrow with a short,curved line, indicating you’re over a line segment.

Click the lower-right line segment.

Notice a dotted mesh appears over the line seg-ment you selected.

8

7

6

42 Flash Professional 8 : H•O•T

Deselect the line to show thechange in the stroke color.

T I P : Creating Custom Line StylesYou can create your own custom linestyles in the Stroke Style dialog box.With the line selected on the Stage,click the Custom button in the PropertyInspector. When the Stroke Style dia-log box opens, you can create your ownline style using the different options.The changes you make to the settingshere are temporary, and they will returnto their default settings once you quit Flash 8.

Click once to select a single linesegment of the arrow shape.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 42

Page 16: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

In the Property Inspector, usethe Stroke Height slider to changethe line width to 5.

Notice only the selected line segmentchanged. In order to modify a linesegment, you must select it beforeyou change the settings in theProperty Inspector. In this case, youselected only one of the six line seg-ments of the arrow shape.

With the line segment still selected, type 2.75 in the Stroke Height field in the Property Inspector.

If you know the exact value you want to use, you can change the width of a line by entering a specificnumeric value in the field next to the Stroke Height slider.

Click anywhere on the Stage to deselect the linesegment. Double-click any part of the arrow toselect all six line segments.

This shortcut is essential when you need to selectentire shapes composed of multisegmented lines.

Practice changing the style, width, and color of the selected lines using the controls in the PropertyInspector. Choose any setting you like—the point here is to become more comfortable with selectinglines and line segments and changing their properties with the Property Inspector.

Now you know how to modify an existing line using the Property Inspector, but what do you do whenyour object doesn’t have a line or a stroke? You add one using the Ink Bottle tool. You’ll learn how in thefollowing steps.

12

11

10

9

43Chapter 3 : Using the Drawing and Color Tools

Dotted mesh indicatesthe shape is selected.

Single line segment modified

T I P : Selecting Line SegmentsUnlike other drawing programs, Flash 8 breaks lines with hard angles into separate linesegments. For example, clicking the bottom line of the arrow shape selects only the bot-tom portion of the shape because the shape has six hard angles, creating six separatelines. If you want to select the entire shape, double-click only one of the line segments.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 43

Page 17: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select the Ink Bottle tool from the toolbar.

The Ink Bottle tool lets you add a stroke around an object withno stroke or make changes to the color, width, and texture ofexisting lines. With the Ink Bottle tool, you can set the strokecolor using the Property Inspector or the Stroke Color options inthe toolbar. Since you have used the Property Inspector quite abit in this exercise, next you’ll get a chance to use the color set-tings in the toolbar.

In the toolbar, click the Stroke Color box and choose a lightgray from the color palette.

Click the outer edge of the snowboard shape to add a stroketo the outside of the shape.15

14

13

44 Flash Professional 8 : H•O•T

N O T E : Property Inspector or Toolbar?In Flash 8, there are often several ways to access and work with the same tools. Inmost situations, you’ll find the Property Inspector will streamline your workflow,because it gives you quick access to the properties of the currently selected object or tool, in one convenient panel.

In contrast to the Property Inspector, which is useful for modifying the properties of existing shapes, you can use the toolbar to set object properties before creating new shapes.

Stroke Color

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 44

Page 18: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select the Selection tool from the toolbar and double-click to select the stroke around the snow-board shape. The dotted mesh appears, confirming you have selected the stroke. Press the Delete keyto remove the stroke.

Now you know how to add and remove strokes—it’s that easy!

Close strokes.fla. You don’t need to save your changes.17

16

45Chapter 3 : Using the Drawing and Color Tools

N O T E : The Ink Bottle toolThe Ink Bottle tool serves many pur-poses. You can add a stroke to anobject, as you did in the last step, oryou can modify the color, size, andstyle of the stroke for severalobjects at once. To modify morethan one object, hold down theShift key or the Ctrl (Windows) orCmd (Mac) key to multiple-selectthe objects on the Stage. You’ll findmultiple-selecting objects saves youa lot of time when you have severalobjects to add or modify.

N O T E : Complex ArtworkComplex objects containing numerous lines andshapes add to the file size of your final movie, so ifyour design allows, use complex artwork sparingly.

Stroke selected

Complex artworkwith many lines

Stroke deleted

FL08_03 (028-069).qxd 12/5/05 4:29 PM Page 45

Page 19: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

There are several ways to change the stroke and fill of a shape. You can specify the stroke and fill colorsbefore you create the shape; you can use the Paint Bucket tool to modify fill colors and the Ink Bottletool to modify strokes; or you can use the Color Mixer panel to create solid, gradient, and bitmap strokesand fills, which you can apply to the shapes you create. In this exercise, you’ll learn how to use the PaintBucket tool and the Color Mixer panel to modify strokes and fills of a shape.

Open modifyFills.fla from the chap_03 folder.

As you can see, this file contains one layer with a vector graphic of a snowboard.

Select the Selection tool from the toolbar. Click to select theblue background of the snowboard.

When a shape is selected, a dotted mesh appears over the shape.

Choose Window > Color Mixer to open the Color Mixer panel.

What Is the Color Mixer Panel?

The Color Mixer panel gives you precise control over color, all in one panel. The next exercise will showyou how to use the Color Mixer panel to create gradient fills.

3

2

1

46 Flash Professional 8 : H•O•T

5E X E R C I S E

Modifying Strokes and Fills

Fill Type

Brightness

Alpha

Color

Color

Fill Color

Stroke Color

Black and White

Color

Hex

Swap Colors

None

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 46

Page 20: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

In the Color Mixer panel, click the Fill Colorbox and select a shade of red from the palette.

Notice the background color of the snowboardchanges to red. Unfortunately, the insides of theletters are still blue. Not to worry, you’ll fix this inthe next step.

Select the Paint Bucket tool from the toolbarand click each of the blue shapes inside the lettersto change the color to match the currentlyselected color (the red background color youselected in Step 4).

Unlike the Color Mixer panel method, you don’tneed to select the artwork before you color it withthe Paint Bucket tool. If you are having troubleclicking on the small blue regions inside the type,you may want to magnify the contents of theStage using the Zoom tool. You can also use short-cut keys to zoom in and out by pressing Ctrl+ orCtrl– (Windows) or Cmd+ or Cmd– (Mac).

Tip: As a safeguard, you can always press Ctrl+Z (Windows) or Cmd+Z (Mac) to undo any mistakes you make.

5

4

47Chapter 3 : Using the Drawing and Color Tools

N O T E : Why Didn’t Everything Turn to the Color I Selected?Flash 8 treats shapes that are one continuous color as a single shape. Each time anew color appears, it is a new shape, which means you must modify it individually.In the previous step, the middle parts of the letters were treated as separateshapes because they were surrounded by white. Next, you will learn how toquickly fill these remaining blue shapes with the Paint Bucket tool.

T I P : Applying FillsUsing the Fill Color box in the Color Mixer panel or using the Paint Bucket tool in thetoolbar are two ways to change the solid fill color of an object. Both methods yield thesame results, but using the Property Inspector can help speed up your workflow, sinceyou can change and access many features using only one panel. You will use this thirdmethod of changing fill colors shortly, but note that you must have the object selectedfirst if you want to change the fill color using the Property Inspector.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 47

Page 21: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select the Selection tool from the toolbar. Clickthe letter B on the snowboard to select it. You’ll knowit’s selected when you see the dotted mesh.

You could select and change the color of each letterindividually, but that would be a time-consumingprocess. Instead, you’ll use the Shift key to multiple-select all the letters in the word BOARDING so you can fill all the letters at the same time.

Hold down the Shift key and click each of theremaining letters in the word BOARDING to multiple-select all the letters. If you make a mistake and wantto start over, press the Esc key to clear all selections,or click a blank area of the Stage to deselect.

Make sure the Property Inspector is visible. If it’snot, choose Window > Properties > Properties. In theProperty Inspector, click the Fill Color box and selectblack from the Fill Color palette.

Notice all the letters changed to the new color youselected! Now that you’ve mastered changing fills, it’stime to learn how to modify strokes. You’ll learn howin the next few steps.

With the Selection tool still selected in the tool-bar, double-click the snowboard to select it.

Double-clicking will select the entire object, includingboth strokes, the one around the snowboard, and alsothe one around the yin and yang design.

Tip: To select a single stroke, double-click the stroke itself.

In the Property Inspector, click the Stroke Colorbox and select a shade of yellow from the StrokeColor palette. Choose a different stroke style from theStroke Style pop-up menu. When you’re finished,click a blank area of the Stage to deselect your art-work so you can see your changes clearly.

10

9

8

7

6

48 Flash Professional 8 : H•O•T

Stroke Color Stroke Style

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 48

Page 22: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Double-click the stroke of the yin andyang design on the snowboard to select it. Inthe Property Inspector, select a new StrokeColor and Stroke Height for the outline.When you’re finished, click a blank area ofthe Stage to deselect your artwork so youcan see your changes clearly.

Close modifyFills.fla. You don’t need to save your changes.

Understanding the Flash Drawing Models

12

11

49Chapter 3 : Using the Drawing and Color Tools

Stroke Height

Now that you’ve mastered how to use the draw-ing tools in Flash 8, it’s time to learn about thetwo drawing models in Flash 8: the merge draw-ing model and the object drawing model. Thedrawing models define how multiple shapes inter-act with each other, particularly when you createoverlapping shapes.

The merge drawing mode, which has been thedefault drawing model in previous versions of Flash,automatically merges overlapping shapes. As aresult, if you create overlapping shapes and thenmove the shapes away from the each other, youend up with broken or merged shapes. For many

users, the merge drawing model was difficult tounderstand because it was so different from mod-els in other drawing programs.

Fortunately, Flash 8 has a new drawing model—the object drawing model—which provides morecontrol and flexibility when creating multiple oroverlapping objects. The object drawing modelbehaves the way models in other drawing pro-grams behave. Before you get started with thehands-on exercises, take some time to review thefollowing chart, which will help you understandthe differences and benefits of each of the twodrawing models:

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 49

Page 23: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

50 Flash Professional 8 : H•O•T

Flash Drawing Models Defined

Merge Drawing Model Object Drawing Model Description

Selecting Objects

Selection displayed as Selection displayed as dotted mesh bounding rectangle

Overlapping Objects

Shapes on the same layer Shapes on the same layer do not interact with each other. interact with each other.

Stroke and Fill

Stroke and fill independent Stroke and fill integrated together

When selecting a shapecreated with the mergedrawing model, the selec-tion appears as a dottedmesh. When you select ashape created using theobject drawing model,Flash 8 surrounds theshape with a rectangularbounding box.

The merge drawingmodel automaticallymerges shapes when theyoverlap. The object draw-ing model creates sepa-rate objects you canmanipulate individuallyand that do not automati-cally merge togetherwhen overlapped.

Merge shapes containseparate strokes and fills,which you can manipulateindependently. Objectshapes contain integratedstrokes and fills. Tomanipulate them, double-click the shape to enterobject drawing mode.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 50

Page 24: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

In this exercise, you will create shapes with each drawing model using the Oval tool to learn the differ-ences, benefits, and nuances of working with each.

Open a new file in Flash 8 (File > New > FlashDocument). Chose a light-gray color in the Fill Colorpalette in the toolbar. Select the Oval tool. You willdraw two ovals in the merge drawing model next, somake sure Object Drawing is deselected. Draw twoovals on the Stage.

Select the Selection tool from the toolbar.Double-click one of the oval shapes on the Stage toselect it. Click and drag to reposition the oval so itoverlaps the other oval.

The merge drawing model is the default drawing model. When selected, the merge object displays adotted mesh.

Deselect the oval by clicking anywhere on theStage. Double-click the oval to select it again andclick and drag it away from the circle shape.

Notice the selected oval left a hole in the other ovalwhere the two shapes overlapped. When you overlap objects using the merge drawing model, theyautomatically merge to create a single shape. When you move the shapes apart, the shapes do notreturn to their original, unmerged state. If you want to keep the objects as separate, unmerged objectswhen overlapped, you must use the new drawing model in Flash 8—the object drawing model. You willdo this next.

3

2

1

51Chapter 3 : Using the Drawing and Color Tools

6E X E R C I S E

The Merge and Object Drawing Models

Object Drawing deselected

Dotted mesh designates aselected merge shape.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 51

Page 25: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Choose a green color from the Fill Colorpalette. Select the Oval tool from the toolbar. Atthe bottom of the toolbar, click the Object Drawingbutton to switch from the default merge drawingmodel to the new object drawing model.

Click and drag with the Oval tool to create athird oval, adjacent to the first two, on the Stage.

You’ve just created an object shape. Object shapesbehave a bit differently than the merge shapes youhave worked with up to this point.

Select the Selection tool from the toolbar. Clickthe green oval to select it. Move it so it overlaps oneof the gray merge object ovals.

Notice the green oval shape, which was createdusing the object drawing model, is surrounded by arectangular bounding box, rather than the dottedmesh you saw for the gray merge object ovals.

Click and drag the green oval away from thegray oval. Deselect the green oval by clicking any-where on the Stage.

Unlike in Step 3, the objects did not merge wherethey overlapped. When you create shapes with theobject drawing model, they behave independentlyfrom other shapes.

7

6

5

4

52 Flash Professional 8 : H•O•T

Object Drawing

Bounding box designatesa selected object shape.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 52

Page 26: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Double-click the green oval.

The other gray ovals on the Stage dim, and you can-not select them! Notice the edit bar indicates youare no longer in Scene 1 but are in something calleda “Drawing Object.”

Click the green oval and move it around theStage.

The bounding rectangle is replaced by a dottedmesh, and the stroke is left behind. The shape nolonger looks or behaves as an object shape, but as amerge shape! When you double-click an objectshape, you automatically exit the object drawingmodel and enter into the merge drawing model. Asa result, object shapes are automatically converted to merge shapes, which in some circumstances areeasier to work with. However, this isn’t a permanent change—you can return merge shapes back toobject shapes very easily. You’ll learn how in the next step.

In the edit bar, click the Scene 1 button toreturn to the object drawing model. The shape nolonger behaves as a merge shape but as an objectshape. See for yourself by manipulating the graphicson the Stage again.

You now have a good overview of the differencesbetween the two drawing models in Flash 8. If you’renew to Flash, you may think the object drawingmodel is the best way to create your Flash artwork,since it behaves like the models in most other graphics programs and because usually you won’t wantobjects merging with each other. However, you can achieve some interesting effects using the mergedrawing model, which you’ll learn about in the following tip.

Close your Flash file. You don’t need to save your changes.11

10

9

8

53Chapter 3 : Using the Drawing and Color Tools

Dotted mesh indicatesa merge shape.

Stroke

You are back in Scene 1.

Dimmed andcannot be selected

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 53

Page 27: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Other than starting out with object drawing model shapes, there are additional ways of overlappingshapes without having them cut into or combine with one another. You can convert the shapes to sym-bols, which you will learn more about in Chapter 6, “Symbols and Instances.” You can also select multipleshapes and group them (Modify > Group), which you will learn about in the next exercise. Groupingshapes also makes it easier to work with shapes you want to keep together or modify in the same way.

54 Flash Professional 8 : H•O•T

T I P : Creating Negative Space with Merge Objects

You can use the unique behavior of merge objects described in this last exercise to createsome interesting artwork, such as artwork that takes advantage of “negative” space. Forexample, if you place a different colored merge object shape over the glove shape, dese-lect it, reselect it, and then move it away, it will cut an X shape in the fill of the glove, asillustrated here. This is a quick and easy way to add an interesting logo to the snowboard-ing glove!

Note: If the X shape were exactly the same color as the glove, it would not have cutthrough the glove and made an X shape. Instead, it would have just combined with theglove into one shape.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 54

Page 28: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Now that you have a good idea of how the drawing features behave in Macromedia Flash 8, this exerciseshows you how to group objects so you can modify and work with them all together.

Open multiple.fla from the chap_03 folder. This file containssome simple shapes created with the merge object model thatyou will combine into a group.

Double-click the blue glove object to select both its shapeand fill. Notice that it displays a dotted mesh. Shift+double-clickthe boot to select its stroke and fill as well. Choose Modify >Group. A thin blue line appears around both shapes, indicatingthey are part of the same (grouped) object. You can also group anobject by using the keyboard shortcuts, Ctrl+G (Windows) orCmd+G (Mac).

Select the Selection tool from the toolbar. Drag the groupover one of the other merge objects on the Stage.

The two shapes move as one grouped object on the Stage.

Deselect the group by clicking on any blank area of the Stage.Click the group again and move it off the objects. Notice that thegrouped objects do not interact with the other merge drawingobjects on the Stage.

As you can see, grouping objects, even single objects, is a quickway of protecting them from being affected by or affecting otherobjects. In addition to being able to move grouped objectstogether, you can also modify them as a single object, which you’ll learn how to do next.

4

3

2

1

55Chapter 3 : Using the Drawing and Color Tools

7E X E R C I S E

Grouping Objects

Blue line indicates a grouped object.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 55

Page 29: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Choose the Free Transform tool from thetoolbar and click the group to select it.Position the mouse over the lower-right cor-ner of the selection bounding box until thepointer changes to a double-headed arrow.Click and drag down toward the lower rightto scale both objects in the group.

You can also rotate, skew, flip, and makeother modifications to all the members of aselected group. Next, you will learn how tomodify single elements of a group, independ-ent of the other members of the group.

Double-click the blue glove with theSelection tool. Flash exits out of Scene 1 andenters into the edit window for the group.Select just the glove so only it is highlightedwith a dotted mesh (which indicates you cannow edit the object independent of the otherobjects in the group). Select a different colorfrom the Fill Color palette. Notice only theglove changes color.

Click the Scene 1 link above the Timeline to exitout of the group edit window and return to Scene 1.The group should still be selected. Choose Modify >Ungroup to return each object back to its originalungrouped status.

The ease at which you can group and ungroup combi-nations of shapes (objects shapes as well as mergeshapes) and the power and flexibility provided by thisgrouping capability makes this an important workflow-enhancing skill.

Save and close multiple.fla—you won’t need it again.8

7

6

5

56 Flash Professional 8 : H•O•T

You are inside thegroup object.

Dotted meshindicates a shape.

Dotted mesh indicates objectsare no longer grouped.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 56

Page 30: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Gradients help you create cool and interesting effects. Flash 8 lets you create two types of gradient fills:linear and radial. In this exercise, you’ll learn how to use the Color Mixer panel and Color Swatches panelto create, apply, and change the shape and color of linear and radial gradients. Flash has really beefedup its gradient capabilities in version 8, both in the Color Mixer and in the Gradient Transform tool.

Open newGradient.fla from the chap_03 folder.

This file contains one layer with two snowboards. You will be applying gradients to both of these shapesin this exercise.

Select the Selection tool from thetoolbar. Click the blue fill on the snow-board on the left to select it.

Make sure the Color Mixer panel isopen. If it is not, choose Window > ColorMixer. Choose Radial from the Type pop-up menu.

As you can see, the selected shape is nowfilled with a radial gradient, using blackand white, which are the default colors. Aradial gradient radiates outward from thecenter. In this case, black is in the centerand the gradient radiates to white.

Double-click the black pointer in theColor Mixer panel. The pointer selects theblack color point of the gradient andopens a color palette that lets you definethe fill color for the selected pointer.

Tip: You may need several tries to get thecolor palette to appear. Double-click theblack pointer carefully!

4

3

2

1

57Chapter 3 : Using the Drawing and Color Tools

8E X E R C I S E

Creating Gradients

Gradient definition bar

Overflow pop-up

Preview window

Pointer

Fill Color

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 57

Page 31: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select a shade of red from the colorpalette.

As you can see, the appearance of the radialgradient changes to range from red to whiteinstead of ranging from black to white. Youhave just created your first custom gradient!Next you will use the Gradient Transform toolto edit the appearance of gradient.

Select the Gradient Transform tool fromthe toolbar. Use the various edit handles tochange the center point, width, radius, rota-tion, and focal point of the gradient fill.Experiment with each of the edit handles toget the hang of how each controls theappearance of the gradient fill.

Next you will make a linear gradient.

Select the Selection tool from the tool-bar. Click the blue fill on the snowboard onthe right side of the Stage to select it.

In the Color Mixer panel, choose Linearfrom the Type pop-up menu.

As you can see, this option creates a lineargradient, using the same colors you used forthe previous gradient.

8

7

6

5

58 Flash Professional 8 : H•O•T

Rotation handleRadius handle

Focal point handle

Center point Width handle

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 58

Page 32: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Make sure the Color Swatches panelis visible. If it’s not, choose Window >Color Swatches. Choose Add Swatchfrom the Color Mixer panel menu to savethe currently selected gradient in theColor Swatches panel so you can access iteasily.

Select the Gradient Transform toolfrom the toolbar. Modify the width, rota-tion, and center point handles to becomefamiliar with how they modify the appear-ance of the linear gradient fill.

When you’re finished, close newGradient.fla. You don’t need to save your changes.11

10

9

59Chapter 3 : Using the Drawing and Color Tools

New gradient

Rotation handleCenter point

Width handle

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 59

Page 33: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

60 Flash Professional 8 : H•O•T

N O T E : New Gradient Features in Flash 8

In addition to new features in the Gradient Transform tool, Flash 8 now supports theuse of gradients containing up to 16 colors, which lets you create much more compli-cated and colorful gradients. Create additional colors in your gradients by clickingbelow the Gradient Definition bar in the Color Mixer panel. A new color, representedby the color pointer, will appear after each click.

Flash 8 provides three new options for controlling how gradient overflow, the colorsthat extend beyond the limits of the gradient, should be handled. The options areNormal (Windows) or Extend (Mac), which is the default; Mirror (Windows) or Reflect(Mac); or Repeat. You can generate an overflow in your gradients by selecting themwith the Gradient Transform tool and decreasing their width by clicking and draggingthe width handle.

Defined colors andlocation in the gradient

Gradient Definition barPointers

Overflow OverflowGradient Limit

Mirror

Repeat

Width handle

Normal

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 60

Page 34: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

The Pen tool creates more complex shapes by combining both straight and curved lines in the sameshape. Shapes created with the Pen tool consist of paths, anchor points, and tangent handles, which youcan modify with the Subselection tool, which you’ll learn about in Exercise 10.

If you’ve used other vector-based drawing programs, such as Macromedia FreeHand or Adobe Illustrator,you’ll be instantly comfortable with the Pen tool in Flash 8 because it works the same way. If you haven’tused the Pen tool before, it can take some getting used to. You’ll probably need plenty of practicebefore you become really comfortable with it.

In this exercise, you will start by learning how to use the Pen tool to draw a few basic geometric shapes.By the end of this exercise, you will be more comfortable working with the Pen tool to create more com-plex shapes of your own.

Open pen.fla from the chap_03 folder.

As you can see, this file has two layers: the shapes layer contains a series of outlines you’ll use as a guidefor drawing shapes in this exercise; the draw here layer is an empty layer you’ll use to draw shapes withthe Pen tool. The shapes layer is locked so you can’t edit the artwork, but have fun drawing on the drawhere layer.

Note: Since you will be using the Pen tool in this exercise, it will be easier to see the results if you use the default settings for this tool. If you just completed the previous exercises in this chapter, use theProperty Inspector to set the stroke settings to their default values (black, solid, 1 point).

Click the draw here layer in the Timeline toselect it. You’ll know it’s selected when you see apencil icon next to the layer name.

Select the Pen tool from the toolbar.3

2

1

61Chapter 3 : Using the Drawing and Color Tools

9E X E R C I S E

Drawing with the Pen Tool

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 61

Page 35: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Move your mouse to the lower-left corner of the trian-gle outline and click.

A small circle appears. This is the first anchor point, indi-cating the beginning of your line. Line segments are cre-ated between pairs of anchor points to create shapes.

Click the top corner of the triangle to add the secondanchor point.

The line segment appears as a red line with two squareanchor points on either end on top of the line segment,which is the stroke color in the Property Inspector and inthe toolbar which you set in Step 1. The red line indicatesthe line segment is selected.

Click the lower-right corner of the triangle to create asecond line segment between the upper- and lower-rightanchor points.

Position the pointer over the lower-left corner of thetriangle where you created the first anchor point in Step 4.A small circle appears beside the pointer, indicating thepath will be closed if you click. Click to close the path andcreate the shape. When you close a path, the shape auto-matically fills with the currently selected fill color in theProperty Inspector or on the toolbar.

Next, you’ll learn to draw a circle with the Pen tool, which can be a bit more complicated than drawing atriangle and may take some time to master. Don’t worry if you have to do this exercise a few timesbefore you get the hang of things.

7

6

5

4

62 Flash Professional 8 : H•O•T

Anchor point

Anchor pointClosing a path

Line segmentwith two anchor

points

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 62

Page 36: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Using the Pen tool, click at the top center ofthe circle outline to create the first anchor point.

Click the middle-right edge of the circle anddrag down to add another anchor point. As youdrag, you will see two tangent handles appear.Move the mouse around and watch how the angleof the line changes as you do this. Don’t release themouse button just yet.

Drag down toward the lower right until the linesegment seems to match the outline of the circle.Now release the mouse button. The circle you drawdoesn’t have to be perfect here; just try to get your-self comfortable working with the Pen tool.

10

9

8

63Chapter 3 : Using the Drawing and Color Tools

Click here. Tangent handles

T I P : Pen PreferencesWhen you are working with the Pentool, there are a number of prefer-ences you can change to makeusing it a bit easier. Choose Edit >Preferences to open thePreferences dialog box. Select theDrawing category to see the Penpreferences. There are three youmay find helpful:

Show pen preview (off by default)lets you preview the line segmentsas you draw with the Pen tool. Astretchy line will appear as a pre-view of the line segment you willcreate when you click.

Show solid points (off by default)displays selected anchor points assolid points and unselected anchorpoints as hollow points when you use the Subselection tool.

Show precise cursors (off by default) causes the Pen pointer to appear as a crosshair. This can be helpful for precise drawing and works great with the grid feature.

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 63

Page 37: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Click the middle-bottom edge of the circle toadd another anchor point. The line will curve whenyou add the third anchor point, to complete half ofthe circle shape.

Click and drag up on the middle-left edge ofthe circle to add another anchor point. As youdrag, you will see two tangent handles appear.Don’t release the mouse just yet.

Drag up toward the top left until the line seg-ment seems to match the outline of the circle.Release the mouse button.

Move the pointer to the first anchor point youcreated at the top of the circle. When you see thesmall circle appear next to the Pen tool pointer,click to close the path and fill the circle with thecurrently selected fill color.

Save your changes and keep pen.fla open for the next exercise. Don’t worry if the circle you createdit isn’t perfect.

Next you’ll learn how to modify lines using the shapes you just made.

15

14

13

12

11

64 Flash Professional 8 : H•O•T

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 64

Page 38: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

In the last exercise, you learned how to create shapes using the Pen tool. Next, you’ll learn how toreshape them using the Selection and Subselection tools to modify paths using their anchor points or tangent handles.

If you just completed Exercise 9, pen.fla should still be open. If it’s not, go back and completeExercise 9.

Select the Selection tool from the toolbar.

Position the pointer over the left side of thetriangle.

Notice the pointer changes to a small curved line.This line indicates you are over a line segment.

Click and drag the line segment to the left.The shape will start to distort and stretch as youcontinue to drag the mouse. When you release the mouse, notice both the line and the fill havechanged their shape.

The Selection tool offers a free-form way of transforming shapes. Although it can be fun to use, it lacksthe precision you sometimes need when creating complex shapes. When you need pinpoint precision,use the Subselection tool, which lets you manipulate the anchor points and tangent handles of pathsafter you have added them.

4

3

2

1

65Chapter 3 : Using the Drawing and Color Tools

10E X E R C I S E

Modifying Paths

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 65

Page 39: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select the Subselection tool from the toolbar

Position the pointer over the edge of the cir-cle shape. A small black square appears, indicatingyou are over a line.

Click the edge of the circle to select it. Noticethe anchor points are now visible. The anchorpoints are represented by small red squares alongthe line of the circle.

Note: Flash 8 adds anchor points, if necessary, to create curves, which is why you might see more than four anchor points on your artwork.

Position the pointer over the middle-rightanchor point. A small white square appears next tothe pointer when you are directly over the anchorpoint.

Click to select the middle-right anchor point.When you do, the tangent handles for that anchorpoint appear.

9

8

7

6

5

66 Flash Professional 8 : H•O•T

T I P : What Do the Icons Associated with the Subselection Tool Mean?The Subselection tool edits paths and anchor points created with the Pen tool. As youlearn to edit paths, anchor points, and tangent handles with the Subselection tool, youwill notice that the pointer icon often changes as you work with it. The following chartoutlines the pointers associated with the Subselection tool.

Selects a path

Selects an anchor point

Modifies the tangent handle(s)

Small, black square indicates a line.

Small, red squares indicate anchor points.

Tangent handles

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 66

Page 40: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Click and drag the top tangent handle of themiddle-right anchor point to the right. When yourelease the mouse, you’ll notice the top and bot-tom portions of the curve change together. This isthe normal behavior of tangent handles.

Click to select the middle-left anchor point.

Hold down the Alt key (Windows) or Optionkey (Mac) and click and drag the top tangent han-dle of the middle-left anchor point over to the left.When you release the mouse, you’ll notice only thetop portion changes.

As you can see, holding down the Alt (Windows) or Option (Mac) key lets you modify one part of a curve without affecting the other.

Click the anchor point on the middle right ofthe circle and drag down to try to match the circleimage in the background. You can click and dragan anchor point to make the circle more perfect inshape.

Now you know how to use the Selection and Subselection tools to modify the lines you create in Flash 8.With the Selection tool, you can reshape straight or curved lines by dragging the lines themselves. TheSubselection tool lets you reshape by clicking and moving the anchor points and tangent handles. Nextyou will learn how to add, remove, and convert anchor points.

Select the Pen tool from the toolbar.

In addition to drawing shapes, the Pen tool can add anchor points to a line.

14

13

12

11

10

67Chapter 3 : Using the Drawing and Color Tools

Single tangent handlebeing modified

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 67

Page 41: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Position the Pen tool over the rounded side ofthe triangle shape. Click to select the path. Noticethat when you move the Pen tool directly over thepath, a small + symbol appears next to the pointer.Click to add a new anchor point.

Converting curves to straight lines is a rather sim-ple process and one you should know how to do. You’ll learn how in the following steps.

Position the pointer over the newly addedanchor point and notice that a small caret (^) sym-bol appears, indicating you will convert the curvepoint to a corner point if you click.

Click the anchor point to convert the anchorpoint to a corner point, transforming the curve intoa straight-edged shape. Because you convertedthe anchor point to a corner point, you’ll no longerhave access to any tangent handles.

Converting a corner point to a curve point is even easier to do—you’ll do that next.

17

16

15

68 Flash Professional 8 : H•O•T

T I P : What Do the Icons Associated with the Pen Tool Mean?As you create paths, anchor points, and tangent handles with the Pen tool, the pointericon will change. This chart outlines each of the pointer icons associated with the Pentool.

Draws straight and curved paths to create objects

Adds anchor points to paths

Deletes anchor points from paths

Closes a path

Converts a corner point to a curve point and vice versa

New anchor point

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 68

Page 42: Using the Drawing and Color Toolsfiles.lynda.com/files/edu-media/EDU_HOT_CHAPTERS/Flash_8/... · 2011-07-03 · Bottle, the Color and Tool modifiers in the tool-bar, the Color Mixer

Select the Subselection tool from the toolbar.Click the anchor point to select it. Hold down theAlt (Windows) or Option (Mac) key and click anddrag the anchor point you just modified up a bit.When you do this, you will convert the cornerpoint back to an anchor point.

Note: Make sure the anchor point is still selected before you drag it. Selected anchor points are red.

With the anchor point still selected, pressDelete to remove the anchor point.

Close pen.fla. You don’t need to save your changes.

By now, you should feel pretty comfortable working with the drawing and color tools in Flash 8. If youdon’t feel quite there yet, feel free to practice and play some more with the different tools and color set-tings. You might try drawing some artwork for a project you want to create in Flash 8. Nothing will everreplace good old-fashioned practice.

20

19

18

69Chapter 3 : Using the Drawing and Color Tools

FL08_03 (028-069).qxd 11/29/05 3:10 PM Page 69