Classic Computer Magazine Archive ST-Log ISSUE 36 / OCTOBER 1989 / PAGE 20



By now you should be into the first stages of your animation or just about ready to begin in earnest. To help you through the actual animation stage, this time the subject will be specific animation techniques. We'll start off covering a few basics and then go into more advanced topics, such as how to control the viewer's focus.


How you actually go about creating an animation depends on what software you're using and what you are animating. Here are a few software-specific pointers:

CAD-3D: I'm guessing you're using Cyber Control (at this point it's the only really decent way to generate a CAD-3D animation). Write the control script with options to allow you to "Watch" or "Record" the animation and also select whether to do either in wireframe or solid mode. You should also be able to run a solid/shaded test in draft mode, which takes less time than final draft. The first time out you should probably run through the entire animation in wireframe mode. If it looks good, record the wireframe (it is quite possible to create a wireframe animation too big for your ST to reload later, so be careful if it's complex) and then view it with a playback system (like ANIMATE4.PRG or Cyber Paint.) Settle on any changes you feel necessary, make adjustments, then rerun the wireframe test. When all is right, do a test of a few frames in solid mode to see that the lighting and such looks correct. Then you can either generate a solid rough-draft mode animation for a final test or just go for the final-draft animation.


Line of Action: The simplest way to illustrate this is to try to place an object (usually a character) so that the action it is undertaking follows along a single line and its form tends to follow that line.

Cyber Paint: If you're doing anything more complex than using the video-paintbow-type effects provided by the program, such as actually drawing a series of frames, you may want to consider drawing only the moving elements at this point and leaving out the background (if any) because it will be easier to make changes without a background. If you had to move an arm to a different position, you might have to redraw the arm and then wipe out the old arm. If a background was present already, you'd probably have to redraw the part of the background which would show through the "hole" left by the original arm. It's better to animate the moving elements first and then underlay the background picture or animation. This permits easy changing of the background as well. Be careful with the defocus and antialias (Cyber Paint 2.0) effects because they can blur small details out of existence. If you have to animate a starship flying through space, antialias the ship before you add the stars, or you may find that instead of little bright dots, you'll have a galaxy full of little dull gray specks.

Film Director: When creating groups, stages, frames and so forth, rather than creating each from scratch, it's often much faster to copy an existing element and modify it. For instance, you can copy one group of parts that make up a robot and change only those cels that need adjusting.

If you want to get more complex than using the "boxed" action that groups and actors will provide, you can try animating individual collections of patterns one frame at a time. While this takes a lot longer, it allows you complete freedom to improvise and adjust the actions of your on-screen characters and objects.

In Character

I could write several long articles on the subject of character animation, but as this is a limited series, we'll just stick to a few useful basics. If one thing communicates attitude and expression better than almost anything else in a character, it's the eyes. Very small changes in their shape (often determined by the lids) and in the position, size, and color of the iris/pupil can greatly change the apparent feelings a character is experiencing.

A few hints: Try to avoid having the pupils "floating" in the middle of the whites of the eyes (if any), as it makes for a blank and unappealing expression. Such a "dead" look is useful in special circumstances, but is otherwise unattractive and does more harm than good. It's usually much better to keep the pupil toward the edges of the whites, rather than in the center. Use eyelids to heighten expression, and perhaps even eyebrows. Move the pupil in conjunction with these to strengthen an expression.

Furthermore, try to make the character's eyes "contact" what it is looking at. If something floats in front of the character's nose, have his eyes cross as he focuses on it. If the something passes above the character, have its eyes track it as it goes across. It will make the character look more alive than just pointing the pupils in the general direction of the object.

Beyond that comes the subject of characterization through motion, which Chuck Jones describes as nothing more or less than acting through a cartoon character. To quote Jones, "Just like Marlon Brando is Marlon Brando by the way he moves, not by what he looks like, in the same sense Bugs Bunny looks a certain way, but his actions make him what he is... characters have different personalities and different ways of moving. You can exemplify that because you can imitate Bugs Bunny."

In using this technique, you not only work out the actions the characters go through, but also define who and what the character is and determine how he will act in the circumstances in which you have placed him. If he's cocky, the way he carries himself will convey that. If he's insecure, specific postures and movement patterns will make that clear visually, without the need for explanatory dialogue and/or actions.

ABCs—Animation Basics With Computers

We have limited space, so we'll just hit these briefly. Specific examples appear in the accompanying illustrations.

Line of Action: The simplest way to illustrate this is to try to place an object (usually a character) so that the action it is undertaking follows along a single line and its form tends to follow that line.

(Figure 1). This has the benefit of making the thrust of the action easier to follow and clearer for the audience. It is also best to try to silhouette the pose so that the action is clear and out in the open. If you can blacken-in a character so he/she is just a solid outline but you can still tell what's going on, it's probably a good pose.

Anticipation: This means having a small lead-in action or a slight hesitation before a main action so the viewer will be prepared for the larger action and not miss it. The small action draws the viewer's attention to the focus of the scene so that he isn't looking at the wrong thing and misses the main action when it occurs. Such "anticipation" can include actions as diverse as a pitcher winding up before throwing a ball, a car "gathering itself up" prior to racing away, a purse snatcher coyly extending his hand before grabbing his target or a guy curling up into a ball before snapping into a human exclamation mark upon seeing a gorgeous girl.


A lot of would-be animators don't realize that it's not hard to inadvertently draw the viewer's attention away from the real focus of the scene. Having a character dancing through the background would draw the viewer's eye away from the characters in the foreground.

Squash and Stretch: One of the most basic animation principles; it means treating objects as if they were flexible—as if made of putty. They always keep the same volume, but their shape changes depending on the action they are undergoing. This can apply to almost any image, from rubber balls to human beings. Hold one arm straight out to the side of your body, then bend your elbow and bring your hand back over your shoulder. Notice that when your arm is extended it looks thinner, and when flexed the muscles and flesh bunch up. This is a simple example of squash and stretch in the real world. Aside from such flexing within an object, the effects can be played out on entire figures. Generally, the "squash" happens at some point of impact (like a foot pressing on a pedal), and the "stretch" as the object makes a sudden move (like a rocket launching itself into the air).

The ball in Figure 2 demonstrates this, as does the little carbon figure. You can use squash and stretch for many types of actions; it's not limited to bouncing alone. Earlier, in "anticipation," I mentioned a boy curling up into a ball before straightening out into a reaction pose (see "Take" below). His curling up can be considered the squash, and his straightening the stretch.

Oddly enough, adding a little judicious squash and stretch can increase the impact of an action, even on items you would think it would look utterly wrong on. For example, a gun barrel could shorten and fatten slightly as the trigger is pulled, and then narrow and stretch out as the bullet emerges. If you're careful not to go so far that it becomes too obvious, you could even apply it to a giant boulder falling and crashing. If you did it right, the boulder would seem to fall faster and hit harder than if you just drew the rock with a rigid, unchanging shape.

Arcs: Stand up, put your hands at your sides, look straight ahead, then suddenly raise one hand and point at something. Now, analyze the path your hand took going from its resting position to pointing. Was it a straight line? Unless you're a mutant, chances are the path was curved. The fact is, few actions in real life are in straight lines. Usually they curve. A hand going from one position to another won't go in a straight line, it will follow an arc. You should remember this when animating, because while the shortest distance between two points may be a straight line, it looks unnatural and just plain lousy in animation. Sure, such lines are fine for starship flybys or cars zapping down a road, but for arms, legs, cars turning corners and so on, the action generally looks better if you make it follow an arc.

Slow In/Slow Out: This is sometimes also known as "ease-in/ease-out." Once again, bring your arm up and quickly point at something. Do it again, but this time pay attention to how fast your arm is moving at the various points of the action. The slowest movements are at the beginning and end of the action, with the fastest action happening in the middle. Try kicking or turning around. The same occurs. Whenever you make a motion, at first there is some buildup in speed (slow in), and at the end some "coasting" as you apply your body's brakes (slow out). Again, this is something you should apply to your animation. The speeds of various actions are generally not constant. The faster the action, the more severe the slow in/out effect. On an average arm swing, you might have four positions at each end of the movement, and only three poses between them. On a fast action, like a roundhouse punch, there may be a cluster of positions at the beginning and end of the action, with only a single inbetween position. As with everything else, overuse of this technique can be bad, but using it where it seems natural will usually improve your animated action.

The "Take": This is usually used for comic effect. Let's backtrack to our old example of a boy reacting to the sight of a gorgeous girl. The anticipation mentioned earlier prepares the audience for what comes next; and in this example, what comes next is a wild, overblown reaction, also known as a "take." The term isn't as unusual as it might sound. We've all heard of "double takes," right? Anyway, a take is an extreme and exaggerated reaction to something. If a character is startled and her eyes and dentures shoot out of her head (they invariably return to their original positions), that's a take. The aforementioned boy's body stiffening into a human exclamation mark is also a take. It's easy to overdo these, so they should be used sparingly and only where appropriate. As a rule, wild reactions rarely work well with realistic characters.

To make a take funny, the reaction should be unexpected. When an ant turns around and finds an anteater breathing down his neck, the obvious take would be for him to stiffen or have his eyes bug out. A funnier way would be to have him look at the anteater, look at the audience, smile to himself as he jerks a thumb at the anteater as if it were a joke, and then unexpectedly launch into some wild reaction.

Weight and Momentum: This covers a number of things, mostly related to animating objects as if they were real and actually had weight. If you want to do abstract movement, this subject has little bearing. You can animate objects and characters as if they had no real mass and weight, but their movements would not seem real. A little reality can help in animation, though you probably don't want to go to the hyper-realistic extreme that studios like Disney have locked themselves into.

Weight can be indicated with as little effort as having a character squash a little bit as he comes down on each foot when walking or running, or by having a heavy object move like the real thing. If you pushed a metal chest across the floor, the overall speed and pauses in the action would be different than if you pushed an office chair on wheels. The metal chest is much more massive and more difficult to move. Likewise, someone carrying an anvil should walk as if he's supporting a great weight. The anvil is just a drawing, but the way it is moved lends it a sense of weight.

Weight has bearing on momentum. If you animated two cars, one traveling at low speed and the other going fast, with both having to make left turns, the slow-moving car would execute it easily and gracefully. Conversely, the fast-moving car would careen around the turn in an ungainly arc, probably leaning into the turn because it has to overcome its own considerable momentum in order to make the turn. The same can be said of a walking man and a running man. Furthermore, a ball thrown at a relatively low speed will connect with a catcher's glove with little impact, resulting in the gloved hand moving only a small distance. The harder the ball is thrown, the greater its momentum and the greater the impact. In many cases, the on-screen speed of an animated object is insufficient to indicate how fast it is traveling, but the effects of its momentum when it hits something or changes direction communicates this information quite well, in addition to making the animated action look more real.

Momentum and weight also have bearing with some animated objects. For instance, when I have Megabit Mouse turn around slowly, his tail lazily drags behind. If I make him spin suddenly, his tail comes off the ground, whips along behind him and continues moving even after his body has stopped turning. His feet have provided the resistance to overcome his body's momentum, but his dangling tail keeps going until it reaches the limit of its movement and/or its momentum runs out. And when he turns around, he doesn't just "freeze" in that position; his body sways as the last of the turn's momentum is lost, and he shifts as his weight settles.

Keep Your Eye on the Ball

As important as these animation basics are, they won't do you any good if your audience doesn't see them.

A lot of would-be animators don't realize that it's not hard to inadvertently draw the viewer's attention away from the real focus of the scene. Having a character dancing through the background would draw the viewer's eye away from the characters in the foreground.

If you want your audience to watch those foreground characters, you'd better do something about that distracting dancing guy.

It's easy enough to say not to have action that distracts from the focus, but how do you control what the viewer is looking at, particularly in a scene where two or more things may be moving?

To illustrate this problem, let me drag up the storyboards for the Art & Film Director video. In some scenes Megabit Mouse was demonstrating the Art Director user interface. In many cases, he would do something, the on-screen arrow would cause something else to happen, he would react and then the arrow would cause something else to occur. It was necessary to have the viewer watch the arrow, then Megabit, go back to watching the arrow, back to Megabit and so on. The arrow's actions weren't complex as it just moved to a location, and the appropriate box, or whatever, would respond as if the ST mouse had been "clicked." So, if Megabit had just finished looking at something and the arrow was going to click on something else, the problem became one of drawing the viewer's attention away from the interesting-looking mouse to the dull arrow. Now, you might assume that just having the arrow move would be enough. Not so. By the time the viewer noticed the little arrow was moving, it had already done what it was going to do and the viewer would have missed it.

The solution I concocted was simple. Whenever I needed to draw attention to the mouse or the arrow, I would have the appropriate character or object do some little motion before actually getting on with its next task. For example, to draw the viewer's eye to Megabit, I might have him sigh or throw a funny look at the audience before getting on with this next action. The pointer was even easier, as I'd have it execute a little looping action before moving to its next task. Such actions last only a second, but they are enough movement to draw the viewer's attention to the desired object or character before the next action occurs. To help this effect, it's best to have any other moving objects on the screen either stop moving or fall into cycling, repetitive actions that are unlikely to distract the audience. In this way, the viewer should always be looking at the subject you want, not at something else.

To further keep the focus where you want it, you should keep the "path of action" where objects and characters will be moving relatively clear of visual distractions. In a forest scene, a clear path among the bushes will be a better location for moving objects than in front of a clutter of foliage. The same is true of an area more brightly lit than the surrounding scene. In such settings, moving items will be easier to spot; thus it's less likely the viewer will lose them in the clutter. This is particularly useful in complex settings where there are many details.

Oh No, No! Again....

I was hoping to cover these techniques in a single article, but that doesn't look like it's going to happen. We'll finish up these topics next time, when we'll cover special animation effects and visual tricks, including how to minimize strobing and staccato movement effects in your animation and how to make objects look like they're moving fast. We'll also discuss explosions, lightning and other flashy effects.

Maurice Molyneaux is a longtime user of Atari computers, whose particular fields of interest cover writing, graphics and animation. He enjoys good science fiction, loathes rap music and loves watching old Warner Bros, cartoons. Ideally, he would like to pursue a career creating animated films.