© 2011 Delmar, Cengage Learning
Chapter 7
Importing and Modifying Graphics
Chapter 7 Lessons
1. Understand and import graphics
2. Break apart bitmaps and use bitmap fills
3. Trace bitmap graphics
© 2011 Delmar Cengage Learning
© 2011 Delmar Cengage Learning
• Introduction– Importing vector graphics from an application,
such as Adobe Fireworks or Adobe Illustrator, is easy—the vector graphics are treated almost as if you created them in Adobe Flash
– Importing bitmap graphics is easy too, but working with them can be more difficult
– Using bitmap graphics can increase your file size dramatically
Import and Modify Graphics
© 2011 Delmar Cengage Learning
• Introduction– It is most efficient to you use vector graphics
or to create graphics directly in Flash– Once either graphic file type is in your library,
you can place them on the Stage, where you can trace them, break them apart, use them to fill an object, optimize them, and animate them
Importing and Modifying Graphics
© 2011 Delmar Cengage Learning
Import and Modify Graphics
Tools You’ll Use
© 2011 Delmar Cengage Learning
• Flash is a vector-based application, thus all graphics and motion within the application are calculated according to mathematical formulas.
• This vector-based format results in a smaller file size, as well as a robust ability to resize movies without notable loss in quality.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• A bitmap graphic is also called a raster graphic, which is based on pixels, not on mathematical formulas.
• In many cases, when you import both bitmap and vector graphics, you are able to retain features, such as layers, transparency, and animation.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• The best way to bring a graphic into your movie is to import it by selecting the Import option on the File menu.
• Choose the Import to Stage command to have the graphic placed on the Stage and in the Library.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• If the original graphic has layers, Flash can create new layers associated with that graphic in your document.
• Flash automatically places the additional layers on the Timeline or inside a movie clip symbol, when applicable.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
Generally, the best way to bring a graphic into your movie is to import it
Understand and Import Graphics
Import to Library dialog box
You can display only files of one file type, such as PNG files, by selecting that file type in the file types list
File type list (All file types listed)
List arrow for file types, name on button changes to reflect last file type selected (All Files currently selected as the file type)
© 2011 Delmar Cengage Learning
• If you are importing a large number of graphics, you can import a group of graphics (of the same file type and from a single folder), all of which will automatically use the same settings.
• You can also copy and paste graphics from an application, such as a graphics-editing program, directly into a Flash movie.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• If you copy and paste using other applications, the graphic may become a flattened bitmap, which means the advantages of using vector graphics are lost.
• You can import Fireworks PNG files as either flattened bitmap graphics or as editable objects.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• Fireworks uses Pages to contain selected layers, which contain paths.
• Paths are segments, such as lines, of a graphic that can be individually edited.
• Paths can also contain the settings such as size, color, and image resolution.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
Understand and Import Graphics
Features for the fileare stored as pages
All features maintained inPage 1 are imported as a movie clip so they can beedited in Flash
Maintains drawn shapesand editable paths
© 2011 Delmar Cengage Learning
• Graphics that you create in Illustrator are AI files.
• Illustrator AI files are vector-based.
• AI files preserve most of their attributes including filters and blends.
• In the Import dialog box you can choose to convert Illustrator graphic layers to Flash layers.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• Flash also allows you to import Photoshop files into a Flash document.
• Graphics created in Photoshop allow you to produce more creative and complex images.
• The Photoshop tools allow you to create high-quality artwork before you import the graphic into Flash.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• Graphics created in Photoshop are PSD files.
• You can choose to have Photoshop layers imported as Flash layers.
• This allows you to edit individual parts of an image, once the graphic is in your Flash document.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
Understand and Import Graphics
Import dialog box for Photoshop “background.psd” file
Background.psd consists of two layers; Sun and Background
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
© 2011 Delmar Cengage Learning
• Flash allows you to use and modify imported bitmaps in a variety of ways.
• You can control the size, compression, and anti-aliasing of imported bitmap.
• Anti-aliasing is the process of smoothing the edges of a graphic so they appear less jagged.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• Once you import a bitmap, it becomes a graphic object in the library and can be edited.
• When an instance of a bitmap symbol is on the Stage, you can use the Properties panel to:– Numerically change the dimensions of the graphic– Swap the bitmap for another bitmap within the
library– Edit the bitmap in another application
Understand and Import Graphics
© 2011 Delmar Cengage Learning
Understand and Import Graphics
Bitmap Properties dialog box
Item Preview window
Original size of graphic -Changing the size of the object on the Stage does not affect the original bitmap symbol
Compressed size of the graphic
© 2011 Delmar Cengage Learning
• Copyright laws apply to digital images.
• These laws are intended to protect the intellectual property rights of the creator of the work and are meant to ensure compensation for the creativity and work involved by the artist.
• Unless you produce a graphic yourself, assume it is protected under these laws.
Understand and Import Graphics
© 2011 Delmar Cengage Learning
• Bitmap graphics, unlike vector graphics, are made up of a group of pixels.
• You can break apart a bitmap graphic and edit individual pixels.
• The Lasso tool allows you to select irregularly shaped parts of a graphic.
Break Apart Bitmaps and Use Bitmap Fills
© 2011 Delmar Cengage Learning
• You can use the Magic Wand tool to select areas of similar color in a bitmap graphic you have broken apart.
• Flash allows you to apply a bitmap fill to any drawn shape or text that has been broken apart.
• A bitmap fill is created by breaking apart a bitmap graphic using it to fill another graphic.
Break Apart Bitmaps and Use Bitmap Fills
© 2011 Delmar Cengage Learning
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
Break Apart Bitmaps and Use Bitmap Fills
© 2011 Delmar Cengage Learning
• You can apply a bitmap fill to any drawn shape.
• Flash will tile the bitmap to fill the shape if necessary.
• You can use the Gradient Transform tool to change the size, shape, rotation, and skew of your fill, which allows you to position the original graphic in the exact place you want it.
Break Apart Bitmaps and Use Bitmap Fills
© 2011 Delmar Cengage Learning
• You can also apply a bitmap as a fill by using the Brush tool.
• If the bitmap graphic you want to use for a fill is not on the Stage, you can use the Color panel to select it.
Break Apart Bitmaps and Use Bitmap Fills
© 2011 Delmar Cengage Learning
Bitmap fill selected in Color panel
Bitmap fill selected as the Type
Bitmap fill selected
Bitmaps available in the library
Break Apart Bitmaps and Use Bitmap Fills
© 2011 Delmar Cengage Learning
• Tracing is an outstanding feature if:– You are illustration-challenged– You need to convert a bitmap graphic into a vector
graphic for animation purposes
Trace Bitmap Graphics
• When you apply the trace function, you change a bitmap graphic into vector paths and fills with varying degrees of detail.
• When you trace a graphic it acts as though it were drawn in Flash.
© 2011 Delmar Cengage Learning
Trace Bitmap Graphics
Before and after tracing a bitmap
© 2011 Delmar Cengage Learning
• There are four options that affect how detailed the trace will appear:– Color threshold– Minimum area– Corner threshold– Curve fit
Trace Bitmap Graphics
© 2011 Delmar Cengage Learning
Trace Bitmap Graphics
Three different effects with different trace settings
© 2011 Delmar Cengage Learning
• When you trace, paths and shapes are created, but every piece of the original graphic remains on one layer.
• To animate or tween between pieces of the shape, you often have to isolate parts of the object onto their own layers.
Trace Bitmap Graphics
© 2011 Delmar Cengage Learning
Sections of the moon selected
by color and moved
Trace Bitmap Graphics
Dividing a traced graphic by color
Top Related