5 ADVANCED MOTION

TWEENING

Lesson Overview
In this lesson, you’ll learn how to do the following:
• Use the Motion Editor to refine and create complex animation
• Understand when to use the Motion Editor
• Change the Motion Editor view
• Edit a property curve
• Copy and paste a property curve
• Use eases to create more realistic motion
• Add different eases to different property curves
• Modify an ease
• Remove an ease
• Understand the difference between a property curve and an
ease curve
• See how an ease curve affects the animation

This lesson will take approximately 1 hour to complete. If needed, remove

the previous lesson folder from your hard drive and copy the Lesson05
folder onto it. Download the project files for this lesson from the
Lesson & Update Files tab on your Account page at www.peachpit.com
and store them on your computer in a convenient location, as described
in the Getting Started section of this book. Your Account page is also
where you’ll find any updates to the lessons or to the lesson files. Look on
the Lesson & Update Files tab to access the most current content.

146

From the Library of Hassan Ali AlMarhoun

Flash Professional’s new Motion Editor makes
creating complicated animation fast and easy. Use
the Motion Editor to view how the properties of your
motion tween change over time, and apply eases for
sophisticated effects.

147

From the Library of Hassan Ali AlMarhoun

 Getting Started
P Note: If you Start by viewing the finished movie file to see the animated infographic that you’ll
have not already create in this lesson.
downloaded the project
files for this lesson to 1 Double-click the 05End.html file in the Lesson05/05End folder to play the
your computer from animation in a browser.
your Account page,
make sure to do so now.
See Getting Started
at the beginning of
the book.

The project is a short animated infographic illustrating the idea of emerging

market currencies as a threat to the highest-traded currencies in the world. The
animation is something you might see accompanying a story in the business and
economy section of a news site. In the animation, blocks with the American,
European Union, and Japanese flags, representing the dollar, the Euro, and
the Yen, respectively, stack themselves up. A moment later, a large block
representing the emerging market currencies bumps the stack, sending them
tumbling down. In this lesson, you’ll use the Motion Editor to make refinements
in the motion tweening of the blocks, including the bouncing movements
as they fall.
2 Close the 05End.html file.
3 Double-click the 05Start.fla file in the Lesson05/05Start folder to open the
initial project file in Flash. This file is an ActionScript 3.0 document that already
contains all the graphics created for you, with movie clip symbols saved in the
Library. Each of the graphics has its own layer, and instances of the symbols
have been placed on the Stage in their initial positions.

148 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

4 Choose View > Pasteboard (Shift+Command/Ctrl+W) to enable the Pasteboard
so that you can see all the graphics positioned just off the Stage.

5 Choose File > Save As. Name the file 05_workingcopy.fla, and save it in the
05Start folder.
Saving a working copy ensures that the original start file will be available if you
want to start over.

About the Motion Editor

You don’t have to use the Motion Editor at all to create your animations. However,
if you’re dealing with a motion tween that contains multiple properties that change
(for example, a rocket that fades and rotates as it moves across the Stage), or if
you’re handling animation that mimics real-world physics (like bounces and elastic
movements), then the Motion Editor can make your task much simpler.
The Motion Editor is an advanced panel that is integrated into the Timeline and
accessible only when editing a motion tween. The panel shows you how the proper-
ties of your animation change over the course of the tween span as lines on a graph.
It takes some time to become familiar with the meaning of the lines and how the
curves translate to visual changes on the Stage. But once you recognize how the
curves reflect changes in your animation, you have a powerful tool at your disposal.
You can modify the curves on the graph, called property curves, by adding or delet-
ing anchor points, and change their curvature with Bezier precision. You can copy
property curves and apply them to other properties or other motion tweens.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 149

From the Library of Hassan Ali AlMarhoun

P Note: The Motion The Motion Editor also allows you to apply sophisticated eases to your anima-
Editor is available only tion. Although you can apply eases through the Properties inspector, the Motion
for motion tweens (and
not Classic tweens,
Editor provides a wider range of ease types, with options to customize any ease.
shape tweens, or frame- The Motion Editor also visually shows you how your ease affects a property curve.
by-frame animations). You can even apply different eases to different property curves.

