Chapter 7

Flash: Part I

The Web Warrior Guide to Web Design Technologies

Objectives

• Work with the Flash environment including the Stage, menu bar, Toolbox, panels, and Property inspector

• Draw strokes and paint fills using the Flash tools

• Select and modify objects

• Create and manipulate text

The Flash Environment

Toolbox

Timeline

Panels

Stage

WorkArea

Propertyinspector

Menu bar

Elements of the Flash Environment

• Stage– area where images are created and edited

• Menu Bar– contains commands for many of the Flash features

• Toolbox– contains the tools used most frequently while working

in Flash, such as tools used for selecting, drawing, and painting

– divided into 4 areas: Tools, View, Colors, Options

Tools area

Arrow tool

Line tool

Pen tool

Pencil tool

Oval tool

Subselection tool

Lasso tool

Text tool

Rectangle tool

Free Transform tool

Ink Bottle tool

Eyedropper tool

Brush tool

Fill Transform tool

Paint Bucket tool

Eraser tool

Tools

• Tools used for selecting objects– Arrow– Subselection– Lasso

• Tools used to draw– Line, Pen, Pencil, Brush– Oval, Rectangle

• Tools used to modify objects– Free Transform, Fill Transform– Ink Bottle, Paint Bucket, Eyedropper– Eraser

• Tool used to create text– Text

View, Colors, and Options Areas

Stroke Color control

Fill Color control No Color buttonSwap Color buttonBlack and White button

Tool modifiers

Hand tool Zoom tool

View, Colors, and Options Areas Tools

• Tools used to change the view of the Stage – Hand– Zoom

• Tools used to select colors– Stroke Color control

• strokes – lines that you draw or add to an image– Fill Color control

• fills – areas you paint with color; often enclosed by strokes

• Buttons used to change the stroke and fill colors– Black and White button– Swap Color button– No Color button

• Options– modifiers are displayed based on selected tool

Other Elements of the Flash Environment

• Panels – small windows containing options that give you more

control over the various tools– examples

• Color Mixer, Color Swatches, Components, Answer, and Actions panels

– access panels using the Window command on the menu bar

• Property inspector– special panel that provides easy access to the most

common attributes of the currently selected tool or object

Sample Panels

Options menu control

Expand arrow

Collapse arrow

Starting a New Document• Flash Document

– can consist of text, images, animations, sounds, and video

– default dimensions• width – 550 pixels • height – 400 pixels

• Document Properties dialog box– used to change a

document’s properties– properties include the

width, height, background color, frame rate, and ruler units

Document Options

• Other options used when working with a Flash document include the Rulers and the Grid

• To display the Rulers or the Grid, use the View command on the menu bar– View > Rulers

• use this command to toggle the rulers on and off

– View > Show Grid• use this command to toggle the grid on and off

Changing the View of the Stage

• Zoom tool– used to enlarge or reduce the view of the

Stage – select the Enlarge or Reduce modifiers in

the Options area of the Toolbox and then click an area of the Stage

• Hand tool– used to move the view of the Stage– drag the Hand tool pointer over the Stage

Drawing and Painting Tools

• Using the Oval and Rectangle Tools – use the Oval tool to create oval shapes– use the Rectangle tool to create rectangular

shapes– select the stroke and fill colors to use with

the ovals and rectangles you draw– to create perfect circles or squares, make

sure the Snap to Objects option is on

Selecting Colors

• Use the color palette pop-up window to select colors for the strokes and fills– click the color box in a

color control in the Toolbox and then click a color using the eyedropper pointer

Rounded Rectangle

• When the Rectangle tool is selected, use the Round Rectangle Radius modifier to draw rectangles with rounded corners– Enter a point value for the Corner Radius to

specify how rounded the corners should be

Using the Line Tool• The Line tool creates straight lines of different

lengths and angles• Use the Property inspector to select the stroke

color, style, and height

Stroke color Stroke height Stroke styles

Using the Pencil Tool

• The Pencil tool allows you to draw lines and shapes in a freeform manner

• Use the Property inspector to select the stroke color, style, and height

• The Pencil Mode modifiers include:– Straighten: Flash helps straighten out the lines you

draw; converts rough drawings of shapes into ovals or rectangles

– Smooth: Flash smoothes out the lines you draw – Ink: Flash does not help you with the lines you draw

Using the Pen Tool

• The Pen tool is used to draw line and curve segments – clicking on the Stage creates points that are

connected with straight lines– clicking and dragging creates curved lines with

tangent handles which determine the shape of the curved line

– to preview the lines as you draw them with the Pen tool, turn on the Show Pen Preview option

• Edit > Preferences > Editing tab

Using the Brush Tool

• The Brush tool is used to paint fills using one of the available Brush sizes and Brush shapes

• Use one of the following Brush mode modifiers– Paint Normal: paint over the strokes and fills– Paint Fills: paint over the fills only– Paint Behind: paint “behind” an object– Paint Selection: paint the selected object only– Paint Inside: paint inside the area where the brush

stroke is first applied

Paint Normal

Paint Fills

Paint Behind

Sample Brush Tool Modifiers

Selecting and Modifying Objects

• Once you draw lines, curves, and shapes you can modify their characteristics, but to do this you first need to select them

• Use the following tools to select objects– Arrow, Subselection, and Lasso tools

