Toon Boom Fundamentals - The Basics Part 2

This is the second in a series on the fundamentals of animation and using Toon Boom Studio. If you have not previously read Toon Boom Fundamentals - The Basics Part 1 you can do that now or after you read this installment. In part 2 you will be introduced to some fundamental concepts of animating and animation production. You will learn about the major work areas in Toon Boom Studio and get a better understanding for why they exist and why they are separated. You will also get some very enlightening insight into the make-up of the animation stand and how analogous Toon Boom is to photographic animation production. I've discussed this previously in other articles but I expect some "light bulbs" of creativity will turn on for many people after you read this latest presentation. We are covering a lot of material in part 2 so be sure to take advantage of the navigation features of the slide shows and flip back and forth as you read and follow the material presented.





If you followed the presentation in that first slide show, you should now begin to appreciate the different purposes of Drawing View (your drawing board) and Camera View (your multi-plane animation camera stand). Those concepts will take on even greater significance as you read through this next slide show presentation. Even if you consider yourself a Toon Boom veteran, there should be some "slap your forehead" moments of understanding coming your way.



I hope that by following that slide show you are beginning to understand the direct analogy between how Toon Boom works and how real world photographic animation used to be done before computers replaced the physical art work and animation camera stand. You should now be making the connections between physical cells and "cells" created in Toon Boom. And you should be beginning to understand that key framing is just controlling how a cell is displayed (photographed) and it doesn't alter the cell itself but rather just changes how the cell is positioned and oriented with respect to the "camera". Key framing is just Toon Boom's method of adjusting and setting specific knobs and dials for controlling it's own multi-plane animation stand. When you are key frame animating, you are making cell display adjustments to be used when a specific frame of your "film" is being "photographed". Anyone slapping their forehead yet?

There have been plenty of concepts introduced in the second installment of Toon Boom Fundamentals. You should now have a new level of appreciation for the purpose of Drawing View and the totally different purpose of Camera View. You should also begin to have a whole new point of reference when you are thinking about the use of key framing when you are putting together a movie. We will continue to explore and expand on these and other concepts in the next installment, part 3 .

You might want to go back and re-read some of the prior articles in the Learning Track listing. Armed with the new ideas you just got from this article, they may be even more informative than when you originally read them.

For those interested, the two background prop drawings of the tree and the log were created in SketchBook Pro 2010 . In fact the drawing of Myron was also created in SketchBook Pro. It is a great complementary drawing program for cartoon making in Toon Boom Studio. I hope you enjoyed this article and learned some new things too.

Toon Boom Fundamentals - The Basics Part 1

This the beginning of a new "Basics" series for Toon Boom Studio. I plan on covering in detail many of the fundamental concepts of working with TBS in this series. In this Part 1 you will learn about some of the differences between "image" elements and "drawing" elements. You will learn how to import images into "image" elements and also how to import images into "drawing" elements. You will learn how to use the "set exposure" command to adjust and tweak the timing of an animation sequence. And you will learn how to cut up and animate your imported images. It is a very detailed tutorial and after you have read through it once or twice you are encouraged to actually do the work yourself because that's the best way to learn. I've included a download of the images I used at the end of this tutorial.

While doing some research on another project, I came across this great series of boxing poses. I don't remember the name of the artist who made these images but I knew they would make great imports for a TBS animation tutorial.




I imported the original image into Photoshop and cut out each pose, placed them on to transparent backgrounds and saved each one as a PNG formatted image file.

In the first slide show we will import those six PNG files into a TBS "image" element and create an animation sequence. Then we will adjust the timing of that sequence to learn more about how to use the timeline in our animating.



If you followed along through the first slide show then you now know how to import image files into a sequence in an "image" element. You know how to slow down the overall animation by adding more frames to the sequence and you know how to use the Set Exposure command to adjust and tweak the timing of your animation sequence.

Next we will learn how to import the same image files into a "drawing" element into what is called a "vector box". Then we will cut up and separate the boxers into different "drawing elements".



I hope you followed everything in that slide show. If so, then you now know how to import the image files into "drawing elements". You have learned to use the import and vectorize with textures command to create "vector box" versions of your images. You learned to use the Reposition All Drawings tool to scale and flip and move all the cells in a "drawing" element at the same time. You also learned how to cut the boxers apart and put them into separate elements so they can be animated independently.

Next we will separate the shadows from the boxers similarly to the way we separated the boxers. Then we will set the rotational pivot points for each element and then we will use keyframing to animate some additional action.



It is a really simple animation sequence and I left you plenty of creative room to experiment on your own after you work through the basic tutorial. I hope that you learned a lot of fundamentals both about animating in general and animating in TBS in specific. Here is the BOXING file to download, unzip and import when you work through the tutorial. As always I'm available for answering questions either directly via e-mail or here on the blog or at the discussions area of the Cartooning in Toon Boom WIKI or over at the Toon Boom Studios forums.

We will cover some new ground next time in Toon Boom Fundamentals - The Basics Part 2. Until then, I want to give a special "Thank You" to all of you who have "Donated" to help support the creation and publishing of these articles and tutorials. And for those of you who find real value here but haven't yet "Donated", please keep us in mind. Your support is very important.

Animating Cut-Out Characters - Part 3

Here is the long awaited part 3 of my series on animating cut-out characters. I apologize for the delay. If you have not read Animating Cut-Out Characters - Part 1 or Animating Cut-Out Characters - Part 2 previously then I suggest that you do so before proceeding here.

We are doing a pose to pose approach of keyframe animating a character walking. By pose to pose we mean that we layout important key boundary poses first, often referred to as extreme poses. Then we go back and fill in between those extreme key poses additional key poses, and then we go back and fill in more in between poses until we are satisfied with our animating of the walk. An alternate approach is to animate straight ahead which is how I did the walk for my Animating a Cut-Out Character in Toon Boom tutorial. Either approach is valid and useful and quite frankly a combination of the two approaches is more natural. Pose to pose sets up the basic animation and straight ahead is great for tweaking and smoothing.

A question that often arises about the work flow of keyframe animation is "why do you not want the segments between keys to automatically be set to non-constant segments as you lay down the keys?" The answer is this is a personal choice and TBS is designed to work either way. I believe that tweening while setting keys interferes with my seeing the work evolve during flipping or onion skinning. Automatic tweens are defined by the keys on each end of the segment. So they don't really exist as a pose, they just reflect other poses which can be confusing. If we were hand animating we wouldn't see those final inbetweens while laying out our main poses so having automatic tweening turned off is just a more natural way to animate.

Most of the instructions and the actual resulting movies are contained in the slide show so take your time, navigate using the Previous and Next arrows provided and backtrack through the slides as needed to follow along. As always, read the tutorial all the way through a couple of times and then do the work on your own as that is the only way to learn. Don't be afraid to experiment and expect to make a mistake or two as you go. We all learn from our mistakes, hopefully.



I hope you enjoyed this tutorial series and learned some new skills. If you have questions or comments be sure to communicate them to me either at the Toon Boom Studio User Forums, The Discussion Area of The Cartooning In Toon Boom WIKI, or directly via e-mail or use the comments section here on the blog.

Animating a Cut-Out Character in ToonBoom

This is the third part of our new tutorial series on creating and animating cut-out characters in ToonBoom Studio. If you haven't read Building a Cut-Out Character in ToonBoom or Rigging a Cut-Out Character in Toon Boom previously, I suggest that you do that before proceeding here.

Perhaps the most difficult aspect of this type of tutorial is the extensive complexity of the steps involved in performing key framed animation. I'm going to try my best to show you the most significant steps and to provide you with some helpful guides to assist your work. It isn't that difficult, but key framed animation is tedious and requires that you take your time and be very aware of what you are doing and how your are working. And just because you are not making individual drawings, key framed animation is still animating, so not only does it involve knowledge of using the software it also requires animating skills just the same as if you were hand drawing the animation. So you still have to deal with poses and timing etc. It takes practice, so let's get started.

I'm providing HERE a download of a SWF file that you can import into TBS to use as a pose guide for this animation. It will help you in positioning and posing the bird and in laying out the first thirty frames of the bird walking. So this first slide presentation will show you how to import the SWF into your project. If you download the ZIP file be sure to unzip it and remember where you put the walk0.swf file so that you can navigate to it in the file dialog when asked.







You can do that SWF import now or later when you are actually doing your animation. It is strictly provided as a aid to setting up the poses for the bird character. If you want to do your poses without using the guide that's a personal choice. I didn't have it when I did the animation myself, but then again I have done plenty of character walks in my career, so I just used my past experience to create the poses. In any case we will begin animating in the next slide presentation. My approach is to animate in multiple passes. So the first pass will be to get the basic walking animated and then in future passes we will refine the walk by adding movements of other body parts. Also I'm using what is termed as a straight ahead approach. Instead of doing certain key poses first and then doing inbetween poses, I'm doing each pose in sequence. You can key frame animate using either approach. I felt it would be easier to follow by showing the animating straight ahead style.





The first pass roughed in walk


Fig. 1 The timeline for our second pass of the walk where we animate the tail

After we have completed animating our rough walk in the first pass we are ready to go back through the timeline and make a second pass. This time we will just focus on animating the bird's tail feathers to add to our existing poses. We will leave "bird-P" expanded and we will just select the tail track label. Then we can step through the frames using the [S] key to move ahead to the next frame and the [A] key to move back to the previous frame. All animating is done using the scene transform tool (7). Remember in a walking motion the bird's rear end (tail feathers) will probably move up and down opposite the main weight shifting of the bird, sort of a counterbalancing motion.


The second pass walk with the tail movement added


Fig. 2 The timeline for our third pass of the walk where we animate the wings

After we have completed animating the tail movement in the second pass we are ready to go back through the timeline and make a third pass. This time we will just focus on animating the bird's right and left wings to add to our existing poses. We will leave "bird-P" expanded and we will just select the appropriate wing's track label. Then we can step through the frames using the [S] key to move ahead to the next frame and the [A] key to move back to the previous frame. All animating is done using the scene transform tool (7). The idea behind doing multiple passes is that it allows us to focus on small details. We are really trying to add some personality to the rough walk. Remember in a walking motion arms (wings) move counter directional to legs.


The third pass of the walk with the wing movements added


Fig. 3 The timeline with non-constant segments added between the keyframes.

After we have completed animating our third pass we are ready to go back through the timeline and set non-constant segments between each keyframe on each element. This is just like having an assistant animator make inbetween drawings between each of our pose drawings. This "tweening" step adds a degree of smoothing to the walking movement. Many animators will stop after this step but it all depends on what you are trying to accomplish. All setting of non-constant segments is done with the scene transform tool (7) actively selected on the tool palette which insures that tweening is applied to all types of keyframe parameters. (location, scale, rotation, skew) The easiest way to make these tweening settings is to collapse the "bird-P" peg and set the segments between the keys on that main character peg letting the settings just reflect down to all the "hidden" children elements.


The fully tweened version of the bird walking

That completes this installment in our series on building, rigging and animating a cut-out character in ToonBoom. In the next part of this series we will see how to remove the "tweening" and adjust and tweak the walk to make it even better.

Rigging a Cut-Out Character in ToonBoom

This is the second part in our new tutorial series on creating and animating cut-out characters in Toon Boom Studio. If you have not read Building a Cut-Out Character in ToonBoom previously, then I suggest that you take time to do that now.

In the first part of this series we imported the black bird character into TBS. We outline the character using the drawing contour tool. Scaled the drawing to fit inside our 12 field guide. Then we cut out many of the bird's body parts and distributed them on to separate elements and then re-positioned them using our original drawing as a guide. We are almost finished with the cut-out phase of the building process, but we have a few more body parts to create before we can begin the rigging phase.






The previous slide show took us through creating the left wing and the left leg for the bird character. That completes the cutting out process for this tutorial series and we are ready for the next phase which is rigging the cut-out character for animating.

Note: You might be thinking " why not do additional parts for animating this bird like separating the pupil from the head so we can move it, or separating the lower beak so we can animate his mouth?" The answer is we certainly could have done that, but I chose not to because I wanted to leave you some future challenges for going off on your own when you finish the tutorial as presented. My goal is not just to show you step by step how I did something, but rather to inspire you to understand the steps so that you can expand that understanding to do your own work and to experiment with TBS further.

So let's get going with rigging this black bird. Rigging is a term used to describe the setting up of the control hierarchy of the cut-out character. It includes the ordering of the body part elements, the assigning of parent-child control relationships, some special 3D space adjustments of appropriate body parts, and the locating and setting of pivot points to provide more natural movements.



That wasn't too dificult. We had to re-order some of our track layers and make some grouping selections and drag and drop labels to attach children elements to parent elements to create a control hierarchy. And we had to take advantage of 3D space to bump some body parts forward or backward in the display planes to compensate for changing the natural layering order of our track labels while constructing the hierarchy. Then we determined the locations of pivot points that would provide more natural movements when we start animating the bird. Of course the rigging does require some advanced planning and understanding of how we will be using the particular cut-out character. Things like breaking the character into two groups in the hierarchy to allow him to bend above the legs and positioning the wings so that when they move they don't get in front of or behind other body parts. It takes practice and experience to spot some of these potential issues and you, like me, will occasionally have to go back and adjust a rig design when you hit a problem during animation. That can be painful if you don't find it upfront before doing a lot of animating work, so I always try to test a rig by trying to make lots of poses with it for practice before I really start significant animating work.

Note: One sage observation on character design and rigging, don't assume that you can build an all inclusive layout or rig to cover every possible situation. Be prepared to build many rigs which are designed to address specific animating needs. Over complicating a rig to be all purpose makes animating more difficult and frankly never works as well as doing specialized separate rigs for specialized needs. Changes in points of view (profile, perspective, front, and back views) require separate cut-out character rigs so be prepared to build more than one rig for a character that you plan to animate extensively.


That concludes the second part of this series. We have taken a single drawing, cut it up into body parts, and constructed a hierarchically controllable rig for our cut-out character. Next time we will begin animating this bird character using key framed animation. Animating a Cut-Out Character in ToonBoom

Building a Cut-Out Character In ToonBoom

This is the first part of a new tutorial series on creating and animating Cut-Out characters in ToonBoom Studio. Based on e-mails and comments which I have received as well as many postings on the Toon Boom User Forums, I have determined that there is a significant number of people who really want to see a detailed step by step tutorial style approach to this subject. I've written several previous tutorials on Photo Cut-Outs and Animating Cut-Outs and I hope that the lessons I have learned from doing that will help these next tutorials to be even better and more comprehensive.

NOTE: Thanks for all the comments and feedback and questions, they help me to better understand what works and what to improve in my communicating and presentation. So keep up your end too, and keep asking questions and making comments.

Just prior to this tutorial series, my most recent tutorial on Keyframing the Bouncing Ball was intended to isolate and simplify a complex subject. I hope that it has been helpful. One of the tools I introduced in that tutorial was the use of embeded slide show style step by step instructions. I'm expanding on that concept in this series. The slide shows serve two important needs. First they allow the presentation of significant amounts of information in a small footprint on the web page and secondly they allow the reader to move back and forth easily through complicated detailed instructional steps.

This series will follow the steps of constructing a cut-out character, rigging that character and animating that character. It will lay down, hopefully, a solid foundation for even more detailed tutorials expanding further into this subject. So let's begin a somewhat ambitious journey together. It all starts with a single drawing.



Fig. 1 A black bird character done with pen and ink

Above is a photo of the drawing on my drawing table. Yes, an actual hand drawn, old school, piece of cartoon art work. Does your cut-out character have to be drawn this way? No, you could draw it on your computer in some graphics software or even inside ToonBoom Studio itself. I wanted to do it this way for the instructional value so that we can explore the steps from scanning in a drawing to animating the character on that drawing.

I was looking at this drawing in my studio, it is part of a character design study on which I have been working. And while looking at it day after day for a period of time I realized it would really be fun to animate this black bird. So I scanned it into Photoshop and saved it as a GIF formatted image. I did absolutely no editing of the scan other than scanning it in at 300 DPI resolution. So you don't need Photoshop or any special software just draw your character and scan it into your computer to get it into an image file. (GIF, JPG, PNG etc.) I'm providing this image HERE as a download for you to use to follow this tutorial. By the way, read the tutorial and then re-read it and actually do it yourself. The only way to learn to animate in TBS is through doing it. And when you run into a problem and need help I'm here to respond to your questions on the ToonBoom User Forums or you can e-mail me directly or through the discussions area in the Cartooning in ToonBoom WIKI.

Let's get going with the first slide show. Use the Previous and Next arrows to navigate through the slides. They are packed with information so take your time and backtrack as often as you need.





If you navigated through the first slide show, you now have the bird character imported into your TBS project on a drawing element named "Scanned Image". The next slide show will take you through the steps to outline the character using the contour tool in drawing view. NOTE: If you prepared your drawn image in Photoshop with a totally transparent background and saved it as a PNG, you would not need to do the contour tool outlining steps. But I wanted to do the bulk of the work on this in TBS so I didn't do any special prep in Photoshop on purpose.




If you read completely through that last slide show then you now have your character outlined using the contour tool and even scaled down to fit within your 12 field grid. Next we are going to make a duplicate of our character cell and begin the process of cutting out body parts and placing them into individual elements. The basic rule of cut-out design is "any part, that you want to be able to animate separately from any other part, must be placed on its own unique element."




If you have stuck with me this far, then you have taken your character drawing and imported it into TBS. You have outlined the character image with the contour tool and scaled the outlined character down in drawing view. Then you duplicated the cell that contained the outlined character so that you could cut parts out of that duplicate cell. You have cut out the head, right wing, right leg, the tail and the body of the bird and placed each part on to a seperate element. And then using the first cell of Scanned Image as a layout guide you have used the drawing select tool to re-position the cut-out body parts over your uncut outlined light gray character.

Note: One important tip in building a cut-out character is to have the character layout as close to identical in both drawing view and camera view. For this reason, be careful to avoid using the scene select tool (6) in the building process. Do all of your drawing object transformations (scaling/re-locations etc.) using the drawing select tool (1) even in camera view. That way when you finish building your character it will look the same in both views and more importantly it will be much easier to work with when you start using the character for animating. More on this later.

That's quite a bit. Next time we will create and add a few more body parts to the character and then build a hierarchal rig that will allow us to easily animate our cut-out character. Part 2 Rigging a Cut-Out Character in ToonBoom

Keyframing The Bouncing Ball

In this tutorial, I am going to guide you through a step by step approach to creating a classical animation exercise, the bouncing ball, using the keyframe animation tools of Toon Boom Studio. Even if you're not really excited about creating this basic animation practice exercise, I hope you will find this tutorial very informative in that it uses a relatively simple animated action to demonstrate the very important and often misunderstood techniques of using keyframes and "tweening" without ending up with an action that looks like it was done by the software and not animated by a person. In other words I'm going to show you how to use "tweening" as a helpful step in the process and not have your work end up looking "tweeny".

If you are unfamiliar with the basics of key framed animation in Toon Boom Studio, before you continue here, I highly recommend that you take the time to read the 5 part series I previously wrote starting with Key Framed Animation Part 1 .

The tutorial will unfold as follow:
1. Creation of assets (cells) for a ball, a ground line, and a reference guide.
2. Switch to "camera view" and begin setting primary keys for the action.
3. Pass 1 refinements of inbetween frames converting some tweens to keys.
4. Pass 2 refinements of inbetween frames converting remaining tweens to keys.
5. Revising the spacing of the keys to improve the action.
6. Adding in squash and stretch to improve the action.
7. The final results.


(fig. 1: Cell da-1)

We are going to start our bouncing ball animation by first creating a drawing element and creating one cell drawing in that element. We will name the element "da" and the one cell will be named da-1. This cell will be our ball. It is drawn in the center of the grid using the ELIPSE TOOL and filled with the PAINT TOOL. Once the ball is filled with color, you will want to select its outline and delete it so that all that is left is the inner paint filled zone in the shape of a ball. To get a perfectly round circle for your ball you can hold the "shift" key while drawing your circle. I actually just do mine visually because I prefer my ball not being exactly perfectly round.


(fig. 2: Cell dc-1)

We can't animate a bouncing ball without a surface on which it will bounce, so next we need to create a second drawing element which will also have just a single cell drawing for the ground. It's basically just a thick black line, cell dc-1.


(fig. 3: Cell db-1)

Now we are going to create another drawing element which also will have one cell drawing. This third drawing element, named "db", is going to act as a visual guide for our bouncing ball. Don't confuse this with a motion path or a motion guide. It is just a drawing of the path we want to use to describe the falling and bouncing of our ball. It is a visual animator's reference only and won't be included in the final animation movie.

With our three drawing elements created and our three cell drawings made, we are ready to switch from "drawing view" to "camera view" and start keyframing our bouncing ball action. The first thing you have to do is to decide on the amount of time you want to use to show this action. I set my example up using 32 frames for the bouncing action and I had to decide on which frames I would have the ball contact the ground and on which frames I would have the ball reach the top of its rebound. I created a simple timing diagram as a guide for my animating. Frames 1,12,21,and 28 are my top of the bounce rebound frames and frames 7,17,25, and 32 will be my ground contacts. One of the fun aspects of animating is that you can try your own ideas for timing your own action, so my choices are just that, my personal choices.

So now that you have your three drawing elements each containing a single cell at frame one, you will need to use the EXTEND EXPOSURE command to extend that one cell's exposure for each track out for 32 frames.

You will really only need to use one keyframing tool in this process. It will be the TRANSFORM tool, keyboard shortcut key (7). This is often referred to as the "universal" keyframing tool because it is used to set keys for location, rotation, scaling, and deformations. Any time you select an object with the TRANSFORM tool active you will see a selection bounding box with "hollow" un-filled grab handles. Any time you move, rotate, scale, or deform the selected object, using this TRANSFORM tool, TBS will automatically set or update the appropriate key framed values for the current frame. So for example if the current frame for the selected object is a "tweened" frame, it will be converted into a keyframe.

NOTE: Be careful not to use the SELECT tool (6) which has a bounding box that looks similar but has solid filled grab handles. The SELECT tool is not used for setting any keyframes, it is only used to set static scene level parameters. ( refer to Key Framed Animation for more details.)

AUTHOR'S NOTE: I have included five embedded interactive slide shows in this tutorial. You can follow the animation process by viewing them and navigating through their slides using the Next and Previous arrows in the upper left corner of the graphics.


(fig. 4: Step by step slide show #1 )


(fig. 5)

Above is the timeline as it looks after you have set those eight initial key frames. Notice that there are connecting lines displayed between the keyframe markers. These connecting lines indicate that the segments between the keyframes are non-constant segments which is the same as saying that TBS will generate the inbetween frames which is referred to as "tweening". TBS can be set up to always create non-constant segments when you set keyframes or it can be set to always create constant segments and you will then manually have to designate when you want a connecting segment to be non-constant. I discussed this in the previous series on Key Framed Animation.

Above is the bouncing ball animation created with just the eight tweened keyframes. It leaves at lot to be desired, as you can see. The ball isn't following the arc guide but rather it is moving in a straight line from key position to key position. And it is moving at a constant velocity which means that the spacing between frames is exactly the same for all frames. (more on spacing later)

Your next steps in doing the bouncing ball are first pass refinements. You are going to select certain inbetween frames which are currently "tweened" and replace them with keyframes that better describe the path you want the ball to follow. One helpful hint at this point is to edit the color you used to make the ball and lower its opacity to about 33% which will make it appear transparent and make it easier to see through it to position it along your visual guide arc. When you finish all of your animating you can set the opacity back to 100% before publishing the final movie.


(fig. 6: Step by step slide show #2 )


(fig. 7)

Above is how your timeline will appear when you have finished your first pass refinement and added 7 more inbetween keyframes.

Next you are going to do a second pass refinement where you will convert the remaining 17 inbetween frames into keyframes. This will result in the ball bounce following your chosen guide arc exactly. It still has a constant velocity but we will address that soon.

(fig.8: Step by step slide show #3 )


(fig. 9)

Above is how your timeline will look when you finish converting all the "tweened" inbetween frames into keyframes.


Above is the bouncing ball animation as created from our 2 revised keyframed passes. It is now following the guide arc nicely and we are now ready to refine the velocity of this action. To do that we will adjust the spacing between frames. The timing of the action is determined by the number of frames. But the changes in the speed of movement are adjusted by increasing or decreasing the amount of change between frames. We refer to this amount of change between frames as the spacing. The closer the spacing, the slower the speed of the movement appears. While the farther apart the spacing, the faster the movement appears. Forces in the physical world cause objects to accelerate and decelerate as opposed to just moving along at a constant velocity. Also in the case of a bouncing ball, the energy stored in the ball deceases after each ground contact which is visually seen by the decaying arcs between ground contacts.



(fig. 10: Step by step slide show #4)



Above is the animation of the bouncing ball after we have adjusted the spacing between the frames. It now bounces with a non constant velocity. It speeds up and it slows down as it moves down and back up etc.

We are almost done, but we still can improve on the bouncing ball by adding in squash and stretch. Squash and stretch are the natural deformations that the ball experiences due to external forces and things like gravity and the ground. The ball will compress or squash as it contacts the ground and it will elongate or stretch as it accelerates into a contact or out of a contact. One important trick associated with squash and stretch is that the volume of the object should be held constant even when deformed. The object does not shrink or expand it just deforms. (Really exaggerated animation does not always follow this guideline but that's just to produce a humorous cartoony effect.)


(fig. 11: Step by step slide show #5 )


(fig. 12)

Above is how your timeline will look when you finish animating the bouncing ball animation. Notice that you will un-check the tracks for the guide arc and the spacing marks so that they are not included in the final movie. Also at this time you will want to return the opacity of the color of your ball to 100%.


Above is the final movie of the bouncing ball action. I added some extra frames at the end to allow for a slight roll to a stop from the last contact. You can play with the timing and the spacing of your own version of this bouncing ball and you can learn a lot from seeing the results of those experiments.

Hopefully you are beginning to understand how to use keyframing and tweening. First off, you should appreciate that you must decide the basic timing and spacing of any action. The software can help you to test out your ideas, but it can not really replace your skill or experience as the animator. If you set a few keys and "tween" the rest you will just get "tweeny" looking results. The best technique is to start with the basic tweened results and then step wise refine the action replacing the tweens with adjusted keyframes until you get a proper look to your work. Comments are always appreciated and I'll do my best to answer any of your questions here or on the TBS User Forums.

Animating Cut-Out Characters - Part 2

In our last tutorial / article, Animating Cut-Out Characters - Part 1 , we learned how to copy a library template into our project and how to manipulate the character's arm to begin to pose the Little Boy. If you missed reading that article, now would be a good time to stop and do so.

For Part 2 in our series we are going to use the Toon Boom Studio supplied cut-out character Der Der. The Der Der cut-out was created and rigged in version 3.0 of TBS and there are some differences between its rig's appearance and usage and that of the Little Boy character. The major difference is that prior to version 3.5 there were no pegs integrated into drawing or image elements. Therefore each body part element was required to be attached to a parent peg element for keyframing. Later style rigs that take advantage of the integrated pegs are easier to use because you don't have as many tracks in the timeline, but also as we progress through this tutorial, I will point out other considerations.



We need to create a new project in TBS and set our animation properties for 24 FPS. I always try to animate at 24 FPS because it is an industry standard for timing and it is best to learn to time your animation work at a consistent frame rate.

We open the library and in the catalog list we go to the TOON BOOM TEMPLATES catalog and then to the CUT OUT CHARACTERS sub-catalog where we will find the DER DER RIG template. As we did in Part 1, we want to click and drag the template from the library to our SCENE 1 timeline. The template will be fully expanded when we copy in the template. Our first task will be to prepare the template for animating. So we need to collapse the character's master peg DER_DER_rig.



The Der Der character was created as an example of how to construct a cut-out character and the template has a number of features set up that we want to change because they are not the way we want to get started in animating this character. The first thing we will do is to go to frame 1 of the collapsed master peg and right click to open the context menu where we will select the SET CONSTANT SEGMENT option. We don't want tweens created yet while we are keyframing. Also if you don't have CREATE CONSTANT KEYFRAMES set up in your PREFERENCES do that now also. (explained in Part 1). Also go to your TOOLS menu and select the TURN PEG ONLY MODE ON option. Because we are doing pose to pose keyframing you do not want Snap Last Keyframe to be selected. (revised for V4.5) By now it should also go without saying that because we are key frame animating, you need to be in CAMERA (compositing) view.



Now we need to move the red frame slider to the last frame of our master peg, frame 20, and we will again right click to open the context menu and this time we select the REMOVE KEYFRAME option. Then we want to expand the master peg to see all the tracks in the timeline.



In this particular rig there are four drawing elements that have multiple cells set up for replacement animating. Left_pupil, Right_pupil, Eyes, and Mouth are those multi-cell elements. We want to set them all to just a single cell. So to do that we will adjust each of them one element at a time. Let's start with the mouth drawing element. by selecting all the frames from frame 2 to frame 20.

IMPORTANT NOTE: pegs are blue, drawing elements are green and pegs end with a -P identifier in their track name. As you will see shortly, great care needs to be observed to pay attention to which elements are pegs and which ones are drawing elements. We keyframe on pegs and we do replacement animation on drawing elements. (this is one of those old style rig VS new style rig considerations).



With the frames from 2 to 20 selected in the timeline for the mouth element, we look in the CELLS panel and see the current cell for frame 2 which is Mouth-b. Notice that the range of selected frames is showing as 2 thru 20. Even though there are other cells in some of those frames the CELLS panel displays only the first of the frame range's cell names.



Frame 1 has Mouth-a as its exposed cell, so we want to set the frames from 2 - 20 to also have Mouth-a for their exposed cell. We can type in the letter "a" in this case for the drawing or we can just move the cell swap selection slider until Mouth-a is the current selected cell.

We will repeat this process for the other multi-cell elements, Left_pupil, Right_pupil, and Eyes. Our goal is to have all of our drawing elements be the same element cell for all 20 frame exposures in our character rig.

You may have noticed that in my project's timeline there is an additional element named drA. As I said in Part 1 you still will often want to do some rough hand drawn animating as part of doing cut-out animating, particularly for the key poses. So I have a rough walk cycle with just the main key poses timed out in drA which we will use as a posing reference. You don't have to have this kind of reference but it helps.

Download drA as a compatible template for either Version 3.5 or Version 4.0. Open your library panel and import the downloaded template to your Global library using the context menu by right clicking in the catalog content pane and selecting IMPORT>IMPORT TEMPLATE FILE. Then you can drag a copy of the drA template to your project's timeline.



Looking in CAMERA view we see our character Der Der is not facing the same direction as our first pose in frame 1 nor is he the right scale size.



We will select the scene ops SELECT tool (6) and select the Der_Der_rig master peg in the timeline. Then we will look in the PROPERTIES panel where our selected peg's properties are displayed. These are static properties.



We will set the value of the second box for the Scale to negative which will flip the character horizontally. If you had set the value in the first Scale box to negative you would have flipped Der Der vertically. (This is a handy tip for changing an object's screen orientation, but be careful to remember that these are static properties and this is not how you flip characters if you wanted to do it dynamically through key framing. For that you would use the scene ops TRANSFORM tool (7) and not the PROPERTIES panel settings)



Now we have Der Der facing the correct direction but he is still too large so we need to scale him down to size. We are going to scale the entire rig and all its elements and not just for a single frame so we use the scene ops SELECT tool. We want to have the master peg Der_Der_rig selected and collapsed in the timeline. (Remember to watch for the solid bounding box handles for the SELECT tool and the hollow handles for the TRANSFORM tool ).



We will hold down the SHIFT key as we click and drag the upper right corner grab handle diagonally toward the center of the character to cause Der Der to get proportionally scaled smaller.



Once we finish scaling the character, we will click and drag him into position over the top of our hand drawn first pose reference where we can begin manipulating the rig to pose our character. To do that we will expand the master peg to make all of the rig's elements visible in the timeline. Then as we learned in Part 1, we will select the scene ops TRANSFORM tool (7) and use it to manipulate the character's body parts.

CAUTION: make sure that you only keyframe on the peg elements for Der Der and don't select the drawing elements by accident. If you forget and select a drawing element you will have to use UNDO to fix the mistake. Again, please note that this is an old style rig to new style rig, Version 3.0 to Version 3.5 and above consideration. Der Der's drawing elements don't have their rotational pivot points set for keyframing but because you are using V3.5 or V4.0 the drawing elements have integrated pegs and thus you can set keyframes in them which is not what you want to be doing for animating Der Der.

Be sure your red frame slider is positioned at frame 1. Which body part you choose to manipulate first is a personal choice. I typically start with the legs and work my way up to the arms. As we discussed in Part 1, you can move parts and then move other parts and just keep adjusting the pose until you are satisfied it is pretty much the way you want it. It doesn't have to be totally perfect as you can always come back later and adjust it as we will see in Part 3. When you finish manipulating Der Der into the first pose, collapse the master peg and with the scene ops TRANSFORM tool still selected use the keyboard short cut key " I " to set a keyframe. This locks down that pose for all elements in the rig from top to bottom.



Here is a great tip for using a reference drawing for setting poses for a cut-out character. In the properties panel for the drA element I have the element TYPE set to "background" which means that the element is visually behind all the "normal" type elements in Der Der's rig.



But to help see the reference more clearly while working you can go to the PROPERTIES panel and switch the drA element's TYPE to "foreground" which will pop it on top of Der Der. You can then switch the drA element's TYPE back and forth between "foreground" and "background" as you work to see it better or get it out of your way as needed.



With our frame 1 pose finished we are ready to do a second pose. We are going to animate Der Der using the pose to pose technique. When animating a walk cycle I do the contact poses first. So our second pose is at frame 16 and is the repeat of the first pose except that it is in a different location on the screen. Before we can create this pose we need to add a parent peg to the Der Der character for the purpose of animating his forward motion. We want to separate the forward motion from the actual walk cycle motion so that we can reuse the walk cycle itself later in other scenes or projects.



We will collapse the master peg for the Der Der character and select it in the timeline. We then click on the icon for adding a parent peg. (see the photo above)



Once the new parent peg is added to the Der Der character we want to rename it to forward-P. We will only be keyframing Der Der's foward motion on this peg while all his walking motions will be keyframes on his character rig pegs. So with the forward-P peg expanded and selected and the Der_Der_rig peg collapsed, but visible, we will select the scene ops MOTION tool (0) and move the red frame slider to frame 1 and press the keyboard short cut key " I " to set a motion keyframe. Then we move the red frame slider to frame 16 and set a second motion keyframe.



At frame 16 we see the position of our second pose. We still have the forward-P peg selected and the MOTION tool is still selected. We click and drag the Der Der character while holding down the SHIFT key to constrain his up and down position until the character is on top of our reference pose. You could also have used SHIFT plus the RIGHT ARROW key to make this move.



When you have the pose lined up over the reference pose, select the collapsed Der_Der_rig peg, and select the TRANSFORM tool (7) and using the context menu or the keyboard short cut key " I " set a keyframe at frame 16 to lock down the pose. Don't forget to do this because if you do forget and start changing keyframes down stream on any previous frame, they will effect frame 16's pose.



We are ready to do the middle contact pose for our walk cycle which is on frame 9. So we select the MOTION tool (0) and we select the forward-P peg and move the red frame slider to frame 9 and using the context menu or the keyboard short cut key " I " set a new motion keyframe at frame 9. Then we use the SHIFT key and click and drag the character into position over our reference pose.



The character's pose is not correct for the middle contact position so we need to re-pose Der Der to match the reference pose.



We do this exactly like we did for the first pose using the TRANSFORM tool to adjust the body parts for Der Der. Remember to be careful and only keyframe on the peg elements and not on the drawing elements of Der Der's rig.

So at this point if we turn on ONION SKINNING we can see the first two poses which are opposite contact poses. And we can also see the second and third pose which are also opposite contact poses.

Our next steps will be to create the three poses between frame 1 and frame 9 as seen by our reference drawings above.

And we also need to create the three poses between frame 9 and frame 16. So that's where we will pick up in Animating Cut-Out Characters - Part 3. We will also then begin doing the additional in between poses to smooth out our character's walk.

Animating Cut-Out Characters - Part 1

Introduction
This is the first in a series of tutorials about creating and animating “cut-out” characters. I’m going to try my best to be as in-depth as practical, so be patient, as my goal is to provide a definitive series on “cut-outs”. I plan to balance basic conceptual understanding of the subject with step by step “how to” guidance.

Initial Concepts
First, I want to clearly define what I mean by a “cut-out” character. A “cut-out” character is a character that has a multi-element hierarchy to create movable joints. Additionally a "cut-out" character will consist of replacement parts that can be swapped. Thus with the "cut-out" character we will combine articulation of jointed body parts with the replacement of body parts to create the illusion of movement.

In creating a hand drawn cartoon character we must consider how we will be animating that character. There are two fundamental approaches to producing hand drawn cartoon animation. There is the “full” animation approach and the “limited” animation approach. The “full” animation approach is to redraw the full character in its entirety for each frame that changes as we create the illusion of movement. The classical “limited” animation approach is to separate the character into layers and only redraw those layered parts that change in a frame while "holding" the unchanged layers. A common misconception is that the “limited” approach is a less skilled approach to animating then using the “full” approach. This actually is not the case. It requires every bit as much animating knowledge and skill to do classical “limited” animation, but it can reduce the amount of labor required to produce the final animation by reducing the amount of drawing needed. So the “limited” part has to do with drawing efficiency.

“Cut-out” animation in Toon Boom Studio is based on the “limited” animation approach and can be used to produce animation with even less drawing needed than classical “limited” animation. But again there is a common misconception that it requires less animating skills than fully drawn animation. It may not require as many drawing skills but it requires significant animating skills just the same. And even though it requires less drawing skills it requires even more skills in the areas of planning, construction and software usage. So don’t assume just because you are substituting a cut-out character for a fully drawn character that it is easier to implement. Successful cut-out animation is a highly skilled approach to animation production. Cut-out animating is not less skilled animation, it just uses different skills and places different emphasis on the animator’s skill sets.

For our purposes in this series we are primarily focused on “cut-out” characters to implement a form of “limited” animation. Where possible we will look at creating posable and animatible digital puppets, but at the same time we will also talk about replacement animation and the planning and reuse of drawing assets. Certainly there are styles of characters that lend themselves to more puppet-like construction and other styles of characters that really don't. Depending on the character style we may need to use a combination of both techniques. In fact, if you are familiar with stop motion animation techniques, you will realize that we are going to really end up designing our characters to be a jointed articulated puppet and we will also want to use replacement pieces for different character parts as well. Our goal is to produce the illusion of movement and we will do that sometimes using articulated joints to produce changes between images and other times we will change the drawing itself for certain body parts.

Getting Started
A sequential approach to working with cut-out characters might be:

1. Establishing a character concept.
2. Selecting design options based on the character's expected performance requirements. (performance is a theatrical term associated with acting)
3. Drawing a series of character poses and views.
4. Cutting the character up into parts.
5. Laying out the character parts in elements.
6. Rigging the character for animating.
7. Testing and Enhancing the character rig.
8. Animating the cut-out character.

But sometimes learning and mastering a complicated new technique isn't easiest when approached along the ultimate sequential work flow. A common mistake by new cartoon makers is to start trying to create and construct a cut-out character before they have a fundamental foundation in cut-out animating technique. We actually want to start at the end of the work flow, animating the cut-out character, and then we will work our way back to the creation of our own cut-out characters.

The Rigged Cut-Out Character
We will start by opening a new project in TBS and opening the library view panel. The library is divided into catalogs and those catalogs are divided into sub-catalogs. We want to go to the Toon Boom Templates catalog and find the sub-catalog named Cut-Out Characters. Inside that sub-catalog there are two character rigs. We will be using the character named Little Boy. (note: the Little Boy character is included in TBS version 4, if you don't have version 4 yet, then you can follow along using the Der Der character from version 3.5. The fundamentals are the same, and I will be careful to point out any variations in technique created by software usage changes.)

If for some reason you don't have a Toon Boom Templates catalog in your TBS library, you can get this catalog by just right clicking in the catalog listing pane to open the context menu and select the menu option to Reload Default Templates. That will restore the factory set default templates while not disturbing your other library catalogs or assets.



In order to use the Little boy character we need to click on his template in the library panel and drag it to our scene 1 time line. You want to drag the template label across to the time line track label pane and drop it at the top of the track label list. (You will see a "plus" icon (+) displayed when it is OK to drop the dragged template.) When we release the mouse button at the end of our drag we see the character's hierarchy of elements displayed in the time line track label list.



If you are not familiar with the time line and how it displays a hierarchy of elements, then this is a good time to spend a few minutes getting acquainted with it. Elements can be connected into hierarchical relationships where their behavior is controlled by their location in the hierarchy. Elements can be parents of other elements or children of other elements or they can be siblings (brothers or sisters) of other elements. A child element is influenced by its parent, a parent element is not influenced by its children. Siblings stay together based on the influence of their common parent. As we proceed, these relationships and their interactions will become obvious. The character hierarchy can be collapsed or expanded as needed and we will explore the advantages of doing both as we progress. For the moment we will fully expand the character's hierarchy to allow us to discuss some aspects of cut-out characters in general.



People and other animals are jointed. In fact the whole nature of articulated movement is based on joints, and even the fact that certain joints operate differently from other joints. Your shoulder joints, for example, have a different range of motion from your elbows, and your hip joints have a different range of motion from your knee joints etc. So, thinking about of how to construct a cartoon character to have articulated body parts and joints is to mirror nature.

If we go back and look at early cartoon character designs in the 1920’s and 1930’s they were actually very unnatural and based on “rubber” hose style limbs. That wasn’t an aesthetic choice as much as it was a practical design choice because those style limbs are much easier to animate than anatomically correct limbs. Disney artists in their efforts to create a more natural and realistic brand of cartoons quickly abandoned the “rubber” hoses in their characters. (Except in the case of Mickey Mouse, who was and to some extent still is drawn with "rubber" hose limbs.) Observations of natural organic movements quickly reveal that they are based on expansions and contractions of muscles under the character’s skin. Those observations made during the 1930s by Disney artists were the beginning of the application of squash and stretch in character animation. The character’s bones and joints provide the support structure as well as impose limitations on movement while muscular actions contort the shapes of body parts. “Full” animation captures these muscular expansions and contractions, while “limited” animation usually abbreviates them and often just ignores them for the most part for the sake of production efficiency.

Jointed characters have to be planned around their natural breaks. These natural breaks are how we subdivide the character into component parts and they usually fall on actual joints like shoulders, elbows, knees, ankles, hips, neck ect. Breaks are points of articulation but they shouldn’t be visually obvious. If you don't want your characters to look like hinged “cut-outs” then you need to plan and design with break camouflage in mind. (We will explore breaks and joint construction in future parts of this series)

The whole foundation of limited animation is based on holding the position of some body parts while changing the position of other body parts. This means we will want to separate our character into multiple parts and then each of those parts can then be held or changed as desired to produce the movement. So certainly the degree of granularity, that we decide to use to subdivide our character, is going to be a primary design decision. The more granular the subdivision, the more parts into which we will have to separate the character and potentially the more flexibility we will have in moving the character. But with greater flexibility comes greater complexity, more parts to account for in our animating, so we will have to weigh the cost of the flexibility we might gain against the extra work involved in managing a more complex character. Any body part that will need to be animated independently of all other body parts should be separated on to its own element layer. But we must evaluate which body parts truly need to be independent to satisfy our animating needs because that produces increased complexity. One part of that evaluation is the trade off between producing motion through articulation, the physical repositioning of body parts, and producing motion through drawing replacement. In many cases it isn’t always one way versus the other but actually a balanced combination of using both methods based on how we want to implement a movement. (We will get more into this discussion in future parts of this series.)

For now you should just look at the granular division of the Little Boy character and make note of how he has been constructed. Characteristic of cut-out characters he has a top parent peg element called the character's main peg or master peg. Then he has subdivisions of an upper and lower body, usually called torso and hips. Then these subdivisions are further divided into logical articulation chains. Notice the parents, their children and the various siblings in this character's hierarchy. (Again, there will be more discussion of this in future parts of this series)



It's time to get started animating the Little Boy, so we need to make a few settings to assist us while we work. The template has some "tweening" included that we don't want at the moment. So we need to remove any non-constant segments. (If you are not up to speed on keyframed animation I highly suggest that you read Keyframed Animation Part 1 through Part 5 to insure you have a solid foundation before proceeding.) We want to select the scene operations transform tool and make it active and make sure your main view panel is set into camera view. Keyframing is always done exclusively in camera view and never uses drawing view. We start off by collapsing the character's master peg. Remember that when a parent peg is collapsed it not only hides its children's track labels, it also causes any actions that we apply to the parent also to be applied down to all its children. We select the collapsed master peg track and move the red frame location slider to frame 1 and we right click to open the context menu and select the menu option Set Constant Segment. The lines in the time line track that were connecting the first and last key frame in the keyframe pair are no longer showing which indicates that this is now a constant segment and if we expand the master peg, we will see this is now true for all its children tracks.



We also want to go to Preferences and make sure that we have checked the boxes shown in the above picture of the Scene Planning tab, particularly the Create Constant Keyframes setting. When working with animating a cut-out character it is best to not have TBS automatically create non-constant segments between keyframe pairs. We want to set all our segments individually as we animate them. So the default should be for no "tweening" which means constant segments.


One more setting before we get going. We need to select the Turn Peg-Only Mode On (M) menu option under the Tools menu. This is a visual aid that helps us to not mistakenly select drawing objects when we are wanting to select pegs in camera view.



Cut-out character animating is done by posing the character in each frame using the scene operations tools, mostly the Transform tool (7). Notice that the Transform tool bounding box and the Select tool (6) bounding box look very similar in camera view. Visually the difference is that the grab handles are unfilled squares for the Transform tool and filled squares for the Select tool. Learn this distinction well as it will save you much grief in the future. These tools are very different in purpose and usage so don't be fooled by their similar displays. The Select tool is used to set "element" level parameters. The transform tool is used to set "frame" level parameters. As a general rule, you never want to change element level parameters once you start keyframe animating. Changes in element level parameters after you start keyframing can totally and unexpectedly alter all of your animation work and can be disastrous. Your only clue that you have the wrong tool selected is those filled grab handle squares. If your animating and see them, they are shouting to you "stop!! danger do not proceed!!".






Before we start animating the Little Boy we might want to observe how his rotational pivot points have been preset. As part of the rigging of this character the designer used the Rotation tool (8) to position the "green" circle for each part and hierarchical grouping so that they would rotate around that point to insure more natural movement. Because this is an already rigged character, we will not need to worry about setting these pivot point locations. But it is important to note that rotational pivot point locations are "element" level settings and just like my previous warning about not changing "element" level settings after you start keyframe animating, don't change the location of rotational pivot points after you start keyframe animating, as the results can be unexpected and disastrous. If for any reason you need to use a different pivot point while keyframe animating, you can move the "blue" circle pivot point that is showing with the Transform tool bounding box. That pivot point is temporary and will only effect the transform setting as long as the current transform selection is active. Again this is a very important distinction that you should learn early or you will experience the consequences.



The template came set with eight frames so we want to extend the timeline out to twenty frames just to give ourselves some additional animating room. With the character's master peg collapsed and selected we move the red frame location slider to frame twenty and right click to show the context menu and select the menu option Extend Children Exposure... (this is a new command in version 4.)



We also want to go back to frame 8 and select Remove Keyframe to get rid of that last keyframe that was also part of the template. Don't worry about making changes to a template once you drag it into your project time line. The original template in the library is not linked and therefore will not be changed in any way. (Warning: don't select Remove All Keyframes as that would be disasterous and totally destroy the character's rigging settings. Aren't you glad I'm pointing out the mines in this mine field before you get "blown" up.)



Finally we can start animating. So we will begin with a first pose for the Little Boy character. This is the natural pose of the template so we will just use it for our first pose in this example movement. We are going to animate the character's left arm. Our first pose is at frame 1 so there is nothing to change on frame one.


We will set our second pose for this example at frame 8. So move the red frame location slider to frame 8. Double check that you have the Transform tool selected as the active tool. Watch for those unfilled squares on the bounding box. Now you can visually try to select the character's left arm in camera view or you can select the track label in the time line track label list. I prefer the track label selection approach as it is easier most of the time. We want to select the track labeled "little_boy_l_up_arm".

You need to get use to being very focused and aware of your actions when animating a cut-out character. Before you move the character, always be sure you are working on the frame you want, always be sure the correct scene operations tool is selected and active, and always be sure you are setting keyframes on the element track that you want. This is a very important aspect of cut-out animation to understand, know where you are, what you are changing and how you are changing it before you change anything. And take your time, rushing causes mistakes and mistakes can multiply and get out of control quickly. ( I will try to show you how to undo most mistakes when you realize you have made them in a future part of this series, but fixing mistakes can waste a lot of time so it's better to move carefully and minimize the careless mistakes.)



Notice that in camera view once we select the track label, the character's left arm is highlighted by the Transform tool's bounding box. We can rotate the arm by using the bounding box's rotate handle and dragging it counter clockwise to raise the shoulder. (note: that a change in version 4 now allows us to rotate the transformed object from any of its corners and not just using the rotation handle. In version 3.5 you still need to use the rotation handle.)


That repositioned the boys shoulder and upper arm, but we also want to move his lower arm position. Notice that because the lower arm and hand are children of the upper arm that they moved with the upper arm. But we have the ability to move them individually as well. There relationship to the upper arm is enforced as part of the relational hierarchy. So now we select the track labeled "little_boy_l_arm". This will let us just move the left lower arm and its child, the left hand.




As you can see we can bend the arm naturally because of the way the character has been constructed and rigged. It is important that you begin to see that we are fundamentally posing a puppet. We can move the various body parts one at a time to get just the pose we want. Sometimes we will move a part like the upper arm, then we will move the lower arm and decide that the upper arm position needs to be re adjusted. This kind of iterative back and forth adjustment of parts is typical of posing a cut-out character.



We can select and adjust the position of the left hand the same as we did the left upper arm and the left lower arm.



So now we have two poses for the Little Boy character. We are only focusing on his left arm to keep this example simple. His arm is positioned in pose one on frame 1 and is positioned in pose two on frame 8. If we looked at the animation at this point the arm would appear to "jump" between poses abruptly. So we want to smooth out the motion by adding incremental inbetween poses at frames 2,3,4,5,6,and 7. We could do these by hand just like pose one and pose two, but there is an easier way to proceed. We can use "tweening". We can select all the tracks for the Little Boy's left arm, move the red frame location slider to frame 1 and use the context menu option Set Non Constant Segment. This will generate the inbetween arm positions. The tracks show the line displayed between keyframes to indicate a non-constant segment.



The picture below shows you the character poses. The two poses I set, and the six poses that TBS generated to inbetween my two poses. Now computer generated inbetween poses are a great time saver but they are usually just a starting point and most animators will fine tune and adjust those poses manually. ( In a future part of this series we will see how to fine tune and adjust the inbetweens generated by TBS.)

Click on the picture to see an enlarged version



The last thing we want to look at in this first part of the Cut-Out series is the replacement parts included in this template. They are for the mouth and the eye brows. We aren't going to do any swapping of parts yet but I wanted to point them out for you to notice and study before we get to Part 2.




We have covered many fundamentals in Part 1 and we have learned basic rig manipulation to set a partial pose with the character. Next time we will learn to animate a full sequence of motions. Animating Cut-Out Characters - Part 2

A Text Scrolling Technique In Perspective

As frequently happens, this tutorial was inspired by a question on the Toon Boom Studio User Forums. The question was "is it possible to do a perspective style scroll similar to the Star Wars opening title sequence using TBS?" So here is a brief tutorial showing one possible technique that will give you that effect. I also included some applications of the TBS Color Transform Effect in animating the text. You can view the final movie first and then come back and read how to create this effect.

The Sample Star Wars Style Perspective Text Scroll
(click on this link to watch the movie)

To start, of course we need a new animation project. And the first thing we will need is to create a drawing element for the classic opening text "a long time ago in a galaxy far far away....". Now I need to put my usual reminder in at this point. It is the technique that we are discussing here and the technique is practical and usable by itself. All text and images used in this tutorial are just here to demonstrate this technique. You can use any text and images in your own work and how you name your elements in your own work is your personal preference. You can adopt my naming conventions or not as you so choose.



The default drawing element in TBS projects is named "drawing 1", so you could leave it that way. I am going to rename it to "a" because I typically name my drawing elements as alphabet letters. To do this I select the timeline track label for this element and right click to get the context menu. I then select "Rename Element".



A dialog opens and I can change the name from "drawing 1" to "a" and click the "OK" button.



To make the text on my first cell, I select the "text" tool from the drawing tool palette.



I select a font style and size and just type in the desired text (all personal preferences). I centered this text on my field guide, but in scene planning I'll adjust its size and location as desired using the scene planning operations select tool (6).



I want to have a "fade in and fade out" for this opening text in my movie so I will do this using a color transform effect. I will add this element by clicking on the "+" icon at the top of the timeline.



I use the pull-down menu on the element type box to select "Color Transform Effect".



A new track label appears in my timeline track label list and the default 20 frame color transform effect shows in the time line. I am going to select that transform effect and drag it to line up with the first frame of my "a" drawing element which is frame 34 in my example. This is a repositioning of the start of the color transform effect in time. I also named the color transform effect "ca", which is my standard way of naming color transforms to match the element they will control. I will also drag the "a" element track label on top of the "ca" element track label to "attach" the child to its parent.




I want this "fade in and fade out" effect to run from frame 34 to frame 120, so I grab the end of the color transform and drag it out to frame 120. I'm not repositioning the effect this time, I'm stretching its duration.



I now select the track for element "a" and move the cursor to frame 120 and right click to get the context menu. I choose "Extend Exposure" to add "hold" exposures for cell a-1 from frame 34 to frame 120.



Now I select the "ca" color transform effect and move my frame slider to frame 34. I want to set a key frame here to initialize this transform. I want my text to be "invisible" to start the effect so I set the Multiplicative Alpha value to 0 (zero). This makes the text totally transparent.



I move the frame slider 25 frames to frame 58 and add a new keyframe to the "ca" color transform. This time I want the text to be totally visible so I set the Multiplicative Alpha value to 1 (one). This make the text totally opaque. I'm also going to do a color change during this "fade in" just to show you how to do that as well. So at frame 58 I also change the Additive values for Red, Green and Blue. My text on cell "a-1" was set to "black" originally which is R=0, G=0, B=0. So I want to get a yellow color by adding 255 to the red value and 215 to the green value. I'm not setting the end RGB value numerically, instead I am creating that end value by adding an offset to the initial RGB value. The color transform effect will gradually animate this color change between frame 34 and frame 58 along with the fade in from transparent to opaque. The transition is linear. I control how long the transition takes by the number of frames between keyframes.



To create the "fade out" part of the effect I move the frame slider to frame 96 and add a keyframe to the "ca" color transform. I don't need to modify any values on this keyframe, I'm just initializing the start of my "fade out". The reason I need this initial keyframe at frame 96 is to control when the transition of the "fade out" begins. I wanted a period of time between the end of the "fade in" and the beginning of the "fade out" where nothing changed regarding this text. (frames 58 to 96 is the equivalent of a constant segment)



I want to finish my "fade out" at frame 120. So I just need to set the Multiplicative Alpha value for the "ca" color transform effect to zero. To "fade in" I went from transparent to opaque and to "fade out" I'm going from opaque to transparent.


Cell b-1

Now I need to create three new drawing elements for my scrolling text. The number of elements is a function of what I'm trying to accomplish. I basically decided that I would do a separate element for each paragraph of text so that I could individually "fade out" the paragraphs as the text reached "deep space". If all I was doing was just the scrolling without individual "fade outs", I could have just used a single element for the text.


Cell e-1


Cell h-1

One trick that I employed in creating my paragraphs was to use different font sizes for each paragraph. The top paragraph is 36 pica. The second paragraph is 46 pica and the last paragraph is 48 pica. The idea is that things closer to you in perspective are larger than things farther away, so as the text scrolls away in perspective the relative size of the text in the paragraphs helps the visual effect. I also made sure that each successive line of text was longer that the previous line as well as centered on the previous lime which also enhances the perspective look of the scroll. (kind of like visual vanishing point lines converging)



Before I begin animating the actual scrolling of the text, I added a "space" background. This could easily be just a black matte. I happened to have a library template of a space background that I used in a previous tutorial (Using A Subtractive Animation Technique) so I included it here just to dress up the final movie.



The picture above shows how my final timeline track label list will look. Each text paragraph drawing element is attached to a color transform effect for its individual fade out into "deep space". Each drawing element and its color transform are attached to a parent peg and the three paragraph parent pegs are all attached to a top level peg that will actually control the scrolling of the text. The background is at the bottom of the list along with the opening title drawing element with its attached color transform from the opening "fade in" and "fade out" effect.




As I mentioned earlier, I will initialize the size and location of the text paragraphs prior to animating the scroll in scene planning view. I use the scene planning operations select tool (6) to do this. You can get a good idea of the relative size of the text with respect to the camera view frame prior to starting the scroll by looking at the picture above.



Click on the image above to see a larger view

To animate the scroll, I'm going to use the scene planning operations transform tool (7). I collapse the top level parent peg, "Peg 4" in my timeline track label list. When you collapse a peg it not only hides the children elements attached to that peg, it also lets you set keyframes on all elements in a ripple down. A perspective scroll requires the text to scroll up across the screen while it is moving away from the viewer. If you viewed the scroll in terms on 3D space it is a diagonal plane sloping up away from the viewer. We construct this using the top and side view panels. I'm going to be scrolling from frame 126 to frame 720, so I will stretch the duration of "Peg 4" from frame 126 to frame 720, then I right click to open the context menu and select "Extend children exposure" to make sure that I have exposures for all attached elements for the entire scroll duration. We begin by setting a keyframe on "Peg 4" at frame 126 . This is the initial frame for starting the scroll. The scroll lasts until frame 720 so that's where we will also set a keyframe on "Peg 4". Remember the transform tool (7) is actively selected before I set any of these keyframes. Once I set the keyframe at frame 720, I'm ready to reposition "Peg 4" in the top and side view panels. The frame slider is sitting on frame 720. I start in the side view panel and drag the red circle for "Peg 4" up to the top edge of the side view angle. As I do this I can see the text in camera view move across the screen vertically. Then I go to the top view panel and drag the red circle for "Peg 4" back away from the view point in the view angle. As I do this I can see the text getting smaller in the scene planning camera view panel. I now have a vertical slant visible in my side view panel. It may take you some playing around in these two panels to get the effect that you want. It just takes a bit of practice moving things in the top and side view while watching the camera view to see the results. I just need to set the segment between the keyframes on "Peg 4" at frame 126 and frame 720 to non-constant and I'll also use the function editor panel to set the velocity curve for this non-constant segment to the standard ease-in ease-out curve. See Key Framed Animation to refresh your knowledge of these concepts of segments and function curves.


Click on the picture to see a larger view


Click on the picture to see a larger view

Now that I have my text scroll done, I just need to do the "fade outs" for each text paragraph. I position my color transform effects at the desired starting frames for each paragraph and stretch their durations for the length of the effect as desired (all personal preferences).



The initial setting of a "fade out" is opaque so we set the Multiplicative Alpha value to 1.



The final setting of a "fade out" is transparent so I set the Multiplicative Alpha value to 0 (zero) on the last keyframe of the color transform effect. I have to repeat this process of setting the values of the color transform effects for each of the three text paragraphs in my example.

The Sample Star Wars Style Perspective Text Scroll
(click on this link to watch the movie)

As you can see this effect is probably more complicated to explain than it is to create. So give it a try, I hope you learned a new trick or two.

Key Framed Animation Part 5

Please be sure to review Key Framed Animation – Part 1 and Key Framed Animation – Part 2 and Key Framed Animation - Part 3 and Key Framed Animation - Part 4 before you continue with this final part of this series. You can also review the demonstration scene .

In Part 3 we constructed the underwater environment for our demonstration scene. In Part 4 we created the swimming cycle for our fish and we animated his swimming into the scene using a motion guide. The storyline calls for Filbert, the fish, to tread water briefly after he reaches mid-scene before he reacts to seeing the shark. To accentuate the surprise factor of this scene we have determined in the storyboards that animating the camera is appropriate at this time. In a cinematic scene we may stay within a common setting but the use of multiple shots or view points is useful in adding to the storytelling. We are going to move in close on Filbert before he reacts and then after his reaction fills the screen, we will “hard cut” back to a reveal shot of the source of his panic.

In order to animate the camera we need to attach the camera element to a peg element, the easiest way to do that is to use the “add parent peg” icon at the top of the timeline track label list while we have the camera element’s track selected. Once the camera is attached to a parent peg, which is named Camera-P a standard naming convention for a single element parent peg, we need to go to frame 1 of Camera -P and make the transform tool active and set our initializing keyframe. This is to lock down our starting characteristics for the camera. It is always a good practice to set a transform group of keyframes on the first frame of any peg to initialize the peg. This is true for separate peg elements or integrated pegs on image or drawing elements. Next we will move to frame 671 on the Camera-P peg and add a second key frame being sure the transform tool is still active. Again prior to starting a camera move it is advised to lock down the end of any previous shot. We will start out trucking in shot on frame 672. We need to make the motion tool active and set a motion keyframe. The camera’s point of view at frame 672 is the beginning of our trucking shot.

(click on to enlarge)

Next we need to move to the ending frame of the shot at frame 710. With the motion tool still active we need to set a key frame. Now we can execute the shot by selecting the end of the motion path at frame 710 and dragging it to position our camera view point to the ending view of this shot. I usually do this in Top view first while visually watching the view point change in Camera view. I may, and usually do, make additional adjustments by dragging the end of the motion guide in the Side view as well.

Now that I have "trucked in" to the ending position of this shot, I need to go back to frame 672, the beginning position and on the Camera-P peg, I want to set the segment between frames 672’s motion key and frame 710’s motion key to be a non-constant segment. I set my TBS preferences to always create constant segments on my pegs as I prefer to set my non-constant segments manually when needed. Be sure you still have the motion tool active when setting this segment to tell TBS you are setting a motion key segment. The solid line between the motion keyframes indicates the segment is now a non-constant segment.

(click on to enlarge)

Below you can see the motion paths with their corresponding spacing indicated in both the Side and Top view panels. I left the velocity function as the default even spacing because this is a really short duration move and it works well that way. Had it been a longer move I probably would have used an ease-in ease-out velocity function.

(click on to enlarge)

Filbert's screaming reaction starts at frame 723. I animated this similarly to the way I animated his swimming cycle in drawing view by drawing the various cells to create the scream. So now I just need to insert that element and these cells into the timeline starting with frame 723. I need to be sure to have the select tool active before I start trying to position this Filbert screaming element. The hardest part of keyframe animation is making sure you always have the best tool selected for what you are trying to do. You have to be paying attention to your active tool or you can make inadvertent mistakes really easily.

The shark is also animated as an element in drawing view and I have placed his swimming cycle into the time line but he is currently off camera because we are still "trucked" in tight on Filbert.

At frame 770 on the Camera-P peg I want to set a new motion key, so I have to make the motion tool active. I add a keyframe and reposition the camera’s view point to the "reveal" of the shark. I want this camera shot to be a “hard cut” so I will leave the segment between frame 710’s motion key and frame 770’s motion key as a constant segment.

(click on to enlarge)

This causes the shot to “snap” from the "trucked in" close up to the reveal shot when the movie reaches frame 770

Now it is time to have Filbert make a strategic retreat. Actually he is going to “zip” out of there for his life!! Things will happen so fast that I can save myself a lot of work by just reusing the same swim cycle I used earlier in the scene. I made it a template, so reusing it is just a matter or dragging and dropping it from my library to the timeline.

It is just one 12 frame cycle. Now you might be wondering why I used a second instance of the swimming template rather than adding to the time line of the first instance I used at the beginning of the scene. That instance has static values I applied to it to position and flip the fish. If I just advance the timeline for that instance and repositioned Filbert with the scene planning select tool so that he was facing the opposite direction it would be a global change and mess up the first bit of animation I made. It is just cleaner and easier to reuse the template as a new series of tracks just for this short “zip” off.

So, I place Filbert swimming into the scene starting at frame 795. I use the select tool to scale him to 50% but I don’t need to flip him horizontally this time. Using the transform tool I put a starting and ending keyframe on his main character peg just for good measure and I selected the 12 frames with the main character peg collapsed and copied them. I moved to the end of the cycle and pasted them using “paste special” to extend the exposure of the first cycle to a second cycle. This second cycle will totally never be seen but I wanted the extra frames to help with my “zip” motion. Now I will attach the second instance of Filbert swimming to a peg element which I added and named “Zipaway”. This is going to be my motion guide. I collapse the Zipaway peg and make the motion tool active and go to frame 795 on the Zipaway peg and set a motion key. I then move to frame 819 on the Zipaway peg and set a second motion key. I move the motion guide's end to position Filbert off screen using the Top view and Side view to get the desired location. Then I return to frame 795 on the Zipaway peg and with the motion tool active, set the segment between these two motion keys to be a non-constant segment.

(click on to enlarge)

I want the spacing for this "zip" action to be different from the default even spacing, so I need to create a different velocity curve from the default linear velocity curve.

With the “Zipaway” peg selected in the timeline, I open the function editor; I have the function editor set up as keyboard short cut key “J” which makes opening and closing the panel really convenient. I first need to select "velocity" as my function because this is a motion segment. If it had been a scale segment I would have chosen H-scale or V-scale, for a rotation segment I would have chosen Rotation, and for a skew segment I would have chosen Skewing. They are all used to set the spacing for the “tweening” just for different attribute types. I zoom in on my frames for this segment and using the "reshape" pull down at the top right corner of the function editor window, I chose a fast out/in curve shape. I’m not interested in the end of the motion’s spacing because it will be off camera, but the beginning spacing is important to getting the desired action. I want the in betweens to be farther apart as the beginning to add speed to the action.

(click on to enlarge)

I added a special effect with bubbles in element " Bubbles 3" to give the "zip" an extra impact as Filbert is really stirring up the water as he makes for cover. That’s pretty much it for this scene. I certainly hope that this series on Key Framed Animation has given you a sound foundation on keyframing and how to use this technique in animating. There are plenty of additional aspects to key framed animation but those are for future articles.

Above is a view of the track label list with pegs mostly collapsed but I wanted to show you the tracks that were the same template reused twice as well as the motion guide peg elements.

Key Framed Animation Part 4

Please be sure to review Key Framed Animation – Part 1 and Key Framed Animation – Part 2 and 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 compositing 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 5

Key Framed Animation Part 3

Please be sure to review Key Framed Animation – Part 1 and 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.