Adobe Flash CS4 – Illustrated
Unit B:
Creating Graphics and Text
Objectives
Understand vector and bitmap graphics
Create a new document
Set tool options and create a shape
Reshape an object
Select and modify a shape
Copy and transform an object
Use design panels
Create text
Modify text
Adobe Flash CS4 – Illustrated
Understanding Vector and
Bitmap Graphics
Bitmap images
 For static design elements or limited
animation
Vector graphics
 Often used in Flash
 Create with drawing tools on Tools panel
Adobe Flash CS4 – Illustrated
Understanding Vector and
Bitmap Graphics
Bitmap graphics
Display image as a
matrix of dots (pixels)
on a grid
Consist of a finite
number of pixels
Resolution-dependent
 Resizing affects image
quality
Vector graphics
Mathematically calculated
Composed of anchor
points and straight or
curved line segments
(collectively form a path)
Appear smooth;
appropriate for illustrations
Resolution-independent
 Offer more flexibility than
bitmap images
Adobe Flash CS4 – Illustrated
Understanding Vector and
Bitmap Graphics
Comparing vector and bitmap images
Adobe Flash CS4 – Illustrated
Understanding Vector and
Bitmap Graphics
Resolution
 Degree of clarity, detail, and sharpness
of displayed or printed image
 Expressed by number of pixels per
square inch; (the higher the better)
Flash drawing modes
 Merge Drawing mode
• Assumes that objects’ paths combine
 Object Drawing mode
• Treats object as a whole
Adobe Flash CS4 – Illustrated
Understanding Vector and
Bitmap Graphics
Comparing objects in Merge Drawing
and Object Drawing modes
Adobe Flash CS4 – Illustrated
Creating a New Document
Several methods to precisely measure
and position objects on the Stage
 Display rulers
 Create guides
 Display a grid
Adobe Flash CS4 – Illustrated
Creating a New Document
Document Properties dialog box
Adobe Flash CS4 – Illustrated
Creating a New Document
Viewing the grid turned on in a
document
Adobe Flash CS4 – Illustrated
Creating a New Document
Grid dialog box
Adobe Flash CS4 – Illustrated
Setting Tool Options and
Creating a Shape
Tools panel is separated into sections,
each containing related tools
(e.g., drawing, view, and selection)
Many tools have tool options at the
bottom of the Tools panel
Adobe Flash CS4 – Illustrated
Setting Tool Options and
Creating a Shape
Drawing and painting tools
Adobe Flash CS4 – Illustrated
Aligning Objects on the Stage
Snap Align
Snap to Grid
Snap to Guides
Snap to Objects
Snap to Pixels
Adobe Flash CS4 – Illustrated
Viewing rulers,
guides, and
alignment lines
Setting Tool Options and
Creating a Shape
Select colors for
strokes and fills
using color pop-up
window
Adobe Flash CS4 – Illustrated
Setting stroke color
by clicking a color
swatch
Setting Tool Options and
Creating a Shape
Creating a shape
Adobe Flash CS4 – Illustrated
Reshaping an Object
Selection Tool
 Manipulates shape directly by dragging
object’s border into a different contour
Zoom Tool
 Adjusts the view
Guide layer
 Contains a shape you can use to
• Trace or align objects
• Create a motion path for animated objects
Adobe Flash CS4 – Illustrated
Reshaping an Object
Modifying a shape
Adobe Flash CS4 – Illustrated
Reshaping an Object
Creating a curve
Adobe Flash CS4 – Illustrated
Selecting and Modifying a Shape
Selection tools
Adobe Flash CS4 – Illustrated
Selecting and Modifying a Shape
Selecting a fill
Adobe Flash CS4 – Illustrated
Selecting and Modifying a Shape
Selecting part of a stroke
Adobe Flash CS4 – Illustrated
Copying and Transforming
an Object
Transform an object by
 Scaling
 Rotating
 Skewing
 Distorting
Different ways to copy an object from
outside or within the program
Reconfigure objects using options for
the Free Transform Tool
Adobe Flash CS4 – Illustrated
Copying and Transforming
an Object
Options for the Free Transform Tool
Adobe Flash CS4 – Illustrated
Copying and Transforming
an Object
Copying and pasting a selection
Adobe Flash CS4 – Illustrated
Copying and Transforming
an Object
Positioning the rotate pointer
Adobe Flash CS4 – Illustrated
Copying and Transforming
an Object
Paste and drag options from Edit menu




Paste in Center
Paste in Place
Paste Special
Duplicate
Adobe Flash CS4 – Illustrated
Using Design Panels
Perform specific design functions
Click a command on Window menu to
open panels
Frequently used panels
 Dock in an existing panel group
 Create a new panel group
Adobe Flash CS4 – Illustrated
Using Design Panels
Info panel
Shows information based on where
pointer is on the Stage
Align panel
Sizes, aligns, or distributes multiple
objects to Stage or each other
Transform panel Performs functions of the Free
Transform Tool
Color panel
Contains features for adjusting
object’s stroke and fill colors
Swatches panel Contains colors from active color
palette, or set, of available colors
Adobe Flash CS4 – Illustrated
Using Design Panels
Viewing the Info and Align panels
Adobe Flash CS4 – Illustrated
Using Design Panels
Skewing an object using the
Transform panel
Adobe Flash CS4 – Illustrated
Using Design Panels
Viewing the Color panel and Swatches
panel
Adobe Flash CS4 – Illustrated
Creating Text Using the Text Tool
Text block
 Object containing text that can be moved
and modified
• Modifiable text attributes: font, size, style,
color, alignment, orientation, and spacing
Variable-width text
 Text block expands as you type
Fixed-width text
 Width is limited by size of text block
Adobe Flash CS4 – Illustrated
Creating Text
Creating a fixed-width text box
Adobe Flash CS4 – Illustrated
Creating Text
Viewing fixed-width text
Adobe Flash CS4 – Illustrated
Creating Text
Creating variable-width text
Adobe Flash CS4 – Illustrated
Modifying Text
Use features on Properties panel
 Character and Paragraphs sections
(font attributes, indent, margins, text
orientation)
 Options section (link to a Web site)
 Filters section (drop shadow, bevel,
glow)
Adobe Flash CS4 – Illustrated
Modifying Text
Editing text attributes
Adobe Flash CS4 – Illustrated
Modifying Text
Sampling a color
Adobe Flash CS4 – Illustrated
Modifying Text
Aligning text
Adobe Flash CS4 – Illustrated