• Use the following tools to modify selected objects – Free Transform, Fill Transform, Eraser, Ink

Bottle, Paint Bucket, and Eyedropper tools

Using the Arrow Tool• The Arrow tool is used to select lines, curves, and fills or

to select a group of objects– select objects by clicking them or by drawing a marquee around

them– to select more than one object at a time draw a marquee around

the objects

Marquee

Using the Arrow Tool

• Selected objects are covered with a pattern of tiny dots

• Arrow Tool Modifiers– Snap to Objects

• attaches selected objects to other objects when they are moved close together

– Smooth • smoothes the selected line or shape outline

– Straighten • straightens the selected line or shape outline

Using the Arrow Tool

• The Arrow tool can also be used to modify an object– select and then drag a line to move it– drag a line to change its shape

Using the Subselection Tool• The Subselection tool is used to adjust the anchor

points in lines or curves– you can change the angle and length of straight lines– you can change the slope and direction of curves

Tangent handleson selected anchor point

Anchorpoints

Using the Lasso Tool

• The Lasso tool is to select irregularly shaped areas by drawing a freeform marquee around them

• You can also use the Lasso tool to select a group of objects at one time

• Polygon Mode modifier– select this modifier to create a marquee by

clicking points around objects to select them

Using the Transform Tools

• The transform tools allow you to modify objects such as lines, curves, shapes, and fills

• The Free Transform tool can be used to move, rotate, scale, skew, or distort objects– a bounding box with selection handles surrounds an

object when it is selected– drag these handles to transform the object – the pointer changes as you point at or around

different corner or edge handles to indicate how the object will be changed

Free Transform Tool

• The Free Transform tool modifiers – Rotate and Skew: you can freely rotate an object by

dragging a corner handle or you can skew it at a different angle by dragging an edge handle

– Scale: allows you to change the size of the object – Distort: lets you move the corner or edges of an

object to change the object’s shape– Envelope: displays points and tangent handles that

can be adjusted to warp or distort the object

Fill Transform Tool

• The Fill Transform tool is used to modify bitmap and gradient fills– you can modify fills that consist of bitmaps or

gradients by adjusting their size, direction, or center points

Using the Eraser Tool

• The Eraser tool deletes strokes and fills according to the Eraser Mode modifier – Erase Normal: erases both fills and strokes – Erase Fills: erases only the fills and not the strokes– Erase Lines: erases only the strokes and not the fills– Erase Selected Fills: erases only fills that have been

selected – Erase Inside: erases fills as determined by the point

where you start to erase; does not affect strokes

Using the Ink Bottle Tool

• The Ink Bottle tool is used to change the color, size, or style of an existing stroke– set the stroke color, size, and style settings

in the Property inspector – then click an object to apply the new stroke

settings

Using the Paint Bucket Tool

• The Paint Bucket tool is used to fill enclosed areas with color or to change the color of an existing fill

• The Gap Size modifiers allow you to paint areas that are not completely enclosed; these modifiers include: – Don’t Close Gaps– Close Small Gaps– Close Medium Gaps– Close Large Gaps

Using the Eyedropper Tool

• The Eyedropper tool is used to copy the fill or stroke attributes of one object and then apply them to another object – move the pointer over a stroke to display a small

pencil icon next to it, indicating the stroke’s attributes will be copied

– move the pointer over a fill to display a small paintbrush icon next to it, indicating that you are about to copy the fill’s attributes

• Click on another object to apply the copied stroke or fill attributes to it

Working with Text

• The Text tool is used to create text blocks

• Three types of text blocks– Static text does not change when the movie

is displayed; this is the default type – Dynamic text is an advanced feature in

which text is updated automatically when the movie is displayed

– Input text allows the user to enter text in forms or surveys

Working with Text

• Set the text properties in the Property inspector

Font Font size Text color

Working with Text

• An expanding text block is denoted by a round handle on the top right corner when selected

• A fixed-width text block is denoted by a square handle when selected

Fixed-width text block

Expanding text block

Printing and Exporting a Document

• A Flash document can be printed to obtain a hard copy

• A Flash document can also be exported as a GIF, JPEG, or other image format– File > Export Image – use the Save as Type list arrow to select an

image format– an exported file is separate from the Flash

document .FLA file

Summary

• Flash is a software application with tools for creating interactive, animated, multimedia-rich movies for the Web

• Flash works with vector graphics which consist of lines and curves and are stored as mathematical equations

• Bitmap graphics, which consist of pixels, can also be used in a Flash document

• Key elements of the Flash environment include the Stage, menu bar, Toolbox, panels, and the Timeline

• The Stage is where images are created and modified • The Toolbox contains four areas: the Tools, View,

Colors, and Options areas

Summary

• Panels are small windows that contain options for the various tools; they may be opened, closed, collapsed, expanded, repositioned, and grouped into windows

• The Property inspector is a special panel whose options change depending on which tool or object is selected

• The drawing and painting tools include the Line, Pen, Oval, Rectangle, Pencil, and Brush

• The selection tools include the Arrow, Subselection, and Lasso

Summary

• The transform tools include the Free Transform, Fill Transform, Eraser, Ink Bottle, Paint Bucket, and Eyedropper

• The Text tool is used to create text blocks which may expand automatically or may be of fixed width; text attributes are set in the Property inspector

• Flash documents can be printed and can also be exported in several image formats such as GIF or JPEG