About Flash graphics

The Flash (SWF) file format is a vector-based graphics file format for scalable, compact graphics for the web. Because the file format is vector-based, the artwork maintains its image quality at any resolution and is ideal for the creation of animation frames. In Illustrator, you can create individual animation frames on layers and then export the image layers into individual frames for use on a website. You can also define symbols in an Illustrator file to reduce the size of an animation. When exported, each symbol is defined only once in the SWF file.

You can save artwork as a SWF file by using the Export command or the Save For Web & Devices command. Benefits of each include:

Export (SWF) command

Provides the most control over animation and bitmap compression.

Save For Web & Devices command

Provides more control over the mix of SWF and bitmap formats in a sliced layout. This command offers fewer Image options than the Export (SWF) command, but uses the Export command’s last-used settings. (See SWF optimization options (Illustrator).)

Keep the following information in mind when preparing artwork to save as SWF:

  • To keep the file size as small as possible when using symbols, apply effects to the symbol in the Symbols panel rather than to symbol instances in the artwork.

  • Using the Symbol Stainer and Symbol Styler tools results in larger SWF files because Illustrator must create a copy of each symbol instance to maintain their appearances.

  • Mesh objects and gradients with more than eight stops are rasterized and will appear as bitmap-filled shapes. Gradients with fewer than eight stops are exported as gradients.

  • Patterns are rasterized into small images the size of the pattern art and tiled to fill the art.

  • If a bitmap object extends beyond the boundaries of a slice, the entire object is included in the exported file.

  • SWF supports rounded caps and joins only. Beveled or square caps and joins become rounded when exported to SWF.

  • Pattern-filled text and pattern-filled strokes convert to paths and are filled with the pattern.

  • Although text retains many of its features when exported to SWF, some information is lost. When importing a SWF file into Flash, leading, kerning, and tracking aren’t maintained. Instead, text is broken into separate records to simulate the look of leading. When the SWF file is subsequently played in Flash Player, the appearance of the leading, kerning, and tracking in the file is maintained. If you wish to export text as paths, select Text As Outlines in the SWF Options dialog box, or convert the text to outlines before exporting to SWF by choosing the Create Outlines command.

For a video on using Illustrator and Flash together, see www.adobe.com/go/lrvid4099_xp . For a video on using symbols effectively between Illustrator and Flash, see www.adobe.com/go/vid0198. For a video on using text effectively between Illustrator and Flash, see www.adobe.com/go/vid0199

Create Flash animations

There are many ways to create Flash animations in Illustrator. One of the easiest is to place each animation frame on a separate Illustrator layer, and select the AI Layers To SWF Frames option when you export the artwork.

Note:

For a video on exporting SWF files from Illustrator, see www.adobe.com/go/vid0214. For a video on creating mobile content in Illustrator, see www.adobe.com/go/vid0207. You can also go to Adobe Studio (http://studio.adobe.com) for tips and tutorials on creating Flash animations.

  1. Create the artwork you want to animate. Use symbols to reduce the file size of the animation and simplify your work.
  2. Create a separate layer for each frame in the animation.

    You can do this by pasting the base artwork into a new layer and then editing the artwork. Or, you can use the Release To Layers command to automatically generate layers consisting of objects that build up cumulatively.

  3. Make sure the layers are in the order in which you want to display them as animation frames.
  4. Do one of the following:
    • Choose File > Export, choose Flash (SWF) for the format, and click Export. In the SWF Options dialog box, select AI Layers To SWF Frames for Export As. Set additional animation options, and click OK.

    • Choose File > Save For Web & Devices. Choose SWF from the Optimized File Format menu. From the Type Of Export menu, choose AI Layers To SWF Frames. Set additional options, and click Save.

Working with Illustrator and Flash

You can move Illustrator artwork into the Flash editing environment or directly into Flash Player. You can copy and paste artwork, save files in SWF format, or export artwork directly to Flash. In addition, Illustrator provides support for Flash dynamic text and movie clip symbols. For a video on using Flash and Illustrator together, see www.adobe.com/go/lrvid4099_xp.

You can also use Device Central to see how Illustrator artwork will appear in Flash Player on different handheld devices.

Pasting Illustrator artwork

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

When you paste Illustrator artwork into Flash, 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 Flash support pasted artwork in the following ways:

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

  • Non-RGB Illustrator colors (CMYK, grayscale, and custom) convert to RGB in Flash. 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 Flash filters.

  • Flash 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 Flash.

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 Flash

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

If your Illustrator file contains multiple artboards, you select the artboard you want to import from the Import dialog box in Flash, and specify settings for each layer in that artboard. All objects on the selected artboard import as a single layer in Flash. If you import another artboard from that same AI file, the objects from that artboard import as a new layer in Flash.

When you import Illustrator artwork as an AI, EPS, or PDF file, Flash 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 Flash.

Symbol creation

When you create a symbol in Illustrator, the Symbol Options dialog box lets you name the symbol and set options specific to Flash: movie clip symbol type (which is the default for Flash symbols), Flash registration grid location, and 9-slice scaling guides. In addition, you can use many of the same symbol keyboard shortcuts in Illustrator and Flash (such as F8 to create a symbol).

Isolation mode for symbol editing

In Illustrator, double-click a symbol to open it in isolation mode for easier editing. In isolation mode, only the symbol instance is editable—all other objects on the artboard are dimmed and unavailable. After you exit isolation mode, the symbol in the Symbols panel, and all instances of that symbol are updated accordingly. In Flash, symbol-editing mode and the Library panel work in a similar fashion.

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 Flash, the editing features in the Library panel work in a similar way.

Static, dynamic, and input text objects

When you bring static text from Illustrator into Flash, Flash 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 Flash, 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 Flash 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy