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

© 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


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


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


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


Importing Different GraphicFormats• 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


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


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


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


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


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


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


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



• 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



• 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


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


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


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


Fig. 5: Tree on the Stage after Importing

X and Y coordinates for tree


Fig.8: Bitmap Properties Dialog Box

Item preview window

Compressed size of the graphic


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


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


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


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


Fig.10: Bitmap Fill Selected in Color Panel

Bitmap selected

Bitmap selected as the Type

Available bitmaps from library


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


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


Fig. 16: Before and After Tracing a Bitmap


Fig. 17: Dividing a Traced Graphic by Color

Sections of the moon selected

by color and moved


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.


Fig. 18: Different Effects with Trace Settings


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


Fig. 19: Trace Bitmap Dialog Box


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


Fig. 25: Vine Fill Effect


Fig. 26: Grid Fill Effect


Fig. 27: Symmetry Brush Effect


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

Documents

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