User Guide Cancel

Using Animate authoring panels

  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

 

Authoring panels in the Animate workspace carry the authoring and publishing controls that you can arrange according to your preferences. You can also drag any panel out of its place, resize it, and place it anywhere on your screen for easy access. Animate pop-up menus also give you an option to lock the panel at any particular place on your screen. If you lock, the panel does not move when you drag it accidentally while working. 

Animate panels with the lock option
Animate panels with the lock option

About the Property inspector

The Property inspector provides easy access to the most commonly used attributes of the current selection, either on the Stage or in the Timeline. You can modify the object or document attributes in the Property inspector without accessing the menus or panels that also control these attributes.

Depending on what is selected, the Property inspector displays information and settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When two or more different types of objects are selected, the Property inspector displays the total number of objects selected.

To display the Property inspector, Select Window > Properties, or press Control+F3 (Windows) or Command+F3 (Macintosh).

Animate 2020 release provides a modernized Property Inspector with four tabs as Tools, Object, Frame and Doc.  Each tab corresponds to the properties for the current selection. 

Tool -  Indicates the current tool that is selected. If a tool does not have a valid PI, Doc PI is shown, and Tool PI tab is disabled. This tab refers to the properties of the currently selected tool.

Object - Indicates the current object that is selected on stage. If no object is selected, this tab is disabled. This tab refers to the properties for the currently selected Object.

Frame - Indicates the current frame that is selected in timeline. If no frame is selected, this tab is disabled. This tab refers to the properties of the currently selected Frame.

Doc - Indicates the current document you are working on. This tab outlines properties specific to the currently opened document.

Doc-PI
Doc Property Inspector

Tool Property Inspector
Tool Property Inspector

Frame PI
Frame Property Inspector

Object PI
Object Property Inspector

Additional properties of the Properties Panel

Gripper
Draggable sections

Draggable sections

Sections of Property Inspector are now draggable and can be rearranged. A gripper is shown on hovering over the draggable section.

Quick action section
Quick action section

Quick Action Toolbar

The Property panel has a new Quick action section and a refreshed header sections to make modes and related functionalities discoverable and quickly accessible.

Refreshed header section
Refreshed header section for Bitmap

Modernized filter settings
Modernized filter settings

Modernized Filter Settings

Filter section has been upgraded to make it easier to apply filter combinations. Also, order of filters can be changed by dragging one filter above or below the other filters.  

Color and style
Color and style

Modernized Fill and Stroke

  • Fill and Stroke section is renamed as Color and Style. 
  • Alpha option for Fill and Stroke colors are added upfront for easy accessibility.
  • For a clutter free and hassle-free experience, relatively less used options in Stroke settings have been moved to the Ellipsis icon for both Style profile option and Width profile option. Click the Ellipsis icon to select these options.
  • Cap and Joints options are accessible upfront.
  • Stroke option or/and Fill option display(s) according to the part of the object that is/are selected. 

Remove Tween Option

Remove tween
Remove tween

Tweening section now has the option to remove tween within the Property Inspector.

Match Content option 

Match content option
Match content option

Match Content option is now available on a single click in document setting section.

Updated Camera Tool PI

Updated camera options
Updated camera options

Camera has all the color effects and Filters now

Updated Polystar, Rectangle, Oval, Text and Magic Wand Tool Properties

Property Inspector panel have been modernized for the Polystar Tool, Rectangle Tool, Oval Tool, Text Tool and Magic Wand Tool to promote accessibility and clutter free user interface.

Polystar
Polystar

Static text
Static text

About the library panel

The Library panel (Window > Library) is where you store and organize symbols created in Animate. You can also store imported files, including bitmap graphics, sound files, and video clips. The Library panel lets you organize library items in folders. Also, see how often an item is used in a document, and sort items by name, type, date, use count, or ActionScript® linkage identifier. For example, when you import an animated GIF, it creates a folder named GIF under the root folder and places the file. You can also search the Library panel by typing in a symbol name or linkage name in the search field. You can also set properties on most multiple-object selections.

The Library panel with an audio clip selected
The Library panel with an audio clip selected

About the Actions panel

The Actions panel lets you create and edit ActionScript code for an object or frame. Selecting a frame, button, or movie clip instance makes the Actions panel active. The Actions panel title changes to Button Actions, Movie Clip Actions, or Frame Actions, depending on what is selected.

The Actions panel showing a stop() action in a frame.
The Actions panel showing a stop() action in a frame.

To display the Actions panel, select Window > Actions or press F9. For more information on Actions panel, see Actions panel overview

Using the movie explorer (deprecated with Animate)

The Movie Explorer lets you view and organize the contents of a document and select elements in the document for modification. It contains a display list of currently used elements, arranged in a navigable hierarchical tree.

Use the Movie Explorer to perform the following actions:

  • Filter which categories of items in the document appear in the Movie Explorer.

  • Display the selected categories as scenes, symbol definitions, or both.

  • Expand and collapse the navigation tree.

  • Search for an element in a document by name.

  • Familiarize yourself with the structure of an Animate document that another developer created.

  • Find all the instances of a particular symbol or action.

  • Print the navigable display list that appears in the Movie Explorer.

The Movie Explorer has a Panel menu and a context menu with options for performing operations on selected items or modifying the Movie Explorer display. A check mark with a triangle below it in the Movie Explorer panel indicates the Panel menu.

Note:

The Movie Explorer has slightly different functionality when you are working with screens.

