Flash CS4: How to ease between keyframes using new motion tweens

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. Keep reading to learn how to ease between keyframes using a custom ease.

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 this blog post for more information on creating a custom ease. The following section shows you how to create an ease-in, ease-out effect using a custom ease to effectively ease between keyframes.

Note: 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 the following figure – click to enlarge).

mmigrate-fig09.jpg



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.

How to ease between keyframes using a custom ease
Easing between keyframes is achieved a different way when you use Flash CS4. 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, 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. 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 the following figure).

mmigrate-fig10.jpg


Click the add keyframe button in the Motion Editor, so the gray button turns yellow.

5. 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 the following figure.

mmigrate-fig11.jpg


Drag the handles so it looks a lot like this curve.

6. Now repeat with the last keyframe, dragging the handle so it’s vertical beneath the last keyframe and roughly matches the following figure.

mmigrate-fig12.jpg


Drag the handles some more.

7. Now Alt-click (Win) or Option-click (Mac) the middle keyframe so it’s a corner point, or drag the handles so they’re horizontal.
8. Select Custom from the Ease menu for the X and Y properties (see the following figure – click to enlarge).

mmigrate-fig13.jpg


Choose custom ease from the menu in the Ease column. The graphs update to show how the ease affects the X and Y properties.

9. 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.

Jen deHaan is a consultant specializing in instructional design, web design, WordPress, technical project management, and writing. She is based in the San Francisco Bay Area.

