Home / Articles / Adobe Illustrator / Round Trip Between Illustrator/Photoshop and Flash Catalyst

Round Trip Between Illustrator/Photoshop and Flash Catalyst

Article Description

What’s easier than creating the content (look and feel) for your project in Illustrator and/or Photoshop, then bringing that directly into Flash Catalyst? Okay, if it was created for you, that would be easier… Brian Wood shows you how Flash Catalyst enables you to add interactivity to that content and export it in the correct format or hand it over to an Adobe Flex developer to add database integration, and much more.

Like this article? We recommend

Adobe Illustrator CS5 Classroom in a Book

Adobe Illustrator CS5 Classroom in a Book

$43.99 (Save 20%)

In this article, I want to show you how to work with native Illustrator and Photoshop content within Flash Catalyst. This is probably one of the fastest ways to get a jumpstart in the program. Adobe wanted to make it easy for those of us non-Flash users to either mock up the interface for a web application (wireframe) or create a really cool, interactive web piece for use on a website (see Figure 1).

Figure 1 Flash Catalyst example file.

This article will show you how to:

  • Create a new project from an Illustrator/Photoshop file
  • Edit Flash Catalyst content in Illustrator or Photoshop
  • Import Illustrator/Photoshop files into Flash Catalyst
  • Copy and paste between Illustrator/Photoshop and Flash Catalyst

Create a New Project from an Illustrator/Photoshop File

First off, if you plan on creating content in Illustrator or Photoshop for use in Flash Catalyst, here are a few things to keep in mind:

  • Content is measured in pixels in Flash Catalyst, so it’s best to set the units in Illustrator or Photoshop first, and think in those terms.
  • If you are creating the entire project in Illustrator or Photoshop, get the Artboard (Illustrator) or the Canvas (Photoshop) to match the Artboard size you want to use in Flash Catalyst before importing the content. You can usually resize content in Flash Catalyst, but it’s easier if you start that way.
  • The resolution of content in Flash Catalyst should be web resolution: 72 ppi. So, it’s best to create your Photoshop content at 72 ppi. In Illustrator, just measure in terms of pixels and remember that 72 pixels equals 1 inch.
  • If you are creating content for the web, remember that most web pages these days have a width of approximately 960 pixels (it varies a bit). If you are building the website and the Flash Catalyst content, it’s easy to control both. But, if you are handing off the project to someone else, make sure it fits in the area given.

Next, you will create a Flash Catalyst project file from an Illustrator file. Make sure that you create your content in Illustrator and/or Photoshop first.

  1. In Flash Catalyst, choose File > New Project From Design File.
  2. Select the Illustrator or Photoshop file, then click Open.

For an Illustrator File

If you are using an Illustrator file, in the Illustrator Import Options dialog box, the Artboard size and color should be filled out with the Illustrator Artboard dimensions. You can typically leave the Fidelity options at their default settings. For the Text, Gradients, and Blend options, the Automatic Conversion option, which is the default, determines whether to rasterize, flatten, or keep these settings as vector and editable. The option to import “non-visible” layers is up to you, of course. If they were hidden in Illustrator and this is selected (default), all layers will appear in the Layers panel in Flash Catalyst (see Figure 2).

Figure 2 The Illustrator Import Options dialog box.

One thing worth mentioning is that the following Illustrator filters are supported in Flash Catalyst; all other filters and effects are rasterized or expanded during import:

  • Drop Shadow
  • Inner Glow
  • Outer Glow
  • Gaussian Blur

For a Photoshop File

If you are using a Photoshop file, continue with these steps:

  1. In the Photoshop Import Options dialog box, the Artboard size and color should be filled out with the Photoshop canvas dimensions. The Fidelity options should be adjusted accordingly (see Figure 3).
  2. Figure 3 The Photoshop Import Options dialog box.

  3. Click the Advanced button in the Import Options dialog box. What’s great about importing content is that you can choose the layers to be brought in and what happens to the content on those layers as well in the Advanced options (see Figure 4).
  4. Figure 4 Click the Advanced options button.

  5. With the Advanced options showing in the Import Photoshop Document dialog box, click on a layer. To stop a layer from importing, deselect the checkmark to the left of the layer icon. With the layer name selected, the icon to the right of the name indicates what type of content is on that layer: text (T), vector, or bitmap (see Figure 5).
  6. Figure 5 The Advanced options for importing Photoshop content.

    With a layer selected in the dialog box, the options to the right allow the following (generally):

    • Text layer: editable text, vector shapes, or rasterized text
    • Vector content (like a shape layer): still editable (with certain layer styles) or rasterized.
    • Raster: image with certain layer styles intact, flattened raster image

    You can also select multiple layers (Shift-click or Cmd-click (Mac OS)/Ctrl-click (Windows)) and click the Merge Layers button to merge them together. This will typically convert the content to a merged bitmap image (see Figure 6).

    Figure 6 Merge layers.

    When you import a Photoshop file, Flash Catalyst rasterizes all Layer Effects for image, shape, and text layers. You can use the advanced import options in the dialog box to control import fidelity options for each layer.

    Here is a listing of things directly from the Flash Catalyst Help (Help > Flash Catalyst Help) to watch out for when you import or copy and paste Photoshop content into Flash Catalyst:

    • For text layers with effects or masks, use Vector Outlines or Flatten Bitmap Image.
    • For masks applied at the Layer Group level, use Flatten Bitmap Image.
    • For opacity changes at the Layer Group level, use Flatten Bitmap Image.
    • You can also import without flattening, and reset the opacity for the associated design layer in Flash Catalyst.
    • For blend modes applied at the Layer Group level, use Flatten Bitmap Image.
    • You can also import without flattening, group the corresponding layers, and then apply the blend mode to the new group in Flash Catalyst.
    • Adjustment Layers: Use Flatten Bitmap for any layers that sit below an Adjustment layer.
  7. Click OK.

Working with Layers

After the project file is created, look at the Layers panel on the right side of the workspace. Notice that the layer structure should resemble the layer structure in the originating application (Illustrator or Photoshop). Try moving content on the page with the Selection tool selected. Try editing text on the Artboard with the Type tool (see Figure 7).

Figure 7 The Layers panel in Flash Catalyst after importing content.

2. Edit Flash Catalyst Content in Illustrator or Photoshop | Next Section