 |
|
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.
- Open the file
BALL.WPM.
- Click the Onion Skin
Previous button.
- Click the Duplicate
Cels button to make a copy of the first cel.
- Onion Skinning shows
you a faded image of the previous cel in the
current cel to help you position graphics. You
wont see any difference at first because
the two cels are identical.
- Select the ball with
the Lasso tool.
- Press the down arrow
key on your keyboard to move the ball directly
down.
- Repeat steps 3 thru 7
two more times until the bottom of your ball
touches the bottom of the cel.
- On the Paint menu,
make sure Draw Filled is selected so that the
shape you draw is filled with a color.
- 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.
- Click the New Cel
button to create a new, blank cel at the end of
your animation.
- Click the Circle
tool, click the canvas, and draw an oval.
- 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.
- 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.
- 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.
- Click in the first
duplicated frame (frame 5) and SHIFT clicking the
last duplicated frame (frame 7) to selected the
duplicated cels.
- Click the Flip
Selected Cels button in the Cel Layers window to
flip the selected cels.
- Click the column
button of the first flipped frame to column
select the frame.
- Drag the selected
frame to the end of the animation.
- Repeat steps 18 and 19 with the 2 other flipped
cels.
- Click the Play button
to review your animation.
- Save your work.
- Now youve
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 balls axis a bit
to the left or right and having it bounce off all four
sides of the cel. |