Transcript Tutorial 06
XP Tutorial 6 Using Bitmaps, and Gradients, and Publishing Flash Files XP Objectives • • • • • 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 Create a new gradient New Perspectives on Macromedia Flash 8 2 XP 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 New Perspectives on Macromedia Flash 8 3 XP 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 New Perspectives on Macromedia Flash 8 4 XP 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 New Perspectives on Macromedia Flash 8 5 XP Bitmaps in the Library Panel New Perspectives on Macromedia Flash 8 6 XP Setting a Bitmap’s 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 New Perspectives on Macromedia Flash 8 7 XP Bitmap Properties Dialog Box New Perspectives on Macromedia Flash 8 8 XP 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 New Perspectives on Macromedia Flash 8 9 XP 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 New Perspectives on Macromedia Flash 8 10 XP Fade Animation New Perspectives on Macromedia Flash 8 11 XP Motion Tween for the Parrot New Perspectives on Macromedia Flash 8 12 XP 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 New Perspectives on Macromedia Flash 8 13 Converting a Bitmap to a Vector Graphic New Perspectives on Macromedia Flash 8 XP 14 XP Puppy Bitmap Converted to a Vector New Perspectives on Macromedia Flash 8 15 XP 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 New Perspectives on Macromedia Flash 8 16 XP Gradient Examples New Perspectives on Macromedia Flash 8 17 XP 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 New Perspectives on Macromedia Flash 8 18 XP Gradient Pointers in Color Mixer New Perspectives on Macromedia Flash 8 19 New Gradient in Color SwatchesXP Panel New Perspectives on Macromedia Flash 8 20 XP 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 New Perspectives on Macromedia Flash 8 21 Effect of Lock Fill Modifier on Gradients New Perspectives on Macromedia Flash 8 XP 22 XP Gradient as Background New Perspectives on Macromedia Flash 8 23 XP 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 New Perspectives on Macromedia Flash 8 24 XP Editing Handles New Perspectives on Macromedia Flash 8 25 XP Increasing the Gradient’s Radius New Perspectives on Macromedia Flash 8 26 XP 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 New Perspectives on Macromedia Flash 8 27 XP 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 New Perspectives on Macromedia Flash 8 28 XP Entering a New Name for the SWF File New Perspectives on Macromedia Flash 8 29 XP Flash Publish Settings New Perspectives on Macromedia Flash 8 30 XP 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 New Perspectives on Macromedia Flash 8 31 XP Export Formats New Perspectives on Macromedia Flash 8 32 XP Export Settings New Perspectives on Macromedia Flash 8 33 XP Adding 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: Macromedia Dreamweaver, Notepad • Use Notepad to edit page displaying banner and logo New Perspectives on Macromedia Flash 8 34 XP Sample Web Page HTML New Perspectives on Macromedia Flash 8 35 Sample Web Page With Flash Graphics New Perspectives on Macromedia Flash 8 XP 36