Key Framed Animation Part 4

Please be sure to review

Key Framed Animation - Part 1

Key Framed Animation - Part 2

Key Framed Animation - Part 3

before you continue with these next parts of this series.

In Part 3 of this series we viewed an Example Scene and began discussing the steps to creating that scene. We saw the use of the scene planning select tool in the assembly of the underwater background environment. The scene planning select tool is used to place elements into the scene initially. We reviewed some examples and discussed reasons for being careful not to use the select tool after you start key frame animation of an element or element hierarchy.

Now that we have assembled the background environment for this scene we are ready to start the character animation. The scene’s storyline calls for Filbert, a fish, to swim into the scene from off camera and to slowly swim to about the middle of the scene where he will react to meeting a ferocious shark. To accomplish this we will need a swimming cycle that will be repeated for some period of time as well as a motion path to move Filbert along as he swims.

Fig 1. The 6 keys for the swim cycle (click to enlarge)

I animated the swimming cycle through drawn images. The cycle uses only six unique images spaced on 2’s, which means one new image every other frame. A complete cycle is 12 frames in length. I constructed Filbert swimming using 7 individual elements or layers. I could easily have done it by just drawing the six key drawings on six cells of a single layer. I chose to use 7 elements to show the composite of multiple layers to create a character. But it was totally an arbitrary choice for demonstration purposes.

Fig 2. The 7 element parts of Filbert in the Exposure Sheet

Once the swim cycle is created, I have to look at the storyboard and the director’s notes to learn the duration of the swimming prior to Filbert reacting to meeting the shark. This way I will know how many exposures I will need of Filbert swimming for my exposure sheet. It turns out that he is supposed to swim for 30 seconds of screen time and then react. At 24 frames per second (FPS) 30 seconds is equal to 720 frames. So if Filbert’s swim cycle is 12 frames long then there will be 60 swim cycles in the scene up to the point of the reaction. (720 divided by 12) To fill out my exposure sheet I can create 60 cycles out of each of Filbert’s component elements. To do this I select an element and select the 12 frames of the swim cycle. By right clicking I open the context menu and can select “create cycle”.

Fig. 3 Using the Create Cycle menu command

A dialog box opens and I enter 60 for the number of cycles. (The original cycle is included in the total cycle count) When I click on OK the exposure sheet is populated by repeating cycles of cells all the way to frame 720 as expected. I need to repeat this for all 7 of Filbert’s elements. There are other ways that I could have done this as we will see later in this scene.



Fig 4. Entering the number of cycles you want to create

Now that I have Filbert swimming for 30 seconds on the exposure sheet I still need to place him in the scene and then have him do more than just splash about. He needs to get moving. I switch to camera view and there is Filbert but he is too big and facing in the wrong direction. So using the scene planning select tool and the drawing tab of the properties panel, I reduce him in size and change his orientation. I want to scale him down to 50% of his actual drawn size so I check the “keep proportions” box and set his scale value text box to 0.5. I also want to flip him horizontally. I could do this by entering 180 in the skewing and rotation text boxes or I can use the select tool transform outline that is around Filbert. By dragging the right middle grab handle horizontally across Filbert’s body I can cause him to flip horizontally.

Fig 5. Initializing Filbert in the scene and flipping him horizontally




Fig 6. Completing the horizontal drag of the handle to flip Filbert

I also need to adjust Filbert’s 3D space location using the side view and top view panels to place him appropriately in relationship to the various underwater scenery props.

Fig 7. Adjusting Filbert's location in 3D space in the Side View panel (click to enlarge)

There is one more step that I like to take and that is to initialize the character’s position on the character peg. I have all of Filbert’s element parts attached to a common parent peg, Filbert-P, which I refer to as his character peg. This peg, in the case of this instance of Filbert swimming, is just being used as a grouping peg and not for animation, because I already drew the swimming animation, but I will still add initializing and ending keyframes to the peg just to insure that the values are set and not left to chance.

Fig 8. The Filbert swim action element hierarchy

To do this I first collapse the character peg, this insures that all settings to the parent peg are reflected in the attached elements below. Then I make the scene planning transform tool active (selected). I go to the first frame of the Filbert-P character peg and I add a keyframe. Actually it is a group of keyframe types because remember this is being addressed by the transform tool. I then go to frame 720 the end of this peg and add an ending keyframe group. Did I have to do this considering I’m not keyframe animating on this peg? No, but it is a good habit.

The animation of the motion associated with Filbert’s swimming is done on a motion guide peg which is separate from his character peg. This approach is a good practice because as I reuse the Filbert character swimming he will swim the same but follow different paths as required. I created a new parent peg and named it “Swimming”. Then I attached the collapsed Filbert-P peg to the “Swimming” peg. Now I can create my swimming motion path.

Fig 9. Adding the Swimming peg as a motion path

I begin by collapsing the “Swimming” peg and making the scene planning motion tool active (selected). Then I move the red frame slider to frame one and select the first frame of the “Swimming” peg. I add a motion keyframe. Next I move to frame 670 on the “Swimming” peg which is where Filbert begins to tread water prior to reacting to the shark. I add a second motion keyframe there. Then in the camera view window I grab the end of the motion track and move it until Filbert is positioned in the middle of the scene. You can tell which end to grab by the direction of the reddish brown motion arrows. Think of the motion path as a double ended arrow with each end pointing outward.

Fig 10. Stretching the motion path to position Filbert mid-scene

Once the path is stretched out all I need to do is go back to frame one on the “Swimming” peg and set the motion segment between the two motion keys to non-constant. I’m happy with the default linear velocity curve for my spacing.

Fig 11. Filbert swimming down the motion path on the Swimming peg

This is a simple motion path just a straight line but in future articles we will see how to fashion more complex paths. That's it, we now have Filbert swimming into the scene and out to the middle of the camera’s view window.

Next time in Part 5 we will continue by animating Filbert’s reaction and adding some camera work to accentuate the shocking effect. If you have questions, you can write them as blog comments here or you can post them in the Q&A for the Cartooning In Toon Boom blog thread in the Tutorials section of the Toon Boom Studio User Forums.

Key Framed Animation - Part 1

Key Framed Animation - Part 2

Key Framed Animation - Part 3

Key Framed Animation - Part 5

Key Framed Animation Part 3

Please be sure to review

Key Framed Animation - Part 1

Key Framed Animation - Part 2

before you continue with these next parts of this series.

Thinking and Planning

Successfully creating and producing animated content requires significant thought, preparation and planning. Trying to approach animation as ad-hoc improvisation is a recipe for major disappointment. You most likely will not get successful results by an approach to animating based on just winging it as you go. So even though examples and tutorials don’t always go into great details about the thinking and planning and visualization work that was involved, it is none the less important. I will try as often as practical to not gloss over those aspects. The pieces of an animated cartoon don’t just magically appear and there are rarely any happy accidents in creating animation. Every aspect is the result of thoughtful planning and careful execution.

The Demonstration Scene

I have created a demonstration scene to act as a reference to these articles on Key Framed Animation. It will hopefully serve our purposes well, as over a series of additional installments on this topic we will have plenty to discuss in uncovering the behind the scenes techniques of this scene.

From here forward in this series on Key Framed Animation we are going to be exploring how to implement the techniques we touched on in the first two parts.

Except in the case of an animation practice exercise, like creating a simple character walk cycle, an animated cartoon scene is created as part of telling a story. The story and its requirements precede the planning of the scene. In our demonstration scene we have a fish named Filbert who is swimming along casually until he comes to a brief stop and suddenly reacts to a shark head on. Filbert then turns and exits very quickly fleeing for his life.

The scene is underwater so we need to design and construct an underwater environment as well as to make the appropriate character animation.

Here is our demonstration scene

I wanted to show you the scene up front so that you would have a good idea of what the final result will be. Getting to a successful result is what these articles are all about.

Choices

Animating is full of choices related to how we want to create our work. There is always more than one way to do almost everything and as a TBS user as you become more experienced you will find even more alternatives. When first learning TBS just try to stay open minded and keep reminding yourself that there are lots of choices possible. I have an expression I use often which goes: “don’t confuse the effort with the results”. In creating animation it is the final results that count not how easy or how hard you worked to get to those results. Hopefully you will enjoy the process of creating animation, if not, you might consider doing some other type of activity.

As I go along in these articles I will try to point out useful practices and tips, these aren’t rules and you can incorporate them in your own workflow or not. Each animator has to decide what works best for themselves in their own work. The way that I approach something is one way and certainly not the only way.

Getting Started

To do a scene you should create some rough sketches as part of your visualizing. I like to do lots of small thumbnail sketches to explore different ways to view the action required by the story. It is also usually a good idea to create some scene layout sketches to determine the most effective placement of the characters and props. Remember you are basically starting from scratch and therefore have to design and create everything about this scene.

For our underwater scene I identified many items of scenery or props to create the appropriate environment. Things like rocks and coral and sand and plants as well as some special animation effects to help provide a sense of being in water. Things like seaweed moving with the current and rising air bubbles. I created all of these items in Drawing View as individual elements. And once created they can be assembled into a composite setting in Camera View to match my visualized layout sketches.

Also I have collected all of my scenery assets into a section of my global library so as to make them available for reuse in future scenes or projects. I’ll do a series about building and using your libraries in some future articles.

Each piece of scenery or prop is a column in my exposure sheet for this scene. I have organized them into a rough layered order but the real layout and organizing of the scene will be done in Camera View when I assemble the environment.

As you can see below I created the elements without worrying too much about the way they would fit in the scene layout. I drew them at a comfortable size and usually centered them in my Drawing View grid. Why? Mostly it is personal preference.

The exceptions were the seaweed and the various bubble effects. All of which I animated in Drawing View taking advantage of the field guide and the onion skinning feature of TBS. This brings up an important animator’s choice. How to create an effect or an action? Do I hand draw the animation in Drawing View using full or limited animation methods? Do I create the animation in composition using keyframing techniques? Or, do I create the animation by using the camera and cinematic techniques? It’s all comes down to making choices that you feel will work best for you and your situation. For the seaweed and the bubbles I knew I wanted to be able to reuse these effects again and I personally like doing these types of effects in Drawing View the classical way.

So as you can see I now have a bunch of scenery assets and effects that need to be assembled to create my underwater environment. To do this I will work in Camera View and use the timeline and top and side view panels.

Static Values Applied to an Element

In scene planning and layout in TBS we encounter two kinds of element attribute values, static values and dynamic values. Static values are applied to an element when it is first placed in the scene. They are applied and then left alone. That’s why they are static values because they don’t vary with the passage of time. Dynamic values vary over time. They are often referred to as animatable values for just that reason. It is the dynamic values that we assign through the use of keyed frames. But first we need utilize an element’s static values.

Here is an important guideline. Don’t do any keyframing to an element or hierarchy of elements until you have applied all of their needed static values. And once you start keyframing, don’t mess with an element’s static values. Why? Because changing static values on an element after you have started key framed animation is a sure way to destroy a lot of your hard work.

So what are these static values? How do we use them? And how can we avoid messing up by miss using them?

click on the image to enlarge

When you switch to Camera View from Drawing View you are moving from viewing your elements in 2D space to viewing them in 3D space. Now if you do absolutely nothing to the element beyond what you did in creating it in Drawing View then it would be seen and be rendered exactly as drawn. That would be a lot like shooting a pencil test without using any of the features of your animation camera stand. Of course TBS provides us with this wonderful multi-plane camera stand with all sorts of cinematic capabilities so we sure want to take advantage of it. Therefore we need to place our elements in 3D space to get the result we want. This is done by setting static values for the elements 3D location (North-South-East-West-Front-Back coordinates) as well as values for the elements scale and rotational orientation. These modifiers are applied to the Camera View representation of the element. The actual element in Drawing View is not changed. Now it is important to note that we are talking about modifying the entire element when we apply these static values. That means every cell in your exposure sheet that is part of that element is displayed in camera view according to these values. We can also set static values for the rotational pivot point for the element and the scaling pivot point for the element.

The scaling pivot point is set by selecting the scene planning scale tool and dragging and positioning the green circle. The rotational pivot point is set by selecting the scene planning rotation tool and dragging and positioning the green circle. Once these pivot points are set they remain in that position. Now here is a important warning. Don’t try to relocate either of these static pivot points once you start setting keyframes for this element. These pivot points are static not dynamic so they are not able to be keyframed. If you set keyframes on your element and then move the associated static pivot point then all the values you keyframed will now reference a different pivot location and the results across your animation will be unpredictable at best. If you ever need to manipulate an element on a one time basis for a specific keyframe setting with a different pivot point, the scene planning transform tool allows you to use a temporary pivot point.

All of the other static values for positioning and orienting an element in 3D space before animating it with keyframes are applied by selecting and using the scene planning select tool. Or you can make text box numerical entries on the Drawing tab of the Properties panel while the desired element is selected by the scene planning select tool. Here is another important warning. Don’t get confused and try setting values on the Drawing tab while using another scene planning tool and think you are setting keyframed values, you aren’t. You are setting static values and this inadvertent changing of static values while keyframing produces results across your animation that will be unpredictable at best.

So here are my personal guidelines for the setting of static values to be applied to an element or hierarchy of elements. Always set these values before starting any keyframing for those elements in your scene. And, only use the scene planning select tool on the first cell exposure frame for the element in your timeline. Now these static values are globally applied to the element and not keyed to a specific frame, and the scene planning select tool is only used to set static values and never keyframed values, so if you always remember to only use the scene planning select tool on the first cell exposure frame of an element then you will not be trying to do keyframing with this tool and inadvertently messing up your other keyframed work. It may seem like I’m spending a lot of time warning you about the dangers of changing static values after you start keyfaming an element in your scene but this is a huge source of problems for many TBS users and often blamed as bugs in the software when the keyframed work suddenly seems to go haywire. It almost always is caused by changing a static value after the fact and once you do it, fixing the ripple thru effect is often not easy to say the least.

So now we are going to compose our underwater scene using the scene planning select tool to position each element in 3D space. We will visually do some of the manipulations in the Camera View panel but some of the settings are easier to accomplish using the top view and side view panels.

As you can see I was very busy positioning all these scenery and effects elements to compose this underwater environment. Each green line in the top view and the side view represents an element. The brown triangular shape is the camera’s viewpoint which widens as you move away from the camera’s lens. Top view is used to position elements East – West and Front – Back. Side view is used to position elements North – South and Front – Back.

Now that I have the scene set up, I also need to extend the exposures for the various elements to have them show for the desired time in the scene. I actually usually do this in the Exposure Sheet before I even start putting things in 3D space. Then there are a couple more useful practices that I like to follow. I create a separate peg element in the timeline and attach all of my scenery and props scene elements to it. I’m going to use this peg element as a timeline folder to manage my elements track display. I can collapse the “folder” peg as I shouldn't need to deal with these tracks while I'm doing the character animation or camera work for this scene.

This is the track list un-collapsed.


This is the track list collapsed.

I also go to my Exposure sheet elements list and uncheck these elements. This has no effect on Camera View work; it just cleans up my Exposure Sheet by hiding elements I most likely won’t need to view. I can always unhide them if I need to.

Notice that up until now I haven’t mentioned setting any keyframes yet. That’s because I haven’t had to use any so far to set up the environment of this scene. The only animation up to this point was the seaweed and the bubbles and that was done classically in Drawing View not by using keyframed animation. That’s a lot to read and digest for now, so next time in Key Framed Animation – Part 4 we will begin to work on the character animation and camera animation parts of our scene. And that’s when we will be using keyframing.

Key Framed Animation Part 2

In Part 1 we discussed the basics of key framed animation. In part 2 we will begin to discuss how key framed animation is implemented and controlled in Toon Boom Studio.

First we want to review some background concepts.

Pictures are composed of multiple picture elements

As we all discussed in It's Elemental Part 1, animation is created by rendering a series of pictures in a sequence and displaying those pictures at a sufficient rate of speed so as to generate the phenomena called “persistence of vision”. Basically our goal is to optically blend sequential images together to create the visual effect of continuous motion. The individual pictures themselves can be a single element or a combination of many picture elements. In most animations, the pictures in the sequence, also referred to as the frames in the sequence, are constructed as compositions of many layered picture elements. In traditional hand drawn animation, these picture elements are arranged in an overlapping layered stack under a rostrum camera for photographing.

Each picture element traditionally was created separately on a clear transparent plastic sheet called a cell. The stacking order of the cells creates the visual effect of depth by allowing some picture elements to overlap other picture elements producing perspective in a 2D picture. In order to position each picture element’s cell relative to the other elements of that composite picture, there is the need for some means of element registration. The accurate registration of picture elements to avoid unintentional shifting is critical because any variation in the positioning of a picture element photographed in successive frames of an animated sequence creates the illusion of motion. To accomplish this accurate positioning, a cell registration device had to be invented, and thus the registration peg and the registration peg bar were created. By punching registration holes in each cell that matched the registration peg pins of the peg bar, it was possible to insure accurate positioning of each and every drawing element in the layered composition stack for each photographed frame of the animation. Additionally by utilizing multiple peg bars, some which were held stationary and some which could be incrementally repositioned, it became possible to create the illusion of motion by simple frame by frame repositioning of selected image elements. These incrementally movable peg bars became known as traveling peg bars.

Click on image to view full size

Besides having multiple traveling peg bars, a photographic animation camera stand also has an incrementally movable picture composition surface, the picture plane, that is capable of producing compound movements in all horizontal directions (North, South, East and West) including 360 degree rotational movements. The creation of the multi-plane camera stand, by the addition of multiple picture composition planes, provides additional photographic depth between picture elements. Traveling peg bars in conjunction with the compound directional movements of the picture planes of the camera stand are the ancestors of Toon Boom Studios peg element motion guides .

Pegs

So as we discussed in Part 1, we can direct computer aided animation using keyframes but we need a way to connect an element to many different types of keyed frame values as well as a way to specify the length of our connecting segments between each beginning and ending keyed frame pair. We also need a place to tie a velocity function curve to each connecting segment. In Toon Boom Studio we have a container for keyed frame values and inbetweening instructions and that container is called a peg. Looking back to the origin of the registration peg, we can see that pegs and peg bars were originally created as registration devices, and we are still using them in that way in our virtual version too. We are registering animation attribute values and instructions to art work elements for specified frame sequences.

In Toon Boom Studio beginning with version 3.5, we can have pegs in two forms. We can have them as independent element tracks in our timeline or we can have them as integrated parts of other element tracks where the peg is included inside of a drawing or image element track. The important point here is that any usage of pegs for containing information and instructional registration is a part of compositing and planning and therefore only useful in the timeline directly associating the pegs with Camera View for scene planning. Pegs have no real meaning with respect to the exposure sheet which is primarily used to manage drawing organization and Drawing View. Don’t forget to review It’s Elemental Part 2 for more information on the uses of the exposure sheet and the timeline panel.

A peg, whether an independent element or integrated into a drawing or image element, can contain multiple different types of attributes of keyed frame values at each individual frame in a scene (location, scale, rotation, or skew values). TBS provides specific visual indicators on a timeline track display for each type of keyed value present at each single frame. Conceptually a peg element is a collection of pegs, each of which is a multi-valued container. Each frame position of a peg element is a peg container. For simplification we just refer to the peg element and its individual peg containers as a peg. So just like the term keyframe can be singular or plural depending on the context of our use, the same thing is true for the term peg. And a peg element can contain many connecting segments as defined by each occurrence of a starting and ending key framed value for the same type of attribute. This means that even though three segments, one for scale and one for rotation and one for location, might all start at the same frame they don’t have to be the same length, they can each end on different frames. Each segment does not have to have the same type of inbetweening method either, some could be constant and the others non-constant, and each non-constant segment has its own unique velocity function curve that controls the in between image spacing. That’s a lot of flexibility for us as animators to be able to direct.

As we learned in Part 1, key framed animation is a form of programming instructions. But in TBS we don’t write code to direct the render engine, we do it using visual tools like the scene planning tools and the function editor and the pegs themselves. How we use these visual aids dramatically effects how well we function as lead animators. So the more we understand about how they work and their interactions, the easier and more successful our directing tasks. Yes, we are animating but we are also directing the render engine and it requires significant skill and experience to do this correctly. After all we have to be the lead animator and the render engine is our obedient inbetweening assistant. That assistant does exactly what we instruct it to do, even if we inadvertently give it incorrect instructions. So it is easy to be lulled into thinking that key framed animation is really simple due to the fact that we do things visually and not by typing script code in TBS. But when you consider how detailed and complicated the directions can be which you are trying to communicate to your assistant, the render engine, you can begin to appreciate that this is not a trivial task.

Scene planning tools

Scene planning tools are used to specify or address the type or types of attributes with which you want to work. They are more than visual manipulators, they are specific selection switches. When you select a scene planning tool from your tool pallet it becomes active and it limits what type of instructions you can influence. Once a scene planning tool has been chosen you can only create, edit, copy or delete the associated type or types of attributes of keys for that specific tool. When the transform tool is active it is used as an all purpose keying tool as it addresses location, rotation, scale and skew attributes all at the same time. When the scale tool is active it only addresses scale attribute values. When the rotation tool is active it only addresses rotation attribute values. When the skew tool is active it only addresses skew attribute values. And when the motion tool is active it only addresses motion path attribute values. The scene planning selection tool doesn't address any keyed frame types at all when it is active. But it still has an very important instructional purpose which we will learn more about in Part 3.

Each matching keyed type of attribute can be viewed as part of a pair of keyframes which is connected by an inbetweening instructional segment. Each segment is created as either a constant segment or a non-constant segment. For the same element there can be multiple types of attributes keyframed and the connecting segments for each keyframe pair of common attributes can be set independently. The way a particular keyed frame attribute is specifically addressed is by the scene planning tool you select to be active. So if you only want to address a rotation pair of keyframes you would select the rotation tool to be active. Or, if you only wanted to address a scale pair of keyframes you would select the scale tool to be active. The important concept to remember when working with keyed frame attributes is that the scene planning tool you select to be active dictates which attributes you are addressing when you are creating, editing, copying or deleting keyframes or their connecting segments. We will get into more detail about this in part 3 on Key Framed Animation.

So to extend what we have learned so far, pegs are used to keyframe animate objects across time. You can attach one or more elements to a peg and you can attach pegs to other pegs to create complex hierarchies of control. Pegs are used to facilitate computer rendered inbetweening. So when you have elements attached to a peg, you can set keyframes and TBS interpolates inbetween those keyframes based on the values of those keyframes and the type of connecting segment used. And you can use velocity function curves to adjust the way the inbetweening is applied which is often called “custom easing” or "cushioning". Basically the curve specifies the rate of change between the images, their spacing.

Additionally, pegs can be controlled by motion paths which are 3D and those motion paths can have adjustable keyframes and they also can have frame independent motion control points. That allows you to have some motion control that has to happen at a specific point in time and other motion controls that are 3D space dependent and not time dependent. At this point, you should begin to see that TBS has some very sophisticated functionality that can provide a lot of flexibility for us as animators once we master the skills of directing this method of communicating instructions to the render engine.

There is a new way to use pegs in v3.5 as each image or drawing element now includes a peg as part of that image or drawing element. This means that keyframing does not require attaching elements to separate peg elements as was the case in previous TBS versions. Of course the power and flexibility of separate peg elements still exists and so this new creation of integrated peg elements is not just a simplification but is also an enhancement.

Each type of attribute of keyed frame value can be set uniquely using their own special scene planning tool. Some people misunderstand the flexibility and power of this approach. You can use the transform tool for rough keyframing and then when you go to tweak an animation action you can use the individual scene planning tools to fine tune it and not accidentally mess up other types of keyed frame attributes. Because you can individually address key framed values with specific scene planning tools on the same frame, you can selectively delete those types of key framed parameters without deleting other types of keyframed values that you want to maintain on that same frame.

So in Part 3 of Key Framed Animation we will begin to look at the ways to actually use the scene planning tools and pegs and keyframes and velocity curves.

Key Framed Animation Part 1

This article is the beginning of a series that will explore “key framed animation”. If you haven’t read It’s Elemental Part 1 and It’s Elemental Part 2 then I strongly recommend that you read them before proceeding through this series of articles.

Up until now we have been making some comparisons between the physical world of hand drawn and photographed animation and the Toon Boom Studio virtual world of computer rendered animation. We have begun to discuss the division of production responsibilities between the TBS exposure sheet and the TBS timeline panel. So what exactly is meant by “key framed” animation?

Vector Art

Simplistically speaking, there are two primary methods in which computer software creates and interprets graphical images. One method is by mapping pixels with information that point by point stores the image. This is often referred to as Raster Graphics or Bit Mapped graphics. A second method of graphical representation is referred to as Vector Graphics which are based upon mathematical equations to represent graphical images. In the Toon Boom Studio world of computer animation, we primarily work with vector art. Because vector art is stored by computers as mathematical expressions which are rendered into visual images for viewing; they are uniquely suited to animation production. These expressions can be easily manipulated and rendered with virtually no loss in picture quality. This is due to the fact that the manipulation of the art work can also be expressed mathematically by applying numerical values for various attributes. For example, the scale, the rendered size, of the art work, can be modified by applying a scaling factor. The rotational orientation of an art work element can also be manipulated by applying a rotational factor. The location or position of the art object in a frame’s North South East and West coordinate grid can also be generated by applying numerical values. Even distortion of the art, referred to as deformation or skewing, can be captured as attribute values. All of these manipulation values can then be applied at a specified time by Toon Boom Studio's rendering engine to generate a desired visual image. When we use the term “animatable” with regard to the manipulation values for the attributes of how art work elements will be rendered, we are referring to the fact that these particular attributes of the art work (scale, position, rotation, deformation) can be varied as a function of time creating the illusion of motion. So to use the computer to generate when and how these rendering changes will occur, we need a way to record and tie each attribute modification value to a specific point in time.

Keying Attribute Values to Frames

For any animation, time is converted into frames by means of a conversion formula based on the frame rate of presentation called the frames per second or FPS. Therefore to locate a specific point in time inside our animated scene, we will actually identify a frame number along our scene’s time line. The recording of a specific type of attribute value (scale, position, rotation, or skew) to control how the vector art will be rendered at a specific point in time is called a keyed frame value. This is often shortened and referred to in discussions as just a keyframe. This term is merely being used to show that a specific attribute manipulation value has been recorded to be applied to a specific piece or pieces of art work at a specific point in time. The value (scale, position, rotation, or skew) has been keyed, locked down and registered, to a specific frame number, a point in time.

Important conceptual note: The term keyframe is not always singular and most often is used to represent a set or group of multiple attribute types all keyed to the same object or objects at the same frame. Remember that a graphical object has many different attribute types that can be manipulated simultaneously. In Toon Boom Studio we can set keyed frame values one at a time or in groups. The term keyframe is used for the setting of these values and actually can and does refer to multiple values of different types together as a group (scale, position, rotation, and skew values). Toon Boom Studio provides track indicators at a single frame to show which types of values have been keyed to that specific frame. So please be aware that when you read the word keyframe you need to understand the context of how it is being used, either to refer to a single keyed value type or to refer to a set of multiple value types all in a group at that specific frame. This has proven to be a major source of confusion for many people.

Now one of the most powerful capabilities of computer animation software is its ability to fill in the logical transition, progressive changes, between two key framed attribute values of the same type, a beginning keyframe value and an ending keyframe value. This computer generation of transitional values is appropriately referred to as "tweening" which is short for in-betweening. The number of attribute value changes that the computer will generate depends on the number of frames specified in between the beginning and ending keyed frame attribute values. So for example, if we assign a keyed frame rotational attribute value of 0 degrees to an element at frame 1 and a keyed frame rotational value of 90 degrees for that same element at frame 7. Then in between frames 1 and 7 there are 5 frames and therefore 5 transitional values of rotational positioning that the computer can generate. The sequence of frames from a beginning keyframe value to the ending keyframe value of the same type, 7 frames in our rotational example, is called a segment. For any segment defined by a starting and ending key framed value pair, we can specify how the render engine will generate the in between transitional attribute values. If we just want the render engine to hold the beginning keyframe value constant until the ending keyframe value is reached, then we specify that the segment is a constant segment. This produces a “snap” or jump from the beginning attribute value to the ending attribute value. On the other hand, if we want a gradual transition in between the beginning keyed frame value and the ending keyed frame value; we will specify that the segment be a non-constant segment. By default, non-constant segments are generated linearly, which means that the rate of transition is equally spaced between values. So in our example where we have 5 in between frames between rotational values starting at 0 degrees and ending at 90 degrees, we would have attribute values created of 15, 30, 45, 60, and 75 degrees respectively. The linear rate of change is 15 degrees per frame. This is in effect an even or balanced distribution of the change in the controlled attribute. If we wanted these values to be determined differently, we could either increase the number of in between frames that make up the segment, or we could, use the TBS Function Editor to specify a different mathematical curve to be applied to control the generation of attribute value calculations. In terms of traditional animation, the variation of the function curve is the same as adjusting the spacing of the in between drawings. This is how cushioning or easing is applied to our animations generated by the aid of the computer render engine. If you want to learn more about timing and spacing in animation read these articles Understanding Timing in Animation.

"click" on the graphics to see their enlarged versions

So key framed animation is a technique of producing the illusion of motion by letting the computer software’s rendering engine generate a sequence of changed images mathematically using an in betweening calculation method which is controlled by a transitional equation visually represented by a function curve. The animator specifies key images by using key framed values to set the boundary conditions of the movement. Then the animator specifies to the rendering engine, his/her assistant, how many frames to use for in between images and how closely to space those in between images relative to each other. If this sounds a bit complicated, complex and technical that’s because it is. When you are doing key framed animation you are essentially programming the actions of the software’s rendering engine. In Toon Boom Studio, you aren’t writing code to program the render engine (in Flash that is called Action Script) but rather you are using scene planning tools and keyed frames and function curves. But it's programming none the less.

Next time, in Part 2 of Key Framed Animation we will begin to discuss dynamic elements called pegs and see how they are applied.

Some Additional TBS User Tips

Adding Contrast to Your Drawing View

This is a simple tip that can improve your use of the Onion Skinning feature in drawing view. You probably already are familiar with Onion Skinning but if not, be sure to read one of my previous tutorial articles A Good Place to Start Part 1. One of the nice features of Onion Skinning in Toon Boom Studio is that you can customize the color for displaying the “previous” drawings as well as the “next” drawings. For example you could set “previous” to a color like red and “next” to a color like blue. (The color choice is a personal preference with the desired result being a strong contrast.) To customize your Onion Skinning you need to go to Preferences and select the Light Table tab. Additionally you can use View>Onion Skin>Show Outline on Onion Skin as a contrast aid if your drawing objects are already paint filled. But sometimes even with all of those aids you still might like some additional visual contrast to help you see multiple levels in your drawing stack more clearly. Believe it or not you don’t have to draw on a pure white digital paper. You can customize the drawing view background to make it easier on your eyes and to add contrast to Onion Skinning too. To do this you want go to Preferences and select the Interface tab. There you will find a custom color choice for the drawing view panel. Pick what ever color helps you work more productively. I often use a pale cream color because it produces less of a glare and improves visual contract in Onion Skinning.

This tab also provides you a way to customize your element tracks to make them easier to identify in your Timeline panel.

Take Advantage of Colors as a Rough Drawing Aid

This is one of those tricks in animating that is so often not used, perhaps because it has to do with roughing out your animations and not finished work. I showed some basics of using forms in the construction of a character in a previous article Jumping into Animation Part 1. Much like the use of color for contrast can make it easier to work with Onion Skinning; contrasting colors are a great aid to roughing in a character. Not only does it help to use multiple scratch pad elements, but it is also useful to use different colors for each layer of your rough construction. Think about it like using several contrasting colored pencils for your rough sketching. I have a special color pallet that I created just for doing rough sketching which I import into every project. A great way to use Toon Boom Studio's color management system, which links color pallet swatches to their lines and fills, is to adjust the alpha or opacity setting of a color swatch used on a lower drawing layer when you want that color to be less visible. I crank my sketch pallet colors' opacity levels up and down often during rough construction. So I not only have the advantage of different colors for contrast, I also can adjust the visual brightness of a color too. It is like having a dimmer feature for the Auto Light table.

Here is an example of using colors and forms to construct a head turn.

More TBS User Tips and Tricks

Sequential Numbering of Drawings in an Element

When I am doing an animation sequence, I like to have all my drawings sequentially numbered. There are many reasons that this is a useful practice. Besides being visually easier there is also the fact that if you use the cell swapping feature of the Properties panel you know that it presents your cells in sequential numerical order. Also if you use the advanced cycle building function you need to have your cycle organized in sequential cell order for it to work properly. Now one of the problems that I have with TBS is that if I am drawing the animation directly into TBS and I don’t know exactly how many drawings or inbetween drawings I will need, then just letting TBS automatically number the drawings as I make them will cause my cells to be numbered in the actual order of creation which is non-linear as opposed to sequentially numbering them.

When I animate I typically work from a series of key pose drawings and then, as I refine the timing, I go back and fill in the appropriate breakdown drawings and in between drawings. This is an iterative process and highly non-sequential. So as an example my exposure sheet column for an element “A” might end up looking something like:

A-1, A-10, A-6, A-11, A-2, A-12, A-7, A-13, A-3, A-14, A-8, A-15, A-4, A-9, A-16, A-5.

Ideally I would prefer it to look like:

A-1, A-2, A-3, A-4, A-5, A-6, A-7, A-8, A-9, A-10, A-11, A-12, A-13, A-14, A-15, and A-16.

Now technically the numbering isn’t critical because the location of the cells in the exposure sheet controls their position in the viewing of the frame sequence, but organizationally, for me as the animator, I find it easier to work with my drawings in the exposure sheet when they are numbered sequentially like I would number them if I were doing this as hand drawn animation on paper.

So here is a tip from my personal work flow style which resolves this issue, at least to suit my personal way of working.

When I create a new drawing element, for example element “A”, I make an educated guess as to the maximum number of cells I will need for this element for this scene. So again, for this example, I decide I might need as many as 100 drawings.

My first step is to go to the first cell position of the element A's column and “right click” and select Insert Cell.. from the context menu. In the number box, I enter 100 making sure that Named CellsBefore is selected and click on OK. This causes the element to be populated with 100 cells sequentially numbered from 1 to 100. An alternate way to do the same thing would be to highlight a range of cells ( I.E. frames 1 to 100) and “right click” and select Insert Cell.. from the context menu which will then populate all the highlights frames with sequentially numbered blank cells.

Next, I select the first cell in the range and holding the shift key down, I select the rest of the 100 cell range of cells and right click and select Delete Cell from the context menu. You might be wondering why I just deleted the cells I just created but they aren’t really deleted they just no longer show in the exposure sheet.

Now as I animate, I can select the desired numbered cell I want for a drawing by using the Cell tab in the Properties panel. This gives me complete control of my sequential numbering and even if I choose to work on 2’s for example (that's two exposures for each cell) I can just use the odd numbered drawings and save the even numbers for 1’s when I need to have them. For example:

A-1, A-3, A-5, A-7, A-9, A-11, A-13, A-15, A-17, A-19 …

I like having the visual confirmation of cell numbers matching frame numbers. And if you don't want to go through the delete and add back steps, you can just leave the blank sequentially numbered cells in place and use them or replace them with extra exposures of a previous cell as desired.

Any unused numbers aren’t a problem as they aren’t included in the published animation. For traditionally trained animators like me, this is a nice way to keep things familiar and well organized.

Using Elements Notes and Cell Notes

There is never enough desktop space in TBS when you are working, even if you are lucky enough to have a duel display setup. So there is always a need to use some useful work flow tricks to save space and still have good work organization. One such trick is in naming elements and then utilizing element notes and cell notes for more detailed information.

When I use to do mostly hand drawn animation on paper, I always found ways to abbreviate things and also to write little notes in the margins of my drawings or exposure sheets. So for me, some of those methods just naturally carried over into my TBS work flow. I normally name my elements by single letters of the alphabet. (A, B, C, D,E,F,G …..) and my backgrounds BG with a number, like BG1,BG2. If I later need to add an additional element in between two existing elements, I just add a number to the element name, like A1. This use of alphabet letters just helps me to be more organized and it also makes finding things in a large time line label list really easy.

Of course, the major drawback to using a single letter for a name is that it doesn’t tell me what the element contains. So to solve that, I add an element note to each element when I create it. I can put as much detail about the element in that note as I need. The note doesn’t clutter up my screen space, but it is there for me to refer to just by “rolling” over the element’s name label in the timeline or the exposure sheet. So if element “B” is “crazy rabbit character”, I will put that in my element note for element “B”.



Now cell notes are also very useful when working. I use them whenever I want to remind myself of some action or detail that I want to add to a drawing at a later time. I tend to animate in an iterative multi-pass approach, which means I may revisit a drawing many times before it is completed. So I use an attached cell note to keep up with things left to be done or to be considered. For example “add additional action with crazy rabbit’s ears starting at this drawing”.



The beauty of cell notes is that they are frame specific, which means that when I tie a note to cell a-23 at frame 11 that note is only seen at that location. If I reuse cell a-23 at a different frame location it doesn't include the previously attached note. Element notes are always attached to the element and show both in the Timeline panel track list and in the Exposure Sheet panel.

Miscellaneous TBS UsageTips

TBS Help in your personal browser

I absolutely love the TBS help system, it is easily one of the best implementations of a help system ever. The keyword search is outstanding and if you aren't using it, you are cheating yourself out of a great resource.

Now one complaint I use to have about the TBS help system was that it works in my web browser which used to be Internet Explorer and it was a pain in the neck to have to answer that annoying IE question about allowing the display of an "Active X Object" or whatever. When IE 7.0 came out, I really hated it. So I switched to Firefox which I really like. (just a personal preference) But I didn't know how to tell TBS to use Firefox instead of IE for displaying the help system. Actually it is super easy. You just set Firefox up as your default browser in Windows for your system and guess what? TBS help is always displayed in the default system browser. Problem solved.

Flipping

Many animators like to "flip" their drawings to check out how an action is progressing. There is a little talked about trick in TBS that is a great "flipping" substitute. If you highlight a sequence of cells in an element in your exposure sheet or on the time line and then press the Shift + Enter key, TBS will just render that sequence of cells and by using the "loop" button on the render viewer, you can watch them flip over and over and see how the action is looking. This is much nicer than trying to use the A and S keys to flip through a sequence. It is a really fast way to flip through any sequence of cells you select. One more of those little animator friendly features in Toon Boom Studio.

Inking in Thick and Thin Lines

One of the often asked questions in forums about 2D animation pertains to line quality in drawings. Now it is important to distinguish between the lines in your initial animation work and the "inked lines" of your cleaned up finals. You shouldn't be overly focused on line quality (thicks and thins) when you are roughing out your animations, line quality presentation is part of the clean up inking phase not the rough drawing phase.

Once you have your animation drawn the way you want it, then you can do the clean up and inking usually on a separate cell in a separate drawing element in TBS. If line quality, thick and thin lines, to add depth and show volume and weight, are important to you, then you want to ink with the brush tool, using a tablet with pressure and tilt sensitivity turned on. In TBS you also want to set up your selected pen in the properties panel to have a range of minimum to maximum of at least 8-12 pixels. I usually work with my "inking" pen at 3 minimum and 36 maximum and smoothing at 3.

But here is the often missed trick to doing great thick and thin inked lines in the digital world. Don't expect to make the line in a single pass or stroke of the brush tool. Line thickness is built up by making multiple passes and letting the brush tool build thickness on top of your previous strokes. In TBS, when you are in Draw Top Layer mode, each brush stroke of the same color merges into the same color strokes below as they touch each other, which allows you to build up your strokes and make great thicks and thins. This technique is fast and with a bit of practice you will swear it is like using real ink. In TBS you want to be sure you have the Tools>Draw Top Layer function toggled on for clean up inking. When you ink your clean ups, focus on your Wacom pen as if you were applying real liquid ink with a fine brush and paint on the thicks and thins with several passes over the line.

Sometimes It Just Isn’t Working

Using keyed frames to animate in TBS is a great way to get the illusion of motion using fewer individual drawings. A few drawing when properly manipulated along with the camera can produce some very entertaining things. But sometimes after you have been working on making and adjusting a whole series of keyed frame actions you just aren’t happy with the results because it just isn’t working like you wanted it to move or the shot is just not right. We all have been there. Unfortunately by that time using the undo command is no longer a good option. Now one tip and a most useful command is to right click on that keyframe you just don’t like, being sure you have selected the appropriate scene planning tool to target the type of attribute you want to change, and from the context menu select remove keyframe. But sometimes you just get to the point where the more you change things the worse it gets. That’s when you want to use a different approach and select remove all keyframes. Yes, it seems a bit drastic but sometimes starting over clean is faster then trying to “patch up” a mess of keyed frame parameters out of control.

Cell Selecting, Swapping, and Reuse

Toon Boom Studio has an excellent cell swapping function. For any drawing element you can use the Cells tab on the Properties panel to select and swap cells. You can use a slider to scan through all the cells of that element until you find the desired cell or you can enter a cell's name in the text box to select your cell. The selected cell is swapped in place of the current cell for the selected frame or range of frames in the time line.



As stated above the Properties panel Cells tab is great for doing cell swapping but, it has a couple of drawbacks that need to be observed. First, when you are on a specific frame and you scan through your existing element's cells, it automatically swaps the current cell in that frame for the cell that is visible in the Cells tab preview window. That's good and bad. Good because it is fast and bad because it loses track of the cell that was previously there and if you change your mind, you have to go and find that previous cell. If you have a large number of cells in your element the search process can be slow. Also if you created your cells using a fairly random numbering scheme then knowing where to look in the list, which is numerically ordered, is more difficult. But the swapping capabilities are excellent otherwise.

Here is a trick we use. Open the Library panel and navigate to Animation>Scene for your current scene and select the element you want to utilize. Then in the Library display window you can view all the cells for that element at once. Turn on the View>Thumbnails and you have a fast easy visual way to pick your desired cell. Then when you go to the Cells tab of the Properties window you just type in the cell number of that cell to place it on your desired frame or frame range in the time line. This works extremely well for elements which contain more than a few cells.



Or an even easier way is to use the copy to current frame context menu command directly from the Library display window. Select the desired frame in the time line, select the desired cell in the Library display window, right clicking to open that context menu and select copy to current frame.

So for things like swapping mouth positions you can use the Cells tab on the Properties panel, or for general selecting and placing of cells for reuse the Library panel may be even easier.

Using Pegs as Timeline Track Folders

This is the first in our Toon Boom Studio User Tips Series. These are just quick posts that highlight how to use a specific feature, or tool in TBS. Sometimes they will just hopefully clarify existing information and other times they may introduce a totally new way to take advantage of a TBS feature.

For anyone who has to deal with a large number of tracks in their timeline panel, I am sure you appreciate the addition of animated elements in TBS V3.5. With the addition of animated elements, which are drawing or image elements that contain their own wholly integrated peg element track, you can now greatly reduce the number of element tracks displayed in your timeline. In most cases, you no longer have to include a separate peg element track in order to keyframe animate your drawing or image elements. This is a great improvement in reducing clutter in your timeline panel.

But even with this improvement, it can still be quite a challenge to manage all the element tracks that can end up populating a scene's timeline panel for a complex animation. So one of the tricks for reducing timeline track clutter is to use a concept similar to file folders. Anyone familiar with document management on Windows or Mac computers is use to organizing things inside file folders. So wouldn't it be great to have track folders as an organizational device to assist in grouping and hiding multiple timeline element tracks. "Great", you say, "but this is TBS and we don't have a timeline track folders feature". Well you are correct, we don't have a specific timeline track folder feature, but we do have those wonderful multipurpose elements called pegs. Now pegs are quite useful as containers for keyframed values and you also can use pegs to group elements together to create hierarchical templates, but there is even an additional way to utilize peg elements as timeline track folders. When you have a large number of element tracks in your timeline and you want to reduce your clutter just add a peg element track. Rename it to some meaningful name like "Peg Folder_1" or whatever makes sense in your scene. Then move this peg to a desired position in your timeline track label listing and attach those tracks, which you want collected and organized together, to this "peg folder" . You aren't going to do any keyframing on this "peg folder" but you can expand or collapse it as needed to expose or hide the attached tracks and therefore you have tamed the clutter of track elements in your timeline label listing.



A few well thought out and placed "peg folders" can make working with a large number of tracks in your timeline much easier and faster and reduce the constant scrolling through all those tracks. Hope you find this a helpful tip.