Illustrator for Flash and Director

Now we have to export our button so that we can bring it into Flash and start using it. To do this we click the File menu in Illustrator then look for ‘Export’. Once you’ve clicked that, you should see something (system, OS and settings provided) like the window below.

Here, Illustrator asks what format we’d like to export our vector graphic as. As you can see, there are a lot of different formats to choose from. Highlighted in dark blue is the one we want: Macromedia Flash (*.SWF). The good people at Adobe have graciously given us the ability to export right out of Illustrator and into a Flash file.

So let’s do that! Choose the area of your hard drive you want to save the file to, name it, click Macromedia Flash (*.SWF) from the drop down, and finally hit ‘Save’. You’ll end up with this:

This is our SWF Format Option box. This is where we tell Illustrator how we want our Flash file to be built. Let’s start at the top.

The ‘Export As’ drop down consists of three options (AI being the Adobe Illustrator extension):

• AI File to SWF File This option will simply export the file and do nothing fancy with it. You’ll get a single layer file that contains all the different elements of your graphic.
• AI Layers to SWF Frames This option will create a Flash file that separates your Illustrator layers (if you’ve got any) into a series of frames. Each frame will hold each individual layer’s graphic. 10 layers will get you 10 frames.
• AI Layers to SWF Files The option will also separate your layers, but instead of creating a series of frames, it generates a series of separate Flash files. So if you’ve got 10 layers and you select this option, you’ll end up with 10 Flash files.

Here’s what the drop down looks like:

Next: Frame Rate: Flash defaults for 12 Frames per Second (FPS), thus, so does Illustrator (as you can see above). This option would be useful if you chose AI Layers to SWF Frames. Why? Because, by exporting your layers as Flash frames, you are (in essence) creating a Flash animation. This option will allow you to specify the frame rate of that animation.

Next: Looping: Again, this choice is handy if you convert layers to frames.

Next: Generate HTML: This option would be appropriate if you wanted to produce an HTML file that contained all the EMBED and other necessary tags to export your Flash movie into a Webpage (the same thing as Publishing within Flash). As we’re exporting our graphics to Flash so that we can work with them in that environment, we don’t need to use this option.

Next: Read Only: Again, this is not an option we need to use. If you chose this option, you’d be unable to import the SWF into Flash to use for our button. Basically, it locks your SWF.

Next: Clip to Artboard Size: We’d choose this option if we’d overlapped the artboard a bit, for example, if we wanted our movie to be 550px X 400px, and we had an oval that overlapped those dimensions slightly. Instead of messing about shaping the oval to our artboard, we would choose this option to have Illustrator cut it off at that point.

Next: Curve Quality: This option is just like optimizing: the higher the quality, the higher the file size. I don’t think I’ve ever changed this value before, but if you’re smarter than I am, you’ll experiment and see what you can come up with.

Next: Image Options: This one option we don’t want to mess with. Why? This function creates optimized JPEGs of your vector graphics, undermining the reason why we used vector graphics in the first place.

Okay! That’s it. From here on in, it’s normal Flash authoring!

Now that we’ve got our graphics exported as a Flash movie, save the Illustrator file and close up.