«
»

Flash Animation

The secret of tweening: When and when not to

09.07.07 | 4,540 Comments

One of the biggest problems with animation in Flash is that it’s so easy to cheat. You’ve got motion tweens and shape tweens and timeline effects and the Spaghetti Monster knows what else that all books on Flash demonstrates as “how you animate in Flash”. But these things are just tools; little helpers to speed up work, the bulk of animation (and especially character animation) has to happen with your hands, drawing till you bleed (well, almost). Today we are nevertheless going to cheat, we are going to look at how you use tweening in a smart way.

Motion tweening


Motion tweens are for moving objects such as movie clips and groups across the screen, or rotating them or similar. They are not appropriate for moving linked parts of a character (like you often see when people use ‘cut outs’ to animate characters) because real arms and legs change shape when they move and so does almost every other part of a living thing.

A birds wing can't be tweened because it changes shape

However, motion tweens can be quiet useful for moving dead things around, especially if used with a motion guide or with easing. If you decide to move parts of a character with the help of motion tweens, remember that living things seldom move in straight lines. This arch shows a characters head moving:

Heads and other parts of living thing moves in a non-linear way.

Use a motion guide to replicate this if you are using a motion tween to move the head.

Motion tweens can also be used to move characters around the screen if they are simultaneously being animated. A walking cycle:

Walking cycle in a movie clip

…(for example) does not in fact move the character anywhere, it just animates the legs, so using a motion tween on the movie clip containing the walking character or (more commonly) tweening the background might work.

Animated clip beeing moved using a tween

But it’s generally easier to move the movie clip key frame by key frame to get the motion in sync with the steps.

Shape tweening
Shape tweens are used on shapes (oh really?). They work best on simple shapes with few anchor points, try to use them to animate complicated shapes and you will be wasting time. The time it takes you to place and adjust all those shape hints will be triple the time it would take you to just draw the thing.

In this animation the simple appendages (tentacle thingies) where made from two motion tweens with shape hints. The trick is to use as few shape hints as you can, the more you have, the more there is for Flash to misinterpret.

Shape hints placed on a simple shape

The arms could be made with shape tweens because both the shapes and the animation applied to it were simple. Had any of those two been complex the thing would have been a lot easier to draw by hand. For example, watch the little spaghetti straw on his head. It bends in to it self, so even if the thing itself I simple the animation is a bit to complex to use a tween.

The animated pice on the FSM's head

Shape tweening is pretty heavy on performance and file size, especially if used on gradients and transparent objects. Use it as a timesaver, but think before you do!

Easing
It’s almost always a good idea to use a bit on easing in tweens, it makes them look less even and more life like (that is of course unless it’s an absolutely even motion you are trying to achieve). Another approach is to split the motion up in to several tweens that are a little differently paced, but then you are getting closer to just doing it key frame by key frame.

Blend mode should be set to distributive if the shape is organic-like (smooth and rounded) and angular if it’s a shape with many sharp corners. Don’t sweat about this, Flash will automatically select the more appropriate choice should you happen to select one that is incompatible with the shape you are tweening.

Ok that’s all for today. Next time we will start animating by hand and go thru some of the principles of animation. Thanks to Serietecknarskolan for letting me use their old logo “Fågelmannen” in this tutorial.

4,540 Comments