Chapter 7:
Importing and Modifying Graphics
© 2010 Delmar, Cengage Learning
Chapter 7 Lessons
1.
2.
3.
4.
Understand and import graphics
Break apart bitmaps and use bitmap fills
Trace bitmap graphics
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
Features for the file
are stored as pages
Maintains drawn
shapes and
editable paths
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
background.psd
consists of two
layers: Sun and
Background
Once imported,
each layer in
background.psd will
exist on its own
layer in Flash
© 2010 Delmar Cengage Learning
Importing Bitmaps
• You can
– Control size, compression, and antialiasing 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
© 2010 Delmar Cengage Learning
The movie clip
containing any
editable paths
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
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
© 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.
2.
3.
4.
Understand and import graphics
Break apart bitmaps and use bitmap fills
Trace bitmap graphics
Use the Deco tool with imported graphics
© 2010 Delmar Cengage Learning