How to Prepare Flash CS5 Artwork for Catalyst
In Adobe Flash Creative Suite 5, careful preparation of your design in Photoshop or Illustrator is key to getting good results in Catalyst — and not tearing your hair out in frustration! You may have to work a little differently than you’re used to so that Catalyst understands the design file.
Create unique objects
For Catalyst to recognize buttons and other objects, all the artwork that’s going to become a button or other component needs to be a unique object that is selectable. (Of course, you can use multiple objects, such as a rectangle and text.)
This is important in Photoshop or Illustrator, where it’s easy to ignore this principle. If you create a series of buttons, for example, by adding some text and some dividers over a background, then when you bring the file into Flash Catalyst, you have no unique objects to select. So, be sure that each button can be selected individually or as a group of objects making up that button.
Organize your layers
If you create your layers in Photoshop or Illustrator the same way that you plan to work with them in Catalyst, you’ll have a much easier time creating your project. The idea is to be able to toggle on the visibility of layers to reveal every page in the web site. The figure shows a set of layers in Photoshop that illustrate this principle. We recommend the following:
Create a folder for each page of your web site; and within each folder, place layers with the unique design for each page.
Create a folder as your top layer, which contains your navigation buttons and anything that doesn’t change from page to page, such as your logo. You may want to call this folder something descriptive, such as Navigation.
Assign your background layer a color that appears if you fade out or fade in a page. (Some of it may also appear if your pages don’t fully cover the background.)
Always label each layer as descriptively as possible, especially if you’re planning to work with a developer using Flash Builder. The developer may need to use the names of the layers in the code.
Add looks for button states
You can create the different looks for your button states (or states of other components) in several ways:
Stack your button states on individual layers in Photoshop or Illustrator and label the layers carefully to explain what they are. Then you can turn off the visibility of the layers to define the different states in Catalyst.
Add button states in Catalyst (rather than adding the looks in Photoshop or Illustrator), using glows, drop shadows, resizing, or more in Catalyst.
Export a button state from Photoshop or Illustrator as a PNG, JPG, or GIF file, and import it into the new state in Catalyst.