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
Import and Modify Graphics
• 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
• The Import
dialog box for
an Illustrator
file
Import and Modify Graphics
• 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
Import and Modify Graphics
• 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
• 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
• 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
• 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
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)
Import to Library dialog box
Understand and Import Graphics
• 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
• 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
flattened bitmap graphics.
Understand and Import Graphics
• You can create artwork in Adobe Illustrator to
import to flash.
• Graphics created in Illustrator are comprised of
paths.
• Paths are segments, such as lines, of a graphic
that can be individually edited.
Understand and Import Graphics
• 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
The Import
dialog box
for an
Illustrator
file
Understand and Import Graphics
• 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 highquality artwork before you import the graphic
into Flash.
Understand and Import Graphics
• 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
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
Import dialog box for Photoshop “background.psd” file
Understand and Import Graphics
• 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
• 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
Compressed
size of the
graphic
Item Preview
window
Original size of graphic; changing the size of the object on
the Stage does not affect the original bitmap symbol
Understand and Import Graphics
• 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.
Break Apart Bitmaps and Use Bitmap Fills
• 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
• 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
Bitmap fill
applied with the
Brush tool
Bitmap fill in
a circle
applied with
the Paint
Bucket tool
Bitmap fill in text applied with the Paint
Bucket tool
Different bitmap fill effects
Break Apart Bitmaps and Use Bitmap Fills
• 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
• 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
Bitmap fill selected
as the Type
Bitmap fill
selected
Bitmaps available
in the library
Bitmap fill selected in Color panel
Trace Bitmap Graphics
• Tracing is an outstanding feature if:
– You are illustration-challenged
– You need to convert a bitmap graphic into a vector
graphic for animation purposes
• 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.
Trace Bitmap Graphics
Before and after tracing a bitmap
Trace Bitmap Graphics
• There are four options that affect how detailed
the trace will appear:
–
–
–
–
Color threshold
Minimum area
Corner threshold
Curve fit
Trace Bitmap Graphics
Three different effects with different trace settings
Trace Bitmap Graphics
• 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
Sections of the
moon selected
by color and
moved
Dividing a traced graphic by color