Creating Graphics -...

Creating Graphics

Introduction

Flash offers a full suite of tools for creating and editinggraphics. When you draw in Flash, you create vector art.VVeeccttoorrss are mathematical descriptions of lines and pointsthat, when connected, form shapes and objects. Vector-defined art is not limited by resolution like bitmaps are sothey can be scaled to any size without a loss in quality orincrease in file size. This is the basis of Flash; the main reasonFlash files are so small and why they can be deployed on somany platforms. Vector graphics are also fully editable afterthey are created so you can continue to adjust their proper-ties. Included in Flash are many of the drawing tools and pro-cedures familiar to the seasoned user of vector drawingprograms. It is also a good place for the beginner to learn.Sketch naturally with the Pencil and Brush tools or use vec-tor-based objects, such as the Rectangle or Oval tools or thePolystar tool. Use the Pen tool to create lines and shapeswith Bézier curves. Whatever is drawn can be edited andmodified with a variety of tools and palettes. When you selectan object or graphic on the Stage, the Property Inspector dis-plays the attributes of that object that are modifiable, such asfill and stroke color, position, and scale.

You can draw shapes in Flash using two drawing models:Merge Drawing and Object Drawing. The MMeerrggee DDrraawwiinnggmodel, the default (like previous versions of Flash), automati-cally merges shapes that you draw when you overlap them.If you select a shape that has been merged with another, andmove it, the shape below it is moved too. The OObbjjeecctt DDrraawwiinnggmodel allows you to draw shapes as separate objects that donot automatically merge together when you overlap them.You can now extend the Object Drawing mode by creatingprimitive rectangles and ovals in PPrriimmiittiivvee mmooddee (New!),which allows you to edit properties in the Property Inspectorand specify the corner radius of rectangles and inner radiusof ovals. This makes it easy to create pie wedges, round offcorners, and other curved shapes.

3

3What You’ll Do

Change Drawing Settings

Draw Lines and Shapes

Use the Selection Tools

Zoom In and Out

Move Around with the Hand Tool

Use Rulers, Grids, and Guides

Modify Grid and Guide Settings

Use Snap Align

Change Stroke and Fill Colors

Create Custom Colors

Edit Strokes with the Ink Bottle

Edit Fills with the Paint Bucket

Edit Strokes and Fills with the Eyedropper

Create Gradients

Use the Fill Lock

Use Paint Brush Modes

Draw with the Pen Tool

Modify Shapes

Use the Free Transform Tool

Use Transform Options for Shapes

73

C03FLCS3.qxd 4/1/2007 5:34 AM Page 73

74

The Drawing category on the Preferences dialog box contains a num-ber of drawing settings that control the sensitivity and behavior ofFlash's drawing tools. Make changes to the tolerance levels forsmoothing or straightening, set the sensitivity for line and shape recog-nition, or fine-tune snapping. You can exercise greater control overyour drawing or allow Flash to perform corrections and adjustments asyou draw. You can customize the way you use Pen tools, draw connect-ing lines and smooth curves, and recognize line and shapes.

Changing DrawingSettings

Change the Drawing Settings

Click the Flash (Mac) or Edit (Win)menu, and then click Preferences.

Click the Drawing category.

Specify the drawing option youwant:

◆ Pen Tool options. Select checkboxes to show pen preview,solid points, and precisecursors.

◆ Connect Lines. Determines howclose the ends of any two linesneed to be before Flashconnects them. It controls whena line is converted into aperfectly straight line.

◆ Smooth Curves. Determines theamount of smoothing applied toa drawn line. The lower thesmoothing applied, the closerthe line appears to what youhave drawn.

◆ Recognize Lines. Defines how astraight line drawn with thePencil tool must be before it’sconverted into a perfectlystraight line.

◆ Recognize Shapes. Sets howprecise simple geometricshapes must be drawn beforethey are detected as shapes.

◆ Click Accuracy. Determineshow near to a shape the pointermust be before Flash recognizesit.

Click OK.4

3

2

12

3

4

C03FLCS3.qxd 4/1/2007 5:34 AM Page 74

Chapter 3 Creating Graphics 75

Drawing with the Line Tool

Use the Line Tool

Click the Line tool in the Toolbar.

The pointer becomes a crosshairthat you can drag on the Stage.

TIMESAVER Press N to selectthe Line tool.

Click and drag on the Stage, andthen release the mouse when theline is the length you need.

TIMESAVER Hold down theShift key, and then drag to draw a45 degree line.

To change line properties, click toselect the stroke, and then specifythe options (Color, Weight (0-200),Style, Width and Height, Cap, Join,or Stroke Hinting) you want in theProperty Inspector.

TROUBLE? To display theProperty Inspector, click theWindow menu, point to Properties,and then click Properties.

3

2

1

The Line tool draws perfectly straight lines in any direction you dragyour mouse. In Flash, a line is called a stroke and there is a variety ofthickness (0-200 pixels), styles, colors, and gradient fills that can beapplied to it. You can also create your own line style for specific typesof dashed, dotted or artistic lines. You can constrain the path a linedraws to 45-degree angles or create closed shapes by intersecting thelines you draw. In Merge Drawing, when a line overlaps another line onthe same layer, it essentially 'cuts' it into two pieces that can be editedas separate objects. You can also specify a line cap and join type. Ajoin is the place where two strokes meet (Miter, Round, or Bevel). Acap is the end point of a stroke that does not join with another stroke.Select Stroke hinting to make stroke intersections easier to view.

See AlsoSee “Changing Stroke and Fill Colors”on page 96 for information on usingcolor.

2

1

3Stroke

ColorStrokeWeight

StrokeStyle

Customizestyles

Stroke widthand height

FillColor

Cap and Joinoptions

A preview of the line appears as youdrag. A circle beneath the crosshairindicates the line's endpoint.

StrokeHinting

Stroke join

C03FLCS3.qxd 4/1/2007 5:35 AM Page 75

76

Drawing with thePencil Tool

Use the Pencil Tool in Straighten Mode

Click the Pencil tool in the Toolbar.

The pointer becomes a pencil. ThePencil tool options appear at thebottom of the Toolbar. The defaultmode is Straighten.

TIMESAVER Press Y to selectthe Pencil tool.

Draw on the Stage with the Pencil,and then release the mouse.

A rough preview of the lineappears as you draw. In Straightenmode, Flash transforms the lineinto a series of straight-linesegments and standard curves.

2

1

Use the Pencil tool for freeform drawing. When you draw with thePencil tool you are creating strokes. It works the same way as a realpencil with options for smoothing and straightening. Depending uponwhich mode you choose, Flash makes corrections to the drawn line.Smooth mode softens the curve of the line you draw while Straightenmode transforms the line into a series of straight-line segments andstandard curves. If you are using the Pencil or Brush tools with Smoothmode, you can specify the degree of smoothness. Additionally, Flashperforms shape recognition to the lines you draw so that if it detectssomething approximating a simple geometric shape such as a rectan-gle, oval, or triangle, it converts your drawing into whichever shape itdetects. To bypass these modifications, select Ink mode. This modeallows for the most freeform drawing with minimal correction by Flash.

Did You Know?Flash converts rough shapes intoclean, geometric shapes. If you draw arough rectangle in Straighten mode,Flash converts your shape into a cleanrectangle with straight sides. It doesthe same for other shapes, such asovals and triangles. Set the tolerancelevel of shape recognition in theDrawing preferences.

1

Pencil mode is set tostraighten by default.

Flash straightensthe drawn line.

Flash applies shape recognitionin Straighten mode.

2

C03FLCS3.qxd 4/1/2007 5:35 AM Page 76


Use the Pencil Tool in Smooth Mode

Click the Pencil tool in the Toolbar.

The pointer becomes a pencil. ThePencil tool options appear at thebottom of the Toolbar.

Click the Pencil mode popup in theOptions area of the Toolbar, andthen click Smooth.

In the Property Inspector, click theSmoothing popup, and then click avalue from 1 to 100 (New!).

The default value is set to 50. Thegreater the smoothing value, thesmoother the resulting line.

TROUBLE? To display theProperty Inspector, click theWindow menu, point to Properties,and then click Properties.

Draw on the Stage with the Pencil,and then release the mouse.

A rough preview of the lineappears as you draw. In Smoothmode, Flash smoothes the line youdraw into curved line segments.

4

3

2

1

Did You Know?You can disable straightening andsmoothing. Click the Pencil modepopup in the Options area of theToolbar, and then click Ink mode toyield a line closest to the line you'vedrawn with minimal corrections performed by Flash.

4 Flash smoothesthe drawn line.

2

Use Ink mode for more freeform drawing.

3

1

For Your Information

Smoothing Curves Another WayYou can also smooth curves by optimizing the shape. Optimizing ashape refines curved lines and fill outlines by reducing the number ofcurves used to define the shape. To optimize a shape, click it, clickthe Modify menu, point to Shape, click Optimize, specify a smoothinglevel, select additional options (select Use Multiple Passes to repeatthe smoothing process until you can’t anymore, and select ShowTotals Message to display an alert when smoothing is complete), andthen click OK.

C03FLCS3.qxd 4/1/2007 5:35 AM Page 77

78

Drawing Shapes withthe Rectangle andOval Tools

Draw with the Oval Tool

Click the Oval or Oval Primitivetool in the Toolbar.

TIMESAVER Press O to selectan Oval tool.

Select a Stroke and Fill Color fromthe Colors area of the Toolbar.

Click and drag on the Stage, andthen release the mouse.

TIMESAVER Press and holdShift while you drag to create acircle.

In the Properties Inspector,change the values you want.

Draw with the Rectangle Tool

Click the Rectangle or RectanglePrimitive tool in the Toolbar.

TIMESAVER Press R to selecta Rectangle tool.

Select a Stroke and Fill color fromthe Colors area of the Toolbar.


TIMESAVER Press and holdShift while you drag to create asquare.

In the Properties Inspector,change the values you want.

4

3

2

1

4

3

2

1

The Flash Toolbar includes several tools for quickly creating simplegeometric vector shapes. They are easy to use; you just click and dragon the Stage to create the shapes. The Rectangle tool creates rectan-gles with square or rounded sides. The Oval tool creates circularshapes such as ovals and circles. These shapes can be comprised ofStrokes, which are lines that surround and define the shape, Fills,which are a color or texture inside the shape, or both. You can createtwo types of shapes: Drawing or Primitive. Drawing, or standard,shapes are self contained; the stroke and fill of a shape are not sepa-rate elements, while Primitive shapes (New!) are separate elements.

1 32

1 32

C03FLCS3.qxd 4/1/2007 5:36 AM Page 78


Draw a Rounded Rectangle

Click the Rectangle or RectanglePrimitive tool in the Toolbar.

Enter a value for the corner radiusin the Properties Inspector(New!).

To create an exact size rectangleshape, select the shape, enter thewidth and height values in theProperties Inspector (New!).


4

3

2

1

Did You Know?You can enter values ranging from 0 to100 points in the Rectangle Settingsdialog box. A value of zero gives you astraight-sided-square. Higher numbersproduce squares with more roundedsides.

You can hold down the Shift key whiledragging to produce a perfect squarewith equal sides or a perfect circle. Ifyou want to draw an oval or a rectan-gle without a stroke or fill, you can seteither of these options to No Fill in theColors area of the Toolbar or in theColor Mixer.

You can draw shapes without a strokeor a fill. Set either of these propertiesto No Fill in the Colors section of theToolbar or in the Color Mixer.

You can set specific sizes with a dia-log box. Alt+click (Win) or Option+click(Mac) a rectangle or oval, set the val-ues you want, and then click OK.

See AlsoSee “Changing Stroke and Fill Colors”on page 96 for information on changingshapes.

5 points 25 points 50 points

1


Creating Primitive Rectangles and OvalsIn addition to creating standard rectangles and ovals, you can nowcreate Primitive rectangles and ovals (New!). A Primitive shapeallows you to change their attributes in the Property Inspector. ThePrimitive shape tools allow you to specify the corner radius of rec-tangles, and the start and end angle and the inner radius of ovalsusing controls in the Property Inspector, which makes it easy to cre-ate pie wedges, round off corners, and other curved shapes. Wheneither of the Primitive shape tools is selected, the Property Inspectorretains the values of the last primitive object that you edited.

3 2

C03FLCS3.qxd 4/1/2007 5:36 AM 9

80

Using the Polystar Tool

Draw a Polygon or Star Shape

Click and hold the Rectangle toolin the Toolbar, and then point toPolyStar Tool.

The pointer becomes a crosshairthat you can drag anywhere on theStage.

Click Options in the PropertyInspector.

TIMESAVER Press A+F3(Mac) or Ctrl+3 (Win) to open theProperty Inspector.

Click the Style popup, and thenselect Polygon or Star.

Enter a value for the number ofsides. You can create an objectwith up to 32 sides.

For the Star style, you can specifyan additional option for your pointsize. You can enter a value rangingfrom .10 to 1.0 points.

Click OK.6

5

4

3

2

1

Working in much the same way as the Oval and Rectangle tools, thenew Polystar tool allows you to easily create complex vector shapes.You can use this tool to create polygons and stars with up to 32 sides.Choose between creating a polygon or a star. Both styles have charac-teristics that can be adjusted in the Property Inspector before you drawthe shape. Both the polygon and star style can have up to 32 sides, withthe star style having an additional star point size that can be set.Experiment with several options to get the kind of shape you want.

See AlsoSee “Editing Strokes with the InkBottle” on page 100 for information onediting an object.

5

4

3

1

2

6

C03FLCS3.qxd 4/1/2007 5:36 AM 0


When you create vector graphics in Flash,they are comprised of distinct elements thatcan be selected separately or as a whole witha variety of selection tools. The type of editingyou need to perform determines which toolyou use. For example, a simple rectangledrawn is comprised of four line segments thatsurround the contour of the shape and one fillin the center. Each of these five parts can beselected in tandem or individually with theArrow Selection tool. Likewise, any stroke thatintersects another stroke or fill splits theminto distinct elements that can be selectedseparately.

In Normal selection mode, holding downthe Shift key adds to the selection any addi-tional elements you click on. You can changethis option in the General tab of thePreferences window so that it isn't necessaryto use the Shift key to perform this function.

Double-click any stroke to select other strokesconnected to it or double-click a fill to select itand any strokes that touch or intersect it. Toselect an entire shape (strokes and fills) orjust a portion of it, you can drag a selectionrectangle with the Arrow tool or draw afreeform selection area with the Lasso tool.These methods work best for very complexshapes with many intersecting strokes andfills, or if there is only a portion of the shapeyou need to edit.

The Sub-Selection and Pen tools allow youto select the entire shape (strokes and fills)simultaneously, making its anchor points andBézier handles visible for editing. Use thismethod when you need to edit the contoursof the shape with precision.

For information on making selectionsusing the Object Drawing model, see“Working with Object Drawing, on page 122.

Understanding Selections

Selection Examples

Each element (4lines and a fill) canbe selectedseparately.

Shift-select toadd elements to

the selection.

Single line segment. When two line segmentsintersect, four new line

segments are created thatcan be selected

separately.

Double-click a fillto select it and anyconnected strokes.

Double-click astroke to select all

connectedstrokes.

Click and drag toselect a portion ofthe shape.

Only a portion ofthe fill and strokesis selected.

C03FLCS3.qxd 4/1/2007 5:37 AM Page 81

82

Selecting Strokes with the Arrow Tool

Select a Stroke with the ArrowSelection Tool

Click the Arrow tool in the Toolbar.

The pointer becomes an arrow.

TIMESAVER Press V to selectthe Arrow tool.

Position the arrow on the edge ofthe shape.

Notice that Flash displays a smallcurved line icon when you positionthe arrow over a Curve point and acorner line icon when over aCorner point.

Click on any part of the stroke.

Flash only selects a portion of it.This is because what appears tobe one whole shape is actually aseries of lines connected by pointsand each can be selectedseparately.

3

2

1

