Hack 5 Animate Photoshop PSD Files with Flash

Import full Photoshop PSD files into Flash, then animate them.

This hack tells you how to re-create a Photoshop file with layers in Flash. We'll go through the details because they are instructive (and free!), but a third-party Photoshop plugin, called PSD2FLA (http://www.medialab.com/psd2fla) from Media Lab, simplifies the process considerably. Director developers will recognize Media Lab as the maker of PhotoCaster, the well-respected and popular Xtra that imports PSD files into Director.

Assuming you have QuickTime 4.0 or higher installed, you can import a PSD file directly into Flash. Flash will most likely tell you that it cannot import the file, but it gives you the option of trying to import via QuickTime. Clicking Yes to this prompt imports your image.

Flash's file import description for .psd files is Photoshop 2.5, 3 Image; however, when importing via QuickTime, Flash can handle .psd files from much more recent versions of Photoshop.

The trouble with importing files using the QuickTime option is that the imported file becomes flattened, preventing you from accessing the separate PSD layers, seen in Figure 1-22. Given that the only real reason to import a PSD (as opposed to web formats such as JPEG) is to access the embedded layer information; this limitation makes QuickTime import less than ideal.

Figure 1-22. A Photoshop image with layers

This hack shows how to import a PSD in such a way that you can efficiently rebuild it in Flash for animation, complete with a significant amount of the original PSD layer information.

Starting in Photoshop, crop/resize the PSD so that you have an image with dimensions that make it suitable for the Web (i.e., no larger than 500x500 pixels).

You will get much better results if you scale a Photoshop image down in steps. For example, reducing a 1000x1000 image to 900x900, then 800x800, and so on, all the way down to 500x500 will give you a better final image and offer more options when you compress it later.

The other reason to keep the image size down is that Flash is not designed to handle bitmaps in the way we are going to use it; Flash is better suited to vectors. We can hack around this by making sure that we don't ask Flash to change too much on the screen per frame, and keeping the bitmap sizes modest gives us a head start.

The next step is to reduce the number of layers as far as possible by combining (flattening) as many layers as you can. You will get good performance in Flash if you can get down to no more than five or six layers. Also, consider removing all text layers or any layers that can be reproduced in Flash (you can re-create these later in Flash using the Flash drawing tools).

I decided to remove all of the text except the main title (top left). This removed text can be replaced by sharper vector text when we rework the image in Flash. The main title was retained as-is because it has Photoshop text effects applied that cannot be easily reproduced with vectors.

Figure 1-23 shows the simplified version with the text removed.

Figure 1-23. A Photoshop image without the layers that can be reproduced in Flash

The next step involves exporting each layer as a PNG. For each layer in the Photoshop document:

Figure 1-24. A layer that is a candidate to be cropped

Figure 1-25. The cropped image is reduced substantially

Revert to the original PSD and leave Photoshop open (or take a screenshot of the image if you don't have enough memory to have both Flash and Photoshop open at the same time). You'll need to refer back to it later.

In Flash, set the Stage to the same size as the PSD, and import all the PNGs to the Library using FileImportImport to Library (in Flash MX 2004) or FileImport to Library (in Flash MX).

To animate your bitmaps effectively, you are best advised to make each into a movie clip (i.e., wrap each bitmap in a movie clip, because you can then use the methods and animation transitions available to movie clips):

When you have finished, you will end up with a series of bitmaps with transparent backgrounds, allowing you to position them on the Flash Stage in much the same way they appeared in the PSD original. Figure 1-26 shows the bitmaps in the Flash Library.

Figure 1-26. Importing bitmaps into the Flash Library

Manually place the movie clips on the timeline (or in another clip, depending on how you will be presenting them) in the same order and position that they appeared in the original PSD. You can emulate Photoshop layer effects (such as Darken, Multiply, and so on) using Flash color effects. Naturally, you can make adjustments if you want the Flash web version, shown in Figure 1-27, to be different from the Photoshop print version.

Figure 1-27. Re-creating the Photoshop composition in Flash

To finish your composition, you should optimize each bitmap separately by right-clicking (Windows) or -clicking (Mac) each bitmap in the Library and setting individual export settings. The settings for the best compromise between size and appearance are usually:

• Photo (JPEG)

• No smoothing

• A quality setting in the range of 30% to 50%

When setting the quality for each bitmap, bear in mind that your bitmaps are in a layered composition, and much of the noise introduced by high compression rates will be hidden by the layers and semitransparencies. You should look at the composition overall to judge how low you can go, in terms of quality. You may find that compression ratios of 20% or less look okay on some of the lower layers.

Flash allows you to export a bitmap with an alpha channel at the same time you apply JPEG compression!

You now have your starting point for animation. Each element in your composition can now be:

• Animated using tweens (by setting the Properties panel's Tween option to Motion)

• Given an instance name and animated dynamically using ActionScript

You can also add the missing text and vectors that the original had (or create new vector content for the Flash version).

As mentioned previously, Flash can get sluggish when animating bitmaps, although experience shows that you can get good results as long as you either animate only one layer at a time or keep the number of things changing between any two frames modest, in terms of size.

Final Thoughts

As long as the animations you want to create are not seriously processor-intensive or do not require a large image area (in which case you need to start thinking about Director), you can use the PSD-layers-to-PNGs-to-Flash route shown here. This route also has merit if you want to mock up a site using Photoshop visualizations or print-based assets. In that case, you might also consider PhotoWebber (http://www.photowebber.com) from the makers of PSD2FLA.

Experience with this technique also shows that the final SWF filesize can be remarkably low, considering the original filesize of the PSD. Typically, the size of the animated SWF version is of the same order of magnitude as a static, medium- to high-quality JPEG.