Saturday, November 17, 2007

Using Symbols to Clean Up Traditional Animation in Flash

Update: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the final line work for the example bellow so you can see exactly how I used the symbol to draw the heads.




E-mail address you'd like to receive .ZIP file (2.1 meg)




There are no rules for how you animate in Flash. Most people limit their drawings and just move stuff around because it's fast and easy to get something moving. I'm not going to go into this subject further, I've already written about it here.

But you can use Flash to do completely traditional hand drawn animation. My favorite example is Mr. Coo. And if you're too lazy to follow that link, PLEASE at least watch this YouTube Clip.




Okay, on to the tutorial. While you can traditionally animate in Flash, you can also use symbols to make the process of cleaning up your work easier. But first let me make one thing clear, when you're roughing out your animation, DON'T USE SYMBOLS. Your main concern should be movement, so draw rough and loose on the stage. You do need to be thinking about overall proportions (or else clean up will be hell), but not get stuck on small things like the exact placement of the nostrils.

Here's an example of some rough animation I was given to clean up.








This was all just paint on the stage. No Symbols. I don't actually know who animated this, but they did all the hard work for me. The only part that was going to take some time was cleaning up the head. It's rotating a lot, and moving around all over the screen, meaning if I'm cleaning up the head on frame 25, it'd be really hard for me to compare it with the head I've already drawn on frame 21, or frame 5 etc etc.

If only there was some way to keep the head stationary...But wait, there is!

You do your clean up of the head inside a symbol, then out on the stage, you go to the next frame, move the symbol to the new head's position, rotate and scale the symbol so that the axis and size of the old head matches the axis and size of the new head you're about to draw, go inside the symbol, and clean it up that way. Now when you want to check your head proportions and masses, your old head is right there, making it much easier to keep your heads consistent.

Here are a few shots of my clean up frames, with the head symbol selected, so you can see how I moved the symbol around.



And here's a screen grab of me inside the head symbol. As you can see, I also put a quick trace of the 3/4 model head on a guide layer in the symbol, so that I could reference it for proportions as I was drawing my new heads. For those of you who don't know, you can put anything you want on a guide layer because it won't show up once you're outside of the symbol.

Also the drawing is on a few layers, because I animated his whiskers separate from the rest of his head, and for the last few frames there are three layers because I animated his hair separate from the head and whiskers.


So here is what the head symbol looks like all by itself. (I've slowed it down to 15 frames per second so you can actually see the drawings).









Now you'll notice I didn't actually keep the head sizes consistent inside the symbol. I would have liked to, but our clean up technique required a really thin line weight, so massively scaling up and down the head symbol to keep everything the same size would have resulted in inconsistencies in line thicknesses between frames.

And here is the final cleaned up animation. It's not perfect, I had a day to clean this whole thing so I was moving really quickly and made some bad choices in terms of how far the head should rotate in each frame. And the hair is a bit of a mess, I didn't have time to figure out a good flow for it. Also the final linework wasn't actually red, I just made it that way so that it would stand out a bit more from the background, since the line weight is so thin.








And once more: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the final line work so you can see exactly how I used the symbol to draw the heads.




E-mail address you'd like to receive .ZIP file (2.1 meg)




A quick note. I did this clean up for the studio Dancing Diablo, for a Bronx Zoo commercial. My friend Dan Forgione animated most of the spots, and they came out really great. After being animated in Flash, each frame was exported as a PNG and colored in Painter. Reginald Butler was the lead painter and also did an amazing job.

If you want to see some finished shots, Dan put a bunch on his reel here.

And while we're giving credit, they were directed by Dancing Diablo CEO/ Creative Director, Beatriz Helena Ramos, produced by Joellen Marlow, and commissioned by the advertising agency Deutsch, Inc.