There are a variety of ways to select objects in Flash. You can select anobject's stroke or fill or both. You can use the Arrow tool to select partsof the object or drag over a portion of it to create a selection rectangle.The Property Inspector displays the properties of what is selectedincluding Stroke line weight and style, Fill color, pixel dimensions, and Xand Y coordinates. When a stroke or fill is selected, a dotted patternappears over it indicating it has been selected. This makes editing andmodifying graphics simple and illustrates the versatility of the vector-based graphics model used in Flash.

1 2 Curve point detected

Cornerpointdetected

3

See AlsoSee “Working with Object Drawing” onpage 122 for information on selectingoverlapping objects on the same layer.

C03FLCS3.qxd 4/1/2007 5:37 AM Page 82


Select Multiple StrokeSegments



TIMESAVER Press V to selectthe Arrow tool. You cantemporarily switch to the Arrowtool from any other tool bypressing A (Mac) or Ctrl (Win).

Click on any part of the stroke toselect one segment.

Hold down the Shift key, and thenclick other strokes to add them tothe selection.

Select Connected StrokeSegments



Double-click any part of thesegment or stroke to select allconnected strokes.

2

1

3

2

1

Did You Know?You can turn off the Shift-select fea-ture in the General tab of thePreferences dialog box. When thisfeature is disabled, you can add to theselected segments by clicking themwithout the need to hold down theShift key. In this mode, holding theShift key and clicking a selected strokesegment deselects that segment.

1 2

3

Shift-select to add stroke segments to the selection.

1 2

All connectedstroke segmentsselected.

C03FLCS3.qxd 4/1/2007 5:37 AM Page 83

84

Selecting Strokes and Fills with theArrow Tool

Select Fills with the ArrowSelection Tool



Position the arrow in the Fill areaor the center of the shape andclick.

The fill becomes highlighted with adotted pattern to indicate it hasbeen selected. Hold down the Shiftkey to add other strokes and fills tothe selection.

Select with a SelectionRectangle



Click on the Stage above and tothe left of the shape you want toselect and drag to create aSelection Rectangle, and thenrelease the mouse when thebounding box fully encloses theshape.

2

1

2

1

The Arrow tool provides the most simple and versatile procedures forselecting objects in Flash. The Arrow tool selects anything you click on(provided it isn't on a locked layer). Double-clicking shapes with theArrow tool selects all fills and strokes that are connected. Shift-select-ing allows you to add to the selection only what you need. Alternately,dragging a selection rectangle on the Stage with the Arrow tool cre-ates a bounding box that selects anything you drag it over. This bound-ing box method is the most reliable technique for selecting verycomplex objects with many intersecting strokes and fills.

1

1

2 Selected fill

2

Double-clickingthe shape selectsboth the fill andthe stroke.

Both fill andstrokes areselected.

C03FLCS3.qxd 4/1/2007 5:38 AM Page 84


Making Selectionswith the Lasso Tool

Select with the Lasso Tool

Click the Lasso tool in the Toolbar.

TIMESAVER Press L to selectthe Lasso tool.

Draw around the shapes you wantto select.

Flash draws a preview of theselection lasso as you draw.

To complete the selection, returnto the point where you started.

Select with the Lasso Tool inPolygon Mode

Click the Lasso tool in the Toolbar.

Click the Polygon Mode button inthe Options area of the Toolbar.

Click near the area you want toselect. Move the pointer and clickagain. Keep clicking until theobject or portion you want toselect is surrounded.

Double-click to complete theselection.

4

3

2

1

3

2

1

Use the Lasso tool when you want to select shapes that are too closeto shapes you don't want to select. This tool allows you to draw aroundthe shape, selecting everything contained in the shape you draw. In thedefault mode, you can draw a freeform lasso around the object youwant to select. You can also choose the Polygon mode for defining theselected area with a series of straight-line segments.

2

Did You Know?You can combine several ways toselect single or multiple objects.Holding the Shift key adds line seg-ments and fills to the selection. Shift-selecting items that have already beenselected deselects them.

Selectedshape

3

Selected shape

1 2

1

C03FLCS3.qxd 4/1/2007 5:38 AM Page 85

86

Zooming In and Outwith the MagnifyingGlass

Zoom In

Click the Zoom tool in the Toolbar.

Click the Enlarge button in theOptions area of the Toolbar.

The pointer becomes a magnifyingglass with a plus (+) symbol in it.

Click on the area of the Stage youwant to zoom into.

TIMESAVER Press Z to selectthe Zoom tool. To temporarilytoggle between the Enlarge andReduce Modifiers buttons in theOptions area of the Toolbar, pressOption (Mac) or Alt (Win).

Zoom Out


Click the Reduce button in theOptions area of the Toolbar.

The pointer becomes a magnifyingglass with a minus (-) symbol in it.

Click on the area of the Stage youwant to zoom out from.

3

2

1

3

2

1

Because the Stage and Work Area in Flash share the same space witha variety of panels, palettes and windows, it is often necessary tochange the magnification level. You can use the Magnifying Glass tozoom out and see the entire piece or zoom in to do more detailed workon a small portion. The tool is made up of two modifiers: a plus (+) sym-bol in the circle indicates enlargement of the Stage and a minus (-) indi-cates reduction. Flash allows magnification levels from 8 percent to2000 percent.

31

1 32

2

C03FLCS3.qxd 4/1/2007 5:39 AM Page 86


Zoom Into a Specific Area byDragging on the Stage


Click the Reduce or Enlarge buttonin the Options area of the Toolbar.

Click on the area of the Stage youwant to magnify and drag thepointer.

3

2

1

Did You Know?You can change the magnificationlevel in several places. The ZoomControl field in the top right hand cor-ner of the Stage allows you to enter avalue or access a popup with variousmagnification levels. You can alsochange the magnification submenu inthe View menu or use the keyboardshortcuts A+ - (Mac) or Ctrl+ - (Win)to zoom out, and A+ + (Mac) or Ctrl+ + (Win) to zoom in. Quickly switchto 100 percent magnification by press-ing A+1 (Mac) or Ctrl+1 (Win).

1

2 3

C03FLCS3.qxd 4/1/2007 5:39 AM Page 87

88

Moving Around withthe Hand Tool

Move the Stage View

Click the Hand tool in the Toolbar.

The pointer becomes a small handthat moves the entire Stagerevealing other parts of the Stageas you drag.

TIMESAVER Pressing thespace bar temporarily changes theactive tool to the Hand tool.Continue holding as you drag.

Click and drag the Stage to movethe view.

2

1

At certain magnifications, parts of the Stage may not be viewable. Usethe Hand tool to quickly move to different parts of the Stage withouthaving to change the magnification level. The Stage is the active areaof your movie, the only area that will be visible in the exported Flashmovie. The gray area around the Stage is the Work Area. The Hand toolallows you to easily access artwork or other objects contained in thisspace if you are doing detailed work at high levels of magnification.

Did You Know?You can turn off the visibility of theWork Area (the gray space around theStage) and quickly change the Viewscale to 100 percent. Toggle the WorkArea option in the View menu or usethe keyboard shortcut A+Shift+W(Mac) or Ctrl+Shift+W (Win). This is agreat way to temporarily see what isviewable in the exported Flash file(.swf) when you are working with largeimages that extend past the Stageboundaries.


Using the Pasteboard Work AreaYou can use the work area (called the Pasteboard) around the Stageto store artwork and other objects, such as components, withouthaving them be visible in the published movie. The objects might notbe visible on the Stage, but they contribute to the overall file size. Itis a good idea to clean up your files before exporting the final movie.You can clean up by removing any artwork outside the boundaries ofthe Stage or by putting them on a guide layer.

1

2

C03FLCS3.qxd 4/1/2007 5:39 AM Page 88


Displaying Rulers

Show and Hide Rulers

Click the View menu, and thenclick Rulers.

A check mark next to the optionmeans its visibility is enabled.

To hide rulers, click the Viewmenu, and then click Rulers toremove the check mark and hidethe rulers.

TIMESAVER PressA+Option+Shift+R (Mac) orCtrl+Alt+Shift+R (Win) to turn the ruler on and off.

2

1

Ruler bars are located on the top and left sides of the Stage and serveseveral purposes. They let you measure the width and height of Flashelements and they let you place guides on the screen to control place-ment of objects on the Stage. In all, Rulers serve a very important role.When you display rulers, you can use guides to help you correctly alignobjects with other objects. By using guides, you have access to precisealignment systems. To use the guides, the ruler bars must first be visi-ble. When you no longer need the rulers, you can hide the rulers to freeup more workspace.

Rulerswhenvisible

Did You Know?You can change the unit of measuredisplayed on the Rulers. Click theModify menu, click Document, clickthe Ruler Units popup, select a unit ofmeasure, and then click OK.

1

Vertical ruler

Horizontalruler

C03FLCS3.qxd 4/1/2007 5:39 AM Page 89

90

Using Grids andGuides

Show and Hide Grids

Click the View menu, point to Grid,and then click Show Grid.

◆ You can also right-click theStage, point to Grid, and thenclick Show Grid.

A check mark next to the optionmeans its visibility is enabled.

To hide the grid, click the Viewmenu, point to Grid, and then clickShow Grid to remove the checkmark and hide the grid.

TIMESAVER PressA+apostrophe (') (Mac) orCtrl+apostrophe (') (Win) to toggleGrid visibility on and off.

2

1

Flash comes with guides, grids, and rulers to help you lay out artworkand objects with precision. A grid is a series of crisscrossed lines thataid in aligning objects to each other on the Stage. Guides and grids aremodifiable. You can change their visibility, position, color, and fre-quency. These items are invisible by default, but they can be easilyturned on and adjusted. Though you see them in the Flash developmentenvironment, they are invisible on export. Use guides to align art andobjects to each other on vertical or horizontal paths, or turn on the gridfor use in designing a layout that is proportional and balanced.

1

See AlsoSee “Modifying Grid and GuideSettings” on page 92 for information onchanging settings.

Grid when visible

C03FLCS3.qxd 4/1/2007 5:40 AM Page 90


Create Guides

Click the View menu, and thenclick Rulers to display rulers.

Click on the vertical ruler on theleft side of the work area with theArrow pointer and drag to theright, and then release the mousewhere you want to place thevertical guide.

A small directional triangle andline appears next to the pointer asyou drag indicating that you aredragging the guide.

Click on the horizontal ruler at thetop of the work area with theArrow pointer and drag down, andthen release the mouse where youwant to place the horizontal guide.

Reposition the guides by selectingthem with the pointer.

4

3

2

1

Did You Know?You can turn guide visibility on andoff, lock guides, and enable or disablesnapping to guides. Click the Viewmenu, and then click Guides to accessthese options or use the following key-board shortcuts: A+; (Mac) or Ctrl+;(Win) toggles between showing andhiding guides Option+A+; (Mac) orCtrl+Alt+; (Win) locks and unlocksguides Shift+A+; (Mac) or Ctrl+Shift+;(Win) to turn Snapping on and off.

2

3

1

See AlsoSee “Displaying Rulers” on page 89 forinformation on showing and hidingrulers.

C03FLCS3.qxd 4/1/2007 5:40 AM Page 91

92

Modifying Grid andGuide Settings

Modify Grid

Click the View menu, point to Grid,and then click Edit Grid.

TIMESAVER PressOption+A+G (Mac) or Ctrl+Alt+G(Win) to quickly access the Griddialog box.

Click the Color popup, and thenclick a grid line color.

Select or clear the Show Gridcheck box to show or hide grid.

Select or clear the Snap To Gridcheck box to enable or disablesnapping.

Enter values for horizontal andvertical dimensions for the gridlines.

Click the Snap Accuracy popup,and then select a level ofsensitivity for snapping to the grid.Select from Must Be Close,Normal, Can Be Distant, andAlways Snap.

To make the current grid settingsthe default for new Flash files,click the Save Default button.

Click OK.8

7

6

5

4

3

2

1

The need for grids and guides varies depending upon the type of docu-ment you are working on. They are useful for aligning text and graphicsto interface elements and are an invaluable tool for creating a well composed and proportioned layout. Every project is different and hasdifferent requirements, so Flash allows the display, behavior, and char-acteristics of guides and grids to be altered to fit your needs. They areonly visible in the Flash development environment, and are not exportedin the Flash movie.

6

2 3 4 5

8

7

C03FLCS3.qxd 4/1/2007 5:40 AM Page 92


Modify Guides

Click the View menu, point toGuides, and then click Edit Guides.

TIMESAVER PressOption+Shift+A+G (Mac) orCtrl+Alt+Shift+G (Win) to quicklyaccess the Guides dialog box.

Click the Color popup, and thenclick a guide line color.

Select or clear the Show Guidescheck box to show or hide guides.

Select or clear the Snap To Guidescheck box to enable or disablesnapping.

Select or clear the Lock Guidescheck box to enable or disableediting of guides.

Click the Snap Accuracy popup,and then select a level ofsensitivity for snapping to theguides. Select from Must BeClose, Normal, Can Be Distant.

To remove all guides from theactive scene, click Clear All.

To make the current guides thedefault guides for new Flash files,click Save Default.

Click OK.

TIMESAVER Press A+; (Mac)or Ctrl+; (Win) to toggle betweenshowing and hiding guides; pressOption+A+; (Mac) or Ctrl+Alt+;(Win) to lock and unlock guides; orpress Shift+A+; (Mac) orCtrl+Shift+; (Win) to turn Snappingon and off.

9

8

7

6

5

4

3

2

1

6

2 3 4 5

9

7

8

C03FLCS3.qxd 4/1/2007 5:40 AM Page 93

94

Using Snap Align

Enable Snap Align

Click the View menu, point toSnapping, and then click Snap Align.

A check mark appears next to themenu item when Snap Align isenabled.

Drag an object on the Stage.

Depending on the behaviors set inthe Snap Align Settings dialog box,gray dashed lines appear whenthe edges or center vertices ofobjects move to within a certainpixel distance.

2

1

Snap Align is a new feature that enables dynamic alignment of art andobjects on the Stage. Simply drag an object on the Stage and dashedlines appear that aid you in aligning to the edge or center vertices ofother objects on the Stage. In the Edit Snapping dialog box you canenable and disable snap options, set the distance objects to be fromthe movie borders and from each other before they snap, and save thesettings as default. Additionally, you can choose to snap objects toedges or vertical and horizontal centers. Using the Snap Align featureenables you to lay out artwork more precisely and dynamically.

1

Edge Align Edge Align

Center AlignHorizontal

Center AlignVertical

Snap align to other items:Grid, Guides, Pixels, andObjects.

Did You Know?You can change snapping tolerances.Click the Flash (Mac) or Edit (Win)menu, and then click Preferences.Click the Drawing category, use theConnect Line popup to select anoption, and then click OK.

C03FLCS3.qxd 4/1/2007 5:41 AM Page 94


Configure Snap Align and Save Defaults

Click the View menu, point toSnapping, and then click EditSnapping.

Select the snap check box optionsyou want to turn on.

Click Advanced.

Select from the following options:

◆ Movie Border. Enter a value forthe distance an object needs tobe before it will snap to theboundaries of the movie (inpixels).

◆ Snap Tolerance. Enter a valuefor horizontal and vertical edgetolerance (in pixels).

◆ Center Alignment. Select thecheck boxes to centeralignment on horizontal orvertical vertices or both.

To make the snap align setting thedefault for future use, click SaveDefault.

Click OK.6

5

4

3

2

1

4

5

6

32


Snapping to an ObjectYou can use the Snap to Object command in the View menu or usethe Snap option for the Selection tool on the Toolbar. If the Snapoption is enabled, a small black ring appears under the pointer whenyou drag an object. The small ring changes to a larger ring when theobject is within snapping distance of another object.

C03FLCS3.qxd 4/1/2007 5:41 AM Page 95

96

Changing Stroke andFill Colors

Change the Stroke Color


Select the stroke of the shape bydouble-clicking it.

Click the Stroke color box in theToolbar.

Select a new color from thepalette.

4

3

2

1

Artwork created in Flash can have strokes and fills. Strokes and fillsbehave differently and are edited in different ways. A stroke is an out-line. It describes the edges of a shape or it can be a simple line. Youcan create strokes with the Line tool or the Pencil tool. A fill is a solidshape, often contained or surrounded by a stroke. It is the surface areaof a shape and can be a color, gradient, texture, or bitmap. Fills can becreated with the Paintbrush tool and the Paint Bucket tool. The Oval,Rectangle, and Pen tool can create shapes with either a stroke or a fill,or both. You can edit the characteristics of strokes and fills, such ascolor, in several ways. If the shape is selected on the Stage, a colorchange to a stroke or fill can be made in any of the color palettes.Because Flash uses vectors to describe shapes, you can change theirproperties as much as you want without any loss in quality. It is impor-tant to grasp the concept behind them because they are the basis fordrawing in Flash.

Did You Know?You can change the stroke color inthree other places. Stroke color boxesare also located in the PropertyInspector, the Color Mixer panel, andthe Swatches panel. In all cases,select the stroke you want to changeand choose a new color from any ofthe palettes.

You can change the line width andstyle of a stroke or set the stroke colorto None in the Property Inspector.Click the stroke you want to change toselect it, and then select any of theoptions in the Property Inspector.Setting the stroke color to Noneremoves the stroke from the shape.

1

2

3

4 Click to access theColor Picker.

Active color

C03FLCS3.qxd 4/1/2007 5:41 AM Page 96


1

2

3

4Gradients Click to access theColor Picker.

Change the Fill Color



Click the fill of the shape to select it.

This is the area inside the stroke.

Click the Fill color box in theToolbar.

Select a new color from thepalette.

4

3

2

1

Did You Know?You can change the fill color in threeother places. Fill color boxes are alsolocated in the Property Inspector, theColor Mixer, and the Swatches panel.Just select the fill and choose a newcolor from one of the palettes by click-ing on a new color box.

See AlsoSee “Editing Fills with the PaintBucket” on page 101 for information onchanging the fill color.

C03FLCS3.qxd 4/1/2007 5:41 AM Page 97

98

Creating CustomColors

Create a Custom Color byEntering a Value

Open or expand the Color Mixerpanel.

Enter values between 0 and 255 inthe RGB numeric entry boxes.

Enter an alpha value between 0and 100.

Click the Options button in thepanel, and then click Add Swatch.

4

3

2

1

Each Flash document has its own color palette. The color palette dis-plays as swatches when you access a color box or panel. The defaultcolor palette is the Web-safe palette of 216 colors. Flash allows you toedit and create new colors for strokes and fills in several ways in theColor Mixer panel. You can alter a color's RGB values (assigning it dif-ferent levels of Red, Green or Blue), Hue, Saturation, Brightness, andAlpha (transparency). You can accomplish this by using sliders, drag-ging on a color-space, or entering a numeric value that corresponds toa specific color. In each case you can save your color into the palettefor easy access.

Did You Know?You can alter the RGB values with thesliders located to the right of thenumeric entry boxes. Click the smalltriangles, and then drag the slidersthat appear. Additionally, you can dragthe cursor over the Color space bar atthe bottom of the Color Mixer panel tochange the color interactively.

You can also specify a color using ahexadecimal number in the ColorMixer. A hexadecimal number is aninternal computer numbering schemethat is used to identify colors in a colorpalette.

1

4

Options button

3

2

Color space bar

C03FLCS3.qxd 4/1/2007 5:41 AM Page 98


Create a Custom Color withthe Color Picker

Click a Stroke or Fill color box inthe Toolbar or the PropertyInspector.

Click the Color Wheel button tothe far right of the palette.

Click a color from one of theavailable pickers (Mac) or from theColor Window (Win).

Click OK.4

3

2

1

1

2

3


Working with Color PalettesEach Flash file stores its own color palette, Web safe 216 by default.If you change color in the default color palette, you can save thenew palette as the default or change back to the Web safe 216default. To view the color palette, click the Window menu, and thenclick Color Swatches. To load or save the default palette, click theOptions button in the Color Swatches panel, and then click LoadDefault Colors or Save As Default. To reload the Web-safe colorpalette, click the Options button, and then click Web 216.

Did You Know?You can import and export solid andgradient color palettes between Flashfiles and other applications. You canshare color palettes between applica-tions, such as Adobe Fireworks andAdobe Photoshop. Click the Windowmenu, and then click Color Swatches.Click the Options button on the panel,and then click Add Colors or ReplaceColors to import colors from a colorpalette, or click Save Colors to exportas a color palette.

4

C03FLCS3.qxd 4/1/2007 5:42 AM Page 99

100

Editing Strokes withthe Ink Bottle

Use the Ink Bottle

Select a stroke on the Stage, andthen change Stroke attributes inthe Property Inspector.

Click the Ink Bottle tool in theToolbar.

The pointer becomes a small inkbottle.

TIMESAVER Press S to selectthe Ink Bottle tool.

Click on the stroke of the shape toupdate it with the new attributes.

The stroke updates to the newcolor.

3

2

1

There are a number of ways to change the stroke of an object. You canselect the stroke and change its characteristics in the PropertyInspector, the Swatch palettes, and the Color Mixer. If you need toapply the stroke properties of one object to that of another, use the InkBottle tool. The Ink Bottle tool holds the properties you've set forstrokes in any of the palettes. You can click any object on the Stage tochange the properties of its stroke (color, line weight and style) or adda stroke to an object that doesn't have one.

Did You Know?You can click anywhere on the shapewith the Ink Bottle to change thestroke. If the object on the Stage isselected (stroke and fill), click downwith the Ink Bottle tool to update itsstroke.

1Stroke

ColorStrokeWeight

StrokeStyle

Built-in Stroke styles

3

Shape withupdated stroke

Customizestyles

2

C03FLCS3.qxd 4/1/2007 5:42 AM Page 100


Editing Fills with thePaint Bucket

Use the Paint Bucket

Change the Fill color box in eitherthe Property Inspector, the Colorsarea of the Toolbar, or the ColorMixer.

Click the Paint Bucket tool in theToolbar.

The pointer becomes a small paintbucket.

TIMESAVER Press K to selectthe Paint Bucket tool.

Click in the fill of a shape on theStage.

The fill updates to the new color.

3

2

1

You can change the fill of an object with the Paint Bucket tool. ThePaint Bucket stores the fill color you've set in the Toolbar or in theProperty Inspector. You can change the fill color of any existing shapeon the Stage by touching down on the shape with this tool. You canalso add a fill to any shape that has a closed stroke. After you selectthe Paint Bucket tool, you can select Paint Bucket sensitivity optionslocated at the bottom of the Toolbar.

2

3 Shape with updated fill

Paint Bucket sensitivity

Paint Bucket Options

1

Did You Know?You can set the sensitivity of the PaintBucket tool in the Options areas of theToolbox. These settings allow the PaintBucket tool to close gaps in a shape(such as a break in the stroke line) andadjust how large or small a gap needsto be before Flash will close it.

C03FLCS3.qxd 4/1/2007 5:42 AM Page 101

102

Ink Bottle appearswhen you click on astroke.

Editing Strokes andFills with theEyedropper

Use the Eyedropper Tool to EditStrokes and Fills

Click the Eyedropper tool in theToolbar.

The pointer becomes aneyedropper.

TIMESAVER Press I to selectthe Eyedropper tool.

Position the eyedropper over thestroke or fill of a shape on theStage.

◆ Strokes. When you arepositioned over a stroke, a tinypencil appears next to the tool.When you click on the strokethe Eyedropper becomes an InkBottle.

◆ Fills. When you are positionedover a fill, a tiny paint brushappears next to the tool. Whenyou click on the fill theEyedropper becomes a PaintBucket.

Click on another shape's stroke orfill to transfer the selectedattributes.

The stroke or fill updates to thenew color.

3

2

1

The Eyedropper tool allows you to select the attributes of a shape suchas fill and stroke color, and line weight and style, and then transferthem to other shapes. This tool detects whether you are selecting astroke or a fill, and then changes into the Ink Bottle (when selectingstrokes) or the Paint Bucket (when selecting fills). Instead of takingseveral steps to copy attributes from one shape to another, theEyedropper provides a quick means for storing and transferring attrib-utes between editable shapes.

Paint Bucket appearswhen you click on a fill.

1

Tiny Pencil appearsindicatingeyedropper ispositioned over astroke.

Tiny Paint brush appearsindicating eyedropper ispositioned over a fill.

C03FLCS3.qxd 4/1/2007 5:43 AM Page 102


Creating Gradients

Create a Multi-Color Gradient

With the Arrow Selection tool,select the fill or stroke of a shapeon the Stage.

In the Color Mixer panel, click theFill Style Type popup, and thenclick Linear or Radial.

Click the Overflow popup, andthen select the gradient overflowstyle you want to control colorspast the limits of the gradientwhen publishing for Flash Player 8 (New!).

Position the pointer on theGradient bar to display a plus (+)sign next to the pointer.

Click in the Gradient bar to createa color proxy indicated by a littlebox with a triangle on top.

TIMESAVER To remove aproxy color indicator, drag it down.

Click one of the color proxyindicators to select it.

Click a new color from the ColorPicker below.

Drag the color proxy indicatoralong the Gradient bar to adjustthe color placement.

Repeat steps 4-8 to add up to 15more gradient colors.

9

8

7

6

5

4

3

2

1

Flash can create a number of paint effects in addition to solid colors.Gradients are made up of two or more colors that gradually fade intoeach other. They can be used to give depth to an object or create real-istic shadows. Two gradient modes are available: linear and radial.Linear gradients are made up of parallel bands of color. Radial gradi-ents radiate from a center focal point. Both can be edited for color,alpha, and position within a fill or stroke. You can add up to 16 colors toa gradient, precisely control the location of the gradient focal point,and apply other parameters. A gradient behaves like any other fill orstroke. It can be saved to the palette as a swatch using the Color Mixerpanel Options button, and added to other shapes with the Paint Buckettool.

Example: 3-ColorLinearGradient

1

5

2

6

4

3

7

C03FLCS3.qxd 4/1/2007 5:43 AM Page 103

104

Using the Fill Lock

Lock Gradients

Create two simple shapes usingthe Rectangle or Oval tool.

Select the first shape on the Stagewith the Arrow Selection tool.

Click the Paint Bucket tool in theToolbar.

TIMESAVER Press K to selectthe Paint Bucket Tool.

Click the Lock Fill button in theOptions area of the Toolbar.

Select a Gradient from the Colorsarea of the Toolbar or use theColor Mixer or Property Inspector.

Click the Eyedropper tool in theToolbar, and then click on thegradient fill in the first shape.

Click down on the second shape toadd the gradient fill.

7

6

5

4

3

2

1

As you increase the complexity and number of shapes in your movie, itcan become tricky to edit each object separately. When using gradientfills on several objects you can choose to span a gradient across sev-eral of these objects or give each object its own discreet gradient. TheLock Fill feature allows you to control how a fill is applied, essentiallylocking its position so that depending on where the shapes are posi-tioned relative to the gradient, the one gradient spans all of the shapes.If you apply the same gradient to multiple shapes with the Fill Lock off,the gradient is applied to each shape independently.

Did You Know?You can quickly add a gradient thatspans all of your shapes. Select all ofthe objects you want to fill, and thenchoose a gradient. Click the PaintBucket tool and make sure the Fill Lockis not selected. With your shapes stillselected, touch down on them with thePaint Bucket.

6

4

3

5

2 7

1

Shape 1 and 2with Fill Lock

Shape 1 and 2without Fill Lock

C03FLCS3.qxd 4/1/2007 5:43 AM Page 104


Using Paint BrushModes

Use Paint Brush Modes

Click the Paint Brush tool in theToolbar.

Click the Brush Mode popup in theOptions area in the Toolbar, andthen select from the following:

◆ Paint Normal. The brush paintsover everything includingstrokes and other fills.

◆ Paint Fills. Painting only affectsexisting fills and empty areas ofthe Stage. Strokes are ignored.

◆ Paint Behind. The Paint Brushonly affects empty areas of theStage keeping existing linesand fills intact.

◆ Paint Selection. Painting onlyaffects the selected areas youdefine with any of the selectiontools.

◆ Paint Inside. The Paint Brushonly affects the fill of the shapeyou started in, ignoring othershapes and empty areas on theStage.

2

1

In addition to size, shape, and color settings for the Paint Brush tool,you can control how the brush behaves when painting on existingshapes and objects on the Stage. Paint Brush modes can restrict thearea affected by the tool to fills or selections, empty areas of the Stageor specific shapes. When the Paint Brush tool is selected, a popupmenu appears in the Toolbar. Select from the following modes: PaintNormal, Paint Fills, Paint Behind, Paint Selection, and Paint Inside. Eachperforms a specific operation providing you with varying levels of con-trol as you paint. Flash previews your paint path as you paint, but it onlyaffects the areas you've specified in the Paint modes. When yourelease the mouse, these previews disappear.

Paint Normal

Paint Fills Paint Behind

Paint InsidePaint Selection

Brush mode options

1

2

C03FLCS3.qxd 4/1/2007 5:44 AM Page 105

106

Drawing with the Pen Tool

Use the Pen Tool to Create anOpen Path

Click the Pen tool arrow in theToolbar, and then click Pen Tool.

TIMESAVER Press P to quicklyselect the Pen tool.

Click on the Stage.

An anchor point is created.

Move your pointer to anotherposition, and then click again.

Flash connects the two anchorpoints.

Double-click to end the path.

TIMESAVER Ctrl+click (Win) orCommand+click a blank area toleave the path open.

4

3

2

1

The Pen tool is the basis for vector drawing. The Pen tool now behavessimilarly to the Illustrator Pen tool to provide consistency across Adobesoftware (New!). Flash provides a number of ways to draw and editobjects that are unique to Flash but the Pen tool utilizes proceduresthat will be familiar to those who have used other vector drawing pro-grams. The Pen tool utilizes anchor points and Bézier handles to createlines and shapes and behaves in a way that is familiar to those whohave used other programs such as Adobe Illustrator and AdobeFreeHand. You can use the Pen tool arrow to select a different pen toadd, delete, or convert anchor points. You can edit the anchor pointsand vectors to create the drawings you want.

Did You Know?You can end an open path using a key-board shortcut. Press A+click (Mac)or Ctrl+click (Win).

See AlsoSee “Modifying Shapes with the Sub-Selection Tool” on page 112 for infor-mation on using tools.

2 3

Open path drawn

1

Pen tools

C03FLCS3.qxd 4/1/2007 5:44 AM Page 106


Use the Pen Tool to Create aClosed Path


TIMESAVER Press P to quicklyselect the Pen tool.

Click on the Stage.

An anchor point is created.

Move your pointer to anotherposition, and then click again.

Flash connects the two anchorpoints.

Move the pointer to a thirdposition, and then click again.

Flash connects the second andthird anchor points.

Move the pointer back to the firstanchor point.

A small circle appears next to thepen pointer indicating you canclose the path of the shape.

Click to close the shape.6

5

4

3

2

1

Did You Know?You can delete an anchor point withthe Pen tool. Click the Pen tool arrow,click Delete Anchor Point Tool, andthen click the point you want to delete.

You can add an anchor point with thePen tool. Click the Pen tool arrow,click Add Anchor Point Tool, and thenclick where you want to add a point.

You can create horizontal, vertical,and 45 degree lines while you draw.Hold the Shift key while you draw toconstrain a line to horizontal, vertical,and 45 degree angles.

2 3

1

4

5

Closed path drawn

Understanding Pen Pointers

Pointer Description

Initial Anchor Point First pointer to create the beginning ofa new path.

Sequential Anchor Creates an anchor point with a linePoint connecting the previous anchor point.

Add Anchor Point Adds an anchor point to existing path.

Delete Anchor Point Deletes an anchor point within a path

Continue Path Extends a new path from an existinganchor point.

Close Path Closes the path of a drawing on the starting anchor point.

Join Paths Closes the path except not over the starting anchor point.

Retract Bézier Handle Displays Bézier handles when you pointto an anchor. Click to retract then handles and revert to straight segments.

Convert Anchor Point Converts a corner point without direction lines to a corner point with independent direction lines. Use Shift+Cmodifier keys to toggle the pen.

C03FLCS3.qxd 4/1/2007 5:44 AM Page 107

108

Drawing Curves withthe Pen Tool

Create Curved Line Segments


Click on the Stage withoutreleasing the mouse, drag up, andthen release the mouse.

Position the pointer to the right ofthe original point, drag in theopposite direction of the curve,and then release the mouse whenthe curve is where you want it.

Continue adding points as needed.To end the path, double-click orreturn to the last anchor pointdrawn and click on it.

4

3

2

1

The Pen tool can be used to draw precise and complex curves by sim-ply clicking and dragging it on the Stage. These curves can be modifiedwith precision by adjusting the Bézier handles that extend from theanchor points, or you can move the anchor points themselves. In thisway, you can create any number of shape variations. For best results,make the grid visible so aligning anchor points isn't such a mystery.

Did You Know?You can select to Show PreciseCursors instead of the Tool icons inthe General tab of the Preferencesdialog box. When this option isselected, drawing tools, such as thePen tool, appear as crosshairs for bet-ter precision and alignment to gridsand guides.

You can convert a curve point to a cor-ner point. Click the Pen tool arrow,click Convert Anchor Point Tool, andthen click the curve point you want tocovert to a corner point.

1

2

3

Curved line segment drawn

C03FLCS3.qxd 4/1/2007 5:44 AM Page 108


Create S-Curves


Click on the Stage withoutreleasing the mouse, drag down,and then release the mouse.

Position the pointer to the right ofthe original point, drag in the samedirection as the first drag, andthen release the mouse when thecurve is where you want it.

Continue adding points as needed.To end the path, double-click orreturn to the last anchor pointdrawn and click on it.

4

3

2

1

1

2

3

S-Curve drawn

C03FLCS3.qxd 4/1/2007 5:45 AM Page 109

110

Modifying Shapeswith the Arrow Tool

Use the Arrow Tool to Modify a Shape

Create a simple oval shape usingthe Oval tool.



Make sure the shape you want tomodify is not selected.

Position the pointer on the edge ofthe shape, and then drag to modifythe shape.

You can pull the curve to anyposition.

4

3

2

1

In Flash, unlike other vector drawing programs, you can edit shapesand lines in a unique, freeform way by simply dragging with the ArrowSelection tool. You can quickly adjust the curve or corner of a shape orline without having to select anchor points or use any other tools. Thisway of editing shapes is also useful for creating shape tweens whereamorphous, organic movement is desired. This is what sets Flash apartfrom other animation tools and gives it its distinctive style. Additionally,you can convert curved line segments into corner points with this sim-ple drag technique.

2

1

4

Modified shape

C03FLCS3.qxd 4/1/2007 5:45 AM Page 110


Convert Line Segments with theArrow Tool




Make sure the shape you want tomodify is not selected.

Position the pointer on the edge ofthe shape.

Press Option+drag (Mac) orAlt+drag (Win) to create a cornerpoint.

5

4

3

2

1

2

1

4

Modified shape

More corners added

C03FLCS3.qxd 4/1/2007 5:45 AM Page 111

112

Modifying Shapes with the Sub-Selection Tool

Use the Sub-Selection Tool toModify a Shape


Click the Sub-Selection tool in theToolbar.

The pointer becomes an empty (or white) arrow.

Click on the edge of the shape toreveal the anchor points, and thenclick on an anchor point to select it or drag a selectionrectangle to select multiple anchorpoints.

The anchor points are the littlewhite squares around the edge ofthe shape. When selected, Bézierhandles appear on either side ofthe anchor point.

Grab one of the handles or theanchor points themselves anddrag it, and then release themouse.

4

3

2

1

Vector shapes are made up of anchor points connected by line seg-ments. There are two types of anchor points: corner points and curvepoints. Corner points connect two line segments in a sharp angle suchas the corner of a square. Curve points define a curve or positionsalong a straight line and can be modified with Bézier handles. Thesehandles extend out from the curve point and allow for very precisemodification of the shape of the curve. The Sub-Selection tool workshand-in-hand with the Pen tool to create and modify shapes and linesin this way.

Did You Know?You can also use the arrow keys onthe keyboard to move selected anchorpoints. Select one or more anchorpoints with the Sub-Selection tool, andthen press the arrow keys to move theanchor point and its connected lines inthe direction of the key you press.

2

3

1

4

C03FLCS3.qxd 4/1/2007 5:46 AM Page 112


Convert Corner Points to Curve Points

Create a simple rectangle shapeusing the Rectangle tool.

Click the Sub-Selection tool in theToolbar.

The pointer becomes an empty (orwhite) arrow.

Click on the edge of the shape toselect it and then click on one ofthe corner points to select it.

Press Option+drag (Mac) orAlt+drag (Win) the point to convertit to a curve point and createBézier handles.

Convert Curve Points to Corner Points


Click the Pen tool in the Toolbar.

The pointer becomes a small pen.

Click on the edge of the shape toreveal the anchor points.

Position the pointer over one ofthe curve points.

A small corner icon appears.

Click on the point to convert it to acorner point.

5

4

3

2

1

4

3

2

11

4

3

12

4

5 All anchor pointsconverted tocorner points.

?

2

C03FLCS3.qxd 4/1/2007 5:46 AM Page 113

114

Using the FreeTransform Tool

Change the Scale of an Object

Select the object by clicking on itor by dragging a selectionmarquee around it with the Arrowtool.

Click the Free Transform tool in theToolbar.

TIMESAVER Press Q to selectthe Free Transform tool.

Click the Scale Modifier button inthe Options area of the Toolbar.

Drag any of the small handles onthe bounding box to change thesize of the shape. The cornerhandles resize proportionally whilethe handles along the sides resizeeither horizontally or vertically.

To change the transformationpoint, drag the circle handle.

5

4

3

2

1

There are a number of ways to change the scale or size of graphics inFlash. The Free Transform tool position on Toolbar allows you to inter-actively scale and rotate any selected object or shape on the Stage.Nearly every object in Flash can be transformed with these two func-tions of the Free Transform tool including groups, symbols, text,bitmaps, and editable shapes. The Free Transform tool allows you toselect an object on the Stage and then interactively change its size orrotate it freely. Both options are available at once depending on whereyou place your mouse on the bounding box that appears.

3

2

4

Did You Know?You can restore a transformed object.Select the transformed object, clickthe Modify menu, point to Transform,and then click Remove Transform.

You can reset a transformed object. Ifyou want to redo a transformation,select the object, and then click theReset button in the Transform panel(available on the Window menu).


Working with the Transformation Point

When you transform an object, a transformation point appears at thecenter of the object. The point is initially placed in the center of theobject, but you can move it at any time. To move the transformationpoint during a transformation, drag the point. To set it back to thecenter, double-click the point. To switch the point of origin for a scaleor skew, Alt+drag (Win) or Option+drag (Mac) the point. To monitorthe location of the transformation point (X and Y positions), click thecenter square in the grid in the Info panel (available on the Windowsmenu).

5

C03FLCS3.qxd 4/1/2007 5:47 AM Page 114


Rotate and Skew an Object

Select the object by clicking on itor by dragging a selectionmarquee around it.



Click the Rotate/Skew Modifierbutton in the Options area of theToolbar.

Drag any of the corner handles onthe bounding box to rotate theshape. Drag the handles along theside to skew the object.

To change the transformationpoint, drag the circle handle.

5

4

3

2

1

Did You Know?You can hold down the Shift key toconstrain the rotation scale propor-tionally. When rotating, it constrainsthe rotation to 45-degree turns.


Working with Scale and RotateIn the Default mode, both Scale and Rotate are enabled. Move thepointer to any of the four corner handles in the bounding box toenable the Rotate function. Scale and Rotate work relative to a cen-ter transformation point on the shape, which becomes visible whenthe shape is selected with the Free Transform tool. Move this point ifyou want to scale or rotate a shape from a different part of theshape. This is especially important when tweening and animating.You can change the scale and rotate objects by entering values inthe Transform panel or in the Property Inspector. You can alsoaccess all of the Transform modes and some additional effects, suchas Flip Horizontal and Vertical from the Transform submenu in theModify menu.

4

3

2

5

4 Skew

Rotate

C03FLCS3.qxd 4/1/2007 5:47 AM Page 115

116

Using TransformOptions for Shapes

Distort a Shape

Select the object.



Click the Distort Modifier button inthe Options area of the Toolbar.

Drag any of the corner handles onthe bounding box to distort theshape.

Drag any of the side handles onthe bounding box to skew orstretch the shape.

Change the Envelope of a Shape

Select the object.



Click the Envelope Modifier buttonin the Options area of the Toolbar.

Drag any of the handles on thebounding box to pull the shape inany direction or use the Bézierhandles to fine tune the curves.

4

3

2

1

5

4

3

2

1

In addition to the scale and rotation changes that can be applied togroups, symbols, bitmaps, and text as well as editable shapes, thereare two additional transforms available only to editable shapes. Distortand Envelope are two modes available in the Free Transform tooloptions that enable you to transform the vectors of editable shapes tovarying degrees. Distort transformations work on adjoining edges,tapering them down to vanishing points, similar to perspective.Envelope transformations allow you to warp the edges of a shape bysplitting it up into smaller portions each controlled by their own vectorsand anchor points.

3

42

5

4

3

2

C03FLCS3.qxd 4/1/2007 5:47 AM Page 116


Transforming Gradient Fills

Adjust a Gradient Fill

Click the Gradient Transform toolin the Toolbar.

Click the gradient fill to select it.

A bounding box appears around it.

Position the pointer over an editinghandle on the bounding box toidentify its function.

◆ Center point. Four-way arrow.

◆ Focal point. Inverted triangle.

◆ Size. Circle with an arrow.

◆ Rotation. Four arrows in theshape of a circle.

◆ Width. Double-ended arrow.

Click and drag an editing handle toadjust the gradient fill.

4

3

2

1

After you create a gradient fill, you can transform it by adjusting thesize, rotation, width, or center of the fill with the Gradient Transformtool (formally called the Fill Transform tool). For a radial gradient, youcan now adjust the focal point (center) of a gradient fill applied to anobject. You can also use the Gradient Transform tool to modify a bitmapfill.

See AlsoSee “Modifying a Bitmap Fill” on page196 for information on using theGradient Transform tool with bitmaps.

1 2 4

Use Color Mixer to changecolor gradient settings

Radial gradient

C03FLCS3.qxd 4/1/2007 5:48 AM Page 117

118

Cutting and PastingGraphics BetweenLayers

Paste Objects Between Layers

Create or open a document withseveral layers.

Select one or more objects on theStage.

Flash selects the object’s layer inthe Timeline.

Click the Edit menu, and then clickCut or Copy.

Select a destination layer in theTimeline.

Click the Edit menu, and then clickPaste In Center.

Flash pastes the objects on theStage in the middle of the activelayer.

5

4

3

2

1

Unless you lock or hide layers, or lock objects, the graphics on all lay-ers are available for editing. You can select objects on one or more lay-ers, cut or copy them, and then paste them all into a single layer. Flashcan have only one layer active at a time. When you create and pastegraphics, Flash places them on the active layer of a document. You canpaste objects in two different ways: Paste In Center and Paste In Place.Paste In Center puts objects in the center of the open Flash window,which might not be the Stage. If you want to paste to the center of theStage, you need to center the Stage in the open window. Paste InPlace puts objects at the same location it had been when you cut orcopied it.

2

1

4

Shape pasted onlayer 2 in the center.

Did You Know?You can use the area around the Stageto store graphics and other objects.Flash allows you to use the areaaround the Stage, called thePasteboard, to store items for use laterwithout having them appear on theStage when you play the movie (SWF)file.

C03FLCS3.qxd 4/1/2007 5:48 AM Page 118


Use the Paste In PlaceCommand Between Layers


Select one or more objects on theStage.


Click the Edit menu, and then clickCut or Copy.

Select a destination layer in theTimeline.

Click the Edit menu, and then clickPaste In Place.

Flash pastes the objects into theiroriginal locations on the Stage inthe middle of the active layer.

5

4

3

2

1

1

4

Shape pasted onlayer 2 in place.

2

C03FLCS3.qxd 4/1/2007 5:48 AM Page 119

120

Working withGraphics on DifferentLayers

Edit Object on Inactive Layers


Click the Selection tool in theToolbar.

Select an object on the Stage.


Click a blank area of the Stage.

Flash deselects the object butkeeps the active layer.

Make changes to another object inanother layer (inactive layer)without actually selecting theobject. You can do any of thefollowing:

◆ Drag an object’s outline toreshape it.

◆ Select a tool on the Toolbar,such as the Paint Bucket tool,and use it to modify the object.

Flash modifies the object in theinactive layer. The active layerdidn’t change. Flash changesactive layers only if you select anobject.

5

4

3

2

1

When you select an object on the Stage, Flash selects the object’slayer in the Timeline. The reverse is also true. When you select a layerin the Timeline, Flash selects all the objects for that layer on the Stage.As you work with objects on different layers, it helps to know howselections work. Unless you lock or hide layers, or lock objects, theobjects on all layers, either active or inactive, are available for editing.You can activate a layer and edit objects on inactive layers.

2

1 Layer 1 active

3

4

Layer 1 still active

5

C03FLCS3.qxd 4/1/2007 5:49 AM Page 120


Distributing Graphicsto Layers

Place Selected Objects onSeparate Layers

Create or open a document withseveral objects on a single layer.

Select all the objects on a singlelayer you want to distribute toseparate layers.

TIMESAVER Click the Editmenu, and then click Select All orpress A+A (Mac) or Ctrl+A (Win).

Click the Modify menu, point toTimeline, and then click DistributeTo Layers.

TIMESAVER Press A+Shift+D(Mac) or Ctrl+Shift+D (Win) todistribute to layers.

Flash creates a layer for eachobject. New layers appear at thebottom of the Timeline in the orderin which you originally placedthem on the Stage. Each object isplaced in the same location on theStage (like the Paste In Placecommand).

3

2

1

If you have several objects on a single layer, and need to move themonto separate layers, you can use Cut and Paste in place for eachobject or you can save time by using the Distribute to Layers command.The Distribute to Layers commands puts each object (shapes, groups,and symbols) in a selection on a separate layer; any unselected objectsremain on their original layer. This command comes in handy when youwant to create a motion tweening animation, which requires objects tobe on individual layers.

See AlsoSee Chapter 8, “Animating with MotionTweening” on page 221 for informationon using motion tweening.

1

2

Shape on layer 5

Text on layer 3

Shape on layer 4

Text on layer 2

C03FLCS3.qxd 4/1/2007 5:49 AM Page 121

122

Working With ObjectDrawing

Enable and Use Object Drawing

Select a drawing tool in theToolbar that supports ObjectDrawing (Pencil, Line, Pen, Brush,Oval, Rectangle, and Polygon).

Select the Object Drawing buttonin the Toolbar.

TIMESAVER Press the J key totoggle between Merge and ObjectDrawing.

With the Pointer tool, click toselect an object, and then drag thebounding box to move it.

To switch back Merge Drawing,click the Object Drawing buttonagain.

4

3

2

1

Previously in Flash, all shapes in the same layer on the Stage couldchange other overlapping shapes, known as Merge Drawing. In Flash,you can create shapes directly on the Stage that do not affect otheroverlapping shapes, known as Object Drawing. By default, Flash usesMerge Drawing. To draw shapes using Object Drawing, you use theObject Drawing button in the Toolbar. When you select a shape createdusing Object Drawing, Flash selects the shape with a rectangularbounding box, which you can use with the Pointer tool to move theshape on the Stage. You can use General preferences to set selectionoptions for contact-sensitivity when selecting shapes created usingObject Drawing.

See AlsoSee “Setting General Preferences” onpage 60 for information on options forcontact-sensitivity when selectingshapes created using Object Drawing.

Did You Know?You can convert a Merge Drawingshape to an Object Drawing shape.Select the shape on the Stage, clickthe Modify menu, point to CombineObject, and then click Union.

1

2

Bounding box

Objects createdwith Object Drawing

3

C03FLCS3.qxd 4/1/2007 5:50 AM Page 122

Creating Graphics -...

Documents

Transcript of Creating Graphics -...