Enhancing Flash Production with Adobe Illustrator


Adobe Illustrator is a favorite tool among logo designers and graphic artists for good reason — it offers a robust authoring environment with lots of "extras." The various brush styles, graphic libraries, and even prebuilt color palettes give you a head start with graphic content. Adobe has continued to add Web-friendly features to Illustrator, and in version 9 or higher you will even find graphics for multistate buttons and a system for creating symbols and adding JavaScript to graphics for interactive interface elements. The full scope of features available in Illustrator CS2 is beyond the scope of this book, but if you are familiar with Illustrator, you will be pleased to find that your workflow between Illustrator and Flash can be seamless. To ensure color consistency, always set your Illustrator document color mode to RGB before creating artwork for use in Flash (File Document Color Mode).

Note 

Most vector artwork created in Illustrator (including special brush styles and most graphic symbols) will import or copy and paste into Flash without becoming rasterized. The important exception to this rule is for artwork that includes gradients or special fill patterns. Copied and pasted Illustrator graphics that are not supported as editable content in Flash are converted into a series of masked filled shapes or into a bitmap that will more or less preserve the appearance of the content but not the option to modify it with vector tools.

Moving Artwork from Illustrator to Flash

Another advantage of using Illustrator is that you have plenty of export options that make Illustrator a good choice for authoring content that can be used in a variety of contexts. If you use Adobe Illustrator 9 or higher, you can save or export your artwork for Flash as:

  • Adobe Illustrator (.ai file extension). This format works best if you use the Create PDF compatible file option when you save the file from Illustrator CS2.

  • Encapsulated PostScript format (.eps file extension).

  • Adobe Illustrator format (.ai file extension).

  • Portable Document format (.pdf file extension).

  • Flash movie format (.swf file extension).

Depending on the nature of your artwork, you may choose to use any of these file formats for import to Flash. The native Illustrator format and PDF format provide the most options for importing content to Flash — making it possible to preserve layers, editable text, simple gradients, and placed bitmaps.

Once in Flash, you will want to go through a process of organizing your file and optimizing the imported artwork. If you were careful about how you structured and exported your Illustrator file, a lot of this work will have already been done for you. Depending on the settings you chose in the export process from Illustrator, the artwork may come into Flash as a group — often, objects are in nested groups. If you need to move key elements to separate Flash layers, ungroup the objects and create logically named Flash symbols out of them. After the scene is organized with the objects regrouped and named as symbols and arranged on their own layers, you'll be ready to animate or otherwise integrate the Illustrator objects with the rest of your Flash project.

New Feature 

Flash MX 2004 and Illustrator CS did not always work very well together, and the recommended workaround was to use SWF export rather than trying to import native Illustrator files (.ai). In our testing with Flash 8, Illustrator files saved from CS2 with the Create PDF compatible file option selected (on save) imported seamlessly to the Flash authoring environment. Complex gradients or files with more than 20 layers might not always import as expected, but for most simple graphics files, the workflow is much smoother with Flash 8 and Illustrator CS2.

Using SWF Export from Illustrator CS2

