Optimizing graphics

Flash Catalyst supports both vector and bitmap graphics. The objects you create with the Flash Catalyst drawing tools are vector graphics. Vector graphics are ideal for illustrations, small type, or bold images created with lines and shapes that must look crisp, even when scaled. Bitmaps are better suited for photography.

Optimize large bitmap image or vector drawing with hundreds of paths. Optimizing images makes them easier to work with in Flash Catalyst and your finish application runs more efficiently. For example, complex sets of vector graphics (like freeform artwork or corporate logos) that do not need to change between states can be optimized.

Vector graphics
Are mathematical equations describing the distance and angle between two points. Additional information, such as the color and thickness of the line (stroke) and the content of the path (fill) can also be set. Vectors can be sized up or down with no detrimental impact to the vector shape.

Bitmap (Raster) images
Are made of a specific number of pixels mapped to a grid. Each pixel has a specific location and color value. An image with more pixels has a higher resolution and a larger file size.

In Flash Catalyst, graphic optimization options include converting vector graphics to bitmaps, compressing images, and converting embedded images to linked files. When you select a graphic object, optimization options appear in the Heads Up Display.

Optimize artwork options in the Heads Up Display

Optimize Vector Graphics
Compile the selected graphics into a low-level Flash object. They display more quickly in Flash Catalyst and at runtime. Once you optimize a vector drawing in Flash Catalyst, you can no longer edit its stroke and fill. In an optimized vector graphic file, all MXML information (vector, stroke, path, fill, and so on) is kept separately in an FXG file. When you optimize a vector graphic, a new optimized graphic is added to the Library panel in the Optimized Graphics category.

Rasterize
Converts a static vector graphic or text into a bitmap image. Use the Rasterize option to optimize static vector graphics or text.
Note: Rasterizing a graphic object that has a blend mode, can cause it to display incorrectly.

Compress
Lets you add compression to a bitmap image. Compressing an image reduces the file size of an image, but also reduces the image quality. When you compress an image with transparency, the transparency is lost. When you compress a bitmap image, a compressed copy is added to the Library panel. The original uncompressed image remains in the Library panel.

Convert to Linked Image
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 you run the application. If you link assets, then copy the linked files to the web server where you deploy your application (SWF file).

Deciding when to optimize images

There are trade-offs of optimizing images. Using the Optimize Vector Graphics options makes it so that you can later break the graphic apart and re-edit the content. It produces a smaller SWF file size than a bitmap.

When you Rasterize a graphic (convert to a bitmap) you can see better performance in Flash Catalyst, but at the cost of a larger SWF file. Scaling a bitmap can cause it to look incorrect.

Optimize with good design

One of the best ways that you can optimize your application is to make the best use of assets, pages, states, and components. The following are some things to consider when building an optimized application.

  • Optimize graphics

  • Use a single instance of an asset and share it to states. For more information, see Share objects between pages and 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 pages 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 Interactive components.

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.