© 2010 Delmar, Cengage Learning Chapter 2: Drawing Objects in Adobe Flash

© 2010 Delmar, Cengage Learning

Chapter 2:

Drawing Objects in Adobe Flash

© 2010 Delmar Cengage Learning

Chapter 2 Lessons

1. Use the Flash drawing tools

2. Select objects and apply colors

3. Work with drawn objects

4. Work with text and text objects

5. Work with layers and objects


Drawing Objects in Adobe Flash

• Flash creates and manipulates vector graphics

• Vector format vs. bitmap format– Bitmap graphics are based on pixels– Altering pixels can result in jagged edges


Vector Graphics

• Represent images using lines, curves• Can resize without losing image quality• Generally smaller than bitmap images• Not as effective at bitmaps for photo-realistic

images


Modifying Vectors

• Objects created using Flash drawing tools have a stroke, a fill, or both

• Strokes can be segmented into smaller lines• You can modify the size, shape, rotation,

and color of each stroke, fill and segment


Flash Drawing Modes

• Merge Drawing Model• Object Drawing Model


Flash Drawing Tools• Selection

– Used to select an object or parts of an object such as the stroke or fill, and to reshape objects

• Subselection– Used to select, drag, and reshape

• Free Transform– Used to transform objects by rotating, scaling,

skewing, and distorting• Gradient Transform

– Used to transform a gradient fill by adjusting the size, direction, or center of the fill


The Drawing Tools

• Lasso– Used to select objects or parts of objects

• Pen– Used to draw lines and curves by creating

a series of dots• Text

– Used to create and edit text


The Drawing Tools

• Line– Used to draw straight lines

• Oval– Used to draw oval and circular shapes

• Rectangle– Used to draw rectangular and square shapes

• Polystar– Used to draw polygons and stars


The Drawing Tools

• Pencil– Used to draw freehand lines

• Brush– Used to paint with brush-like strokes

• Ink Bottle– Used to apply line colors and thickness to

a stroke


The Drawing Tools

• Paint Bucket– Used to fill enclosed areas of a drawing

with color• Eyedropper

– Used to copy stroke, fill and text attribute from one object to another

• Eraser– Used to erase lines and fills


Fig. 1: Flash Tools


Working with Grouped Tools

• To display a list of grouped tools, you click the tool and hold the mouse button until the menu opens.

• You know a tool is a grouped tool if you see an arrow in the lower-right corner of the tool icon.


Working with Tool Options

• Some tools have additional options that allow you to modify their use.

• If additional options for a tool are available, they appear at the bottom of the Tools panel in the Options area when the tool is selected.

• If the option has a menu associated with it, then the option icon will have an arrow in the lower-right corner.


Positioning Objects on the Stage

• Position objects using rulers, gridlines, and guides found on the View menu.

• In addition to using rulers and guides to help place objects, you can create a new layer as a Guide layer that you use to position objects on the Stage.

• Position objects using Align options.


Fig. 2: Using Rulers to Position an Object


Fig. 3: Using Gridlines to Position an Object


Fig. 5: Tool Name on the Tools Panel

Your settings may vary

Point to a tool to display its name

Stroke Color tool (red selected)

Fill Color tool (blue selected)


Fig. 8: Setting Anchor Points to Draw an Arrow


Fig. 10: Images Drawn Using Drawing Tools


Fig. 11: Dot Pattern Indicating Object Is Selected


Selecting Objects

• Before you can edit a drawing, you first must select the object, or part of the objects– Objects are made up of stroke(s) and a fill– Strokes and fills can be selected

independently• Strokes can have several segments


Using the Selection Tool

• To select only the fill, click just the fill• To select only the stroke, click just the stroke• To select both the fill and the stroke, double-

click the object or draw a marquee around it• To select part of an object, drag a marquee

that defines the area you wish to select• To deselect an item(s), click a blank area of

the stage


Fig. 14: Selected Objects

Unselected Stroke and Fill selected

Stroke selected

Fill selected

Group selected

Part of object selected


Using the Lasso Tool

• Provides more flexibility when selecting an area of the stage

• Use the tool in a freehand manner to select any size and shape of area

• Use the Polygon Mode option to draw straight lines and connect them


Drawing Model Modes• Merge Drawing Model mode

– Stroke and fill are separate– Stroke and fill can be individually selected

• Object Drawing Model mode– Stroke and fill are combined and cannot

be selected individually– Use the Break Apart option from the

Modify menu to separate the stroke and fill


Object Drawing Model

• In either mode you can turn off the fill or the stroke when drawing an object

• You can toggle between the two modes using the Object Drawing icon in the options section of the Tool panel


Working with Colors

• Change color of the stroke or fill• Stroke Color and Fill Color tool

– Located on colors section of Tool panel– Click and select a color swatch on the

color palette• The Color palette

– Can type in a six character code that represents the RGB values


Fig. 16: Color Palette Showing the Hexadecimal Number

Hexadecimal number for shade of gold color


Working with Gradients

• A gradient is a color fill that makes a gradual transition from one color to another

• Apply a gradient with the Paint Bucket Tool• The position of the Paint Bucket Tool

determines the direction of the gradient fill


Fig. 24: Gradient Transform Handles

Handles are used to adjust

the gradient effect


Copying and Moving Objects• Objects can be copied and pasted• You move an object by:

– selecting it and dragging it to a new location– You precisely position an object by selecting it

and then pressing the arrow keys, which move the selection up, down, left, and right in small increments

– In addition, the X and Y coordinates in the Property inspector can be used to position an object exactly on the stage


Transforming Objects

• Objects can be transformed with the Free Transform Tool– Select the object, then the tool to display

the eight square-shaped handles and center circular transformation point

– Rotate and Skew, Scale, Distort, Envelope


Resizing an Object

• Objects can be enlarged or reduced in size• Use the Scale option of the Free Transform

tool– Drag corner handles to resize the object

without changing its proportions– If you drag one of the middle handles, the

object will be reshaped as taller, shorter, wider, or narrower


Rotating and Skewing an Object

• Select the object, click the Free Transform tool, click the Rotate and Skew option

• Use the Distort and Envelope options to reshape an object by dragging its handles


Fig. 26: Using Handles to Manipulate an Object

Drag corner handle to rotate an object

Drag middle handle to skew an object


Reshaping a Segment of an Object

• The Sub-selection tool can be used to reshape a segment of an object

• The Selection tool can be used to reshape the edge of an object– When you point to the edge, the pointer displays

an arc symbol– You can drag the edge of an object by using the

Arc pointer– If the selection tool points to a corner of an

object, the pointer displays an L-shaped symbol


Fig. 27: Using the Selection Tool to Distort an Object


Flipping an Object

• You can use a Flip option on the Transform menu to flip an object horizontally or vertically

• The Remove Transform Command allows you to restore an object to its original state


Fig. 32: Using the Transform Panel to Rotate an Object


Fig. 35: Using the Selection Tool to Drag an Edge to Reshape an Object

Click here, then drag


Fig. 37: Setting the Corner Radius of Two Corners

Your values will differ

Type the values

Use the slider to quickly change the radius of the corners


Work with Text

• Flash provides a lot of flexibility when formatting text– Typeface (font)– Size– Style (bold, italic)– Color (including gradients)– Transformation


Entering Text and Changing the Text Block• Text is entered into “Text Blocks”• Text Blocks expand as more text is entered

and may extend beyond the edge of the stage

• You can adjust the size to a fixed width by dragging the handle in the upper right corner


Fig. 41: Using the Text Tool

Text tool pointer on the Stage

Empty text block created by clicking the

Text tool

Text block before resizing

Text block after resizing Handle indicating

a fixed width for the text block

Handle used to resize the text block


Changing Text Attributes

• The Properties panel allows you to change the font, size, and style of a single character or an entire text block


Fig. 47: The Filters Option in the Property Panel


Working with Paragraphs

• Flash acts similar to a word processor• You can align paragraphs

– Left, Right, Center, Justified• Use the Properties panel to:

– Set margins, indents, and line spacing


Transforming Text

• Text is an object, and can therefore be transformed like other objects in Flash– The entire text block gets transformed

• Use “Break Apart” command to transform individual letters


Fig. 48: Skewing the Text


Fig. 49: Reshaping a Letter

Drag this handle; notice the lines are drawn from the anchor points on either side of the anchor point being dragged


Learning about Layers

• Two types of spatial organization– Position of objects on the stage– Stacking order of objects that overlap

• Layers are used on a timeline as a way to organize objects

• Placing objects on their own layer makes them easier to work with


Five Types of Layers

• Normal (default layer type)– All objects on these layers appear in the

movie• Guide (Standard and Motion)

– Standard guide layers serve as a reference point for positioning objects on the stage

– Motion guide layers are used to create a path for animated objects to follow


Six Types of Layers

• Mask– A layer that contains and reveals portions of another

layer• Masked

– A layer that contains the objects that are hidden and revealed by a Mask layer

• Folder– A layer that can contain other layers


Working with Layers

• Using the Layer Properties dialog box allows you to:– Specify the type of a layer– Name a layer– Show/Hide a layer– Lock a layer– View layers as outlines


Fig. 51: Layer Properties Dialog Box


Fig. 52: Layers Section of the Timeline

Show or Hide All Layers

Lock or Unlock All

Layers

New Layer icon Icon indicates that the layer has been selected but it cannot be edited

Show or hide this layer

Padlock indicates this layer is locked

Lock or Unlock This Layer

Show All Layers as Outlines


Using a Guide Layer

• Used to align objects on the stage– Use the Layer Properties Dialog box to set

the layer as a guide– Turn on “Snap to Guides”– Drag the desired object to the guide line


Fig. 53: A Guide Layer

Line drawn on a Guide layer


Distributing Text to Layers

• Used when text blocks are made up of more than one character

• Distributes text to its own respective layer


Fig. 55: Distributing Text to Layers


Using Folder Layers

• Allows you to organize layers by creating folders and grouping other layers in them


Fig. 56: A Folder Layer


Chapter 2 Summary

1. Use the Flash drawing tools

2. Select objects and apply colors

3. Work with drawn objects

4. Work with text and text objects

5. Work with layers and objects

Documents

© 2010 Delmar, Cengage Learning Chapter 2: Drawing Objects in Adobe Flash