1 / 41

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

alden-wynn
Download Presentation

The Web Warrior Guide to Web Design Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

  3. The Flash Environment Menu bar Timeline Toolbox Panels Work Area Stage Property inspector

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. Sample Panels Options menu control Collapse arrow Expand arrow

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. Sample Brush Tool Modifiers Paint Normal Paint Fills Paint Behind

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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

  36. Working with Text • Set the text properties in the Property inspector Font Font size Text color

  37. 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

  38. 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

  39. 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

  40. 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

  41. 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

More Related