Tutorial 6 Working with 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 Learn about gradients New Perspectives on Adobe Flash CS32

XP Objectives 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 CS33

XP Working 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 CS34

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 Jenny’s Oyster Hut banner needs two photos of seafood New Perspectives on Adobe Flash CS35

XP Bitmaps in the Library Panel New Perspectives on Adobe Flash CS36

XP Setting 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 CS37

XP Bitmap Properties Dialog Box New Perspectives on Adobe Flash CS38

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 Adobe Flash CS39

XP Fade Animation New Perspectives on Adobe Flash CS310

XP Motion Tweens Complete New Perspectives on Adobe Flash CS311

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 New Perspectives on Adobe Flash CS312

XP Converting a Bitmap to a Vector Graphic New Perspectives on Adobe Flash CS313

XP Puppy Bitmap Converted to a Vector New Perspectives on Adobe Flash CS314

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 Adobe Flash CS315

XP Gradient Examples New Perspectives on Adobe Flash CS316

XP Creating 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 CS317

XP Color Space with New Gradient New Perspectives on Adobe Flash CS318

XP New Gradient in Swatches Panel New Perspectives on Adobe Flash CS319

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 Adobe Flash CS320

XP Effect of Lock Fill Modifier on Gradients New Perspectives on Adobe Flash CS321

XP Gradient as Background New Perspectives on Adobe Flash CS322

XP Transforming 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 CS323

XP Editing Handles New Perspectives on Adobe Flash CS324

XP Increasing the Gradient’s Radius New Perspectives on Adobe Flash CS325

XP Comparing 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 CS326

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 Adobe Flash CS327

XP Publish Settings New Perspectives on Adobe Flash CS328

XP Flash Publish Settings New Perspectives on Adobe Flash CS329

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 Adobe Flash CS330

XP Export Settings New Perspectives on Adobe Flash CS331

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: Adobe Dreamweaver, Notepad Use Notepad to edit page displaying banner and logo New Perspectives on Adobe Flash CS332

XP Sample Web Page HTML New Perspectives on Adobe Flash CS333

XP Sample Web Page With Flash Graphics New Perspectives on Adobe Flash CS334