Understanding the Project File

The 05Start.fla file has five layers. The
background layer contains background
elements that will not be animated. The
Emerging layer contains the movie clip
instance of the block representing the
emerging market currencies. Each of the
top three layers (US, Euro, and Yen) contains a corresponding movie clip instance
of a block representing those currencies.
The Stage is set at 700 pixels by 400 pixels, and the color of the Stage is a dark blue.
For this lesson, you’ll add motion tweens in the top four layers, and refine the
movements of the blocks with the Motion Editor.

Adding Motion Tweens

You’ll start this project by animating the three boxes representing the US dollar, the
Euro, and the Japanese Yen. The three boxes will start below the Stage and rise up.
1 Select all three blocks (the ones with the US flag, the European Union flag, and
the Japanese flag).
2 Right-click/Ctrl-click the multiple selection and choose Create Motion Tween.

150 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

 Flash creates motion tweens for all three movie clip instances, and extends the
Timeline for the top three layers to frame 24, representing one second of time.

3 Move the red playhead to frame 24.

4 Select all three blocks and, while holding the Shift key down, move them up
onto the Stage. The y value for the multiple selection should be at Y=40.

Flash inserts ending keyframes for all three instances.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 151

From the Library of Hassan Ali AlMarhoun

 5 Add additional frames to the bottom two layers so they extend to frame 24.

6 Press Return/Enter to preview your animation.

The three blocks move upward onto the Stage, sticking together.

Editing Property Curves

The motion tween of the three blocks positions them on the Stage for the viewer
to see, but the movement is sluggish and not very interesting. To create a more
dynamic animation that gives some life and snappiness to the blocks, you’ll modify
the curve for their Y-properties in the Motion Editor.
1 Double-click the motion tween in the US layer, or right-click/Ctrl-click and
choose Refine Tween.
Flash expands the motion tween in the US layer, revealing the Motion Editor
panel. The Motion Editor contains two straight red lines. One represents the
change in the X-position, and the other represents the change in the Y-position.
Both the X- and Y-properties are grouped under the Location property group.

152 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

2 Alternately click between the X-property and the Y-property.
Flash highlights the selected property. When you select the X-property, the
horizontal red line becomes bold, and the downward diagonal line recedes.
The horizontal red line represents the value of the block’s x-position, which
remains unchanged over the span of the motion tween.
When you select the Y-property, the downward diagonal line becomes bold, and
the horizontal line recedes. The diagonal line represents the value of the block’s
Y-position, which decreases over the course of the tween (the block moves upward).

Understanding the Motion Editor values

The units on the vertical axis of the Motion Editor measure the values of the
selected property. When you select the Y-property, Flash shows the pixel units of
the Y-position of the motion tween.

The initial value of the curve appears to be greater than 400, and the final value of
the curve appears to be a little less than 150. However, those values don’t seem to
match the initial Y=400.00 and Y=100.00 values when you look at the position of
the movie clip in the Properties inspector. Why the discrepancy?
The Motion Editor measures from the transformation point of your object. Since
the transformation point of your object is in the center, the Motion Editor vertical
values show the Y-property values as the initial position (Y=400) plus half of the
movie clip’s height (H=70). So, (400 + (1/2)*70) = 435.

Transformation point

The movie clip’s final position is at (Y=100) + half of the height (H=70), which is 135.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 153

From the Library of Hassan Ali AlMarhoun

 Adding anchor points
You want to create a non-linear motion path for the first block that moves on the
Stage—that is, you want the block to move a different amount of distance for each
interval of time. An object on a linear motion path moves the same amount of distance
for each interval of time, which is represented by a straight line in the Motion Editor.
To change the shape of the property curve, you add anchor points. From each
anchor point, you can change the curvature or direction of the curve.
1 Select the Add Anchor point option at the bottom of the Motion Editor.

