Archive for February, 2009

Maybe Jersey has something in the water…?

February 17, 2009

Fellow New Jersey-ian, James Roberts creates cartoons in his spare time.  He digs Fred Flintstone and his stuff is also based on converting his ready made storyboard comic strips into animation.  Plus his character, Naybob, looks like a relative to Family Pant’s Frank Mueller!!

Check Mr. Robert’s cartoon, comic strip from whence it came and the kind bit of shameless Family Pants promotion he threw my way!




The New ‘ol Family Pants Animation Production Pyramid

February 9, 2009

A couple of years ago I posted a step by step animation process, which I used to make some Family Pants cartoons.  I worked with older programs, Flash 4 on G3 Mac G3, and over the years I’ve been forced to finally upgrade.

In doing so, many of the tricks that worked then, now do not.  So here’s a new process.  There’s some repeat from the older process but lots of new stuff.

First off, lots of animation producers and clients are under the impression that Flash is a magic program that could cut animation costs because… it’s Flash!  And they’ll mistakenly think 11th hour corrections and poor designs or staging are just a push of a button to fix because it’s on a computer!

The key to animation and cartooning can be summed up in this simple drawing.  You get this, you’re a professional.
Preston Blair Staging
Preston Blair Staging 2 Cartooning is not about how well you draw, it’s about how well you think.  Staging is about composing your idea in a clear easy to read manner.  All communication, especially humor, requires clarity.  No matter how brilliant your idea, if it is not clear, no one will “get” the joke.  So if there’s a magic word, it’s not flash, but staging.  With good staging, people will laugh or cry or what ever you’ve intended them to do.  For me, I’m in the cartoons-are-silly-and-funny camp, so I focus on that emotion.

If it’s not yelling “Flash!” in a meeting, people use the term “limited animation” as if just saying this saves budgets.  You have to know what limited animation is and faithfully practice it to reap its benefits.  Limited animation is planned animation.  it’s like “Name that Tune” but where you tell the story with fewest pictures possible.  If it’s done well, nobody knows your cheating.  If it’s done poorly, especially to the animator or cartoonist, it’ll stand out as a mistake.  What is animated must be staged in a way to save the cartoonist or animator’s time animating it.  This keeps costs down.

Staying on budget in a cartoon production requires planning.  Plan your story.  Plan your staging.  Plan your designs.  Each subsequent step of this process builds on the previous step, little by little improving the staging and design.  If an idea does not improve the staging or design from it’s previous step, it should be discarded.  This is where creative and executive heads clash!

If you’ve never trained in art, you will not understand staging and design.  Sometimes an executive’s idea does not build on the previous step, rather complicate design and staging, which complicates the idea, which drives artists to go back clarify the idea again, which causes the budget to go up.  Then artist’s complain on their blogs quietly.  Or artist’s will reprimand the executives directly, coming across as insubordinate farts trying to squash the ideas of the guys actually paying for it!

Following structure can hopefully allow both groups to meet in the middle and make something that breaks creative ground without breaking the bank.

(Note, I may preach a good game, but I find I can’t always follow it.  My biggest animation problems stemmed from not planning the staging thoroughly and having to go back to re-do what I rushed over.  Or I’m forced to labor over a simple sequence that could have been animated more efficiently with alternate staging or adding a couple of cuts to jump around action.  So I’m writing this process for my own benefit as well.  Perhaps if I write it out, I’ll actually follow it!)

The 8 Step Animation Process.
(Using Post-Its, Sharpies, Flash 8 or 9, Quick Time Pro or After Effects 7 and Pro Tools.)

Animation Production Pyramid

The pyramid shows the work flow going from bottom to top.  Why upside down and a pyramid?  The further you go in production, the less room you have to move.  The harder it is to turn back and make corrections.  Generally, the animatic is the point of no return.  From the animatic onward, a production is a matter of “connecting the dots”.

On the right side of the pyramid are the creatives, consisting of the director, assistant director and crew.  On the left side are the executives, consisting of the producers and 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.  (For more information on the importance of the balance of power and what a producer is suppose to do anyway, read this.)

Step 1.  Script:
Some cartoonists feel that a cartoon being a visual medium needs to be “scripted” visually by drawing storyboards first.  The history of storyboards for animation was for building a dialog-less story, which was mostly a series of related gags as seen in the early days of animation.  For example, say a Mickey visits the “farm”.  Cartoonists would dream up a dozen farm related gags.  Characters didn’t talk, so writing descriptions of his actions seemed silly.  By drawing a story board on removable “post-its” tacked on a wall, like a kind of editable comic strip, 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” takes 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 a good looking picture even though it hinders the story.

