User Guide Cancel

Use the Stage and Tools panel for Animate

Search
Animate

Animate

Open app
  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

 

Use this article to learn about Stage and Tools panel when working with graphic content in Animate.

Welcome screen overview

When Animate (formerly Flash Professional CC) is running with no documents open, the Welcome screen appears. The Welcome screen contains the following four areas:

Open a Recent Item

Lets you open your most recent documents (click the Open icon).

Create New

Lists Animate file types, such as Animate documents and ActionScript® files.

Create from Template

Lists the templates most commonly used to create Animate documents.

Extend

Links to the Animate Exchange website, where you can download helper applications, extensions, and related information.

The Welcome screen also offers quick access to Help resources. You can take a tour of Animate, learn about documentation resources, and find Adobe Authorized Training facilities.

  • To hide the Welcome screen, select Don’t Show Again.

  • To show the Welcome screen, select Edit > Preferences (Windows®) or select Animate > Preferences (Macintosh®), and select Welcome Screen from the On Launch menu in the General category.

Using the Stage

The Stage is the rectangular area where you place graphic content when creating Animate documents. The Stage in the authoring environment represents the rectangular space in Flash Player or in a web browser window where your document appears during playback. A default black outline represents the outline view of the stage.

To change the view of the Stage as you work, zoom in and out. To help you position items on the Stage, you can use the grid, guides, and rulers.

The Timeline and Stage with content.

Zoom the stage

To view the entire Stage on the screen, or to view a particular area of your drawing at high magnification, change the magnification level. The maximum magnification depends on the resolution of your monitor and the document size. The minimum value for zooming out on the Stage is 8%. The maximum value for zooming in on the Stage is 2000%.

 You can also use multi-touch gestures in compatible devices.

  • To zoom in on an element, select the Zoom tool  in the Tools panel, and click the element. To switch the Zoom tool between zooming in or out, use the Enlarge  or Reduce  modifiers (in the options area of the Tools panel when the Zoom tool is selected) or Alt‑click (Windows) or Option-click (Macintosh).

  • To zoom in so that a specific area of your drawing fills the window, drag a rectangular selection on the Stage with the Zoom tool.

  • To zoom in on or out of the entire Stage, select View > Zoom In or View > Zoom Out.

  • To zoom in or out by a specified percentage, select View > Magnification, and select a percentage from the submenu or select a percentage from the Zoom control at the upper-right corner of the document window.

  • To scale the Stage so that it fits completely in the application window, select View > Magnification > Fit in Window.
  • To crop the content that flows outside the stage, click the Clip the Content Outside Stage icon.
  • To show the contents of the current frame, select View > Magnification > Show All, or select Show All from the Zoom control at the upper-right side of the application window. If the scene is empty, the entire Stage appears.

  • To show the entire Stage, select View > Magnification > Show Frame or select Show Frame from the Zoom control at the upper-right corner of the document window.

  • To show the workspace surrounding the Stage, or to view elements in a scene that are partly or outside of the Stage area, select View > Pasteboard. The pasteboard appears in light gray. For example, to have a bird fly into a frame, initially position the bird outside of the Stage in the pasteboard and animate it into the Stage area.

Pasteboard color

Earlier, the Pasteboard colors were fixed based on the User Interface theme. From January 2017 release onwards, you can have the pasteboard same as that of Stage color. This feature enables you to work with an infinite canvas. 

 Only stage content is visible in the final output.

Move the view of the Stage

When the Stage is magnified, you may not be able to see all the stage. To change the view without having to change the magnification, use the Hand tool to move the Stage.

 You can also use multi-touch gestures in compatible devices.

  • In the Tools panel, select the Hand tool and drag the Stage. To temporarily switch between another tool and the Hand tool, hold down the Spacebar and click the tool in the Tools panel.

Rotate the Stage

Animate introduces a new Rotation tool that lets you rotate the Stage view temporarily, to help you draw and paint at a particular angle, without permanently rotating the actual objects on stage as the Free Transform tool does. You can quickly rotate the Stage, regardless of which tool you have currently selected, by holding down the Shift and Space keys together, and then dragging your mouse to rotate the view.

