You are on page 1of 7

What is tweening in flash animation?

a tween in Adobe Flash is basically an animation command.


It allows the animator to animate an object without drawing all of the individual
frames of a traditional animation.

The 3 types of Tweening


Classic Tween
Motion Tween
Shape Tween

Classic Tween
Used to or color the instances and text to create animated color shifts or fade in and
fade out of transparency.
Tween the changes in properties of symbol instances, group, and text.
an older way of creating animation in Animate.
These tweens are similar to the newer motion tweens, but are somewhat more
complicated to create and less flexible.
Classic tweens do provide some types of control over animation that motion tweens
do not.

Motion Tween
allow for motion of an object by controlling where an object is in on the stage at a
particular frame.
Motion tweens can be used to create motion over a curved line as well.
used to create animation movements within Animate.
Motion tween animation is created by specifying different values for an object
property between the first and the last frames.
allow for motion of an object by controlling where an object is in on the stage at a
particular frame.
Motion tweens can be used to create motion over a curved line as well.

used to create animation movements within Animate.


Motion tween animation is created by specifying different values for an object
property between the first and the last frames.
You can change the target object of a tween by dragging a different symbol from the
Library onto the tween span in the Timeline.
You can delete the symbol from a tween layer without removing or breaking the
tween.
This allows you to add a different symbol instance to the tween at a later time. You
can also change the type of the target symbol (button, graphic, or movie clip) of a
tween span.
You can edit individual property keyframes on Stage, in the Property inspector,
or in the Motion Editor.
A tween layer can contain tween spans as well as static frames and ActionScript.
However, frames of a tween layer in a tween span cannot contain objects other than
the tweened object.
To add additional objects in the same frame, place them on separate layers.
When a tween contains motion, a motion path appears on the Stage. The motion
path shows the position of the tweened object in each frame.
Apply easing to motion tweens to vary the rate in which the animation moves; if no
ease setting is applied, the animation moves at a consistent rate on each frame
throughout the tween.
How to create a Motion Tween?
Before you begin animation, understand the following concepts:
Timeline- Before working with motion tweens, understand use of
the Timeline and editing properties. You can edit individual property
keyframes on Stage, in the Property inspector, or using the
redesigned Motion Editor.
Symbol Instances- Animate tweens only symbol instances and text fields. All
other object types are wrapped in a symbol when you apply a tween to them.
The symbol instance can contain nested symbols, which can themselves be
tweened on their own timelines.
Tween Span- The minimal building block in a tween layer is a tween span. A
tween span in a tween layer can contain only one symbol instance or text
field. The symbol instance is called the target of the tween span. However, a
single symbol can contain many objects.

Target Object- Adding a second symbol or text field to the tween span
replaces the original symbol in the tween. Use any of the following methods
to change the target object of a tween:
Drag a different symbol from the library onto the tween span in
the Timeline
Use the Modify > Symbol > Swap Symbol command.
You can delete the symbol from a tween layer without removing or breaking the
tween. You can then add a different symbol instance to the tween later. You can also
change the type of the target symbol or edit the symbol at any time.
Before you begin:
Motion Paths- When a tween contains motion, a motion path appears on
the Stage. The motion path shows the position of the tweened object in each
frame. You can edit the motion path on the Stage by dragging its control
points. You cannot add a motion guide to a tween/inverse kinematics layer.
Components of Motion Tween:
object
of
color.
drag

object of the

Tween Span- Is a sequence of frames in the Timeline in which an


has one or more properties changed over time.
- Motion tween span appears in the Timeline as a group
frames in a single layer with a background
- You can select the tween spans as a single object and
them from one location in the Timeline to another,
including to another layer.
- You can animate only one object on the Stage in each
tween span. This object is called the target
tween span.

Components of Motion Tween


Property Keyframe- Is a frame within a tween span where you explicitly define
one or more property values for the tween target object.
- These properties could include position, alpha
(transparency), color tint, and so on
- Each defined property has its own property
keyframes.

- If you set more than one property in a single


frame, then the property keyframes for each of those properties reside in that
frame.
- Use Motion Editor to view each property of a
tween span and its property keyframes.
- To choose which type of property keyframes to
display in the Timeline from the tween span context menu, right-click any property
keyframe and select View keyframes.
Target object of a tween

tween's
target object

- A motion tween has a single object in a tween span called the


