12 STEP ANIMATION PROCESS

The process of making cartoons hasn’t changed much since the digital age, but some aspects of
production must change to accommodate different technologies and budgets. Jason and I put
together this 12 Step Animation Process that uses digital technology. It is the process I used for
Family Pants, minus the team. (Whether one person or a hundred, the process is still the same.)

There are 12 steps, but some steps are done simultaneously with others. So each pair of steps are
grouped together into a “key”, represented by each level of a pyramid. The work flow goes from
bottom up. Why upside down and a pyramid? The further you go in production, the less room you
have to move and the harder it is to turn back and make corrections. Generally, the animatic is the
point of no return, located in the middle. After it’s completion, its a matter of “connecting the
dots” to finish production.

On the sides of the pyramid are the creative side on the right, consisting of the director, assistant
director and crew and the executive side on the left consisting of the producers and the client if
there is one. The client and executive producers are equal in power to the director as is the
producer to the assistant director. The crew being creative follow the lead of the director and
assistant director and hence are on the right side with them.

Step 1. Script (Key 1):

Some artists feel that a cartoon, a visual medium needs to be scripted visually. The real purpose
of drawing storyboards in animation was for building a dialogue-less, series of gags, mostly seen
during the early days of animation. A character goes to the “farm”. Cartoonists come up with a
dozen farm related gags. Characters don’t talk much so writing descriptions of his actions seemed
silly, when the drawings were what told the story. Buy using removable “post-its”, gags could be
combined, re-worked and re-organized. It was a perfect system for that type of cartoon.

However, I’ve found it is faster to write then draw. To change a script that reads “100 hippos
dance” to “100 monkeys dance” would take seconds. To do the same visually, wouldn’t. Plus it
allows you to focus on the story structure and not get hung up on drawing a nice picture.
Sometimes it’s hard to let go of an idea because the picture looks so good, even though the story
would suffer if the picture prevails. Productions that are drawn instead of written usually look
good but could lack good story structure.

Writing for animation is different than writing in general. Care must be given not to put the
production over budget before anything gets started by writing scenes that are too complex to
animate. The script can use a device of “telling” rather than “doing”. The action could happen
between commercials or off camera. What we watch is just the result of what the characters were
planning on doing. This is the practice of real-life sitcoms and plays. It was even the practice of
Shakespeare’s Global theater, where actors described their surroundings, saving money and time
building a set that showed it.

One of my favorite shows, “Seinfeld” is a good example. In one episode George tells Jerry,
Kramer and Elaine in the coffee shop about wrestling a beached whale, to perpetuate his lie to his
girlfriend that he is a marine biologist. During the struggle, he pulls a golf ball Kramer is
responsible for hitting into the ocean earlier in the episode, from the whale’s blowhole. The story
is told to us. We never actually see it. This type of writing saves costs for sitcoms and plays as
well as animation. It is good acting that helps make the dialogue funny.

Ironically, I do use small post-its when constructing a story. Post-its allow for re-organization of
story events and plot turns. Most times these post-its have words, not images on them. Once the
idea is laid out, a script is written in a more formal and final form and the post-its are discarded.

Step 2. Thumbnails (Key 2):

Small rough drawings are created illustrating the story. These thumbnail storyboards focus on
staging to get a feel of the look of the shots. They are also used as layout preparation. Done
quickly to figure out where the scene takes place, the character and background details can be
worked out later. Storyboards are done on removable post-its. These post-its could be tacked in
the right-hand margin of the script during creation. They could also be tacked to a wall for an
easy overall view. This helps in development and editing. Afterward, they are numbered. The first
number is the “scene” or cut. The second number is the panel number of that scene.
Corresponding numbers are written UNDER the post-it on the script, so you can put the right
image back in the right spot. (Keep numbers written in pencil just in case!)

I like using standard square post-its and cut the lower third off it to create 3X5 dimensions. I also
use a black Sharpie marker. This way, I can’t get caught up in details because the marker point is
too thick. I also can’t get caught up in erasing and laboring over a drawing. At this point I don’t
want to sacrifice timing, story or editing for a good drawing. By keeping it down and dirty, I can’t
get attached to my drawings.

Step 3. Timing (Key 2):

As the thumbnails are being done, the timing could also be worked on. By reading the script
along to the rough boards, you can judge timing. This helps the director direct the voice talent and
estimate the length of the script. The time is indicated in the left margin of the script using a
stopwatch.

You can also record the dialogue scratch track and even fake the sound effects using your mouth.
This scratch track essentially becomes a digital x-sheet, something more tangible than a
traditional x-sheet which could be misunderstood or completely ignored by clients and producers
who cannot read them. A scratch track would provide a clearer picture for them and prevent
costly corrections later in production due to misunderstandings.

Step 4. Design (Key 3):

Illustrators and cartoonists design characters and props relating to the script and thumbnails. Even
for shows with an established design, perhaps a new character or scene may appear and need to
be designed. Designers need to know about animation, so as not to create elements that are too
difficult to animate for the allowed budget. I prefer backgrounds and layout could be simple and
almost vaudevillian to speed production and clarify jokes.
Designers work faster if working from thumbnails. Also, they’ll design exactly what you need. If
for example, there was a one-shot character behind a counter, the designer would see from the
thumbnails that he doesn’t have to concern himself with what the legs of the character look like.
This would save time. The backgrounds, having been worked from the rough boards, may not
only serve as images in the style guide bible, but actually end up being used as a completed
background, also saving time. And by working the designs off the thumbnails, the characters will
work within the narrative. You won’t end up with a great design of a character that can’t do what
the script and narrative requires him to do. This forward thinking can only be done after the script
and rough thumbnails establish your shots.

Step 5. Dialogue (Key 3):

At the same time of the designs, voice talent is recorded in a studio, following the script and
possibly referencing the thumbnails. They are directed by the director or simply follow the
director’s scratch track in the director’s absence. If the director is to direct in person, his rehearsal
of the timing earlier will allow him to know exactly how he wants his talent to perform. This
saves time and gives clear direction to the actors.

Each dialogue record needs to be mixed in a sound program. Immediately arranging them in
chronological order as they are being edited saves time, rather than adding the extra step to do
this later.

Step 6. Storyboard (Key 4):

The storyboard artist tells the story visually, following the rough thumbnails. He solidifies the
camera angles and moves. He also sets up the action and mood. He is the second most important
person next to the director.

Traditionally the storyboards would then be redrawn larger and in greater detail by the layout
artist. He would refine the art and add tracing paper overlays indicating camera movements. The
layout serves as a “blueprint” for the animators and background artists to follow. Backgrounds
need to be drawn so they create the illusion of a 3-D space under the camera. It should have the
character on the background and key positions to show where that character will start out and end
up during scenes. Strict attention must be paid ensuring the characters and elements are the
correct size and shape and on model according to the designs established earlier.
However, if enough time is given to the storyboard artist he could make a storyboard clean
enough that it may be used as the layout. In some productions, it is done this way to save some
time and money in hiring more artists. Either way, work is work. If a storyboard artist zips
through a board, extra time would be needed for the layout. If the storyboard artist is given the
time, less time is needed for the layout artist. A 10 hour job will take 10 hours to complete no
matter how you look at it.

In this production model however, the storyboard artist is the layout artist. He is also a digital
storyboard artist working directly on the computer. Since the designs are done following the
storyboards, some backgrounds may already be finished. The storyboard artist needs only to copy
and paste these elements into place. They might have to slightly adjust sets or props to the
director’s liking. Even so, slight adjustments are easier than total redraws. Character art however,
may need to be completely drawn fresh following the designer’s model sheets.

Some have argued designs should follow the storyboard. That way the designer only designs what
you need. Why would you need to design the basement of a house if it is never seen in your
story? Others ask how would the storyboard artist draw the story board without knowing what
anything looks like without seeing the designs first? In this production model, the rough
thumbnails set up the shot and angles. This assists the designers in what to design and in what not
to design. Their designs would in turn help the storyboard artists as some of their designs could
be used as final art!

(Some Technical information regarding digital storyboards and layout in Flash.)

The numbered thumbnail storyboards help in breaking up and distribution of the work. Each
scene is separated. All scenes with the same background are grouped together in a pile to be
drawn in a single FLA file, with each scene separated by Flash’s scene feature. The FLA file is
named according to the background within it. Keeping all backgrounds separated helps in
utilizing Flash’s symbol organization to speed production in not having to redraw artwork,
copying and pasting artwork and thus keeping a consistent look. Each scene is named
“000_bknd”, where “000″ is the number of the scene in chronological order and “bknd” tells
which FLA file it came from. This way, each scene could be rendered separately from the FLA
file as a SWF and placed in a folder. It’s naming conventions would allow the scenes to fall into
chronological order.
If necessary, each scene could be broken into separate FLA files. This would keep the file size
down and allow for multiple artists to work simultaneously. However, similar backgrounds would
have to have their symbol’s art be copied into the corresponding FLA’s symbol. Or you may open
up the library of the new FLA and drag those updated symbols onto the stage of the old FLA.
When prompted, choose “update”. After, delete the item from the stage.

Step 7. Soundtrack (Key 4):

Traditionally the director times the cartoon using X-sheets. If he is too busy, he has the assistant
director do it. More recently, he’ll farm the work to sluggers who basically time the cartoon in a
more shorthand way but more importantly won’t have to be paid assistant director wages. An
issue with these traditional methods is that producers or clients paying for the production do not
have the ability to read x-sheets or slugs. Many of their concerns or requests go ignored until late
in production costing time and money.

So for some more recent digital productions the timing will be created by digitally editing
together storyboard art and dialogue recording. These “automatic animations” are called
animatics and provide a more tangible view of the production to allow them to offer suggestions /
corrections. Although animatics aren’t new, and have been around for decades, they allow
directors to see the cartoon, before the cartoon was done, double checking the x-sheets. But this is
generally a feature for larger budgets. Smaller budgets have to trust the timer.

But making video animatics puts a cartoon’s timing in the hands of a video editor, who may not
understand cartoon timing. You could hire a slugger who knows video editing software or
perhaps the director himself took a class in video editing and therefore could do it. The least
efficient and most expensive way is having the director sit elbow to elbow with the video guy and
tell him what to do, shot for shot. This wastes long hours of the director’s time as well as
requiring hiring a video editor, who would hate such a job.

In this production model we have an altogether different approach.

Sound guys know timing because they know music. Music is all about timing. Listen to the
soundtrack to a “Tom and Jerry” cartoon. Scott Bradley’s piano playing to the antics of Tom
chasing Jerry is musical. In this case the actions were timed first and the music added later, but
note that director Bill Hanna’s timing of the characters are in fact musical, whether Bill knew it
or not. Movement is musical. Actions are like dance. Look at fight sequences in Jackie Chan
movies. The moves are choreographed like dancers. Even dialogue is musical. Listen to George
Carlin’s performance. His timing and tones are musical. All speech is. Oddly enough, good
animation timing falls into beats and measures just as music does. Thus a good sound track could
drive a cartoon and a well timed cartoon could drive a sound track.

So in this production, rather than have the director sit with the timer, slugger, video editor or
assistant director, he’ll sit with the sound guy.

Just as a child would provide a soundtrack to his playing with toy cars using nothing but his
imagination and his mouth, the director would do the same for the sound guy. In less than an hour
or two, he’ll record a scratch soundtrack that would direct the sound-man. This also will be a
quick way for the director to communicate to the sound engineer as to what he specifically wants
for the sound effects used in production. As mentioned above, the actual scratch recording could
have been done earlier for clients to hear rather than confusing them with timing numbers or
asking them to trust the director. Communication between the client and director is important and
communication gaps in animation productions are generally caused by clients or producers
simply lacking the skill to understand what is being made until late in the production to make
changes or requests economical.

Later, the sound guy could compose the soundtrack following the scratch track. He’ll have to
search for good contrasting and interesting sound effects for these actions if he pulls sound effects
from CD libraries. Or if the budget is big enough, he will work with Foley artists to create the
sound entirely. A good musician and music producer has the skills of creating thick and
contrasting sounds. Of course, he’ll provide actual music as well. A completed soundtrack serves
as a ready-made “digital” x-sheet when brought into Flash. No paper is necessary and no need to
re-write all the actions either as x-sheets or as slugged storyboards.

I’ve found it is easier to draw to limited sound effect CDs, than to Foley new sound effects
afterward to the animation. First sound effect CDs are a fraction of the cost of a Foley
department. If necessary you could change your drawings to better fit the sound you have, than
digitally alter a rather limiting sound effect to match your animation. This is cost effective reason
to do the sound before animation.
I’ve also found to get compelling sound effects, you really have to know your sound effect CDs.
You gather the sounds you think you’ll need and do the edit quickly with the obvious sound
effect, but then go through the entire collection to stumble upon something unexpected. It takes
longer, but well worth it. For example, a sound effect of Frank’s ass deflating after being stabbed
could have a splashing “ker-plunk” sound rather than a typical deflating balloon. Unexpected,
thus funny.

(Some Technical information regarding digital x-sheets and Flash when working at 24fps can be
found here.)

To distribute the work, the one giant soundtrack needs to be broken into segments according to
scenes and backgrounds. Each sound is named “000_bknd.aif”, where “000″ is the number of
the cut in chronological order and “bknd” tells which flash file it belongs to. This way, each AIF
placed in a folder will fall into chronological order.

These are exported to the 1/24th of a second to make sure when it is imported into a Flash file, it
falls on an exact frame number. SWFs or Quick Times that end on partial frames could have
blank “half” frame at the end and would need to be corrected during the compositing process. A
separate sheet of paper needs to have the exact length of the sound in 1/24th of a second. This
way when the artist imports that sound into his Flash file, he’ll know how far to extend his
timeline to keep everything accurate.

Also, these segments are at a lower bit rate and frequency so they do not take up too much file
size in flash, yet allows you to still hear the sound clearly. The animation could be exported as a
SwF without sound and edited together with other scenes and the final soundtrack later.

A big problem is when you import sound into Flash, it shortens sounds at a rate of 1/12th of a
second per minute. For scenes that are seconds long, no one would be able to tell your animation
was to a slightly different timing. But for longer scenes and for post production editing in
general, this glitch could wreak havoc.

To correct this, convert the sounds to 22.079khz before you import them into your FLASH files.
The sound will show the correct frame length and subsequently your animation will line up with
the original sound externally. (22.079kHz works for 24-fps, 30-fps and 15-fps. For higher kHz,
use 44.158kHz. You can export sound at this rate directly from Pro Tools or from Quick Time
Pro.)
Exporting sound segments from AfterEffects can be easier by selecting the area you want and
exporting AIF. However, AE will add onto your export. If I asked it to export exactly 1 min. of
sound, AE will give me 1 min. plus 1 second. Although according to AE’s pop up window on the
export, it should be only 2 extra frames. Using the magic number, the sound will still be accurate,
only longer in length. I do not recommend this method.

When importing the fixed sound into Flash MX or Flash 6, you’ll have to import it twice. Once
normally, then again through the library. This makes sure MX reads the sound correctly.

The magic number stands, 22.079 or 44.158kHz, whether exported from QT Pro, Pro Tools or
After Effects, it is the way to have Flash read sounds at their correct length at 24fps.

For Family Pants, I’ve used Pro Tools Free, Quick Time Pro, Sound Effect CD’s, Mini CD
recorder and Microphone. Music and talent are recorded into the Mini CD and played into the
computer via the headphone jack. (The M-Box, hardware that comes with a paid for copy of Pro
Tools, could make this job easier, allowing for microphones that use different jacks than the Mini
CD recorders’ mini stereo. However, the Mini CD recorder may be used for the Foley of original
sounds not found on CD as it is more portable than a computer and M-Box equipment. Iriver
makes a digital HD MP3 player that has an input jack allowing for recording. Ordinarily, if you
recorded something for an hour on your MD, you’d have to play it back again for that hour to get
it into your computer. With this device, you could record something for an hour, then transfer the
files to your computer like transferring files from a hard drive.)

Step 8. Animatic (Key 5):

Most clients request an animatic to keep tabs on the production. You’ll need to assemble your
scenes eventually, but by doing it early you could view various stages of progress. To get the
animatic, you’ll render the storyboard to the soundtrack. For the rough test, you’ll render the
same thing with rough animation added. For the work print, render the final piece at low
resolution. And for the final print, render it at high resolution.

The compositor imports the sound track pieces into the layout Flash files. He’ll extend his time-
line to the length the sound engineer indicated. He times the artwork and camera moves which
were created digitally, using symbols, tweens and motion paths, according to that sound. Since
the sounds were edited to the exact key frame, and numbered chronologically, the compositor can
export SWFs and assemble them end to end in a compositing program along with the original
soundtrack. This could be done in After Effects or QuickTime Pro.

He may have to render out several versions due to producer or client requests. But each
subsequent go around is easy since the composite file is already set up. He would just have to
update the changed assets or SWFs. If producers heard the scratch track, they’d have a pretty
good idea of what to expect, reducing surprises and subsequent retakes.

Quick Time Pro is cheaper than After Effects, but I’ve found you have to reassemble your SWFs
every time a SWF has been updated. It seems Quick Time Pro sees the SWF but knows
something is different. After Effects will always update correctly. However it is not “real time”
editing so its slow to actually see what you did. Plus each element gets its own layer, making the
edit window long. Final Cut Pro is “real time” editing, but cannot import SWFs. So the SWFs
would be opened and rendered out of Quick Time Pro as a full resolution Quick Time and edited
in Final Cut Pro.

CORRECTIONS:

A word about corrections. Generally, the animatic is the point of no return. After it, it is a matter
of connecting the dots to finish production, going from pre-production to production and post
production.

Correcting a script is as simple as offering critique and having the writer submitting a new draft.
Likewise, the scratch track would have a list of corrections and the newer recording would
replace the old.

The animatic corrections are more involving. Any request is first addressed in the audio track. It
is fixed there, then re-exported as a new AIF. Following the technical leads above, exported to the
1/24th of a frame and labeled correctly. A separate sheet of paper would keep track of the new
scene length in 1/24ths of a second. The compositor would import that new AIF and alter his
FLA to match the fix. Depending on the depth of the fix, the compositor could fix the shot
directly or request altered art from the storyboard artist, who’ll work directly in the compositor’s
file.

A re-exported SWF is reassembled to the new soundtrack and a new QuickTime is submitted for
review. Upon approval, the point of no return is reached. Now production connects the dots.
Step 9. Rough Animation (Key 6):

