Round Trip Between Illustrator/Photoshop and Flash Catalyst
- Create a New Project from an Illustrator/Photoshop File
- Edit Flash Catalyst Content in Illustrator or Photoshop
- Import Illustrator or Photoshop Files into Flash Catalyst
- Copy and Paste from Illustrator or Photoshop into Flash Catalyst
- For More Information
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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).
){kind=small}
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.
- In Flash Catalyst, choose File > New Project From Design File.
- 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:
- 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).
- 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).
- 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).
- 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
- 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.
- Click OK.
)
Figure 3 The Photoshop Import Options dialog box.
)
Figure 4 Click the Advanced options button.
)
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):
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:
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.