To rotate the stage using the Rotation Tool

  1. Choose the Rotation tool  (H), that is grouped together with the Hand tool  (H) or, press Shift and Space keys together to switch to Rotation Tool temporarily while working with any other tool, such as Brush.

    Rotation Tool on the toolbar

  2. Once the Rotation Tool is selected, Pivot point for rotation appears on screen, indicated by a crosshair. You can change the position of the Pivot point by clicking at the desired position.

    The crosshair pivot point

  3. Once the Pivot point is set, you can drag the mouse to rotate the stage view around the pivot point.

    Rotated stage

  4. Using the stage Rotation Tool, drag to rotate the stage area temporarily. The current rotation angle is indicated by the red line on the Pivot crosshair.

  5. To reset the stage to its default view, click the Center Stage button.

Scale content to fit the stage size

The Scale Content option in PI allows you to scale the contents on your stage according to the stage size. When stage is resized with this option selected, content resizes in the same proportion as the stage.

Scale content option in PI

Scale stage size

The Scale Content option in advanced settings is now directly accessible from PI. When stage is resized with this option selected, content resizes in the same proportion as the stage.

PI and Document Settings dialog box contain a Link option to increase the stage dimensions proportionately. By default, the height and width properties of the stage are unlinked. If you click the Link button and enable linking, as you modify the values of either height or width properties, the value of the other property is changed proportionately.

If you select the Scale Content option, the stage dimensions are automatically linked and disabled. This is because content scaling makes sense if stage dimensions are modified proportionately.

Link button to proportionately scale stage size

Set Canvas Transperancy

You can set the canvas to the transperant mode by selecting the alpha color ranges in percentage in your color swatches. To do so,  select canvas>Properties> Stage> Alpha %.

Scale stage based on selected anchor

You can select an anchor point in Document Settings, specify the height and width, and scale the stage to the dimensions. When ‘Scale Content’ is disabled, the stage expands in the directions according to the selected anchor point, as detailed in the following images.

Anchor points based on which you can scale the stage

Stage scaling: an example

In the following example, the stage measuring 550x400 is proportionately scaled to 750x600 from the anchor point at the bottom right corner of the stage:

Setting stage scaling with the bottom right corner as anchor point

Stage scaled in the set direction from the anchor point at the bottom right corner

 You can also use multi-touch gestures in compatible devices.

Use rulers

When rulers show, they appear along the top and left sides of the document. You can change the unit of measure used in the rulers from the default of pixels to another unit. When you move an element on the Stage with the rulers displayed, lines indicating the element’s dimensions appear on the rulers.

  • To show or hide rulers, select View > Rulers.

  • To specify the rulers’ unit of measure for a document, select Modify > Document, and select a unit from the Ruler Units menu.

Use guides

When rulers show (View > Rulers), you can drag horizontal and vertical guides from the rulers onto the Stage.

When you create nested timelines, draggable guides appear on the Stage only when the Timeline in which they were created is active.

To create custom guides or irregular guides, use guide layers.

  • To display or hide the drawing guides, select View > Guides > Show Guides.

     If the grid is visible and Snap to Grid is turned on when you create guides, guides snap to the grid.

  • To turn snapping to guides on or off, select View > Snapping > Snap to Guides.

     Snapping to guides takes precedence over snapping to the grid in places where guides fall between grid lines.

  • To move a guide, click anywhere on the ruler with the Selection tool and drag the guide to the desired place on the Stage.

  • To remove a guide, use the Selection tool with guides unlocked to drag the guide to the horizontal or vertical ruler.

  • To lock guides, select View > Guides > Lock Guides or use the Lock Guides option in the Edit Guides (View > Guides > Edit Guides) dialog box.

  • To clear guides, select View > Guides > Clear Guides. If you are in document-editing mode, all guides in the document are cleared. If you are in symbol-editing mode, only guides used in symbols are cleared.

Set guide preferences

  1. Select View > Guides > Edit Guides and do any of the following:

    • To set Color, click the triangle in the color box and select a guide line color from the palette. The default guide color is green.

    • To display or hide guides, select or deselect Show Guides.

    • To turn snapping to guides on or off, select or deselect Snap To Guides.

    • Select or deselect Lock Guides.

    • To set Snap Accuracy, select an option from the pop‑up menu.

    • To remove all guides, click Clear All. Clear All removes all guides from the current scene.

    • To save the current settings as the default, click Save Default.

  2. Click OK.

Use the grid

The grid appears in a document as a set of lines behind the artwork in all scenes.

Display or hide the drawing grid

  1. Do one of the following:

    • Select View > Grid > Show Grid.

    • Press Control+'' (quote) (Windows) or Command+'' (quote) (Macintosh).

