Working with Illustrator AI files in Animate

Animate lets you import Adobe® Illustrator® AI files and preserves the majority of the editability and visual fidelity of your artwork. The AI Importer also provides you with a great degree of control in determining how your Illustrator artwork is imported into Animate, letting you specify how to import specific objects into an AI file.

The Animate AI Importer provides the following key features:

• Preserves editability of the most commonly used Illustrator effects as Animate filters.

• Preserves editability of blend modes that Animate and Illustrator have in common.

• Preserves the fidelity and editability of gradient fills.

• Maintains the appearance of RGB (red, green, blue) colors.

• Imports Illustrator Symbols as Animate Symbols.

• Preserves the number and position of Bezier control points.

• Preserves the fidelity of clip masks.

• Preserves the fidelity of pattern strokes and fills.

• Preserves object transparency.

• Converts the AI file layers to individual Animate layers, keyframes, or a single Animate layer. You can also import the AI file as a single bitmap image, in which case Animate flattens (rasterizes) the file.

• Provides an improved copy-and-paste workflow between Illustrator and Animate. A copy-and-paste dialog box provides settings to apply to AI files being pasted onto the Animate stage.

Compatibility between Animate and Illustrator

Certain visual attributes can either not be accurately imported, or, after they are imported, lose their ability to be further edited in the Animate authoring environment. The AI Importer provides you with several options to import and place artwork to best maintain its visual appearance and editability. However, certain visual attributes cannot be preserved. Use the following guidelines to improve the appearance of AI files imported into Animate:

• Animate supports only the RGB color space, and not the CMYK color space, which is common in printing. Animate can convert CMYK images to RGB, however, colors are better preserved if you convert the colors to RGB in Illustrator.

• To preserve the drop shadow, inner glow, outer glow, and Gaussian blur AI effects as editable Animate filters, Animate imports the objects to which they are applied as a Animate movie clip. If you attempt to import an object with these attributes as something other than a movie clip, Animate displays an incompatibility alert, and recommends importing the object as a movie clip.

Working with Illustrator and Animate

You can move Illustrator artwork into the Animate editing environment or directly into Flash Player. You can copy and paste artwork, save files in SWF format, or export artwork directly to Animate. In addition, Illustrator provides support for Animate dynamic text and movie clip symbols.

Pasting Illustrator artwork

You can create graphically rich artwork in Illustrator and copy and paste it into Animate simply, quickly, and seamlessly.

When you paste Illustrator artwork into Animate, the following attributes are preserved:

• Paths and shapes

• Scalability

• Stroke weights

• Gradient definitions

• Text (including OpenType fonts)

• Linked images

• Symbols

• Blending modes

In addition, Illustrator and Animate support pasted artwork in the following ways:

• When you select entire top-level layers in Illustrator artwork and paste them into Animate, the layers are preserved along with their properties (visibility and locking).

• Non-RGB Illustrator colors (CMYK, grayscale, and custom) convert to RGB in Animate. RGB colors paste as expected.

• When you import or paste Illustrator artwork, you can use various options to preserve effects (such as drop shadow on text) as Animate filters.

• Animate preserves Illustrator masks.

Exporting SWF files from Illustrator

From Illustrator, you can export SWF files that match the quality and compression of SWF files exported from Animate.

When you export, you can choose from a variety of presets to ensure optimal output, and you can specify how to handle multiple artboards, symbols, layers, text, and masks. For example, you can specify whether Illustrator symbols are exported as movie clips or graphics, or you can choose to create SWF symbols from Illustrator layers.

Importing Illustrator files into Animate

When you want to create complete layouts in Illustrator and then import them into Animate in one step, you can save your artwork in the native Illustrator format (AI) and import it, with high fidelity, into Animate using the File > Import To Stage or File > Import To Library commands in Animate.

If your Illustrator file contains multiple artboards, you select the artboard you want to import from the Import dialog box in Animate, and specify settings for in that artboard for all layers. All objects on the selected artboard can be imported as a single or multiple animate layers or keyframes in Animate.

When you import Illustrator artwork as an AI, EPS, or PDF file, Animate preserves the same attributes as for pasted Illustrator artwork. In addition, when an imported Illustrator file contains layers, you can import them in any of the following ways:

