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 SNAP LAST KEYFRAME option and the TURN PEG ONLY MODE ON option. 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 th