© 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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Flash Drawing Modes

• Merge Drawing Model• Object Drawing Model

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 1: Flash Tools

© 2010 Delmar Cengage Learning

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.

© 2010 Delmar Cengage Learning

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.

© 2010 Delmar Cengage Learning

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.

© 2010 Delmar Cengage Learning

Fig. 2: Using Rulers to Position an Object

© 2010 Delmar Cengage Learning

Fig. 3: Using Gridlines to Position an Object

© 2010 Delmar Cengage Learning

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)

© 2010 Delmar Cengage Learning

Fig. 8: Setting Anchor Points to Draw an Arrow

© 2010 Delmar Cengage Learning

Fig. 10: Images Drawn Using Drawing Tools

© 2010 Delmar Cengage Learning

Fig. 11: Dot Pattern Indicating Object Is Selected

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 14: Selected Objects

Unselected Stroke and Fill selected

Stroke selected

Fill selected

Group selected

Part of object selected

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 16: Color Palette Showing the Hexadecimal Number

Hexadecimal number for shade of gold color

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 24: Gradient Transform Handles

Handles are used to adjust

the gradient effect

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 26: Using Handles to Manipulate an Object

Drag corner handle to rotate an object

Drag middle handle to skew an object

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

Click here, then drag

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Work with Text

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Changing Text Attributes

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

© 2010 Delmar Cengage Learning

Fig. 47: The Filters Option in the Property Panel

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 48: Skewing the Text

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 51: Layer Properties Dialog Box

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

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

© 2010 Delmar Cengage Learning

Fig. 53: A Guide Layer

Line drawn on a Guide layer

© 2010 Delmar Cengage Learning

Distributing Text to Layers

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

• Distributes text to its own respective layer

© 2010 Delmar Cengage Learning

Fig. 55: Distributing Text to Layers

© 2010 Delmar Cengage Learning

Using Folder Layers

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

© 2010 Delmar Cengage Learning

Fig. 56: A Folder Layer

© 2010 Delmar Cengage Learning

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