Optimizing graphics

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:
  • overly 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

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 geometric characteristics.

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 or Fireworks.

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:
  1. Select the object(s) on the artboard.

  2. On the HUD, choose Optimize Artwork>Optimize Vector Graphics.

  3. 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 graphic:
  1. Select the object(s) on the artboard.

  2. 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:
  1. Select the object(s) on the artboard.

  2. On the HUD, choose Optimize Artwork > Rasterize.

  3. A .png file containing the raster image is added to the Project Library.

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:
  1. Select the image on the artboard.

  2. Choose Optimize Artwork > Compress... on the HUD.

  3. 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:
  1. Select the image on the artboard.

  2. Choose Convert to Linked Image under Optimize Artwork on the HUD, or by right-clicking the name of the image in the Project Library panel.

  3. 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 Library panel

Optimizing tips

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.

    When 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

Ian Giblin wrote an article on the Adobe Developer Center covering best practices for preparing art in Illustrator for use in Flash Catalyst. See Best Practices for using Adobe Illustrator with Flash Catalyst CS5.5.

Tara Feener wrote a post on optimizing on the FlashCats blog. See Optimizing for smaller SWF output.