Adobe
Products
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
Student and Teacher Editions
More products
Solutions
Creative tools for business
Digital marketing
Digital media
Education
Financial services
Government
Web Experience Management
More solutions
Learning Help Downloads Company
Buy
Home use for personal and home office
Education for students, educators, and staff
Business for small and medium businesses
Licensing programs for businesses, schools, and government
Special offers
Search
 
Info Sign in
Welcome,
My cart
My orders My Adobe
My Adobe
My orders
My information
My preferences
My products and services
Sign out
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Adobe
Products Sections Buy   Search  
Solutions Company
Help Learning
Sign in Sign out My orders My Adobe
Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change. Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.
Qty:
Purchase requires verification of academic eligibility
Subtotal
Review and Checkout
Adobe Developer Connection / Flash Developer Center /

Motion migration guide for Flash Professional

by John Mayhew

John Mayhew

by Jen deHaan

Jen deHaan
  • flashthusiast.com

Content

  • What makes a motion tween
  • What happened to my keyframes?
  • Timeline appearance and selection
  • Motion Property inspector
  • Motion guides and motion paths
  • Using eases with your tweens
  • When to use classic tweens
  • Where to go from here

Modified

15 August 2011

Page tools

Share on Facebook
Share on Twitter
Share on LinkedIn
Bookmark
Print
animation Flash Professional migration

Requirements

Prerequisite knowledge

A basic knowledge of Flash Professional, including motion tweens and the Timeline. General understanding of concepts outlined in the Animation Learning Guide for Flash.

User level

Intermediate

Required products

  • Flash Professional (Download)

Sample files

  • flcs4_migrate-me.zip (146 KB)

If you have done any animation in Adobe Flash Professional, then you've created a motion tween on the main Timeline. This classic model is known to many students learning basic Flash skills. The way motion tweens work changed starting with Flash CS4 Professional. Transferring your skills to the latest way that motion tweens work takes a little effort, but it's not too difficult once you understand the fundamental change between motion tweens in previous versions of Flash (sometimes referred to as classic tweens) and those in Flash CS4 and later.

If you have never created a motion tween before, or are new to Flash, you should examine the Animation Learning Guide for Flash, which teaches you how to tween from the ground up. But if you're an experienced tweener and need to learn the fundamental differences between the two models to upgrade your skill set, then this guide is the one for you.

Note: You can still use the old-style motion tweens in Flash CS4 and later if you have to, maybe because you're actively working on some project you just need to finish. They're called classic tweens and you can access this option when you create a tween using the Insert menu or frame context menu.

What makes a motion tween

It helps to have a general understanding of what motion tweens are all about before you dive into this migration guide. A motion tween has a single object in a tween span, and it is typically called the tween's target object. You set the properties of the target object across the tween span, and Flash creates the animation based on those property changes. If you're used to motion tweens in earlier versions of Flash, those tweens were composed of two or more instances and Flash created the interpolation between those two instances. So instead of creating motion between two different objects (keyframes), Flash manipulates the properties of a single object across a number of frames, similar to Adobe After Effects.

Motion tweens are supported by all versions of Adobe ActionScript and Adobe Flash Player. You only need to make sure that what you use in the tween (such as 3D or filters) is supported by your publishsettings.

Why motion tweens changed

It might seem confusing as to why tweening was suddenly changed in Flash, and so greatly. It's no secret that tweens in previous versions of Flash could be tricky to learn for many people, and sometimes even frustrating to use. If you managed to create a working motion tween, it was easy to break it (see that dashed arrow) if you modified anything about it. You were rather limited in what you could animate and how you did it, and then modifying those motion tweens could be frustrating.

There are lots of reasons why the newer tweens are better and will be worth investing the small learning curve for:

  • You cannot break a motion tween, so you no longer need to deal with "dashed arrows."
  • New tweens are easier to use, not only because you cannot break them. You directly manipulate objects on the Stage without needing to always think about keyframes. You don't even need to add keyframes—just manipulate the object and the keyframes are inserted for you.
  • New motion tweens are easy to stretch and move. You just select and drag the span in the Timeline to move it, or drag the ends to stretch or resize the span.
  • Motion paths are shown right on the Stage for all tweens. These motion paths are visual and directly editable, or you can just select and move the entire tween to a new location on the Stage.
  • Motion paths in general are easier to use than motion guides (which you no longer need). The motion path for a tween is attached right to the tween.
  • You have granular control over each property of a tween.
  • You can use the Motion Editor with newer motion tweens, which provides that granular control.
  • The addition of the Motion Editor means tweens are more powerful in general. Each property and its keyframes are accessible and editable independently. For example, you can tween alpha separately from rotation, scale, x and y position, and so on.
  • You can edit individual properties on a graph using curves in the Motion Editor to affect how quickly the change occurs over time.
  • A tween does not need to have an instance attached to it (meaning, it has no target object for the tween). These empty tweens can then have new instances applied to them. All properties of that tween (as seen in the Motion Editor) will be saved until you apply a new instance to it.
  • You can apply a new instance to an existing tween by just pasting it onto a tween to swap it out, drag a new instance from the Library, or use Swap Symbol.
  • You can use the 3D model with newer tweens to animate 3D rotation and translation. You cannot use 3D with classic tweens.
  • You can give your tween an instance name and then give other instances that same tween at runtime, simplifying the code you require to create animation with code.
  • New motion tweens have preset eases you can apply to them, which are advanced and very useful for creating unique effects.
  • You can create and apply custom eases that do not need to end at 100% (which was required in Flash CS3 and earlier).
  • You can save a tween as a preset and then reuse the animation in that or other documents, or import/export it for other users.
  • Many more simple ease types are available in the newer tweening model, which you can access from the Motion Editor.

Many of these features, such as how tweens are easily resized, saved, swapped or applied, and hard to break are only possible because there is one instance in each tween span. Refer to the Animation Learning Guide for Flash for a detailed overview of how to use all of these features.

What happened to my keyframes?

Keyframes and property keyframes are locations on a timeline where you either define a new copy of an object or changes to the properties of a motion-tweened object. As you know, a keyframe represents a new instance, or copy, of an object, such as a new instance of a movie clip symbol. When you created a tween in previous versions of Flash, interpolating between two instances of an object created the animation.

When you create a motion tween in Flash CS4 or later, every tween span has a single target object. Therefore, the traditional Flash keyframe is always (and only) at the first frame of a tween span. Further changes on that tween span are applied to the properties of the target object. The points in time where new property values are specified by the user are called property keyframes, since they are not copies of an object but instead changes to the properties of the same object.

You are used to creating and modifying keyframes in your FLA files, but may have noticed something new in the Timeline this time around—something smaller and more diamond-like than the keyframes you're used to looking at (see Figure 1).

Property keyframes look like diamonds.
Figure 1. Property keyframes look like diamonds.

A property keyframe is a concept specific to Flash CS4 and later. In motion-tweened animation, you define property keyframes at significant points on a tween span and let Flash create the animation between those property keyframes (on the in between or tweened frames). Therefore, a property keyframe is where you want the animation to change. For example, you may want the blur to animate between frame 5 and frame 10. You make the initial blur setting at a property keyframe at frame 5, and a different setting on another property keyframe at frame 10. The blur then animates between those two settings between frames 5 and 10.

One way to think of the difference between property keyframes and traditional keyframes is to think about how they relate to the properties of an object. In Flash, an object has properties like x position, y position, width, height, and rotation. A traditional keyframe is actually a full copy of an object. That copy has an x, y value as well as a width and height, so the keyframe contains a value for all of the object's properties. In the new tweening model, Flash no longer tweens between multiple copies of an object. Instead, Flash treats each property as a completely separate entity, so each property has its own keyframes that define a value for the property at a specific time. For example, Rotation can have a keyframe at frame 1 and frame 20, and Width can have keyframes at frames 2, 5, 10, and 15. The use of property keyframes is consistent with other animation tools such as Adobe After Effects CS4 or later. This model is much more flexible and powerful than traditional keyframes, as you will learn later in this article.

Keyframes and property keyframes are indicated in the Timeline, and (for a tween span) also in the Motion Editor. Property keyframes (changes in a property for a tweened object but not a change of the object itself) are represented by the small diamond (see Figure 1).

So, because of these changes, "keyframes" within a tween span (after the first frame of your span) are not true keyframes anymore. Remember that they are not instances of a whole object; instead, they represent property changes within a tween, and one or more properties may be changing at that frame. That's why we're now calling them "property keyframes." So the "keyframe" is at the first frame of the span, and subsequent changes are at property keyframes along that span. Keep reading to understand how this affects your workflow.

Changes to your workflow

The main difference between old tweening and new tweening is that old tweens create animation between two instances, and new motion tweens animate property changes to a single instance. So in a classic tween, you have an instance on frame 1, a different instance at a keyframe on frame 5, and Flash calculates what the animation should look like between those two instances depending on their properties. If you have a third instance at frame 10, all of the differences between the instances at frame 5 and 10 are then animated.

The new tween model tweens a single object on a span, and this means that the way you approach creating a motion tween changes. The first thing you'll notice when you start working with motion tweens is you don't need (or necessarily want) an end keyframe before you create a tween—in other words, you don't create your two keyframes first and then select "Create Motion Tween". Instead you create the tween on a single instance and then just change the tweened instance wherever you want the changes to occur, and the keyframes are inserted for you; or, you can insert them yourself on the span after you create it.

So remember: Create the tween first, and then make your keyframe changes for that tween. If you create two keyframes and then choose Create Motion Tween, the tween is applied to the first instance only; it won't interpolate between the two instances. If you encountered that, and were mystified or angered about the non-moving tween or, now you know why.

Note: When working with new tween spans, you should not use F6 in most cases. Read the next section on creating good tweens for information about why you should avoid using this shortcut.

Even though there are changes to your workflow, most or all of them you might find to just be something to get used to—not necessarily good nor bad, just different. However, there are certainly some improvements to specific workflows you may have used in the past.

The new motion model makes it easier to modify your motion tweens, or create certain effects. For example, you might have an instance that moves around the Stage between frame 1 and 10, and there are keyframes on frames 1, 5, and 10. Now you want the tween to fade out between frames 1 and 10, so you need to modify all three keyframes and enter an appropriate value for any keyframes between the first and last one. In more complex scenarios, these kinds of modifications can be tedious, frustrating, or end up breaking the tween.

In the new motion model, each property is modified on its own. So, for the previous example, you just change the alpha value on the last frame of the tween span. An alpha keyframe is automatically inserted at that frame and the motion tween fades between 1 and 10, because the keyframe on frame 5 is a position keyframe and is completely unrelated to the alpha property. Because you insert certain types of keyframes (or, property keyframes), you have more control, and editing your complex animations can be easier.

This change does mean you need to be a bit more aware of what kinds of keyframes are at a certain location, so your tween turns out the way you want. In the previous example, you might want the alpha tween to start at frame 5, so you would need to insert an alpha keyframe there. You will see a small diamond representing a property keyframe at frame 5—for more information on this, see the "Keyframes and property keyframes" section of the Animation Learning Guide for Flash—but you might not remember or know which property keyframe(s) it represents. Often, you will remember what change occurs at that location, or you can scrub the timeline to see what the tween looks like. If not, you can right-click (Windows) or Control-click (Mac OS) the tween span and choose View Keyframes, and then a type of property keyframe to view, or use the Motion Editor to see exactly what property keyframes exist on that frame.

Note: A by-product of the Motion Editor is it can change your workflow when you're working with other people's FLA files. The Editor makes it incredibly easy to understand exactly what a tween is doing across the entire span, because every value and tweened property is in the rows and graphs. The Motion Editor is a great help when you're trying to understand someone else's file, a tween doesn't seem to make sense, or you're trying to figure out how a tween went wrong.

There are other improvements to the way you work, such as improvements to motion guides and the Property inspector. For more information about these changes, and more information about inserting keyframes, continue reading the article. If you need to learn about different ways to insert keyframes, refer to the Animation Learning Guide for Flash.

Creating good tweens

If you've created motion tweens, chances are you've pressed F6 a few times in order to insert new keyframes. Doing so has probably become very familiar to you as well—you want to change something for an animation, then you press F6.

You can still use F6 to insert static keyframes on the Timeline (that you might turn into a motion tween), and you can even use them to insert property keyframes within a tween span too. However, within a tween span, pressing F6 will insert a property keyframe on every single property currently associated with the target instance. This is usually a lot more keyframes than you actually need at that frame, so using F6 on a tween span is usually not the best thing to do for your animation.

Instead of pressing F6, you can insert keyframes other ways:

  • Simply change the instance. Most of the time, this is all you need to do to insert a keyframe at the playhead's position. If you need to tween to a new location, move the instance there. If you need it to scale or skew, use the Free Transform tool. If you need the instance to blur, change the value in the Property inspector or Motion Editor.
  • Right/Control-click the tween span and choose Insert Keyframe > Type. This adds keyframe(s) for the category you select at the current playhead, which reduces the number of keyframes inserted. For example, if you choose Insert Keyframe > Filter it adds a keyframe on all filter properties. To further reduce the number of inappropriate keyframes, use the Motion Editor.
  • Use the Motion Editor. You can use the Add Keyframe button (yellow or gray diamond), graph context menu, or Control/Command key over the graph to insert a keyframe on individual properties.

Timeline appearance and selection

As you've already seen, tween spans appear different in Flash CS4 and later. They are represented by a light blue span of frames, that begin with a solid or blank keyframe and may be followed by diamonds that represent property keyframes. A layer with one or more tween spans on it has a special icon that means it's a tween layer, or in a tween state (see Figure 2).

A tween layer in the Timeline.
Figure 2. A tween layer in the Timeline.

You can also have animation on a mask or guide layer, which are also represented by special layer icons (see Figure 3).

A mask layer and guide layer that contain tween spans.
Figure 3. A mask layer and guide layer that contain tween spans.

Selecting tweens (or frames within them) to copy or move them changed in Flash CS4, especially if you typically use frame-based selection (Flash preferences). For the frames that aren't tween spans (or IK spans), selection remains the same as in previous versions of Flash. However, regardless of your preferences, tween and IK spans are selected using span-based selection. The way these special spans behave is almost the same as span-based selection mode. To learn more about selecting frames and spans, and working with a mix of frame-based selection mode and span-based selection, read Animation Learning Guide for Flash: Motion tween manipulations.

Editing multiple frames

Some features, like the edit multiple frames control in the Timeline, behave differently because there is a single object per tween span. When you used Edit Multiple Frames across a selection of frames, it showed you all of the instances on the timeline between the two markers. Because there's only one instance on a tween span, you only see and can edit the instance at the first frame of each tween span. Edit Multiple Frames remains useful if you have multiple spans selected, or static frames selected alongside your tween frames or are working with classic tweens (see Figure 4).

Using Edit Multiple Frames with new tween spans. You can modify target objects together.
Figure 4. Using Edit Multiple Frames with new tween spans. You can modify target objects together.

Some other features are changed because there is one instance per tween span. For more information about classic tweens, see the "Creating tweened animations" section of the Animation Learning Guide for Macromedia Flash 8.

Motion Property inspector

Just like previous versions of Flash, the Property inspector is context sensitive and this affects the way you work with motion tweens. If you select the instance, you can modify the selection. If you select a tween span or motion path, you can modify various properties of a tween in the Motion Property inspector (see Figure 5).

Select a tween span or a motion path to access the Motion Property inspector.
Figure 5. Select a tween span or a motion path to access the Motion Property inspector.

Note: You cannot create a motion tween using the Property inspector like you could in previous versions of Flash (where you select Motion or Shape from a combo box in the Property inspector).

The Motion Property inspector allows you to change the position and size of a motion path, and how the motion paths display on Stage using the Motion Property inspector panel menu. You can still apply easing, rotation, sync, and orient to path in this Property inspector. Read the next section for more information on the changes to these controls.

Orient to path and rotation

Orient to path improved starting in Flash CS4, in that it creates more predictable and usable results when you apply it to a motion tween. The main benefit is that your tween will always remain rotated (or oriented) to the motion path, no matter how or where you rotate the instance. Rotating it on another part of the path does not mess up the animation; the new motion model always keeps the instance properly oriented to the path as expected. Otherwise, orient to path works exactly the same way as it did in previous versions.

Rotation is applied across an entire tween span when you set it using the Motion Property inspector. In Flash CS4 or later, you can rotate by a specific number of times plus an optional amount of additional rotation in degrees (see Figure 6).

Rotate six times and add 10 additional degrees.
Figure 6. Rotate six times and add 10 additional degrees.

