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.