How
to make 2d cartoon style animation.
In the old days, before Quake C and CGI was wild, animation was a process of making thousands of drawings by hand (one per frame)
or using a copy and paste approach (not unfamiliar to the WW II ear crowd at all). In the old days, a tranparent piece of plastic was painted with the desired background, then another piece for each \
layer of movement (i.e. draw the rabbit pre-hop, leaving the rest of the area clear), which was placed over the background. Then a photo was shot of the 'frame' of motion, and thr process repeated ad infinitem. In tribute to the people
who took the hard approach, I make this page.
The
goal of animation is to trick the audience into thinking something is really
happening and to tell a story.
The
simple but long way of making computer animation
(a.k.a
the Traditional Approach)
USAGE: Few moving
objects, same or nearly same background
CONCEPT: Recycle
background, copy and paste moving items (=characters)
In the old days,
before computers, the cartoonist (cartoon + artist = cartoonist) would
first plan out the animation using a basic 'storyboard' (uses a few drawings
to show what is going to happen in the animation), draw the initial characters
in a few basic poses, and then draw the background. The cartoonist would
then litterally use a scissors and glue to 'cut and paste' the charater
on several hundred copies of the background to make the character 'move'.
The computer age version of the process can still be performed, but with
much greater speed, using tools like Powerpoint, CorelDraw, or numerous
other drawing packages. Heres how it works using the "Hopping Bunny":
(for those with Powerpoint 97 or later, here is the powerpoint
file for the Hopping Bunny Example)
Step 1:The
Story (What do I want to do?). Describe the story you want to tell
with your animation by sketching the start, middle, and ending of the cartoon.
Also describe how each character (moving object) changes in the scene.
For the 'Hopping Bunny' I want the bunny to make 3 hops, starting in
the 'sitting' pose, then moving to the 'jumping' pose, then back to the
'sitting' position as shown here:
Goto next step||Goto
the top of the Tradional Method||Back to the page top
Step2:Draw
the background. If it isn't a character, and especially if it
doesn't move, then it is background. Make sure the background does
not hide your character by making sure it's colors hues contrast with the
colors used by the character. For the 'Hopping Bunny' I want the
bunny to be hopping across a green field with a blue sky like so:
Goto next step||Goto
Prevous Step||Goto the top of the Tradional
Method||Back to the page top
Step
3: Draw the the character in each 'pose'. On a seperate slide
or drawing (a seperate slide in powerpoint) make a drawing of each change
in the character's appearance. For the 'Hopping Bunny') In step 1
above I stated I wanted two poses: siting and jumping, so I need two drawings
(I decided I wanted a yellow bunny): sitting and jumping:
Remember! if using .gif's or JPEGs
make the background color of each pose transparent! If you are using powerpoint,
just group each pose.
Goto next step||Goto
Prevous Step||Goto the top of the Tradional
Method||Back to the page top
Step 4: Copy
the background image and copy the drawing of the first pose onto it.
Make a copy of the background drawing (electronically) and then copy the
first pose onto it at the cartoon starting position. For the hopping
bunny, I copy the background slide (the sky/grass slide) and then copy
and paste a sitting pose drawing at position #1 (as in the sketch in Step
1 ) like this:
and save it as frame 1.
Goto next step||Goto
Prevous Step||Goto the top of the Tradional
Method||Back to the page top
Step 5: Copy
the background, copy the pose for the next frame, and paste the pose
onto the background in the proper position. Save Frame (as a different
name than each previous frame). For the Hopping Bunny, I copy the
background (sky/grass picture) and paste a 'jumping' pose onto it for position
2 (from the skectch in step 1).
Trick: If you are using someting
like coreldraw or powerpoint you can just copy the previous frame, paste
on the pose for the new frame,
then delete the previous pose, and save to make the new frame like above.
This trick will make sure each succeeding
frame flows well.
Goto next step||Goto
Prevous Step||Goto the top of the Tradional
Method||Back to the page top
Step 6: Repeat
step 5 for each remaining frame until you have completed each position/pose
shown in your step 1 sketch. For the Hopping Bunny that means
I have to make five more frames (positions 3,4,5,6,7) which are shown below.
Goto next step||Goto
Prevous Step||Goto the top of the Tradional
Method||Back to the page top
Step 7: Combine
the individual frames into a single animated image. Using a package
like the animation wizard in the GIF Construction set from Alchemy Mindworks
or a similar product you will need to tell the software the name and order
of the frames, and the time delay between the showing of each frame.
Like a movie film, the animated .gif file simply displays each frame in
the order you tell it to, with a delay you set, between each frame.
The delay in an animated gif is set in the CONTROL attribute (this is also
where you set a tranparent color).
For the Hopping Bunny I used the animation
wizard in the GIF Construction Set, selected a .20 second delay between
each frame which resulted in this:
To speed download, you might also want
to use a compression package (I used the one in GIF Construction Set) to
get this:
Goto next step||Goto
Prevous Step||Goto the top of the Tradional
Method||Back to the page top
STEP 8: ENJOY
YOUR CARTOON-YOUR DONE!
Use it just like any other gif in your
webpages etc.
Goto Prevous Step||Goto
the top of the Tradional Method||Back to the page top
back to top
