User Guide Cancel

Creating and working with symbol instances 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. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. 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. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. 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. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

Create instances

After you create a symbol, you can create instances of that symbol throughout your document, including inside other symbols. When you modify the symbol, Animate updates all instances of the symbol.

You can give names to instances from the Property inspector. Use the instance name to refer to an instance in ActionScript. To control instances with ActionScript®, give each instance within a single timeline a unique name. 

To specify color effects, assign actions, set the graphic display mode, or change the behavior of new instances, use the Property inspector. The behavior of the instance is the same as the symbol behavior, unless you specify otherwise. Any changes you make affect only the instance and not the symbol.

Create an instance of a symbol

  1. Select a layer in the Timeline. Animate can place instances only in keyframes, always on the current layer. If you don’t select a keyframe, Animate adds the instance to the first keyframe to the left of the current frame.

     A keyframe is a frame in which you define a change in the animation. For more information, see Insert frames in the Timeline.

  2. Select Window > Library.

  3. Drag the symbol from the library to the Stage.

  4. If you created an instance of a graphic symbol, to add the number of frames that will contain the graphic symbol, select Insert > Timeline > Frame.

Apply a custom name to an instance

  1. Select the instance on the Stage.

  2. Select Window > Properties, and enter a name in the Instance Name box.

Editing instance properties

Each symbol instance has its own properties that are separate from the symbol. You can change the tint, transparency, and brightness of an instance; redefine how the instance behaves (for example, change a graphic to a movie clip); and specify how an animation plays inside a graphic instance. You can also skew, rotate, or scale an instance without affecting the symbol.

In addition, you can name a movie clip or button instance so that you can use ActionScript to change its properties. For more information, see Objects and classes in Learning ActionScript 3.0. To edit instance properties, you use the Property inspector (Windows > Properties).

The properties of an instance are saved with it. If you edit a symbol or relink an instance to a different symbol, any instance properties you’ve changed still apply to the instance.

Set the visibility of an instance

You can make a symbol instance on the Stage invisible by turning off the Visible property. Using the Visible property provides faster rendering performance than setting the symbol’s Alpha property to 0.

The Visible property requires a Player setting of Flash Player 10.2 or later and is only compatible with movie clip, button, and component instances.

  1. Select the instance on the Stage.

  2. In the Display section of the Properties panel, deselect the Visible property.

Change the color and transparency of an instance

Each instance of a symbol can have its own color effect. To set color and transparency options for instances, use the Property inspector. Settings in the Property inspector also affect bitmaps placed in symbols.

When you change the color and transparency for an instance in a specific frame, Animate makes the change as soon as it displays that frame. To make gradual color changes, apply a motion tween. When tweening color, you enter different effect settings in starting and ending keyframes of an instance, and then tween the settings to make the instance’s colors shift over time.

Tweening gradually changes an instance’s color or transparency.

 If you apply a color effect to a movie clip symbol that has multiple frames, Animate applies the effect to every frame in the movie clip symbol.

  1. Select the instance on the Stage, and select Window > Properties.
  2. In the Property inspector, select one of the following options from the Style menu in the Color Effect section:

    Brightness

    Adjusts the relative lightness or darkness of the image, measured on a scale from black (–100%) to white (100%). To adjust brightness, click the triangle and drag the slider or enter a value in the box.

    Tint

    Colors the instance with the same hue. To set the tint percentage from transparent (0%) to completely saturated (100%), use the Tint slider in the Property inspector. To adjust tint, click the triangle and drag the slider or enter a value in the box. To select a color, enter red, green, and blue values in the respective boxes, or click the Color control and select a color from the Color Picker.

    Alpha

    Adjusts the transparency of the instance, from transparent (0%) to completely saturated (100%). To adjust the alpha value, click the triangle and drag the slider or enter a value in the box.

    Advanced

    Separately adjusts the red, green, blue, and transparency values of an instance. This is most useful to create and animate subtle color effects on objects such as bitmaps. The controls on the left let you reduce the color or transparency values by a specified percentage. The controls on the right let you reduce or increase the color or transparency values by a constant value.

    The current red, green, blue, and alpha values are multiplied by the percentage values, and then added to the constant values in the right column, producing the new color values. For example, if the current red value is 100, setting the left slider to 50% and the right slider to 100% produces a new red value of 150 ([100 x .5] + 100 = 150).

     The Advanced settings in the Effect panel implement the function (a * y+ b)= x where a is the percentage specified in the left set of boxes, y is the color of the original bitmap, b is the value specified in the right set of boxes, and x is the resulting effect (between 0 and 255 for RGB, and 0 and 100 for alpha transparency).

    You can also change the color of an instance using the ActionScript ColorTransform object. For detailed information on the Color object, see ColorTransform in ActionScript 2.0 Language Reference or ActionScript 3.0 Language and Components Reference.

