User Guide Cancel

Transforming and combining graphic objects 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

 

Transforming objects

You can transform graphic objects, groups, text blocks, and instances, by using the Free Transform tool or the options in the Modify > Transform menu. Depending on the type of element you select, you can transform, rotate, skew, scale, or distort the element. You can change or add to a selection during a transformation operation.

When you transform an object, group, text box, or instance, the Property inspector for that item displays any changes made to the item’s dimensions or position.

A bounding box appears during transform operations that involve dragging. The bounding box is rectangular (unless it was modified with the Distort command or the Envelope modifier), with its edges initially aligned parallel to the edges of the Stage. Transformation handles are on each corner and in the middle of each side. As you drag, the bounding box previews the transformations.

Move, realign, change, and track the transformation point

During a transformation, a transformation point appears at the center of a selected element. The transformation point is initially aligned with the object’s center point. You can move the transformation point, return it to its default location, and move the default point of origin.

For scaling, skewing, or rotating graphic objects, groups, and text blocks, the point opposite the point you drag is the point of origin by default. For example, the transformation point is the point of origin by default. You can move the default point of origin for a transformation.

  1. Select the Free Transform tool  , or select one of the Modify > Transform commands.

    Once you have begun a transformation, you can track the location of the transformation point in the Info panel and in the Property inspector.

  2. Do one of the following:
    • To move the transformation point, drag it from within the selected graphic object.

    • To realign the transformation point with the element’s center point, double-click the transformation point.

    • To switch the point of origin for a scale or skew transformation, hold down the Alt key (Windows) or Option key (Macintosh) while dragging your chosen object control point during the transformation.

    • In the Info panel, you can toggle to display Registration and Transformation points. The button appears as to indicate that the registration point coordinates are being displayed. On clicking the same button, it changes to , indicating that the Transformation coordinates are being displayed.

    Coordinate grid; Info panel with Registration/Transformation Point button in transformation mode, and with x and y coordinates of the selection transformation point visible.

Use the Free Transform tool

You can perform individual transformations or combine several transformations, such as moving, rotating, scaling, skewing, and distortion.

 The Free Transform tool cannot transform symbols, bitmaps, video objects, sounds, gradients, or text. If the multiple selection contains any of these items, only the shape objects are distorted. To transform a text block, first convert the characters to shape objects.

  1. Select a graphic object, group, instance, or text block on the Stage.
  2. Click the Free Transform tool  .

    Moving the pointer over and around the selection changes the pointer to indicate which transformation function is available.

  3. To transform the selection, drag the handles:
    • To move the selection, position the pointer over the object within the bounding box, and drag the object to a new position. Do not drag the transformation point.

    • To set the center of rotation or scaling, drag the transformation point to a new location.

    • To rotate the selection, position the pointer just outside a corner handle and drag. The selection rotates around the transformation point. Shift-drag to rotate in 45° increments.

    • To rotate around the opposite corner, Alt-drag (Windows) or Option-drag (Macintosh).

    • To scale the selection, drag a corner handle diagonally to scale in two dimensions. Shift-drag to resize proportionally.

    • To scale in the respective direction only, drag a corner handle or a side handle horizontally or vertically.

    • To skew the selection, position the pointer on the outline between the transformation handles and drag.

    • To distort shapes, press Control (Windows) or Command (Macintosh) and drag a corner handle or a side handle.

    • To taper the object, move the selected corner and the adjoining corner equal distances from their origins, Shift-Control-click to drag (Windows) or Shift-Command-click to drag (Macintosh) a corner handle.

  4. To end the transformation, click outside the selected item.

Distort objects

When you apply a Distort transformation to a selected object, dragging a corner handle or an edge handle on the bounding box moves the corner or edge and realigns the adjoining edges. To constrain the distortion to a taper, Shift-drag a corner point by moving that corner and the adjoining corner an equal distance and in the opposite direction from each other. The adjoining corner is the corner on the same axis as the direction you drag. Drag a middle point on an edge to move the entire edge freely by using Control-click (Windows) or Command-click (Macintosh).

You can distort graphic objects by using the Distort command. You can also distort objects when performing a free transform on them.

 The Distort command cannot modify symbols, shape primitives, bitmaps, video objects, sounds, gradients, object groups, or text. If  the multiple selection contains any of these items, only the shape objects are distorted. To modify text, first convert the characters to shape objects.

  1. Select a graphic object or objects on the Stage.
  2. Select Modify > Transform > Distort.

  3. Place the pointer on one of the transformation handles and drag.
  4. To end the transformation, click outside the selected object or objects.