• Convert Illustrator layers to Animate layers

• Convert Illustrator layers to Animate frames

• Convert all Illustrator layers to a single Animate layer

Symbol workflow

Symbol workflow in Illustrator is similar to symbol workflow in Animate.

If the AI file contains Text, you can convert the text to:

• Editable Text 
• Vector Outline
• Flattened bitmap image

Animate allows you to convert layers in the imported AI file to:

• Single flattened bitmap file
• Editable paths and effects

Using the Symbols panel or the Control panel, you can easily assign names to symbol instances, break links between instances and symbols, swap a symbol instance with another symbol, or create a copy of the symbol. In Animate, the editing features in the Library panel work in a similar way.

(Flash Professional CS6 and earlier versions only) Static, dynamic, and input text objects

When you bring static text from Illustrator into Animate, Animate converts the text to outlines. In addition, you can set up your text in Illustrator as dynamic text. Dynamic text enables you to edit text content programmatically in Animate, and easily manage projects that require localization in multiple languages.

In Illustrator, you can specify individual text objects as static, dynamic, or input text. Dynamic text objects in Illustrator and Animate have similar properties. For example, both use kerning that affects all characters in a text block rather than individual characters, both anti-alias text the same way, and both can be linked to an external XML file containing text.

About importing AI files to the Animate library

Importing an AI file into the library is similar to importing to the Stage, the difference being that the entire AI file is encapsulated as a Animate symbol. The content is imported into the library and organized by the layering and grouping structure of the AI file.

When you import an AI file into the library, the root folder uses the name of the AI file. After the AI file is imported into the library, you can change the name of the root folder, or move the layers out of the folder.

 The Library panel orders the contents of the imported AI file alphabetically. The hierarchical grouping and folder structure remains the same, but the library reorders them alphabetically.

When converting AI layers to keyframes, the AI file is imported as a movie clip; converting the AI layers to Flash layers, or as a single Flash layer, imports the AI file as a graphic symbol. The resulting movie clip or graphic symbol contains all of the content of the AI file imported to its timeline, as if the content were imported to the Stage. Almost all movie clips have a bitmap or other asset associated with them. To minimize confusion and naming conflicts, these assets are stored in an Assets folder in the same folder as the movie clip.

 When you import to the library, the AI file's contents are imported to the movie clip's timeline, not the main Animate timeline.

(Flash Professional CS6 and earlier versions only) AI File Importer preferences

The Animate Preferences dialog box lets you set import preferences for AI files and the AI File Import dialog box. The preferences you specifiy for importing AI files affect the options the AI Import dialog box is initially populated with for the Illustrator object types.

 To override the preferences specified for different layer types on an object by object basis, use the AI Import dialog box. Select the layer, object, or group to change its import options, and specify the necessary options.

Preferences that affect how the AI Importer will respond when importing AI files:

Specifies that the AI File Import dialog box appears.

Excludes objects on the Illustrator canvas which fall outside the artboard or crop area.

Specifies that hidden layers be imported by default.

Lets you specify the following import preferences for text objects:

Specifies that imported Illustrator text is editable Animate text. The appearance of the text may be compromised to maintain the editability of the text.

Converts text to vector paths. Use this option to preserve the visual appearance of the text. Some visual effects might be sacrificed—such as unsupported blend modes and filters—but visual attributes such as text on a path are maintained if the text is imported as a movie clip. The text itself is no longer editable, but opacity and compatible blend modes maintain their editability.

 To preserve the drop shadow, inner glow, outer glow, and Gaussian blur that AI effects applied to text as editable Animate filters, select Create Movie Clip Import to import the text as a movie clip.

Rasterizes the text into a bitmap to preserve the exact appearance of the text as it was in Illustrator. If filters or other effects are applied that are not compatible with Animate, importing the text as a bitmap preserves the visual appearance. Rasterized text is no longer editable.

Specifies that text objects be imported inside a movie clip. To maintain supported blend modes, AI effects, and transparency of less than 100% between Illustrator and Animate, specify that the text object be imported as a movie clip.

Lets you specify the following path import preferences:

Creates an editable vector path. Supported blend modes, effects, and object transparency are preserved, but attributes not supported in Animate are discarded.

Rasterizes the path into a bitmap to preserve the exact appearance of the path in Illustrator. A rasterized image is no longer editable.

Specifies that path objects be imported inside a movie clip.

Lets you specify the import preference for images:

Rasterizes the image into a bitmap to preserve the appearance of blending modes and effects that are not supported in Animate. A rasterized image is no longer editable.

Specifies that images be imported inside a movie clip.

Lets you specify the import preferences for groups:

Rasterizes the group into a bitmap to preserve the appearance of the objects as they appeared in Illustrator. After a group is converted to a bitmap, the objects in it cannot be selected or renamed.

Specifies that all objects in the group be encapsulated into a single movie clip.

Lets you specify the import preferences for layers:

Rasterizes the layer into a bitmap to preserve the appearance of the objects as they appeared in Illustrator.

Specifies that the layer is encapsulated into a movie clip.

Specifies a global registration point for movies that are created. This setting applies to the registration point for all object types. This option can be changed on an object by object basis in the AI File Import dialog box; this is the initial setting for all object types. For more information on movie clip registration, see Edit symbols.

Import Adobe Illustrator files

When you want to create complete layouts in Illustrator and then import them into Animate in one step, you can save your artwork in the native Illustrator format (AI) and import it, with high fidelity, into Animate using the File > Import To Stage or File > Import To Library commands in Animate.

If your Illustrator file contains multiple artboards, you select the artboard you want to import from the Import dialog box in Animate, and specify settings for in that artboard for all layers. All objects on the selected artboard can be imported as a single or multiple flash layers or keyframes in Animate.

When you import Illustrator artwork as an AI, EPS, or PDF file, Animate preserves the same attributes as for pasted Illustrator artwork. In addition, when an imported Illustrator file contains layers, you can import them in any of the following ways:

• Convert Illustrator layers to Flash layers
• Convert Illustrator layers to Flash frames
• Convert all Illustrator layers to a single Flash layer

Symbol workflow

Symbol workflow in Illustrator is similar to symbol workflow in Animate.

Text Conversion

If the AI file contains Text, you can convert the text to:

• Editable Text 
• Vector Outline
• Flattened bitmap image

Layer Conversion

Animate allows you to convert layers in the imported AI file to:

• Single flattened bitmap file
• Editable paths and effects

(Flash Professional CS6 and earlier versions only) Symbol properties and links

Using the Symbols panel or the Control panel, you can easily assign names to symbol instances, break links between instances and symbols, swap a symbol instance with another symbol, or create a copy of the symbol. In Animate, the editing features in the Library panel work in a similar way.

(Flash Professional CS6 and earlier versions only) Static, dynamic, and input text objects

When you bring static text from Illustrator into Animate, Animate converts the text to outlines. In addition, you can set up your text in Illustrator as dynamic text. Dynamic text enables you to edit text content programmatically in Animate, and easily manage projects that require localization in multiple languages.

In Illustrator, you can specify individual text objects as static, dynamic, or input text. Dynamic text objects in Illustrator and Animate have similar properties. For example, both use kerning that affects all characters in a text block rather than individual characters, both anti-alias text the same way, and both can be linked to an external XML file containing text.

Illustrator object import options

Layers manage all the items that make up Illustrator artwork. By default, all items are organized in a single, parent layer. You can import all items in a given parent layer as a single, flattened bitmap, or, individually select each object and specify import options specific to the type of object it is (text, path, group, and so on). The AI Importer provides options to select layers in the artwork you are importing and specify individual import options based on preserving the visual appearance of an object, or its editability in Animate.

Correcting incompatible graphic effects

Select individual objects

(Flash Professional CS6 and earlier versions only)Selecting layers

The Layers panel lists the objects in a document. By default, every Illustrator document contains at least one layer, and each object in a given file is listed under that layer.

When an item in the Layers panel contains other items, a triangle appears to the left of the item’s name. To show or hide the content, click the triangle. If no triangle appears, the layer contains no additional items.

 You can expand or collapse all groups and layers using the AI Importer context menu. Right-click to display the context menu and select Expand All or Collapse All.

Controls whether items are selected for import or not. If an item is checked, you can select that layer and specify import options; if Edit is not checked, the layer is dimmed and you cannot specify any import setting for the item in that layer.

An icon indicates what the Animate object type located on that layer will be when imported and, if visible, that the item is selected. The object types are:

• Text 

• Path 

• Group 

• Movie clip 

• Graphic symbol 

• Image 

Text import options

Animate lets you import text as editable text, vector outlines, or a flattened bitmap. To maintain supported blend modes, AI effects, and transparency of less than 100% between Illustrator and Animate, import text as a movie clip. Importing text as a movie clip preserves the editability of compatible visual effects.

By default, Illustrator text imports as editable Animate text. The appearance of the text can be compromised to maintain the editability of the text.

Converts text to vector paths. Use this option to preserve the visual appearance of the text. Some visual effects might be sacrificed—such as unsupported blend modes and filters—but visual attributes such as text on a path are maintained if the text is imported as a movie clip. The text itself is no longer editable, but opacity and compatible blend modes maintain their editability.

 To preserve the drop shadow, inner glow, outer glow, and Gaussian blur that AI effects applied to text as editable Animate filters, select Create Movie Clip Import to import the text as a movie clip.

Rasterizes the text into a bitmap to preserve the exact appearance of the text as it was in Illustrator. If filters or other effects are applied that are not compatible with Animate, importing the text as a bitmap preserves the visual appearance. Rasterized text is no longer editable.

Path import options

A path is the line that results from drawing in Illustrator. A path is either open, like an arc, or closed, like a circle. For an open path, the starting and ending anchor points for the path are called endpoints. Editable paths can be imported into Animate, however, if certain blend modes, filters, or other effects are applied to the path, those effects might not be compatible with Animate.

Rasterizes the path into a bitmap to preserve the exact appearance of the path in Illustrator. A rasterized image is no longer editable.

Creates an editable vector path. Supported blend modes, effects, and object transparency are preserved, but attributes not supported in Animate are discarded.

Image import options

Bitmap images are the most common electronic medium for continuous-tone images, such as photographs or digital paintings. Illustrator creates bitmap effects by using filters, effects, and graphic styles. While many of these effects are compatible with Animate, some might need to be flattened—or rasterized—to preserve their visual appearance.

 If a raster file in Illustrator is linked, only JPEG, GIF, and PNG are imported with their native format preserved. All other file types are converted to the PNG format in Animate. Additionally, the conversion (to PNG) depends on the version of QuickTime® installed on your computer.

Rasterizes the image into a bitmap to preserve the appearance of blending modes and effects that are not supported in Animate. A rasterized image is no longer editable.

Imports Illustrator images as movie clips.

(Flash Professional CS6 and earlier versions only) Group import options

Groups are collections of graphic objects that are treated as a single unit. Grouping lets you move or transform a number of objects without affecting their attributes or relative positions. For example, you might group the objects in a logo design so that you can move and scale the logo as one unit. Groups can also be nested. That is, they can be grouped in other objects or groups to form larger groups.

Groups appear as <Group> items in the Import panel. When an item such as a group contains other items, a triangle appears to the left of the item’s name. Click the triangle to show or hide the contents of the group. If no triangle appears, the item contains no additional items.

Rasterizes the group into a bitmap to preserve the appearance of the objects as they appeared in Illustrator. After a group is converted to a bitmap, the objects in it cannot be selected or renamed.

Encapsulates all objects in the group into a single movie clip.

Copy and pasting between Illustrator and Animate

If you copy and paste (or drag-and-drop) artwork between Illustrator and Animate, the Paste dialog box appears, which provides import settings for the AI file being copied (or pasted).

Flattens the file being copied into a single bitmap object.

Imports the file using the AI file import setting specified in Animate Preferences (Edit > Preferences).

Enabled by default when Paste Using AI File Importer Preferences is selected. Automatically fixes any incompatibilities detected in the AI file.

Enabled by default when Paste Using AI File Importer Preferences is selected. Specifies that layers in the AI file be converted to Animate layers (the same as if you selected Convert To Flash Layers from the AI Import dialog box). If deselected, all layers are flattened into a single layer.