1. © 2010 Delmar, Cengage Learning Chapter 7: Importing and Modifying Graphics

2. © 2010 Delmar Cengage Learning Chapter 7 Lessons 1.Understand and import graphics 2.Break apart bitmaps and use bitmap fills 3.Trace bitmap graphics 4.Use the Deco tool with imported graphics

3. © 2010 Delmar Cengage Learning Understanding the Formats Bitmap and vector images –Can be imported and animated, even if created in other application Bitmaps –Can increase file size of movie –Slows movie download time Vector images –Importing from Fireworks or Illustrator is easy –More efficient than bitmaps

4. © 2010 Delmar Cengage Learning Understand and Import Graphics Vector-based application –Images and motion calculated according to mathematical formulas –Results in smaller file size –Results in robust ability to resize movies without notable loss in quality

5. © 2010 Delmar Cengage Learning Understand and Import Graphics Bitmap or raster image –Based on pixels, not mathematical formula Importing multiple bitmaps –Will increase file size of movie –In terms of movie resizing, will decrease flexibility

6. © 2010 Delmar Cengage Learning Importing Different Graphic Formats Best way to use a graphic –Import it by selecting the Import option on the File menu –Then choose Import to Stage command –Next, navigate to graphic of your choice

7. © 2010 Delmar Cengage Learning Fig. 1: Import to Library Dialog Box If you have many different file types, you can display only files of one file type, such as PNG files, by selecting that file type in the file types list List arrow for file types, name on button changes to reflect last file type selected

8. © 2010 Delmar Cengage Learning Importing Different Graphic Formats Import –Import option on the File menu –You can choose the Import to Stage command or Import to Library –Import a group of graphics Copy and Paste –Graphic becomes a flattened bitmap

9. © 2010 Delmar Cengage Learning Using Fireworks PNG Files Fireworks PNG files –Can be imported as flattened images or as editable objects If you import a flattened image Flash will automatically bitmap the image

10. © 2010 Delmar Cengage Learning Using Fireworks PNG Files When you insert a PNG file as an editable object, it retains: –Its vector format –Its layers and transparency features If you click the Keep all paths editable option: –all the features of the PNG file will be intact inside a movie clip symbol that is stored in the Library

11. © 2010 Delmar Cengage Learning Fig. 2: Import Fireworks Document Dialog Box Maintains drawn shapes and editable paths Features for the file are stored as pages All features maintained in Page 1 are imported as a movie clip so they can be edited in Flash

12. © 2010 Delmar Cengage Learning Importing Adobe Illustrator Files Illustrator files are vector-based –When imported as a movie clip, they preserve most of their attributes including filters (such as drop shadows) and blends (such as transparency settings) –Flash allows you to convert Illustrator graphic layers to Flash layers

13. © 2010 Delmar Cengage Learning Importing Adobe Photoshop Files A key feature of importing PSD files is that you can choose to have the Photoshop layers imported as Flash layers. This allows you to edit individual parts of an image once the graphic is in your Flash document. –animating text –using the entire graphic –creating a button using a photograph

14. © 2010 Delmar Cengage Learning Importing Adobe Photoshop Files Select the Import option from the File menu Choose to import to the stage or to the Library Navigate to and select the PSD file you want to import

15. © 2010 Delmar Cengage Learning Importing Adobe Photoshop Files If you choose not to make a layer editable, the contents are flattened as a bitmap image If you choose to make a layer editable, a movie clip symbol, with the graphic information, is created using the layer contents

16. © 2010 Delmar Cengage Learning Fig. 3: Photoshop Import to Stage Dialog Box Sun layer is selected; it is converted to a movie clip so its features will be editable Once imported, each layer in background.psd will exist on its own layer in Flash background.psd consists of two layers: Sun and Background

17. © 2010 Delmar Cengage Learning Importing Bitmaps You can –Control size, compression, and anti- aliasing of imported bitmap –Use a bitmap as a fill –Convert a bitmap to a vector Once you import a bitmap –It becomes an element in the Library

18. © 2010 Delmar Cengage Learning Fig. 4: Imported Fireworks PNG Graphic File Importing the PNG file to the Stage automatically generated the dragonfly.png folder in the Library panel The Page folder containing the features (size, color, etc.) of the graphic The movie clip containing any editable paths

19. © 2010 Delmar Cengage Learning Fig. 5: Tree on the Stage after Importing X and Y coordinates for tree

20. © 2010 Delmar Cengage Learning Fig.8: Bitmap Properties Dialog Box Item preview window Compressed size of the graphic

21. © 2010 Delmar Cengage Learning Break Apart Bitmaps and Use Bitmap Fills Breaking apart a bitmap image –Increases flexibility within a movie Once you break the image, you can: –Click different areas to manipulate them separately –Sample the image with Eyedropper tool

22. © 2010 Delmar Cengage Learning The Lasso and Magic Wand Tool The Lasso tool lets you select an irregularly shaped part of a graphic –move –scale –rotate –reshape The Magic Wand tool extends the Lasso tool so you can select areas of similar color in a bitmap you have broken apart

23. © 2010 Delmar Cengage Learning Using Bitmap Fills Bitmap fill –Created by taking one image and using it to fill another –Can be applied to any drawn shape or text that has been broken apart

24. © 2010 Delmar Cengage Learning Fig. 9: Different Bitmap Fill Effects Bitmap fill in a circle applied with the Paint Bucket tool Bitmap fill applied with the Brush tool Bitmap fill in text applied with the Paint Bucket tool

25. © 2010 Delmar Cengage Learning Fig.10: Bitmap Fill Selected in Color Panel Bitmap selected Bitmap selected as the Type Available bitmaps from library

26. © 2010 Delmar Cengage Learning Trace Bitmap Graphics Tracing is an outstanding feature for: –Challenges with illustration –Converting a bitmap image into a vector image for animation purposes When you apply trace functions, you turn a pure bitmap into vector paths and fills

27. © 2010 Delmar Cengage Learning Trace Bitmap Graphics Creates paths and shapes, but every piece of original image remains on one layer To animate or tween between pieces of the shape, isolate parts of the object onto their own layers

28. © 2010 Delmar Cengage Learning Fig. 16: Before and After Tracing a Bitmap

29. © 2010 Delmar Cengage Learning Fig. 17: Dividing a Traced Graphic by Color Sections of the moon selected by color and moved

30. © 2010 Delmar Cengage Learning Using Trace Settings Your traced graphic will look more like the original graphic if you retain more detail. If you want the traced graphic to look more abstract, use less detail. However, the greater the detail, the greater the file size.

31. © 2010 Delmar Cengage Learning Fig. 18: Different Effects with Trace Settings

32. © 2010 Delmar Cengage Learning Four Options for Detailed Trace Color Threshold –Compares two side by side pixels Minimum Area –Sets the number of surrounding pixels to consider, with options between 1 and 1000 Curve Fit –Determines how smoothly outlines are drawn Corner Threshold –Works with sharp edges to retain them or smooth them out

33. © 2010 Delmar Cengage Learning Fig. 19: Trace Bitmap Dialog Box

34. © 2010 Delmar Cengage Learning Understanding the Deco Tool The Deco tool is used to create decorative patterns that incorporate imported graphics and those drawn in Flash. These patterns can be animated and added to a movie to create special effects. Three types: –Vine Fill –Grid Fill –Symmetry Brush

35. © 2010 Delmar Cengage Learning Fig. 25: Vine Fill Effect

36. © 2010 Delmar Cengage Learning Fig. 26: Grid Fill Effect

37. © 2010 Delmar Cengage Learning Fig. 27: Symmetry Brush Effect

38. © 2010 Delmar Cengage Learning Chapter 7 Summary 1.Understand and import graphics 2.Break apart bitmaps and use bitmap fills 3.Trace bitmap graphics 4.Use the Deco tool with imported graphics