6 December 2004
Squash and stretch is a traditional animation technique that animators commonly use to give animations more realism and weight. In the real world, when a moving object comes into contact with another object, it deforms upon impact unless it is completely rigid.
As you animate objects to show realistic impacts and collisions, one thing that is important to remember is that no matter how much an object squashes or stretches, it always maintains the same volume. The amount of squash and stretch depends on how much flexibility you give your object.
Traditional animation usually contains very exaggerated amounts of squash and stretch. A good example of this is a bouncing ball. When it hits the ground it actually deforms and gets squashed. It will then stretch out again as it propels itself upwards. With a little motion tweening and frame-by-frame animation in the Macromedia Flash authoring tool, you can achieve convincing realism with relatively little effort.
In this tutorial, you give a simple bouncing ball some squash and stretch. First, take a look at what the animation would look like without this effect:
Pretty lame huh? It's dull, boring, lifeless, and has absolutely no personality or character. You can fix this by adding some "weight" to the animation.
This will make the ball start off quickly and gradually decrease speed as it reaches the top (opposite the behavior of your first tween).
You're done! Your bouncing ball animation should now look like the SWF below (okay, I already gave you a peek at it above), and your FLA should look like it does in Figure 9. Pretty slick huh? See how much more life and weight you have given your otherwise static image? It's got a little more personality to it, and it didn't take a whole lot of blood and sweat to achieve.