2 Move your mouse pointer over the property curve.

Flash changes your cursor to a Pen tool icon with a plus sign,
indicating that you can add an anchor point to the curve.
3 Click on the curve at frame 21 and drag the curve downward.
Release your mouse when the anchor point is at about the
25-pixel mark.

154 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

 Flash adds a new anchor point, which also shows as a new keyframe at frame 21.
New keyframe

The anchor point allows you to change the motion of your animation. The new
curve overshoots the final y-value of the motion tween just before the final
keyframe. The resulting motion makes the movie clip move rapidly up, then fall
back its final Y-position value.
4 Select the Add Anchor point option again.
5 Click on the Y-property curve at frame 5, and drag the new anchor point to the
right to about frame 9.

Flash adds another anchor point to the graph and a new keyframe to the motion
tween. The new curve looks like a broad “S” shape, with a smooth flattened
slope at the beginning, a steep section in the middle, and the bump at the end.
6 Test your new motion by pressing Return/Enter. P Note: You can
also double-click on a
Your red playhead moves through the motion tween. Your new curve makes property curve to add a
your movie clip ease in to its motion, then rapidly shoot past its destination, new anchor point.
and then fall back to its ending value.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 155

From the Library of Hassan Ali AlMarhoun

 Changing the curvature
P Note: Hold down Each new anchor point comes with handle bars on either side, which allows you to
the Option/Alt key as change the curvature at that point. The anchor points and handle bars behave in an
you move the handle
bar of an anchor point
identical manner as the Pen tool for drawing strokes.
to make asymmetric 1 Click the anchor point on the Y-property curve at the keyframe at frame 21.
edits to the anchor
point handle bars.
When you isolate edits
to the handle bar
length or direction to
just one side, you can
create more dramatic,
severe changes to the
property curve.

P Note: Some anchor

points do not have
handle bars to control
the curvature of the
graph at that point (for The handle bars at the selected anchor point appear.
example, the first and
last anchor points of 2 Drag the left handle bar downward so the handle bars are horizontal.
a property curve do
not have handle bars).
Hold down the Option/
Alt key and click and
drag on a selected
anchor point to pull out
a handle bar and edit
the curvature.

P Note: Hold down

the Option/Alt key and
click an anchor point to
remove its handle bars,
converting it to a corner
point without smooth
The property curve flattens out at frame 21, which makes the movie clip remain at
curves. that Y-position for just a split second before moving again. That slight hang-time
gives the movie clip a more realistic physics-based motion, just as a ball that you
throw up in the air stays still for a moment before falling back to the ground.
3 Test your new motion by pressing Return/Enter.
Your red playhead moves through the motion tween. Your new curve makes
your movie clip ease in to its motion.

156 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

Moving anchor points
You can move any anchor point, including the ones at the first and last keyframes, P Note: Hold down
to new property values along the vertical axis. You can also move any of the anchor the Shift key to
constrain the dragging
points (except the first and last ones) to new times along the motion tween. In motion to a vertical or
effect, when you move anchor points to new times, you’re moving the keyframes horizontal direction.
within the tween span.
P Note: You can use
1 Select the anchor point at frame 9. the arrow keys to nudge
a selected anchor point
for precise control. Press
the Up or Down Arrow
key to move the anchor
point one property unit
up or down, or Shift-Up
or Shift-Down to move
the anchor point ten
property units up
or down.

The handle bars at the selected anchor point appear.

2 Drag the anchor point slightly up and to the right.
The property curve flattens out even more, creating a more extended
ease-in effect.

3 Test your new motion by pressing Return/Enter.

The final motion is more interesting than a linear one, with your motion tween
rising up and falling back down like somebody had tossed it up in the air.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 157

From the Library of Hassan Ali AlMarhoun

 Deleting anchor points
If you’ve added too many anchor points, you can always remove them (except for
the first and last anchor points). Removing an anchor point has the same effect as
removing a keyframe of the motion tween.
Hold down the Command/Ctrl key.
Click any anchor point (except the first or last).
Flash removes the anchor point from the property curve. Do not remove any
anchor points from your project at this point in the lesson. If you do, choose
Command/Ctrl+Z to undo the operation.

