PSD2FLA An Exciting Plug-In For Flash Users

Media Lab’s PSD2FLA plug-in will create a Flash file out of your best Photoshop files. There are some limitations, but it’s a great investment for creative Flash designers.

One thing that has often struck me about Flash and designing with Flash is that the application has never been well-equipped for bitmap-based motion graphics, even though a lot of the most creative Flash movies and motion graphics on the internet today use bitmap graphics. In my early days of designing for Flash I used a lot of bitmaps, because that’s what I was comfortable with (I’ve always been more attuned to Photoshop and bitmaps than Illustrator and vectors) and the really slick effects like drop shadows and glows were bitmap-based. I’ve since developed my vector skills and feel comfortable with Flash, but there’s still nothing quite like shadows and highlights to create depth and contrast, and with the hard edges of vectors it’s not as intuitive to do that with those drawing tools.

With version 8, Flash has a lot more features for bitmap graphics. New built-in filters create drop shadows, glows and bevels, very similar to Photoshop’s layer effects. Blend modes similar to Photoshop’s layer modes allow for compositing symbol instances, which is a real benefit. These are exciting developments, and it’s time to begin thinking of Flash design based on bitmap images as much as vector drawings. This is where PSD2FLA comes in, a neat plug-in that exports Photoshop (.psd) files as editable Flash files (.fla, not the uneditable .swf). I’ve been working with the plug-in on a variety of images and test situations and, while it doesn’t succeed at everything, it does a lot of things well and is an exciting addition to any web designer’s toolbox.

HOW PSD2FLA WORKS

Ironically, even though Flash uses a lot of vector graphics, PSD2FLA is incapable of outputting vectors of any kind. This is a disappointment for Photoshop users who have text layers or shape layers in their images; those elements will have to be added within Flash. PSD2FLA converts each layer of a Photoshop file (.psd, RGB color mode) into a Flash layer containing a transparent PNG. The PNG images do a great job of retaining the look of the original Photoshop layers; in all my tests, I didn’t see an instance where my Flash layers together looked different than my Photoshop layers. Figure 1 is a detail of a Photoshop image and its equivalent Flash file—can you see any flaws?

Figure 1: The original Photoshop image is on the left. Colors have shifted, probably due to differences in color management, but the layers are composited the same in both.

Using PSD2FLA is very easy: select File –> Export –> PSD2FLA… with your Photoshop file open, and a pop-up window (Figure 2) appears. The interface is so simple that you’ll almost never need to check the settings: just click “OK” and, if desired, PSD2FLA will create the Flash file and open it in that application.

Figure 2: The PSD2FLA interface: clean and spartan.

One more note about PSD2FLA’s capabilities: if you fill your Background layer in Photoshop with a flat color, PSD2FLA will use that color as the background of your Flash movie. It’s not like drawing vectors, but it’s not bitmap art either.

COMPLEXITY IS NOT A FACTOR

PSD2FLA impressed me with its ability to create Flash files of very high complexity; it does equally well with a two-layer or a twenty-two-layer Photoshop file, and can output a complex Flash file as easily as a simple one. One thing I did learn, however, is to be careful with Photoshop features that Flash does not support. Layer blending modes, adjustment layers and other globally-changing layer elements are either unsupported in Flash, uninterpreted or misinterpreted by PSD2FLA, and can deliver unpredictable results (see Figure 3). However, in most animation situations adjustment layers and other global moves aren’t necessary or can be avoided, so this is only a minor detail.

Figure 3: This image was converted into a brown mess by PSD2FLA, due to an adjustment layer and two blending layers.

SHORTCOMINGS WITH LAYER EFFECTS

Figure 4: This text layer converted well, but the layer effect lost its luster.

Earlier I mentioned that PSD2FLA outputs everything as transparent PNGs, including vectors such as text. Figure 4 is an example of some text in Photoshop that was converted into a bitmap. There is a double whammy going on here however: the Outer Glow layer effect that was applied to the type layer has lost its punch. Because Media Lab had no access to Adobe’s code for layer effects, PSD2FLA sometimes falls short in recreating them within Flash.

Figure 5: My test for converting layer effects. These are the original Photoshop effects.

Figure 5 is a quick test I did to try out PSD2FLA in various layer effect situations. The effects are as follows:

• a. Drop Shadow
• b. Inner Shadow
• c. Outer Glow
• d. Inner Glow
• e. Bevel and Emboss
• f. Satin
• g. Pattern Overlay
• h. Stroke

Figure 6 displays PSD2FLA’s results in Flash:

Figure 6: The same effects after being converted by PSD2FLA.

PSD2FLA did pretty well. I found alterations to just the Inner Shadow and Bevel and Emboss effects. Strangely, Outer Glow came out fine in the test though it did not in my real-world test with the text layer.

Tom Summerall, President of Media Lab, offered this workaround. It works by converting the layer with effects into a regularly rendered layer:

Step 1: Create a new layer below the layer with the effect.
Step 2: Merge the two layers with Layer –> Merge Layers or Layer –> Merge Down (both Cmd-E/Ctrl-E)

You will also achieve the same effect by selecting Layer –> Layer Style –> Create Layer, which puts the effect on its own layer, and then merging those two. However, in some cases effects change appearance when they are removed from the original layer.

THE FUTURE OF PSD2FLA

The landscape of digital imaging and web design is going to change in a hurry, now that Adobe has acquired Macromedia. Not only that, but Macromedia was able to produce Studio 8 before its demise, and Flash 8 has those bitmap-based effects and blending modes that PSD2FLA could exploit in a future release that could make the transition from Photoshop to Flash seamless. That fact has not been lost on Media Lab. But it’s likely that a future Adobe release of Photoshop will have some integration of Flash, in which case it’s hard to judge if PSD2FLA will be viable in the future.

But in the present, PSD2FLA is a very attractive plug-in: what it does, it does well. It’s easy to install and use, is robust enough to tackle Photoshop files both large and small, and does all anyone needs for recompositing Photoshop layers in Flash. I wish that the plug-in could retain vectors—it’s surprising considering Flash is vector-based—and some layer effects don’t translate perfectly, but this plug-in is a smart investment considering the price, the capabilities and what it can do for Flash designers.

Great

PSD2FLA
Pros: Easy to use. Very robust solution for converting Photoshop to Flash.
Cons: No support for vectors. Some layer effects do not convert exactly.
Media Lab, Inc.
800-282-5361
Mac (Photoshop 7.0 and later) / Windows (Photoshop 4.0 and later)
$89 / $188 with SiteGrinder / $249 with PhotoCaster