the web warrior guide to web design technologies
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/1.jpg)
Chapter 7
Flash: Part I
The Web Warrior Guide to Web Design Technologies
![Page 2: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/2.jpg)
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
![Page 3: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/3.jpg)
The Flash Environment
Toolbox
Timeline
Panels
Stage
WorkArea
Propertyinspector
Menu bar
![Page 4: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/4.jpg)
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
![Page 5: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/5.jpg)
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
![Page 6: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/6.jpg)
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
![Page 7: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/7.jpg)
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
![Page 8: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/8.jpg)
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
![Page 9: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/9.jpg)
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
![Page 10: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/10.jpg)
Sample Panels
Options menu control
Expand arrow
Collapse arrow
![Page 11: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/11.jpg)
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
![Page 12: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/12.jpg)
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
![Page 13: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/13.jpg)
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
![Page 14: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/14.jpg)
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
![Page 15: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/15.jpg)
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
![Page 16: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/16.jpg)
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
![Page 17: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/17.jpg)
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
![Page 18: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/18.jpg)
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
![Page 19: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/19.jpg)
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
![Page 20: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/20.jpg)
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
![Page 21: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/21.jpg)
Paint Normal
Paint Fills
Paint Behind
Sample Brush Tool Modifiers
![Page 22: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/22.jpg)
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
![Page 23: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/23.jpg)
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
![Page 24: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/24.jpg)
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
![Page 25: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/25.jpg)
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
![Page 26: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/26.jpg)
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
![Page 27: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/27.jpg)
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
![Page 28: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/28.jpg)
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
![Page 29: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/29.jpg)
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
![Page 30: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/30.jpg)
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
![Page 31: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/31.jpg)
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
![Page 32: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/32.jpg)
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
![Page 33: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/33.jpg)
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
![Page 34: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/34.jpg)
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
![Page 35: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/35.jpg)
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
![Page 36: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/36.jpg)
Working with Text
• Set the text properties in the Property inspector
Font Font size Text color
![Page 37: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/37.jpg)
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
![Page 38: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/38.jpg)
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
![Page 39: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/39.jpg)
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
![Page 40: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/40.jpg)
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
![Page 41: The Web Warrior Guide to Web Design Technologies](https://reader035.vdocuments.site/reader035/viewer/2022070400/5681354a550346895d9ca80e/html5/thumbnails/41.jpg)
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