Posted on 02.26.10

Migrating Graphics from Illustrator to Flash

by Joy Burke

We often times find ourselves at a loss for what to do when working with a program we know inside and out and love deeply, but have to blend it with another program that’s as confusing to us as the opposite sex. It’s at times like these, however, that working with people who specialize in various programs makes life (or at least the work part of life) so much easier. Such was the case when Travis, audio and video guru, and Joy, Illustrator-loving pixel princess, put their minds together to figure out a simple animation task. This series of posts is for all of you frustrated Flash-lovers who would like a bit of advice about transitioning from Illustrator to Flash.

We often times find ourselves at a loss for what to do when working with a program we know inside and out and love deeply, but have to blend it with another program that’s as confusing to us as the opposite sex. It’s at times like these, however, that working with people who specialize in various programs makes life (or at least the work part of life) so much easier. Such was the case when Travis, audio and video guru, and Joy, Illustrator-loving pixel princess, put their minds together to figure out a simple animation task. This series of posts is for all of you frustrated Flash-lovers who would like a bit of advice about transitioning from Illustrator to Flash.

This first post will walk you through taking a complex illustration from Illustrator that extends outside the artboard into Flash, where everything needs to fit within the frame of the animation. The reason this is more useful than simply breaking apart the vector images in Flash is because the vector image, when broken apart in Flash, becomes a bitmap and therefore greatly decreases its editability. Instead, this tutorial will show you how to break the shape apart first in Illustrator so that you can then bring it (still as a vector image) into Flash. See the before and after pictures of the shape in Flash below here.

First, start with a series of complex or overlapping shapes. These can include any vector shape with a fill or stroke or both. For the sake of making things simpler, I’ve made just one simple path that extends over the artboard in Illustrator. See image below.

You’ll see that I’ve got the Pathfinder window open as well. You can go to Window from the main menu bar and then down to Pathfinder to open that palette. Next, draw a simple rectangle (color doesn’t matter) and place it over the area of the shape that extends beyond the artboard (the part of the shape you want to “cut off). Refer to the blue rectangle below.

Next, select both paths by using the black arrow tool and dragging it over both shapes. Then, simply click the button shown being moused over in the image below. It’s the second button from the left under Shape Modes, and it’s referred to as Minus Front. This subtracts the shape on top including whatever part it’s covering of the shape below it.

The result is your perfectly-trimmed shape, ready for Flash. Voila!