Flash animation is a combination of drawn artwork and puppet-ed symbols. I prefer to do all the
special effects via Flash. Use your imagination to create an effect, rather than using software. I’ve
found that actions animated without any sound tend to look quick and simple, which is good for
animation production, but being short and quick, difficult to match sound to. The resulting sound
effect is usually quick and simple. However, when sound is done first and the animation follows
it, the sound is slower, sounding more musical and complex. It is as if someone enjoyed making
the sound effect, rather than filling space on the soundtrack. The animator will find a “slip and
fall” a few seconds long rather than quick “fwipp!” Thus he’ll tailor his animation, adding
movements and actions to match the longer time. Listen to the sound carefully and draw what you
“see”. A good soundtrack guarantees good animation. Good animation does not guarantee a good
soundtrack.

Animators update the art the storyboard artists / layout artists created with new art. It’s good to
rough your animation before committing to it. Remember the motto: SPEED then CLEAN. Keep
it rough to do more thinking than drawing. Plan the movement out. If it works, later you’ll finish
the art.

Lip sync is done to the soundtrack after the character animation. Remember it’s still rough.

These files could be exported as SWFs and handed back to the compositor who uses the already
set-up composite used to make the animatic and re-renders a “rough print” for approval.

Step 10. Clean Animation (Key 7):

After corrections and approval of the rough print, the animation is cleaned up and given its final
line and look. Coloring is also done.

Step 11. Clean Backgrounds (Key 7):

The artists follow the artwork in the layout file and update it with final clean and colored artwork.
Sometimes the characters and their actions determine details of the backgrounds. Say, the
location of a drawer or the height of a counter that holds a necessary prop. After approval of the
rough animation, it’ll be safe to finish the backgrounds. This step could be quick, remember the
designers already made these backgrounds on an as needed basis. So the background artists only
need to finish corrections now.

Step 12. Delivery (Key 8):

The compositor imports the artwork of the symbols from the background files into the
corresponding symbols of the animation files to consolidate them. Or he may open up the library
of the new FLA and drag those updated symbols onto the stage of the old FLA. When prompted,
he’ll choose “update”. After, he’ll delete the item from the stage. Using the After Effects or
Quick Time Pro composite file, a small Quick Time of the animation is rendered for approval.
After any possible retakes and a second small render, the final larger render is generated. The
flash files are then archived.

And so this is the production I use for Family Pants. The short of it is that the soundtrack is done
before production rather than in post. Animators can work faster referencing it. Sound is done in
real time. To time a “slip and fall” via x-sheets would require skill, but a child could do it making
sound effects straight from his mouth. Plus I’ve found drawings are more flexible than sound. If I
couldn’t find the right motor boat sound, but found a great rowing sound, I could easily redraw
the shot to have Frank rowing, rather than driving a boat.

In animation, the script is just a part of the process. Unlike a novel, it is not the final delivery of
your idea. Some jokes in a script seem fantastic, until you see them visually with a scratch track
under them. Likewise, some great ideas may never be given a chance to be seen in their true final
form because they didn’t seem funny enough written down.

Thus the most clear deliveries are; script for concept, scratch track for timing and animatic for
visual. Cutting out the x-sheet and storyboard saves approval time and creates confidence that the
final product will be what the producers and client want. It takes an experienced person to read a
script, storyboard and x-sheet and see a finished cartoon in their head. If they can’t do that or do it
incorrectly, they’ll get an unexpected result and ask for costly corrections later.

Lastly, regarding animation production, here are some good sayings to use in production
meetings:

“Speed then Clean”.

Draw quickly and rough, making sure the art will work, before concentrating on the finer details.

“Plan Ahead Practice Behind”.

Use technology that’s older and proven. Play with new technology to get ready for what’s around
the corner.

“Animation is a House of Cards”.

Like a house of cards, when you get to the top and decide you want to change the bottom card
arrangement, the whole thing comes crashing down. The moral is each layer is final before you
move up. Otherwise, suffer the consequences.

(My personal favorite…)

“If Your Vision is Exploratory, Then So Will Be Your Budget”.

The only way to keep your work on a definite track is to keep your vision on one as well. You
can’t “try” this and “try” that, but still have everything done by a specific time. Be precise, and so
will be your budget.