Writing for animation is different than writing in general.  Care must be given not to write scenes too complex for your budget.  The script can use devices or cheats like “telling” rather than “doing”.  Actions could happen off camera, letting the sound track do the work rather than the drawings.  Sometimes you can set up action through dialog, then just jump to the end result.  Say a character shows up in the usual location wearing swim shorts, zinc oxide on the nose and holding water skis.  He’ll tell the cast he plans on going water skiing later.  He leaves, then we dissolve to the same location some time later.  A cast member says, “Hey, I wonder how Larry’s water skiing went?”  Then enters Larry in a body cast, ready to tell us what happened.

One of my favorite shows, “Seinfeld” presents another great 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.  In a flash back, George walks into the ocean.  We never see the whale or his wrestling with it.  Rather, the story is told to us.  This type of writing saves budget costs.  (I can’t imagine how much a prop whale would cost!)

These cheats are the practice of real-life sitcoms and stage plays.  It was even the practice of Shakespeare’s Global theater, where actors even described their surroundings, saving money and time building a set that could have showed it.

These cheats could also be used similarly for animation.  Now don’t get too carried away with telling over showing.  If you do, why bother making a cartoon anyway?  These are just examples to help reduce work where and when you need to.  You want to draw what would be fun to draw and leave the boring stuff for the cheats.  I hate to spend time with eye blinks when I could be drawing good banana peel slippage!

I use small post-its when scripting a story.  I write story events and plot points separately on post-its, sometimes drawing images on them.  Then I spread it on a bed or wall and could easily re-organize or swap out pieces to better assemble the story.  Once the idea is laid out, a script is written in a more formal and final form and the post-its are discarded.

Family Pants stories are kind of a long version of a panel cartoon.  Panel cartoons are the basics of humor; set up and punch line.  The set up leads the viewer in one direction while the punch line does the opposite.  The punch line is a surprise or twist that creates a jolt of humor, chuckle or laugh.  So think of it as turning right, turning right, turning right, BAM, turn left!  Sometimes the viewer can see that left turn coming.  But anticipation of the surprise can be a good thing, causing the viewer to smile just before you get there.  It’s a delicate balance though, as you don’t want them guessing the punch line too soon.  Thus the old adage, humor involves timing.

To stretch an idea into a cartoon longer than a sentence, you expand on the formula.  I first think up a punch line or ending gag where Frank is in a ridiculous situation, then I figure out the set up or how he got there.  Hopefully the journey is a fun ride for the viewer.

Some prefer immature gross out humor and others more sophisticated socially embarrassing humor.  Whether it’s Jack Tripper getting himself in a ridiculous situation of having 2 dates the same evening, while accidentally handcuffed to Chrissy, or Lucy Ricardo wearing a long putty nose as a disguise and setting fire to it or Ben Stiller getting his penis caught in his zipper, whatever your preference or target audience, humor comes to imagination and timing.

Step 2. Thumbnails / Shot Storyboard:
Next an artist creates small rough drawings, illustrating the story and building off the well planned story.  These thumbnails serve as production preparation.  Unlike live action film making, animation is pre-edited.  So these small thumbnails are to edit the story’s scenes before any animation is actually drawn.  They are drawn quickly and roughly focusing on basic staging not detail.  Lots of guys call these kind of thumbnails, “shot storyboards”.

The goal here is to think of economy and to optimize work, building off the script’s well planned and efficient story telling.  Imagine getting the script, “Fred gets a bowling ball from the closet.”  A directors can kill a budget with a simple action like this.  They’d show Fred opening a closet toward us, stepping out of the way to reveal 1,000 gags in the closet; a pterodactyl umbrella and such, then grab the bowling ball on the top shelf causing every one of the 1,000 items tumbling out toward us, in perspective, and finally having the bowling ball hit Fred in the head.  A simple act, that might be funny, but has nothing to do with the story other than getting the ball.

Hanna and Barbara would have simplified this to; Fred walking left, asking Wilma, “Where’s my bowling ball?”  Cut to Wilma sitting in chair, we only see her neck up, “In the closet Fred.”  We hear a door opening off camera.  Cut to Fred’s butt sticking out from behind a closet door with some rummaging sounds.  “I can’t find it!  There’s too much stuff in here!”  Cut back to Wilma, “Try the top shelf dear… Fred look out!”  A crash off screen, the camera shakes and Wilma’s eyes close.  Cut back to a pile of stuff in front of a damaged closet door.  Fred’s head pops up from the wreckage, “Wilma, one of these days, you have got to clean out this closet!”  Then the bowling ball rolls off the top shelf onto his head with a “klunk!”

Plan how the characters need to stand to carry out their function.  Perhaps a different angle could better clarify what they’re doing or perhaps you and cut around the action simplifying animation.  Remember you’re building off the economic planning of the script, but in this stage, art trumps the script.  So if dialog or scene details need to change slightly to better clarify an idea, do so.

I use standard square post-its again and cut the lower third off it to create 3X5 dimensions. I could use that lower space to write a note if need be.  Again, post-its allow for tacking the drawings to a wall or laying them on a bed for an easy overall view.  I could re-arrange shots, add shots and remove shots easily.  This helps editing and development of the cartoon.  I prefer drawing with a black Sharpie marker.  This way, I can’t get caught up in details because the marker point is too thick to noodle detail.  I also can’t get caught up in erasing and laboring over a drawing since Sharpie ink is as permanent as Stonehenge.  By keeping it down and dirty, I can’t get attached to my drawings, and could make objective decisions on timing and staging.

Finally, when the artist has something the director likes, each square is numbered chronologically in pencil, just in case you need to change the number.  The script is updated with any minor dialog or scene detail corrections.  The post-its are stuck to the right side margin of the script, so you can read along following the drawings.  And just in case you drop the whole thing down the stairs, the number is also written on script under post it to re-assemble it while cursing the staircase.

Step 3a. Dialog:
Simultaneously with design production, voice talent is recorded by a sound engineer using a standard sound editing program like Pro Tools.  Actors are directed by the director and follow the script and thumbnails.  Final takes are immediately selected and numbered numerically, 0001.aif, 0002.aif etc., in chronological order.  Overlapping dialog tracks, say of two guys talking at the same time, are numbered 0003a.aif and 0003b.aif so they line up by placing them flush on top of each other in a time line.  The sound engineer keeps hi res copies at 44.1kHz stereo or better, while lo res copies at 22.05kHz mono are sent for the Flash files.  The lo quality sound keeps the flash file size down and is less likely to crash while being worked on.

In the old days, the sound engineer’s assistant would “track read” the dialog tracks, determining the length of the track and mapping it out phonetically.  The assistant director would translate those numbers onto an X-sheet for the animators to follow for lip syncing and animation.  But with Flash, you can import the sound and instantly see it’s length graphically in the time line.  Animators can scrub over the sound to hear it phonetically to animate to.  So thanks to Flash, we can skip track reading!

With big budgets, sound engineers have their own foley artists, guys who custom make sound effects to the animation.  With smaller budgets, sound engineers pull ready made sound effects off CDs.  The problem with this is that not all the “blams” and “zips” match the action the animators created.  This leaves long hours “frankenstein-ing” sound together to match the action.  It rarely works the way you want it to.  And if you’re a really small studio, perhaps a one man band, you’d rather spend time animating than fussing over editing a sound effect.

I’ve found you don’t need sound f/x for everything.  Sometimes quiet is nice.  I remember off hand in 101 Dalmatians dogs running and jumping about without a single thump on the floor or jingling of dog tags.  Fewer sounds obviously makes sound production easier.

Also, I’ve found it easier to do a little post-production during pre-production by putting together the sound effects during this stage.  Perhaps a character is to jump in a speed boat and zoom off.  Simple enough for post production, but try hard as you can, there just wasn’t a good speed boat f/x on your sound effect CDs.  Now what?  The animation is already done, you’d hate to re-do that.  So you’re stuck pitch shifting a lawn mower sound to get it right.  But it never sounds right.

You do, however, find a good squeaky door knob sound and a good “ker-plunk” water splash.  If you put those together you get a funny row boat sound.  If you knew this before design and animation, you would have changed “speed boat” to “row boat” in the script, changed that little rough thumbnail in your shot board, that you’re not married to since you drew it roughly and quickly, then tell your designers to design accordingly.

So to catch possible post production problems like this, you’ll need to work in a more linear fashion, possibly telling the designers to hold off a day or two to make sure the sound f/x will fit the story accordingly.  Smaller productions usually work more linear anyway, so this is not much of a stretch and bigger productions usually have the budget to afford foley artists in the first place for custom speed boat sounds.  The lesson here is to know your budget before choosing to have your designers jump ahead or wait until the sound engineers play their sound libraries for you.

If you are a really small production, without a sound studio, you can record dialog using a microphone and portable recording device.  I use this mic and a mini disc recorder.  I’ve also used a regular old camcorder to record audio.  (I pull the video into iMovie, ditch the video and keep the audio.)

But you could use other solutions, like an USB microphone to record high quality sounds directly into your computer.  You could get a portable device which records directly to a hard drive for easy file transfer to your computer.  And for iPod nut jobs, there’s an attachment for the iPod that allows you to record directly onto it.  Whatever your means, I’d recommend  something portable enough to record high quality dialog and in the field sound effects, like at your uncle’s yachting club for that speed boat sound.

If you record dialog, I’ve found the two best places are in your car and or bedroom.  The car is quiet and muffled.  It gives a good bass tone.  Although it’s too cramped for me as I need to stand to belt out Frank’s lines.  The bedroom room with bed, pillows and rugs are good to muffle sounds.  Plus there’s plenty of room to jump around.  I’ve preferred the tin sound and slight echo of a real room to the deep bass of a sound booth like car interior.  It sounds louder due to a more “treble” feeling.  But that’s just me.  Find what’s right for you.

Step 3b. Design:
Simultaneously with dialog recording, illustrators and cartoonists design characters and props working off the script and thumbnails.  Even for shows with an established design, new characters or scenes 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 budget.  They build off the previous efficiency of the thumbnail and script stages.

Watch some Underdog cartoons or their rival Rocky and Bullwinkle cartoons and you’ll see simple in-betweens from pose to pose.  The characters are great looking, yet so simple and easy to draw.  Again, there’s a balance.  You don’t want an easy to produce cartoon that looks like it was drawn by someone’s foot.

I’ve started Family Pants with a thick black outline, ala the Flintstones, but the more flash animators I meet have no experience with pen and ink.  Lacking that hand touch, they have a hard time drawing a controlled thick and thin quickly.  Usually they would labor over a line, using vector strokes and Bezier pen tools to adjust the line rather than drawing it outright.  This is slower than molasses in winter.

So I’ve slowly adjusted Family Pants to be “sans-lines”.  I rough action out in one layer, then set that layer to “outline” mode and lock it.  Then I make another layer under it and “paint” in blocks of color of the characters, referencing the outlined image above.  Black line is added on top of the block of color to further define the image.  Then I delete the above layer.  This process lumps  cleaned up and finished colored animation into one step.  Flash’s brush tool is a little “crunchy” which fortunately plays into this design.  A fine welcome to the havoc it wreaked replicating the Flintstone line before.

I prefer backgrounds and layout to be simple and almost vaudevillian to clarify the jokes.  Detail may look great in an art gallery, but not in joke telling.  For example, take a gander at this great art, so beautiful it could hang in a museum, but too complex for simple gag.  Simpler design saves production time as well as communicates easily.

I also prefer to do all the special effects via Flash, using imagination to create an effect, rather than special effects software.  So my explosions look drawn, rather than real.  It keeps my budget low as well as my process simpler.

Designers design exactly what you need if working off thumbnails.  If for example, there was a one-shot coffee barrister 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 saves time.  Likewise, there’s no reason to design aspects of the coffee house, say what the storage room looks like, if that part is never actually seen in the final cartoon.  The resulting designs could be used in the style guide bible but also directly as completed art in the production.

Also, the designed characters work within the narrative.  You won’t end up with a great design of a character that can’t do what the script requires him to do.  Sounds silly, but imagine a great looking approved style guide of a character with short legs.  Problems arise when the script says, “Harry Hamster crosses his legs in contempt.”  Countless notes come flooding down from producers, “I can’t really tell Harry is crossing his legs.  It’s too small.”  Now what?

The thumbnail storyboards help in breaking up and distribution of the work.  Take all the thumbnail post-its and look for the scenes with the same background.  Those are grouped together in a pile to be drawn in a single flash file named by it’s background description; ie “CoffeeShop.fla”.

In this file, flash’s “scene” feature separates the actual scenes of the cartoon on that particular background.  Using the same flash best utilizes flash’s symbol library.  If you make one change to the coffee shop, every scene with that coffee shop is automatically updated.  You won’t have to keep track of copying and pasting change across several files.  Everything stays consistent.

Each scene within that background flash file is named “000_”, where “000″ is the number of the scene.  Flash appends the name of the flash file to the name of the scene when the scene is exported separately under test scene.  So scene “018_” in flash file “coffee_shop.fla” becomes “018_coffee_shop.swf”.  The description in the name allows you to locate the flash file this SWF came from and most importantly, the number in the name allows all the scenes to fall in chronological order when placed into a folder together.

The character art is designed in a separate Flash file and named accordingly, scenes and numbers are not necessary.

If need be, flash files could be broken into separate flash files.  This would keep the file size down and allow for artists to work simultaneously.  But you have to be cautious.  What’s changed or updated in one needs to happen in the other.  To do so, you could open both libraries, compare each element and copy and paste art from one symbol in one library to the other.  You also have to double check that the update is the same size and location within the symbol of the original.  Other wise everything will be new art, but out of whack on the stage.

This may sound complicated, but to make the next steps fall into place and build off each other, this stuff needs to be organized correctly.

Step 4.  Storyboard:
The storyboard artist tells the story visually, following the rough thumbnails.  He solidifies the characters actions, gestures and staging, still building off the previous stages of script, thumbnails and now design.

Traditionally the storyboards would be redrawn larger and in greater detail by the layout artist.  The layout artist would refine the storyboard art and add tracing paper overlays indicating camera movements and character key positions, showing where they start and end for that scene.  The layout serves as a “blueprint” for the animators, background artists and camera men to follow.  Strict attention is 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.  Either way, work is work.  If a storyboard artist zips through a board, extra time would be needed for layout.  If the storyboard artist is given the time there’s no need for layout.  A 10 hour job will take 10 hours to complete no matter how you look at it.

In this production model the storyboard artist is the layout artist.  He is also a digital storyboard artist working directly on the computer.  Since the designs followed the rough thumbnails, some backgrounds, props and characters may already be finished.  The storyboard artist need only to re-size and position them within their scenes double checking the scene naming convention so upon export, they all fall into chronological order.  Some elements will need to be corrected or drawn from scratch, namely the character art, but every little bit the storyboard artist could avoid doing, saves time.

Some 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?  They argue storyboards come first.  This production model follows both.  Rough thumbnails set up the shot and angles, assisting the designers in what to design.  In turn their designs assist the storyboard artist in what to draw.

I don’t like showing anybody the storyboard.  Strangely, I’ve found no one knows how to read a storyboard!  It’s not like reading a comic strip, which many compare a storyboard to.  Storyboards are indications of something else entirely, an animated cartoon not a comic strip.  A gag or idea that works well in a comic strip may not work in a cartoon and visa-versa.  To properly read a storyboard, you need to visualize a finished animated cartoon in your head and from that imagined thing, make decisions.  Lot’s of producers ask for great comic strip corrections, never actually thinking ahead of how the “comic strip” will really be played.  Plus some people read to slow or too fast so the timing in their heads are off.  If I should “present” the storyboard to them, reading it at the pace it is meant to be, sometimes they’ll look at panel three instead of panel one, messing up the timing again as they’ll see the gag before they should have.  And forget showing them x sheets, dope sheets or slugs to understand the timing!  NOBODY on that side of the pyramid understands those.  (More on x sheet and slugs later.)

I prefer to have producers or clients wait to see the animatic.  It best shows the timing of the cartoon the way it was meant to be.  Remember humor is about timing.  Making unnecessary corrections because the guy reading the storyboard is “off” will only add to the budget.

But sometimes the client and producer insist on having a storyboard anyway.  If so, you can take all the exported SWFs of each scene and import them in chronological order into a digital storyboard template.  I made this one. (If you’d like the FLA file to customize for your production, let me know.)

It’s designed to be shown online and only lets you see one panel at a time, guiding viewers correctly through the story and it’s timing.  Through action script it automatically numbers the panels, so if you edit the panel order in the flash time line, you don’t have to renumber them by hand.

If you need a printed copy, open the SWF in a web browser and print each page as you would print anything else you find online.  It seems like a waste of paper to have one panel per page, but having 3 panels per page, you literally need to hire a full timer to cut, paste, tape, xerox panels here and there to scrap book a board together.  With one panel per page, rearranging, editing, and adding frames is much faster and provide winter heating fuel with old storyboards.

Even so, the grunt work to print boards and make copies still adds to production time.  Unfortunately the extra work doesn’t guarantee catching mistakes.  While I’d prefer to have clients and producers to wait to see the animatic, each budget and client is different.  As long as the extra money for the extra time and death of more trees is justified, then so be it.

Step 5.  Slug board/ X-Sheets / Dope Sheets / Digital Timing:
In the old days, the assistant director would add the track reads from the sound engineer (the phonetic mapping and length of each dialog track) to the x-sheet.  He’d then add the timing of actions in between and around each dialog quip.  The end result is one long x-sheet. (Think of it as a paper time line.)  Every animator follows it.  Even the camera man follows it when filming the animator’s work.

Other times, a guy called a slugger would transcribe the same information, dialog track lengths, timing information and even camera moves on the printed storyboard. It’s a little sloppier since you don’t have a beautiful grid to work in.  But slugging is faster than x-sheeting and you don’t have to pay this guy assistant director wages!  A dirty trick, but it does cut budget costs.

For this production model, the lo res dialog tracks are imported into the storyboard flash files.  The assembly is easy since each track was numbered chronologically.  Overlapping dialog is stacked in the flash time line using the numbering, 0003a and 0003b.  You can hear one track or both by turning on that layer’s “eyeball”.  Lo res sound files keeps the flash file size down, so as not to crash often.

Then a slugger or timer adds space or key frames between and around the dialog tracks.  It’s identical to slugging or x-sheeting, only this is digital.  Notes may be added using flash’s frame commenting.  Hand drawn arrows or even hand notes could be added on separate layers just as a slugger would add to a storyboard.

Note that playing real time in flash is not entirely accurate.  In other words, hitting return and letting flash play for 1 second is a little slower than an actual second.  So sluggers and timers will still need a stop watch and an understanding of real animation timing to get the job done right.  This job is not to be underestimated.

Also note that flash’s graphic rendering of sound is slightly inaccurate.  I’ve had a work around but any version of flash above version 5, won’t play nice with this solution.  The good news is that small short scenes distort a short amount.  It could even be unnoticeable.  But if you have a long scene with no cut or scene change, the discrepancy would be very noticeable.

This could really reek havoc with animated music videos or sound driven animations.  Say you pull Led Zeppelin’s “Over the Hills and Far Away” from your CD collection into a flash time line at a low resolution to keep your flash file low in size.  You animate to it, perfectly in sync, and export your video.  You put the original higher resolution audio to the video… and everything is out of sync!  Double check the animation in flash and it’s perfectly in sync!  What the…?!

With Pro Tools you can do a little nip / tuck on the audio to line it up again.  In some cases altering the audio is acceptable.  But in this case, the audio is locked.  So instead you do a little nip / tuck to the video in After Effects or Final Cut Pro.  Either way, this becomes post production work, common to larger budgeted productions.

If you have a very small production, working without After Effects, Final Cut Pro, Pro Tools, foley department or sound studio, you can pull the dialog, home foley’d sound effects or sound effects from CDs into free sound programs like Audacity.  There you do a little mixing, clipping, adding effects or editing a couple of sounds together to get that special “slip and fall down a staircase”.  The final mix and edit happens in flash’s time line.

Mixing sound in flash can be brutal.  Good sounds need to be a 44.1kHz stereo which make your flash files huge and cumbersome.  (I’d opt for 44.1kHz mono.  If it’s good enough for “Born to Run” and every Bugs Bunny cartoon ever made, it’s good enough for me.)  You can adjust the volume of the sounds in Flash to get your final mix.  It’s not the professional way, but sure as hell beats buying $1000 programs to fix flash’s boo boos.

Step 6.  Animatic / 1st Render with Post Production:
Most clients request an animatic to keep tabs on the production.  Traditionally, animatics were filmed copies of the storyboards with limited sound edited in, possibly using stand ins for the actor’s dialog recordings.  This gave the director a glimpse of what the finished cartoon would look like before it’s actually done.  As the name implies, the animatic is like automatic animation.  It’s also called a lieca reel, because it’s like-a-reel.  (I’m not sure of why it’s spelled that way of if in fact that’s the actual explanation to where the name came from.)  Like a cook tasting the batter before the cake is baked, if you don’t know what your looking for, you’re just being unhygienic.  (I’ve heard clients and producers comment upon seeing the animatic, “Yes, but is the final cartoon going to be in black and white?”)

What you’re looking for is an evaluation on where the art is heading and the sense of timing.  While some clients cannot see the finished cartoon through the roughs, the animatic is more clear than scripts, storyboards, x-sheets or slugs.  Its the closest thing to a cartoon than the cartoon itself.  If you have an up hill battle with a particular client, the animatic is the best bet to get your idea across before hitting the point of no return in production.  (More on that later.)

Making the animatic, a compositor exports SWF scenes from the flash files.  (You’ve done this before if you made a printed or digital storyboard.)  All the SWFs fall in chronological order when placed in a folder.  Then a compositor converts the SWFs to quick times.  The sound will be lost, but that’s okay since you’ll need the sound engineers to fix the syncing problem in post production anyway. (Remember, flash is inaccurate with sound. Plus the dialog tracks in the flash files were lo res.  You’d want the better quality dialog tracks the sound engineers kept anyway.)

You may be asking, why not export quick times from flash directly?  Essential to this organizational system is exporting each scene separately.  When you export quick times from flash, it links all the scenes together.  So you’d need to edit the quick times apart afterward.  Plus SWFs are small exports.  A team of animators could email me their SWFs at the end of the day for review.  Quick time or PNG sequence exports would be cumbersome in file size.  And most important of all, exported quick times from flash are actually “recorded” SWFs playing in real time.  So if your computer isn’t fast enough or if you have lots of art, your SWF will play choppy in real time and thus so will your recorded quick time.

Rendering flash SWFs into quick times can be done several ways, each with their own pros and cons.

1) The compositor can use After Effects 7, which could import scene SWFs and render each frame as a quick time.  But this version of After Effects requires the latest Intel macs and operating software.  This is your best bet although I don’t have this software or equipment.  Perhaps this is why Adobe never fixed flash’s time line and export errors, hoping to sell more copies of After Effects?

2) The compositor can import scene SWFs into a Flash time line and export out a PNG sequence, assemble the PNGs into a quick time using Quick Time Pro.  Then assemble all the quick times into one final quick time also using Quick Time Pro.  This is a slow, round-a-bout process, but allows artists to send small SWFs instead of other large exports and saves money on purchasing After Effects.

3) The compositor can import the scene SWFs into a Flash 8 time line and export a quick time directly.  Flash 8 conveniently exports regular quick times, not recorded SWFs.  Then assemble the quick times into one final quick time using Quick Time Pro.  You’ll need the older flash 8 copy and QT Pro.  This is the work around I prefer.

4) (Now this one is a theory, but still exciting enough to mention.) The compositor can import scene SWFs into a Director made application, which renders quick times directly.  Director has always been able to render quick times from SWFs and if the right programmer came along, I believe he could make an application which does so.  (I know one such programmer and am prodding him to do so.)

Which ever process you choose, the compositor hands the final quick time to the sound engineers who’ll pull it into Pro Tools, and using their hi res copies of the dialog, adjust the audio here and there to keep it in sync and high quality.

Smaller productions without post production will have hi res dialog audio in the flash time line and mixed there.  Video must be exported directly from flash with that audio.  This means you must have the original flash files to export video with sound and you won’t have the conveniences of smaller SWF files.  You’ll need a fast computer to render the SWFs well or use an older copy of Flash 8.  Since exporting video from flash lumps all the scenes together, you’ll have to edit those quick times into proper sequence using Quick Time Pro or other video editing software.

When all is exported and edited together, you’ll have an animatic!

Generally, the animatic is the point of no return.  It is the boundary between pre-production and production.  After it’s completion, finishing production is a matter of connecting the dots.  Corrections at this point involve going through steps 1 through 6.  Script changes, design changes and timing changes after the animatic raise the budget.  Which is why I prefer showing script, design and animatic but skipping the story boards.  Story boards and even dialog out of context may give wrong impressions which could create unnecessary corrections.

It is difficult but so important that the client or producers make final decisions, or as close to final now, at this point, to keep the budget under control.

Step 7a.  Animation
Step 7b.  BGs
All that work, cheating tricks and razor accurate decision making and acute organization leads to this moment; animation!  Ironically, from a production point of view, animation is the easiest step in an animated cartoon, provided each step built on top of the previous step, further refining the clarity of staging and design.

The animatic flash files are updated with final back ground art and rough animation of the characters, following the timing instructions in the time line.  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 by making some small thumbnails of key poses on a notebook, then draw straight ahead in flash, aiming to hit those marks.  If it works, you’ll finish the art later.

Lots of flash animation is basically a puppet character who “pops” to each key pose.  Animators boil down in-betweens to three poses; anticipation, overshoot and settle.  You can create these three poses by manipulating pieces of the character like a puppet; anticipation is a manipulated key pose 1, over shoot and settle are slightly manipulated key pose 2.  For extra slickness, you have flash “tween” from key pose 1, to the anticipation pose and from overshoot, to settle, to key pose 2.  Within each puppet body part there are several alternate parts; a hand symbol would have 10 frames of different hand positions.  That way the animator could “dial up” a different hand that better suits the key pose.  All of this lets the animator get his work done without drawing a whole lot.

Why would you want your animators to draw less?  To save money, time and to create consistency in production.  Regarding consistency, you could have a guy who draws Fred Flintstone-like sitting next to a guy who draws Manga-like sitting next to a girl who draws Marvel Comics-llke, all working in perfect harmony without any ramp up time, retraining them to draw alike.  Producers could hire who they want, rather than who they need.  (Terrible I know, but hey, that’s business.)

Furthermore, once your designers design the puppet or 2-D rigged characters, a production could lay off most of the designers, since episodic cartoons are 90% reused.  I imagine most 3-D animations offer similar advantages of reuse and consistency while keeping a “tweened” frame by frame slick look to please the eyeballs looking at this stuff.

While rigged 2-D puppets can save time, they also can be limiting.


This image is not a flash 2-D cartoon, but Hanna and Barbara limited animation principles are what 2-D puppet ideas are based on; breaking characters into pieces to reduce what is actually re-drawn.  I remember looking at this drawing of Fred golfing thinking how awkward his pose was.  It looks like the how NOT to draw a character in the Preston Blair animation book.


I’m imagining this artist tried so hard to reuse body parts, head and torso, so as to only draw the limbs to save time, that he forgot to make a good drawing.  Whether or not that was the artist’s true thoughts, I think this image best illustrates the point; reuse can sometimes hinder your production.  Many times I find myself trying desperately to reuse a character puppet that I waste more time fudging the thing into an awkward pose.  If I simply drew the thing from scratch, I’d be done with it already.  Such is the curse of Flash 2-D animation.

I try to draw for the action parts and cheat for the dialog or non-action parts, a combination of drawn artwork and puppet-ed symbols.  You can draw key pose 1 and key pose 2, then tween with one drawn in-between or a drawn blur frame.  Watch some Looney Tune cartoons, you’ll see quick broad actions with few in-betweens.  It’s almost like watching action in a strobe light.  Because the action is so fast, lots of the in-betweens are blurs or “cheats”.

