Importing Illustrator layers into Flash

Flash allows you to import native Illustrator files, but since it supports only up to Illustrator 7 files reliably, you can't use this method to import transparency, symbols, soft-edged images, or other objects from later versions of Illustrator. Exporting a SWF from Illustrator will convert objects into Flash-friendly artwork more reliably, but when you import a SWF into Flash, the contents come in as a single layer regardless of whether it existed on multiple layers when it was created. So, how do you get the best of both worlds?

The short answer: export each layer as a separate SWF and import all SWFs into Flash simultaneously, paying attention to the order in which you add them to the import dialog box; or, export each layer as a SWF frame, then manually distribute each frame to a new layer. For the details on how & why to use either method, read on.

::> Option 1: Export Illustrator layers as frames

You can export a SWF from Illustrator either by choosing File->Export and selecting SWF in the popup menu, or by choosing File->Save for Web and designating one or more slices as SWF. The File->Export method gives more control over bitmap compression options; the Save for Web method lets you mix SWFs and bitmap formats in a sliced HTML layout.

Using either method you can export Illustrator layers as SWF frames:


Now each layer of your AI file will be stored as a separate frame of a SWF. This option was designed to facilitate making simple flipbook animations in Illustrator, but here it will enable you to move imported layer contents to separate Flash layers. To do so:
  • In Flash 5, click the new layer button beneath the timeline window to make a new layer for each frame. Then drag each frame onto frame 1 of its own layer.
  • In Flash MX, you can use this same technique, or you can select each frame, then choose Modify->Distribute to Layers (Shift-Cmd-D (Mac)/Shift-Ctrl-D (Win)) for each frame. It will save you the step of creating layers by hand, but the automatic layer naming may or may not agree with you.

::> Option 2: Export Illustrator layers as separate SWFs

You can also use File->Export to turn each Illustrator layer into a separate SWF. The main advantage with this approach is that if you import all SWFs simultaneously, Flash will put each on its own layer, effectively recreating your Illustrator layer stack. The main disadvantage is that if you're using symbols in Illustrator, a symbol used across multiple layers will be imported into the Flash library repeatedly. Flash is sometimes but not always clever enough to export the symbol just once when it creates a SWF, but the task of scripting or editing imported symbols is made more difficult. If you discover that your symbol artwork is being exported repeatedly from Flash, or if the extra symbols bug you, you could always do the following:

  1. Dive into one of the imported symbols.
  2. Convert the contents of one symbol into a new nested symbol & copy it to the clipboard.
  3. Replace the contents of other symbols with an instance of that new symbol by double-clicking each one in the library, selecting and deleting the contents, and pasting in place the new symbol.
  4. Select all instances on the artboard (Cmd-A/Ctrl-A).
  5. Break them apart (Cmd-B/Ctrl-B) to get rid of the top level of extra symbols.
  6. In the library, choose Select All Unused and delete the extra symbols.

The behavior of Flash's Import dialog differs across operating systems and from version to version of Flash in ways that can affect the stacking order of layers.

  • In Flash 5 on Mac OS 9, the stacking order of SWFs is determined by the order in which you add them to the Import dialog box (first SWF added is placed highest in the stacking order, second added is second hightest, etc.). Since Illustrator numbers the exported SWFs from bottom to top, you'll want to add the lowest numbered SWF first and add the rest in succession.
  • In Flash MX on Mac OS X, stacking order is determined by the alphabetical order of the SWFs. The first SWF in order is placed at the bottom of the stacking order, meaning that the order of your Illustrator doc should be preserved.
  • I have yet to investigate whether the sequence in which you add SWFs to the importer matters on Windows. If you discover something interesting, please let me know.