Deleting property curves

Use the Remove Tween option (trash can icon) at the bottom of the Motion Editor
to remove a tween for a selected property curve.

At the moment, your animation has a tween for only one property—the Y-property,
so deleting the curve would remove the whole tween. Use the Remove Tween
option if you want to delete the animation of a particular property when you have
multiple properties changing.

158 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

Viewing Options for the Motion Editor
Flash provides different viewing options for the Motion Editor so you can refine
your property curves with greater accuracy.

Fit to View Restore to 100% Zoom level

• Change the zoom level with the magnification menu at the bottom of the P Note: You can enter
Motion Editor. a custom magnification
level for the Motion
The vertical axis expands to show a more granular level of property values. Editor, but the minimum
Scroll up or down to see the top or bottom of the curve. value is 100% and the
maximum value is 400%.
• Click the Restore to 100% option.
Flash resets the Motion Editor at 100% to show the property curves at its P Note: You can
also hold down the
default view. Command/Ctrl key and
scroll inside the Motion
• Click the Fit to View option at the bottom of the Motion Editor. Editor to change the
Flash expands the Motion Editor to fit the existing space on the Timeline. Click magnification.
the option again to restore the default view.

Copying and Pasting Curves

You’ve spent a lot of effort creating a custom property curve for the motion of the
first movie clip. Fortunately, you don’t have to duplicate those efforts for the other
movie clips. Flash provides quick and easy ways to duplicate individual property
curves or entire motion tweens.
In the following section, you’ll duplicate the motion of the US block to the
European Union and Japanese blocks.
1 In the Motion Editor of the motion tween for the US movie clip, select the
Y-property curve.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 159

From the Library of Hassan Ali AlMarhoun

 2 Right-click/Ctrl-click on the Y-property curve and choose Copy.

Flash copies the curve for the Y-property.

3 Double-click the motion tween in the Euro layer.

The Motion Editor in the US layer collapses and the Motion Editor in the Euro
layer expands. Both the X-property and Y-property curves of the motion tween
in the Euro layer are straight, linear motions.
4 Select the Y-property.
P Note: At the time of 5 Right-click/Ctrl-click on the Y-property curve and choose Paste.
this writing, the paste
operation does not
correctly paste all the
information from the
copied curve. Choose
Paste twice.

Flash pastes the copied curve.

160 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

6 Although the final pasted curve has the correct shape and anchor point
curvatures, the Y-value of the final anchor point may not be correct. You’ll make
the correction by moving the final anchor point.
7 Hold down the Shift key and click and drag the final anchor point down so its
property value is identical to the previous anchor point.

8 Hold down the Shift key and click and drag the anchor point at frame 21 to
about Y=100 in the Motion Editor.

9 Test your new motion by pressing Return/Enter. P Note: In the Motion

Editor, you can use
Command/Ctrl+C
to copy a selected
property curve and
Command/Ctrl+V to
paste a curve.

Both the US and the European Union blocks slowly ease in to their motion, fly
up high, and then settle back down in the middle of the Stage.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 161

From the Library of Hassan Ali AlMarhoun

 Duplicating entire motion tweens
Copying and pasting individual curves in the Motion Editor allows you to dupli-
cate the animation of individual properties. For example, you could duplicate the
Y-motion of a tween, but not its rotation.
In this project, since you want to duplicate the entire motion tween of the US block
(which consists of change only along the Y-property), you can use the commands
Edit > Timeline > Copy Motion and Edit > Timeline > Paste Motion.
You’ll use Copy Motion and Paste Motion to copy the motion of the European
Union movie clip and paste it into the Yen movie clip.
1 Double-click the motion tween in the Euro layer.
Flash collapses the Motion Editor in the Euro layer.
2 Shift-click the motion tween in the Euro layer.
Flash selects the entire motion tween span.

