about us
contacts and credits
Squash and Stretch is the first principle of the infamous Disney twelve and is used to control the amount of non-rigid body deformations in characters and objects. It provides boundaries for volume and rigidity. Terri Dentry talks to Steve Piscopo from Nectarine, on how this principle is achieved with the tools available in the Flash8 platform.
Header images: Edward Muybridge (run sequence), and Piscopo using Muybridge sequence to create fluppet parts for Flashman character
Original publication: Desktop Magazine 2008
Republished with permission
Learning to create good characters requires a solid mix of psychology, story telling, and imagination. In learning how to adapt those characters to an animation storyboard the animator needs to become a master of their chosen technique, and throw in a pinch of creativity to go outside the limits of that technique. My favourite way of describing animation is the german term, “trickfilm”. Traditional animation is basically one trick after another. John Lasseter of Pixar heralds this principle in his teachings stating “whatever it takes to get it working right on the screen is fair game”.

The basic principles of character animation, created in the early 1930’s by animators at Disney, were developed as frameworks for creating these tricks. By keeping within these guidelines the early animators were able to make their characters more astute and entertaining. The underlying character development became more predictable and characters were able to develop past the stretchy blobs with stringy arms into believable and lovable friends.

One of the first principles to be developed was that of Squash and Stretch and its application can be seen in some of the early 1920’s American cartoons such as Felix the Cat and Betty Boop. The Squash and Stretch principle defines that the volume of the character must remain constant – no matter what their action or reaction to a given stimulus or situation.

There are two classic examples used to explain this effect. The first example imagines a sack of flour being twisted and distorted into shapes which have classically gone on to create character elements in the sack itself. The underlying lesson from torturing the flour sack in this way is that no matter what shape or position the sack is put into its volume remains the same. The primary reason for the half-filled flour sack is as a simplified learning platform for understanding natural deformations in movement and dealing with the inherent limitations.

Another classic example is the bouncing ball that squashes when it hits the ground and stretches just before and after. The stretching, while not realistic, makes the ball appear to be moving faster right before and after it hits the ground. Using the stretch in this case is an animation trick that helps the animator create more convincing character movement. Holding the ball’s volume constant no matter how much it is squashed or stretched allows the animator to play with the ball’s character which maintaining believability for the audience.

The bouncing ball example builds on the understanding of volume consistency and adds the concept of rigidity. Many real world objects have little flexibility, such as furniture, however most organic objects have some level of flexibility in their shape. The bouncing ball example can be manipulated to tell the audience what type of material the ball is made from – and therefore its inherent character. A rubber ball, for example, bounces higher and squashes more upon impact than a baseball. The ease with which an object squashes and stretches defines the rigidity of the material making up the object.

Create a Bouncing Ball in Flash8

Steve Piscopo of Nectarine is an accomplished animator who has spent many years working in both commercial and art house animation development. Here Steve is going to talk us through recreating the bouncing ball example using the Flash 8 tools.

The first step in Flash is to create a circle on a blank stage. Steve shows us how to do this easily by using the Oval drawing tool and holding down the shift key as the oval is drawn which will ensure the end result is a regular circle. Make your circle about 1/5th the height of your stage.

This circle object is then converted to a symbol by holding down the Ctrl key and selecting “convert to symbol” from the pop up menu. Steve names the circle “ball” and selects the Graphic option.

Next move the ball symbol to the top of the stage, which will be the highest point of your bounce. At this point the transformation constraints should be 100% horizontal x 100% vertical. By turning on the transformation window you will see these figures displayed.

To create the bounce we first need to add some keyframes on our time sequence. By clicking on frame 20 and F6, a keyframe will be created. Another method of creating a keyframe is to select the desired frame, hold down the Ctrl key and selecting “Create Keyframe” from the pop up menu.

While in frame 20, drag the ball to the bottom of the platform, using the shift arrow to keep the ball aligned. This is now the point that the ball will be hitting the ground, and needs to be squashed. Steve’s tip is to use a shortcut to creating this squash transformation by changing the transformation % from the menu, rather than using a free transformation on the ball itself. Change the horizontal and vertical options to 150% and 50%.

The trick to maintaining the volume in the ball is to ensure that the vertical and horizontal %’s always add up to 200%. You can play with these options to get the amount of squash you prefer, try 130% and 70% as an option for a more rigid type of ball.

To animate our ball between the top and bottom we now need to add a “create motion tween” sequence between the two ball states. By clicking back on the frame 1, hold down the Ctrl key, and click on Create Motion Tween from the pop up menu. If we now play the movie we can see that this action is not quite right yet, because the ball squashes before it hits the ground because the motion tween has been computed as a smooth transformation from the top to the bottom. To counteract this we need to change the transformation back to 100% at frame 19. On the transform window there is a shortcut key on the bottom right hand side which does this for you – select the ball object first. At frame 20 the ball will then appear to squash as it hits the ground.

Altering the transformation at 19 to be 90%H and 110%V, will make the ball appear to stretch as it is dropping. This gives the drop the appearance of speed.

Once you have played with these two components, the amount of squash at the bottom, and the amount of stretch in the drop, the next step is to mirror the action to create the bounce back to the top, and adding a loop in the program so that you can play the movement over and over for checking purposes.

Steve explains that to ensure the end action is more believable there are several components that need to be tweaked manually. If your two tweens are not reading well together you might need to alter the transformations. If you are currently using 150/50, try 145/55 and then 140/60 etc until the effect is the way you want it. A couple of extra keyframes can also be added at the bottom of the motion (at about frame 20) to make the action appear to slow at the point of squash and be acting with a predictable amount of gravity. Playing your movie back over and over is the only way to get the settings correct. Keep changing these characteristics until it the ball is moving exactly the way you need it to.

The last component required to ensure the action is lifelike is to alter the “ease in/ease out” characteristics of the motion. These properties define the speed of the motion tween at certain points so that it appears to speed up and slow down. Even Steve gets these two actions confused, so if yours is not right the first time try reversing the action.

In our example the ease in was increased to 16, which makes the ball appear to move slower on the way up, and altered to 70 on the ease out, which makes it appear to speed up just before hitting the ground.

Other Uses for Squash and Stretch

The ball example is a useful tool to use to start working with a number of different body parts and character traits in your animation. Steve uses these same principles when animating limbs moving to create believable bicep curls and arm stretches. It is also the key component in lip syncing mouth parts. The mouth shapes start with a circle for an “O” shape, and squash to a more oval shape for an “M” or distort into stretched circle for an “A” shape.

When lip syncing the jaw shapes follow the mouth shapes in much the same way. Steve also suggests using these same actions when animating head turns, body movements, and in 3D character movements such as diving and leaping, where the volume of the character needs to be kept constant during a complex movement.

The key is in knowing how much to use and when to use it. Because of the realistic look of computer animation, an animator needs to be aware of how far to push the motion. The motion should match the design of the character and the world. Animating very cartoony motion with lots of squash and stretch on a realistic looking object may not look believable, as would realistic motion on a caricatured object. www.nectarine.com.au

Terri Dentry is an independent film journalist, animation producer, and the Director of thinkRED film & media in Melbourne, Australia.

What's Up With Abstract Animation?
SIGGRAPH 08 celebrates the third generation launch of 3D cinema
Sound Designers Have Great Balance
Flash 8: Exaggerating the Illusion of Life
Flash 8: How to make a character appealing
Flash 8: Squashing and stretching your character
Flash 8: Moving through arcs of motion
Technologies Merge at WebDU
Filmmakers beware: DVDs simply don’t work!
Stories in the Stars: Animating at the Planitarium
The Persistance of Visuals: VJ technology
Steve Piscopo, Nectarine
Steve Piscopo, Nectarine