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.