How To Work With Classic Tween Animation in Animat
How To Work With Classic Tween Animation in Animat
Classic tweens are an older way of creating animation in Animate. These tweens are
similar to the newer motion tweens, but are more complicated to create and less
flexible. However, classic tweens do provide some types of control over animation that
motion tweens do not. Most users choose to work with the newer motion tweens, but
some users still want to use classic tweens. For more information about the
differences, see Differences between motion tweens and classic tweens.
Before you begin:
Before working with classic tweens, keep in mind the following points:
Classic tweens are the older way of creating tweened animation in Animate. The
newer, easier way is to use motion tweens. See Motion tween animation.
You cannot tween 3D properties with classic tweens.
For samples of classic tween animation, see the Animate Samples page
at www.adobe.com/go/learn_fl_samples. The following samples are available:
Animated Drop Shadow: Download and decompress the Samples ZIP file and
navigate to the Graphics\AnimatedDropShadow folder to access the sample.
Animation and Gradients: Download and decompress the Samples ZIP file and
navigate to the Graphics\AnimationAndGradients folder to access the sample.
NOTE: Like most things in Animate, animation does not require any ActionScript.
However, you can create animation with ActionScript if you choose.
Creating keyframes
1. Do one of the following:
Select a frame in the Timeline, and select Insert > Timeline >
Keyframe.
Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline
and select Insert Keyframe.
o
Inserting frames in the timeline
This feature is about creating older classic tweens. For more information on
creating the newer motion tweens, see Create tween animation.
To tween the changes in properties of instances, groups, and type, you can use a
classic tween. Animate can tween position, size, rotation, and skew of instances,
groups, and type. Also, Animate can tween the color of instances and type, creating
gradual color shifts or making an instance fade in or out.
Before tweening the color of groups or type, make them into symbols. Before
animating individual characters in a block of text separately, place each character in a
separate text block.
If you apply a classic tween, and change the number of frames between the two
keyframes, Animate automatically tweens the frames again. Or, if you move the group
or symbol in either keyframe, Animate automatically tweens the frames again.
1. To make a layer as an active layer, click a layer name and select an empty
keyframe in the layer, to start. This frame is the first frame of the classic tween.
2. To add content to the first frame of the classic tween, do one of the following:
Create a graphic object with the Pen, Oval, Rectangle, Pencil, or Brush
tool, and then convert it to a symbol.
Create an instance, group, or text block on the Stage.
Drag an instance of a symbol from the Library panel.
NOTE: To create a tween, you must have only one item on the layer.
3. Create a second keyframe where you want the animation to end, and leave the
new keyframe selected.
4. To modify the item in the ending frame, do any of the following:
Move the item to a new position.
Modify the item’s size, rotation, or skew.
Modify the item’s color (instance or text block only). To tween the color
of elements other than instances or text blocks, use shape tweening.
5. To create the classic tween, do one of the following:
Click any frame in the tween’s frame span and select Insert > Classic
Tween.
Right-click (Windows) or Control-click (Macintosh) any frame in the
tween’s frame span and select Create Classic Tween from the context
menu.
If you created a graphic object in step 2, Animate automatically converts the object to
a symbol and names it tween1.
.
6. To tween the size of the selected item, select scale in the tweening section of the
Property inspector. As a prerequisite, you modify the size of the item in step 4.
7. To produce a more realistic sense of motion, apply easing to the classic tween. To
apply easing to a classic tween, use the Ease field in the Tweening section of the
Property inspector. Use the Custom Ease dialog box to more precisely control
the speed of the classic tween.
To adjust the rate of change between tweened frames, drag the value
in the Easing field or enter a value.
To begin the classic tween slowly and accelerate the tween toward the
end of the animation, enter a negative value between -1 and -100.
To begin the classic tween rapidly and decelerate the tween toward the
end of the animation, enter a positive value from 1 through 100.
To produce a more complex change in speed within the tween’s frame
span, click the Edit button next to the Ease field. It opens the Custom
Ease dialog box.
By default, the rate of change between tweened frames is constant. Easing creates a
more natural appearance of acceleration or deceleration by gradually adjusting the
rate of change.
o
.
8. To rotate the selected item during the tween, select an option from the Rotate
menu in the Property inspector:
To prevent rotation, select None (the default setting).
To rotate the object once in the direction requiring the least motion,
select Auto.
To rotate the object as indicated, and then enter a number to specify
the number of rotations, select Clockwise (CW) or Counterclockwise
(CCW).
NOTE:The rotation in step 8 is in addition to any rotation you applied to the ending
frame in step 4.
9. If you’re using a motion path, select Orient To Path in the Property inspector to
orient the baseline of the tweened element to the motion path.
10. To sync up the animation of graphic symbol instances with the main timeline,
select the Sync option in the Property inspector.
.
NOTE: Synchronize Symbols and the sync option both recalculate the number of
frames in a tween to match the number of frames allotted to it. Use the Sync option if
the frames in an animation sequence are not an even multiple of the number of
frames in the graphic instance.
11. If you’re using a motion path, select Snap to attach the tweened element to the
motion path by its registration point.
.
Select the object and click Modify.
.
.
Select Convert to Symbol… and choose the following options:
.
o Name: Enter the name of the symbol.
o Type: Select Graphic in the drop-down list.
.
Click OK and select the Free Transform Tool.
.
.
Drag the white dot in the center to skew the object.
.
.
Right click the frame and select Create Classic Tween.
.
How to bring your characters to life using Classic
Tweening
Watch the video to know how to create motion to animation.
Working with Classic tweens saved as XML files
Animate allows you to work with Classic Tweens as XML files. Natively, Animate allows
you to apply the following commands on any Classic Tween:
Copy Motion as XML
Export Motion as XML
Import Motion as XML
COPY MOTION AS XML
Allows you to copy Motion properties applied to any object on the Stage at a said
frame.
1.
Create a Classic Tween.
2.
3.
Select any keyframe on the Timeline.
4.
5.
Go to Commands > Copy Motion as XML.
6.
The Motion properties are copied to the clipboard as XML data. You can then use any
text editor to work on the XML file.
EXPORT MOTION AS XML
Allows you to export Motion properties applied to any object on the stage to an XML
file that can be saved.
.
Create a classic tween.
.
.
Go to Commands > Export Motion as XML.
.
.
Browse to a suitable location where you want to save the file.
.
.
Provide a name for the XML file, and click Save.
.
The Classic tween is exported as an XML file at the specified location.
.
IMPORT MOTION AS XML
Allows you to import an existing XML file that has Motion properties defined.
.
Select an object on the stage.
.
.
Go to Commands > Import Motion as XML.
.
.
Browse to the location, and select the XML file. Click Ok.
.
.
On the Paste Motion Special dialog box, select the properties that you
want to apply on the selected object.
.
.
Click Ok.
.
Drag a normal layer onto a guide layer. This action converts the guide layer
to a motion guide layer and links the normal layer to the new motion guide
layer.
.
.
This feature is about working with older classic tweens. For more information on
using the newer motion tweens with motion paths, see Edit the motion path of a
tween animation.
Motion guide layers let you draw paths along which tweened instances, groups, or text
blocks can be animated. You can link multiple layers to a motion guide layer to have
multiple objects follow the same path. A normal layer that is linked to a motion guide
layer becomes a guided layer.
In this example, two objects on separate layers are attached to the same motion path.
Create a motion path for classic tweened animation
.
Create a classic-tweened animation sequence.
.
If you select Orient To Path in the Property inspector, the baseline of the
tweened element orients to the motion path. If you select Snap, the
registration point of the tweened element snaps to the motion path.
.
.
Right-click (Windows) or Control-click (Macintosh) the layer name of the layer
containing the classic tween and choose Add Classic Motion Guide.
.
Animate adds a motion guide layer above the classic tween layer and
indents the name of the classic tween layer. It represents that classic tween
layer is bound to the motion guide layer.
.
If you already have a guide layer in the timeline, you can drag a layer
containing the classic tween below the guide layer. This action converts the
guide layer to a motion guide and binds the classic tween to it.
.
A motion guide layer above the layer containing the classic tween.
.
.
.
To add a path to the motion guide layer, select the motion guide layer and
use Pen, Pencil, Line, Circle, Rectangle, or Brush tool.
.
You can also paste a stroke onto the motion guide layer.
.
.
Drag the object you are tweening, to snap it to the beginning of first frame
or to the end of the last frame.
.
A graphic of a car snapped to the beginning of a guide stroke.
.
.
For best snapping results, drag the symbol by its transformation point.
.
.
To hide the motion guide layer and the path click in the eye icon column on
the motion guide layer. If you hide, only the object’s movement is visible
while you work.
.
.
The group or symbol follows the motion path when you play the animation.
.
To know more about animation guide based on variable width stroke and variable
stroke color, see Animation Guide
.
o
Drag an existing layer below the motion guide layer. The layer is indented
under the motion guide layer. All objects on this layer automatically snap to
the motion path.
o
o
Create a layer under the motion guide layer. Objects you tween on this layer
are automatically tweened along the motion path.
o
o
Select a layer below a motion guide layer. Select Modify > Timeline >
Layer Properties, and select Guide.
o
Unlinking layers from a motion guide layer
.
To unlink, select the layer and do one of the following:
.
o
Drag the layer above the motion guide layer.
o
o
Select Modify > Timeline > Layer Properties, and select Normal as the
layer type.
o
.
Select the frames in the Timeline that contain the classic tween to copy. The
frames you select must be on the same layer, however, they do not have to
span a single classic tween. The selection can span a tween, empty frames, or
two or more tweens.
.
.
Select Edit > Timeline > Copy Motion.
.
.
To receive the copied classic tween, select the symbol instance.
.
.
Select Edit > Timeline > Paste Motion Special. Select the specific classic
tween properties to paste to the symbol instance. The classic tween
properties are:
.
X Position
.
How far an object moves in the x direction.
.
Y Position
.
How far an object moves in the y direction.
.
Horizontal Scale
.
The ratio between the current size of the object and its natural size in the
horizontal direction (X).
.
.
Vertical Scale
.
Specifies the ratio between the current size of the object and its natural size
in the vertical direction (Y).
.
Rotation And Skew
.
The rotation and skew of the object. These properties must be jointly applied
to an object. Skew is a measurement of rotation in degrees, and when you
rotate and skew, each property affects the other.
.
Color
.
All color values such as Tint, Brightness, and Alpha are applied to the object.
.
Filters
.
All filter values and changes for the selected span. If filters are applied to an
object, the filter is pasted with all values intact. And, its state (enabled or
disabled) applies to the new object.
.
Blend Mode
.
Applies the blend mode of the object.
.
Override Target Scale Properties
.
When deselected, specifies that all properties be pasted relative to the
target object. When checked, this option overrides the scale properties of
the target.
.
Override Target Rotation And Skew Properties
.
When deselected, it specifies that all properties be pasted relative to the
target object. When checked, the pasted properties override the existing
rotation and scale properties of the object.
.
The necessary frames, tween, and symbol information are inserted to match
the original, copied tween.
.
To copy a symbol’s classic tween to the Actions panel or use it in another
project as ActionScript, use the Copy Motion as ActionScript 3.0 command.
.
Click the layer that contains a tween in the timeline of Animate.
.
.
To open tweening properties, click the Tweening category in the property
panel. You can access the property-wise easing using the ease type drop-
down.
.
You can apply ease presets property-wise for classic tweens. In properties
panel, an option to choose property-wise easing is provided. You can
select Each properties separately to apply different easing presets for
each property.
.
.
property-wise presets
.
.
You can select unique ease presets for position, rotation, scale, color and
filter properties of a classic tween.
.
Position Specifies ease settings for the position of an animated object on
stage.
.
Rotation Specifies ease settings for the rotation of an animated object on
stage.
.
Scale Specifies ease settings for the scale of an animated object on stage.
.
Color Specifies ease settings for the color transitions applied to an animated
object on stage.
.
Filters Specifies ease settings for filters applied to an animated object on
stage.
.
.
Alternatively, if you want to have same easing across all properties of the
tween, choose All properties together option. Select the ease preset of
your choice from the ease type pop-up dialog box and double-click ease
preset to apply.
.
If you choose to apply classic ease, you can also increase or decrease the
intensity of ease by moving the slider.
.
List of ease presets
.
.
.
Click the edit icon next to Ease to apply a custom ease.
.
If you use HTML5 canvas document type, you can get an optimized js output file for
ease presets. HTML5 canvas uses the easing functions of Tween JS while creating an
output.
Applying custom ease to classic tween
animation
This feature is about adding easing to older classic tweens. For more information
on adding easing to the newer motion tweens, see Easing tween animations.
The Custom Ease dialog box displays a graph representing the degree of motion over
time. The horizontal axis represents frames, and the vertical axis represents
percentage of change. The first keyframe is represented as 0%, and the last keyframe
is represented as 100%.
The slope of the graph’s curve represents the rate of change of the object. When the
curve is horizontal (no slope), the velocity is zero; when the curve is vertical, an
instantaneous rate of change occurs.
You can reuse the customized ease presets only within the same document type.
You can use the preset eases across multiple spans in the timeline by selecting the
corresponding spans and applying the ease.
.
.
Click the Edit button next to the Ease slider in the frame Property inspector.
.
.
To add a control point, Control-click (Windows) or Command-click (Macintosh)
the diagonal line.
.
.
To increase the speed of the object, drag the control point up; to slow down
the speed of the object, drag it downwards.
.
.
To further adjust the ease curve, and fine tune the ease value of the tween,
drag the vertex handles.
.
.
To view the animation on the stage, click the play button in the lower-left
corner.
.
.
Adjust the controls until you achieve the desired effect.
If you use the Custom Ease dialog box, the edit field shows --. If you use edit or
pop-up slider, the custom ease graph is set to the equivalent curve. And, the Use One
Setting For All Properties check box is selected.