19/04/10 Adobe Flash Catalyst best practices | …

Adobe Flash Catalyst best practices

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).

adobe.com/…/flash_catalyst_best_pra… 1/8
19/04/10 Adobe Flash Catalyst best practices | …

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.

adobe.com/…/flash_catalyst_best_pra… 2/8
19/04/10 Adobe Flash Catalyst best practices | …

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
adobe.com/…/flash_catalyst_best_pra… 3/8
19/04/10 Adobe Flash Catalyst best practices | …
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

adobe.com/…/flash_catalyst_best_pra… 4/8
19/04/10 Adobe Flash Catalyst best practices | …
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
adobe.com/…/flash_catalyst_best_pra… 5/8
19/04/10 Adobe Flash Catalyst best practices | …
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).

adobe.com/…/flash_catalyst_best_pra… 6/8
19/04/10 Adobe Flash Catalyst best practices | …

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
(www.adobe.comhttp://forums.adobe.com/community/labs/flashcatalyst/) . To learn to use Flash Catalyst, check out
the resources and tutorials (www.adobe.comhttp://labs.adobe.com/technologies/flashcatalyst/tutorials/) on Adobe
Labs.

(www.adobe.comhttp://creativecommons.org/licenses/by-nc-sa/3.0/)
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alik e 3.0 Unported License
(www.adobe.comhttp://creativecommons.org/licenses/by-nc-sa/3.0/)

About the author

Andrew Shorten is a Senior Product Manager for Flash Builder in Adobe and is passionate about improving the
quality, richness, and value of computer-based experiences. Andrew used to develop web, k iosk , and mobile user
interfaces for government and enterprise customers while work ing at Fujitsu. He has since work ed for Macromedia,
Microsoft, and Adobe, where he has engaged with designers, developers, web agencies, and organizations to help
them deliver rich, engaging, and successful web and desk top experiences.

adobe.com/…/flash_catalyst_best_pra… 7/8
19/04/10 Adobe Flash Catalyst best practices | …

Copyright © 2010 Adobe Systems Incorporated. All rights reserved (www.adobe.com/go/gftray_all_rights_reserved) .

(www.adobe.com/go/gftray_f

adobe.com/…/flash_catalyst_best_pra… 8/8