Turn snapping to grid lines on or off

  1. Select View > Snapping > Snap to Grid.

Set grid preferences

  1. Select View > Grid > Edit Grid and select from the options.

  2. To save the current settings as the default, click Save Default.

About the main toolbar and edit bar

The menu bar at the top of the application window contains menus with commands for controlling functionality.

The edit bar, at the top of the Stage, contains controls and information for editing scenes and symbols, and for changing the magnification level of the Stage.

Custom Toolbar

Animate 2020 release provides the capability to add, remove, combine or rearrange the Tools the way you want. Click the More Options icon ... in the toolbar to open the Tools Palette. 

Animate Toolbar
Animate Toolbar

Toolbar palette
Toolbar palette

You can drag tools from the Toolbar and drop it to the Tools Palette to remove them. Similarly, you can bring in tools from Tools Palette to your Toolbar by drag drop them at the desired location in Toolbar. 

Additionally, with these enhancements, you can:

  • Add/Remove tools from Tools panel to/from Tools Palette. 
  • Combine tools into a tool group by drag drop a tool over another tool or a group.
  • Rearrange a tool above or below a specific tool or group by drag drop the selected tool above or below the specific tool.

Logical Grouping of tools

Spacer
Logical grouping with spacer

You can make desired logical grouping of tools by adding a spacer between the list of tools. Drag and drop the spacer from the Tools Palette to the Tools panel and create such grouping.

Tear off toolbar

Tear off toolbar
Tear off toolbar

Once the Spacer is added, you can Tear-off the toolbar sub-group by dragging the spacer outside of  the Tools panel to the desired location of your work area. You can also merge the Tear-off toolbar back to the Tools panel. Select and drag the Tear-off toolbar to the Tools panel.

Flip
Tear off flipping

Tear-off toolbar can easily be reoriented to horizontal or vertical by clicking at the bottom highlighted section of the tool on mouse over.  

Reset toolbar
Reset toolbar

Resetting toolbar

Select the Reset option in the Tools Palette hamberger menu to set the Tools panel to its default state.

Sub-toolbar options

Fill color and Stroke Color

The fill color and stroke color section of the tool bar has been modified similar to Photoshop and illustrator Tools panel for consistency and easy access. 

Access to Brush and Eraser Modes

Now, you can also add keyboard shortcuts to Brush Modes and Eraser Modes. Create keyboard shortcuts on Mac, click Animate>Keyboard Shortcuts and on Windows, click Edit> Keyboard Shortcuts. Access these options with one press when the tool is enabled.

Fill color and stokes
Fill color and stokes

Erase mode
Erase mode

Brush mode
Brush mode

Use the Tools panel

The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change the view of the Stage. The Tools panel is divided into four sections:

  • The tools area contains drawing, painting, and selection tools.
  • The view area contains tools for zooming and panning in the application window.
  • The colors area contains modifiers for stroke and fill colors.
  • The options area contains modifiers for the currently selected tool. Modifiers affect the tool’s painting or editing operations.

To show or hide the Tools panel, select Window > Tools.

Select tools

  1. Do one of the following:

    • Click the tool in the Tools panel. Depending on the tool you select, a set of modifiers might appear in the options area at the bottom of the Tools panel.

    • Press the tool’s keyboard shortcut. To view the keyboard shortcuts, select Edit > Keyboard Shortcuts (Windows) or Animate > Keyboard Shortcuts (Macintosh). On the Macintosh, you might need to move the mouse to see the new pointer appear.

    • To select a tool located in the pop‑up menu for a visible tool such as the Rectangle tool, press the icon of the visible tool and select another tool from the pop‑up menu.

Pressure and Tilt in Paint Brush

Animate provides Pressure and Tilt support for strokes drawn using the Paint brush tool. You can draw art and pattern strokes with variable width, dependent on the applied pressure or tilt on the stylus. For further refinement, use the Width tool to adjust the width points.

For more information, see Working with PaintBrush. 

 Pressure and tilt icons in the tool bar are displayed only if you have connected a Wacom pressure-sensitive tablet to your computer.

Use context menus

Context menus contain commands relevant to the current selection. For example, when you select a frame in the Timeline window, the context menu contains commands for creating, deleting, and modifying frames and keyframes. Context menus exist for many items and controls in many locations, including on the Stage, in the Timeline, in the Library panel, and in the Actions panel.

  1. Right-click (Windows) or Control-click (Macintosh) an item.

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy