Handlin’ Photoshop and Illustrator Content in Flash

One of the coolest aspects of CS3 is the integration found between the suite’s applications. Adobe’s gone to great lengths to ensure that all the products work very well together - especially the former Macromedia products makin’ nice with Photoshop, Illustrator, and InDesign.

Well in this article, we’ll take a look at how things work across Photoshop, Illustrator, and Flash—specifically, some features and techniques for getting rasterized Photoshop content and vector Illustrator content into your Flash movies.

We’ll start by having a look at handling Photoshop content in Flash; then we’ll see about getting Illustrator and Flash to work together. So without further delay, let’s check it out!

Revvin’ Up With Photoshop!

So did you even know you could import Photoshop files into Flash—fully layered Photoshop files that is? This is awesome when you’re using Photoshop to create interfaces, layouts, and layout components. Of course, since Photoshop and Flash are now together in the CS3 suite, they work like magic together.

All the effects and layouts you’ve labored to create in Photoshop should come across into Flash, and that includes things like layers, editable type, color spaces, and even a handful of blending modes. Specifically, Flash will preserve Normal, Darken, Multiply, Lighten, Screen, Hard Light, Difference, and Overlay. If you’re using a blending mode that doesn’t make the list, you can either remove the effect or rasterize the layer. Sound good? Let’s give ‘er a try.

Here’s how to get things happening:

1. In Flash, choose File > Import > Import To Stage.

2. In the dialog that appears, navigate to and select the layered Photoshop file that you’d like to import, then click Import.
Even if your Photoshop file is CMYK, import it anyway—Flash will handle the conversion for you. However, if your color between Flash and Photoshop looks way too inconsistent, try converting everything to RGB in Photoshop first, then import your goods into Flash.

When you select the Photoshop file that you want to import, Flash will display an Import dialog where you can set options that determine how the Photoshop file will be brought into your Flash movie.

3. Inside the Import dialog, set the Import options that you’d like to use.

This dialog provides a lot of options, so let's take a closer look. First off, the large area on the left lists the layers within the Photoshop file that you’re importing. Using the checkboxes beside the layer thumbnails, check and uncheck which layers you’d like to import into your movie.

Highlighting an individual layer will present you with a range of options on the dialog’s right side. If your selected layer is a plain old Photoshop layer, you’ll be given options to bring in the layer with fully editable layer styles, as a flat graphic, or as a movie clip symbol. Further, you’ll see some compression options towards the bottom. If your highlighted layer contains editable text, you’ll be given additional options to import the text as fully editable text, vector outlines, or as a flat image.

At the bottom of the dialog, use the Convert Layers To menu to bring your Photoshop layers in as layers or keyframes in your Flash movie. Below the Convert Layers To menu, you can choose to position your layers as they were back in Photoshop, and set Flash’s Stage size to match the dimensions of your Photoshop file. As you can see, there’s some pretty powerful stuff in here.

4. When you’re ready, click on OK.

The Photoshop file imports into Flash using the settings you’ve specified in the Import dialog. For example, if you chose to import the Photoshop layers as Flash layers, you’ll see them appear in the Timeline at the top. Also, you’ll see a folder in the Library panel that, when double-clicked, reveals your layers as individual objects.

Pretty awesome, huh? Definitely spend some time experimenting and fiddling around to really get a feel for how this works. Also, be sure to check out Flash’s PSD File Importer preferences for a few handy options. Choose Edit > Preferences (Windows) or Flash > Preferences (Mac); then choose PSD File Importer from the category list on the left. Go nuts, and have fun importing those fully editable Photoshop files!

Now, with Photoshop and Flash integration outta the way, it’s time to have a look at working with Illustrator and Flash. Let’s get started!

Hit The Ground Running With Illustrator!

Flash and Illustrator CS3 are sorta kindred souls, as they’re both vector-based creation tools. Call it a match made in CS3 heaven. Aside from all the mushy stuff, know this: A new set of features in Flash CS3 is the ability to better handle imported Illustrator content, which is a godsend for designers who do a lot of prep work in Illustrator before dumping it all over into Flash. In previous versions, getting Flash and Illustrator to work well together was a pain at best, but CS3 makes this process a whole heckuva lot smoother.

Unlike previous versions, Flash CS3 now recognizes Illustrator layers and symbols, which makes the task of bringing in an Illustrator layout all the more easier. As a matter of fact, Flash can even detect symbol types, which itself is a new feature in Illustrator CS3.

To begin, make sure that you have an Illustrator layout handy that you can use—throw in a few layers so you can see how this’ll work. If you wanna create some text, symbols, and other junk in Illustrator, go ahead, I’ll wait for you. And I’d suggest you set your Illustrator file’s color mode to RGB, too.

OK, we’re ready to import some Illustrator content directly into Flash. You’ll see that when you do this, Flash will present you with a dialog similar to the one you saw when importing Photoshop files, which includes a pile of options to make the whole process nice ‘n easy—and they let you do some pretty powerful things too, like preserve layer editability and so on.

Ready to import some Illustrator content? Try this:

1. In Flash, choose File > Import > Import To Stage.
2. In the dialog that appears, navigate to the Illustrator file you’d like to import; select it; then click Import.
3. In the Import dialog, set the Import options you want.

Just as you saw when importing Photoshop files, Flash will give you an Import dialog, where you can set options to determine how the Illustrator file will be brought into your Flash movie. The large window on the left lists all the layers and sublayers contained in the Illustrator file you’re importing. Not sure what sublayers are? It’s an Illustrator thing—they’re layers inside other layers.

Now, you can do a few cool things here. First, you can check and uncheck which layers and sublayers you want to import into Flash. Pretty slick. Even better, selecting any layer or sublayer will present some additional options on the right side of the dialog. If you select a full Illustrator layer, you can choose either Import As Bitmap or Create Movie Clip. If you select an Illustrator sublayer that contains normal objects, you’ll get the option to import the sublayer as an editable path—that is, they’ll be fully editable in Flash (cuz both Flash and Illustrator are vector drawing tools, right?). Lastly, if you have a sublayer that contains text, you’ll be given options for importing the text as editable text or vector outlines.

Next, from the Convert Layers To menu, you can set how you’d like Flash to handle your Illustrator layers. For example, you can convert the Illustrator layers directly to Flash layers, convert them to keyframes, or flatten them into a single layer in your Flash file.

The remaining options below the Convert Layers To menu should be fairly self-explanatory. Place Objects At Original Position drops the imported objects at the same location as they appear back in the Illustrator file. Set Stage Size simply sets Flash’s Stage size to the same size as Illustrator’s artboard size. Import Unused Symbols brings in any unused symbols that were created in the Illustrator file (you’ll see ‘em all back in Illustrator’s Symbol panel). Finally, Import As A Single Bitmap Image…err…imports the Illustrator file as a single bitmap image. Pretty simple.

4. When you’re feeling good, click OK.

Flash imports the Illustrator file using the options that you’ve set. If you chose to import Illustrator layers as Flash layers, check out the Timeline at the top of your Flash file. You should see a bunch of layers—the same ones that were in your original Illustrator file.

What’s more, depending on the import settings you used, you may have gotten a whole pile of goodies in Flash’s Library panel, too. Super-cool!

And once again, just as you saw with Photoshop, you can control how your Illustrator files get imported by having a look at Flash’s AI File Importer preferences. To check it out, head to Edit > Preferences (Windows) or Flash > Preferences (Mac) and click on the AI File Importer category on the left-hand side.

So there you go, there’s a look at how to handle Photoshop and Illustrator content in Flash CS3. It’s really easy stuff, so long as you know what results you’re after. That being said, if you found some of this a bit confusing—and it can be the first or second time round—then keep at it and keep experimenting with bringing your different files into your Flash movies. Have fun Flashin’!

Visitor Comments

Leave us a comment

Your Message: Name: * Email: * Post it!

• Digg This!
• Del.icio.us
• Blinklist
• Back to Top