Because applications built using Flash Catalyst will ultimately
be published to run in the Flash Player or AIR, it is important
to optimize the graphics you use so your app loads quickly and performs
well. Your goal is to create the smallest SWF output size possible
for your application.
If your SWF output size is large and your project is not performing
well, it is most likely due to the inclusion of:
complex vector graphics
unnecessarily high resolution raster images
large embedded image files
Catalyst includes commands for optimizing vector graphics and
raster images, and for converting embedded image files to linked
image files. All of these commands can be accessed by making a selection
on the artboard, and choosing one of the options under Optimize
Artwork on the HUD.
Vector graphics (sometimes called vector shapes or vector
objects) are made up of lines and curves defined by mathematical
objects called vectors, which describe an image according to its
You can freely move or modify vector graphics without losing
detail or clarity, because they are resolution-independent-they
maintain crisp edges when resized. The objects you create with the
Flash Catalyst drawing tools are vector graphics; so are many of
the objects you create in Creative Suite applications such as Illustrator
Why optimize vector graphics?
Catalyst will import vector graphics up to 40 MB, with
an object count limit of 6,500 paths. However, Catalyst renders
each vector individually, so complex objects can slow down performance
substantially in published applications.
Convert vector graphics to optimized vector graphics
The Optimized Vector Graphic command allows you to convert
multiple vector objects into a single, low level flash graphics
object. The benefit is reduced file size, while retaining the ability
to edit again later by converting the object back to vectors.
To convert vector objects to optimized vector graphics:
Select the object(s) on the artboard.
On the HUD, choose Optimize Artwork>Optimize Vector Graphics.
A new graphic is added to the Optimized Graphics section
of the Project Library; the optimized graphic can be renamed by
double-clicking its name.
To edit the original vector objects within an optimized vector
Select the object(s) on the artboard.
On the HUD, choose Optimize Artwork>Break Apart Graphic.
Convert vector graphics to raster images
The Rasterize command allows you to convert vector objects
to a single raster image. This reduces the size and complexity of
your graphics substantially, but does not allow the added benefit
of being able to revert back to vectors later for continued editing.
If you need to retain the flexibility of editing your vector graphics,
use the Convert to optimized graphic command.
To convert a vector object to a rasterized image:
the object(s) on the artboard.
On the HUD, choose Optimize Artwork > Rasterize.
A .png file containing the raster image is added to the Project
Bitmap (raster) graphics
Raster images-sometimes called bitmap images-use a rectangular
grid of picture elements (pixels) to represent images. Each pixel
is assigned a specific location and color value. When working with
raster images, you edit pixels rather than objects or shapes. Raster
images are the most common electronic medium for continuous-tone
images, such as photographs or digital paintings, because they can
more efficiently represent subtle gradations of shades and color.
Raster images are resolution-dependent-that is, they contain
a fixed number of pixels. As a result, they can lose detail and
appear jagged if they are scaled to high magnifications. Images
you create in Creative Suite applications such as Photoshop are
usually raster images.
Why optimize raster images?
Catalyst will import raster images with a maximum size
of 2048 x 2048 pixels (20 million total pixel count). However, large
raster images (for example, high resolution images created for print
output, or large masked images) can slow down application performance
unnecessarily. Always try to use raster images that are 72 ppi and
as small as possible.
Compress raster images
The Compress command allows you to add compression to a
raster image. This can reduce the size of your project substantially,
but as with any compression work, the balance between image quality
and optimum file size should always be considered. When you compress
a raster image, a compressed copy is added to the Library panel,
and the original uncompressed image remains in the Library panel.
To compress a raster image:
Select the image on the
Choose Optimize Artwork > Compress... on the HUD.
Enter the amount of compression.
Embedded vs. linked images
By default the images you add to your application are embedded
and published as part of the SWF file. To reduce the size of your
application, you can link images. Linking an image stores it outside
the application (SWF file) and loads the image when the application
is run. If you link assets, then copy the linked files to the web
server where you deploy your application (SWF file).
To convert an image to a linked or embedded image:
Select the image on the artboard.
Choose Convert to Linked Image under Optimize Artwork on
the HUD, or by right-clicking the name of the image in the Project
To convert a linked image back to an embedded image, right-click
the linked image icon next to the image name on the Project Library
panel, and choose Embed Image.
Linked images display an icon next to their name on the Project
The following are some things to consider when building
an optimized application.
Use efficient structure
Use a single instance of an asset and share it
to states. For more information, see Share objects between states.
When adding multiple videos to a project, use one instance
of a video player. You can edit its properties in different states
to display and control a different source video. For more information,
see Add video.
Limit the number of main application states in your application.
To create more views or screens, use the different states of a custom
component. Use nested components to create sites with more depth
of content and fewer pages. For more information, see What is a component?.
Optimize before import
There are several ways to optimize the performance of your
application before bringing artwork into the project.
Make sure that bitmap/raster images are 72 dpi.
Make sure that the color mode is RGB.
Use Align To Pixel Grid in Illustrator.
designing artwork for Flash Catalyst using Adobe Illustrator, you
can use the Flash Catalyst document profile to automatically apply
optimum settings. The profile applies settings for document size,
color mode, PPI, and Align To Pixel Grid. In Illustrator, click
Flash Catalyst Document in the Create New section of the Welcome
screen. You can also choose File>New to open the New Document window.
Click to open the New Document Profile menu and select Flash Catalyst.
When creating videos, use a preset or codec and compression
settings that are optimized for the web.
Learn more from the community