Table of contents
4 May 2011
A working knowledge of Flash Catalyst and Adobe Illustrator is recommended.
Adobe Flash Catalyst is a professional interaction design tool for rapidly creating application interfaces and interactive content without coding. You can start from static compositions created in Adobe Illustrator CS5.1, Adobe Photoshop CS5.1, or Adobe Fireworks CS5.1 and convert the artwork into applications and interactive content.
This article focuses on best practices for using Adobe Illustrator to successfully create artwork for Flash Catalyst. It cover tips for setting up your design for pixel snapping, working with fonts, proofing color, and better performance. It also covers how best to structure your file so that it is easier to build in Flash Catalyst, increasing your productivity by streamlining your design workflow. Lastly, it includes some useful information about editability and fidelity as you move objects and text between the two applications.
Getting started in Illustrator on a design for Flash Catalyst got easier in CS5. When creating a new document in Illustrator, simply choose the Flash Catalyst document profile (see Figure 1). Here are the settings for that profile:
- Align To Pixel Grid is on by default
- Color space is RGB
- Units: Pixels
- Normal Character Style is Arial (a web font)
- Includes symbols for application UI
- Swatches: web colors
- Document Raster Effects Settings: 72 ppi
How is this different from the Web profile? It uses a web font (Arial, which does not have to be embedded when publishing to SWF) and symbols (scrollbars, buttons, text input, search bar, slider, checkbox, and more).
There are three main advantages of using this profile with Flash Catalyst: the color space is RGB (same as Flash Catalyst and the Flash platform), the units are pixels, and the Align To Pixel Grid feature is on by default.
The Align To Pixel Grid feature is new for Illustrator CS5 and it is the most important aspect of the Flash Catalyst document profile. This option will help keep vertical and horizontal lines (regardless of stroke width) aligned with the Pixel Grid. It will also round non-integer stroke values to whole numbers when scaling objects (when Scale Strokes is on). This should be used for the best user experience when creating art for Flash Catalyst. Why? Even though your vector art will remain as vectors, Flash Catalyst does want to align art to the pixel grid. The demands for precision when designing user interface elements are high and starting with pixel aligned art in Illustrator will ensure design fidelity throughout the workflow.
If you have existing Illustrator art (created before CS5 or maybe coming from a non-web project) that you want to be pixel aligned before using in Flash Catalyst, then follow these steps:
- Open the file in Illustrator and select the object or objects.
- Open the Transform panel (choose Window > Transform), and select Align To Pixel Grid (see Figure 2).
- To find objects that are not aligned to the pixel grid, choose Select > Object > Not Aligned to Pixel Grid.
The Edit In Adobe Illustrator feature in Flash Catalyst
When using the Edit In Adobe Illustrator feature in Flash Catalyst, the Align New Objects To Pixel Grid feature is not on for the FXG temporary file that opens in Illustrator. If you want all Illustrator art created during your editing session to be pixel aligned, you’ll need to turn the feature on each time:
- Open the Transform panel in Illustrator and click the panel menu button.
- Select Align New Objects to Pixel Grid (see Figure 2).
There are two Illustrator preferences that you should consider changing from their default settings in order to achieve more predictable results and further reduce cases where fractional X,Y values can appear when working with stroked objects in your designs for Flash Catalyst.
First, change the Registration point from center to upper left. This can be changed using the 9-point widget in either the Control panel or the Transform panel (see Figure 3). For example, consider a rectangle positioned at 0,0. By default, the rectangle’s center is positioned at the 0,0 coordinate for the document. After changing the Registration point, the rectangle’s upper left is positioned at the 0,0 coordinate for the document, as in Flash Catalyst.
You’ll notice (in Figure 3) that the stroke is excluded; hence, there are still fractional pixels for X,Y. So, you’ll want to change a second preference. Open the Align panel in Illustrator, click the Panel menu button, and select Use Preview Bounds (see Figure 4). With this option turned on the stroke of the object is included for W/H and X/Y, just like Flash Catalyst and other web apps.
Another best practice in Illustrator to help ensure your designs for Flash Catalyst are pixel perfect is to do a quick check with Pixel Preview turned on (choose View > Pixel Preview) and zoom in to 600% or greater to examine your art. The pixel grid will appear and you can quickly spot and correct problems before handing off your file to Flash Catalyst (see Figure 5).
It is important to keep track of fonts as you specify them or when cutting and pasting assets from Illustrator to Flash Catalyst.
Flash Catalyst supports OpenType and TrueType fonts. Carefully consider the costs and benefits of specifying Type 1 fonts in your Illustrator design. By default, they are substituted so you’ll have to outline/rasterize them to maintain visual fidelity. This is no big deal for a logo or some display type, but large amounts of outlined text will involve many paths and this can negatively affect performance. Furthermore, dynamic items in Flash Catalyst such as button labels, repeated items for data lists, and text input labels require live text.
The following web fonts are common between Mac and Windows. All users (and developers) have them. These fonts do not have to be embedded in your final SWF:
- Courier New
- Times New Roman
Any font other than a web font will have to be embedded when publishing from Flash Catalyst or Flash Builder (which will add to the size of your application). You should track fonts used in your design so you can tell collaborators (interaction designers, developers, and so on) which fonts they’ll need for viewing and publishing.
You can use the Find Font feature in Illustrator (choose Type > Find Font) to track the fonts used in your design file. The Find Font dialog box provides a convenient means to replace fonts in use throughout a document, too, which helps when you accidentally introduce one. You can easily spot (unsupported) Type 1 fonts; they are marked with the red a icon (see Figure 6).
To reduce color differences when comparing colors in Flash Catalyst and Illustrator set Proof Colors to Monitor RGB. Choose View > Proof Setup and select Monitor RGB (see Figure 7).
This allows you to proof your artwork as it will appear when imported into Flash Catalyst.
Note that this is only a view. In Illustrator it is temporary and will have to be reset each time the file is opened. Some Adobe Creative Suite applications share a common architecture for color management, but Flash Catalyst does not. You can use Proof Colors in Illustrator to simulate the appearance of colors in Flash Catalyst without permanently editing your color settings.
There are several techniques you can use to create a design in Illustrator that is well structured.
Use layers to organize your application parts
Make it a point to structure your design file so that different states and functional parts of the application user interface are defined in separate layers and sublayers.
Follow these guidelines to make building in Flash Catalyst faster and easier:
- Make multiple top level layers that correspond to states.
- Make sublayers that correspond to components.
- Make sub-sublayers or groups to contain the states of those components.
Layers, sublayers, and groups provide containers for art that is related in purpose. This makes the art easier to find, select, convert, animate, or delete. Items that are common to multiple states can be collected in layers or sublayers based on stacking order, for example background and foreground. If your application has four states, you might have a file with four top level layers, with each containing the art to represent one application state, as well as a background layer. The background layer contains elements that may appear in all states (see Figure 8).
In Flash Catalyst, the layers are preserved when the Illustrator file is imported (see Figure 9). It is easy to create the states of an application by setting the visibility of the layers that represent that state.
What about Illustrator artboards? Illustrator artboards are imported as states in Flash Catalyst. Although this is convenient, Illustrator has no notion of sharing the same object between artboards so you have to duplicate art to simulate sharing. Duplicated mock-up art has to be deleted in Flash Catalyst.
In Illustrator, it’s a good idea to name all elements. This applies not only to layers and groups but also to individual graphics.
Item names appear in the Flash Catalyst Timelines panel and make it easier to comprehend what is happening in a transition.
Many components have required parts (for example, the Scrollbar has Thumb and Track) and it is easier to assign parts by name than by looking at a tiny thumbnail (see Figure 10). Proper naming in an Illustrator file makes it easy to spot the art that will be used in Flash Catalyst to define a vertical scrollbar (thumb, track), a compare button, a list, and so on.
There is no formal convention for the naming of elements. If you are collaborating with a team you may want to take some time to agree on a naming strategy for components before beginning.
Mark duplicated component assets
In your comp, it is often necessary to draw multiple versions of a repeated item, such as buttons, scroll bars, and other visual elements, to mock up the look of the application user interface. In Flash Catalyst you will want to avoid defining multiple components that use the same artwork.
Make it easy to spot redundant mock-up art by including "delete" in the name (see Figure 10). This serves as a reminder that the component does not need to be redefined and that you should replace the artwork in Flash Catalyst with an instance of a component from the Library. To easily replace art with an instance of a component from your Library in Flash Catalyst CS5.5 choose Modify > Replace With.
In Illustrator you are free to design in any arbitrary way, using vectors, effects, type, images, and all the rich features that are available. Flash Catalyst will import any comp you make, up to 40 MB, with an object count limit of 6,500 paths.
However, once your Illustrator file is imported into Flash Catalyst, the goal is to make an interactive project that will ultimately be published to Flash Player or Adobe AIR. You can take steps in Illustrator to put the project on a path to delivering an application that loads quickly and performs well. It is much better to start thinking about performance early than to defer all efforts at optimizing for performance until later in the workflow.
Optimize images and other raster content
Try to use images that are 72 ppi. It is quite common to scale an image down for design purposes (so it may end up being much higher than 72 ppi). You can resample it in Illustrator by choosing Object > Rasterize. Remember to set the background as Transparent when rasterizing nonrectangular art.
If you’re not sure whether your file contains bitmaps that are inappropriately sized, Illustrator has a tool that can help. The Document Info panel can display the size and resolution of all images (either linked or embedded) in the current selection or for the whole file (see Figure 11).
If you can’t locate a specific image, choose Selection Only from the Panel menu and click individual items until the panel shows the information for the image you’re looking for.
As an example, when Selection Only is deselected and Embedded Images is selected, the panel displays info about all embedded images in the file. After you identify any large images in the comp using this technique, you can downsample them for a better performing Flash Catalyst project (and resulting SWF).
Check masked images
Masked images may be oversized. Although using an image that is masked gives you more freedom to modify the composition, this image data will not be discarded when imported into Flash Catalyst. Unless you’re going to animate the image moving within the mask, it will bloat the project needlessly.
You can use the artboard in Illustrator to isolate and crop a masked asset and export the smaller image through Save For Web (see Figure 12). Later, import the smaller cropped, optimized image back into Illustrator and delete the oversized masked one.
Follow these steps to use this technique:
- Select your mask in Illustrator.
- In the Tool panel select the Artboard tool, drag out an artboard, and click to drop it (no need to position it.)
- While the Artboard tool is still active as the current tool (and the mask is still selected) choose Object >Artboards > Fit to Selected Art.
- Choose File > Save For Web.
- After saving your cropped, optimized image, import it, position it, and delete the large masked image.
- Finally, delete the extra artboard before saving your Illustrator file for Flash Catalyst.
Optimize vector content
Oversized bitmaps are not the only elements in a design file that can reduce the performance of your project in Flash Catalyst. If you are working on a project that includes an illustration with 100 brushes you will be better off using compressed JPGs or optimized vector graphics than trying to build your comp with certain types of raw vector art, including dashed strokes, brushes, type outlines, and live trace objects (see Figure 13).
You can use Flash Catalyst to convert a set of vector art into a single low-level graphics object, or optimized graphic. It is as if you’ve taken the art and made a precompiled SWF. You can find this feature in the Flash Catalyst HUD or by choosing Modify > Optimize Vector Graphics.
Rasterizing complex groups will usually result in the best performance so why would you want to use optimized graphics?
When you rasterize you can’t edit the art anymore. Optimized graphics give you the option to break apart the art later if you need to edit it.
In addition, rasters don’t scale well. Use optimized graphics when you want to maintain scalability for a complex group.
Illustrator Symbols are converted to optimized graphics on import into Flash Catalyst. You can convert complex groups in Illustrator to Symbols for better performance in Flash Catalyst, effectively preoptimizing.
If you have no idea which groups are contributing to complexity or high object count in your Illustrator design then the next section will help quite a bit. However, remember, at any time you can use the Document Info panel for file analysis (use the technique illustrated in Figure 11). Just save a copy of your file as FXG (make sure you turn off Save Illustrator Private Data), open it, show the Document Info panel and select Objects in the panel menu. Then select Selection Only and click individual items.
Many teams at Adobe worked hard so that your designs look good as they move from Creative Suite tools into Flash Catalyst. When art is imported into Flash Catalyst–whether it is your whole comp, something you cut and pasted, or when you use Edit in Adobe Illustrator–the art is converted to FXG. FXG was designed to map directly to the drawing primitives of Flash Player and to be compatible with Flex graphical primitives. The Flash imaging model and the one Illustrator uses (which started with Postscript) are both vector based and support paths (which can be filled and stroked with various kinds of paint), raster images, vector text, simple opacity, and blending modes. However, there are also many differences between the two models.
It is good to familiarize yourself with the objects and type features that are supported for 100% editability on import into Flash Catalyst:
- Path objects
- Object names, Group names, Layer names
- Symbols (converted to Catalyst’s Optimized Graphic)
- Compound Path (exported as path)
- Clipping Mask
- Opacity Mask
- Transparency: On solid, pattern, gradient, gradient stops
- Blending Modes
- Linear Gradient
- Radial Gradient (preserved, Catalyst lacks UI for editing)
- Elliptical Gradient (same as above)
- Effect > Stylize > Drop Shadow
- Effect > Stylize > Inner Glow
- Effect > Stylize > Outer Glow
- Effect > Blur > Gaussian Blur
- Type (see Table 2 for more detail)
You’ll find that these features include much of what is commonly used in building application UIs such as buttons, scrollbars, labels, lists, titles, and more. By using these objects and features when building your comp you’ll have the freedom to edit them in Flash Catalyst, and when using Edit In Illustrator, long after work on your project in Flash Catalyst has started. This means you’ll have the flexibility to change your mind or recover easily if the customer changes their mind.
To preserve visual fidelity when some Illustrator objects are imported they are rasterized or expanded into simple paths (see Table 1). A few of the expanded ones introduce a high object count, which can negatively affect performance in Flash Catalyst. The icons on the right indicate what happens to individual features encountered on import/paste when the default Illustrator settings are used (automatic conversion). You can explicitly specify options for Filters, Gradients, and Blends if you choose.
All of the blending modes in Illustrator are supported in Flash Catalyst. However, Illustrator does not blend against the default document background; rather it blends against the transparent background. To view blending modes correctly, create a filled rectangle in the background (see Figure 14).
Avoid using reflected or skewed symbols or bitmaps in your Illustrator comp (see Figure 15) as those transformations will be discarded in Flash Catalyst.
To preserve the appearance of reflected symbols select Break Link on the reflected instance and redefine it as a new symbol. You can rasterize your reflected bitmap so the appearance is retained.
Objects that are not on an Illustrator artboard will be discarded on import to Flash Catalyst. Objects copied from outside the Illustrator artboard will not paste into Flash Catalyst (see Figure 16).
A wide variety of Illustrator text features are fully supported (for import, cut/paste, and Edit in Illustrator) in Flash Catalyst. The icons in the second column in Table 2 indicate what happens to individual text attributes encountered on import/paste when the default Illustrator settings are used (automatic conversion.) You can explicitly specify Keep Editable, Vector Outlines, or Flatten for all text if you choose.
Caps, small caps, superscript, and subscript are supported, but be sure to use the versions found in the Character panel menu (see Figure 17), not the OpenType panel.
To discuss Flash Catalyst and contribute further hints and tips visit the Adobe Forums for Flash Catalyst. To learn more about using Flash Catalyst, check out the tutorials and other resources in the Flash Catalyst Developer Center. For a complete list of Illustrator objects and attributes that are directly mapped into FXG see FXG mapping of Illustrator objects and attributes in the Illustrator documentation.