target object. There are several advantages to having a single
in a tween:
- You can save a tween as a preset for reuse.

the

- You can easily move the motion tweens on the Timeline (drag
tween span around) or on the Stage.
- To apply a new instance to an existing tween:
- Paste it onto a tween to swap it out
- Drag a new instance from the Library
- Use the Swap Symbol

Tweenable objects and properties

movie clips,
these objects

The types of objects on which you can apply a motion tween are
graphics and button symbols, and text fields. The properties of
that can be tweened includes:
- 2D X and Y position
- 3D Z position (movie clips only)
- 2D rotation (around the z-axis)

target as
publish settings.

- 3D X, Y, and Z rotation (movie clips only): set the FLA file


ActionScript 3.0 and Flash Player 10 or higher in the
Adobe AIR also supports 3D motion.
- Skew X and Y
- Scale X and Y

and

- Color effects: includes alpha (transparency), brightness, tint,


advanced color settings. Color effects can be tweened

only on symbols
objects
tween a color

and TLF text. By tweening these properties, you can make


appear to fade in or fade from one color to another. To
effect on classic text, convert the text to a symbol.

Tweenable objects and properties


- Filter properties (filters cannot be applied to graphic symbols)
You can create a motion tween using one of the following three methods:

right-

- Create a graphic or instance that you want to tween, and then


click a frame and select Create Motion Tween.
- Select the graphic or instance that you want to tween, and
select Insert > Motion Tween from

the main menu.


rightMotion Tween.

- Create a graphic or instance that you want to tween, and then


click the instance on the Stage and select Create

Note: Usage of ActionScript in animation is optional.


Adding a tween to an existing layer

tweens to use

You can add more tweens to an existing tween layer. Add more
fewer layers when creating Animate content with animation.
Do one the following:

- Add a blank keyframe to the layer


(Insert > Timeline > Blank
Keyframe), add items to
the keyframe, and then tween the
items.
span to the
layer and
frame.
duplicate an
different layer.

- Create a tween on a separate layer and then drag the


desired layer.
- Drag a static frame from another layer to the tween
then add a tween to an object in the static
- Alt-drag (Windows) or Option-drag (Macintosh) to
existing span from the same layer or a
- Copy and paste a tween span from the same or different

layer.

Shape Tween

used when a color needs to slowly transition to another or when a shape turns into
another shape.
Shape tweening can also create some interesting effects when a drawing is turned
into a shape, text, or another drawing.
involves drawing a vector shape on one specific keyframe in the Timeline and then
creating another keyframe and drawing another shape on the second keyframe.
When you right-click or Control-click any of the frames between the two keyframes
and choose Shape Tween in the menu that appears, Flash interpolates the
intermediate shapes for the frames in between, creating an animation of the first
shape morphing into the second shape.
Shape tweens work best with simple vector shapes.
Avoid using shapes with cutouts or negative spaces. Also avoid complex shapes
because they tend to turn inside out.
Note: You can use shape hints to specify which points on the beginning shape
should correspond to specific points on the ending shape.
You can also tween the position, color, and transparency of shapes in a shape
tween.

How to create a shape tween?


The following steps show how to create a shape tween from frame 1 to frame 30 of
the Timeline. However, you can create tweens in any part of the Timeline that you
choose.
1. In frame 1, draw a square with the Rectangle tool.
by choosing

2. Select frame 30 of the same layer and add a blank keyframe


Insert > Timeline > Blank Keyframe or pressing F7.
3. On the Stage, draw a circle with the Oval tool in frame 30.
You should now have a keyframe in frame 1 with a square and a
keyframe in frame 30 with a circle.

keyframes in

4. In the Timeline, select one of the frames in between the two


the layer containing the two shapes.
5. Choose Insert > Shape Tween.
Flash interpolates the shapes in all the frames between the two
keyframes.

the

6. To preview the tween, scrub the playhead across the frames in


Timeline, or press the Enter key.

frame 30 to a
shape in

7. To tween motion in addition to shape, move the shape in


location on the Stage that is different from the location of the
frame 1.
Preview the animation by pressing the Enter key.

different
the two
inspector.
a

8. To tween the color of the shape, make the shape in frame 1 a


color from the shape in frame 30.
9. To add easing to the tween, select one of the frames between
keyframes and enter a value in the Ease field in the Property
Enter a negative value to ease the beginning of the tween. Enter
positive value to ease the end of the tween.

You might also like