Advertise here via BSA

This is the third and final post in a 3-part series where we have been looking at the Principles of Animation, developed in the early years of Walt Disney animation as they were pioneering the young animation field. In Part 1, we looked at squash and stretch, anticipation, and staging. In Part 2, we looked at animation processes and techniques using straight ahead action, pose to pose, follow through, slow in and out, and arcs. In this post, we will be looking at secondary action, timing, exaggeration, and appeal.

SECONDARY ACTION

Secondary action is used to enhance the primary action. Secondary action will often give your primary action much more impact, but if overused, it will only muddle what is going on and confuse the viewer. If this happens, you should consider removing the secondary action or staging the scene differently.

Maxim Zhestkov / art film / personal project / 2006 (click to view QT video in new window)

Maxim Zhestkov’s works are great examples of using secondary action to enhance simple actions, all while using simple shapes. In the linked example above, there is a simple action: a circle moving across the screen, but it is only made interesting using the focal point due to the secondary actions of the other circles when they react.

Secondary action can take place before, during or after the primary action. The start of a secondary action during a major action can go unnoticed and the value will be lost, so staging once again must be considered to ensure that it is always obvious while not overshadowing the primary action.

TIMING

Timing refers to the number of frames it takes to complete an action. This becomes very important because of all the factors you have to take into account when planning for it. If you are making something move fast, you have to make sure that it’s still legible to the viewer, and if it’s a slow movement, it should hold their attention. Also, depending on the use of either fast or slow actions, you can establish moods of franticness, lethargy, energy, assuredness, excitement, nervousness, relaxation and drama.

Most importantly, timing can establish a sense of weight. A heavier object will take more time to ease into a motion and change directions, while a light object has less mass and is much more influenced by a force like wind and can change direction, stop and start much more quickly. Sometimes it is a good exercise to try to view the objects in your scene as silhouettes and try to tell from the timing if you can still get a sense of what that object is.

EXAGGERATION

Exaggeration may be one of the hardest concepts to master. Exaggeration doesn’t mean that everything should look like a Saturday morning cartoon. The concept is to find the most important ideas, emotions or concepts in the shot and enhance them until there is no doubt what is being communicated. You may want to think of this as the same technique that a caricature artist uses, finding the most identifiable parts of something and enhancing it until those few parts are the focus and everything else is just the periphery; connecting the pieces together. This can be done through not only animation, but through color usage, lighting, staging, sound design, typefaces or the shape of the objects. Some of these can be used selectively, but they should always work in harmony with each other to create the message. If one of the elements don’t fit, you will still get the feeling that something is wrong even if you aren’t able to pick out exactly what was off.

This Air Jordan commercial uses the lighting, time manipulation, sound design, and staging to enhance the drama. You can see in the altered version below that by changing the timing back to normal, balancing the color, and removing the sound, the impact is lost when you aren’t allowed to key in on the reactions of the people and focus in on Jordan’s slowed-down moves. The five scenes don’t really seem like much when the original 30 second spot is cut down to 12 seconds.

APPEAL

I like to think of this principle as the “make it look great” principle. This doesn’t mean that you need to apply realistic lens flares, have huge 3D models with fluid simulations and use the latest Trapcode and Sapphire plug-ins. You just need to make something that holds a person’s interest throughout and communicates your message. Simple, right?

Appeal should always be dependent on the audience and the message you are trying to communicate. There’s no universal rule or style that works for every project; it’s really up to the designer to be able to justify why their pitched idea is the best solution to communicate the message.

In these next examples, you will see very different approaches all conveying a message that’s interesting to watch from beginning to end.

Conclusion

All of these concepts are designed to help you better communicate your visual ideas, whether you’re an animator or designer. The tools are easy enough to learn, but the goal is understanding how to use them to deliver a message that is clear, convincing and hopefully interesting enough to take your work to the next level.

I hope that this short series of posts has been clear, informative and applicable to what you do. If you have any questions, please feel free to leave them in the comments below. Also, the Fuel Your Motionography team would love to see you putting “the principles” to practice. If you have anything you want to share with the community, we’d love to have you join our flickr group and upload your work. It’s a great way to get your work out there and receive feedback.

For anybody interested in animation, I would highly suggest finding a copy of Frank Thomas and Ollie Johnston’s The Illusion of Life which this article is based on. Often referred to as the bible of animation, it is full of insight on the animation process and stories behind some of Disney’s greatest works.

REFERENCES:

Thomas, Frank and Johnston, Ollie, Disney Animation: The Illusion of Life, Abbeville Press, New York, 1981

All of the linked videos are property of their respective owners.

Advertise here via BSA

This is the second post in a 3-part series where we’ll look at the Principles of Animation, developed in the early years of Walt Disney animation as they were pioneering the young animation field. In Part 1, we looked at squash and stretch, anticipation, and staging; and in this post we will be looking at animation processes and techniques that can be applied to your motion design work.

STRAIGHT AHEAD ACTION and POSE TO POSE

Straight ahead action and pose to pose are two approaches to animating in 2D animation. With straight ahead action, the animator starts at the beginning of a scene knowing what actions must take place, then draws each frame sequentially. This approach allows the animator to improvise as he goes along and will usually give your animation a bit of spontaneity.

In this scene from the animated film The Iron Giant, a straight ahead action technique was used most to animate the jittery child (~31 second mark), and allows more of a free-flowing stream of consciousness feel to the shot.

Pose to pose animation is the most common approach used with modern animation using After Effects and 3D suites. With this technique, you set keyframes to create keyposes at determined times. Unlike 2D cel animators, you do not have to draw inbetweens (also known as tweening) between keyposes as After Effects will create these for you. While it may reduce your workload, it can also produce unexpected results. In my workflow, I like to review both shot and keyframe in the storyboarded key poses that I know I have to hit. I then go through and give it a second pass of keyframes, still trying to keep my timelines as clean as possible. Finally, I repeat the application of more passes of keyframes as needed. This process of animating in passes ensures that you maintain proper timing and helps eliminate unnecessary keyframes that can make revisions a giant headache.

If given more complex objects like human character models to animate, I often try to break down passes into parts. Looking back to the robot jumping example in Part 1, I would first do a pass of animating just the position. When previewing a stiff character, you can still get a good idea if the animation is too fast or slow. Then, I like to move to animating the driving force; in this case the legs and torso, which allows the character to get from point A to B. Next, I would do a pass of animating the arms and head which help to flesh out the character’s anticipation, squash and stretch, and follow through (see next section). Now with a full rough animation, I will go through and add more passes to smooth out the inbetweens.

FOLLOW THROUGH

Anticipation, action, and follow through are the three stages of an animation. An action that comes to an abrupt end without follow through often feels unnatural, as if the object has lost all sense of mass, volume and velocity.

Just like you would account for in the anticipation and action stages, you have to think of the objects in terms of the same properties of volume, mass, velocity and weight distribution when animating follow through.

We’ll look at this animation from a recent project I had worked on as an example of follow through. As Kobe hangs on the rim after he dunks, his body and legs rocks back and forth from the momentum of his jump. Even without using the cutout model that the treatment called for, you can still get a sense of reality due to the movement on the swinging animation.

There are a few expressions that you can use in After Effects that will help automate some of these animations, but I believe that at times they can lack a natural feel to them no matter how mathematically correct they are.

SLOW IN and SLOW OUT

Slow in and out or ease in and out as it is most often referred to in motion graphics is used to distribute the inbetween frames between keyframes. The effect of this technique is most easily represented in a spline keyframe graph.

You can see that the ease ins and outs on the magenta circle gives the action a much less mechanical feel and allows you to have more natural feeling stop when actions like follow through are not available.

ARCS

When using the pose to pose process of animation, you will often get animation that is very robotic feeling where objects will move from point to point and lack a natural arcing motion. These actions lacking arc often feel as if they lack a sense of weight.

Arcs can be added to your animation by turning on bezier handles to your keyframes. You can create much smoother animations without having to add more keyframes to your timelines.

Using bezier handles in After Effects to create a circular motion path

Conclusion

All of these concepts are designed to help you better communicate your visual ideas, whether you’re an animator or designer. The tools are easy enough to learn, but the goal is understanding how to use them to deliver a message that is clear, convincing and hopefully interesting enough to take your work to the next level.

The finale, or Part 3 of this series to be published next Wednesday will cover secondary action, timing, exaggeration, and appeal. If you have any questions, feel free to leave a comment below.

REFERENCES:

Thomas, Frank and Johnston, Ollie, Disney Animation: The Illusion of Life, Abbeville Press, New York, 1981

Advertise here via BSA

Introduction

This is the first in a 3-part series where we’ll look at the Principles of Animation, developed in the early years of Walt Disney animation as they were pioneering the young animation field. Today, I’ll show you how they can be applied to your motion design work.

While previously working at a broadcast and motion design boutique, I had to go through a stack of demos for an animator position. Within the first 15 seconds of each reel, I could tell which of the applicants had filled their reel full of the latest tutorials off sites like Video Copilot (no knock on the amazing tutorials by Andrew Kramer, I have probably watched through all of them myself and learned a lot). The animation reels that really stood out were the ones that displayed an understanding of weight, velocity, object interaction, anticipation and the use of animation to communicate a feeling or emotion.

In the growing landscape of online tutorials that promise to teach you how to create “amazing effect X” or “breathtaking effect as seen in movie Z”, it’s very easy to learn the tools of the motion graphics trade. By following a step-by-step guide, you can easily learn how to apply the latest plug-ins and what each of the settings do. These posts are not going to cover anything as exciting as that, but will examine a few basic but essential guidelines to improve your work.

SQUASH AND STRETCH

Squash and stretch is perhaps the most important principle as it sets up the rigidity, mass, volume and in more complex objects, the physical structure of an object. The most common example and exercise used in teaching this principle is in the bouncing ball animation as seen in the video below:

As you can see, the ball at its peak is a perfect sphere showing a state of transition from ascending and descending. As the ball falls, it becomes elongated to show the pull of gravity and at the same time, maintaining the same volume. The degree to which the ball becomes elongated tells you how rigid the object is. At the bounce, the ball immediately becomes squashed to show the impact and interaction between the ball and the floor. Once again, the ball maintains the same volume by becoming shorter as it grows wider. As the ball bounces and transfers its energy up, it transitions back to elongated. And finally, the ball transitions back to the perfect sphere shape as it reaches the next apex in the animation. This exercise can turn out looking a number of different ways when various levels of rigidity, volume, and velocity are applied.

Bouncing Ball Timeline with echo (Click for larger image)

In the next example, we’ll look at the application of squash and stretch and how it applies to a more rigid object like a robot.

Even though the skeleton of this robot consists of completely rigid parts, proper squash and stretch can still be used in which the robot’s joints fold as they land and stretch out while jumping outwards. Observe the shifting of volume and weight.

ANTICIPATION

Some of my favorite examples of anticipation come from old Wile E. Coyote cartoons. An example of anticipation is the moment where Wile E. Coyote stalls momentarily in mid-air after realizing he has stepped off a cliff, inevitably plunging to the bottom. Both you and Wile E. knew what action was coming before you even saw it. In some cases, anticipation can be more satisfying to see than the consequence itself. A prime example of this would be in animating a very fast moving object. In a pitcher’s throw, you expect to see a wind up preceding planned actions. The wind up in anticipation can be used to add a great deal of character to an action.

Example of the the anticipation action in a pitcher's throw. (Click for larger image)

Anticipation can also be used between multiple objects. One object may move in anticipation based on the action of another object. This interaction can be used to direct the viewer’s attention to the second object. Inversely, you can choose to omit anticipation to create a surprise, however, I’ve found that proper timing can still be referred to as anticipation.

STAGING

Staging is often referred to as composition in motion design. You should always stage so that only one message, action or idea is clearly the object of focus. Like in good graphic design, composition should be used to direct the eye and remove confusion. Obviously this can become either more complicated or easier due to the element of time. Unlike a poster, you can cut to a whole new composition and for a few seconds, key in on one element of a larger scene.

For motion designers using 3D applications, I have observed that it’s always everyone’s immediate instinct to create these large, sweeping and constant moving camera set-ups. Quite frankly, whenever I see that, my immediate reaction is to think that this person isn’t disciplined enough to ask themselves which composition is best to communicate the message. Sometimes fast sweeping cameras are the correct solution but most often it isn’t. Resist the urge.

Staging tips:

• Use thirds
• Point to the desired area
• Use contrast (lighting, movement, depth of field, etc.)
• Step away and look at it with a pair of fresh eyes
• Limit the action to one animation group at a time

Staging: Try to organize points of interests on either the intersections or along the lines. (Photo by Anthony Grimley)

Staging: Use depth of field to create a focus on your subject (Photo by Donovan Martin)

Staging: Example of leading the eye to a point. (Photo by John Mueller)

Staging: Shifting the point of view can elicit different feelings or moods. (Photo by Peter Allen)

Conclusion

All of these concepts are designed to help you better communicate your visual ideas, whether you’re an animator or designer. The tools are easy enough to learn, but the goal is understanding how to use them to deliver a message that is clear, convincing and hopefully interesting enough to take your work to the next level.

For anybody interested in animation, I would highly suggest finding a copy of Frank Thomas and Ollie Johnston’s The Illusion of Life, which this article is based on. Often referred to as the bible of animation, it is full of insight on the animation process and stories behind some of Disney’s greatest works.

Part 2 of this series is all about animation. We’ll be taking a look at straight ahead and pose to pose animation, slow in and outs, follow throughs and arcs. If you have any questions, feel free to leave a comment below.

REFERENCES:

Thomas, Frank and Johnston, Ollie, Disney Animation: The Illusion of Life, Abbeville Press, New York, 1981