The Web Warrior Guide to Web Design Technologies

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 documents 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 gt Rulers
• use this command to toggle the rulers on and off
• View gt 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 gt Preferences gt 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 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
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 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

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

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 Size modifiers allow you to paint areas
  that are not completely enclosed these modifiers
  include
• Dont 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 strokes
  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 fills 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 text allows 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 gt 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