The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies Chapter 7 Flash: Part I

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 Menu bar Timeline Toolbox Panels Work Area Stage Property inspector

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 Subselection tool Line tool Lasso tool Pen tool Text tool Rectangle tool Oval tool Brush tool Pencil tool Fill Transform tool Free Transform tool Paint Bucket tool Ink Bottle tool Eraser tool Eyedropper 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 Hand tool Zoom tool Stroke Color control Fill Color control No Color button Swap Color button Black and White button Tool modifiers

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 Collapse arrow Expand 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

Sample Brush Tool Modifiers Paint Normal Paint Fills Paint Behind

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 toolis 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 toolcan 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 toolis 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 handles on selected anchor point Anchor points

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 Modemodifier • 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 Sizemodifiers 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 textallows 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 Expanding text block Fixed-width 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

The Web Warrior Guide to Web Design Technologies