Create animations

  1. Illustrator User Guide
  2. Get to know Illustrator
    1. Introduction to Illustrator
      1. What's new in Illustrator
      2. Common questions
      3. Illustrator system requirements
      4. Illustrator for Apple silicon
    2. Workspace
      1. Workspace basics
      2. Create documents
      3. Tools Default keyboard shortcuts | Illustrator
      4. Tool galleries
      5. Customize keyboard shortcuts
      6. Artboards
      7. Customize the workspace
      8. Properties panel
      9. Set preferences
      10. Touch Workspace
      11. Microsoft Surface Dial support in Illustrator
      12. Recovery, undo, and automation
      13. Rotate view
      14. Rulers, grids, and guides
      15. Accessibility in Illustrator
      16. Safe Mode
      17. View artwork
      18. Use the Touch Bar with Illustrator
      19. Files and templates
      20. Synchronize settings using Adobe Creative Cloud
    3. Tools in Illustrator
      1. Selection
        1. Overview
        2. Selection
        3. Direct Selection
        4. Group Selection
        5. Lasso
        6. Magic Wand
      2. Navigation
        1. Overview
        2. Zoom
        3. Rotate View
      3. Paint
        1. Overview
        2. Gradient
        3. Shape Builder
      4. Type
        1. Overview
        2. Type
        3. Type on path
  3. Illustrator on the iPad
    1. Introduction to Illustrator on the iPad
      1. Illustrator on the iPad overview
      2. Illustrator on the iPad FAQs
      3. System requirements | Illustrator on the iPad
      4. What you can or cannot do on Illustrator on the iPad
    2. Workspace
      1. Illustrator on the iPad workspace
      2. Touch shortcuts and gestures
      3. Keyboard shortcuts for Illustrator on the iPad
      4. Manage your app settings
    3. Documents
      1. Work with documents in Illustrator on the iPad
      2. Import Photoshop and Fresco documents
    4. Select and arrange objects
      1. Create repeat objects
      2. Blend objects
    5. Drawing
      1. Draw and edit paths
      2. Draw and edit shapes
    6. Type
      1. Work with type and fonts
      2. Create text designs along a path
      3. Add your own fonts
    7. Work with images
      1. Vectorize raster images
    8. Color
      1. Apply colors and gradients
  4. Cloud documents
    1. Basics
      1. Work with Illustrator cloud documents
      2. Share and collaborate on Illustrator cloud documents
      3. Upgrade cloud storage for Adobe Illustrator
      4. Illustrator cloud documents | Common questions
    2. Troubleshooting
      1. Troubleshoot create or save issues for Illustrator cloud documents
      2. Troubleshoot Illustrator cloud documents issues
  5. Add and edit content
    1. Drawing
      1. Drawing basics
      2. Edit paths
      3. Draw pixel-perfect art
      4. Draw with the Pen, Curvature, or Pencil tool
      5. Draw simple lines and shapes
      6. Image Trace
      7. Simplify a path
      8. Define perspective grids
      9. Symbolism tools and symbol sets
      10. Adjust path segments
      11. Design a flower in 5 easy steps
      12. Perspective drawing
      13. Symbols
      14. Draw pixel-aligned paths for web workflows
    2. 3D effects and Adobe Substance materials
      1. About 3D effects in Illustrator
      2. Create 3D graphics
      3. Create 3D objects
      4. Create 3D Text
    3. Color
      1. About color
      2. Select colors
      3. Use and create swatches
      4. Adjust colors
      5. Use the Adobe Color Themes panel
      6. Color groups (harmonies)
      7. Color Themes panel
      8. Recolor your artwork
    4. Painting
      1. About painting
      2. Paint with fills and strokes
      3. Live Paint groups
      4. Gradients
      5. Brushes
      6. Transparency and blending modes
      7. Apply stroke on an object
      8. Create and edit patterns
      9. Meshes
      10. Patterns
    5. Select and arrange objects
      1. Select objects
      2. Layers
      3. Group and expand objects
      4. Move, align, and distribute objects
      5. Stack objects    
      6. Lock, hide, and delete objects
      7. Duplicate objects
      8. Rotate and reflect objects
    6. Reshape objects
      1. Crop images
      2. Transform objects
      3. Combine objects
      4. Cut, divide, and trim objects
      5. Puppet Warp
      6. Scale, shear, and distort objects
      7. Blend objects
      8. Reshape using envelopes
      9. Reshape objects with effects
      10. Build new shapes with Shaper and Shape Builder tools
      11. Work with Live Corners
      12. Enhanced reshape workflows with touch support
      13. Edit clipping masks
      14. Live shapes
      15. Create shapes using the Shape Builder tool
      16. Global editing
    7. Type
      1. Create text
      2. Fonts and typography
      3. Format type
      4. Import and export text
      5. Format paragraphs
      6. Special characters
      7. Create type on a path
      8. Character and paragraph styles
      9. Tabs
      10. Text and type
      11. Find missing fonts (Typekit workflow)
      12. Update text from Illustrator 10
      13. Arabic and Hebrew type
      14. Fonts | FAQ and troubleshooting tips
      15. Create 3D text effect
      16. Creative typography designs
      17. Scale and rotate type
      18. Line and character spacing
      19. Hyphenation and line breaks
      20. Text enhancements
      21. Spelling and language dictionaries
      22. Format Asian characters
      23. Composers for Asian scripts
      24. Create text designs with blend objects
      25. Create a text poster using Image Trace
    8. Create special effects
      1. Work with effects
      2. Graphic styles
      3. Create a drop shadow
      4. Appearance attributes
      5. Create sketches and mosaics
      6. Drop shadows, glows, and feathering
      7. Summary of effects
    9. Web graphics
      1. Best practices for creating web graphics
      2. Graphs
      3. SVG
      4. Create animations
      5. Slices and image maps
  6. Import, export, and save
    1. Import
      1. Import artwork files
      2. Import bitmap images
      3. Import artwork from Photoshop
      4. Place multiple files | Illustrator CC
      5. Unembed images
      6. Import Adobe PDF files
      7. Import EPS, DCS, and AutoCAD files
      8. Links information
    2. Creative Cloud Libraries in Illustrator 
      1. Creative Cloud Libraries in Illustrator
    3. Save
      1. Save artwork
    4. Export
      1. Use Illustrator artwork in Photoshop
      2. Export artwork
      3. Collect assets and export in batches
      4. Package files
      5. Create Adobe PDF files
      6. Extract CSS | Illustrator CC
      7. Adobe PDF options
      8. File information and metadata
  7. Printing
    1. Prepare for printing
      1. Set up documents for printing
      2. Change the page size and orientation
      3. Specify crop marks for trimming or aligning
      4. Get started with large canvas
    2. Printing
      1. Overprint
      2. Print with color management
      3. PostScript printing
      4. Print presets
      5. Printer's marks and bleeds
      6. Print and save transparent artwork
      7. Trapping
      8. Print color separations
      9. Print gradients, meshes, and color blends
      10. White Overprint
  8. Automate tasks
    1. Data merge using the Variables panel
    2. Automation with scripts
    3. Automation with actions
  9. Troubleshooting 
    1. Crash on launch issues
    2. Recover files after crash
    3. File issues
    4. GPU device driver issues
    5. Wacom device issues
    6. DLL file issues
    7. Memory issues
    8. Preferences file issues
    9. Font issues
    10. Printer issues
    11. Share crash report with Adobe

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.

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.

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.

  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.

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.

Adobe logo

Sign in to your account