Download Tutorial 6

Tutorial 6
Creating Special
Effects with Graphics
and Gradients
Objectives
•
•
•
•
•
XP
Import bitmap graphics into a document
Change a bitmap graphic’s properties
Convert a bitmap graphic to a vector graphic
Create a fade effect animation using bitmaps
Learn about gradients
New Perspectives on Adobe Flash CS4
2
Objectives
•
•
•
•
•
•
•
XP
Create and save a new gradient
Use and transform a gradient
Explore the Flash publish settings
Publish a Flash movie
Create a publish profile
Export a Flash graphic
Insert a Flash movie into an existing Web page
New Perspectives on Adobe Flash CS4
3
Working with Bitmaps
XP
• Bitmaps appear more natural than vector
graphics
• A photograph is an example of a bitmap graphic
• Bitmaps are stored as a matrix of pixels
• Bitmaps must be imported into a Flash
document
• A bitmap may be converted into a vector graphic
New Perspectives on Adobe Flash CS4
4
Importing a Bitmap
XP
• On the Application bar, click File, point to Import,
and then click Import to Stage or Import to
Library
• In the Import or Import to Library dialog box,
navigate to the location of the bitmap file, and
then select the bitmap file in the file list
• Click the Open button
New Perspectives on Adobe Flash CS4
5
Bitmaps in the Library Panel
New Perspectives on Adobe Flash CS4
XP
6
Setting a Bitmap’s Properties
XP
• Bitmap Properties dialog box
• Properties: name, smoothing, compression, and quality
settings
• Compression: Lossless (PNG/GIF), Photo (JPEG)
• JPEG Quality range: 0 to 100
• Setting bitmap properties in the banner
– Apply additional compression to reduce file size
– Loss in quality is not discernible due to small bitmap
size
New Perspectives on Adobe Flash CS4
7
Bitmap Properties Dialog Box
New Perspectives on Adobe Flash CS4
XP
8
Animating Bitmaps
XP
• Instances of bitmaps can be animated
– Instance on Stage must first be converted to a
symbol
• Types of motion tweens applied to bitmaps:
– Moving, rotation, scaling, and fading
• Fade effects are created by changing alpha amount
• Alpha amounts controls image
– 0% makes the object completely transparent
– 100% makes the object completely opaque
New Perspectives on Adobe Flash CS4
9
Fade Animation
New Perspectives on Adobe Flash CS4
XP
10
Motion Tweens Complete
New Perspectives on Adobe Flash CS4
XP
11
Converting a Bitmap
to a Vector Graphic
XP
• Reasons to convert a bitmap to a vector graphic:
– Bitmap is geometric in nature
– Visual effects will be applied to the graphic
• Converting a bitmap to a vector graphic:
– Go to Modify Bitmap  Trace Bitmap
– Specify values and set options
– Caveat: some color and quality lost in conversion
New Perspectives on Adobe Flash CS4
12
Converting a Bitmap
to a Vector Graphic
New Perspectives on Adobe Flash CS4
XP
13
Bitmap Converted to a Vector
New Perspectives on Adobe Flash CS4
XP
14
Using Gradients
XP
•
•
•
•
Gradient: gradual blend or transition of colors
Gradients enhance the appearance of objects
Add gradients as fills the way solid colors are added
Linear gradient
– Blends colors from one point to another in a straight
line
• Radial gradient
– Blends colors from a point outwards in a circular
pattern
New Perspectives on Adobe Flash CS4
15
Gradient Examples
New Perspectives on Adobe Flash CS4
XP
16
Creating, Editing, and Saving a
Gradient
XP
• To create a gradient, open the Color panel, click the
Type button, and then click Linear or Radial (or click a
preset gradient in the color palette or the Swatches
panel)
• To edit a gradient, add or delete a color pointer
• To specify a color for a color pointer, select the color
pointer, and then enter the color’s RGB values,
hexadecimal value, or click the color picker in the Color
panel
• To add a color pointer, click a spot on the gradient
definition bar
New Perspectives on Adobe Flash CS4
17
Creating, Editing, and Saving a
Gradient
XP
• To remove a color pointer, drag it down, away from the
gradient definition bar
• To reposition a color pointer, drag it to the left or right
on the gradient definition bar
• To save a gradient with the current document, click the
Color panel options menu, and then click Add Swatch
New Perspectives on Adobe Flash CS4
18
Color Panel with the Custom
Gradient
New Perspectives on Adobe Flash CS4
XP
19
New Gradient in Swatches Panel
New Perspectives on Adobe Flash CS4
XP
20
Applying a Gradient Fill
XP
• Follow the same process for applying a solid fill
• Two options for applying gradient to single object:
– Select gradient fill color and draw object on Stage
– Use Paint Bucket tool for object already on the Stage
• Lock Fill modifier
– Paints one gradient across several objects on the
Stage
New Perspectives on Adobe Flash CS4
21
Effect of Lock Fill Modifier on
Gradients
New Perspectives on Adobe Flash CS4
XP
22
Gradient Background Added to the
Banner
New Perspectives on Adobe Flash CS4
XP
23
Filling Text with a Gradient
XP
• You can apply a gradient fill to text
• Convert the text to a fill with the Break Apart command
– Use command one time for text blocks consisting of
one letter
– Use command two times for text blocks consisting of
multiple letters
New Perspectives on Adobe Flash CS4
24
Filling Text with a Gradient
New Perspectives on Adobe Flash CS4
XP
25
Transforming Gradient Fills
XP
• Gradient Transform tool: modifies a gradient fill
– Selected object with linear gradient has a bounding
box
– Selected object with radial gradient has a bounding
circle
• Modifiable gradient properties: center, size, direction
• How to transform a gradient:
– Drag the handles in the bounding box or circle
surrounding the center point
New Perspectives on Adobe Flash CS4
26
Gradient’s Radius Increased
New Perspectives on Adobe Flash CS4
XP
27
Comparing Publishing Options
XP
•
•
•
•
•
FLA format: native file format for Flash documents
SWF file: plays in Flash Player window or browser
Default – (HTML): creates an SWF and HTML file
Static publishing formats: JPEG, GIF, and PNG
Projector file: stand-alone file with .exe extension
– Has the Flash Player incorporated into it
– Plays the movie in its own window
• Publish Settings dialog box
– Used to specify how FLA documents are published
New Perspectives on Adobe Flash CS4
28
Publish Settings
XP
• Default options: Flash (.swf) and HTML (.html)
– Each file type has an options tab
• Select check box for different formats
– New options tab appears for each new type selected
– Example: JPEG tab appears if JPEG Image (.jpg)
chosen
• New publishing profiles may be saved for later use
• New banner will be published as an SWF file
– Rationale: banner will be added to an existing Web
page
New Perspectives on Adobe Flash CS4
29
Publish Settings
New Perspectives on Adobe Flash CS4
XP
30
Flash Publish Settings
New Perspectives on Adobe Flash CS4
XP
31
Exporting a Flash Document
as an Image
XP
• Two common image file formats used in Web pages:
– JPEG format: best for images that include many
colors
– GIF format: best for images with fewer colors
• Some export formats in Flash: JPEG, GIF, PNG
• Two ways to export images in Flash:
– Select options in Publish Settings dialog box
– Use the Export Image command
• Logo will be exported as a GIF image
New Perspectives on Adobe Flash CS4
32
Export GIF Dialog Box
New Perspectives on Adobe Flash CS4
XP
33
Adding Flash Graphics to a Web
Page
XP
• Requirement for using Flash graphics in a Web page:
– Graphic file must be incorporated into the page’s
HTML
• One simple way to incorporate graphics in HTML:
– Publish a movie with the HTML format option
selected
• Adding the SWF file to an existing Web page:
– Actual Web page must edited
– Some editing tools: Adobe Dreamweaver, Notepad
• Use Notepad to edit page displaying banner and logo
New Perspectives on Adobe Flash CS4
34
Sample Web Page HTML
New Perspectives on Adobe Flash CS4
XP
35
Sample Web Page With Flash
Graphics
New Perspectives on Adobe Flash CS4
XP
36