Tutorial 6 Working with Bitmaps and Gradients, and Publishing Flash Files.
-
Upload
randell-logan -
Category
Documents
-
view
231 -
download
1
Transcript of Tutorial 6 Working with Bitmaps and Gradients, and Publishing Flash Files.
Tutorial 6
Working with Bitmaps and
Gradients, and Publishing Flash Files
XPXPObjectives• 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 CS3 2
XPXPObjectives• Create and save a new gradient• Use and transform a gradient• Explore and use 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 CS3 3
XPXPWorking with 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
New Perspectives on Adobe Flash CS3 4
XPXPImporting 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• Jenny’s Oyster Hut banner needs two photos of
seafood
New Perspectives on Adobe Flash CS3 5
XPXPBitmaps in the Library Panel
New Perspectives on Adobe Flash CS3 6
XPXPSetting a Bitmap’s Properties• 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
New Perspectives on Adobe Flash CS3 7
XPXPBitmap Properties Dialog Box
New Perspectives on Adobe Flash CS3 8
XPXPAnimating 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
New Perspectives on Adobe Flash CS3 9
XPXPFade Animation
New Perspectives on Adobe Flash CS3 10
XPXPMotion Tweens Complete
New Perspectives on Adobe Flash CS3 11
XPXPConverting 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
New Perspectives on Adobe Flash CS3 12
XPXPConverting a Bitmap to a Vector Graphic
New Perspectives on Adobe Flash CS3 13
XPXPPuppy Bitmap Converted to a Vector
New Perspectives on Adobe Flash CS3 14
XPXPUsing 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
patternNew Perspectives on Adobe Flash CS3 15
XPXPGradient Examples
New Perspectives on Adobe Flash CS3 16
XPXPCreating and Editing Gradients• Creating new gradients in the Color 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
New Perspectives on Adobe Flash CS3 17
XPXPColor Space with New Gradient
New Perspectives on Adobe Flash CS3 18
XPXPNew Gradient in Swatches Panel
New Perspectives on Adobe Flash CS3 19
XPXPApplying 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
New Perspectives on Adobe Flash CS3 20
XPXPEffect of Lock Fill Modifier on Gradients
New Perspectives on Adobe Flash CS3 21
XPXPGradient as Background
New Perspectives on Adobe Flash CS3 22
XPXPTransforming Gradient Fills• 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
• Modifying linear gradient for the banner
New Perspectives on Adobe Flash CS3 23
XPXPEditing Handles
New Perspectives on Adobe Flash CS3 24
XPXPIncreasing the Gradient’s Radius
New Perspectives on Adobe Flash CS3 25
XPXPComparing Publishing Options• 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 CS3 26
XPXPPublish 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
New Perspectives on Adobe Flash CS3 27
XPXPPublish Settings
New Perspectives on Adobe Flash CS3 28
XPXPFlash Publish Settings
New Perspectives on Adobe Flash CS3 29
XPXPExporting 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
New Perspectives on Adobe Flash CS3 30
XPXPExport Settings
New Perspectives on Adobe Flash CS3 31
XPXPAdding Flash Graphics to a Web Page• 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 CS3 32
XPXPSample Web Page HTML
New Perspectives on Adobe Flash CS3 33
XPXPSample Web Page With Flash Graphics
New Perspectives on Adobe Flash CS3 34