Go to Totally Hip

Squash and Stretch

  This tutorial explains how to use WebPainter to create an animation from scratch. It also explains a simple animation concept: squash and stretch.

In this lesson you will learn:

   
  • use onion-skinning to position graphics between cels
    apply animation techniques to realistically animate the ball bouncing
  Animation Technique
"Squash and stretch" is animation technique that gives more life-like behavior to drawn objects and characters. The principle of squash and stretch is to provide an animated character with fluid motions that match the real-world behavior of objects with that mass and volume. In this animation the ball will bounce on the bottom surface of the frame, squashing as it hits the bottom and stretching as it bounces up.

A rubber ball has certain attributes of elasticity and bounce; it squashes when it hits the floor and stretches as it leaves the floor, only later resuming its original form. A wooden block, on the other hand, has very little bounce when dropped on a floor, and virtually no change of shape occurs.

  For this lesson use the file BALL.WPM in the Tutorials folder.
  1. Open the file BALL.WPM. 
  2. Click the Onion Skin Previous button.
  3. Click the Duplicate Cels button to make a copy of the first cel.

  4. Onion Skinning shows you a faded image of the previous cel in the current cel to help you position graphics. You won’t see any difference at first because the two cels are identical.
  5. Select the ball with the Lasso tool. 
  6. Press the down arrow key on your keyboard to move the ball directly down. 
  7. Repeat steps 3 thru 7 two more times until the bottom of your ball touches the bottom of the cel. 
  8. On the Paint menu, make sure Draw Filled is selected so that the shape you draw is filled with a color. 
  9. Click the Eye dropper tool and click the mouse over the red area of the circle on the canvas. This sets the foreground color to the red of the circle.
  10. Click the New Cel button to create a new, blank cel at the end of your animation. 
  11. Click the Circle tool, click the canvas, and draw an oval.
  12. Give the oval roughly the same volume as the circles in the previous frames; that is, it should look like the ball is squashing, not like the ball has been replaced with a different object.
  13. Open the Cel Layers window and select the second frame then holding down the SHIFT key click the fourth cel to select the 3 cels showing the ball's downard movement. 
  14. Click the Duplicate Cel button to create a duplicate of the three cels. You will notice that the entire column of layers of each cel is now selected. 
  15. Click in the first duplicated frame (frame 5) and SHIFT clicking the last duplicated frame (frame 7) to selected the duplicated cels.
  16. Click the Flip Selected Cels button in the Cel Layers window to flip the selected cels.
  17. Click the column button of the first flipped frame to column select the frame.
  18. Drag the selected frame to the end of the animation.
  19. Repeat steps 18 and 19 with the 2 other flipped cels.
  20. Click the Play button to review your animation. 
  21. Save your work.
  22. Now you’ve created an animation of a ball falling down, squashing as it hits the bottom, stretching as it rises, and finally resuming its round shape. 
  Extra Credit
Try making the animation more complicated by having the ball continue its trajectory upwards, hitting the top of the frame and squashing and stretching again. Try moving the ball’s axis a bit to the left or right and having it bounce off all four sides of the cel.

Contents   Previous Next