Modify shapes with the Envelope modifier

The Envelope modifier lets you warp and distort objects. An envelope is a bounding box that contains one or more objects. Changes made to an envelope’s shape affect the shape of the objects in the envelope. You edit the shape of an envelope by adjusting its points and tangent handles.

 The Envelope modifier cannot modify symbols, bitmaps, video objects, sounds, gradients, object groups, or text. If the multiple selection contains any of these items, only the shape objects are distorted. To modify text, first convert the characters to shape objects.

  1. Select a shape on the Stage.
  2. Select Modify > Transform > Envelope.

  3. Drag the points and tangent handles to modify the envelope.

Scale objects

Scaling an object enlarges or reduces the object horizontally, vertically, or both.

  1. Select a graphic object or objects on the Stage.

  2. Select Modify > Transform > Scale.

  3. Do one of the following:
    • To scale the object both horizontally and vertically, drag one of the corner handles. Proportions are maintained as you scale. Shift-drag to scale nonuniformly.

    • To scale the object either horizontally or vertically, drag a center handle.

  4. To end the transformation, click outside the selected object or objects.

     When you increase the size of some items, items near the edges of the bounding box might be moved off the Stage. If this issue occurs, select View > Pasteboard to see the elements that are beyond the edges of the Stage.

Rotate and skew objects

Rotating an object turns it around its transformation point. The transformation point is aligned with the registration point, which defaults to the center of the object, but you can move the point by dragging it.

You can rotate an object by the following methods:

  • Dragging with the Free Transform tool  (you can skew and scale the object in the same operation).

  • By specifying an angle in the Transform panel (you can scale the object in the same operation).

Rotate and skew objects by dragging

  1. Select the object or objects on the Stage.
  2. Select Modify > Transform > Rotate And Skew.

  3. Do one of the following:
    • Drag a corner handle to rotate the object.

    • Drag a center handle to skew the object.

  4. To end the transformation, click outside the selected object or objects.

Rotate objects by 90°

  1. Select the object or objects.
  2. Select Modify > Transform > Rotate 90° CW to rotate clockwise, or Rotate 90° CCW to rotate counterclockwise.

Skew objects

Skewing an object transforms it by slanting it along one or both axes. You can skew an object by dragging or by entering a value in the Transform panel.

  1. Select the object or objects.
  2. Select Window > Transform.

  3. Click Skew.
  4. Enter angles for the horizontal and vertical values.

Flip objects

You can flip objects across their vertical or horizontal axis without moving their relative position on the Stage.

  1. Select the object.
  2. Select Modify > Transform > Flip Vertical or Flip Horizontal.

Restore transformed objects

When you use the Free Transform tool or the Transform panel to scale, rotate, and skew instances, groups, and text, Animate saves the original size and rotation values with the object. This lets you remove the transformations you applied and restore the original values.

You can undo only the most recent transformation when you select Edit > Undo. You can remove all transformations by clicking the Remove Transform button in the panel before you deselect the object. After you deselect the object, the original values are lost and the transformation cannot be removed.

Restore a transformed object to its original state

  1. Ensure that the transformed object is still selected.

  2. Do one of the following:
    • Click the Remove Transform button  in the Transform panel

    • Select Modify > Transform > Remove Transform

Asset sculpting for vector and raster content

A new Asset warp tool has been introduced in Animate 19.0 release. You can use the asset warp tool to create warp handles on shapes, drawing objects, and bitmaps in Animate. By dragging the warp handles with asset warp tool, you can deform the shapes, drawing objects, and bitmaps. 

Asset warp tool
Asset warp tool

Using the warp handles that appear on the objects, you can re-shape or distort specific object areas while leaving other areas intact. All the selected objects are grouped when you create the first warp handle. On inserting a keyframe, the warp handles from the previous keyframe are copied to the new keyframe.

Some of the cursor styles that appear when you hover mouse on objects with the asset warp tool are shown below for your reference.

This cursor appears when the asset warp tool is not supported on an object.

- This cursor indicates that you can use the asset warp tool to create warp handles on an object.

- This cursor indicates that you can click the warp handle to reshape an object.

Cursor moveto

This cursor indicates that you can rotate the object.

