As developers who live and breathe Photoshop, we always hated how hard it was to move Photoshop assets into Flash, but Adobe Flash CS3 has seduced us and transformed hate into passionate love. Specifically, we’re head over heels about Flash’s new ability to import Photoshop files, keeping layer (and most other) info intact. And it works with Illustrator files, too! Our first test drive of this feature began when we used Photoshop to mock up a website design for a (fictitious) watch company called Time & Tide.

[This article was co-authored by Richard Harrington]

STEP 1 Open Background Images
Begin by opening two images in Photoshop CS3. Use the Move tool (V) to drag one image into the other. With the top layer active (surf in our example), click on the Add Layer Mask icon at the bottom of the Layers panel to add a mask, then choose the Gradient tool (G), and draw a black-to-white gradient on the mask so that the top layer fades into the bottom layer. Next, add a Hue/Saturation adjustment layer (click on the Create New Adjustment Layer icon and choose Hue/Saturation) to bring both images into the same color space.

CREDIT: ©PHOTOSPIN

STEP 2 Duplicate Adjustment Layer
Our goal is to bring the surf’s transparency data into Flash so we can animate it fading in over the burlap, but never completely covering it. But before we do that, we have to deal with the fact that adjustment layers don’t import into Flash, so select the Hue/Saturation adjustment layer and duplicate it (Command-J [PC: Ctrl-J]). Then, drag the duplicate to immediately above the bottom layer (burlap in our example) so that both layers have their own copy of the adjustment layer.

STEP 3 Merge the Adjustment Layers
Click on the top adjustment layer and merge it with the image layer below (Command-E [PC: Ctrl-E]). Do the same with the duplicated adjustment layer.

STEP 4 Import a Watch; Draw Separate Hands
Next, drag in a watch or clock image. Using Free Transform (Command-T [Ctrl-T]), skew it to add the illusion of perspective and add a drop shadow (click on the Add a Layer Style icon and choose Drop Shadow). Because we want to animate the hands spinning in Flash, paint out the actual hands and recreate vector hands (shape layers drawn with the Pen tool), with each hand on its own layer. Use the Ellipse tool to create a shape layer for the small black circle in the center. To keep things organized, place the hand layers in a group called “hands” (what else?).

CREDIT: ©PHOTOSPIN

STEP 5 Add Text Layers for Links
Now let’s use the Type tool (T) to add layers of text that we’ll later use for links in Flash. We added the links as text layers because it’s vital that these remain editable since our clients constantly change their minds (sound familiar?) about the linked-to pages. Place all of your text in a layer group called “links” and then place this group in a group called “text.”

STEP 6 Add Logo Layer with Outer Glow
Finally, add a couple more text layers to create a logo. With one of the text layers active (“Time ide” in our example), click on the Add a Layer Style icon at the bottom of the Layers panel and choose Outer Glow. When you’re done adjusting the settings to your liking, click OK. Go to File>Save As and save the file as a PSD somewhere on your hard drive.

STEP 7 Import File to Flash
Flipping over to Flash, import the file by choosing File>Import>Import to Stage and selecting the PSD from your hard drive. The new Flash Import dialog will open. You’ll see this same dialog when you import any PSD or AI file. It contains useful options for ensuring that each layer imports the way you want.

STEP 8 Select Import Options for Link Layers
Begin by selecting all the link text layers (click the top text layer in the links layer group and Shift-click the bottom text layer). Then, check the Editable Text option so that we’ll later be able to make edits using the Flash Text tool.

STEP 9 Import Logo Text Layers
For the logo text layer (“Time ide” in our example), choose the Flattened Bitmap Image option to maintain the outer-glow effect. (We did the same with the watch layer to preserve its drop shadow.) We chose to import the ampersand (&) layer as Vector Outlines to maintain a small file size and so that we could edit it later with the Flash Pen tool.

STEP 10 Import Hands as Vector Shapes
Knowing that we plan to animate the watch hands in Flash, choose one of the shape layers in the Import to Stage dialog and select the Editable Paths and Layer Styles option. This automatically saves the layer as a movie clip in the Flash library (you must do this for most tween animations in Flash). The Import to Stage dialog also lets us create Instance Names and even choose Registration points (the pivot point for rotations). Repeat for the other shape layers in the hands layer group.

STEP 11 Lossless or Lossy Compression
When selecting the import options for the image layer that contains the layer mask, choose Lossless for Compression—this is vital for maintaining the transparency and soft edge that we added in Photoshop. Lossless images are imported as PNGs, which support transparency. (Lossy images [the other option] import as JPEGs, which works fine for our other image layer that doesn’t contain any transparency.) Also, select the Bitmap Image with Editable Layer Styles option.

STEP 12 Importing Layer Transparency
It’s important that you select both of these options—Lossless compression and Bitmap Image with Editable Layer Styles—to import the layer transparency. If you don’t, you’ll get a really ugly, jagged edge (as shown here).

STEP 13 Set Stage Size
Finally, check the Set Stage Size to Same Size as Photoshop Canvas option. This will resize the Flash movie so that it fits your PSD dimensions exactly. The Place Layers at Original Position option (which we left checked) ensures that the layers stay where we placed them in Photoshop. If you uncheck this option, Flash will center all the layers.

STEP 14 Let the Flash Begin
Click OK to close the Import dialog, and as you can see, Flash maintains our layer stack, including the groups, which it magically transformed into layer folders. You can now use the motion tweening in Flash to animate the hands moving around and the background fading in. You can also change any of the text links (such as the word “email” to “contact”) using Flash’s Text tool.

Now we can all fall to the floor and thank Adobe for shaving hours off our work time.