Swap one instance for another

To display a different instance on the Stage and preserve all the original instance properties, such as color effects or button actions, assign a different symbol to an instance.

For example, suppose you are creating a cartoon with a rat symbol for your character, but decide to change the character to a cat. You could replace the rat symbol with the cat symbol and have the updated character appear in roughly the same location in all your frames.

Assign a different symbol to an instance

  1. Select the instance on the Stage, and select Window > Properties.

  2. Click the Swap button in the Property inspector.

  3. Select a symbol to replace the symbol currently assigned to the instance. To duplicate a selected symbol, click Duplicate Symbol and click OK.

    Duplicating lets you base a new symbol on an existing one in the library and minimizes copying if you’re making several symbols that differ slightly.

Replace all instances of a symbol

  1. Drag a symbol with the same name as the symbol you are replacing from one Library panel into the Library panel of the FLA file you are editing and click Replace. If you have folders in the library, the new symbol must be dragged into the same folder as the symbol you are replacing.

Change an instance’s type

To redefine an instance’s behavior in a Animate application, change its type. For example, if a graphic instance contains animation that you want to play independently of the main Timeline, redefine the graphic instance as a movie clip instance.

  1. Select the instance on the Stage, and select Window > Properties.
  2. Select Graphic, Button, or Movie Clip from the menu in the Property inspector.

Set looping for a graphic instance

To determine how animation sequences inside a graphic instance play in your Animate application, set options in the Property inspector.

An animated graphic symbol is tied to the Timeline of the document in which the symbol is placed. In contrast, a movie clip symbol has its own independent Timeline. Animated graphic symbols, because they use the same Timeline as the main document, display their animation in document-editing mode. Movie clip symbols appear as static objects on the Stage and do not appear as animations in the Animate editing environment.

  1. Select a graphic instance on the Stage, and select Window > Properties.
  2. Select an animation option from the Options menu in the Looping section of the Property inspector:

    Loop

    Loops all the animation sequences contained in the current instance for as many frames as the instance occupies.

    Play Once

    Plays the animation sequence beginning from the frame you specify to the end of the animation and then stops.

    Single Frame

    Displays one frame of the animation sequence. Specify which frame to display.

  3. To specify the first frame of the graphic symbol to display when looping, enter a frame number in the First text box. The Single Frame option also uses the frame number you specify here.

Frame Picker

Frame Picker helps you to visually preview and choose the first frame for a graphic symbol. In previous releases, you could not preview the frames without getting within the symbol in Edit mode. This feature enhances user experience for animation workflows such as Lip-Sync.

 Frame Picker panel works only with graphic symbols and is disabled for movie clip or button symbol types. Ensure that you have converted your assets to symbols before you work with this feature.

  1. Select a graphic symbol and then go to Properties Panel > Looping > Use Frame Picker.. button to display the Frame Picker panel or select Window > Frame Picker

    Frame Picker

  2. The selected symbol loads in the frame picker panel.

    Character on stage
    Character on stage

  3. Click on any frame to set it as the First Frame for the selected symbol.

    List view
    List view

    Thumbnail view
    Thumbnail view

    Loop and single frames
    Loop and single frames

    Here are the options available in the frame picker panel:

    List (default option) Displays the frames in a vertical list view. 

    Thumbnail Displays frames in a grid view and re-adjusts when the panel is resized. 

    Create Keyframe This option enables you to create a Keyframe automatically when you select a position from the framepicker panel. 

    Pin current symbol This option allows you to work with the same symbol even if the selection of frame changes.

    Launch a new Frame Picker panel Work with multiple symbols by loading them in separate frame picker panels.

    Loop Displays the various looping options for graphics such as Loop, Play once, and Single frame. 

    Slider Adjusts preview size.

    Slider left button Fits more frames in view.

    Slider right button Fits less frames in view.

    Filter frame options dropdown Displays the various filter frame options.

Create Keyframe

If Create Keyframe option is checked, this option allows automatic creation of keyframes when selecting a frame in the Frame Picker panel.

Create Keyframe
Create Keyframe

Pin current symbol and launch new frame panels

Frame picker panel offers an option to pin the current symbol. The symbol stays loaded in the panel and you can work with the symbol even if the selection of frame changes.

Once a symbol is pinned, this symbol is remembered as long as it exists in the library or it is unpinned explicitly.

Frame picker panel also provides an option to work with multiple symbols by loading them in separate panels.

Pin current symbol
Pin current symbol

Launch new frame picker panel
Launch new frame picker panel

 If you try to use the frame picker panel when no instance of pinned symbol is available on the current frame, a prompt appears asking you to unpin the symbol.

Filtering options for Frames

Animate offers filtering options for the frames listed in the panel. You can choose to filter by, 

  • All Frames - displays all the frames.
  • Keyframes - displays only key frames .
  • Labels - displays only frames with labels.