To export an .swf file directly from Illustrator 9 or higher, follow these steps:

  1. Open your Illustrator file (.ai or .eps).

  2. Select Export from the File menu and choose Flash (SWF) from the Format drop-down menu. Type a name for your new .swf file and choose a folder to store the file; then click Export to open the Flash Format Options dialog box.

  3. In the Flash (SWF) Format Options dialog box (shown in Figure 37-10), you can choose how you want your Illustrator artwork to translate to .swf format. The Format Options dialog box has the following settings:

    • Export As: If AI File to SWF File is selected, all of your artwork will appear on one keyframe and in one layer in the Flash movie. AI Layers to SWF Frames will export each layer as separate sequential keyframes on the Flash movie Timeline. If this option is selected, then you can enter a Frame Rate as well. AI Layers to SWF Files exports a separate .swf file for each Illustrator layer.

    • Frame Rate: As we mentioned in the Export As description, you can specify a frame rate for your SWF animation if you choose the AI Layers to SWF Frames option. By default, this option is 12 fps. For faster animations, enter a higher frame rate.

    • Looping (AI 10 or higher only): If you are intending to place your SWF file directly on the Web without any further editing in Flash, this option will control playback of the frames in the .swf file generated by Illustrator. If you want a multiframe sequence to repeat after it has finished playing through the first time, choose AI Layers to SWF Frames from the Export As drop-down menu and select the Looping check box before you export the file.

    • Generate HTML (AI 10 or higher only): Like the looping option, this option was added to the SWF Format Options for files that you intend to use on the Web without any further editing in Flash. This will create an .html file that you can load into a browser to preview your .swf file.

    • Protect from Import: To prevent your .swf file from being imported into the Flash authoring environment (or other applications that support SWF editing), select this check box. In Illustrator CS and earlier, this was the Read Only check box.

    • Clip to Artboard Size: This option forces the SWF's movie dimensions to match the page size of your Illustrator document, even if your artwork doesn't occupy the whole page.

    • Export Text as Outlines: If you did not convert the text to outlines in your original file and you would prefer to preserve the appearance of the text, use this option. The text will not be editable in Flash, but you won't have to worry about font substitution or layout problems.

    • Compress File: Select this check box to reduce the size of the final .swf file. Compressed SWFs are not supported by early versions of the Flash Player, but if you are publishing content for Flash Player 6 or later, this option will improve the optimization of the SWF.

    • Curve Quality: This setting enables you to specify the accuracy of paths exported from Illustrator. Higher settings (up to 10) result in better accuracy but larger file sizes. Lower settings produce smaller file sizes, at the expense of line quality. We recommend that you use the default setting of 7.

    • Image Options: These standard settings control how any placed bitmap images will be compressed when the SWF is exported from Illustrator.

    • Method: Radio buttons were added to Illustrator CS that enable you to choose either Preserve Appearance or Preserve Editability Where Possible. Select the first option to favor image fidelity — converting text to outlines or rasterizing artwork where necessary. Select the second option to favor editable content — preserving text blocks and converting artwork to shapes in Flash, with masks to emulate clipping paths if needed.

  4. Click OK, and Illustrator exports a new .swf file. You can import the new file into another Flash document (.fla) or use it directly in Web presentations.

image from book
Figure 37-10: Flash Format Options in Illustrator CS2

Caution 

When you export an SWF, the file will be sized to center the artwork in the middle of the movie. If you've been working on a vertical page layout in Illustrator with a lot of empty space above and below your artwork, the SWF will contain a lot of blank space, too. If you align your artwork in the top-left corner of the Illustrator page, then the exported SWF will not have extra empty space. Alignment is an issue that will also affect your artwork when importing files into the Flash authoring environment. Although the empty white space of the Illustrator page will not be visible when you import your artwork to Flash, you may find your artwork placed far below the Stage area because Flash "reads" and includes the space that was above the artwork in the original layout.

General Guidelines When Using the SWF Export from Illustrator

After you become familiar with the process of exporting artwork to Flash, you'll discover that it's relatively simple. However, it's helpful to keep some guidelines in mind:

  • When exporting .swf files from Illustrator, do not include large amounts of body text with custom formatting. Recreate the body text (for example, copy and paste the text into a text box) in Flash.

  • Remember that elements from Illustrator will be put into groups, often stacked or nested within other groups. If you can't edit an element, ungroup it or break it apart in the Flash authoring environment.

  • Graphic symbols or bitmaps automatically created when you export an SWF should be renamed in your Flash Library after you import the file, or at the very least stored in a folder with a meaningful name, such as "AI logo elements."

  • Organize your Illustrator artwork into logical Flash layers. Nest timeline animation in Movie Clip symbols. Develop a consistent system that you and others on your team can recognize and implement.

Using the Save for Web Command to Preview Export Settings

Since version 10, Illustrator has included the handy option of using the File Save for Web command to invoke the Save for Web window (as shown in Figure 37-11). This enables you to preview how your file will appear with different export settings. Although the settings are not as extensive as those in the Format Options dialog box (described previously), the Save for Web dialog box does enable you to alter the file's dimensions and to see a preview of how the file size is affected by the different Curve Quality settings.

image from book
Figure 37-11: The Illustrator Save for Web window enables you to see a preview of the file size and quality as you choose settings for the exported file.

Tip 

If you plan to import artwork to Flash after exporting it from Illustrator, exporting in PNG-24 or AI (PDF-compatible) format will enable more options (such as transparency) than an SWF file will.

Cross-Reference 

For more information on importing and editing vector artwork from other applications in Flash, refer to Chapter 16, "Importing Artwork."




Macromedia Flash 8 Bible
Macromedia Flash8 Bible
ISBN: 0471746762
EAN: 2147483647
Year: 2006
Pages: 395

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net