We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byHassan Crosthwait
Modified over 6 years ago
© 2010 Delmar, Cengage Learning Chapter 7: Importing and Modifying Graphics
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 2010 Delmar Cengage Learning Fig. 5: Tree on the Stage after Importing X and Y coordinates for tree
© 2010 Delmar Cengage Learning Fig.8: Bitmap Properties Dialog Box Item preview window Compressed size of the graphic
© 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
© 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
© 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
© 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
© 2010 Delmar Cengage Learning Fig.10: Bitmap Fill Selected in Color Panel Bitmap selected Bitmap selected as the Type Available bitmaps from library
© 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
© 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
© 2010 Delmar Cengage Learning Fig. 16: Before and After Tracing a Bitmap
© 2010 Delmar Cengage Learning Fig. 17: Dividing a Traced Graphic by Color Sections of the moon selected by color and moved
© 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.
© 2010 Delmar Cengage Learning Fig. 18: Different Effects with Trace Settings
© 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
© 2010 Delmar Cengage Learning Fig. 19: Trace Bitmap Dialog Box
© 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
© 2010 Delmar Cengage Learning Fig. 25: Vine Fill Effect
© 2010 Delmar Cengage Learning Fig. 26: Grid Fill Effect
© 2010 Delmar Cengage Learning Fig. 27: Symmetry Brush Effect
© 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
Word Lesson 6 Working with Graphics
INTRODUCTION TO ADOBE FLASH CS4
Designing Scenes for Macromedia Flash MX 2004 – Lesson 41 Designing Scenes for Macromedia Flash MX 2004 Lesson 4.
© 2011 Delmar, Cengage Learning Chapter 7 Importing and Modifying Graphics.
Importing and Modifying Graphics
Dawn Pedersen Art Institute. Introduction Prior to Flash CS3, the movement of Illustrator and Photoshop documents into Flash was difficult. At that time,
Adobe Fireworks CS3 Revealed CHAPTER THREE: IMPORTING, SELECTING, AND MODIFYING GRAPHICS.
Macromedia Fireworks MX 2004 – Design Professional Importing, Selecting, and Modifying Graphics.
Chapter 6 Photoshop and ImageReady: Part II The Web Warrior Guide to Web Design Technologies.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
Chapter 12 Using Clipping Masks, Paths, & Shapes.
Foundation Level Course
CIS 205—Web Design & Development Fireworks Chapter 3.
Adobe Photoshop CS Design Professional PATHS, & SHAPES USING CLIPPING MASKS,
Create a new document and import files Learn about the Macromedia Fireworks window Work with bitmap and vector images Create and modify text Unit Lessons.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
Chapter 3 Working with Symbols and Interactivity.
Macromedia Flash MX Design Professional MODIFYING GRAPHICS IMPORTING AND.
Adobe Flash CS4 – Illustrated Unit B: Creating Graphics and Text.
© 2021 SlidePlayer.com Inc. All rights reserved.