User Guide Cancel

Transforming and combining graphic objects in Animate

Last updated on

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.

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.
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.

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

Moving the pointer over and around the selection changes the pointer to indicate which transformation function is available.
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.
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.

Select a graphic object or objects on the Stage.
Select Modify > Transform > Distort.
Place the pointer on one of the transformation handles and drag.
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.

Select a shape on the Stage.
Select Modify > Transform > Envelope.
Drag the points and tangent handles to modify the envelope.

Scale objects

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

Select a graphic object or objects on the Stage.
Select Modify > Transform > Scale.
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.
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

Select the object or objects on the Stage.
Select Modify > Transform > Rotate And Skew.
Do one of the following:
- Drag a corner handle to rotate the object.
- Drag a center handle to skew the object.
To end the transformation, click outside the selected object or objects.

Rotate objects by 90°

Select the object or objects.
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.

Select the object or objects.
Select Window > Transform.
Click Skew.
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.

Select the object.
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

Ensure that the transformed object is still selected.
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

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.

This cursor indicates that you can rotate the object.

Using the asset warp tool

To begin, create a shape or import a bitmap image on the stage.
Click the asset warp tool from the toolbar.
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
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
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 bitmaps using handles
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.

Click File> Import> Import Stage.
Select the desired image.
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.

In the Tools, click Asset Wrap Tool.
When you hover the mouse over a shape or drawing object, a symbol appears. You can then click to add warp handles.
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.
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.

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).

More like this

Adobe

Get help faster and easier

New user?