Working with symbols in Animate

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Working with video cue points
    9. Draw and create objects with Animate
    10. Reshape lines and shapes
    11. Strokes, fills, and gradients with Animate CC
    12. Working with Adobe Premiere Pro and After Effects
    13. Color Panels in Animate CC
    14. Opening Flash CS6 files with Animate
    15. Work with classic text in Animate
    16. Placing artwork into Animate
    17. Imported bitmaps in Animate
    18. 3D graphics
    19. Working with symbols in Animate
    20. Draw lines & shapes with Adobe Animate
    21. Work with the libraries in Animate
    22. Exporting Sounds
    23. Selecting objects in Animate CC
    24. Working with Illustrator AI files in Animate
    25. Apply patterns with the Spray Brushtool
    26. Applying blend modes
    27. Arranging objects
    28. Automating tasks with the Commands menu
    29. Multilanguage text
    30. Using camera in Animate
    31. Using Animate with Adobe Scout
    32. Working with Fireworks files
    33. Graphic filters
    34. Sound and ActionScript
    35. Drawing preferences
    36. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Best practices - Accessibility guidelines
    12. Accessibility in the Animate workspace
    13. Writing and managing scripts
    14. Enabling Support for Custom Platforms
    15. Custom Platform Support Overview
    16. Creating accessible content
    17. Working with Custom Platform Support Plug-in
    18. Debugging ActionScript 3.0
    19. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Export QuickTime video files
    9. Controlling external video playback with ActionScript
    10. Best practices - Tips for creating content for mobile devices
    11. Best practices - Video conventions
    12. Best practices - SWF application authoring guidelines
    13. Best practices - Structuring FLA files
    14. Best Practices to optimize FLA files for Animate
    15. ActionScript publish settings
    16. Specify publish settings for Animate
    17. Exporting projector files
    18. Export Images and Animated GIFs
    19. HTML publishing templates
    20. Working with Adobe Premiere Pro and After Effects
    21. Quick share and publish your animations

About symbols

A symbol is a graphic, button, or movie clip that you create once in the Animate (formerly Flash Professional CC) authoring environment or by using the SimpleButton (AS 3.0) and MovieClip classes. You can then reuse the symbol throughout your document or in other documents.

A symbol can include artwork that you import from another application. Any symbol that you create automatically becomes part of the library for the current document.

An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance.

Using symbols in your documents dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your documents by converting static graphics, such as background images, into symbols and then reusing them. Using symbols can also speed SWF file playback, because a symbol needs to be downloaded to Flash® Player only once.

Share symbols among documents as shared library assets during authoring or at runtime. For runtime shared assets, you can link assets in a source document to any number of destination documents, without importing the assets into the destination document. For assets shared during authoring, you can update or replace a symbol with any other symbol available on your local network.

If you import library assets with the same name as assets already in the library, you can resolve naming conflicts without accidentally overwriting existing assets.

Additional introductory instruction about symbols is available from these resources:

Types of symbols

Each symbol has a unique Timeline and Stage, complete with layers. You can add frames, keyframes, and layers to a symbol Timeline, just as you can to the main Timeline. When you create a symbol you choose the symbol type.

  • Use graphic symbols  for static images and to create reusable pieces of animation that are tied to the main Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.

  • Use button symbols  to create interactive buttons that respond to mouse clicks, rollovers, or other actions. You define the graphics associated with various button states, and then assign actions to a button instance. For more information, see Handling events in the ActionScript 3.0 Developer’s Guide.

  • Use movie clip symbols  to create reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline—think of them as nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript®.

  • Use font symbols to export a font and use it in other Animate documents.

    Animate provides built‑in components, movie clips with defined parameters, that you can use to add user interface elements, such as buttons, checkboxes, or scroll bars, to your documents. For more information, see About ActionScript 3.0 Components in Using ActionScript 3.0 Components.

    note: To preview animation in component instances and scaling of 9-slice-scaled movie clips in the Animate authoring environment, select Control > Enable Live Preview.

Create symbols

You can create a symbol from selected objects on the Stage, create an empty symbol and make or import the content in symbol-editing mode, and create font symbols in Animate. Symbols can contain all the functionality that Animate can create, including animation.

Using symbols that contain animation lets you create Animate applications with a lot of movement while minimizing file size. Consider creating animation in a symbol that has a repetitive or cyclic action—the up‑and‑down motion of a bird’s wings, for example.

To add symbols to your document, use shared library assets during authoring or at runtime.

Convert selected elements to a symbol

  1. Select an element or several elements on the Stage. Do one of the following:
    • Select Modify > Convert To Symbol.

    • Drag the selection to the Library panel.

    • Right-click (Windows) or Control-click (Macintosh) and select Convert To Symbol from the context menu.

  2. In the Convert To Symbol dialog box, type the name of the symbol and select the behavior.
  3. Click in the registration grid to position the registration point for the symbol.
  4. Click OK.

    Animate adds the symbol to the library. The selection on the Stage becomes an instance of the symbol. Once you have created a symbol, you can edit it in symbol edit mode by choosing Edit > Edit Symbols, or you can edit it in the context of the Stage by choosing Edit > Edit In Place. You can also change the registration point of a symbol.

Create an empty symbol

  1. Do one of the following:
    • Select Insert > New Symbol.

    • Click the New Symbol button at the lower left of the Library panel.

    • Select New Symbol from the Library Panel menu in the upper-right corner of the Library panel.

  2. In the Create New Symbol dialog box, type the name of the symbol and select the behavior.
  3. Click OK.

    Animate adds the symbol to the library and switches to symbol-editing mode. In symbol-editing mode, the name of the symbol appears above the upper-left corner of the Stage, and a cross hair indicates the symbol’s registration point.

  4. To create the symbol content, use the Timeline, draw with the drawing tools, import media, or create instances of other symbols.
  5. To return to document-editing mode, do one of the following:
    • Click the Back button.

    • Select Edit > Edit Document.

    • Click the scene name in the Edit bar.

      When you create a symbol, the registration point is placed at the center of the window in symbol-editing mode. You can place the symbol contents in the window in relation to the registration point. To change the registration point, when you edit a symbol, move the symbol contents in relation to the registration point.

  6. In the ActionScript Linkage section, you can choose to export for ActionScript by selecting the Export for ActionScript checkbox. The Class and Base Class are automatically displayed (you can choose to rename the class names). Animate searches for class definitions in an external AS file or a linked SWC file. If the class definitions are not found in these locations, Animate automatically generates class files. For more information, see this article.

(Animate only) Swapping multiple symbols

The Swap Symbol option allows you to swap symbols with a selected symbol or bitmaps.

  1. In your Animate document, select multiple symbols on the stage.

  2. On the Properties panel, click SWAP.
  3. On the Swap Symbol dialog, select the symbol you want to replace all selected symbols/bitmaps with.
  4. Click OK.

Convert animation on the Stage into a movie clip symbol

To reuse an animated sequence on the Stage, or to manipulate it as an instance, select it and save it as a movie clip symbol.

  1. On the main Timeline, select every frame in every layer of the animation on the Stage that you want to use. For information on selecting frames, see Insert frames in the Timeline.
  2. Do one of the following to copy the frames:
    • Right-click (Windows) or Control-click (Macintosh) any selected frame, and select Copy Frames from the context menu. To delete the sequence after converting it to a movie clip, select Cut.

    • Select Edit > Timeline > Copy Frames. To delete the sequence after converting it to a movie clip, select Cut Frames.

  3. Deselect your selection and make sure nothing on the Stage is selected. Select Insert > New Symbol.
  4. Name the symbol. For Type, select Movie Clip, then click OK.
  5. On the Timeline, click Frame 1 on Layer 1, and select Edit > Timeline > Paste Frames.

    This action pastes the frames (and any layers and layer names) you copied from the main Timeline to the Timeline of this movie clip symbol. Any animation, buttons, or interactivity from the frames you copied now becomes an independent animation (a movie clip symbol) that you can reuse.

  6. To return to document-editing mode, do one of the following:
    • Click the Back button.

    • Select Edit > Edit Document.

    • Click the scene name in the Edit bar above the Stage.

Duplicate symbols

Duplicating a symbol lets you use an existing symbol as a starting point for creating a symbol.

To create versions of the symbol with different appearances, also use instances.

Duplicate a symbol using the Library panel

  1. Select a symbol in the Library panel and do one of the following:
    • Right-click (Windows) or Control-click (Macintosh), and select Duplicate from the context menu.

    • Select Duplicate from the Library Panel menu.

Duplicate a symbol by selecting an instance

  1. Select an instance of the symbol on the Stage.
  2. Select Modify > Symbol > Duplicate Symbol.

    The symbol is duplicated, and the instance is replaced with an instance of the duplicate symbol.

Edit symbols

When you edit a symbol, Animate updates all the instances of that symbol in your document. Edit the symbol in the following ways:

  • In context with the other objects on the Stage by using the Edit In Place command. Other objects are dimmed to distinguish them from the symbol you are editing. The name of the symbol you are editing appears in an Edit bar at the top of the Stage, to the right of the current scene name.

  • In a separate window, using the Edit In New Window command. Editing a symbol in a separate window lets you see the symbol and the main Timeline at the same time. The name of the symbol you are editing appears in the Edit bar at the top of the Stage.

    You edit the symbol by changing the window from the Stage view to a view of only the symbol, using symbol-editing mode. The name of the symbol you are editing appears in the Edit bar at the top of the Stage, to the right of the current scene name.

    When you edit a symbol, Animate updates all instances of the symbol throughout the document to reflect your edits. While editing a symbol, use any of the drawing tools, import media, or create instances of other symbols.

  • Change the registration point of a symbol (the point identified by the coordinates 0, 0) by using any symbol-editing method.

 

Edit a symbol in place

  1. Do one of the following:
    • Double-click an instance of the symbol on the Stage.

    • Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit in Place.

    • Select an instance of the symbol on the Stage, and select Edit > Edit In Place.

  2. Edit the symbol.
  3. To exit edit-in-place mode and return to document-editing mode, do one of the following:
    • Click the Back button.

    • Select the current scene name from the Scene menu in the Edit bar.

    • Select Edit > Edit Document.

    • Double-click outside the symbol content.

Edit a symbol in a new window

  1. Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit In New Window.
  2. Edit the symbol.
  3. Click the Close box in the upper-right corner (Windows) or upper-left corner (Macintosh) to close the new window, and click in the main document window to return to editing the main document.

Edit a symbol in symbol-editing mode

  1. Do one of the following to select the symbol:
    • Double-click the symbol’s icon in the Library panel.

    • Select an instance of the symbol on the Stage, and right-click (Windows) or Control-click (Macintosh), and select Edit from the context menu.

    • Select an instance of the symbol on the Stage and select Edit > Edit Symbols.

    • Select the symbol in the Library panel and select Edit from the Library Panel menu, or right-click (Windows) or Control-click (Macintosh) the symbol in the Library panel and select Edit.

  2. Edit the symbol.
  3. To exit symbol-editing mode and return to editing the document, do one of the following:
    • Click the Back button at the left of the Edit bar at the top of the Stage.

    • Select Edit > Edit Document.

    • Click the scene name in the Edit bar at the top of the Stage.

    • Double-click outside the symbol content.

Adobe logo

Sign in to your account