Articles

Ah, Flash. Hero to some, enemy to others. How shall we prepare assets for thee?

Everyone has their own way. Legions of designers still use Photoshop to make composites or mockups for Flash, much to the chagrin of production artists and developers everywhere, who often waste hours of time (and precious user bandwidth) trying to keep up with the pixel-based effects the designers inflict upon them. Macromedia Freehand is a natural vector-based solution, having very nice and immediate translations into Flash (with symbols and hyperlinks intact), but professional designers shy away from it. That leaves one major application that's well suited to preparing designs for use in Flash: Adobe Illustrator.

This is the tool I use. After much experimentation, I've found a pretty decent way to export objects from Illustrator CS for use in Flash MX 2004, which not only preserves colors, strokes, and all that jazz, but also retains the proper alignment and positioning of assets relative to one another. This is a major convenience for user interface designers, and a critical technique for character animators.

Pin-Registered Output: Preparation in Illustrator

Pin registration is a term used in silkscreening, animation, and film, allowing individual frames, cels, screens, or other elements will be properly aligned with one another. This is the core benefit of what I'm about to show.

This technique will show how to best set up an Illustrator file for export into Flash, and then how you can redistribute those exported elements onto individual layers for easy animation.

Shown to the left is an animated character made in Illustrator. Also shown is the Layers palette, which reveals how the character has been constructed. Notice how every possible piece that could be animated, moved, or independently addressed in Flash - legs, whiskers, body, and so forth - all lives on its own layer. What's more, in case this file needs to be shared, every single layer is named. Unfortunately, these labels will not get translated into Flash layer names, but it's a critical workflow habit to get into anyway.

This layering is central to this technique.

With all the character's body parts separated as objects on separate layers, we're ready to now export the pieces to Flash. We'll do this, naturally, with Illustrator's own File>Export... command.

Selecting SWF from the format options, we are presented with the Macromedia Flash (SWF) Format Options dialog, shown to the left.

Our goal is to have all the animatable objects exported independently of one another, yet all self-aligned with one another, so we don't have to physically re-arrange our character. For this reason, the Export As option is set to AI Layers to SWF Frames. This will take every layer in our file and export it as a single frames' worth of data in Flash.

Pressing the OK button, our SWF export happens lickety-split. This method is fantastic for rapid export; in over three years of using this technique, I've never had Illustrator throw an error. What's more, all colors are translated without AdobeCMS or ColorSync interference, and even transparency levels are preserved. Unfortunately, transfer modes do not translate, as Flash has no such concept.

Import and Massaging In Flash

In Flash MX 2004, then, it just takes a simple File>Import, or Cmd/Ctrl-R, to import the resulting SWF.

The image to the left shows how this appears in Flash when the import is complete. It's, um, a bit abstract...but all your elements are there. Remember, all the layers have been rendered as frames: in our example, 10 layers, so this results in 10 frames. Scrubbing through the timeline will show all the elements are indeed imported and intact.

Now, of course, we need to get all those frames onto new layers. To do this, we will use the Distribute to Layers command in Flash. This command is usually used for distributing multiple objects on one layer, but in this technique we're going to bounce each frame to a different layer for easy animation.

First, select the first frame in your imported sequence. Select Modify>Timeline>Distribute to Layers, or press Cmd/Ctrl-Shift-D, and you will notice that your first frame has just hopped down to a new layer, below the current one.

Next, return to that upper layer, select the second frame in your imported sequence. Distribute to Layers. Another layer below your original, but above the one you made in the previous step.

Select the next frame in your imported sequence. Distribute to Layers. And repeat this sequence for every frame in your imported sequence; using the key equivalent, Cmd/Ctrl-Shift-D, really helps to accelerate this process.

NOTE: Are you finding that doing this per frame is creating multiple layers when you Distribute to Layers? Just insert a Group key command (Ctrl/Cmd-G) when you select your next imported frame, and that group will be distributed properly.

Finalizing the Assets in Flash

The figure to the left is now what our Flash file looks like after this mass redistribution. We've got 10 new layers, and in our main stage, our illustration looks 100% identical with what we built in Illustrator. Only two steps remain before we start rigging our character for animation.

First of all, we've got a layer with empty keyfames; this is the original layer in which our Illustrator-created SWF was created. We'll delete that by selecting the layer and clicking on the trash can icon in the timeline. We'll also rename all the other layers to match our original Illustrator file for consistency.

And now we've got nine frames after our initial keyframes (as you can clearly see in the previous image). We'll clear those out as well (Shift-F5).

Now our character is ready to rig: continued nesting of movieclips, actionscripting, setting of new rotation centers, and so forth. After this comes animation and the fun part! Alas, that's another article for another day...

Until Flash MX understands layers within SWF's, or until Adobe improves Illustrator's SWF Export function, this is one of the faster ways I've found to export layered and aligned vector comps and designs into Flash. If you are a true Flash wizard, you may be able to do this in Flash quite comfortably, there are many of us who find Flash's object handling to be less forgiving than Illustrator's...and I hope this technique saves you some time and effort preparing vector art for Flash.