Flash CS4 or later does not have the "Auto" direction for rotation, which in previous versions would rotate the instance once in the direction that requires the least amount of motion (if it created rotation at all). By setting rotation to 1 and choosing either CW or CCW in the Property inspector, or using the Motion Editor, you can easily replicate this motion in a more expected way if and when needed.

Tip: Rotation is applied across the entire span when you use the Motion Property inspector. Adjust the Rotation property in the Motion Editor to have full control over rotation.

Motion guides and motion paths

In previous versions of Flash, you had to create a motion guide to make a motion tween follow a given path. In Flash CS4 and later, motion paths are a lot easier to create and modify because they're attached to the tween itself.

In previous versions of Flash, you created a motion guide for a tween by inserting a guide layer with a path on it, applying the tween to that guide, and then snapping the instance at keyframes to the ends of the motion guide's path.

The best way to understand the differences between a motion guide and a motion path in Flash CS4 and later is to create one.

  1. Create a new FLA file.
  2. Use the drawing tools to draw something on the Stage.
  3. Right/Control-click the artwork and select Create Motion Tween from the context menu. As long as you're at frame 1 of a new layer, one second's worth of frames are added to a new tween span.
  4. With the playhead at the last frame of the tween span, move the instance across the Stage. A motion path is created to represent the position tween you created.
  5. Deselect everything on the Stage, and move the cursor over the motion path. When you see the curved line next to the cursor, drag the motion path to bend it.

You can further modify the motion path using the Subselection tool (much like modifying any other path), or by selecting the path and dragging it around the Stage.

Benefits of the new motion path in Flash CS4 and later are as follows. You can:

  • Click the motion path and move the whole tween to a new location on the Stage by selecting it and moving it.
  • Modify a path by manipulating it with the Selection tool (as you would other lines in Flash).
  • Modify the path using the Free Transform tool or the Motion Property inspector.
  • Modify the motion path using the Bezier tools. Select the motion path using the Subselection tool, and hollow squares appear on the motion path representing position keyframes.
  • Copy a path drawn with the Pencil or Pen tool and paste it onto a motion tween.
  • Copy a motion path and paste it onto another tween.
  • Get an idea about easing (speed) and 3D tweening by how close together the tween dots (dots along the path) are on the motion path.

For more information about motion paths and your tween, read Animation Learning Guide for Flash: Motion paths.

Reversing a tween

Reversing animation is easier in Flash CS4 and later. You can use commands in the tween span context menu to reverse the motion path or reverse the property keyframes of your animation. Changing the order of the property keyframes of a tween means that the instance will animate differently, either on the motion path or what it looks like (or both). When you reverse an animation, the keyframes are flipped so the keyframe at the end of the frame is then at the first frame of the span, and so on.

For examples of how to reverse your motion and keyframes, see the section "Reversing motion and keyframes" in the Animation Learning Guide for Flash.

Note: You may need to create two tween spans to achieve the effect you need. Remember that you can copy and paste motion to a second tween span, just as you did in previous versions of Flash, and then reverse the motion on the second span.

Converting a tween to keyframes

Some animators convert a tween to keyframes, essentially frame-by-frame animation, in order to fine-tune the animation and so on. In previous versions of Flash, you would select the span of tweened frames, press F6 so keyframes are inserted on each frame, and then right-click and choose Remove Tween so they become static frames.

If you were to remove the tween from a new tween span, you would lose those keyframes, so this process is not possible. Therefore, you can achieve this functionality by right/Control-clicking the tween span and selecting Convert to Frame by Frame Animation. Your tween is converted to the equivalent motion in static keyframes in one step.

Note: If you save your file as a Flash CS3 file, your tween spans are converted to frame-by-frame animations so that you can open the file in the older version of Flash and not lose the animation.

Copy and paste ActionScript 3

You can still copy the animation from a tween span as ActionScript 3 code in the new motion model. It's largely the same functionality: You right/Control-click a tween span and select Copy Motion as ActionScript 3. However, there are two changes that may affect your workflow.

In Flash CS3 you were prompted for an instance name when you copied motion from a tween. Flash CS4 or later does not prompt you for an instance name when you copy the motion; you enter it into the pasted code instead. So, after you paste the copied ActionScript into the script pane, scroll to the following line of code, uncomment it, and add the instance name of the instance you want to target. For example, you would change this line at the end of your code:

// __animFactory_Symbol2_3.addTarget(<instance name goes here>, 0);

to this:

__animFactory_Symbol2_3.addTarget(yourClip, 0);

You might notice the other change after you paste the code from a motion tween. The animation is now created using an array of values instead of XML. This would only affect developers who modify the animation code after the fact. These arrays are applied through a new interface to the CS3 motion tween class. The original CS3 interface that took the CS3 classic tween XML as a description of the tween still exists for those of you who wish to use it.

Using eases with your tweens

In previous versions of Flash, you could add easing to your motion tweens using the Property inspector or a custom ease graph. The Property inspector allowed you to add an easing strength to allow you to ease an animation "in" or "out"; or, you could click the Edit button next to that value to apply a custom ease to the tween by editing a curve along a graph with control points and Bezier handles. That custom ease needed to start at a 0 value and end at 100—you controlled what happened in between those two values.

You can still add ease strength for a tween using the Property inspector to ease in and out, and you can still create a custom ease (although now using the Motion Editor). Creating an effect like easing between keyframes (as you might have done using the Property inspector) works differently in Flash CS4 or later, and is covered in the next section.

Note: Applying ease to your tween using the Property inspector applies a Simple (Slow) ease to all of the tweened properties. You can modify the ease strength and the properties to which it's applied by using the Motion Editor.

Eases are applied across the entire tween span, regardless of where the keyframes for the property are placed. Therefore, the ease might not behave as expected if your final keyframe is not at the last frame (see Figure 7). You can see what the tween is doing using the property graphs in the Motion Editor.

Does your motion tween not animate as you expect after an ease has been applied? Check out what's going on in the Motion Editor. If you drag the last keyframe on the y property of this tween with Bounce In applied to the end of the span, you can rectify the issue (see Figure 8).
Figure 7. Does your motion tween not animate as you expect after an ease has been applied? Check out what's going on in the Motion Editor. If you drag the last keyframe on the y property of this tween with Bounce In applied to the end of the span, you can rectify the issue (see Figure 8).

If you find yourself in this situation, there are three ways to achieve what you're after. If your keyframe needs to be at that exact frame, you will want to split the tween span after the final keyframe so the ease applies to the entire span. To split the tween span, select the frame where the second span should start in the Timeline (Control/Command-click the frame), right/Control-click the span, and then choose Split Motion.

You have two more options: you can create a custom ease that achieves what you're after, or you can drag the final keyframe of the eased property to the end of the tween span.

Flash CS4 and later makes working with eases much more powerful, visual, and easy to do for the following reasons:

  • You can use preset eases that ship with Flash to create quick effects, such as bouncing, springiness, or even a random effect. You can choose from 16 preset eases.
  • You can apply a preset ease or custom ease to an individual property of your tween. For example, you can apply easing only to the alpha property of a tween so that the easing of the position is unaffected.
  • You can apply one or more eases to a single motion tween.
  • The final value for a custom ease does not need to be set to 100% anymore.
  • Graphs in the motion editor contain a visual indication of how the ease affects the tweened value (see Figure 8). The uneditable ease curve is incredibly helpful to know how the ease changes the tween, and the ease curve will update if you change the tween's curve in the graph.
Dragging a keyframe in the editable curve updates the actual tweened values of the animation displayed by the dashed line (a Bounce In ease). The previous values before dragging the keyframe are shown in Figure 7.
Figure 8. Dragging a keyframe in the editable curve updates the actual tweened values of the animation displayed by the dashed line (a Bounce In ease). The previous values before dragging the keyframe are shown in Figure 7.

For information on using eases with your animations, read Animation Learning Guide for Flash: Preset and custom eases.

Easing between keyframes

In Flash CS3, you could set easing on each keyframe in your animation to apply easing between two instances. Because there is only one instance per tween span, you cannot ease the same way using the new motion model. In order to apply an easing effect to a motion tween, you need to use a custom ease or modify curves in property graphs using the Motion Editor.

You can create a custom ease in the Eases section of the Motion Editor, and then apply them using the Ease menu for each property or category of properties. Refer to the Animation Learning Guide for Flash for more information on eases, graph editing, and the Motion Editor. The following section shows you how to create an ease-in, ease-out effect using a custom ease to effectively ease between keyframes.

Another way to create an easing effect between keyframes is to add curves to your animation graph using the Motion Editor. Because the curve controls the rate of change over time, you can control how the property animates like easing does (see Figure 9).

Add curves to rotation to control the rate of change between keyframes.
Figure 9. Add curves to rotation to control the rate of change between keyframes.

Note: Controlling curves in x, y, and z property graphs (spatial properties) does not work the same way as with other property graphs. A custom ease is best for easing between spatial property keyframes.

Easing between keyframes using a custom ease

Easing between keyframes is achieved a different way when you use Flash CS4 or later. In Flash CS3, you used the Property inspector to apply easing to individual keyframes. Because there's only one keyframe per span in Flash CS4 and later, you need to use a custom ease or directly manipulate property curves to add an easing effect between keyframes.

The following example shows you how this is achieved using custom ease.

  1. Open the starter file ease-starter.fla, found in this article's source files. The file has two motion tweens, a classic tween that uses easing between keyframes to ease in and out, and a new tween that you will apply easing to. Play the animation to see what you will replicate.
  2. Select the blue tween span on the new tween layer, and then open the Motion Editor (Window > Motion Editor).
  3. Scroll to the Eases section, click the Add button and choose Custom from the menu.
  4. Move the playhead so it's at frame 12 (where the middle keyframe is located), and click the Add Keyframe button that looks like a gray diamond (see Figure 10).
Click the add keyframe button in the Motion Editor, so the gray button turns yellow.
Figure 10. Click the add keyframe button in the Motion Editor, so the gray button turns yellow.

Leave the keyframe where it is on the graph, and then select the first keyframe and drag the handle that extends until it's vertical above the keyframe and the curve roughly matches Figure 11.

Drag the handles so it looks a lot like this curve.
Figure 11. Drag the handles so it looks a lot like this curve.
  1. Now repeat with the last keyframe, dragging the handle so it's vertical beneath the last keyframe and roughly matches Figure 12.
Drag the handles some more.
Figure 12. Drag the handles some more.
  1. Now Alt/Option-click the middle keyframe so it's a corner point, or drag the handles so they're horizontal.
  2. Select Custom from the Ease menu for the x and y properties (see Figure 13).
Choose custom ease from the menu in the Ease column. The graphs update to show how the ease affects the x  and y properties.
Figure 13. Choose custom ease from the menu in the Ease column. The graphs update to show how the ease affects the x and y properties.
  1. Play the animation again, and your tween should match the classic tween with easing between keyframes. If not, fine tune the curve in the Custom ease graph while watching the motion path dots update on the Stage.

The finished version of this file is called ease-finished.fla, and you can find it in the source files linked to at the beginning of this article—as well as here:

  • flcs4_migrate-me.zip (ZIP, 145K)

When to use classic tweens

Classic tweens look and work the same way as motion tweens did in previous versions of Flash (see Figure 14). The only difference is you cannot create a motion tween from the Property inspector.

Creating a classic tween.
Figure 14. Creating a classic tween.

You should use motion tweens whenever possible, which should be most of the time. Classic tweens are available in Flash CS4 and later to help the migration process from the old way of tweening to the new and improved motion model, so you have time to learn how they work before you start using them. Also, motion tweens let you do a lot of things you cannot do with classic tweens, such as 3D animation and saving or applying motion presets.

You may want to use classic tweens in certain circumstances where using new motion currently does not allow you do continue with an essential workflow, such as when you need to do the following things:

  • Tween between two color effects. For example, the first instance in your tween has a brightness effect, the second instance has a tint effect, and the tween interpolates between those two effects. Do note that you may be able to use the Advanced color effect with a new tween to achieve similar results.
  • Highly complex easing between keyframes, when a custom ease may not be a viable solution for you.
  • Block an animation using static keyframes and then convert long spans to your tween afterwards.
  • Tweening with graphic symbols when you need to change the frame displayed during the animation, such as with lip-syncing motion-tweened graphic instances. Each tween span can display one frame of a graphic instance across the span. Also, see the note below about lip-syncing with new motion tweens.
  • Have multiple instances share the same motion guide. You can paste the same motion path on multiple instances, but you cannot have numerous instances share the same path as you can using a guide layer. So to do this, you would need to use a motion guide and classic tweens.

Tweening graphic symbols or swapping symbols

Since a tween span can display a single frame of a graphic instance, you cannot set the frame during the motion to match property keyframes. However, the Split Motion feature lets you create motion first, and then segment it into numerous tween spans. Therefore, you could use the following workflow to create animations using the new motion model that use multiple frames of a graphic instance or multiple symbols, such as lip sync workflows:

  1. Create the motion first, with your graphic instance tweened on a single tween span (or multiple if necessary).
  2. Determine where you need the graphic frame to change, and select that frame (Control/Command-click the frame).
  3. Right/Control-click and choose Split Motion.
  4. Set the new tween span to display the desired frame of the graphic instance (or, you might want to swap the symbol.)
  5. Repeat.

Where to go from here

Flash Professional features many ways to interact with your motion tweens. This article focuses on the changes to your workflow or the way things tween, and does not go into the same level of detail as the Animation Learning Guide for Flash or the online product documentation on how to create or manipulate tweens using the various controls and commands.

Some of these features include the following:

  • Motion presets: Use preset animations that ship with Flash or save your own tweens as presets to use on other instances in your FLA files. See Applying motion presets in the Flash Professional online documentation.
  • Motion Editor: Control how individual properties animate using graph controls. See the presentation Advanced Motion Editor and Presets on gotoAndLearn.com.
  • Per property tweening: Create keyframes on individual keyframes by just changing the instance itself using panels or tools in the Flash workspace. You can also change properties using the Motion Editor. See Animation Learning Guide for Flash: Motion Editor.
  • 3D support: Add 3D rotation and translation to a motion tween, and have the instance animate accordingly. See Exploring the new 3D features in Flash CS4 Professional.
  • Tween instance: Give a tween span an instance name that you can then associate with other instances in your document using code. See the Flashthusiast blog for more information.

Now that you understand the changes to how motion tweens work in Flash, you're ready to start using them for your animation—if you haven't already. Here are a few resources to start with:

  • Animation Learning Guide for Flash
  • Flashthusiast blog
  • Creating a simple animation in Flash
  • Creating motion tweens: Part 1 (Adobe TV)
  • Creating motion tweens: Part 2 (Adobe TV)
  • Using motion presets (Adobe TV)
  • Using the motion editor (Adobe TV)

Happy tweening!

More Like This

  • Animation in Macromedia Flash: Squash and Stretch
  • Creating a simple document in Flash CS4 Professional
  • Examining the Puzzle Game sample application
  • Flash CS4 Missing Manual excerpts: Video, testing and debugging, optimization, and sound
  • Easy animation with the Motion Editor in Flash
  • Creating a simple animation in Flash
  • Advanced character animation in Flash
  • Migrating from ActionScript 2 to ActionScript 3: Key concepts and changes
  • Exploring the new 3D features in Flash CS4 Professional
  • Combining animation and ActionScript using Flash Professional CS5 and Flash Builder 4

Flash User Forum

More
04/23/2012 Auto-Save and Auto-Recovery
04/23/2012 Open hyperlinks in new window/tab/pop-up ?
04/21/2012 PNG transparencies glitched
04/01/2010 Workaround for JSFL shape selection bug?

Flash Cookbooks

More
02/13/2012 Randomize an array
02/11/2012 How to create a Facebook fan page with Flash
02/08/2012 Digital Clock
01/18/2012 Recording webcam video & audio in a flv file on local drive

Products

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • Mobile Apps
  • Photoshop
  • Touch Apps
  • Student and Teacher Editions

Solutions

  • Digital marketing
  • Digital media
  • Web Experience Management

Industries

  • Education
  • Financial services
  • Government

Help

  • Product help centers
  • Orders and returns
  • Downloading and installing
  • My Adobe

Learning

  • Adobe Developer Connection
  • Adobe TV
  • Training and certification
  • Forums
  • Design Center

Ways to buy

  • For personal and home office
  • For students, educators, and staff
  • For small and medium businesses
  • For businesses, schools, and government
  • Special offers

Downloads

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Security
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Ad Choices

Reviewed by TRUSTe: site privacy statement