

Unlimited asset

downloads! From $16.50/m 

Advertisement

CODE > ANIMATION

Introduction To Advanced Body Mechanics

by Mathias Johansson 23 Sep 2010
Di culty: Intermediate Length: Long Languages: English

Animation



Learn the principles behind character animation and how to use them for different results.

Preparation

Step 1: Acquire References

Whenever you animate you need a reference. It can be a video, an image, a friend performing in front of you, another animation or quite often it can be a memory of someone moving.
Even if you're not using a reference consciously you are using your past experiences as a reference, you animate what FEELS right.

I recommend using other references than just your memory since our memory is subjective. What you remember is avored by how you perceived the situation. For example two
people attending a lecture with a teacher that has a rather calm and relaxed way of moving his hands while he talks can have immensely different impression of how it was:

Person A: This person doesn't really like the teacher as he gave him an F in the last course. This person think that his body language is very dull and slow.
Person B: This fellow on the other hand has a very keen interest in the subject and has read all the articles the teacher has published and admires him, he will think his body
language is creative and harmonic.

These kids have witnessed the same motions but will remember them in two completely different ways. There are a lot of factors that will affect how you remember things, your mood,
the weather, who you're with, etc, etc.

Another reason for recommending references other than your memory is that you will see things you would never have gured out on your own; small details that give the shot that
little extra that makes it come alive. However, we don't always have time to look at references as we're in a business where short deadlines are common so building a good memory
bank of references is NOT a thing that is bad. Being able to simply feel what is good motion is what makes a person a good animator.

Advertisement

Step 2: Analyze
Once you have acquired some reference material that t your needs it's time to analyze it. For reference material for this tutorial I lmed myself throwing a small stone:

And here are the keyframes I've picked out:

We analyze the references so that we can nd information that will help us make an interesting and eye-pleasing motion, simply copying the keyposes will not be enough (unless you're
going for a rotoscoped look of course).

So what are we looking for? The answer to this is simple: we're looking for anything that will add depth and life to the motion. Some examples of things to look for are:

Blinks
Subtle eye motions
Arcs
Opposing action
 Timing of the motion
Small steps to adjust the center of mass
Which foot is carrying most of the weight

Step 3: Find the Line of Action

The rst thing we will do is to look where our 'line of action' should go. The basic concept of line of action is that by giving your poses an even ow you increase the readability of them,
making them easier for the viewer to look at (more on this later).

So how do you nd the line of action? Well, rst of all we need to understand that all motions are based on arcs. If you extend your arm straight out and wave it around it will make arcs
in the air with your shoulder as the pivot point. Same if you bend your arm, the elbow will become the pivot point. This is true for all our joints. So once we know this we can start
looking for arcs.

This is pretty much the main arc of the throw. There are of course arcs for every single joint but this one is the main action and the one we need for the line of action. Because as we
said, the line of action is there to help the viewer read the image, or in other words, read the action.

Placing the line of action can be tricky, in this case it's rather easy since our action is very straight forward and we have a clear arc, which is not always the case.

Anyway, let's have a look at the rst keyframe (frame 8 in the reference). Our character has his feet planted on the ground and is reaching backwards to prepare for the throw (some
proper anticipation right here! More on this later). We create an arc through the body.

The next two keyframes (frames 16 and 19) are pretty straight forward and the line of action is not changing much.

Frame 21 has the most important change in the line of action since this is right where the action is happening, the line of action works like a whip here (the line of action often works
like a whip or wave) and will help the animation create the feel that the stone is launched forward.

In the last two keyframes (frames 24 and 32) the line of action comes to a neutral rest as the power of the motion diminishes.
Now that we have the line of the action let's take a quick peek at how it looks exaggerated and animated:

Nice, that line alone could already be throwing a rock!

Step 4: Opposing Actions

Opposing actions are in short terms two or more motions that are going in different directions; they oppose each other. It's usually used in dialog to break a character up so that it
doesn't look as mechanical.

As you can see in the image above the character is slamming his st into his hand as well as slightly lifting his head, by slightly moving the head in the other direction we get a lot more
tension in the st, also if he move his head into the lower position as he is raising his st we get an opposing action there as well and at the same time we get some nice anticipation!

But it has more uses than just in dialogs, for example you can use it too keep a character's center of gravity balanced, which it does in this motion.

In the rst keyframe the left arm moves out from the body as the right arm reaches back in anticipation for the throw. This helps with the anticipation as well as center the center of
gravity. On the second keyframe the arms switch direction as they start to propel the stone forward. The third keyframe is pretty much the same as the second. On the fourth keyframe
the arms have just passed their highest velocity, which is the point where the stone is released. On the two last keyframes the arms have lost most velocity and come to a rest.

Throughout the whole motion the left arm is catering the right arm (throwing arm) with two things, balance and power. By moving the arm backwards as we're throwing the pivot point
of the throw and the center of mass gets closer together and it's easier to reach a high velocity. See image below for illustration of the principle.

In the rst gure the weight and the pivot point are separated and you will need a lot of force to get the contraption to accelerate. While in the second gure the weight and the pivot
point are in the exact same spot, now you will just need a little push to get the contraption moving.

Advertisement

Step 5: Breaking of Joints

The idea behind joint breaking is quite simple and it adds a lot to the motion. The basic concept of it is that the joints do not arrive to their destination at the same time/speed, I'll
illustrate it for you:
The left character has stiff joints, meaning that they all arrive at the exact same time whilst the right one uses the principle of breaking joints. By having the limbs following each other
we create a wave/whip motion. By doing this we get a more natural motion since we almost never have locked joints. For example, when you are walking your shinbone is guided by
your thigh. The thigh pulls forward rst and after it comes the shinbone and foot.

In real life the breaking of joints is a lot more subtle than in animation but by exaggerating it we get much smoother animation, and by smoother I mean that it's easier to read. This is
especially true in fast motions.

In our reference video we have a really nice example of joint breaking, notice how the shoulder and elbow start moving and the hand is left hanging back for a few frames. This starts
the whipping motion that later launches the stone.

Fun fact: When a dancer does "the wave" he is using the principle of breaking joints to create the illusion of a wave going through his arms!

Step 6: Timing And Spacing

Timing and spacing are the basic building blocks of your animation. They are what decide at what speed and how something travels, and animation is essentially just a lot of parts
ying around at different speeds creating a harmony of motion.

In the example above we have a ball that is rolling to a stop. The line above it illustrates its timing and spacing. The Spacing is the distance or SPACE an object moves per frame, the
vertical lines illustrate how much distance the ball moves per frame. The timing of the ball depends on how many of these lines there are, or in other words, how many frames you give
a motion. All motion has timing and spacing:

In the picture above we see the timing and spacing for frames 8-32 in the reference video. Notice how the lines become tighter as the motion slows down and they get more space
when the motion speeds up. Spacing and timing work closely together. To sum it up Timing is distance in time between frames while Spacing is distance on the 'paper' between the
frames.

Good spacing also helps the smoothness of a motion, I've made two balls bouncing below, the left one has bad spacing and the right one has good spacing. (I gave them the same
timing so you can see how much spacing alone does)

Notice how the spacing between frames 6,7 and 8 on the left one creates a "shake", it might seem stupid that someone would space a ball this way but you'd be surprised how often
beginners space this way on their limbs and it's one reason a lot of beginners have choppy animations.

As a last note on timing and spacing I'd like to say that some animators like to draw the lines that shows timing and spacing while they work on their animation to more easily imagine
how the animation will move. I personally don't do this.

Step 7: Anticipation
Anticipation is a tool we use to increase the readability as well as emphasize an action. So what is anticipation? It's a motion before a motion that indicates that the motion is coming.
Might sound complicated, but it's really one of the easier principles to understand.

For this and the following 2 steps we'll use this animation to illustrate the principles.

The anticipation in this animation is when the character lifts his foot back preparing to kick the ball; a motion before a motion that indicates the motion is coming.
Anticipation can also be used to create comedy. Since the anticipation is used to make the viewer think something is going to happen we can trick them by using anticipation. For
example we can give a punch a lot of anticipation to make the viewer think "Oh, this is gonna be a really hard punch" but then have the punch have little to no effect on the target. Or we
can do something totally unexpected like instead of punching he gives the other character a pat on the head. You get the drift.

The anticipation in the reference is when the character reaches back with his throwing arm, preparing to launch the rock.

Step 8: Follow Through

I'm not gonna go into depth on follow through, just explain what it is. Follow through is what comes after a motion to nish it, since it looks odd if the animation just come to a stiff halt.
However it can be used like anticipation to make something funny. If we use the punch as an example again we can choose not to have any follow through, this will make the punch
feel unstoppable, almost like concrete. You have to use proper anticipation for this though.

The follow through in the ball animation is when his foot keeps going up into the air and then down to the ground.

The follow through in this reference is after the rock has been launched and the arms swing down to the characters sides and come to a rest.

Step 9: Squash and Stretch

Squash and stretch (we'll call it SnS) was said to be the most important principle of animation by the pioneers at Disney. So what is this SnS that is so important? The answer is that it
is exactly what it sounds like, it's about squashing and stretching your character. It's mostly used in cartoonish animation but SnS does exist in reality as well. The most common
example is a ball that get compressed when it's kicked but it also exists in humans and animals. For example, take a look at an animal running (cat, horse, dog pretty much anything
that runs on 4 legs - you could also check out this tut by Michael Chen). They reach out to take a leap and then compress as they take a 'step'. This gives them the same look as what
we want to achieve with SnS.

The four frames above are the frames where I used the most SnS in the animation. I used it on the foot, the body and the ball. The foot stretches out as it accelerates to hit the ball, this
creates a nice dragging feel. The body uses the same principle but it also gets squashed in the end. This makes it feel like it comes to a stop, the mass is compressed. The ball is rst
squashed as the foot hits it, the mass is compressed as it's hit by the foot, then the force is transferred to the ball and it stretches out as it is sent ying (it should however regain its
original form after a while, depending on what kind of style you're going for).

SnS is not always about changing the shape of an object, I have used the principle of SnS to make robots in 3D move more interestingly. In the case where the body parts have
constant shape and you want to use SnS you have to think about the overall pose of the character. So instead of squashing the character you have it take a pose where it's very
crawled up and instead of stretching you make them reach out, close to their full reach.

I'll give more explanation to SnS in the second execution.

Execution v.1: Neutral

Step 10: The First Sketch

Once we are con dent we know enough about the motion we want to create, we start to sketch the character on the frame where he has the most 'open' pose, or the frame where you
can see him the most clearly. In this case it is the rst frame, but remember that this is not always the case.

Keep it rough and just try to get the basic anatomy and pose for the character. I like to sketch with pink since it gives a nice contrast towards the black outlines you draw later. Also if I
happen to forget to delete any of the sketch lines it will be easy to spot in the animation since it's pink and I usually work with blue/grey/darkish scenes

Step 11: The First Outlines

Once I have a sketch I think will work I draw the character on a new layer over the sketch. At this point I make sure that the lines work well together and that the character is visually
pleasing. Anatomical problems will usually surface at this stage.

While drawing the outlines I usually make the sketch lighter to make it easier to draw over it.

Step 12: Animate the Volumes

Now that I have an outline I make yet another layer and on this layer I draw very simple shapes that will work as substitutes for the limbs while I animate the character.

The reason I do this is because there's a difference between drawing and drawing frames for animation. When you draw a single image you're manipulating lines to create a shape that
looks good, but while you are animating you are manipulating volumes that have to work together to create a believable character. If you don't keep the volumes in mind while
animating you can end up with a ton of great looking frames but when you put them together the volumes might be all over the place, changing for each frame. So by making the
character simpler by ONLY having the volumes while we esh out the motion we make sure the character keeps a constant volume. We also save a lot of time since we don't have to
think about line quality.

Step 13: The Key Frames

Remember the keyframes we picked?
While drawing the key frames you really have to focus and put everything you learned while observing to use. On top of this you have to make sure the volumes are perfect as well
(aren't you glad you don't have to think about line quality now? :D) I choose to not exaggerate this one too much and keep it neutral to give you guys a good foundation to work from.
(There will be examples on how to exaggerate the principles heavily for a more toonish result in the end though!) Since these frames are just to help you while working you don't have
to care at all if your images don't look amazing as long as you see where the volumes go and the pose works you're golden.

Step 14: Timing The Animation

Now that we have the key frames we can time the animation. We do so by adding and removing frame length to the different keyframes until we nd something that we feel looks right.
My nished timing of the keys looked like this after a couple of tweaks:

Good timing is something very hard to achieve and very few are good at it from birth, so we mortals just have to work hard and practice. As you know, practice makes perfect!
(Remember to take a peak at the reference to get some help with the timing).

Step 15: Drawing Inbetweens

I had 6 key frames, the timed animation is 22 frames long and since I'm making this animation on 2's (meaning I hold each drawing for 2 frames instead of 1, this reduces the number
of frames I have to draw and if the animation is decent the nal result will look smooth enough.) This all means that I have 5 inbetweens to draw.

When I draw inbetweens I generally look at two frames at once with the onion skin tool, the one infront and the one before the current frame. If the frames cover each other a lot it can
be hard to see which lines belong to which frame. In these cases I color one of them green while I work so I can see better.

It's important to keep in mind that you're not making a frame that is an average of the neighboring keys while you're inbetweening. You still have to take spacing into account and not
just place the lines right in the middle.

The animation with inbetweens.(Keep in mind that this is 12fps, you don't always have to draw on every frame!)

Step 16: Drawing The Outlines

Now we pretty much have the animation done, we just have to make it pretty.(If you still have the volume layer above the outline layer from before move the outline layer above the
volume layer so that it's easier to draw. Lock the volume layer. When locking the volume layer it also stops it from showing up in the onion skin, which would otherwise make it harder to
see when drawing the outlines.)
We have the rst frames' outlines from before so all we have to do is t it over the volumes. What I do is that I start with the keys. I start with the one that is the most different from the
outline I already have and look at it through the onion skin. While I draw the new outline I keep thinking what the rst outline would look like in the new pose, making sure that it's eye-
pleasing.

Step 17: Coloring

I'm gonna keep this step VERY short since coloring is not my speciality. What I do when I color is quite simple, I pick colors for each part and I go over the animation in turns lling in
one color at a time. Once I'm done with that I pick a darker shade for the shadow and I take the brush tool and set it to 'paint inside'. Then I go over the animation and animate the
shadow on the objects always frame-stepping (with , and .) to make sure it looks okay compared to the previous frame.

Result:

Execution v.2: Cartoonish

Step 18: Sketching and Timing the Keys

The technique I'm going to use now is a lot more straight forward and works great when you're animating things where the volume control is not a major issue.

As you can see, these sketches are a lot rougher than the keys in the other method and look a lot like the sketch we did for the rst frame in the other execution.

Just like we did with the other method we time the animation once we have the keys.

Step 19: Inbetweening and Tuning

Same process as in the other method. Keep playing the animation while you make the inbetweens and change poses as you see t to get the motion you want

Step 20: Outlining

You make a new layer and draw the outlines like before.

Step 21: Coloring

This step is the one that differs the most from the other method. What you want to do now is make a new layer beneath the outlines layer and on this layer we will be drawing with the
brush tool to add color where we want it. The effect this gives is to make it look more 'drawn' since this way we get places where the color falls outside the lines and some places
where color is missing, like if we were using water colors to color. This method also allow us to have outlines that are open (like the hair of the character).

There's one big drawback for this method of coloring though and that is that if you want to use backgrounds it will look really bad, but for a stylized animation on a white/minimal
background it works great.

Step 22: Anticipation

Alright, I'll now explain the thoughts I had while making this toonish version and rst up is the anticipation. I wanted to give this one a very rubbery feel and a motion like a whip so I
chose to really push the anticipation by giving the anticipation an anticipation of it own.
This way we get a very strong anticipation as well as emphasize the feel of a whip, since when using a whip you rst drag the whip backwards and then forward.

Step 23: Line Of Action

The line of action should be a lot more visible in toonish animation.

Notice how the character follows the line of action a lot closer then the neutral animation. Something to keep in mind when doing this is not to let limbs stick out too much in a
direction that breaks the line of action, for example look at the frame where the character is reaching back the most. His left arm should be reaching forward A LOT more if we followed
the reference but that would break the line of action too much so instead we put it closer to the body. However when we don't want the motion to feel as strong and lessen the tension
of it we can stick limbs out. Take a look at the last image, this is when the action has been completed and the character is coming to a rest. We decrease the tension of the pose by
letting the limbs stick out.

Another thing to notice is how the second frame's line of action throws the character back into the third frame's, gives us a nice feeling that the character is really using all of his force.

Step 24: Squash and Stretch

Squash and stretch(SnS) is VERY important to get a toonish result.

The rst SnS we'll look at is when the character does the rst part of the anticipation. He squashes down as he starts to pull up his arm, this will make it seem like he bounces up into
the bigger anticipation. Also note that his arm is starting to stretch.

In the image above we see the second part of the SnS. On the rst frame the character reaches the larges stretch. As the arm swings forward the body goes back to normal volume as
the arm is still stretched the tension of the action travels into the arm as it swings forward. On the last frame the stretching of the arm is almost back to normal. By stretching the arm
in this way we get the feel that his arm is made out of rubber.

There is also some very subtle SnS in the end (on the last 4 frames) when the character blinks, below I show what it looks like.

Step 25: Timing And Spacing

There's not much to say about the timing and spacing of this animation that I haven't already told you
As you can see it accelerates all the way until he has made the throw (except for a small slow down when the arm switches direction).

Result:

Final Words
I guess that's all I have to say for this tutorial, I hope you learned a lot and remember that you can nd all the example animations as well as the reference video in the source le if
you'd like to have a closer look at them,

Advertisement

Mathias Johansson

Why not check out other tutorials I've written on Animation and Speed animation?

 FEED  LIKE  FOLLOW

Weekly email summary

Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.

Email Address

Update me weekly

Download Attachment

Translations

Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!

Translate this post

Powered by
 Advertisement

QUICK LINKS

ENVATO TUTS+ 

JOIN OUR COMMUNITY 

HELP 

28,784 1,281 40,960

Tutorials Courses Translations

Envato.com Our products Careers Sitemap

© 2020 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

Follow Envato Tuts+