Exporting artboards from Illustrator to Flash

Learn to export Illustrator files with multiple artboards to Flash, set options for export and view the art in the Flash library and Timeline.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Illustrator CS4

• Try
• Buy

Adobe Flash CS4

• Try
• Buy

Sample files

lrvid4099_xp.zip (ZIP, 3.3MB)

Prerequisite knowledge

Intermediate knowledge of working with multiple layer compositions in Illustrator and animating symbols in Flash

Exporting artboards to Flash

One of the great things about Adobe® Creative Suite 4 is how tightly integrated the different applications are. Adobe Illustrator® and Adobe Flash® CS4 are highly compatible, and you can export from Illustrator to Flash in a few steps. In this tutorial, you will learn how to work with multiple artboards in Illustrator, how to export Illustrator documents to Flash as .swf files, and how to animate Illustrator files in Flash.

Using multiple artboards in Illustrator CS4

New to Illustrator CS4 is the ability to have multiple artboards. Multiple artboards give designers the ability to have numerous design elements across an entire campaign contained within a single document. Artboards can be set up for different uses and have different dimensions and sizes. To create a document using multiple artboards:

1. Choose File > New. The New Document dialog box opens.

   

   Figure 1: The New Document dialog box
2. In the New Document dialog box, select the number of artboards you want in the Number Of Artboards text box. Click OK.
3. To edit a document with multiple artboards, click the Artboard Tool in the toolbox. You have entered Edit Artboard mode.

   

   Figure 2: The Artboard tool

   Note: Each artboard in your document has a number assigned to it. Not only does this number allow you to identify the artboard, but it also transfers those numbers to other applications, such as Flash.

   

   Figure 3: Viewing artboards in Edit mode
4. To reposition an artboard on the canvas, drag it to the desired position.
5. To create a new artboard from an existing artboard, Alt/Option-drag the artboard you want to copy to a different location.
6. To delete an artboard, select it and press the Delete key.
7. Choose the Escape key to exit Edit Artboard mode.
8. You can also navigate to individual artboards by using the menu at the bottom of the Illustrator window.

   

Exporting Illustrator files to Flash

Exporting an Illustrator file to Flash for the purpose of putting it on a web page or animating an object is very simple. Being a vector graphics application, Illustrator can export files directly in the Flash file format or as .swf files. To export an Illustrator file to Flash:

1. Select any one of the artboards from your project.
2. Choose File > Export. The Export dialog box opens. From the Format menu, choose Flash (swf) as the format.
3. Click Export. The SWF Options dialog box opens, which provides several options for exporting your Illustrator file.

   

   Figure 5: The SWF Options dialog box.
4. Click Cancel to close the dialog box.

Animating an object in Flash

Using the integration between Flash and Illustrator, it is possible to animate an object inside an Illustrator document. You can set key parameters in Illustrator that will help you complete the animation in Flash. For example, you can turn an object in an illustrator file into a symbol. As one of the central elements of Flash, symbols allow you to add motion and other interactive elements. Having designated objects imported as symbols into Flash streamlines the animation process. To create a symbol in Illustrator:

1. Select the object you want to turn into a symbol.
2. Press the F8 key on your keyboard to open the Symbol Options dialog box. In the dialog box, give your symbol a descriptive name. Make sure the radio button for Movie Clip is selected. Leave the Flash Registration and 9-Slice Scaling options deselected. Click OK.

   

   Figure 6: The Symbol Options dialog box
3. At the top of the Illustrator window, assign an instance name to your symbol. Instance names are extremely useful when you apply ActionScript information to particular symbols.

Opening an Illustrator File in Flash

To transfer an Illustrator file to Flash, you do not need to save the document as a .swf file, nor do you need to export the file. You can save your project as an illustrator file and open it in Flash. To transfer an Illustrator file to Flash:

1. Choose File > Save As and save your file to the desired location. Click OK to accept the default options in the Illustrator Options dialog box.
2. Open Flash. Click Create New: Flash File (Action Script 3.0) on the Welcome Screen or choose File > New > Flash File (ActionScript 3.0) from the menu.
3. Choose File > Import > Import To Stage.
4. From the Import to Stage dialog box, choose the Illustrator file you saved in Step 1 and click Import. The Import to Stage dialog box appears asking how you want to import the file.

   

   Figure 7: The Import To State dialog box
5. From the Select Illustrator Artboard at the top of the dialog box, choose the artboard you want to import into Flash. All of the information for that artboard is displayed in the Check Illustrator Layers To Import pane on the left side of the dialog box.
6. Choose Convert Layers To > Flash Layers.
7. Make sure the checkboxes for Place Objects At Original Position and Set Stage Size To Same Size As Illustrator Artboard are selected.
8. Click OK. The artwork from the Illustrator artboard appears on the Stage in Flash. In the Timeline, you should see two layers, one for your artwork and one for the symbol you created in Illustrator.

   

   Figure 8: The Timeline contains the layers from Illustrator
9. Navigate to the Library panel. Note that the symbol you created is stored inside the Illustrator symbols folder.
10. Go to the Stage and select the symbol you created in Illustrator, then navigate to the Properties panel. Notice the instance name you gave the symbol in Illustrator is preserved.

    

    Figure 9: Symbol properties from Illustrator are maintained in Flash

Creating an animation

Now you can add interactivity by animating the symbol you created in Illustrator. To animate the symbol:

1. Deselect anything you have selected on the Stage. Click the layer containing your artwork in the Timeline.
2. Right-click the frame where you want your animation to end. For a one-second animation, click the 24th frame. Choose Insert Keyframe from the context menu that appears.
3. Move the playhead to Frame 1. Choose the layer containing your symbol.

   Note: Using the new object-based animation model in Flash has greatly simplified the process of creating an animation.

4. Right-click the symbol on the Stage. Choose Create Motion Tween from the context menu that appears. An animation span or tween is automatically created and inserted into the Timeline on the symbol layer. In addition, the playhead is moved to the end of the animation.

   

   Figure 10: The Timeline with animation
5. Move the symbol to where you want it to be at the end of your animation. From here, you can scale the symbol if you want.
6. Press the Enter key to play the animation.

Where to go from here

• Illustrator Help and Support
• Learn Illustrator CS4
• Working with multiple artboards, by Deke McClelland
• Understanding Flash integration, by Michael Ninness
• Exporting to Flash, by Chad Perkins
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors