Importing Vector Artwork

Vector graphics from other applications can be imported into Flash with relative ease using the Import to Stage or Import to Library command. Browse for files using the All Files or All PostScript setting to make most vector file formats selectable. Vector files in most formats, including EPS, PDF, and AI, will invoke the standard Import Options dialog box (shown in Figure 16-15). Use the settings to control how your file will be handled in the Flash authoring environment. As long as you do not choose Rasterize everything, vector graphics are generally imported as groups, and can be edited just like a normal group drawn in Flash.

Figure 16-15: The Import Options dialog box used for setting conversion options for most imported graphics files

Note 

Flash MX 2004 and Flash 8 support import of PDF and EPS files created with Adobe Illustrator. With PDF files, you have the option to preserve layers and to convert multipage documents into Flash scenes or keyframes. Both the PDF and EPS formats are included in the All PostScript file import option.

Vector artwork will only be saved in the Library on import if it includes clipping paths or gradients that cannot be converted to editable Flash fills. In these cases, Flash automatically adds a folder of nested Graphic symbols with masks or bitmap symbols to the Library to preserve the appearance of elements that cannot be converted to Drawing Objects or simple grouped shapes.

Caution 

Adobe Illustrator 6.0 is the only version that can be imported to Flash in AI format with placed bitmap images. If you are importing Adobe Illustrator layouts with placed bitmap images and you also need to preserve editable text and vector graphics, the best option is to save the layout as an Adobe PDF file before importing it to Flash. Although EPS files will import to Flash with placed bitmaps and editable text, you will not be able to preserve layers, and placed bitmaps will be converted to nested PNG files with layer masks.

You can also copy and paste or even drag and drop artwork from external applications, but this gives you less control over how the vector information will be translated in Flash — for example, transparency or special fill types may be lost and any layers will be flattened into the currently selected Flash layer.

Because generic numbered layer names, such as Layer 1, may be redundant with layers already present in your Flash document, it is helpful to give layers meaningful names in the original file before importing to Flash. To avoid unexpected color shifts, it is recommended that you convert your color space to RGB in any external application before saving files that will be imported to Flash.

Caution 

You must specify Illustrator 7 or higher in the Adobe Illustrator document options when saving AI files to ensure color consistency for artwork imported to Flash. If you choose Illustrator 6 or lower format, then RGB values will not be saved and color shifts may result. When saving EPS files from Illustrator for import to Flash, be sure to deselect the CMYK PostScript option to avoid color shifts when the file is converted to RGB on import to Flash.

To import a vector file to Flash, simply follow these steps:

1. To import a file to the Stage of your Flash document, make sure that you have an empty, unlocked layer selected, and choose File ð Import ð Import to Stage.

2. In the Import dialog box, choose a file format to browse using the Files of Type (Win) or Show (Mac) menu.

   Note 

   EPS files saved from FreeHand will not be selectable in the file list with Show: FreeHand. Use Show: All PostScript or Show: All Files to import EPS files from most applications.

3. Find the vector file that you wish to import and select it from the file list. Then choose Import.

4. If the application you are importing from includes options for how the artwork will be placed in Flash, you will be prompted to make choices from the Import Options dialog box.

   Depending on your options, the artwork will be imported to a single layer or to multiple layers or keyframes in your Flash document after you click OK.

   Note 

   If you choose to rasterize the vector artwork into a bitmap image when importing to Flash, remember to apply JPEG compression using the Quality setting in the Bitmap Properties dialog box, or if the Use document default quality check box is selected, set JPEG Quality in the Publish Settings dialog box before exporting your Flash movie (.swf).

5. To edit the imported graphic with Flash shape tools, ungroup the elements (Shift+Ctrl+G or Shift+z+G) or double-click parts of the group or Drawing Object until you are able to select strokes and fills in Edit in place mode.

   Tip 

   Double-clicking a grouped item or Drawing Object takes you into Edit in place mode, but if the item is in a compound group, you may have to continue double-clicking through the nested elements until you are able to isolate the stroke and fill of one part of the group for modification.

6. To store elements in the Library so they are reusable, convert them to Graphic symbols or Movie Clip symbols.

Tip 

If you have imported a layered sequence into multiple Flash keyframes, consider cutting and pasting the frames into a new Movie Clip symbol to keep the Main Timeline uncluttered.

Although you can scale, move, or rotate the grouped elements, to modify individual parts of the graphic you must either ungroup the elements or go into Edit mode until you are able to select the strokes and fills of a particular element.

New Feature 

Where possible, imported graphics are interpolated as Flash 8 Drawing Objects. This makes it easier to edit stroke and fill properties without having to ungroup or click into Edit mode.

Any small inconsistencies in fill style are easy to fix once the elements are ungrouped in Flash. Remember that you can delete fills, add strokes, scale, or otherwise modify the imported artwork with any of the Flash tools.

To make the artwork efficient to reuse and update, it is best to convert the whole graphic into a symbol. If you intend to animate parts of the graphic individually, then convert these into discrete symbols and place them on separate layers.

Cross-Reference 

For more information on working with Drawing Objects and grouped artwork in Flash, refer to Chapter 9, "Modifying Graphics." For more information on using symbols, refer to Chapter 6, "Symbols, Instances, and the Library."

Tip 

If you use a program such as Macromedia FreeHand that enables you to define Flash-compatible symbols and layers in your graphic files, you can save some time when the file is imported to Flash.

Here's how to use the Clipboard to import a vector image into Flash:

1. Select all vector elements that you wish to include.

2. Copy the selected items from your vector drawing application to the Clipboard. Most programs support Ctrl+C or z+C.

3. Return to Flash and make sure that you have an active, unlocked layer that you can paste the vectors into. This can be on the Main Timeline or on any symbol Timeline.

4. Paste the graphics onto the Stage by choosing Edit ð Paste in Center from the menu (Ctrl+V or z+V).

5. You may want to group or move parts of the pasted graphic onto new layers in your Flash document for better organization and for animation.

Importing Macromedia Fireworks Files

Macromedia Fireworks offers one of the most flexible file formats for import into Flash. Fireworks PNG files can contain bitmap and vector artwork, as well as text, layers, guides, and even frames. Fireworks PNG files can be imported into Flash as either flattened images or as editable objects, with various options for handling the contents of the file. When importing images exported from Fireworks into Flash, you will be prompted by the Fireworks PNG Import Settings dialog box (shown in Figure 16-16) to make selections for the following import options:

Figure 16-16: Use this special import dialog box to choose conversion settings for Fireworks PNG files.

New Feature 

Flash 8 can now support many Fireworks effects and blends. If an effect is supported in Flash, it will be preserved as an editable Flash filter. If an effect is too complex for Flash to preserve, the image can be rasterized to preserve the appearance of the image, but the effect will not be editable in the Flash authoring environment.

• To import the PNG as one rasterized image to the current layer or to the Library, select Import as single flattened bitmap. When this option is selected, all other options will be unavailable. If you choose this option, you may want to apply Flash JPEG compression to the bitmap image either in Bitmap Properties or in Publish Settings. To edit a flattened image, you can launch Fireworks from inside Flash and edit the original PNG file (including any vector data or text).

• To import more complex files, select one of the following File Structures:

  • Import as movie clip and retain layers to import the PNG file to a new Movie Clip timeline with all frames and layers intact inside a Movie Clip symbol.

  • Import into new layer in current scene to import the PNG file into a single new layer in the current Flash document at the top of the stacking order. All Fireworks layers will be flattened, but not rasterized unless specified, and any frames in the Fireworks file will be included on the new layer.

• For Objects, select either Rasterize if necessary to maintain appearance to rasterize Fireworks fills, strokes, and effects in Flash as part of a bitmap image, or select Keep all paths editable to preserve vector paths in Flash. Some Fireworks fills, strokes, and effects may be lost on import.

• For Text, you can select the same options as those listed for Objects.

As with most files created in external applications, you will find that rasterized and flattened Fireworks vector artwork and text will import more consistently to Flash, but you also lose all the benefits of having editable vector art and text. Although the option for launching Fireworks at any time to edit the original PNG file does make rasterized Fireworks images less limiting than other bitmaps, it is usually worth the little extra time you might need to spend simplifying your artwork to get it to import to Flash with vectors and editable text intact. Any special fills or textures that have been applied to your text in Fireworks will be lost if you choose to preserve editable text on import to Flash.

Note 

While gradients imported from FreeHand are converted to raw Flash shapes with gradient fills, gradients imported from Fireworks are converted to Movie Clip symbols that will appear in the Library in a folder labeled Fireworks Objects — it is still possible to edit the gradient fill just by opening the symbol in Edit mode (or double-clicking the symbol instance).

Caution 

If you import a Fireworks PNG file by cutting and pasting into Flash, all vector elements will be rasterized into a flattened bitmap image.

Importing Macromedia FreeHand Files

FreeHand is one of the most compatible applications for transferring vector artwork into Flash. When importing FreeHand files, you can preserve library symbols and pages in addition to layers and text blocks. You may also choose a specific page range to import. Figure 16-17 shows the options available from the FreeHand Import dialog box, which is invoked when importing files with the FreeHand extension (.fh) into Flash. Although FreeHand can export a variety of file formats, including SWF and EPS, the native FH format will give you the most editing options for files imported to Flash.

Figure 16-17: The FreeHand Import dialog box is used to specify how the vector file will be handled when placed into Flash.

Cross-Reference 

For more information on working with FreeHand files, refer to Chapter 37, "Working with Vector Graphics," on this book's CD-ROM. You will also find some sample FreeHand files in the ch37 folder on the CD-ROM.

Remember to convert your FreeHand file to RGB color mode. If the file is in CMYK, it will be converted automatically on import to Flash and this may cause unexpected color shifts. There are some other special considerations when importing FreeHand artwork. To ensure seamless translation of FreeHand elements imported into Flash, observe the following guidelines:

• Any placed grayscale elements in FreeHand will be converted to RBG color when imported to Flash, which may increase file size.

• EPS files placed in FreeHand will not be viewable when imported to Flash, unless you select the Convert Editable EPS when Imported option in FreeHand Import Preferences before you place an EPS into FreeHand. Regardless of the settings used, Flash will not display information for any placed EPS imported from FreeHand.

• Strokes with square caps will be converted into rounded caps in Flash — you can convert them back into square caps using the new Flash 8 Cap style menu in the Property inspector.

• Be cautious with compound shapes: When importing overlapping elements that you want to keep intact in Flash, place them on separate layers in FreeHand and import the layers into Flash. If items on a single layer are overlapping when imported, they will be divided or merged at intersection points in the same way as primitive shapes created in Flash.

• Flash now supports up to 16 colors in an imported gradient fill. If a gradient created in FreeHand contains more than 16 colors or special styles (such as contour), Flash uses clipping paths to interpret the gradient. Clipping paths increase file size. To work around this issue, use gradients that contain 16 or fewer colors and use standard gradient styles in FreeHand or replace the imported gradient with a Flash gradient fill as described later in this chapter.

• Imported FreeHand blends also increase Flash file size because Flash interprets each step in a blend as a separate path.

As shown in Figure 16-18, Flash recognizes text and gradient fills imported from FreeHand and Fireworks, making it easy to edit these elements directly in Flash.

Figure 16-18: You can edit FreeHand and Fireworks files directly in Flash, but you still need to convert shapes and text elements into symbols to store in the Library for reuse.

Tip 

Remember that gradients created in Macromedia FreeHand or Adobe Illustrator can be directly exported to SWF format as Flash gradients. However, if the gradient contains more than 16 colors or uses special alignment (such as contour gradients), Flash adds clipping paths when it is imported. Also, remember that FreeHand blends will always be interpreted by Flash as a series of paths, which can increase file size and sometimes add banding to the blend.

Animating Imported Vector Graphics

A handy feature of many popular illustration programs is support for layers. Just like layers in a Flash document (.fla), layers in illustration programs enable you to keep individual groups of graphics separate from one another. A simple technique with animating vector graphic files is to animate or tween each layer separately in the Flash authoring environment.

An example of an easily converted illustration movie is a logo. If you have created artwork in FreeHand or Illustrator and have kept the elements separated by layers, then you can quickly create an interactive Flash graphic.

On the CD-ROM 

For this exercise, you can use the sample logo, daisyLogo.ai or daisyLogo.pdf, in the ch16 folder of the CD-ROM. If you use the example file, start at Step 4.

1. Create a layered graphic in FreeHand or Illustrator.

   Before each part of the element is created, make a new named layer for it.

2. If you use extensive text controls (such as kerning, leading, tracking, and so on), then convert the text to outlines (or paths).

3. Save the layout. Flash MX 2004 and Flash 8 support direct import of Adobe PDF files, in addition to Illustrator or FreeHand files.

   Caution 

   CMYK colors shift when imported into the RGB color space of Flash. Moreover, some masking and cropping information (for bleeds) may not be interpreted correctly by Flash. To see the color difference between CMYK import and RGB import for the logo used in this example, refer to the color insert.

4. Import the file into Flash, being certain to select the option to preserve your artwork in layers and vector format.

   You may want to create a new scene or symbol to contain the imported graphic(s). Otherwise, the layers from the imported file will be stacked with your current layers (as shown in Figure 16-19).

   On the CD-ROM 

   The roughly grouped artwork and preserved layers of the original logo file imported to Flash (shown in Figure 16-19) can be viewed by opening daisy_AI_import.fla, located in the ch16 folder of the CD-ROM.

5. You may convert the layered elements into symbols for reuse or easier modification later.

   You will need to make button symbols for any element that you want to use interactively (such as the flower animation triggered by the mouse). Repeat this step for every layer.

6. Now add any Flash tweens or actions to the groups or symbols in each layer.

   At this point, you could continue creating a full Flash project with other components, or export a Flash movie (.swf). The project Timeline for the finished animated example on the CD-ROM is shown in Figure 16-20.

Figure 16-19: Layered vector graphic imported as grouped artwork in Flash layers on the Main Timeline

Figure 16-20: Imported artwork converted to Flash symbols and tweened to create an animated logo

As you can see, in just a few straightforward steps, you can create an animated logo and turn many other translations of vector graphics into interactive presentations that can be included in other projects or in e-mail. Whenever you're developing complicated layered work in an illustration application such as FreeHand or Illustrator, you can take advantage of those layers in Flash.

On the CD-ROM 

Check out the completed interactive logo, daisyAnim.fla or daisyAnim.swf, located in the ch16 folder of the CD-ROM.