Tips for integrating Photoshop and Flash

by Michael Ninness

Articles this issue

Part 1: Getting Adobe Photoshop layers into Flash

The first time you try to import a layered Photoshop file (PSD) into a Flash (FLA) document, you might be surprised at the results. Flash Professional 8 and all previous versions do not actually know what to do with PSD files. The only thing Flash can import is the flattened composite version of the file, and that only happens if QuickTime is installed on your machine. Fortunately, there are several workarounds you can use to get your Photoshop layers into Flash. Here are three of them:

Photoshop to PNG

Each layer in the PSD file needs to be exported from Photoshop as a separate PNG file to preserve transparency because saving the layers as JPEGs or GIFs will leave you with opaque white backgrounds. Each PNG then needs to be imported into Flash, converted to a symbol, and placed on a separate layer. You can automate this process with the File > Export > Layers as Files command in ImageReady CS2. When you are ready to import the series of PNGs you've exported into Flash, they will all come in as separate images but all in the same frame on the same layer. To get each image to appear on its own layer in the Flash timeline, choose Modify > Timeline > Distribute to Layers.

The one disappointment about this technique is that the resulting bounding boxes around your images are the size of the original Photoshop document, rather than just the smallest size possible to contain the actual pixels on a given layer. This will make selecting the images on the Stage very difficult.

ImageReady to SWF

Rather than exporting individual PNG files from Photoshop or ImageReady, you can also export a SWF file from ImageReady CS2. Choose File > Export > Macromedia Flash SWF. Most of the time, you want to leave the Preserve Appearance option unchecked. You will end up with a single SWF file that contains all your layers as individual images.

An advantage of this method is that Photoshop text layers can be converted as Flash text objects so that they remain vectors and can be edited in Flash. The drawback to this method is that while the bounding box issue described in the Photoshop to PNG method is resolved, the images come in with generic symbol names rather than retaining the names of the layers from Photoshop. You'll want to rename the symbols in the Library so they can be easily identified by name later.

PSD2FLA

This is an export plug-in for Photoshop that exports multilayered PSD files as an FLA file with all layers intact, with each Photoshop layer becoming a separate layer in the Flash timeline. Better yet, the layer names from Photoshop are retained for both the names of the generated images and their corresponding layers, and the bounding boxes are the correct size. The plug-in works with Photoshop 4.0 and later, and I highly recommend it if repurposing layered Photoshop mockups in Flash is something you do on a regular basis. (PSD2FLA costs $89 and is available from Media Lab.)

Part 2: Tips for working with pixel-based images in Flash

Don't resize images in Flash

Always bring your images into Flash at the actual size (pixel dimensions) you intend to use them at. Anytime you scale an image on the Flash Stage, it will be resampled and interpolated. Photoshop does a much better job than Flash when it comes to resampling. The only exception to this rule is when you are animating the scale of an image. Of course, in that scenario, it is always best to bring the image in from Photoshop at its largest size in the desired animation.

Resolution does not matter

Many web designers still believe that their web graphics must have a resolution of 72dpi. Turns out, resolution is only relevant when you print a graphic. When working with a graphic that will be displayed on a monitor of any kind, you only need to worry about pixel dimensions, not resolution. Don't believe me? Try this: Open the New Document dialog box in Photoshop and change the dimensions to 800 x 600 pixels. Then change the resolution from 72dpi to 600dpi. See how the file size does not change at all?

Use Bicubic Sharper

Most images you intend to use in your Flash project will need to be downsampled with the Image Size command in Photoshop. This dialog box is split into two parts: an "upstairs" for web designers and a "downstairs" for print designers. Notice what is not in the upstairs area? That's right, there is no Resolution field. If you can't select the width or height fields in the upstairs area, the Resample Image checkbox at the bottom of the dialog box is turned off. Turn it back on, and you'll now be using the Image Size command to resample an image instead of resizing it. As a reminder, Resample changes the number of pixels in an image (and the file size). Resize means you are simply changing the print dimensions and resolution without changing the actual number of pixels in the image. The default "resampling algorithm" in Photoshop is Bicubic. For better results, use Bicubic Sharper when downsampling an image. Bicubic tends to make images a bit soft whereas Bicubic Sharper preserves more of the original detail.

Stay on the pixel grid

Always use whole pixel values for the X and Y position of your images because sometimes you can end up with weird "pixel-shifting" in the exported SWF file if your images are not aligned to the pixel grid in Flash. You can force Flash to help you stick to the grid by choosing View > Snapping > Snap to Pixels. Choose this menu command before importing images into the Stage because it is not retroactive. That is, if an image is not on the pixel grid before you choose the Snap to Pixels command, Flash does not automatically shift the image back to the grid. You'll need to select the image and manually change the X and Y values in the Properties panel. Once this command is turned on, however, you can use the arrow keys on your keyboard to nudge images on the Stage in exactly one pixel increments and know that they will stay aligned to the pixel grid.

Part 3: Controlling bitmap optimization in Flash

Publish settings

By default, when you import a PNG file into Flash, it will not export the resulting SWF file as a PNG; it will export the SWF file as a JPEG instead. Because JPEG is a lossy-compression file format, the image quality will go down. The default JPEG quality setting used for all imported PNGs can be changed. Choose File > Publish Settings, select the Flash tab, and change the JPEG Quality slider. See the "Per-Object Compression" section at the end of this article for more information about controlling the optimization settings for each bitmap independently.

Import JPEGs for best results

Figure 1: Per-object compression

The JPEG optimization engine in Flash isn't quite as good as the Save for Web command in Photoshop. You will get much better and more predictable results by saving your images as JPEGs from Photoshop, ImageReady, or Fireworks instead. While that does mean more work for you, the good news is that a JPEG imported into Flash goes out in the resulting SWF file exactly as it came in. That is, an imported JPEG does not get recompressed when you publish to a SWF.

Per-object compression

You can always override how Flash optimizes imported bitmaps on a per-object basis (Fig. 1). To do so, simply double-click the image you want to change in the Library panel to open the Bitmap Properties dialog box. If you select a JPEG file, you can force it to recompress at a lower quality setting and thus reduce its file size further. If you select a PNG file, you can force it to export as a PNG so the quality does not change, or you can choose a JPEG quality other than the default setting specified in the Flash tab of the Publish Settings dialog box.

‹ Back

Michael Ninness is the executive director at lynda.com, and was previously the LiveMotion group product manager and a senior user interface designer for the Creative Suite at Adobe Systems Incorporated.