View the Movie Explorer

  1. Select Window > Movie Explorer.

Filter the categories of items that appear in the Movie Explorer

  • To show text, symbols, ActionScript, imported files, or frames and layers, click one or more of the filtering buttons to the right of the Show option. To customize which items to show, click the Customize button. To view those elements, select options in the Show area of the Movie Explorer Settings dialog box. 

  • To show items in scenes, select Show Movie Elements from the Movie Explorer Panel menu.

  • To show information about symbols, select Show Symbol Definitions from the Movie Explorer Panel menu.

Note:

The Movie Elements option and the Symbol Definitions option can be active at the same time.

Search for an item using the Find box

  1. In the Find box, enter the item name, font name, ActionScript string, or frame number. The Find feature searches all items that appear in the Movie Explorer.

Select an item in the Movie Explorer

  1. Click the item in the navigation tree. Shift-click to select more than one item.

    The full path for the selected item appears at the bottom of the Movie Explorer. Selecting a scene in the Movie Explorer shows the first frame of that scene on the Stage. Selecting an element in the Movie Explorer selects that element on the Stage if the layer containing the element is not locked.

Use the Movie Explorer Panel menu or context menu commands

  1. Do one of the following:
    • To view the Panel menu, click the Panel menu control in the Movie Explorer panel.

    • To view the context menu, right-click (Windows) or Control-click (Macintosh) an item in the Movie Explorer navigation tree.

  2. Select an option from the menu:

    Go To Location

    Jumps to the selected layer, scene, or frame in the document.

    Go To Symbol Definition

    Jumps to the symbol definition for a symbol that is selected in the Movie Elements area of the Movie Explorer. The symbol definition lists all the files associated with the symbol. (The Show Symbol Definitions option must be selected. See its definition in this list.)

    Select Symbol Instances

    Jumps to the scene containing instances of a symbol that is selected in the Symbol Definitions area of the Movie Explorer. (The Show Movie Elements option must be selected.)

    Show In Library

    Highlights the selected symbol in the document’s library. (Animate opens the Library panel if it is not already visible.)

    Rename

    Lets you enter a new name for a selected element.

    Edit In Place

    Lets you edit a selected symbol on the Stage.

    Edit In New Window

    Lets you edit a selected symbol in a new window.

    Show Movie Elements

    Shows the elements in your document organized into scenes.

    Show Symbol Definitions

    Shows all the elements associated with a symbol.

    Copy All Text To Clipboard

    It copies selected text to the clipboard. For spell checking or other editing, paste the text into an external text editor.

    Cut, Copy, Paste, And Clear

    Performs these common functions on a selected element. Modifying an item in the display list modifies the corresponding item in the document.

    Expand Branch

    Expands the navigation tree at the selected element.

    Collapse Branch

    Collapses the navigation tree at the selected element.

    Collapse Others

    Collapses the branches in the navigation tree that do not contain the selected element.

    Print

    Prints the hierarchical display list that appears in the Movie Explorer.

Using Animate components and components panel

A component in Animate is a reusable, packaged module that adds a particular capability to an Animate document. Components can include graphics and code, so they are pre-built functionality that you can easily include in your Animate projects. For example, a component can be a radio button, a dialog box, or a preload bar. It can also be something that has no graphics at all, such as a timer, a server connection utility, or a custom XML parser.

If you are less experienced with writing ActionScript, you can add components to a document and set their parameters in the Property inspector or Component inspector. Use the Behaviors panel to handle their events. For example, you could attach a Go To Web Page behavior to a Button component. Button can open a URL in a web browser when it is clicked without writing any ActionScript code.

If you are a programmer who wants to create more robust applications, you can create components dynamically. Use ActionScript to set properties and call methods at runtime, and use the event listener model to handle events.

Insert a component using the component panel

When you first add a component to a document, Animate imports it as a movie clip into the Library panel. You can also drag a component from the Components panel directly to the Library panel and then add an instance of it to the Stage. In any case, you must add a component to the library before you can access its class elements.

  1. Select Window > Component panel.

  2. Select an instance of a component in the Component panel, and drag it to the Stage or Library panel. After a component is added to the library, you can drag multiple instances to the Stage.
  3. Configure the component as needed using either the Property inspector or the Components inspector. For information on the parameters the component uses, refer to the appropriate component documentation for the version of ActionScript you are using in the Animate document.

Using the component parameters panel

Animate designers can import their external components to Animate and use them to build their animations. To make this workflow easier, Animate provides component parameters section as a panel. This feature lets you resize or move this panel around in Animate staging environment. You can also lock the panel in place by clicking the hamburger icon at the upper-right corner of the panel. Select the lock option from the menu.

You can open this panel by using Show Parameters button in the Property inspector or by using Window > Component Parameters. You can add values for the parameters in the dialog. 

Show parameters button
Show parameters button

Component parameters panel
Component parameters panel

In addition, HTML5 custom component developers can use HTML/CSS based user interface for its parameters.

About the web services panel

(Deprecated with Animate) You can view a list of web services, refresh web services, and add or remove web services in the Web Services panel. Click Window > Other Panels > Web Services . When you add a web service to the Web Services panel, the web service is then available to any application you create.

You can use the Web Services panel to refresh all your web services at once by clicking the Refresh Web Services button. If you are not using the stage but you are writing ActionScript code, you can use the Web Services panel to manage your web services.

Get help faster and easier

New user?