Getting Photoshop layers into Flash

Converting a layered Photoshop file into pieces you can animate in Flash has traditionally meant exporting each layer as a bitmap, importing each bitmap, making each one into a symbol, cutting and pasting each symbol to its own layer, and rebuilding the layout. For a 20-layer PSD, that approach comes to 171 steps before you even start animating. Illustrator 10 cuts this process down dramatically.

[Of course, if you're serious about animating layered Photoshop artwork, you need to check out LiveMotion 2. It lets you drag in a PSD, convert layers and layer sets to objects, groups, or sequences, and even re-edit the whole PSD in Photoshop & automatically update the artwork inside LiveMotion. You can then integrate SWFs made with LiveMotion into your Flash SWFs using Load Movie. But back to the story at hand...]

  1. When you choose File->Open and point Illustrator at a PSD file, it will offer to flatten the image or to convert each layer to an Illustrator layer. Choose to convert layers to AI layers.
  2. Once each Photoshop layer is on its own Illustrator layer, you can treat it as you would any other placed image (make it into a symbol, scale or rotate it, combine it with vector artwork etc.).
  3. Choose File->Export, pick SWF from the format menu, and tell Illustrator to export AI layers as SWF frames or as separate SWFs. Unless I'm using symbols in this case, I find it easier to export layers as separate SWFs & avoid the task of moving each one to its own layer inside Flash.
  4. Pick a bitmap format. Illustrator will export bitmaps as PNG files in SWF & preserve their 8-bit transparency data. Since you can choose per-object compression in the export dialog box, I generally use Lossless compression, then optimize each bitmap inside the Flash library.
  5. Hit OK and import the SWF or SWFs into Flash.