Staggering Tweens

This article assumes you have a working knowledge of Flash.. basic tweening, working with the timeline, etc.

In traditional animation, a stagger between keys is achieved by moving forward, then backward, then forward then backward, and so on. This is used to show something under strain, like someone lifting a heavy object, or pulling a rope in a tug-of-war. It's usually done on 1's (single frames) to show a vibrating kind of movement.

I've used this lots of times throughout all my Flash movies.. the first time that comes to mind is when Bingbong sees the Faeries dancing. Another one is Bigfoot's mouth as it calls for littleFoot.

Flash 8 has the Custom Ease window which allows you to control the timing of a motion tween (it can't be used on shape tweens). First, looking at a standard motion tween, you can see how it's the same drawing going from low squashed, to high stretched. If you've never used Flash before, this is the basis of Flash as an animation program. You can "slide" objects around the stage, or scale them over time like the swf below:

Note: the above .swf is Flash 8. If you can't see it, you need to update your Flash Player

The above movie is looping, so it appears that he's pulsating.. but basically this is a tween from one scale value to another over 20 frames. So we have a gradual and even movement.

The Custom Ease window in Flash 8 can be accessed by first selecting the tween in the Timeline, and then, in the Property Inspector, click the 'Edit' button. You'll see the following:


Click thumbnail image to see full size

The line represents a linear, constant movement between the two keys. Note the frame numbers at the bottom of the graph.

This gives you excellent control over the timing of your tweens, whether it's a ball rolling to a stop, a firefly tweened along a path, or even a camera pan or zoom. Clicking anywhere on the line creates a point that has tangent handles, with which you can curve the line.

To create a staggered tween on singles, you would first add points (by clicking on the line) at every frame along the line like this:



To remove points, click a point and press the Delete key on your keyboard.

Now to stagger a tween, you need to zig-zag the progress of it. In other words, you want it to go forwards, then backwards, then forwards, then backwards, etc. Do this by dragging the points up and down, so you have something like this:



See the percentages on the left? They represent the progress of the tween, so you're going forward, back, forward, back.. on 1's (single frames).

The staggered tween above is a fairly mechanical one.. you can see it's quite consistent all the way to the end keyframe. You can vary this for effect. For example, the stagger below is very violent:



It might help to think of this like a seismic graph.. The more distance from one point to the next, the more aggressive the movement.

The next image shows a stagger that starts off violent, then gets more gentle towards the end:



You could do the opposite of this, i.e. start gentle and become more jagged towards the end keyframe. Then again, you could do something completely random, like this:



The great thing about all this, is that there's still only two keyframes in the tween! You haven't added file size to the movie, and you haven't drawn any extra poses.. So here's the same .swf you saw earlier, now with a stagger:


Note: the above .swf is Flash 8. If you can't see it, you need to update your Flash Player

This guy's really distressed now.. he's screamin his arse off!

ps. you can download the FLA of the above example here. Custom Easing is available in Flash 8 Professional only, so you won't be able to open this FLA if you're using MX 2004 or earlier.