Using the asset warp tool

  1. To begin, create a shape or import a bitmap image on the stage. 

  2. Click the asset warp tool from the toolbar.

  3. When you hover mouse over a shape or drawing object, a symbol appears. You can then click to add warp handles. 

    Hover mouse over a shape or drawing object
    Hover mouse over a shape or drawing object

  4. Asset warp handles are displayed as small solid circles on the shape/drawing object. You could use as many handles as you need to warp the shape effectively. Use the Delete key from keyboard to delete a puppet warp handle.

    Asset warp handles
    Asset warp handles

  5. Shift + Click the puppet warp handles to select multiple handles. You can drag the handles using asset warp tool to deform the shape as per your requirement.

    Deforming shapes using handles
    Deforming shapes using handles

    Deforming bitmaps using handles

  6. Choose one of the two modes associated with warp handles.

        a.    Open mode - This mode allows more degrees of freedom around the handle during deformation. A handle in this mode is drawn as a white solid-circle.

        b.    Fixed mode - This mode allows lesser degrees of freedom around the handle during deformation. A handle in this mode is drawn as a black solid-circle.

    To toggle between the two modes, use Alt + Click on the warp handles. 

Bring Bitmaps to life via Asset Warp Tool

Bitmaps are an important part while creating animations. Want to learn import these bitmaps and bring life to it? Watch the tutorial at the end of this example and follow these steps.

  1. Click File> Import> Import Stage.

  2. Select the desired image.

  3. In the Properties, select the Asset Warp Tool.

How to bring your imported bitmaps to life with ease

Watch the video to know how to deform an image and animate it using asset warp tool.

Ease out with Asset warp Tool

Creating animation is a tedious process. With Asset Warp tool, designing animations is easier and simple. Want to learn how Asset Warp tool is used to cut down the drawing time. Watch the tutorial at the end of this example and follow these steps.

  1. In the Tools, click Asset Wrap Tool.

  2. When you hover the mouse over a shape or drawing object, a symbol appears. You can then click to add warp handles.

  3. Asset warp handles are displayed as small solid circles on the shape/drawing object. You could use as many handles as you need to warp the shape effectively.

  4. Shift + Click the puppet warp handles to select multiple handles. You can drag the handles using asset warp tool to deform the shape as per your requirement.

How to create animations with ease using the asset warp tool

Watch the video to know more about Asset warp tool and other tools that support it.

Editing a base shape

Base shape is the shape before applying any warping. Asset warping works on meshes overlaid on top of the base shape. You can also modify the base shape by switching to selection tool and then double-clicking on the warped shape. Any modifications you make on the base shape are applied to all the warped instances of that shape. This feature works only on vector shapes.

Asset warp shape properties
Asset warp shape properties

Tweening for Asset warp tool

You can use classic tweening with the Asset Warp tool. For example, you can apply Classic Tween to tween puppet poses. 

Click here to learn more about classic tweening. 

 To tween the poses, you should use same set of handles in the shape.

Combining objects

To create new shapes by combining or altering existing objects, use the Combine Objects commands in the Modify menu (Modify > Combine Objects). Sometimes, the stacking order of selected objects determines how the operation works.

Each command applies to specific types of graphic objects, which are noted below. A merge shape is a shape drawn with a tool set to Merge Drawing mode. A drawing Object is a shape drawn with a tool set to Object Drawing mode.

The Combine Objects commands are:

Union

Joins two or more merge shapes or drawing objects. The result is a single Object Drawing mode shape consisting of all the portions visible on the shapes before they were unified. The unseen, overlapping portions of the shapes are deleted.

 

 Unlike when you use the Group command (Modify > Group), you cannot break apart shapes joined by using the Union command.

Intersect

Creates an object from the intersection of two or more drawing objects. The resulting Object Drawing shape consists of the overlapping portions of the combined shapes. Any part of the shape that doesn’t overlap is deleted. The resulting shape uses the fill and stroke of the top-most shape in the stack.

Punch

Removes portions of a selected drawing object as defined by the overlapping portions of another selected drawing object positioned in front of it. Any part of a drawing object that is overlapped by the top-most object is deleted, and the top-most object is deleted entirely. The resulting objects remain separate and are not combined into a single object (unlike the Union or Intersect commands, which join the objects together).

Crop

Uses the outline of one drawing object to crop another drawing object. The front or top-most object defines the shape of the cropped area. Any part of an underlying drawing object that overlaps with the top-most object remains, while all other portions of the underlying objects are deleted, and the top-most object is deleted entirely. The resulting objects remain separate, and are not combined into a single object (unlike the Union or Intersect commands, which join the objects).

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online