Best practices for using Photoshop with Flash Catalyst

Additional required other products (third-party/labs/open source)

• Photoshop FXG Plug-in
  

Introduction

The workflows made possible by Adobe Flash Catalyst and Adobe Photoshop are beneficial to designers as well as developers. When working with Flash Catalyst to apply Photoshop designs to Flex applications, you can maximize the advantages of these workflows by preparing your Photoshop documents beforehand for use in Flash Catalyst. In this article I provide several tips to help make your work with Photoshop and Flash Catalyst more efficient. I cover potential pitfalls to watch out for with importing Photoshop files into Flash Catalyst and I provide pointers on how to ensure that your Photoshop designs translate well to MXML. Finally, I review several different workflow approaches for working with Photoshop files. Because there is no single workflow that works perfectly for every project, I describe a number of different approaches that I have used in my everyday work so you can pick one that works for you. The tips I cover in this article will help you maximize productivity in your Photoshop and Flash Catalyst workflows.

The organization of your Photoshop PSD file affects how quickly and easily you’ll be able to work with the content once it’s imported into Flash Catalyst. If you don’t pay attention to detail when you organize the PSD, it will lead to many difficulties that could easily have been avoided.

File preparation is the phase of the workflow in which I usually spend the most time, because I know that it will ultimately pay off when I get the PSD into Flash Catalyst. Unfortunately, this is typically the phase in which most Photoshop designers expend the least amount of effort because Flash Catalyst is a new tool and most designers are, as yet, unaccustomed to preparing files for Flash Catalyst.

Naming layers                     

Naming your layers and organizing them cleanly is a key to working efficiently later in Flash Catalyst. With well thought out layer names and hierarchies you will be able to navigate the artwork that you create in Photoshop inside of Flash Catalyst quickly. For example, you’ll be able to rapidly create your skins by simply right-clicking the appropriate folder names and transforming the artwork into skins for the appropriate component type.

Consider the example shown in Figure 1. Because the layers are named appropriately I know that the LoginComponent folder contains all the artwork that makes up the custom Spark component LoginComponent, so I can right-click the layer and turn the artwork into a component.

Inside the LoginComponent folder I see a folder named LoginButton. Just by looking at the name, I can confidently right-click on that layer and turn that set of artwork into a Button component.

Learn the component states

If you are a designer who is designing for a Flex application, take some time to learn the component states. When you know that a Flex Button component has an up, down, over, and disabled state, for example, you can design appropriately for all of the various interactions a user will have with a Button component (see Figure 2). Moreover, it will help you create more meaningful names for your artwork in your Photoshop files.

Using the component states as layer folder names in Photoshop makes working with the design in Flash Catalyst a breeze. Once you’ve turned the artwork into a Button component you can quickly edit the component states and turn on the visibility of the layer folder that should be visible for each of the skin’s corresponding states (see Figure 3).

Use Smart Objects

Photoshop has numerous effects that you can apply to your artwork. Some effects translate to Flash Catalyst without any problems; others do not. This can cause problems with your Photoshop imports, sometimes making a large rectangle appear over your design after you import it into Flash Catalyst (see Figure 4).

You can avoid this by turning all masked layers into Smart Objects. Smart Objects are layers that contain image data from raster or vector images. They preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.

Clean layer fragments

Lingering layer fragments must also be cleaned up in the PSD file before importing it into Flash Catalyst. Layer fragments is a term I use to describe the composition of several layers to constitute a single design entity. Often a digital artist will create a rectangle representing an area of the design; to enhance the appearance of the rectangle several layers are added with overlaid colors, effects, or additional artwork that creates the desired final look for that portion of the design. It is important to convert all layer fragments that constitute a single design element into a Smart Object. This way the design element will import into Flash Catalyst as a single BitmapImage component, as opposed to several separate BitmapImage components, which will require more memory and adversely affect the performance of your component skin.

If you are confident that portion of the design will not be updated again, you can merge layers to remove the layer fragments. If it will likely be updated at some time, then it’s better to convert these layers to a Smart Object as well.

Layers that are not needed should just be deleted altogether. Optimizing your use of layers will reduce the amount of MXML that is generated on import by Flash Catalyst. This will result in MXML skins that perform better and are easier to read and navigate.

The import wizard for PSD files simplifies the process of converting your PSD file into Flex 4 skins. It includes self-explanatory options for handling layers during the import operation. Once you have completed the import, you will immediately see if the PSD file was imported accurately by how similar it is to the Photoshop version of the design.

As noted above, layer masks that were not turned into Smart Objects will cause a large rectangle in the color of the intended masked area to appear over the entire design. This is a fairly common and easily correctible issue.

Using Color Overlay effects in Photoshop designs to change the color of text (rather than using the font’s color property) can also cause problems. The Color Overlay and Gradient Overlay effects do not translate to Flex 4 skins, so it’s a good idea to inspect any parts of your imported design that may include them to make sure it all imported appropriately.

Importing is the beginning of the skinning phase. You will also need to handle updates to the design during and after the skins have been implemented. This section covers two methods for handling design updates.

One way Street

The one way street method has been available since the release of Flash Catalyst CS5. In this approach every time the Photoshop file is updated, the PSD has to be reimported into Flash Catalyst to recreate the skin with the new updates. This requires that you create a new FXP file each time so the work that you do to convert the rest of the artwork to Flex components is not lost. Give the FXP file a descriptive name so that you can easily determine which changes the file addresses.

In this approach, layer naming is very important because it makes navigating the artwork to create the MXML for the skin easier. When the artwork for a button’s over state artwork is updated, a production designer can quickly find the button layer and recreate it as a Flex Button component.

Managing updates in this part of the workflow is not as efficient as it can be with Flash Catalyst CS5.5. In Flash Catalyst CS5, the designer can go into Code view, copy the MXML skin code for the updated Button, and paste it into an issue tracking system, or save the FXP file and share it with a developer, who can extract the required updated code. This approach works but it is not very efficient.

Round-tripping

In Flash Catalyst CS5.5 the workflow between developers and designers has been greatly improved. From Flash Builder CS5.5 you can open your Flex project in Flash Catalyst CS5.5 using the Edit In Flash Catalyst feature. Then in Flash Catalyst CS5.5, you can use Edit In Photoshop to edit design elements directly in Photoshop CS5.5! These improvements in the workflow make the process more seamless.

This approach is ideal for those developers who are working directly in all aspects of the project: code, design, and design production. However this workflow is not as ideal when working in a team that has developers, designers, and design production artists. When working in teams, the best approach is to use a Flex Library Project for creating the code for your Spark based view components. Flash Builder CS5.5 includes a new option when creating a Flex Library Project to make the library Flash Catalyst compatible (see Figure 5).

The Flex Library Project is where you develop SkinnableComponent subclasses to create custom Spark components that can then be skinned using Flash Catalyst CS5.5 (see Figure 6).

After setting up the components in the Flex Library Project, you can export them as an FXPL file by right-clicking the project folder in the Flash Builder Package Explorer and selecting Export (see Figure 7).

The FXPL file can then be used to skin the custom components of an application. At this point you can import the PSD file into Flash Catalyst CS5.5 as usual. However, before starting to turn artwork into components, you’ll want to import the FXPL file so that the custom application components are available for skinning. Choose File > Import > Library Package (.fxpl) in Flash Catalyst (see Figure 8).

When you import the FXPL file, Flash Catalyst CS5.5 adds a Skinnable Component option to the existing Convert Artwork To Component options (see Figure 9).

After selecting Skinnable Component, you use the Select Skinnable Component dialog box to choose one of the custom components that are available in the FXPL file. In Figure 10, only a single component named LoginComponent has been created.

Flash Catalyst CS5.5 will not only recognize the custom component in the FXPL file, it will also recognize its required component parts and set up the states that the component requires (see Figure 11). You can immediately start to assign skin parts and create transitions just like you can with native Spark components. This is a particularly useful feature and it’s the best way to handle skins for Flex projects in Flash Catalyst CS5.5.

Where to go from here

Flash Catalyst CS5.5 builds on the Flash Platform’s track record of great presentation layer tools by enabling designers to focus on form over function while empowering developers to focus on function over form. This freedom allows developers and designers to work together in ways not possible before.

With a better understanding of how to prepare your Photoshop files to take full advantage of the benefits of Flash Catalyst, your project workflow will be more efficient, particularly if you manage updates to designs using FXPL files and the new round-tripping features in Flash Catalyst CS5.5.

For more information on Flash Catalyst see the following resources:

• Adobe TV Flash Catalyst Channel
• FlashCats.net – Flash Catalyst Tips n’ Tricks
• Rich Media Institute – Flash Catalyst Online Lessons with Tom Green