1. Tutorial 6 Creating Special Effects with Graphics and Gradients

2. 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 CS42

3. XP Objectives 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 CS43

4. 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 CS44

5. XP Importing a Bitmap 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 CS45

6. XP Bitmaps in the Library Panel New Perspectives on Adobe Flash CS46

7. XP Setting a Bitmap’s Properties 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 CS47

8. XP Bitmap Properties Dialog Box New Perspectives on Adobe Flash CS48

9. 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: – 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 CS49

10. XP Fade Animation New Perspectives on Adobe Flash CS410

11. XP Motion Tweens Complete New Perspectives on Adobe Flash CS411

12. XP Converting a Bitmap to a Vector Graphic 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 CS412

13. XP Converting a Bitmap to a Vector Graphic New Perspectives on Adobe Flash CS413

14. XP Bitmap Converted to a Vector New Perspectives on Adobe Flash CS414

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

16. XP Gradient Examples New Perspectives on Adobe Flash CS416

17. XP Creating, Editing, and Saving a Gradient 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 CS417

18. XP Creating, Editing, and Saving a Gradient 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 CS418

19. XP Color Panel with the Custom Gradient New Perspectives on Adobe Flash CS419

20. XP New Gradient in Swatches Panel New Perspectives on Adobe Flash CS420

21. 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 CS421

22. XP Effect of Lock Fill Modifier on Gradients New Perspectives on Adobe Flash CS422

23. XP Gradient Background Added to the Banner New Perspectives on Adobe Flash CS423

24. XP Filling Text with a Gradient 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 CS424

25. XP Filling Text with a Gradient New Perspectives on Adobe Flash CS425

26. 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 New Perspectives on Adobe Flash CS426

27. XP Gradient’s Radius Increased New Perspectives on Adobe Flash CS427

28. 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 CS428

29. 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 CS429

30. XP Publish Settings New Perspectives on Adobe Flash CS430

31. XP Flash Publish Settings New Perspectives on Adobe Flash CS431

32. XP Exporting a Flash Document as 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 CS432

33. XP Export GIF Dialog Box New Perspectives on Adobe Flash CS433

34. 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 CS434

35. XP Sample Web Page HTML New Perspectives on Adobe Flash CS435

36. XP Sample Web Page With Flash Graphics New Perspectives on Adobe Flash CS436