Tagged with: , , , , ,
Posted in Easing, Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, motion tween, new stuff
  • Maizie

    Is it still possible to draw a freehand motion path in CS4?
    I’m a novice on flash and am learning on CS3

  • http://www.flashthusiast.com Jen deHaan

    Hi Maizie: Yep, you can. You can draw a freehand path, and then copy and paste it onto a motion tween. You can then modify it further if you wish — select the Subselect tool and the path to modify it using bezier controls. Or you can bend/manipulate a deselected path using the Selection tool.

  • kati

    Thank you for the tutorial it helped a lot! I still have issues with the graph editor. I would like to create a simple bouncing ball and have trouble controlling the eases. Mainly I want to create a faster speed going down and a slower going upand have trouble with the besier handles. Is there a way to do numerical control? It didn’t seem to work for me. I am also frustrated because I cannot see the graph really well, when I zoom out to iclude more frames I have a very tiny view window. Is there an easier way to do this than using the graph editor? Should I just use the classic tween?
    Thanks again!

  • http://www.rocdornbrook.com Roc

    I did all this and it works great for that specific amount if time (keyframes), if I add more keyframes to the end so that the symbol stays on longer it all get out of wack!

  • http://www.flashthusiast.com Jen deHaan

    @Roc: Yes, if you change your animation then it’s likely you will need to change your custom tween. You may need to add additional keyframes, and/or adjust the values of the existing ones. When you drag them vertically, watch for the keyframe to snap to a value, which may be different depending on how you’ve altered the tween span.

  • http://www.setyourselffreelance.com/ Elliott Lemberger

    Thanks for this. It was driving me crazy trying to figure this out on my own!

    One question though… Is there an easy way to apply the same easing settings to a group of layers?

  • http://www.flashthusiast.com Jen deHaan

    The same settings to a group of layers/rows in the Motion Editor, or to a bunch of tweens on the Stage?

    If in the Motion Editor, you can apply the same tween to categories of layers, such as “Basic Motion” or a filter. In the main timeline, you can set preset to multiple tweens (on multiple layers if you wish) using presets. Any ease, such as a custom ease or whatever is in that preset, will be applied just as it is with the same settings to all of the selected tweens. Note that if you do that, it will update any animation you have to be the same as the preset. So this may be useful if you have not animated your instances yet, but if you already have you might not want to do this.

    We are exploring new ways to apply eases after-the-fact. Any things you’d like in particular, please share!

  • http://ajarproductions.com Justin Putney

    Jen,
    Here’s a way to apply eases after-the-fact:
    http://ajarproductions.com/blog/2009/02/26/the-missing-flash-panel-easecaddy/

  • Isa

    Hey thanks, that was exactly what I was looking for. The example .fla file made it really easy to see that you were talking about.

  • viesturs

    this new easing really sucks, old one was more usable

  • Chris

    There are certainly some positives to the new easing model, most notably the ability to tween multiple properties independently. However, the implementation leaves a lot to be desired. It is quite a bit more time-consuming to modify eases between keyframes, especially for multiple objects at a time.

    Also, it is very difficult to modify the timing of your eases using the new model. Individual key frames along the ease are difficult to move around on the timeline, and I still haven’t figured out a way to move multiple keyframes on different objects at once. Is there a way to do this?

    Overall, I applaud Adobe’s efforts to increase the flexibility and efficiency of animation in Flash, but I feel that CS4 breaks a lot of things in order to make a few things better. This is of great concern to me, because a modification of the motion model this significant is difficult to tamper with in future versions of Flash, and I fear that Adobe has taken a big step with no recourse to fix it later.

  • http://www.vegaproject.com Jeff

    I completely agree with you Chris. I rely heavily in easing between frames in my animations. I’ve regressed to using classic tween because of the extra pain involved. Unfortunately I can’t take advantage of the new copy and paste of motions, which is my favorite new feature in CS4. I’m participating in user testing at Adobe for Flash CS6 in a month or so, I’ll be sure to bring up this issue!

  • http://www.flashthusiast.com Jen deHaan

    Hi Jeff/Chris – Yes, we definitely know we need to make easing between keyframes easier (and I look forward to your input). This is one of the reasons there are two models (that and a few other things Classic can do that new tweening cannot that we couldn’t add before ship).

    @Chris, re moving keyframes – you can as long as they’re contiguous frames on the main timeline, which is pretty much the same as Classic tweens. To select the frames, make sure you hold Cmd/Ctrl first.

  • Gary

    NOPE!! Holding down – Clicking CTRL/Click will NOT enable me to move the diamond tween marker on the Timeline as in CS3 :-( It seems to move the entire tween area instead! LOTS of folk are pretty frustrated over this issue!!

  • mike

    Whatever I select, the motion editor just will not open. What am I doing wrong?

  • http://www.flashthusiast.com Jen deHaan

    @Gary: Ctrl on Win, Cmd on mac. Make sure you don’t drag while holding the button (this is used to select multiple frames). You need to finish the selection first. Ctrl/Cmd click then release to select a single frame, then drag the frame. You can also drag multiple frames but you have to select them, release, then drag the selected frames.

    @Mike: Select a single new motion span (blue), or motion tweened object or motion path on the Stage. This feature is only for new motion tweens, not classic motion tweens (purple with the arrow) or shape tweens (green with arrow).

  • aharmlesspie

    THANK YOU. I was beating my head against a wall trying to figure this out! Its my first week with flash, and Im frustrated that it doesn’t work like after effects for animation. But now that I know this I can see why!

  • ema

    this easing is similar to after effects…
    the only difference is that a swf banner cost 10 times less than a tv ad…. so is useless for this kind of animation. The same in low budget websites. In high budget projects instead, we have usually a developer that make all tween in AS…

    the software should be fast, easy and friendly: it should make my life easyer, not harder…

  • http://www.Volcanic-Penguin.st Lee Comstock

    “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.”

    You say that it’s the best way, does that mean that there is an alternative way? I really dislike having to make a custom ease curve, if you have a long complicated animation it’s a lot of work, and then you can’t move keyframes or add more keyframes at the end of the animation without screwing up the ease curve. The new motion tweens would have been 10X better if you could just easy by smoothing the X and Y property curves and I kind of feel a deep hatred towards Adobe right now for utterly failing at the simple task of letting the user ease their position tweens, it makes the classic tweens so much easier to work with.

    /rant