Create symbol instances on the Stage. To save time later, arrange the instances so that they approximate spatial configuration you want.
- Adobe Animate User Guide
- Introduction to Animate
- Animation
- Animation basics in Animate
- How to use frames and keyframes in Animate
- Frame-by-frame animation in Animate
- How to work with classic tween animation in Animate
- Brush Tool
- Motion Guide
- Motion tween and ActionScript 3.0
- About Motion Tween Animation
- Motion tween animations
- Creating a Motion tween animation
- Using property keyframes
- Animate position with a tween
- How to edit motion tweens using Motion Editor
- Editing the motion path of a tween animation
- Manipulating motion tweens
- Adding custom eases
- Creating and applying Motion presets
- Setting up animation tween spans
- Working with Motion tweens saved as XML files
- Motion tweens vs Classic tweens
- Shape tweening
- Using Bone tool animation in Animate
- Work with character rigging in Animate
- How to use mask layers in Adobe Animate
- How to work with scenes in Animate
- Interactivity
- How to create buttons with Animate
- Convert Animate projects to other document type formats
- Create and publish HTML5 Canvas documents in Animate
- Add interactivity with code snippets in Animate
- Creating custom HTML5 Components
- Using Components in HTML5 Canvas
- Creating custom Components: Examples
- Code Snippets for custom Components
- Best practices - Advertising with Animate
- Virtual Reality authoring and publishing
- Workspace and workflow
- Creating and managing Paint brushes
- Using Google fonts in HTML5 Canvas documents
- Using Creative Cloud Libraries and Adobe Animate
- Use the Stage and Tools panel for Animate
- Animate workflow and workspace
- Using web fonts in HTML5 Canvas documents
- Timelines and ActionScript
- Working with multiple timelines
- Set preferences
- Using Animate authoring panels
- Create timeline layers with Animate
- Export animations for mobile apps and game engines
- Moving and copying objects
- Templates
- Find and Replace in Animate
- Undo, redo, and the History panel
- Keyboard shortcuts
- How to use the timeline in Animate
- Creating HTML extensions
- Optimization options for Images and Animated GIFs
- Export settings for Images and GIFs
- Assets Panel in Animate
- Multimedia and Video
- Transforming and combining graphic objects in Animate
- Creating and working with symbol instances in Animate
- Image Trace
- How to use sound in Adobe Animate
- Exporting SVG files
- Create video files for use in Animate
- How to add a video in Animate
- Draw and create objects with Animate
- Reshape lines and shapes
- Strokes, fills, and gradients with Animate CC
- Working with Adobe Premiere Pro and After Effects
- Color Panels in Animate CC
- Opening Flash CS6 files with Animate
- Work with classic text in Animate
- Placing artwork into Animate
- Imported bitmaps in Animate
- 3D graphics
- Working with symbols in Animate
- Draw lines & shapes with Adobe Animate
- Work with the libraries in Animate
- Exporting Sounds
- Selecting objects in Animate CC
- Working with Illustrator AI files in Animate
- Applying blend modes
- Arranging objects
- Automating tasks with the Commands menu
- Multilanguage text
- Using camera in Animate
- Graphic filters
- Sound and ActionScript
- Drawing preferences
- Drawing with the Pen tool
- Platforms
- Convert Animate projects to other document type formats
- Custom Platform Support
- Create and publish HTML5 Canvas documents in Animate
- Creating and publishing a WebGL document
- How to package applications for AIR for iOS
- Publishing AIR for Android applications
- Publishing for Adobe AIR for desktop
- ActionScript publish settings
- Best practices - Organizing ActionScript in an application
- How to use ActionScript with Animate
- Accessibility in the Animate workspace
- Writing and managing scripts
- Enabling Support for Custom Platforms
- Custom Platform Support Overview
- Working with Custom Platform Support Plug-in
- Debugging ActionScript 3.0
- Enabling Support for Custom Platforms
- Exporting and Publishing
- How to export files from Animate CC
- OAM publishing
- Exporting SVG files
- Export graphics and videos with Animate
- Publishing AS3 documents
- Export animations for mobile apps and game engines
- Exporting Sounds
- Best practices - Tips for creating content for mobile devices
- Best practices - Video conventions
- Best practices - SWF application authoring guidelines
- Best practices - Structuring FLA files
- Best Practices to optimize FLA files for Animate
- ActionScript publish settings
- Specify publish settings for Animate
- Exporting projector files
- Export Images and Animated GIFs
- HTML publishing templates
- Working with Adobe Premiere Pro and After Effects
- Quick share and publish your animations
- Troubleshooting
About inverse kinematics
Inverse kinematics (IK) is a way of animating objects using bones chained into linear or branched armatures in parent-child relationships. When one bone moves, connected bones move in relation to it.
Inverse kinematics lets you easily create natural motion. To animate using inverse kinematics, you simply specify the start and end positions of bones on the Timeline. Animate automatically interpolates the positions of the bones in the armature between the starting and ending frames.
You can use IK in the following ways:
By using a shape as a container for multiple bones. For example, you can add bones to a drawing of a snake so that it slithers realistically. You can draw these shapes in Object Drawing mode.
By chaining symbol instances. For example, you can link movie clips showing a torso, arm, lower arm, and hand so that they move realistically in relation to each other. Each instance has only one bone.
Bone styles
There are 4 ways that Animate can draw bones on the Stage:
- Solid. This is the default style.
- Wired. Useful when the solid style obscures too much of the artwork beneath the bone.
- Line. Useful for smaller armatures.
- None. Hides the bones to show only the artwork beneath them.
To set the Bone Style, select the IK span in the Timeline and then select the style from the Style menu in the Options section of the Properties panel.
Note: If you save a document with the Bone Style set to None, Animate automatically changes bone style to Line the next time you open the document.
Pose layers
When you add bones to symbol instances or shapes, Animate creates a new layer for them in the Timeline. This new layer is called the pose layer. Animate adds the pose layer to the Timeline between existing layers to maintain the previous stacking order of objects on the Stage.
Add bones to symbols
You can add IK bones to movie clip, graphic, and button instances. To use text, convert it to a symbol first. The symbol instances can be on different layers before you add bones. Animate adds them to the pose layer.
Note: You can also break text apart (Modify > Break Apart) into separate shapes and use bones with the individual shapes.
As you chain objects, consider the parent-child relationships you want to create, for example, from shoulder to elbow to wrist.
-
-
Select the Bone tool from the Tools panel.
-
Click the symbol instance that you want to set as the root bone of the armature. Click at the point where you want to attach the bone to the symbol.
By default, Animate creates the bone at the location of mouse click. For a more precise way of adding a bone, turn off Auto Set Transformation Point for IK Bone Tool (Edit > Preferences > Drawing). With Auto Set Transformation Point turned off, the bone will snap to the symbol transformation point when you click from one symbol to the next.
-
Drag to another symbol instance and release the mouse button at the point where you want to attach it.
-
To add another bone to the armature, drag from the tail of the first bone to the next symbol instance.
It’s easier to place the tail precisely if you turn off Snap To Objects (View > Snapping > Snap To Objects).
-
To create a branched armature, click the head of an existing bone where you want the branch to begin. Then drag to create the first bone of the new branch.
An armature can have as many branches as necessary.
Note: A branch cannot connect to another branch except at its root.
-
To reposition the elements of the completed armature, drag either the bones or the instances themselves.
- Dragging a bone moves its associated instance without allowing it to rotate relative to its bone.
- Dragging an instance allows it to move as well as rotate relative to its bone.
- Dragging an instance in the middle of a branch causes the parent bones to articulate with joint rotation. The child bones move with no joint rotation.
After you create an armature, you can still add new instances from different layers to the armature. Drag a new bone to the new instance and Animate moves the instance to the pose layer of the armature.
Add bones to shapes
You add bones to a single shape or to a group of shapes that are on the same layer. In either case, you must select all the shapes before adding the first bone. After you add bones, Animate converts all the shapes and bones into an IK shape object and moves the object to a new pose layer.
After you have added bones to a shape, the shape has the following limitations:
- You cannot merge an IK shape with other shapes outside it.
- You cannot rotate, scale, or skew the shape with the Free Transform tool.
- Editing the control points of the shape is not recommended.
-
Create a filled shape or shapes on the Stage.
The shape can contain multiple colors and strokes. Edit the shapes so they are as close to their final form as possible. Once you add bones to a shape, the options for editing the shape become more limited.
If the shape is too complex, Animate will prompt you to convert it to a movie clip before adding bones.
-
Select the entire shape on the Stage.
If the shape contains multiple color areas or strokes, drag a selection rectangle around the shape to ensure that the entire shape is selected.
-
Select the Bone tool in the Tools panel.
-
With the Bone tool, click inside the shape and drag to another location within the shape.
-
To add another bone, drag from the tail of the first bone to another location in within the shape.
The second bone becomes a child of the root bone. Link areas of the shape with bones in the order of the parent-child relationships you want to create. For example, link from shoulder to elbow to wrist.
-
To create a branched armature, click the head of an existing bone where you want the branch to begin. Then drag to create the first bone of the new branch.
An armature can have as many branches as necessary.
Note: A branch cannot connect to another branch except at its root.
-
To move the armature, select the IK shape object with the Selection tool and then drag any of the bones to move them.
Once the shape becomes an IK shape, it has the following limitations:
- You can no longer transform (scale or skew) the shape.
- You cannot add new strokes to the shape. You can still add or remove control points from the existing strokes of the shape.
- You cannot edit the shape in place (by double-clicking it on the Stage.)
- The shape has its own registration point, transform point, and bounding box.
On-stage controls
On-stage controls allow you to easily make rotation and translation adjustments on the stage with the help of guides that show the rotation range and precise control. The on-state controls also allow you to continue working on the stage without having to go back to the property inspector to adjust rotation.
- To start working with the on-stage controls, select the bone and use the head of the bone.
- To view the on-stage controls, roll-over the head of the bone. The head turns in to a four-way arrows or a plus symbol (X and Y axis) inside a circle. The arrows represent the translation attributes and the circle represents rotation attributes.
- Click on the head of the bone and select the circle to edit rotation or select the plus symbol to edit translation attributes.
- To see the presence of interactive handles for rotation and translatsion at anytime, roll over the head of the bone.
- When you click on either the rotation or translation option, the on-stage controls to set the constraints are displayed.
Using the rotation controls
To work with the rotation controls, do the following:
- Click the bone head to see the rotation and translation tools.
- Roll over and click the circle that represents the rotation tool. The circle turns red.
- Click on the lock icon to enable free rotation. Lock icon turns to a dot.
- Moving the cursor away from the center shows you one end of the rotation radius. Click on the point on which you want the rotation to start.
- Move the cursor within the circle again to select the other end of the rotation radius. Click where you want that point to be.
- Confirm the radius definition by clicking on the circle.
Note: When you edit the rotation that you have already defined, you can increase or decrease the borders by clicking on the line and dragging.
Using the translation controls
You can use the translation controls as follows:
- Roll over the plus sign with four-way arrows and click on it to select the translation controls.
- Click on the lock to enable the translation controls. The lock icon turns into a dot.
- Click on an arrow head and drag it to the point to which you want the extend the range of movement.
Edit IK armatures and objects
You can’t edit IK armatures if the pose layer includes poses after the first frame of the Timeline. Before editing, delete any additional poses after the first frame of the armature in the Timeline.
If you are simply repositioning an armature for animation purposes, you can change positions in any frame of the pose layer. Animate converts the frame to a pose frame.
Select bones and associated objects
- To select an individual bone, click the bone with the Selection tool. Shift-click to select multiple bones.
- To move the selection to adjacent bones, click the Parent, Child, or Next/Previous sibling buttons in the Property inspector.
- To select all the bones in the armature, double-click a bone.
- To select an entire armature and display the properties of the armature and its pose layer, click a frame in the pose layer containing the armature.
- To select an IK shape, click the shape.
- To select a symbol instance connected to a bone, click the instance.
Reposition bones and associated objects
- To reposition a linear armature, drag any bone in the armature. If the armature contains connected symbol instances, you can also drag an instance. In this way you can rotate the instance relative to its bone.
- To reposition a branch of an armature, drag any bone in the branch.
- All the bones in the branch move. Bones in other branches of the armature do not move.
- To rotate a bone with its child bones without moving the parent bone, Shift-drag the bone.
- To move an IK shape to a new location on the Stage, select the shape and change its X and Y properties in the Property inspector. You can also Alt-drag (Windows) or Option-drag (Macintosh) the shape.
Delete bones
Do one of the following:
- To delete an individual bone and all of its children, click the bone and press the Delete key.
- You can select multiple bones to delete by Shift-clicking each bone.
- To delete all bones from an IK shape or symbol armature from the Timeline, right-click the IK armature span in the Timeline and choose Remove Armature from the context menu.
- To delete all bones from an IK shape or a symbol armature on the Stage, double click a bone in the armature to select all bones. Then press Delete.IK shapes revert to normal shapes.
Move bones relative to the associated shape or symbol
- To move the location of either end of a bone within an IK shape, drag the end of the bone with the Subselection tool.
Note: The Subselection tool does not work if there are multiple poses in the IK span. Before editing, delete any additional poses after the first frame of the armature in the Timeline.
- To move the location of a bone joint, head, or tail within a symbol instance, move the transformation point of the instance. Use the Free Transform tool. The bone moves with the transformation point.
- To move an individual symbol instance without moving any other linked instances, Alt-drag (Windows) or Command-drag (Macintosh) the instance, or drag with the Free Transform tool. The bones connected to the instance lengthen or shorten to accommodate the new location of the instance.
Edit an IK shape
You can add, delete, and edit control points of the contours in an IK shape using the Subselection tool.
- To move the position of a bone without changing the IK shape, drag the endpoint of a bone.
- To display the control points of the IK shape boundary, click the stroke of the shape.
- To move a control point, drag the control point.
- To add a new control point, click a part of the stroke without any control points.
- To delete an existing control point, click to select it, and then press the Delete key.
Note: An IK shape cannot be transformed (scaled or skewed).
Bind bones to shape points
By default, the control points of a shape are connected to the bone that is nearest to them. You can use the Bind tool to edit the connections between individual bones and the shape control points. In this way you can control how the stroke distorts when each bone moves for better results. This technique is useful when the stroke of a shape does not distort as you want when the armature moves.
You can bind multiple control points to a bone and multiple bones to a control point.
To highlight the control points connected to a bone, click the bone with the Bind tool.
The connected points are highlighted in yellow while the selected bone is highlighted in red. Control points connected to only one bone appear as squares. Control points connected to more than one bone appear as triangles.
To add control points to a selected bone, Shift-click a control point that is not highlighted.
You can also Shift-drag to select multiple control points to add to the selected bone.
To remove control points from the bone, Ctrl-click (Windows) or Option-click (Macintosh) a control point that is highlighted in yellow.
You can also Ctrl-drag (Windows) or Option-drag (Macintosh) to remove multiple control points from the selected bone.
To highlight the bones connected to a control point, click the control point with the Bind tool.
The connected bones are highlighted in yellow while the selected control point is highlighted in red.
To add other bones to the selected control point, Shift-click a bone.
To remove a bone from a selected control point, Ctrl-click (Windows) or Option-click (Macintosh) a bone that is highlighted in yellow.
Constrain motion of IK bones
To create more realistic motion of IK armatures, you can control the freedom of motion of specific bones. For example, you can constrain two bones of an arm so that the elbow cannot bend in the wrong direction.
By default, each IK bone is assigned a fixed length when the bone is created. Bones can rotate around their parent joint and along the x- and y-axis. However, they cannot move in ways that require the length of their parent bone to change unless you enable x- or y-axis motion. By default, bone rotation is enabled and x- and y-axis motion is disabled.
You can also limit the speed of motion of a bone to create the effect of weight in a bone.
In armatures with strings of connected bones, you cannot contrain the motion of the last joint in any branch of the armature. To give the appearance of contraint of the last joint, use bones with movie clips and connect the last bone to a movie clip that has its alpha property set to zero. Then constrain the next-to-last bone instead of the last one.
Examples:
For an arm, you could constrain the degrees of rotation of the elbow so that it cannot rotate beyond the normal range of motion of a forearm.
To enable a character to move across the Stage, turn on X or Y translation on the root bone. Turn off rotation when using X and Y translation for more accurate movement.
You set these properties in the Property inspector when one or more bones are selected.
To enable a selected bone to move along the x- or y- axis and change the length of its parent bone, select Enable in the Joint: X Translation or Joint: Y Translation section of the Property inspector.
A two-headed arrow appears perpendicular to the bone on the joint to indicate that x-axis motion is enabled. A two-headed arrow appears parallel to the bone on the joint to indicate that y-axis motion is enabled. Enabling both x and y translation for a bone simplifyies the task of positioning the bone when rotation is disabled for the bone.
To limit the amount of motion enabled along the x- or y-axis, select Constrain in the Joint: X Translation or Joint: Y Translation section of the Property inspector and enter a value for the minimum and maximum distance the bone can move.
To disable rotation of the selected bone around the joint, deselect the Enable checkbox in the Joint: Rotation section of the Property inspector.
This checkbox is selected by default.
To constrain rotation of a bone, enter minimum and maximum degrees of rotation in the Joint: Rotation section of the Property inspector.
The degrees of rotation are relative to the parent bone. An arc appears on top of the bone joint indicating the degrees of freedom of rotation.
To make a selected bone stationary relative to its parent bone, disable rotation and x- and y-axis translation.
The bone becomes rigid and follows the motion of its parent.
To limit the speed of motion of a selected bone, enter a value in the Joint Speed field in the Property inspector.
Joint speed gives the bone the effect of weight. The maximum value of 100% is equivalent to unlimited speed.
Add springness to bones
Two bone properties can be used to add springiness to IK bones. The Strength and Damping properties of bones give real physical movement to IK Bones by integrating dynamic physics into the Bones IK system. These properties allow easier creation of physics-enhanced animation. The Strength and Damping properties give bone animation life-like movement that is highly configurable. It is best to set these properties before adding poses to a pose layer.
Strength: The stiffness of the spring. Higher values create a stiffer spring effect.
Damping: The rate of decay of the spring effect. Higher values cause the springiness to diminish more quickly. A value of 0 causes the springiness to remain at its full strength throughout the frames of the pose layer.
To enable springiness, select one or more bones and set the Strength and Damping values in the Spring section of the Property inspector. The higher the Strength, the more rigid the spring becomes. Damping determines the rate of decay of the spring effect, so the higher the value, the faster the animation ends.
To turn off the Strength and Damping properties, select the pose layer in the Timeline and deselect the Enable checkbox in the Spring section of the Property inspector. This allows you to see on Stage the poses you have defined in the pose layer without the effect of the Spring properties.
The following factors affect the final look of your bones animation when working with the Spring properties. Experiment with adjusting each of these to acheive the final look you want.
The Strength property value.
The Damping property value.
The number of frames between poses in the pose layer.
The total number of frames in the pose layer.
The number of frames between the final pose and the last frame of the pose later.
Animate an armature
You animate IK armatures differently from other objects in Animate. With armatures, you simply add frames to the pose layer and reposition the armature on the Stage to create a keyframe. Keyframes in pose layers are called poses. Because IK armatures are typically used for animation purposes, each pose layer acts as a tween layer automatically.
However, IK pose layers are different from tween layers because you cannot tween properties other than bone position in the pose layer. To tween other properties of an IK object such as location, transform, color effects, or filters, enclose the armature and its associated objects in a movie clip or graphic symbol. You can then animate the properties of the symbol using the Insert > Motion Tween command and the Motion Editor panel.
You can also animate IK armatures with ActionScript 3.0 at runtime. If you plan to animate an armature with ActionScript, you cannot animate it in the Timeline. The armature can have only one pose in the pose layer. That pose must be in the first frame in which the armature appears in the pose layer.
Hide editing controls during animation
Keeping all the on-stage controls always enabled can result in inadvertantly altering the positioning and the properties of your armature. After creating bones and armature for animation, you can turn off the armature editing controls and hints by selecting the Hide armature editing controls and hints checkbox in the property inspector.
Animate an armature in the Timeline
IK armatures exist on pose layers in the Timeline. To animate armatures in the Timeline, insert poses by right-clicking a frame in a pose layer and selecting Insert Pose. Use the Selection tool to change the configuration of the armature. Animate automatically interpolates the positions of the bones in the frames between poses.
When you finish, scrub the playhead in the Timeline to preview the animation. You can see the armature positions interpolated in between the pose frames.
You can reposition the armature in the pose frames or add new pose frames at any time.
Edit the location of poses in an armature
You can edit the location of poses in the following ways:
To move a pose to a new location, Ctrl-click (Windows) or Command-click (Macintosh) a pose and then drag the pose to a new location in the armature.
To copy a pose to a new location, Ctrl-click (Windows) or Command-click (Macintosh) a pose and then Alt-drag (Windows) or Option-drag (Macintosh) the pose to a new location in the armature.
Cut, copy and paste. Ctrl-click (Windows) or Command-click (Macintosh) the pose you want to cut or copy and choose Cut Pose or Copy Pose from the context menu.
Then Ctrl-Click (Windows) or Command-click (Macintosh) the frame in the armature span where you want to paste and choose Paste Pose from the context menu.
Apply additional tweened effects to IK object properties
To apply tweened effects to IK object properties other than bone position, enclose the object in a movie clip or graphic symbol.
You can nest symbols containing IK armatures within as many layers of other nested symbols as necessary to create your desired effect.
Prepare an armature for runtime animation with ActionScript 3.0
You can use ActionScript 3.0 to control IK armatures connected to shapes or movie clip instances. However, you can’t control armatures connected to graphic or button symbol instances with ActionScript.
Only armatures with a single pose can be controlled with ActionScript. Armatures with more than one pose can only be controlled in the Timeline.
- With the Selection tool, select a frame in a pose layer containing an armature.
- In the Property inspector, choose Runtime from the Type menu.
The hierarchy can now be manipulated with ActionScript 3.0 at runtime.
By default, the armature name in the Property inspector is the same as the pose layer name. Use this name to refer to the armature in ActionScript. You can change the name in the Property inspector.
Add easing to IK animation
Easing is adjusting the animation speed in the frames around each pose to create more realistic motion.
- Select either a frame between two pose frames in the pose layer or a pose frame.
- Intervening frame: Ease affects the frames between the pose frames to the left and right of the selected frame.
- Pose frame: Ease affects the frames between the selected pose and the next pose in the layer.
- In the Property inspector, select a type of ease from the Ease menu.
- Simple eases: Four eases that slow the motion in the frames either immediately after or before the selected frame.
- Start and Stop eases: Slow the motion in the frames immediately after the prior pose frame and the frames immediately before the next pose frame.
- In the Property inspector, enter a value for the Strength of the ease.
The default Strength is 0, which is equivalent to no easing. The maximum value is 100, which applies the most significant easing effect to the frames preceding the pose frame. The minimum value is -100, which applies the most significant easing effect to the frames immediately after the preceding pose frame. When you finish, preview the eased motion on the Stage. Scrub the playhead in the Timeline between the two pose frames where you applied the ease.
Note: These same ease types are available in the Motion Editor when you use motion tweens. You can view the curve of each type of ease in the Motion Editor when you select a motion tween in the Timeline.