Laydo.net Webmaster Blog

[] The art of limited animation!

This tutorial assumes you are already familiar with the flash basics, else use the Flash Help (F1-Using Flash -Getting Started…) and read trough the first few chapters up to Creating Animation. This should put you up to speed.

Introduction:
Limited animation, as opposed to full animation, is characterized by the use of cycles, still images and whatever it takes to necessitate as few drawings as possible. This type of animation pretty much saw the light of day with the UPA studio in the 50�s, then of course got it�s glory days with Hanna-Barbara and such cartoons as Scooby Doo, the Flintstones and so forth…

Flash as you might expect, with it�s Symbols, tweening features, and the need to reduce file size for the web, is perfect for limited animation. But since limited animation doesn�t have to mean inferior cartoons, well you better get to work!

Character design:
Now for the little Flashdevil Rescue cartoon we�ve go here, the first thing I did was come up with a design. I wanted to use the flashdevils.com mascot as the main character but revamped to be as simple and practical as possible while retaining the essence of the original (meaning cool and friendly with a pointy tail).

So what I did at this stage is grab a pencil, take an hour to draw as many webdevils as possible. Progressing and regressing as I went along until I reach my final design… The thing to keep in mind when designing a character for limited animation is that he�s gotta be as simple as possible (proportions should be easy to reproduce and body parts should be constructed so that pivot points fit nicely into each others therefore won�t have to be redrawn all the time - hide the neck for example). Be careful �cos simple characters can easily be boring. Make sure he�s got a �little something� special, use thick�n thin (thick lines vs. thin lines that is), be stylish…

Here is some of the process.

This is the occasion to try ANYTHING! Then I actually took the final design, imported the image in Flash, improved upon it, and did a comprehensive model-sheet of the character (face and profile). This may come in handy later on… Also, I printed a copy to bring along to the drawing board or fix beside my computer screen.

Face and profile.

Or rather profile and face! Anyway tine thickness is for reference only and will vary depending on what type of shot each scene is in (long shot, close up, and so forth…).

Planing:
At this stage if you still haven�t got a story it�s time you start thinking about it. You�ll need it if you intent to carry on any further! How you do that is entirely up to you as far as I�m concerned. The next step is to storyboard your idea. Again, there are many ways to do that. Some work exclusively on the computer…I don�t. Some animation may only require a few loose sketches on a piece of napkin while others will require solid drawings detailing every step of the action and retaining a good sense of proportions. In some cases I scan my storyboard and import every drawing on a guide layer for reference. I didn�t need to be so methodic here.

Some of my storyboard.

Also before diving head down into Flash MX drawing everything, think. Think about what will move and what will not. Think about what shall be on what layer and what shall be a symbol. Think about symbols within symbols within symbols… You don�t have to write it down but make sure you know where you�re going. A scene can get complicated enough with proper planing, it should never be attempted without it!

Animation Part1:
When you start a new document the first thing to do is to set your movie properties so that they make sense. I like to use a 4 x 3 aspect ration witch is what peoples are use to because it�s how televisions are. This is what�s best if you want to output your animation to video. Of course wide screen animation can be very cool to, and I�ve never seen a cartoon that was higher than large but I guess it�s a concept… Then why not set the background color so that the sky is already gonna be there? Finally 12 fps is clearly the most common frame rate in Flash animation since most cartoons made for television are animated with 12 drawings per second to and it�s the most convenient. You may try using a lower frame rate if you�re so concerned about file size but at some point it isn�t animation anymore when it gets so chunky…

Set your movie properties.

Then I started the first scene by simply sketching out very roughly with the wacom everything that appears on the screen when the animation starts. I like to use a funny color such as pink (or any color I have no intention of really including in the final movie) for this step so that later on I can easily tell apart what�s my rough and what�s my clean. Now I change the layer into a Sketch Layer so it won�t appear when I publish to SWF. And start building up everything on separate layers. Now that Flash MX lets you add Layer Folders you can really let yourself loose and work with lots of them (layers) while keeping your Timeline comprehensive.

Now comes the time to really start thinking about the concept of nested symbols that I hinted before. Symbols within symbols within symbols, that is. Simply put, everything that shall move together should be made into a single symbol so that it�ll be easy to move about on the screen without having to worry about several layers matching together. But, for example, if you�ve got a head and want to have the eyes blinking and the mouth talking while everything goes up�n down, you might want to turn those into symbols to. And if you�ve got a blinking eyes cycle, it quite possible that the character might have similar pupil in both eyes… witch you might as well be a single graphic symbol duplicated. You get the picture.

If the body part you�re about to make into a symbol is going to somewhat turn about, make sure the pivot point of your symbol is located over the fix part of the body. For example, the pivot point of an arm should be over the shoulder. Body parts (or other objects for that matter) will be easier to rotate that way without requiring further translation every time.

And for the record, when you�re working on a cartoon, make every symbol a graphic symbol. Movie clip and Buttons are good for interactive websites and games… but not animation. If you forget that, I wish you never have to publish your animation as a Quicktime document, or Avi, or image sequence… you�ll wish you hadn�t.

Use a sketch layer and onion skin.

You can�t always rely on tweened animation and simple blinking cycles… Sometimes you have to get into �real� frame by frame animation. Such is the case whenever something turns around such as the head for example. This is where animation gets more time consuming. Now in full animation, a head turning around may well require 8-10 drawings including a subtle anticipation followed by acceleration, deceleration and follow trough… but limited animation allows you (even encourages you) to be more direct. 2-3 drawings will get you trough ANY two key positions. All you have to do here is draw the first and last positions of your action. Then add a frame in between. Then draw the basic shape with onion skin enable. Then add the details. If the movement looks rushed, you can add frames either between the 1st and 2nd frame and/or between the 2nd and 3rd one. And it�s not always as easy as it looks!

Don�t forget real life is boring so that means EXAGGERATE! Let your animation breath. Use pauses vs. fast movements. This is what gives life to an animation. Do that and it might just become entertaining!

Animation Part 2:
One of the trickiest thing to do when you get started in animation is the all so useful walk/run cycle. It requires quite a bit of thinking and it can be so very confusing… But once you get it right there is no limit to how far your character can go! And once you�ve mastered the technique it becomes a piece o� cake.

It�s a good idea to first start by sketching the character in a legs wide open position. Left leg first and right leg behind is one of the 4 basic positions that make the basis of a walk cycle. The others are right leg first and left leg behind, right leg at center with left crossing, and left leg at center with right crossing. The number of drawings you add between those keyframes will determine how fast the character moves. For example, a normal running cycle might require about 8 images while a slow walk cycle will have about 20 images. Keep the number of drawing even or else you�ll get a limping character.

Sketch of the first key position.

Then I proceeded to build the character from scratch with different symbols on different layers. I made sure the pivot points were all positioned accordingly. I this stage I realized it would be much easier to have all of the waist-body-and-head as a single group on a single layer, so I made changes accordingly. The next step was to duplicate the exact same drawing on frame 5 and then switch left for right so that it becomes the opposite drawing. Sometimes you can use the same symbol for left and right. Sometimes you can�t (fingers rarely fit).

Symbols and pivot points.

After that came the time to do the two key positions of crossing legs at frame 3 and 8. Normally the character�s head-body-and-waist are higher at those positions in the case of a walk cycle, but a run where the character jumps about is a little different. So I positioned everything a little lower and the body parts where they�ve got to be. I added all the frames inbetween (2-4-6-8) with the help of onion skin. Finally I decided it would look cool with more of a leaping movement so I added two static frames in the air. Also make that a symbol. Oh… and check out the shadow for added effect.

The End:
There is definitely more to limited animation than what I�ve mentioned so far, but it should be enough to get you started.

Best of luck to all of you,
Alx

Preview: