30 April 2010

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

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

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.

Use layers to define application and component states

Each art board that you define in Illustrator will be imported as a separate state in Flash Catalyst—this is ideal if you want to bring across designs that don't share visual assets across each "page" of your application. If you specifically want to share artwork across multiple states of your application or you are defining artwork for different component states, then you should work with a single art board and use layers to specify different states (see Figure 2).

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 want 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 may want 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.

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.

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

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

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.

Using Photoshop

When using Photoshop, there are a few best practices that you can use to ensure easy migration from Photoshop to Flash Catalyst.

First, when creating graphics in Photoshop, consider how you will work with the graphics in Flash Catalyst. All of the layers are imported as distinct layers in Flash Catalyst, meaning that filters, masks, and other items will convert over individually. If you know that objects are going to be used as a single design object in Flash Catalyst, consider merging the layers for that object to avoid having extensive layers that can make it difficult to manage when applying transitions or animations to your design.

In addition, Photoshop has a feature known as Layer Comps where you can capture the design of a specific setting of layer visibility. By default, Flash Catalyst doesn't import layer comps from Photoshop; however if you open the Advanced options in Flash Catalyst, you can import a specific layer comp from your Photoshop file.

Just like when working in Illustrator, make sure that you have your layers named appropriately in Photoshop. Also, use layer groups to help organize your designs into logical sections in your Layers panel. This will make it easier to work with the designs in Flash Catalyst.

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).
  • 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).
    • 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 Optimize Vector Graphics option in Flash Catalyst (see Figure 9).

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

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

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

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

    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 in the Flash Catalyst Developer Center.