3 Right-click/Ctrl-click and choose Copy Motion, or choose Edit > Timeline >
Copy Motion.

Flash copies the entire motion tween in the Euro layer.

4 Select the motion tween in the Yen layer.
5 Right-click/Ctrl-click and choose Paste Motion, or choose Edit > Timeline >
Paste Motion.

162 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

 Flash pastes the motion tween copied from the Euro layer. The Yen motion
tween has the identical property curve as the Euro motion tween, with different
beginning and ending values.

Adding Complex Eases

Now that your three blocks, representing the US, European Union, and Japanese
currencies are animated, it’s time to animate the block representing the emerging
market currencies. The emerging market currencies block will move onto the Stage
and give the stack of blocks a shove, sending them toppling.
The motion of the block easing into the Stage and the toppling motion can be quite
complex. As the blocks topple, they bounce up and down, decreasing the height of
each bounce. The Motion Editor, fortunately, makes much of the motion quick and
easy to edit.

Adding the next motion tween

The next motion tween is the emerging market currency. The Emerging movie clip
is positioned just off the left of the Stage in the layer called Emerging.
1 Select frame 90 for all the layers, and press F5 (Insert > Timeline > Frame).
Flash adds frames to all the layers up to frame 90.

2 Select frame 40 in the Emerging layer and insert a new keyframe (F6).

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 163

From the Library of Hassan Ali AlMarhoun

 Flash adds a new keyframe in the Emerging layer at frame 40 and copies the
movie clip instance from the previous keyframe into it.
3 Right-click/Ctrl-click the Emerging movie clip instance just off the Stage and
choose Create Motion Tween.

Flash creates a motion tween for the Emerging movie clip instance.
4 Move the red playhead to frame 55.

5 Hold down the Shift key and move the Emerging movie clip instance onto the
Stage so that its right edge butts up against the stack of blocks. The x-position
should be at 100. Make sure that the Y-position remains at Y=45 in the ending
keyframe as in the beginning keyframe.

164 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

 Flash animates the Emerging movie clip instance so it moves from the left to the
right. The movie clip stays at its ending position from frame 55 to frame 90.

6 Select frame 56 of the Emerging layer.

7 Right-click/Ctrl-click and choose Split Motion.

Flash splits the motion tween in the Emerging layer into two motion tweens—
one that begins at frame 40, and another that begins at frame 56.

8 At frame 56, right-click/Ctrl-click and choose Remove Motion.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 165

From the Library of Hassan Ali AlMarhoun

 Flash removes the motion tween at frame 56, leaving the movie clip instance
as a static graphic from frame 56 to the end of the Timeline. The motion tween
from frame 40 to frame 56 is now ready for an ease.

Adding an ease-in
The Motion Editor provides a host of different ease types that can give a simple
motion, like the Emerging movie clip’s shove, a more interesting appearance.
1 Double-click the motion tween in the Emerging layer, or right-click/Ctrl-click
and choose Refine Tween.

Flash expands the motion tween in the Emerging layer, revealing the Motion
Editor panel. The Motion Editor contains property curves for both the X- and
Y-properties. The X-property curve slopes upward while the Y-property curve
is flat.
2 Select the X-property curve.
3 Choose the Add Ease option at the bottom of the Motion Editor.

166 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

 Flash opens the Ease panel, which lists the different ease options, from No Ease
at the top, to Custom Ease at the bottom. The different eases change the way the
motion tween proceeds from the first keyframe to the last.
4 Click the arrow in front of the Simple category, or double-click the Simple
category.
Flash expands the Simple ease category, revealing Slow, Medium, Fast, and
Fastest. The eases in the Simple category affect one side of the motion tween
(either the beginning or the end). The eases in the Stop and Start category affect
both sides of the motion tween. The eases in the other categories are more
complex ease types.
5 Choose the Fast ease.

Flash displays an ease curve, which graphically shows the intensity of the ease.
The Slow ease is fairly shallow and closest to a straight line. The Fastest ease has
the largest curvature.
6 Change the Easing value to –60. P Note: You can use
the Up, Down, Left, and
Right Arrow keys to
navigate the ease types
in the Ease panel of the
Motion Editor.

The Easing value determines the strength of the ease for each ease type, and the
direction of the ease. A positive number represents an ease-out, and a negative
number represents an ease-in.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 167

From the Library of Hassan Ali AlMarhoun

 7 Click off the Ease panel to dismiss it, or press the Esc key.
A dotted line appears in the Motion Editor superimposed on the original
property curve. The dotted line shows the effect of the ease on the tween.

8 Test your new motion by pressing Return/Enter.

The motion tween of the Emerging block proceeds slowly, gaining momentum
until it finally collides with the stack of smaller blocks in the middle of the Stage.
The motion tween path on the Stage shows the position of the instance at each
frame. The clustering of the dots on the left side of the tween path means that
the object doesn’t move very far in the beginning of its motion, but gradually
speeds up.

168 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

Removing an ease
Eases can be deleted as quickly as you’ve added them.
1 Double-click the motion tween in the Emerging layer, or right-click/Ctrl-click
and choose Refine Tween.
2 Click the Ease option at the bottom of the Motion Editor.
Flash opens the Ease panel, displaying the currently selected ease.
3 Choose No Ease, and press Esc to close the Ease panel.

Flash removes the ease. Choose Command/Ctrl+Z to undo the removal of the
ease. You’ll keep the ease in place for this project.

Property vs. Ease Curves

When you apply an ease to a motion tween with the Motion Editor, the original prop-
erty curve is not altered permanently. In the first section of this lesson, you altered the
property curves of a motion tween directly by adding anchor points and changing its
curvature. Applying eases is akin to applying a filter that influences the outcome of an
original property. Like a filter, the ease can be edited or removed altogether.
It is possible to both modify a property curve and add an ease, but the combined
result can be unpredictable.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 169

From the Library of Hassan Ali AlMarhoun

 Animating bounces
As soon as the Emerging movie clip instance hits the stack of blocks, you’ll want
to animate the blocks tumbling down. You’ll create a motion tween with multiple
complex eases to create the bouncing effect.
1 Select frame 56 in the top three layers, the US, Euro, and Yen.

2 Right-click/Ctrl-click and choose Split Motion.

Flash splits the motion tweens in the US, Euro, and Yen layers. New motion
tweens begin at frame 56 for all three layers.

3 Move the playhead to the end of the Timeline at frame 90.

170 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

4 Move the US movie clip instance to the bottom of the Stage at X=631 and
Y=331. Using the Free Transform tool, rotate it 180 degrees clockwise so it
appears upside down. The final position should be at X=700 and Y=400.

5 Move the Euro movie clip instance to the bottom of the Stage at X=551 and
Y=310, and using the Free Transform tool, rotate it 90 degrees clockwise.
The final position should be at X=620 and Y=310.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 171

From the Library of Hassan Ali AlMarhoun

 6 Move the Yen movie clip instance to the bottom of the Stage at X=486 and
Y=330, and using the Free Transform tool, rotate it 180 degrees clockwise.
The final position should be at about X=555 and Y=399.

7 Test your new motion by pressing Return/Enter.

The three blocks fall gracefully in a diagonal direction, rotating as they fall. You’ll
want a more violent, realistic tumble, so the next step is to add some eases.

172 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

Using the BounceIn Ease
One of the ease types in the Ease panel is BounceIn, which simulates a bouncing
motion. The distance to the final property value gradually decreases as the motion
tween approaches its ending keyframe.
1 Double-click the last motion tween in the US layer, or right-click/Ctrl-click and
choose Refine Tween.
Flash expands the motion tween in the US layer, revealing the Motion Editor
panel. The Motion Editor contains property curves for both the X and Y
properties for Location as well as Z properties for Translation > Rotation.

2 Select the Y-property under Location.

