Chapter 2 Drawing Objects in Adobe Flash. 1.Use the Flash drawing and alignment tools 2.Select...

Chapter 2

Drawing Objects in Adobe Flash

1. Use the Flash drawing and alignment tools2. Select objects and apply colors3. Work with drawn objects4. Work with text and text objects5. Work with layers and objects

Chapter 2 Lessons

– Computers display graphics in either a bitmap or vector format

– A bitmap graphic represents an image as an array of dots, called pixels, which are arranged within a grid

– A vector graphic represents an image using lines and curves, which you can resize without losing image quality

Use Flash Drawing and Alignment Tools

– Vector graphics are not as effective as bitmap graphics for representing photo-realistic images

– Flash images are vector graphics and they are referred to as objects

– One of the most compelling features of Flash is the ability to create and manipulate vector graphics

Use Flash Drawing and Alignment Tools

Flash provides you with two drawing models1. In the Merge Drawing Model, when you draw two

shapes and one overlaps the other, a change in the top object may affect the object it overlays

2. The Object Drawing Model allows you to overlap shapes which are kept separate, so the changes in one object do not affect another object

Use Flash Drawing and Alignment Tools

• When you point to a tool on the Tools panel its name appears next to the tool.

• Several of the tools have options that modify their use.

• These options are available in the Options area of the Tools panel when the tool is selected.

Use Flash Drawing and Alignment Tools

Flash Tools

•Selection•Subselection•Free Transform•Gradient Transform•3D Rotation•3D Translation•Lasso•Pen•Text•Line•Rectangle

•Oval•Primitive Rectangle and Oval•PolyStar•Pencil•Brush•Spray Brush•Deco•Bone•Bind•Paint Bucket

•Ink Bottle•Eyedropper•Eraser•Hand•Zoom•Stroke Color•Fill Color•Black and White•Swap Color•Options

Use Flash Drawing and Alignment Tools

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

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

• To access these, click and hold the option until the menu opens.

Use Flash Drawing and Alignment Tools

• You can use the Oval, Rectangle, Pencil, Brush, Line, and Pen tools to create vector objects.

• The Stage dimensions are made up of pixels (dots) matching the Stage size.

• A Stage size of 550 x 400 would be 550 pixels wide and 400 pixels high.

Use Flash Drawing and Alignment Tools

• The location of any object on the Stage is determined by its position from the upper-left corner of the Stage, which is 0,0 and the object’s registration point.

• The registration point of an object is used to align with the coordinates, and is shown as a crosshair.

Use Flash Drawing and Alignment Tools

Using rulers to position an object

Registration point

Use Flash Drawing and Alignment Tools

• The most precise way to position an object on the Stage is to use the Properties panel and enter the X and Y values for the object.

• You can also position objects on the Stage by using rulers, gridlines, guides, and align options found on the View menu.

Use Flash Drawing and Alignment Tools

Using gridlines to position an object

Use Flash Drawing and Alignment Tools

The Align panel

The Align panel has four areas:

• Align• Distribute• Match size• Space

Use Flash Drawing and Alignment Tools

• Use the Align options to align the edge or center of an object with the edge or center of the Stage.

• Use the Distribute options to position objects across or down the Stage.

Use Flash Drawing and Alignment Tools

• Use the Match size options to resize selected objects to match the height and/or width of the largest object or to match the Stage if the Align to stage option is selected.

• Use the Space options to space out objects evenly across and down the Stage.

Use Flash Drawing and Alignment Tools

• Drawn objects are made up of a stroke(s) and fill.

• Strokes can have several segments, for example, a rectangular stroke has four segments.

• You can select these segments separately or as a whole.

Use Flash Drawing and Alignment Tools

Select Objects and Apply Colors

• When you select the stroke of an object, a dotted colored line appears.

• When you select the fill of an object, a dot pattern appears.

• When you select the stroke and fill of an object, both the stroke and the fill appear dotted.

Select Objects and Apply Colors

• You can use the Selection tool to select part or all of an object, and to select multiple objects.

• To select only the fill, you can click the fill.• To select only the stroke, you can click the stroke.• To select both the fill and the stroke, you can

double-click the object or draw a marquee around it.

Select Objects and Apply Colors

• To select part of an object, you can drag a marquee that defines the area you wish to select.

• To select multiple objects or combinations of strokes and fills, you can press and hold [Shift], then click each item.

• To deselect an item(s), you can click a blank area of the Stage.

Select Objects and Apply Colors

Use the Selection tool to select the stroke of the circle

Use the Selection tool to select a segment of the stroke of the

square

Select Objects and Apply Colors

• The Lasso tool allows you to use the tool in a freehand manner to draw any shape you want.

• The Polygon Mode option allows you to draw straight lines and then connect them to form a shape.

Select Objects and Apply Colors

• The Break Apart option on the Modify menu allows you to separate the stroke and fill so that they can be selected individually.

• You can turn off either the stroke or fill when drawing an object in either mode.

Select Objects and Apply Colors

Flash allows you to change the color of the stroke and fill of an object by using the Colors area of the Tools panel.

The Colors area of the Tools Panel

Stroke Color tool

Fill Color tool

Swap colors tools swaps the stroke and fill colors

Black and White tool changes stroke to black and fill to white

Select Objects and Apply Colors

Color palette showing the hexadecimal number

Preset gradient fills

Hexadecimal number for shade of gold color The Color palette

allows you to select a color from the palette or type in a six-character code that represents the values of three colors (red, green, blue), referred to as RGB.

Select Objects and Apply Colors

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

• Gradients can be very useful for when you are creating a 3D effect, drawing attention to an object, and generally enhancing the appearance of an object.

Select Objects and Apply Colors

• You can apply a gradient fill by using the Paint Bucket tool.

• The position of the Paint Bucket tool over the object is important because it determines the direction of the gradient fill.

• You can use the Color palette to create and alter custom gradients.

Select Objects and Apply Colors

• To copy an object, select it, and then click the Copy command on the Edit menu.

• To paste the object, click the Paste command on the Edit menu.

• You can copy an object to another layer by selecting the frame on the layer prior to pasting the object.

Work with Drawn Objects

Work with Drawn Objects

• You can move an object by selecting it and dragging it to a new location.

• You can use the arrow keys to move the selection up, down, left, and right in small increments.

• You can change the X and Y coordinates in the Properties panel to position an object exactly on the Stage.

• You can use the Free Transform tool and the Transform panel to resize, rotate, skew, and reshape objects.

• You can enlarge or reduce the size of an object using the Scale option.

• You can use the Rotate and Skew options of the Free Transform tool to rotate an object and to skew it.

Work with Drawn Objects

• You can use the Distort and Envelope options to reshape an object by dragging its handles.

• The Distort option allows you to reshape an object by dragging one corner without affecting the other corners of the object.

• The Envelope option provides more than eight handles to allow more precise distortions.

Work with Drawn Objects

Work with Drawn Objects

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

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

Work with Drawn Objects

You can use the Subselection tool to reshape a segment of an object or the object itself.

Using the Selection tool to distort an object

Work with Drawn Objects

• Flash allows you a great deal of flexibility when using text. You can specify:– Typeface (font)– Size– Style (bold, italic)– Color (including gradients)

Work with Drawn Objects

• You can transform text by rotating, scaling, skewing, and flipping it.

• You can break apart a letter and reshape its segments.

• There are two different text engines for working with text:– Classic Text– Text Layout Framework

Work with Drawn Objects

• Classic Text mode is appropriate for many text applications and is easy to work with.

• Text Layout Framework mode provides advanced features and is appropriate for more text intensive applications.

Work with Drawn Objects

• You can use the Text tool to place a text block on the Stage and to enter and edit text.

• When you enter more text a text block expands and may even extend beyond the edge of the Stage.

• You can adjust the size of the text block so that it is a fixed width by dragging the handle.

Work with Drawn Objects

Work with Drawn Objects

• Once you select the Text tool, you can click the Stage where you want the text to appear.

• An insertion point indicates where the next character will appear in the text block where it is typed.

• You can resize the text block to a fixed width by dragging the circle handle.

Work with Text and Text Objects

You can use the Properties panel to change the font, size, and style of a single character or an entire block of text.

The Properties panel when a text object is selected

Click toexpand andsee availableoptions

Work with Text and Text Objects

• When working with paragraphs, Flash provides many features.– You can align paragraphs (left, right, center, justified)

within a text block– You can set margins (space between the border of a text

block and the paragraph text)– You can set indents for the first line of a paragraph– You can set line spacing (distance between paragraphs)

Work with Text and Text Objects

• A text block is an object, thus making it possible to be transformed.– You can apply filters (drop shadows)– You can transform text (reshape, rotate, skew, and so

on)• To transform individual characters, you must first

break apart the text block.

Work with Text and Text Objects

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

Reshaping a letter

Work with Text and Text Objects

• Flash uses two types of spatial organization:– The position of objects on the Stage– The stacking order of objects that overlap

• You can use layers on the Timeline as a way of organizing objects.

• You can place objects on their own layer which makes them easier to manipulate.

Work with Text and Text Objects

There are five types of layers:• Normal• Mask• Masked• Folder• Guide (Standard and Motion)

Work with Layers and Objects

The Layer Properties dialog box

• The Layer Properties dialog box allows you: – to specify the type of layer.– to name an object which provides a clue to

the objects on the layer.– to hide a layer which may reduce clutter on

the Stage and make it easier to work with selected objects from layer(s) that are not hidden.

Work with Layers and Objects

• When you lock layers, it prevents you from accidentally editing them.

• The Layer Properties dialog box also allows you to view layers as outlines, change the outline color, and change layer height.

• Outlines can be used to help you determine which objects are on a layer.

Work with Layers and Objects

Work with Layers and Objects

• To create a Guide layer, you need to insert a new layer above the layer containing the objects to be aligned.

• Then you need to select Guide as the layer type, and draw a path that will be used as a guide to align objects.

• Objects have a transformation point that is used when snapping to a guide.

Work with Layers and Objects

• Text blocks are made up of one or more characters.

• When you break apart a text block, each character becomes an object that can be edited independently of the other characters.

• You can use the Distribute to Layers command which causes each character to automatically be placed on its own layer.

Work with Layers and Objects

• As movies become larger and more complex, the number of layers increases.

• Flash allows you to organize layers by creating folders and grouping other layers in the folders.

• To place other layers in the Folder layer, you drag them from the Timeline to the Folder layer.

Work with Layers and Objects

Work with Layers and Objects