After final animation, lip syncing is done to the dialog tracks in the time line.  The head symbols have up to 9 frames of phonic lips, still, ah, eh, ee, oh, oo, vah, lah and mah or pah.  Animators “dial up” the appropriate mouth according to the sound in the time line above it.

Step 8. Renders with Post Production:
The scenes of these flash files are exported as separate SWFs and handed back to the compositor who renders a new quick time.  (See step 6 about the various methods of rendering SWFs.)  The large quick times are handed to the sound engineers again to sync up the dialog, add sound f/x and music using an industry standard like Pro Tools.  For smaller productions, quick times are exported with mixed sound directly from flash and edited together as one large quick time.

Each round becomes the next approval stage; 1st render is the animatic, followed by corrections, 2nd render is rough animation, followed by corrections, 3rd render is final animation, followed by final corrections and 4th render is the final final animation to deliver.

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.

“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.

(And my new personal favorite…)

Every time someone wants to leave their mark on a project or every time someone says, “Hey, you know what we should do?”, the budget goes up.  Cartoons cost whatever the executive wants it to cost.  Cartoons may be a team sport, but it’s run like a dictatorship, not democracy.

American Politics and Animation:
Speaking of government, the recent change in American politics, the election of Barack Obama and a shift toward a Democrat majority, will jeopardize the animation industry’s total dependence on outsourcing.  On one hand, if you’re an American animator, this is a good thing as now you’ll be paid and treated fairly without fear of losing your job to cheaper artists in Canada, Korea and India among others.

On the other hand, animation industry executives will be faced with harsh realities.  Money must come from somewhere to pay for American artists.  Animation executive salaries and jobs must be cut.  Executive creative control must be limited, as infinite “tweaks” increases animation budgets extensively.

With the popularity of recent change, I do find it hypocritical, and a bit comical, if animation executives voted for Obama.  Perhaps  they not think this through.  Perhaps it just a ruse that while they wore an Obama pin they secretly voted Republican.  Equally odd are Canadian animation bloggers who wished for Obama’s victory.  Ultimately, Canadian opinion does not determine the American vote, but aren’t billions of dollars worth of American animation production sent north?  Somehow I can’t escape the feeling that lots of people shot themselves in the foot in efforts to go with the popular vote.

The good animation executives, who voluntarily curb their salaries, voluntarily hire American animators exclusively and voluntarily offer little “tweaks” to disturb production, are not affected by either Republican or Democrat policy.  The good animation executive doesn’t need to be changed.  But even the good animation executive relies on outsourcing as a safety net for when the occasional proverbial production poop hits the fan.  They now will be asked to fly without a net, sink or swim with no plan B.

The question is, will the vote for change actually turn bad executives into good executives?  After reading the industry negativity on most animation blogs about executives, I can’t see a highly paid animation executive cutting his salary or laying off his executive comrades in favor of the minion animators beneath him.  So no money gained there for American animators.  I also can’t see an animation executive curbing his mighty ego and placing a cap on his “tweaks”.  No money their either.  So where is the extra money going to come from to pay for American artists?

The Democrat plan is to make playing nice the advantage.  The idea is to make it so difficult for the bad executives, that they are are run out of town by the good executives.  They won’t go quietly, so for the next 4 years, things will be really bad.  Creator’s will get less of the pie for their creations.  Animation productions will become grossly understaffed and American workers must shoulder the extra weight.  In this way, the extra money will come from the workers, who needed help to begin with.  But eventually, this allows the good executives to take the lead while the bad ones turn their interests to live action reality shows abandoning the animation industry altogether.  In the end, government policy forces improvement.

The question is can we survive the change?

The other point of view is not necessarily better, just different.  Republicans opt to let the industry do whatever they feel is necessary to continue business.  And that means outsourcing is not necessarily a bad word.  Animation outsourcing may cut American animation jobs, but the pre production jobs it keeps are well paid and well staffed.  The Republicans want to keep the good jobs here.  And the good executives still have the advantage over the bad ones because better products and services are not always the cheapest ones, but the smartest ones.  This is especially true for entertainment.  In the end, industry works itself out.

The question is can we survive waiting for change?

Ultimately after much friendly and fierce debate with my Republican and Democrat friends and foes, I’ve come to the conclusion that real change comes from within.  Regarding American animation and her industry, that involves a more efficient production methodology.  More precisely, that entails better management from the left side of the pyramid with responsible executive pay and less micromanaging tweaks.  And from the right side of the pyramid, better design with better thought out staging and movement.  If we do that, there’s enough slices of pie to go around immediately, with no wait or government involvement.

I don’t pretend that this animation production process is the greatest.  So if you have other ideas, please send them my way.  Change is, after all, constant.