Wednesday, October 04, 2006

Understanding Timing in Animation Part 1

When you begin to animate an action there are a number of planning steps involved. Certainly as previously discussed one of those planning steps is to think about how you want to present the action. We might want to refer to this as our story telling approach. We have some aspect of the story that we are going to communicate through the action we are going to animate and there are many possible ways to present this information. As an example, are we going to be close up or far away from the action? What comedic or dramatic effects do we want to achieve? There are many possible alternatives and choices. We have to explore these alternatives through our thumb nail visualizations. Eventually we will decide on an approach and then we can begin to work on producing some key poses.

The main key poses are also often referred to as “extremes”. Their basic definition is: the farthest point that a part of the action moves before changing direction. These poses are normally generated from the sketches you have made during the thumb nailing stage of planning an action. If you’re doing key pose animation, you are leaving some drawings in the action sequence out and drawing just the extreme positions. You will come back to the inbetween drawings at a later time. With key pose animation, you can do all the extremes and then decide on the actual action timing later. In future discussions we will talk about the advantages and disadvantages of animating by going from key pose to key pose VS animating an action straight ahead. Straight ahead animation starts at drawing number 1 and then you do drawing number 2, then drawing number 3 and so on. The big difference is in the planning of the timing. With straight ahead animation, you decide on the timing as you do each drawing. As you will eventually discover there are aspects of character animations that are best approached pose to pose and aspects that are best approached straight ahead. For the purposes of this discussion we will focus on pose animation and the timing of that approach to animating action.

The subject of timing for animation is very complex; I plan to explore it slowly through a series of articles which will build on each prior article. As a preface there are technical aspects to animating and then there are the performance aspects. We will be starting mostly on technical aspects to build a foundation but eventually we will try to blend them together which is ultimately how you will work.

Background Basics

Just to get everyone on the same page I’ll start with some definitions of terms and concepts.

A few additional drawing terms we need to establish beyond the notion of extreme drawings, are keys, breakdowns and inbetweens. As I previously mentioned “extremes” are boundary drawings for an action. They denote the farthest point that a part of the action moves before changing direction. They are the first drawings that you would produce to establish major starting and ending positions. Key drawings are also important positioning drawings like extremes they also establish significant points in a motion. The most influential keys inbetween extremes are often referred to as breakdowns because they provide important information about how the action transitioned between the extremes. They break down the action into a greater level of detail. The other transitional drawings between extremes and keys are called inbetweens. The names aren't of any great significance except that they give us a way to label a particular drawing in the sequence when we are discussing them from an order of creation perspective. The terms keys and inbetweens are sufficient for most discussions. A key drawing does what its name implies; it provides us with key information about the action. Keys alone can give us a good sense of the action although they are usually not sufficient to provide as believable or as fluid an action by themselves. Once we have key drawings we will produce drawings inbetween those keys that will transition the action and provide the visual fluidity we want.

Film is physically divided up into a continuous series of static picture images each of which is called a frame of the film. We will use the term “frame” to mean a single picture image composed of one or more drawn elements. To create the illusion of motion our series of frames are presented to the viewer one at a time. The rate of change from one frame to the next, the speed at which the frames are presented to the viewer, is called the frame rate. (FPS) The speed of an action is determined by the number of frames that are used to represent that action. The speed of presentation of those frames is controlled by the frame rate (FPS). The frame rate is going to be a constant for your film so its only value is to be used as a tool for calculating screen time. You use the frame rate to convert time into frames.

“On screen” time is simply the amount of time an action is visible on the screen. “On screen” time is determined by the number of frames used to represent an action. Frame rate is only the tool we use to know that we need a specific number of frames to represent a specific amount of “on screen” time. How much screen time we want to show for an action is its speed and that translates to some specific number of frames. The more frames used to represent an action the slower the action appears and conversely the fewer frames used to represent an action the faster the action appears, because it is on the screen less time. You don’t change the frame rate to control the speed of an action. You change the number of frames used to represent the action.

Technically, the two major factors involved in timing an action are speed and distance, also often referred to as spacing. The speed of an action is determined by the number of frames that are used to represent that action. Distance or the spacing is the amount of change between those frames. If there is no change between successive frames then there is no distance or space between the frames. This is called a “hold”. When there is a significant change in appearance between successive frames that is a large space or “gap”. When there is a tiny, very small, change in appearance between successive frames that is a small space. We will refer to a unique frame as a “change” and a non-unique frame as a “repeat” or a “hold”. So the speed of an action tells us how many total frames we will need and the spacing tells us which and how many of those total frames are “changes” and which and how many of those frames are “repeats” and how significant the difference in appearance is between any two successive changes.

One way to slow down an action is to use more frames to represent this action and to speed up an action you will want to use fewer frames. This seems simple enough conceptually, but what does it really mean? Supposing I have a fixed amount of screen time and therefore a fixed number of frames to present this action, how then do I slow down or speed things up when I can’t just change the relative number of frames? The answer is in the spacing. By spacing successive drawings closer together I am in effect increasing the number of frames used and therefore I slow down the action. The smaller the space the slower the movement appears. Conversely if I broaden the spacing between successive drawings I am using fewer frames and the action is faster. The larger the space the faster the movement appears. So having set boundary positions with key drawings I can determine the location, space wise, of my inbetween or inbetweens by evaluating how fast the transition between the keys should be. If the transition is constant then my inbetween will be half way between the keys. If the transition is accelerating then my inbetweens will be spaced closer to the initial key position to create a slow out that speeds up. If the transition is decelerating than my inbetweens will be closer to the second key to create an ease in that begins faster and slows down.



Therefore a significant part of our planning of the animation of an action, once we have determined the presentation aspects, is that we must decide on the on screen time and spacing of the action. From the on screen time we will know the number of frames available and the spacing will then tell us how many of those frames need to be unique and how significantly they change sequentially.

Every action is different. Two separate characters will do the same action in completely different ways. In fact the same character may do the same action differently just based on circumstances. There are numerous determining factors. Things like the situation, the personality and mannerisms of the character, the character’s environment, physical characteristics and the basic laws of nature and physics to name a few. So, how does someone learn timing? I can think of three fundamental ways. You can learn timing through observation, through analysis and study, and through experience. Observation is looking at similar actions in the real world and learning from your observations. Analysis and study is more focused on learning from others. For example watching lots of animated works frame by frame to analyze how and why they were done that way. And experience comes from actually sitting down and doing the drawings and making the adjustments as you work through creating the action.

So let's just summarize briefly. We have an action that will be presented on the screen for some determined amount of time. Using the frame rate we will determine how many frames are needed to represent this on screen time. Some of those frames will be change drawings either keys or inbetweens and potentially some of those frames will be repeats or holds.

OK, so having determined the total number of frames to represent our action we now have to create this action. Which frames will be key drawings? Which frames will be inbetween drawings? Which frames will be repeats? Will we always be using even spacing? Will we be using uneven spacing and if so when and why? What is the process? There are many things that we will have to evaluate and consider like weight, external forces, emotions etc.

Continued in Part 2

8 Comments:

Anonymous Renato Vargas said...

Dear Mr. Keslensky:

I don't know how you find the time, but in the name of all animator wannabes I sincerely thank you for leaving a true herritage to the animation world. I am quite sure that your words will last the test of time and become textbooks for generations ahead.

10/11/2006 2:55 AM  
Blogger JK said...

That's very kind of you to say. I just try to contribute what I can the same as others have done before me. I'm glad that you are finding these articles useful and I appreciate your comment and hope to hear more from you over time.

10/11/2006 8:22 AM  
Anonymous Meeky said...

Bless you JK, you are a star. I can't thank you enough for making animation as easy (yet scientific) as possible. I have just arrived from the TBS forum, and I think the forum without your contributions is not as useful. Many many thanks once again :)

5/07/2007 12:58 PM  
Blogger Joseph said...

Great stuff. I too am a big dreamer. Information like this keeps me chugging "I think I can".

Many thanks.

9/05/2007 12:09 PM  
Anonymous Anonymous said...

Wow, this blog is the best. I just started working with Toon Boom studio and when I read some of your I was able to make my own cartoon from scratch without any problems. These tutorials, or however you call them, are much better than those on Toon Boom's official site. Again I can just say WOW!

12/14/2007 7:58 PM  
Blogger JK said...

Thanks for the kind words, and I'm very glad that you find my tutorials on my Cartooning in Toon Boom blog useful. This is my The Craft of Making Cartoons blog, which is just a general cartoon making blog and not specifically oriented to any specific software tool. The two blogs are complementary so some readers do jump between them interchangably.

12/14/2007 8:19 PM  
Blogger David said...

I just wanted to add my own expression of gratitude, not only for this blog, but for all your generous, wise and careful offerings in other contexts. As a newly born animator (though anything but a newly born human) I especially appreciate this blog, which touches the heart of the matter so directly!

3/05/2008 6:40 AM  
Anonymous Anonymous said...

Hello!
I’ve been looking through the section for quite a long time but was feeling shy to join.
today some new cheap sun glasses links for my friends!
[URL=http://sunglasses-for-less.sunglassescheapcheapcheap.info/map.html]sunglasses for less[/URL]
[URL=http://sunglassescheapcheapcheap.info]cheap sunglasses[/URL]
[URL=http://chanel-silver-sunglasses.sunglassescheapcheapcheap.info]chanel silver sunglasses[/URL]
[URL=http://mazzi-sunglasses.sunglassescheapcheapcheap.info]mazzi sunglasses[/URL]
[URL=http://perscription-sunglasses-valentino.sunglassescheapcheapcheap.info]perscription sunglasses valentino[/URL]
[URL=http://sunglasses-clip-on.sunglassescheapcheapcheap.info]sunglasses clip on[/URL]
[URL=http://top-brands-sunglasses.sunglassescheapcheapcheap.info]top brands sunglasses[/URL]
[URL=http://famous-designers-sunglasses.sunglassescheapcheapcheap.info]famous designers sunglasses[/URL]
[URL=http://chole-sunglasses.sunglassescheapcheapcheap.info]chole sunglasses[/URL]
[URL=http://versace-mens-sunglasses.sunglassescheapcheapcheap.info]versace mens sunglasses[/URL]
[URL=http://julbo-sunglasses-website.sunglassescheapcheapcheap.info]julbo sunglasses website[/URL]
[URL=http://versace-cutout-temple-wrap-sunglasses.sunglassescheapcheapcheap.info]versace cutout temple wrap sunglasses[/URL]
[URL=http://coco-chanel-replica-sunglasses.sunglassescheapcheapcheap.info]coco chanel replica sunglasses[/URL]
[URL=http://prada-sunglasses-06e.sunglassescheapcheapcheap.info/map.html]prada sunglasses 06e[/URL]
[URL=http://kids-sunglasses.sunglassescheapcheapcheap.info]kids sunglasses[/URL]
[URL=http://older-armani-sunglasses.sunglassescheapcheapcheap.info]older armani sunglasses[/URL]
[URL=http://styleyes-sunglasses.sunglassescheapcheapcheap.info]styleyes sunglasses[/URL]
[URL=http://sunglasses-bugatti.sunglassescheapcheapcheap.info]sunglasses bugatti[/URL]
[URL=http://christain-dior-sunglasses.sunglassescheapcheapcheap.info]christain dior sunglasses[/URL]
[URL=http://victoria-sunglasses.sunglassescheapcheapcheap.info]victoria sunglasses[/URL]
[URL=http://roxy-foxy-sunglasses.sunglassescheapcheapcheap.info]roxy foxy sunglasses[/URL]

Your [b]sun glasses[/b] doctor

4/06/2010 6:16 PM  

Post a Comment

<< Home