Using Bitmaps, and Gradients, and Publishing Flash Files

1
Tutorial 6

• Using Bitmaps, and Gradients,and Publishing
  Flash Files

2
Objectives

• Import bitmap graphics into a document
• Change a bitmap graphics properties
• Convert a bitmap graphic to a vector graphic
• Create a fade effect animation using bitmaps
• Create a new gradient

3
Objectives (continued)

• Use and transform a gradient
• Convert text to fills
• Apply a gradient fill to text
• Explore and use the Flash Publish settings
• Insert a Flash movie into an existing Web page

4
Using Bitmaps

• 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

5
Importing Bitmaps

• Commands Import to Stage and Import to Library
• Imported bitmaps are placed in the document
  library
• Instances of bitmaps can be converted into
  symbols
• Flounders Pet Shop banner needs two photos
• Parrot and puppy photos will be imported as
  bitmaps
• To reduce file size, JPEG quality will be reduced

6
Bitmaps in the Library Panel
7
Setting a Bitmaps Properties

• Chief tool Bitmap Properties dialog box
• Properties name, update, compression 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

8
Bitmap Properties Dialog Box
9
Animating Bitmaps

• Instances of bitmaps can be animated
• Instance on Stage must first be converted to a
  symbol
• Types of motion tweens applied to bitmaps
• Translation, 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

10
Animating Bitmaps (continued)

• Puppy and parrot bitmaps will be in fade
  animations
• First step convert instances to movie clip
  symbols
• Sequence of fades in the animation
• Puppy displays for two seconds, moves to right,
  fades out
• While puppy fades out, parrot moves to center and
  fades in
• Parrot is displayed for two seconds and then
  fades out
• Puppy moves back to center and fades back in
• Last step create mask layers to serve as oval
  frames

11
Fade Animation
12
Motion Tween for the Parrot
13
Converting a Bitmap to a Vector Graphic

• Reasons to convert a bitmap to a vector graphic
• Bitmap is geometric in nature
• Special 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
• Parrot photo will serve as background for the
  logo
• Parrot bitmap will be converted to a vector
  graphic

14
Converting a Bitmap to a Vector Graphic
15
Puppy Bitmap Converted to a Vector
16
Using Gradients

• 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

17
Gradient Examples
18
Creating and Editing Gradients

• Creating new gradients in the Color Mixer panel
• Specify linear or radial fill style in Type list
• Add or remove gradient pointers based on colors
  used
• Select gradient pointer for the color you want to
  change
• Use a method to specify color e.g., change RGB
  values
• Fall off point point where gradient color shifts
  
• Use Add Swatch command to save your gradient
• Radial gradient for banner light blue to dark
  gray

19
Gradient Pointers in Color Mixer
20
New Gradient in Color Swatches Panel
21
Applying a Gradient Fill

• 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

22
Effect of Lock Fill Modifier on Gradients
23
Gradient as Background
24
Transforming Gradient Fills

• Fill 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
• Modifying linear gradient for the banner
• Lighter color of gradient should be moved behind
  puppy

25
Editing Handles
26
Increasing the Gradients Radius
27
Publishing Options

• FLA format native file format for Flash
  documents
• SWF file plays in Flash Player window or browser
  
• 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

28
Publish Settings

• 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

29
Entering a New Name for the SWF File
30
Flash Publish Settings
31
Exporting an Image

• 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

32
Export Formats
33
Export Settings
34
Adding Flash Graphics to a Web Page

• Requirement for using Flash graphics in a Web
  page
• Graphic file must be incorporated into the pages
  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 Macromedia Dreamweaver,
  Notepad
• Use Notepad to edit page displaying banner and
  logo

35
Sample Web Page HTML
36
Sample Web Page With Flash Graphics