15 August 2011
A basic knowledge of Flash Professional, including motion tweens and the Timeline. General understanding of concepts outlined in the Animation Learning Guide for Flash.
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.
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.
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:
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.
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).
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.
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.
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:
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).
You can also have animation on a mask or guide layer, which are also represented by special layer icons (see Figure 3).
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.
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).
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.
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).
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 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).
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.
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.
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:
For more information about motion paths and your tween, read Animation Learning Guide for Flash: Motion paths.
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.
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.
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);
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.
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.
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:
For information on using eases with your animations, read Animation Learning Guide for Flash: Preset and custom eases.
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).
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 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.
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.
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:
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.
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:
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:
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:
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: