Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating application interfaces and interactive content, without coding.

Often, when using Flash Catalyst, you will be working alongside developers as part of a team and it will be necessary to share your Flash Catalyst project file with them so that they can continue development of the project or use the component skins that you have defined.

How you approach the design and structure of your original artwork in Illustrator will impact the structure of the project within Flash Catalyst, and this, in turn, will have an impact on the quality and usefulness of the assets and skins made available to the developers you're working with.

In this article, I'll provide some hints and tips that will make it easier for you to move design assets from Illustrator to Flash Catalyst in a structured way. I'll also highlight some best practices in Flash Catalyst that will ensure you achieve the right result and minimize re-working or re-structuring your assets once work continues inside Flash Builder.

Using Illustrator

Note: This article focuses on the use of Adobe Illustrator to create artwork for use in Flash Catalyst. You can also use Adobe Photoshop or Adobe Fireworks to create artwork; many of the hints and tips below can be applied to these tools as well, although I will not cover their use here.

Plan your Illustrator file structure

You should structure your Illustrator file so that different states/functional parts of the application user interface are defined in separate layers and sub-layers (see Figure 1).

Figure 1. Layers panel in Illustrator (left) and Flash Catalyst (right).

Layers, sub-layers, and groups that you define in Illustrator are brought across into Flash Catalyst; by specifying a logical structure and meaningful names in Illustrator, you will be able to understand the structure of the file when working in Flash Catalyst. This is important, as you will need to select layers and groups when converting artwork into components and when animating visual elements between different states of the application.

Design on a single art board

Flash Catalyst does not support multiple art boards, so rather than representing different states of the application user interface on different art boards, use a single art board, but use layers to specify different states of the application (see Figure 2).

Figure 2. The layers panel for a project in Illustrator defines an application with five states, as well as background and foreground layers.

In Figure 2, the background and foreground layers are consistent across the application (and are always visible), each of the other top-level layers represents different application states that the user can view.

Give everything a name

Just as with naming layers and groups, it is also important to name individual graphics and elements within the Illustrator file. You might like to consider using a common naming strategy throughout the file, such as "Button_name" to specify artwork that will later be turned into Button components, and "Text_name," "TextInput_name," "Custom_name," and so on for other components.

There is no formal recommendation for the naming of elements, but you might like to agree on a naming strategy with the interaction designer and developer on the project so that you all know how to reference components within the application and thus avoid confusion or re-work later.

Don't link to external image files

In team environments it is likely that you will need to pass your Illustrator file to an interaction designer to work on in Flash Catalyst; by placing images in Illustrator rather than linking to them you can pass across a single Illustrator file and be assured that they will have all the assets they need to continue working on the project. Images and other assets in Illustrator will appear in the Library panel within Flash Catalyst.

After importing your images into Illustrator you should make sure to use the Object > Rasterize option to optimize the image settings for screen resolution. In this dialog box, select 72 DPI for screen viewing and typically you'll want to set the background as transparent.

Mark duplicated component assets

In Illustrator it is often necessary to draw out multiple, repeated buttons, text input areas, and other visual elements so as to represent the overall visual design of the application user interface. In Flash Catalyst you will want to define a single component for each unique piece of artwork, but avoid defining multiple components where the artwork is the same.

Rather than relying upon judgment to decide which elements are unique, you might consider marking duplicated components in your Illustrator file so that it is clear they don't need to be redefined.

You could choose to use a naming strategy, such as "TextInput_Blue" to define the master artwork for the component and "_textInput_Blue" to signify a duplicate. Alternatively, you could mark all duplicate components by setting their alpha value to 40% as in Figure 3; this indicates visually 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.

Figure 3. The top text input field artwork defines the component in Flash Catalyst.

Use "create outlines" for text with filters and effects

Although Flash Catalyst does a good job at supporting the Illustrator file format, you may find that text with filters and effects applied may not render as you expected, as shown in Figure 4.

Figure 4. The original design (left) and the result after importing into Flash Catalyst (right).

In this case, you can use the "create outlines" option in Illustrator to overcome this issue and create a vector representation of the text. However, note that this does mean the text is no longer editable.

You may also like to use this approach for small amounts of static text, which makes use of a font that you don't want to embed in your application, for example headings, logos, and so on.

Don't define all component states in Illustrator

Although you can define all the states of a component in Illustrator, it is worth noting that Flash Catalyst provides comprehensive options for editing text and graphic properties, including fills, gradients, and strokes (see Figure 5).

Figure 5. The properties panel in an upcoming version of Flash Catalyst.

You may therefore find it easier to specify the original artwork in Illustrator and then, once converted to a component in Flash Catalyst, use the states panel to apply different visual properties to each of the states.

For data list components define a single element

When converting artwork to a data list component in Flash Catalyst you need to specify just a single repeating item for the list. If you do want to draw out the entire data list as part of the application user interface design in Illustrator, then you could choose to define two distinct parts: the standalone piece of artwork that will be used in Flash Catalyst and a separate group containing the remainder of the repeated items (see Figure 6).

