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?

NOTE: I have to give myself a quick promotional plug. The turtle character seen on that example cell in the last slide show is Myron a featured character in my upcoming web comic strip "Bug Pudding". If you want to follow this comic strip's pre-production and development progress and eventually follow the comic itself then start following me on Twitter at Bug Pudding . If you don't know what Twitter is, well it is a form of social networking for people with really short attention spans. You can also follow me personally on Twitter at JK_TGRS .



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.

Creating A Custom Color Palette

Recently there was a question asked on the Toon Boom Studio forums pertaining to having a "web safe" color palette. This question was referring to a standard set of colors that works with most browsers and client hardware on the Internet. Now I'm not a website designer, so I won't venture into discussing the merits of only using these "web safe" colors for your cartoons, but the question did prompt me to want to write a brief tutorial showing how easy it is to build a custom color palette in Toon Boom Studio. There could be many more articles and tutorials written here about the great color management system in TBS, so this may just be the first of many to come in the future.



We will start building our custom color palette by navigating to the "color palette" panel in TBS. If you are using V3.5 or lower you will find this panel as a tab on the "properties" panel set. In V4.0 this panel can be seen as a separate panel depending on how you set up your workspace layout. The first thing we need to do is to select "New Pallet" from the name drop down box.




This creates a new palette and it gets the name "New 1" by default. We want to rename this palette to something more meaningful. So we will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Rename Palette".



This opens a dialog box where we can enter a name for our new palette. In this case we will name our palette "Web Safe" to indicate that it will contain our set of "web safe" colors.



Now that we have named our new color palette, we go to the initial color in that palette, which is currently named "Default", and we double click on that color swatch to open a color edit dialog panel. I'm working on a Mac so this is the OSX standard color picker dialog, but other than a slight difference in the appearance of this color picker with the standard Windows PC color picker the process is identical.



The color editor dialog has an external color selector, on the Mac it is a little magnifying glass icon while on the Windows PC it is an eye dropper icon. (not to be confused with the eye dropper tool included in the TBS drawing tools). This external color selector is used to clone a copy of any color that you choose by dragging it over the top of that color anywhere on your display and clicking to select it.



In the picture above I have started to drag the external color selector from the color edit panel.



For this tutorial example I'm using a "Web Safe" color chart as my color source. I could use any source of color that can be seen on my display so it could be almost any graphic or photo etc. I have included a link to a full size version of this "Web Safe" chart at the end of this tutorial for those interested in building their own set of web safe colors. I just drag the external color selector over the top of the desired color and click on it to clone it to my color edit panel and to my currently selected color palette swatch. How easy is that?!



Now that I have my first color selected, I can edit the color name as desired. I changed "Default" to the color name from the web safe chart for this color which is "330000". That's a personal preference, I could have just as easily named it "dark burgundy" or whatever .



That's all there is to capturing a color swatch to your custom color palette. So next I click on the "+" sign icon to add another color swatch to my palette. I then double click on that new swatch to open the color edit panel and I use the external color selector to clone my next color exactly as I did before except I selected a different color from my "Web Safe" chart.



I rename the newly added color and then repeat the process to add another color swatch and clone in the next color from my "Web Safe" chart.



As you can see I am filling my palette with the colors from the "Web Safe" chart. The order in which I add the colors is a personal preference. And this process works for building any color palette set of colors not just one of "web safe" colors as I'm doing in this example.



When I finish building my new custom color palette, I want to save it for reuse in many future TBS projects. Right now it is specific to the project in which I am currently working. I want to "export" my "Web Safe" color palette. We will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Export Palette".



This opens an export dialog panel where all my current project color palettes are listed and I can check which ones I want to export and the destination of where I want them saved on my system. I have a Toon Boom Studio directory with a Palettes subdirectory on my system but that's just a personal preference. That's all there is to exporting and saving a custom color palette, which you can now access and use in future TBS projects.



It is very easy to import a custom color palette into a new project. We just go to our color palette panel and we click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Import Palette".




This opens an import dialog where we can select the desired custom palette we want to import into our TBS project.

As I mentioned earlier there is a great deal more information pertaining to all the uses of the Toon Boom Studio color management system so check back for future articles and tutorials.


Click on this chart to access a full size version.

Thumbnail Planning Technique

In this tutorial I'm going to show you some basic animation planning using thumbnail drawings to work out an action. This particular action is a cartoon style run which is an exaggerated interpretation of a normal run.

Examples of animation are often presented as highly finished pieces and there is a misconception that the animator started with the final version that is shown. I more often than not have to work through several stages before I get to a satisfactory final animation. One of those stages is a planning and visualizing stage where I like to do thumbnail drawings to work out the major aspects of the action. So in this tutorial I want to demonstrate this part of the creative process as it has evolved thanks to having software like Toon Boom Studio to facilitate the work. Thumbnailing for planning and visualizing is a traditional approach in animating but it has evolved beyond just doing a page or two of gestural drawings due to the ease in which we can quickly produce test movies using software. These visualization stages are actually lots of fun, so lets get started.



Now here is a trick that I'm often surprised is omitted in many explanations about animating an action. I suppose it is thought to be obvious, but maybe it isn't. If you are going to animate a character walking or running etc, you need to establish a reference to the ground. In this example it is as simple as a straight line, but it is critical, otherwise you don't have a way to relate the character's movement to the surface on which they are moving. This sequence is mostly a side view for simplicity sake, but references become even more important as the perspective of the scene increases in complexity.

Once I have established my ground plane, I usually will add some rough motion guidelines. In this example I added a vertical motion line because a cartoon run is not just forward motion, but it also has a significant up and down component. Here is an important tip: notice my vertical guide is not symmetrical. It is intentionally asymmetrical. Why? Because symmetrical is mechanical and not organic and it is also boring. Cartoons are fun and they should be a reasonable interpretation of the natural world which is rarely symmetrical. I'm going to use this guide as I layout and draw, but I'm going to also be flexible and I will vary from the guide if I find it too restrictive.



This ant character which I'm using is a thumbnail representation of a character. Thumbnails often aren't much more than glorified stick figures, in any case thumbnails are not highly detailed or intended as final work. The idea is to workout and visualize the major aspects of the action, but to do it as simply and quickly as possible. I don't want to invest a lot of time in my drawings at this stage because I may try many different approaches to working out the action and I don't want to waste time unnecessarily. But don't assume that just because it's not elaborately drawn, that this planning step isn't important or valuable. If I get this right the next steps in the animation process are infinitely easier.

I started out with an element for my ground plane consisting of a single cell that I will expose for the duration of this action. I have a second element which will also be a single cell for my vertical motion guide line and also exposed for the duration of the action. (Not to be confused with a motion guide used in key framed animation, this is just a visual guide) I also have a third element which will be made of multiple cells which I will use for my lines of action. (more on that in a minute) and I'll have a forth element which will also be multiple cells where I'll draw the actual thumbnails of the character. As this is a tutorial exercise and not a real scene for a project, I'm not restricted as to the total number of frames I will need for this action but I want the run cycle to be about 1 second long at 24 FPS so I'll shoot for doing it in about 24 frames.

For each pose drawing my first step is to draw a line of action for that pose. (the red line in the drawings) I've talked about the line of action before in other articles and I can't stress how much more fluid and dynamic your drawings will be by starting with this gestural stroke. I also want to stress that the line of action of a pose should not be thought of in isolation but rather as part of a rhythmic sequence of connected poses that evolve into the action. I usually go through the entire action in a first pass and just draw lines of action and flip through the sequence over and over to get a nice rhythmic flow. It's very spontaneous and emotional and I want to try to capture the energy of what is happening without being bogged down with lots of specific details. (more on the TBS flipping technique)



I'm going to be animating on 1's because this is a fast run so even though I'm showing the odd numbered poses here, there will be a different pose for each frame in this sequence with the even numbers being filled in later as inbetweens. I'll draw the odd poses first and then I'll do the evens using onion skinning. (more on onion skinning and inbetweening)



In these drawings you should note that I added a purple arrow to highlight the flow of the character's energy and weight. You might even recognize that there is great similarity in the forward and up and down motion to that of a bouncing ball, and you thought that bouncing ball animation exercises weren't important. They are really fundamental to many actions.



I mentioned earlier about the emotional and dynamic energy I captured in the gestural lines of action. I'm also constantly thinking about the character's weight, and center of gravity and how his body is twisting as he runs. As I draw poses and flip my drawings I'm constantly checking to see if the action looks right and I'm making corrections and thinking as I work. Animating is both emotional and cerebral.



Just like the bouncing ball there is stretching and squashing going on in this action. When a character runs they aren't in contact with the ground all the time but when they do make contact they squash down as their weight lands and then they stretch out as they push off.



Also the hips and shoulders counter rotate and the arms and legs move in opposite pairs. These interactions are what I'm working to capture in these thumbnails. The end result is a running action. Once I have the basic running planned out, I can use this as a visual reference when I draw the detailed cartoon character. This may seem like extra work, but it isn't. It is just a great way to subdivide a complex task into more manageable steps.



Another important part of running is the pumping of the arms. A runner uses their arms when they run, they aren't just swinging about they are part of the over all locomotion.



I'm following my vertical guide curve and because it is asymmetrical my runner's motion is more natural. The character may be an ant but in the cartoon world he needs to run like a person.



Don't forget about all the arcs involved as an organic character moves. Arms, hands, elbows, knees, everything is following arcs of motion and they aren't the same arcs so there is plenty to keep track of as you make these pose drawings. There are a lot of details to develop, which is why keeping the drawings in simple thumbnail form is so useful. There will be plenty of time to play with details in the final character animation, but for now my goal is to produce a believable running motion.



A cartoon run is very exaggerated. We want it to be believable in terms of the natural world but at the same time we are trying to create an entertaining interpretation.



I'm not displaying the even drawings here but after I finished my odds I went back and created an inbetween for each even frame. The spacing of my inbetweens is basically balanced so that means they fall about half way between each odd pose. But there are times when I favored one pose or the other to accentuate acceleration or deceleration. Below is a library view of the cells that make up this running action.


Click on the image above to view an enlarged version



Here is the running action set up on 2's at 24FPS, the final action will be on 1's but I wanted you to be able to see things more clearly so I slowed down this version which includes the guides and action lines.



The final thumbnailed action is done on 1's at 24 FPS. It is just a total of 22 frames long so it happens very quickly. I made it into a loop, but the action could and most likely would lead into another action but we will leave that for another time. I hope you learned a few new things in this tutorial.

Drop Shadow Technique

One of the really fun features of Toon Boom Studio is the Drop Shadow Effect. In this tutorial I'm going to show how to apply a drop shadow effect to an animated character. The first step was to create a simple animation of our ant character walking in place. This animated cycle consists of 12 cells all in a single element. Just some simple hand drawn animation. I could have used multiple elements for this animation (head, body, right arm, left arm, etc.) but I chose to do it with a single element. This drop shadow technique would work in either case.



I'm going to have the ant walk across the stage so I'll use my 12 cell sequence and the Create Cycle command to repeat this basic walk in place cycle for 8 loops.

Next I will add a new element of the type Drop Shadow Effect to my timeline panel.


When I first add the Drop Shadow Effect to the timeline track list, no shadow appears because nothing is attached to the effect to generate the shadow. I do see a parallelogram looking tool icon that will be useful in a minute.



To generate a shadow I need to attach my character to the Drop Shadow Effect. It is just like attaching to a peg element. Just drag the character track, or tracks if you used multiple elements for your character, over the top of the Drop Shadow Effect track label.


Once the character is attached to the Drop Shadow Effect we can see his shadow. Of course it doesn't look correct yet because we need to position and orient his shadow.


Using the grab handles on the parallelogram looking tool is how we will manipulate and orient our drop shadow.


We could just drag the shadow to match up to the character's feet as in this example, but shadows are created by "light" sources so we have to orient our shadow depending on the direction and intensity of our imaginary "light" source.



The scene operation select tool needs to be active and the track for the Drop Shadow Effect must be selected in the timeline panel so that we can use the grab handles to adjust and orient our shadow to our character. This is a trial and error learning process using those grab handles but with a little practice it gets really easy.


Once we adjust the size and orientation of the shadow and its relative positioning, TBS will in real-time render the shadow to match each cell in our character animation sequence. We don't have to do anything after we get it set on the first cell of the sequence. It is just like when Wendy sews on Peter Pan's shadow. (trivial reference) Below are a few of the cells in our sequence so you can see that the shadow is being generated as we scrub from cell to cell. I told you it was a fun feature.












So now we have our character doing a looping walk cycle in place with his faithful shadow marching along. We need to add a motion path to get him off dead center and going across the screen. So I added a peg element to the timeline panel and renamed it "character-P".



We will create our motion path with this new peg element. So we need to attach the hierarchy of our drop shadow effect and it child character to the character-P peg. The easiest way to do this is to collapse the drop shadow effect and drag it over the top of the character-P peg track label. The order of this hierarchy is important because the shadow being connected to our in place character walk cycle will now also follow the motion path with the character.



With the shadow and the character both attached to the character-P peg, we collapse the peg and we will make the motion tool active and add a motion keyframe at the beginning frame of our animation and a second motion keyframe at the ending of our animation.



With these two motion keyframes in place and connected by a non-constant segment we can move the character and his faithful shadow to our starting and ending locations for our motion path.



If we scrub the timeline, we will see that the character now moves across the screen along the motion path and his faithful shadow is right there step for step as he goes.





Please notice we did not have to draw the shadow, and we did not have to do anything but attach the shadow and orient it on the first frame of our cycle. Had this been the shadow for a fixed prop like a rock or a tree it would work the same, you just wouldn't have the shadow moving if its object wasn't moving.



Click on the image above to watch the final movie.

As I said Drop Shadow Effects are fun and easy to use. They do slow down final rendering because they are complex to render and they do increase your SWF file size significantly, but animating a shadow could not be much easier. I hope this tutorial gets you going with Drop Shadow Effects.

Using A Subtractive Animation Technique

Recently on the Toon Boom Studio Forums a question was asked about doing tele-strator style animation. The idea being the desire to have the words or drawing to magically appear to be drawn out as you watch the movie. It is a really effective type of animation and surprisingly easy to produce. The secret is a technique called subtractive animation.



To begin our subtractive animation tutorial, I have created a cell in a drawing element using the text tool and a nice cursive style of script font. The is just for demonstration purposes and isn't significant to this technique which can be done with any drawing you create.



Because I used the text tool, I want to break this text object apart two times. The first time separates the text into individual letters but still as text objects. The second time converts the text objects into drawn shapes which can be easily edited.



Now that I have the writing converted, I'll select everything and copy the selected drawing object.



Then I'll paste the copied drawing object right on top of the original drawing object with just a slight offset. And while I have this pasted drawing object still selected, I'll change its color to red which gives a nice shadowed letters effect to the writing.



Now I'll select everything again and flatten the two drawing objects so that they become a single layer. The reason I did this is that they will be easier to edit as I begin my subtractive technique. I have now completed cell number 1 of this animation.



From now on, I don't need to do any more drawing because this entire technique is about subtracting or removing parts of the original drawing. So my next step is to extend the exposure of my first cell by one additional frame. The easiest way to do this is while I have my drawing element track selected in the timeline and my red frame slider on my first cell's frame, I just use keyboard shortcut "R" to repeat the exposure.



With my first cell's exposure repeated, I move the frame slider to the second frame and use the Duplicate Drawing command. What that does is to take the second exposure of my first cell and create a new cell which is an exact duplicate in its place. This cell is cell number 2 and is unique and independent from cell number 1 even though they look identical.



Now that I have created a duplicate of cell number 1, I can begin to modify cell number 2 by using the scissors tool and/or the eraser tool to remove a small part of the drawing. I have to decide how I want this animation to progress so that, in this case, it will look like the words are being written on the screen. Because writing is normally done from left to right, I want to start at the end of the writing cycle by starting on the far right .



I use the scissors tool to select a part of the writing. And then I delete that selection. I actually used the lasso feature of the scissors tool so that I could sculpt out the part I wanted to remove. Sometimes you may need to also come back and use the eraser tool to cleanup the drawing.



Having subtractive modified cell number two, I want to repeat my steps to create and modify the next cell. So first I extend the exposure of cell number 2 for an additional frame. Move to that extended frame and use the Duplicate Drawing command to create cell number 3 which is an exact but independent duplicate of cell number 2.



Now that I have created cell number 3, I'll use the scissors tool and the eraser tool to subtract some more from my writing drawing. Still working from the far right end. I select a small piece and delete it.



I'm going to keep repeating this process of extending the exposure of the current cell by one frame. Then duplicating the drawing. And then subtracting a small part of the newly created cell from the far right end. The number of subtractive steps is totally a personal decision based on how you fast you want this effect to happen. I chose 23 subtractive steps for this example. So at 24 FPS that means the effect is about one second long at this point.



Below is a thumbnail view from the library of the sequence of cells I created using this subtractive animation technique. You should notice that cell 1 is the original drawing and it gets slightly reduced as I subtract pieces of the drawing in each of the successive cells in the sequence until it is replaced by a completely empty cell.



Click on the thumbnail sequence above to see and larger version.

So now we have our sequence of drawing cells each progressively reduced from the original but the order is not what we need to create the final animation effect. We need to go from nothing to the final writing which means we need to reverse the order of the cells. You could do this dragging cells about in the exposure sheet or with the cell swapping panel but that would be very tedious and not nearly as efficient as the trick I'm going to show you for reversing the order of a sequence of cells.



We will begin by selecting the entire sequence of cells for our subtractive animation. This could be done either in the timeline panel or the exposure sheet panel. I'm doing it in the timeline panel.



I right click to open the context menu and select the Create Advanced Cycle command.



Click on the dialog image above to see a larger image.

The advanced cycle dialog box opens and I move the cell selection slider for the first drawing of this cycle to the far right which, in this case, selects drawing 25, a blank cell, for my first cell in this sequence. I don't need to change the last cell as it defaulted to cell 1. I want the button for Overwrite Frames to be selected and the button under loops for None to be selected. Then I click on the OK button to reverse my sequence of cells. If I now scrub my sequence in the timeline I will see that cell 25 is now my first frame and cell 1 is now my last frame of my sequence and the effect of writing from nothing to something is working.




Now that I have reversed my cell order for this sequence of cells, I can play around with the exposure of the cells to enhance the visual look of my writing animation. I'll select all the frames in the sequence and right click to open the context menu and use the set exposure to... command. I finally decide to use set exposure to 3 which means each cell in the sequence will have three exposures. This is a personal preference decision depending on what you want from this animation effect.



Click on the image above to watch the subtractive animation technique used to simulate writing on the screen.



Click on the image above to see this technique in an actual application.
It looks really difficult to create but using subtractive animation makes producing animated drawing or writing really easy. I hope that you learned a new trick or two.

Introduction to Photo Cut-Out Animation Part 3

In part 1 and part 2 of this series on photo cut-out animation; I used the graphic of a caricature of Friz Freleng and the Pink Panther to demonstrate how to convert a single graphic into a fun animation. In part 3, I’m going to try to demonstrate even more cartooning that you can do with the new "Import and Vectorize with Texture" feature of Toon Boom Studio V4.0.

Animation is usually thought of as drawing intensive. The advent of animation software like TBS has certainly brought the joy of creating animation to everyone, but it can’t do much to solve the lack of drawing skills that so many people would like to overcome. Certainly cut-out animation is a great way to reduce the need for so many drawings, but there still needs to be some initial drawing of the character to create the cut-out puppet. Photo cut-out animation has always been possible but was not as easy and required significant preparation work outside of TBS to create the characters themselves. Now with version 4.0, photo cut-out animation is much easier to implement and can be done almost entirely inside TBS. Perhaps the most famous and successful form of true photo cut-out animation are the cartoons from JibJab. So I am going to try to demonstrate how you can creatively put together a JibJab style cartoon without any real drawing being involved. It is a fun cartooning style for anyone to master without regard to your draftsmanship abilities.

With Halloween being an upcoming holiday, it seems appropriate to use that as a creative theme for this cartoon example. I wanted to make it a musical like most of the JibJab cartoons, so I chose Bobby Pickett’s famous song “Monster Mash”. In this tutorial I am only using a small snippet from the beginning of the song so that I can keep things simplified.

I took just that short sound snippet and imported it into a TBS sound element at 24 FPS. I could have used the TBS lip sync feature to breakdown the mouth movements, but I chose to do it manually. So my first step was to do some old fashion “track reading” to produce a bar chart of when each word is spoken. A bar chart is similar to the familiar time line in that it shows frames horizontally in a time sequence. By carefully listening to the song over and over in the sound editor panel, I was able to identify the frame at which each word is spoken. I make note of this on the bar chart so that later when I’m ready to animate the character’s mouth I’ll have it as a guide.

Bar Chart of Sound Snippet (click to enlarge)

I’m ready to start creating my character photo assets to animate. I found a great wacky ghoulish looking photo to be the head of my cartoon character. So I just need to import this photo into a drawing element using the “import and vectorize with texture” command.

Now that I have the photo imported into my drawing element, I’ll use the scissors tool to do a “rough” cut-out of the character’s head. I pull a bounding box around the desired picture area and drag it to separate it from the rest of the photo. Then using the drawing select tool, I select the unwanted part of the photo and delete it. Next I switch to the contour edit tool and begin the process of adding contour points to the outline of the head and dragging those contour points to define the head’s outline.

The ends of this character’s wild hair presents a bit of a challenge, so I zoom in and use the eraser tool to clean up the details of his hair. As you can see using the eraser should be limited to only when you need that level of fine detail as it produces a lot of vector points

Now I’m ready to create his mouth. There are many ways to approach this, but I’ll just show you a typical JibJab style of mouth. I use the scissors tool to select the part of the head that I want for his mouth and drag it off to the side. Then I will use the contour edit tool to add contour points and drag those points to reveal and detail his upper teeth. A really nice thing about the use of “vector boxes” for bit maps is that they essentially are like “masks” and when you pull down on those contour points where his teeth use to be before you cut them out as part of his mouth, you will find that the upper teeth are still there to be included in this part of his head.

I next will cut the drawing object for the mouth and copy it to a new drawing element. Once I do that, I’ll use the contour edit tool to add contour points and outline the lower teeth for his mouth.

So now I have the head as one element, and the lower mouth as a second element. I will go to the head element and in the void where I removed the lower mouth, I want to add a solid black shape which will act as the inside of his mouth when I move the lower mouth as he is singing. This is done by drawing a stroke line to close the space at his chin and using the paint tool to fill the zone created. Below are the head and lower mouth elements lined up in drawing view to show his naturally closed mouth.

Now to make him “talk” I will just keyframe his lower mouth element using the scene planning transform tool to open and close and position it as required by the song.

I spent some time looking for a good photo to use as his body and once I found one that looked promising I imported it into a drawing element using the “import and vectorize with texture” command just like I did with his head photo.

Then using the contour edit tool to first outline the main shape and then the cutter tool to cut-out his arms from that shape, I am preparing the characters body parts. I cut and paste the left arm to a new element and the right arm to a new element. And I also separate the lower part of the right arm and cut and paste it to its own element.

I also have to use the stroke tool and the paint tool to clean up the coat part of the body where his hands use to be. Now, I switch to camera view and using the scene planning select tool, I composite all these elements to produce a photo cut-out character and in the time line I set up his hierarchy.

I then use the scene planning rotation tool to position the pivot points for each of his body parts so that they will move naturally.

Lower right arm


Upper right arm


Left arm

Now I’m ready to create the character’s performance of the song.

I start by using the bar chart I created to determine at which frames he is speaking the words, and I carefully keyframe his mouth to match the sound track. This takes a number of passes to get the lip sync to where I like it. I want to get his mouth movements animated before I worry about his other gestures. Once I’m happy with the mouth movements I will work on his arm gestures. My goal is to keyframe his right and left arm to try to get some humor and personality into his performance. This is a lot of fun and the creative possibilities for the JibJab style of cartoons are quite significant. I added some background graphics and put an opening scene on the cartoon to set the mood.

Click this picture to view the final movie

I hope this tutorial gets you really motivated to try making a JibJab style cartoon of your own. They are very entertaining and fun to produce.

Creating Multiple Shots In A Single Scene

This tutorial is focused on using Toon Boom Studio to make a cartoon short. It is intended to provide an overview of some of the steps in creating a one scene short that is composed of several view point changes more technically referred to as "shots".

Note: you can click on any image to view a larger version

In making this cartoon short, titled "A Matter of Artistic Differences", once the concept was determined and visualized in a rough storyboard, the first step was to create the sound track and the drawing elements. As you can see from the picture of the scene's exposure sheet in figure 2 below, there were 3 sound track elements and 26 drawing elements utilized. Now before you panic about the number of drawing elements used, only about 7 of these drawing elements contained more than one or two actual cells. Most are just occupied by a single drawing and only the main character elements have numerous drawings. The sound track was split up into three elements due to the need for overlapping of sounds in two places along the time line.

Note: Normally we name elements as a single letter: a,b,c,d,e,.... and put the descriptions in element notes, but for this "how to" example we used more descriptive names for clarity.

Figure 1: the library view of "agile4" drawing element cells

Figure 2: the scene's exposure sheet

Although some of the picture composition was done using the "auto light table" to view cells across an exposure sheet frame, we normally do most picture composition in camera view. So we end up doing a great deal of the production work in the time line once the drawn cells are created. We try to avoid doing any drawing in camera view, all drawing is done in drawing view and camera view is where we composite the final scenes. As you can see by figure 3, the time line track list gets quite long. So we use peg elements like file folders to group and manage the clutter.

Figure 3: uncluttered track list with collapsed peg folders

As a note of interest, because we are using TBS V3.5 or higher, there are almost no separate peg elements being used which greatly reduces the number of time line tracks. Most of the separate pegs elements we used were as grouping devices like file folders just to be better organized. Most keyed frame work is done using animated drawing elements which now include their own integrated peg. Figure 4 below shows the expanded view of the track list.

Figure 4: the final expanded time line track list

This cartoon is shot as one actual scene. The opening sequence simulates the "on screen" presentation of our character Agile Ant as he is being blown about in a snow storm on a mountain top. When Agile yells "cut, cut, cut!" out of total frustration, we see via a "pull back and pan" of the camera, that this is in fact a movie set. Then as Agile begins his angry determined walk across the sound stage, we cut to a wide shot that reveals that this is a table top set much like one that would be used in a "stop frame" puppet cartoon like Wallace and Gromit. Figure 5 shows the camera's view point framing the opening shot.

Figure 5: the opening sequence shot

The second camera shot for our short is a "pull back and pan" reveal of the "real world" of the cartoon movie set. It is all done with the TBS camera. The initial art work was scaled only once as we set it up for the opening sequence. (see figure 8 below) The camera, which is attached to a peg element, is positioned to give us the tight shot of the mountain top with Agile blowing in the wind. Then when we are ready to make our pull back and pan move, we first set a key frame of the camera's attributes at time line frame 240. This is done to lock down the start of our camera for a motion tween. So having set the starting position of our camera move at frame 240, we move to the ending frame for this shot which we determined we wanted to be frame 356. With the transform scene planning tool selected, we move the red time line frame marker to frame 356 and use the up and down arrow keys and the left and right arrow keys of our keyboard to reposition the camera viewport to the desired ending position for our move. We also use the Top View panel to move the camera back away from the picture plane. This sets our ending keyed frame attributes. Now all that is needed is to go back to frame 240 on our camera peg and set the constant segment to non-constant and we have our camera move. We normally work with constant segments as a default setting and then we can switch the desired segment between key frames to non-constant as desired. We can adjust the velocity of the camera move using a customized function curve, but for this move we stayed with the default linear curve.

Figure 6: the time line at the beginning of the "Pull Back and Pan" shot

Figure 7: the time line at the end of the "Pull Back and Pan" shot

Figure 8: the relative size of the art work VS the camera viewport frame

Now comes a more complex shot sequence as we pick up Agile Ant in his determined walk across the set, first in a normal long shot, then in a really distant wide shot that reveals the true scope of our movie set and then in a closer tracking shot as he approaches the target of his wrath, that "prince" of a cartoon director, Marty.

Figure 9: the first shot of Agile walking

This shot sequence is made in three parts, but don't think of it as three separate sections of art work. It is one set of art work with three camera set ups. The actual character walking is a cycle that is key framed to move across the table top set. All the set and props have been scaled together as a composite picture and the character is scaled to match the same relative size as the props and set. The changes in viewpoint are all done with the camera set ups. So before we do the camera work we will animate Agile's entire walk across the whole set completely as if there were not going to be any changes in camera position. Once that's done it is all about using the TBS camera. For the first part of the sequence we position the camera viewport and create a motion tweened shot between frames 380 and 448. This is done in a similar manner to the way we did the pull back and pan including using the Top View panel to help us move the camera back farther from the picture plane.

Figure 10: the wide shot of Agile walking

At frame 449 we begin the wide shot part of the sequence (figure 10). The first thing we have to do at frame 449 is reposition the camera. We have the camera positioned at frame 448 with the ending keyframe of our prior move. So at 449 we completely reposition the camera using the Top View panel again to move the camera back from the picture plane to give us the complete view of the set. Once we get the right camera set up, we add a keyframe at frame 449 to lock down our starting camera position. This wide shot lasts until frame 552 where we have made a slight adjustment of the camera to give us a really small pan during our wide shot. The shot is created by key framing the camera start position at 449 then moving the camera at frame 552 and key framing that ending position and then creating a non-constant segment between 449 and 552. The walk and the art work are never changed.

Figure 11: back to the closer tracking shot of Agile walking

The last part of this sequence is the close tracking shot (figure 11). It starts at frame 553. So once again we need to start by making the beginning camera position for this shot and keyframe it at 553. The ending of the shot is at 777 with Agile right in front of Marty's face. Again we used the Top View panel to adjust our camera's distance from the picture plane to get the desired viewpoint. We haven't needed to use the Side View panel because although we are changing our cameras distance from the picture plane we are staying at the same horizontal eye level.

Figure 12: the last camera set up of this cartoon scene

At frame 780 we are ready for the final shot of the cartoon which is focused in on Agile as he delivers his frustrated speech to Marty. Figure 12 shows the camera viewport for this shot and the Top View panel where we are adjusting the distance between the camera and the picture plane.

As you hopefully are beginning to see, making a cartoon sequence in Toon Boom Studio is a combination of drawing and composition and cinematography. It is easy to design and produce multiple shots with in a single scene. It just takes a bit of planning up front.

Figure 13: cells from the "agile1" drawing element

Figure 14: cells from the "agile2" drawing element

I am always glad to answer questions about making cartoons and about using Toon Boom Studio and I actively frequent the TBS User Forums. -JK

Re-watch the cartoon : A Matter of Artistic Differences

Note: This blog post is an updated version of an article which I originally wrote and published as part of our web site's TBS FAQ section which we are slowly phasing out and replacing with this blog and the Cartooning in Toon Boom WIKI.

Introduction To Photo Cut-Out Animation Part 2

Last time I imported a bit mapped graphic cartoon into a drawing element using the “import and vectorize” command “with texture” as the vectorization type. Next I copied the first cell and using the copy of that cell, I cut out the character of Friz Freleng. You can review the process by reading Part 1 of Introduction to Photo Cut-Out Animation.

So having prepared the Friz character, I need to do the same for the Pink Panther character. I go back to my original drawing and cut out the Panther. This time I used the cutter tool instead of the scissor tool. It’s a matter of personal preference so you can try either one. In either case I will want to use the contour edit tool to clean up and fine tune the cut out shapes. Here is the rough cut-out of the Panther

I’m going to cut the Panther into multiple body parts and put each part into a separate drawing element then I’ll rig the character in camera view on the timeline.

As I cut out the parts of the Panther, I also am using the contour editor, the eraser tool, the paint tool and the brush tool to fix up the parts so that the cut-out character can seamlessly be assembled and animated.


This is the torso with a modified scarf.


The head


The right arm


The left arm


The feet

And the tail

Here are the final composited characters in drawing view so now I’m ready to switch to camera view and start rigging them.

I’ll start out by adding a peg element for each character to act as the top level parent in their hierarchy. Then I’ll attach the body parts of each character to their top level parent peg. Next I’ll organize the body parts of the Panther character into two logical groups, one of the upper torso and one for the legs and tail.

I’m almost ready to begin keyframe animating but first I need to use the scene operations rotation tool to set the rotational pivot point for each body part and for the parent peg elements.

Friz's body rotational pivot point

Friz's arm rotational pivot point



Friz's parent peg rotational pivot point



The Panther's head rotational pivot point



The Panther's right arm rotational pivot point



The Panther's tail rotational pivot point



The Panther's left arm rotational pivot point

The Panther's torso rotational pivot point

With all the rotational pivot points set, I collapse my two top level parent pegs and using “extend children exposure” a new command that was added in TBS V 4.0, I extend my timeline out to 160 frames for each character parent peg and all its children.

The animating is just straight forward keyframing of the character’s body parts using the scene operations transform tool. I added a bit mapped background in an image element and added a fade to black transition at the end of the animation. If you are not familiar with keyframe animation, I suggest you review my previous series on Key Framed Animation.

Click here to view the final animation.

If you want to try it yourself, you can find the source cartoon graphic and the background graphic here. Stay tuned for more to come in future tutorials on Photo Cut-out Animation as well as other new features in Toon Boom Studio V4.0. Introduction To Photo Cut-Out Animation Part 3

Introduction To Photo Cut-Out Animation Part 1

One of the new features of Toon Boom Studio V 4.0 is a deceptively innocent change to “import and vectorize”. It is an added vectorization type “with texture”. This opens the doorway to many potentially new and creative ways to use TBS, the most significant of which is “photo cut-out animation”. Toon Boom already had excellent support for cut-out animation and this new feature really adds many interesting possibilities. In this tutorial series I am going to begin to show you some of the conceptual ways to use this new feature for doing photo cut out animation.

For a long time TBS users have been wanting to be able to do cut-out animation using source assets that were created as bit mapped graphics. Up until now that required doing the cut out and masking in a bit map editing program like Photo Shop and then importing the parts into image elements in TBS for animating. You can still do this, but there may be an easier way thanks to the “vectorize with textures” enhancement added in TBS V 4.0.

Friz Freleng and the Pink Panther Cartoon

I wanted to keep this tutorial simple, so I chose a cartoon graphic that just screamed out to me to bring it to life in an animation. It is a drawing of the great animation director Friz Freleng and one of his most famous stars the Pink Panther. I am unfortunately not able to credit the artist of this cartoon drawing, but it is so full of character and implied action that it just seemed totally appropriate for use in this tutorial.

The first step in constructing this animation project is importing the source cartoon to a drawing element using the “import and vectorize” command. We go to the exposure sheet and start on the first cell of a drawing element. With the right mouse button we click to open a context menu to access the "import and vectorize" command. This opens a dialog box where we select the source drawing and set the vectorization type to “with texture”. (see the red arrow in the figure below) This will import the cartoon drawing into our drawing element cell in what is described as a “vector manipulation box”. This “vector manipulation box” is the secret of how we are going to turn a bit mapped graphic into multiple vector animation assets in separate drawing elements.

Click to see an enlarged version of this figure

With the bit mapped graphic imported into our drawing element cell, we can begin the character cut-out process. There are many ways to approach this so I’m going to show you the way that I used to cut-out the Friz and Panther characters. I started out making a copy of my drawing element’s first cell. That way I don’t have to worry about destroying other parts of the vectorized drawing that I will want to use later. I start working on the copy of my first cell and begin with the scissor tool. I pulled a bounding box around the Friz character and then by dragging the bounding box to one side the Friz character is separated from the rest of the cartoon drawing.

I now can select and delete the rest of this copy of the drawing leaving me with just the Friz character. My next step is to begin the clean up of this initial cut out, so I am going to use the contour edit tool to adjust this "vector box" shape. I begin by adding additional contour points to the outline which I am going to then drag to define my desired character’s shape. To add a contour point you hold down the CTRL key while clicking on the outline. (the Option/ALT key on the Mac)

It is a process of dragging and adjusting the outline contours, first roughly, and then zooming in and fine tuning the outline adding more contour points as I go as needed. If you are not familiar with contour editing it may take you some practice to learn when and how to use the point control handles and how to adjust the contours. But, it’s actually fun.

Next I’m going to make a copy of this drawing to use to cut out Friz’s arm and I’ll delete the unwanted parts of that copy just leaving the arm cut out.

And then using the contour editing tool and adding and adjusting contour points I’ll define the shape of his arm just like I did for the main character drawing.

Now I’ll go back to my previous drawing of Friz and using the eraser tool I’ll remove the lines of his arm. I purposely have a yellow background for my drawing view panel so it is easy to see what is drawing and what isn’t.

Having erased some of the drawing, I now need to use the paint tool and the brush tool to fix up the drawing. Yes, that’s right. The bit mapped image is inside a "vector box" so I can draw and paint on it just like any other vector drawing. I’ll create some color swatches to match the colors in the image so that my edits aren’t too noticeable from the original.

My next step in creating the Friz character is to separate the body drawing and the arm drawing on to separate drawing elements that I can composite into a cut-out for animating. It is simply a matter of copying drawing objects and pasting drawing objects from one element to two separate elements. My initial drawing element is just being used as a scratch work element and will not be used in the final animation. So I've created an element "a" for Friz's body and an element "b" for Friz's arm.

I want to have Friz yelling at the Panther as I envisioned he was doing in the original source cartoon image, so I need to make a second mouth position. I will do this by making a copy of the body cell in element “a” of Friz with his big mouth wide open. Then using the eraser tool, the paint tool, and the brush tool I’ll close his mouth on the copy drawing. Now when I alternate between these two element "a" cells, Friz’s mouth opens and closes and can be animated to match his speaking.

Cell a-2

Cell a-4

The Friz character is now ready to rig and animate in camera view on the timeline. Next time, in part 2, I’ll cut out the Pink Panther character, rig both characters and create the actual animation.

Jump Into Animation - Part 2

I set up a new animation project in Part 1. Then created a drawing element called "arc" and made a visual guide to follow while drawing this jumping action. Then I created another drawing element and roughed in the jump using a simple stick figure. Finally I created another drawing element and drew some solid volumes to act as a foundation for the character. So now I am creating another drawing element named "c" and I can actually start drawing a character using my rough guides.



You might notice that my three drawing elements "a", "b", and "c" all have their cells visually identical, again this is not a rule, just a habit of mine. Animation projects are hard enough work, so with experience you will find your own little tricks to make your life easier.



These are not meant to be finished inked drawings and if this were a real cartoon I would probably have done this layer in blue and created a clean up and inking layer called "d". One thing that I often find when working with people doing computer animation directly in digital (not scanned) is that they almost always want to rush to the painting phase while animating. I call it the rush to the finish line. Again, different methods exist and there are no rules set in concrete, but "filling" in paint zones before the animation is totally worked out and satisfactory, just makes your life harder. Seeing a more finished looking character may be gratifying but it is best to wait on the painting.



Also as temping as it might be to really want to polish your drawings, you want to work out the action first and then you can polish away on a new layer. In fact, when you are first starting out, it is much more important to do a lot of "rough" animations instead of only doing a few really finished pieces. It is tough to resist the urge to polish and detail your exercises but you will progress faster if you draw more. There will be plenty of time to polish later.



As you get to the stages where your construction elements are no longer needed, don't delete them just un-check them in the X-sheet and in the timeline. You might want to reuse them at some later time during your project and they really don't impact much except taking up some hard drive space. They won't show in or add to the size of your rendered work.



I hope that this tutorial is easy to follow, but if you have questions be sure to ask for clarification.



We are almost finished and this is only about a second of screen time and not inbetweened. Now you know why limited animation replaced full animation on TV in the 1960's.



Here is a Camera and Timeline view of our little jumper. You will notice that we aren't spending much time on the camera or the timeline here because this is a character action and we aren't worrying about compositing it into a scene yet. Also because this isn't cutout animation I don't need keyframed parameters at this stage.



You can see the animation of the character added to the construction here.

That's all for now.

Jumping Into Animation - Part 1

In our last tutorial we animated a stick figure throwing a ball. It introduced us to using TBS for making a simple animation and we learned to use "onion skinning" and to make "in between" drawings. If you missed it then please check out "A Good Place To Start - Part 1".

We are going to do a slightly more involved animation this time. We will be doing a "jumping" action. It basically has three sections. We start out with an "antic" (an anticipation) followed by the jump itself and we "settle" out at the end. For simplicity sake I won't be doing any in between drawings so this will be a "rough" exercise but instructive none the less.

We will start a new animation project in TBS and create our first drawing element on the scene one exposure sheet. I am renaming this element "arc" because it will be used as a visual aid in my work. One important tip when animating is that you can and will create many elements (layers) which you will use for "scratch" or "rough" work and then hide them later.

So on cell 1 of frame 1 of "arc" I drew a ground line and an arc in red. (the color choice is not important, in fact I chose a red that is partially transparent) Remember this element is to be used as a guide in roughing out the jump and then it will be hidden and not needed. My jump will span about 25 frames at 24 frames per second, so I extend the exposure of cell 1 of element "arc" out to frame 25. That way the arc is visible while I'm roughing in the action.



Now I will create a second element in my exposure sheet and rename it "a". I typically name my elements single letters and use element notes to add more descriptive information about the element. It saves space which is always a good thing. I am drawing with the pencil tool and a pen set to a Max of 5 pixels. I have switched to green as my drawing color. Be sure to turn on your Auto-Light table (shortcut L) so that the arc is visible from below. And there is our old friend the stick figure in pose one.

You may notice that element "a" already has a spread out sequence of cells showing. That's because I have a habit of pre-populating a new element with cells before I draw. Certainly not a requirement, but rather a habit. What I do is start at frame 1 and insert a large enough number of cells to handle what I'm planning to draw. Typically I start with 100 cells. This gives me a sequentially numbered set of cells for that element. I like to match cell numbers to frame numbers. The unused numbers are just stored in the scene folder and are always available to use if I want to add in between drawings. I don't like random cell numbers. Animation is a detail oriented and organized art. You will also notice that I have spaced the cells based on my desired timing of poses for the jump. How did I determine that spacing? Click here to learn more about animation timing .



Pose 2 is our "antic" pose for the jump. The main purpose of an "antic" is to create an anticipation of a coming action. It helps to alert the viewer that something is about to happen. Also if you try jumping, you will notice that you squat down or flex downward before you push upward.



OK, so now in pose 3 our jumper is beginning to unleash some of that energy stored up when he flexed his knees. Notice that we will use the red arc as a visual guide to follow. Remember in our throwing tutorial we talked about the importance of arcs in non-mechanical motions.



Pose 4 is the top of the jumper's arc. For all you fans of the bouncing ball exercises, you might recognize the squash and stretch aspects and similarity in a character jumping.



Pose 5 has him starting to come back to the ground.



Pose 6 is the squash of his weight impacting the ground.


And pose 7 is the "settle" part of the jump as the character relaxes after landing.



So now we have a rough jumping action. View it here.

Next we will add another element to our Exposure sheet and rename it "b". This element will be for some construction volumes to help us better draw the character solidly. These volumes are like circles or ovals but you want to add contours to them and visualize them as 3D solids.



I'm not showing every frame here, just the most significant ones.



I am drawing in orange just to make things really visible. Both elements "a" and "b" are strictly for construction purposes and in Part 2 we will be drawing the actual character on layer "c" using them as visual guides.



View the jump with the volumes added here.

We will continue in Part 2.

A Good Place To Start - Part 2

Be sure to read Part 1 before you read this next part of our tutorial.

We previously set up a drawing element in TBS, renamed it, and then drew seven "key" poses to make a "stick figure" throwing action. That was animating on 2's and for most actions that would be a good choice. But throwing is a very "fast" action so we might be better served to animate it on 1's. This is an artistic choice not a rule. It is usually easier to animate on 2's or 3's and then to go back and make in between drawings if you feel you need them. We learned in Part 1 to use arcs to describe motion and we used the onion skinning to reference our "previous" drawings. We want to remember and use those arcs for our in between drawings too. And onion skinning is really important when doing "inbetweens" because we need to reference both the "previous" and the "next" drawing so the drawing we are making will fall in the correct place in between those two drawings.



I have a trick I use to change from a held exposure to a new cell for "inbetweening". I use the "cell" tab on the Properties panel. If you highlight the cell you want to replace in the Exposure Sheet and then go to the "cell" tab and move the slider all the way back to your left, you get a blank cell all ready for you to start your next drawing.



I'm now going to draw my first in between drawing. Because I want to keep this tutorial really simple all of the in between drawings are going to be "spaced" exactly half way between the "key" drawings. If you want to learn more about "spacing" of drawings in animation timing you can read this weblog article.



Notice that TBS onion skinning provides us with different colors for "previous" and "next" drawings and we can have as many as three "previous" and three "next" drawings visible. But as a general rule you probably will only want one "previous" and one "next" drawing visible, otherwise it gets confusing. Now this is a great example for learning to "inbetween" because even though you are spacing the in between drawing half way between the keys, the character is twisting and bending so you have to really follow the arcs carefully.



This is also a great example of the shifting of the character's center of gravity and weight as he throws the ball. And you thought I just chose it because it wasn't a "walk" cycle.



If this is your first animation, you are probably thinking " this is a lot of drawings to make". Animation is fun, but it is a lot more work than drawing a comic book. Not that drawing a comic book isn't a lot of work too. In future articles we will explore ways to reduce the number of drawings and the work, but animation is still time and labor intensive. If you are too lazy to do the work then maybe you should just watch the cartoons and not try to make them.



How many in betweens are there in this animation? Answer 7 "keys" on 2's means 6 "inbetweens" to go to 1's and I'll add a 7th drawing to settle out the action too.



In between drawing may seem like dull stuff, but they have to be placed correctly and you have to study the "previous" and "next" drawings or you can really "kill" the animation.



This last drawing is technically not an in between but rather just a final stopping of this action. Some animators refer to it as a "settle" or resting position.



I made a background and added another element to the Exposure Sheet. This is just to make the published animation easy to view on the Internet. And I padded the animation out to a full 24 frames just so it would take 1 second to view before it starts over. This isn't a cartoon, it's a tutorial example.



Before you watch this masterpiece, you can switch to Camera View and even look at the Timeline. We didn't spend much discussion about the Timeline in this tutorial because it wasn't important. We will explore the relationship and importance of the Timeline and the Exposure sheet in future articles so "stick" around. (no puns intended)



HERE is the finished animation for you to watch and study. I hope that you picked up some knowledge from this tutorial. Comments and questions are always welcomed. Stick Figures are great as a starting place to learn animation. You don't need to be a great cartoonist or artist to draw stick figures and you can make them do anything and have a lot of fun and learn how to animate even if you aren't 9 years old.

A Good Place To Start - Part 1

A recent posting on the Toon Boom Studio forums requested tutorial help for a 9 year old interested in getting started in animation. I thought back to when I was a young person and started animating and I remembered making "flip books" full of stick figures doing all sorts of actions. Today with products like Toon Boom Studio and Toon Boom Studio Express learning to animate is really fun and easy.

I decided that this first tutorial should be a good place to start in that learning process. So I'm going to take you through the steps in creating a "stick figure" throwing a ball. I'm going to keep it as simple as possible and break it into two parts just for ease in publication. I certainly hope that you will find it informative even if you are older than 9 years old.

The first step in doing our "stick figure" animation is to open TBS and find the drawing view panel where we will draw our action.



You will also want to open up your Exposure Sheet panel which has a single drawing element by default. We will start by renaming that drawing element.



Our first sheet of "digital" paper will be cell 1 at frame 1 under the Stick-A drawing element.



Now that we have a place to start drawing our action, we will need a drawing tool like the pencil or the brush. I normally use the brush for rough animation. We need to open the Properties panel and choose a "pen" for our drawing tool. I have set up and chosen a variable pen 3 minimum and 16 maximum and smoothing set to level 4. (strictly a personal preference) You can't take advantage of pressure sensitivity unless you are using a drawing tablet like a Wacom tablet.



We also need to choose a color for our "stick figure" drawing, so I chose "blue". (again just a personal preference for rough sketches)




Now that we have chosen a pen and a color, we can start drawing. So I have drawn the first pose of our "stick figure" starting to throw a ball.



Be sure to save your project work often to avoid the possibility of losing it to the mysterious world of computer goblins. I saved my project to a file called "Stick", which is very original and took lots of thought. Not really. Next we want to advance to the second frame in our Exposure Sheet and extend the exposure of our first cell to include frame 2. We will do this for each drawing we make in this first pass. This is called animating on 2's where each drawing is held for 2 frames. As a side note I have the animation project set up for 24 frames per second as the frame rate. Refer to this weblog article to learn more about animation timing and frame rates.

Now we want to move to frame 3 to draw our second "key" drawing in this throwing action. I have turned on onion skinning so that I can see the previous drawing and use that as a guide for this next "key" drawing. Onion skinning is like using a light box as a drawing board so you can see the drawing underneath your current drawing. If you have never seen or used a light box, then hold two sheets of drawing paper up to a lamp and you will get the idea of how us old timers use light boxes.



After completing pose two, we extend its exposure an additional frame and move on to frame 5 to draw our third "key" pose. For the most part this is called working "straight ahead" but in Part 2 of the tutorial we will remove the second exposures and add in between drawings to improve the smoothness of our throwing motion. So we will end up animating on 1's instead of 2's, but that is for the next part of the tutorial.




By now you should be seeing a pattern in our work flow. We draw a pose then extend its exposure for a second frame then move to the next frame and using the onion skinning we reference the previous drawing to make the next pose. One interesting thing to note about most non-mechanical motions is that things travel in arcs. So as you look at the various poses in sequence try to see if you can find the many arcs I'm using. Here's a tip. Pick almost any body part and follow that specific part from pose to pose. It will be following an arc path.




We are making good progress as this next drawing is our 5th "key" pose. You don't need to be a great artist to animate. Sure the more you draw the better your skills will evolve, but stick figures are fun and easy to animate and are the basis of animating almost any cartoon character. You just need to add some flesh and muscles to those "sticks".



We are almost through doing our "key" pose drawings for this throwing action. Here is "key" pose number 6.



And finally here is the 7th and final "key" pose. If you want you can stop right here and have a pretty nice first animated throwing action.



In Part 2 we will go back and add in between drawings to give this action a more fluid look.