Filtering options for frames
Filtering options for frames

Auto Lip-Sync

Auto lip-syncing allows easier and faster method of placing appropriate mouth shapes on Timeline, based on the chosen audio layer. You can achieve this using an existing list of mouth poses, drawn within a graphic symbol. When you apply auto lip-syncing on a graphic symbol, key-frames are created automatically at different positions matching with the audio visemes, after analyzing the specified audio layer. Once completed, you can make any further adjustments if needed, by using regular workflows and Frame Picker.

A viseme is a generic facial image that can be used to indicate a sound. 

Creating a Lip-Sync

Follow the steps as mentioned below to start creating a Lip-Sync:

  1. Create a graphic symbol (mouth pose).

    Inside the graphic symbol, you can draw all the mouth poses/visemes.

  2. In main timeline, import an audio in new layer.

     Auto Lip syncing works best with Audio sync setting set to Stream.

  3. Select the mouth graphic symbol. In Property Inspector, click Lip Syncing.

    Lip syncing in property inspector
    Lip syncing in property inspector

    Create lip syncing dialog appears. By default, the 12 basic types of visemes are displayed as shown in the screenshot below: 

    Create lip syncing
    Create lip syncing

  4. Click on any viseme to modify its mouth pose mapping. A pop-up appears with all the poses present inside the graphic symbol. Select appropriate frame from the pop-up to set it for the current viseme.

    Modifying mouth pose for each viseme
    Modifying mouth pose for each viseme

  5. Select the audio layer for which the lip to be synced. Click the Sync button.

     Auto Lip syncing applies on the frame span where the selected graphic symbol is present. You can also select multiple keyframes first to apply lip syncing across the selected frame range.

  6. Press Ctrl+Enter to run the file and preview the output.

    You can view the animated file with the auto-generated mouth movements that are also in sync with the sound file.

Automate Lip synch on Animate

Lip synching has been simplified on Animate with its automated option. Want to introduce accurate lip synching to you animated character? Watch the tutorial at the end of this example and follow these steps.

  1. Double click the mouth of the character.

  2. In the Properties, click Lip Synching.

  3. Create lip syncing dialog appears. By default, the 12 basic types of visemes displays.

  4. Click on any viseme to modify its mouth pose mapping. A pop-up appears with all the poses present inside the graphic symbol. Select the appropriate frame.

  5. Select the audio layer for which the lip to be synced. Click the Sync button.

How to lip-synch an animated character automatically in Animate

Watch the video to learn how to have a hassle-free lip-synching for your animation.

Break apart a symbol instance

To break the link between an instance and a symbol and make the instance into a collection of ungrouped shapes and lines, you break apart the instance. This feature is useful for changing the instance substantially without affecting any other instance. 

Changes to the source symbol for an instance do not affect an instance after it has been broken apart.

  1. Select the instance on the Stage.
  2. Select Modify > Break Apart. This action breaks the instance into its component graphic elements.
  3. To modify these elements, use the painting and drawing tools.

Get information about instances on the Stage

The Property inspector and Info panel display the following information about instances selected on the Stage:

  • In the Property inspector, view the instance’s behavior and settings—for all instance types, color effect settings, location, and size; for graphics, the loop mode and first frame that contains the graphic; for buttons, the instance name (if assigned) and tracking option; for movie clips, the instance name (if assigned). For location, the Property inspector displays the x and y coordinates of the symbol’s registration point.

  • In the Info panel, view the instance’s size and location; the location of its registration point; its red (R), green (G), blue (B), and alpha (A) values (if the instance has a solid fill); and the location of the pointer. The Position and Size section on the Properties Inspector displays the x and y coordinates of either the symbol’s registration point or transformation point. You can toggle to view coordinates of either the registration point or transformation point.

  • In the Movie Explorer, view the contents of the current document, including instances and symbols.

    View any actions assigned to a button or movie clip in the Actions panel.

Get information about an instance

  1. Select the instance on the Stage.

  2. Display the Property inspector (Window > Properties) or panel to use:

    • To display the Info panel, select Window > Info.

    • To display the Movie Explorer, select Window > Movie Explorer.

    • To display the Actions panel, select Window > Actions.

View the symbol definition for the selected symbol in the Movie Explorer

  1. Click the Show Buttons, Movie Clips, and Graphics button at the top of the Movie Explorer.

  2. Right-click (Windows) or Control-click (Macintosh), and select Show Symbol Instances and Go To Symbol Definition; or select these options from the menu in the upper-right corner of the Movie Explorer.

Jump to the scene containing instances of a selected symbol

  1. Display the symbol definitions.

  2. Right-click (Windows) or Control-click (Macintosh), and select Show Movie Elements and Go To Symbol Definition; or select these options from the menu in the upper-right corner of the Movie Explorer.

 Adobe

Get help faster and easier

New user?