Figure 6. The FeedItem defines the artwork for the DataList, whereas the group below represents how the list will look in Illustrator.

This way you can use the group as a guide for alignment and spacing of items within the data list, but then quickly remove it from the project afterwards.

Flash Catalyst

The following tips apply to working with your comp in Flash Catalyst.

Use "Save as copy" on a regular basis

As you experiment with different approaches in Flash Catalyst and learn how best to use this new tool, it is worth making frequent use of the Save as copy option. This is especially true when you are about to embark on major structural changes to your project, such as making significant alterations to the layers/groups, adding new application states and defining transitions.

If something doesn't go quite to plan you can revert quickly to a previously saved version of the document and try an alternative approach.

Undertake tasks in the right order

As you transition your static artwork from an Illustrator file into the moving parts of a rich Internet application in Flash Catalyst, it becomes important to undertake tasks in a logical order. You may like to follow this approach and then adapt it based upon your own experiences:

• Convert all artwork to components throughout the design (use the show/hide feature in the Layers panel to show one part of the application user interface at a time).

• Create custom/generic components to define functional sub-sections of the application (for example, create a custom component for forms or standalone screens in the user interface).

  

  Figure 7. This form was converted to a custom/generic component within Flash Catalyst.

• Group remaining visual elements within a state into logical sets; this becomes helpful when defining transitions between states, as you can apply properties to groups of elements rather than to each individual assets (see Figure 8).

  

  Figure 8. Grouping elements makes controlling them via the Timeline more convenient.

• Create transitions between states within all custom/generic components and define interactions on items within the component that will cause the component state to change.

• Create application states one at a time, for each state:

  • Define the location, visibility and appearance for components
  • Use the timeline to specify transitions between the new state and existing states
  • Define interactions on items within the state that will cause the application state to change

Use optimized graphics

Complex vector graphics imported from Illustrator can be an unnecessary overhead and cause performance issues when rendering within Flash Player. If you have such graphics within your application user interface and there is no requirement for them to be altered programmatically at runtime, then you should use the Convert to Optimized Graphic option in Flash Catalyst (see Figure 9).

Figure 9. Use the Convert to Optimized Graphic option for complex vector graphics.

If you want to ensure that vector graphics are automatically optimized upon import to Flash Catalyst, you should define artwork as symbols in Illustrator.

Consider component reuse

When converting artwork into components in Flash Catalyst it is normal for the text you defined in Illustrator to specify the size allocated for the label in components such as Buttons, Checkboxes, and Radio Buttons. If you plan to reuse the component elsewhere, be sure to extend the size of the text field within the component to accommodate other labels (see Figure 10).

Figure 10. Adjust the label text field within a Radio Button component.

Define meaningful state names

The names that you give states within Flash Catalyst are used within the resulting application code and as such, it is worth agreeing with the development team upfront how these should be defined (see Figure 11).

Figure 11. Define state names using the Pages/States panel in Flash Catalyst.

In any case, state names should be representative of the task the user is undertaking at that point in time in the application, the page they are viewing, or otherwise meaningful in relation to the flow through the application.

Rename components in the Library

Just like state names, the names you give components in the library are used extensively throughout the application code and project structure. Consideration for and communication with the development team upfront regarding naming of components will help with the transition between interaction design and development (see Figure 12).

Figure 12. TextInputSm and TextInputMd will likely represent small and medium-sized text input components; the roles of RepeatedItem1 and RepeatedItem2, however, are less clear.

Use code view to spot optimizations

No, you don't have to be a code expert here, but there are a couple of things you could choose to keep an eye out for.

Firstly, you could identify the fonts used with any text and make sure that either they are standard system fonts (such as Arial) or fonts which you can embed as part of the application (which will increase the file size). If you use a non-standard font in just a couple of places, such as a logo or a heading, it might be better to go back to Illustrator and convert those to outlines.

Secondly, lengthy blocks of code containing path definitions, gradients, and strokes might be representing graphical assets imported from Illustrator that could be optimized in Flash Catalyst. Check for the name of the group containing the code and then, in Design view, find the group on the art board and select Convert to optimized graphic.

Remember that changes only apply to a single state

After you make changes to artwork in the application or in a component, you need to tell Flash Catalyst if you want that change to be applied across all states; if you don't, then the change will only apply to the current state. Right-click on the altered element and select Make Same in All Other States after making changes so as to apply them unilaterally (see Figure 13).

Figure 13. The Make Same in All Other States option ensures that any changes are applied across all component states.

Preview state transitions in the browser regularly

Although you can preview transitions defined using the Timeline in Flash Catalyst it is always best to check the accuracy of the end result and gauge real-world performance by running the application in the browser (use File > Run Project to do so).

Where to go from here

To discuss Flash Catalyst and contribute further hints and tips visit the Adobe Forums for Flash Catalyst. To learn to use Flash Catalyst, check out the resources and tutorials on Adobe Labs.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the author