3 Choose the Add Ease option at the bottom of the Motion Editor.
Flash opens the Ease panel, which lists the different ease options.
4 Click the arrow in front of the Bounce and Spring category, or double-click the
Bounce and Spring category.
5 Choose the BounceIn ease and enter 12 for the Easing value.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 173

From the Library of Hassan Ali AlMarhoun

 The BounceIn ease simulates a bounce that slowly decays as the motion tween
approaches its end. The Easing value for the BounceIn ease determines the
number of bounces.
P Note: If you’re 6 Test your new motion by pressing Return/Enter. Use the Loop option at the
encountering strange, bottom of the Timeline with the markers between frames 40 and 90 so you can
unpredictable
behaviors, check to
repeat the motion automatically.
make sure that you’ve
applied the BounceIn
ease only to the
Y-property curve. You
want the bouncing
motion to affect only
the vertical motion,
and not the horizontal
motion or the rotation.

The US instance bounces (only in the Y-direction) as it falls to the ground.

7 Collapse the Motion Editor for the US layer, and expand the Motion Editor for
the Euro layer.
8 Apply a BounceIn ease to the Euro instance, and change the Easing value to 10.
9 Collapse the Motion Editor for the Euro layer, and expand the Motion Editor for
the Yen layer.
10 Apply a BounceIn ease to the Yen instance, and change the Easing value to 8.

174 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

11 Test your new motion by pressing Return/Enter.
When the three blocks fall, each tumbles with a different number of bounces.

Applying a second ease to a different property curve

The Motion Editor is powerful because it enables you to treat each property curve
of one motion tween independently. For example, you can apply one ease for the
Y-property, and a different ease for the X-property. This is exactly what you’ll do
next. You’ll add an ease-out for the horizontal motion of each instance, while main-
taining the BounceIn ease for the vertical motion.
1 Expand the Motion Editor for the US layer.
2 Select the X-property under Location.

3 Choose the Add Ease option at the bottom of the Motion Editor.
Flash opens the Ease panel, which lists the different ease options.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 175

From the Library of Hassan Ali AlMarhoun

 4 Click the arrow in front of the Simple category, or double-click the Simple
category.
5 Choose the Fast ease and enter 50 for the Easing value.

The Easing value of 50 represents a strong ease-out motion.

6 Apply Fast eases with an Easing value of 50 for the X-property curves of the
other two motion tweens (the Euro and the Yen instances).
7 Test your new motion by pressing Return/Enter. Use the Loop option at the
bottom of the Timeline with the markers between frames 40 and 90 so you can
repeat the motion automatically.
As the three blocks bounce to the ground, their forward momentum gradually
slows down, creating a more realistic animation.

176 LESSON 5 Advanced Motion Tweening

From the Library of Hassan Ali AlMarhoun

Review Questions
1 How do you access the Motion Editor for a motion tween?
2 What’s the difference between a property curve and an ease curve?
3 What does the Easing value do to an ease?
4 How do you change the curvature of a property curve?

Review Answers
1 To open the Motion Editor panel, double-click a motion tween span on the Timeline,
or right-click/Ctrl-click a motion tween span and choose Refine Tween.
2 A property curve is the graphical representation of how a property of a motion tween
changes values over time. An ease curve represents a different rate of change that you
can apply to an individual property curve. Flash displays the effects of an ease curve on
a property curve as a dotted line.
3 The Easing value changes the strength and direction of an ease. Easing values affect
eases differently, depending on the type of ease selected. For example, the Easing
value for BounceIn eases determines the number of bounces, while the Easing value
for a Simple Fast ease determines whether the ease is an ease-in or ease-out, and the
strength of the ease.
4 To change the curvature of a property curve, select the property in the Motion Editor
and choose the Add Anchor option. Click on the curve to add a new anchor point and
move the handle bars to change the tangent at that point. You can move the anchor
points up or down to change the property value, or you can move the anchor points
left or right to change the position of the keyframe within the motion tween.

ADOBE FLASH PROFESSIONAL CC CLASSROOM IN A BOOK (2014 RELEASE) 177

From the Library of Hassan Ali AlMarhoun