Tips and Tricks toonboom.doc
Transcript of Tips and Tricks toonboom.doc
| BACK TO TIPS AND TRICKS
So, you like animation, but you don’t know how to draw? You would like to animate but don’t know how?
You would like to create a very realistic animation, but are at a loss as how to do it? Animating a four-
legged creature can be overwhelming. Rotoscoping answers all of these problems.
With Toon Boom Studio, learn how you to animate characters, effects and props by referring to live-
action videos with these tips and tricks about Rotoscoping.
What is Rotoscoping?
Rotoscoping is an animation technique where the animator traces over each frame of live-action movie
to reproduce a realistic movement. This technique was invented by Max Fleischer in 1915. The movie
was projected frame by frame on glass and the animator would draw over it. The equipment used to do
so is called a rotoscope. Today, the rotoscope has been replaced by the computer and a virtual form of
rotoscoping is now used.
So what are the advantages of using the rotoscoping technique in your animation project?
← Your motion will be very realistic
← Your timing will be accurate
← Your animation will maintain its proportion and volume
← It helps you learn how to animate
← It helps you to understand how to break down a movement
← It helps you to animate very subtle motions, like a slight head turn or a slow raise of the hand
You can also superpose your character design and only use the motion but not the actual object, person
or animal from the video.
Because rotoscoping is so realistic, it leaves little room for exaggeration movement, squash and stretch,
or a very cartoony look, so you have to see if it suits your needs and the look of your project.
Selecting a Video
Selecting a video for your rotoscoping exercise is fairly simple.
← Film the actions you need to animate yourself. For example, you could film your dog playing
with a ball or a person running.
← Find a free movie clip on the web
← Your animation will maintain its proportion and volume
← Purchase a royalty-free movie clip from a website.
Your movie format can be any of the following:
← AVI (*.avi)
← QuickTime (*.mov)
← MPEG (*.mpg)
← iPod (*.m4v)
However, if the movie
clip is not the correct
format, you can easily
convert it using editing
software.
Since you will be tracing over your video using vector based brush strokes, your clip doesn’t need to
have a very high resolution. Of course, higher resolution is better, since it provides more detail, but it is
not a requirement. However a minimum resolution of 300 x 200 is recommended.
Importing the Video
When you create your Toon Boom Studio project, you can avoid having too many drawings to trace over
by creating it using a 12 frames per second rate instead of 24 FPS. If your project has a 24 frame per
second rate, twice as many images will be created out of the video you will be importing. In that case,
you could trace a drawing every two frames and expose your drawings on double frames, but this is all
up to you.
To import your video:
1. In the top menu, select File > Import Files.
2. Browse for your clip.
3. Click on the Open button.
4. In the Import Options dialog box, do NOT set an opacity value.
5. Click on the OK button.
Setting the Tracing Brush
Before you start tracing your movie, we recommend that you setup your brush using the following
suggestions:
← Low Smoothness
Using a low smoothness setting as you trace your animation stays closer to the actual line you
traced and fits the live-action clip better.
← Lively Tracing Colour Swatch
As you trace your animation, create a colour swatch to trace your character with and set the
colour to a bright blue, green or red, this will let you can see your outline better over your video.
Tracing the Monkey
When you trace over your imported movie, we recommend that you focus on one element at a time. In
the sample used for this article, the monkey was traced first and then the bananas. This helps you keep
a consistency between the different drawings you are doing. If the two objects or characters are
interacting, it is best to draw them on the same layer.
If you do not want to spend a very long time tracing all your drawings, you could adjust the look of your
scene accordingly. Tracing rough and sketchy lines over the video produces a very nice look. The final
result is lively and interesting, especially if you are animating furry creatures.
Remember, when you trace over the character try to close your zones, this will eliminate a lot of gap
closing and fine tuning later on in your animation.
To trace your animation:
1. In the Timeline view, add a new layer to trace your animation.
2. In the Colour view, select your tracing colour.
3. If you work in the Drawing view, enable the Light Table to see the live-action frames.
4. In the Camera/Drawing view, zoom into your image to see the details better.
5. Trace your first frame.
6. In the Timeline view, select the second cell and trace your second image.
7. If need be, enable the Onion Skin to see your previous drawings.
8. Repeat the process until the animation is entirely traced.
Fine Tuning the Animation
Once your animation is traced, it is a good idea to disable the live-action clip layer or turn off the Light
Table and then go over your animation to fix the little details such as opened zones and uncompleted
lines.
If you want your final project to be lighter once you are done tracing, especially if it is for output on the
web, it is recommended that you select your lines and flatten them.
To flatten your drawings:
1. In the Tools toolbar, select the Selection tool.
2. In the Timeline view, select your first drawing.
3. In the Camera/Drawing view, select your entire drawing.
4. In the top menu, select Tools > Flatten.
5. Repeat the process for all of your drawings.
Painting the Animation
You are now ready to paint your animation! To create your colour palette, you can use Toon Boom
Studio’s special dropper to pick colours from your live-action movie and paint your animation in the
same colours as the clip.
To create your colour palette:
← In the Colour view create and rename your new palette.
← In the Colour list section, add a new colour swatch.
← In the Camera view, display your live-action movie.
← Double-click on the new colour swatch to display the Colour Picker window.
← In the Colour picker window, click on the Dropper button.
← In the Camera view, pick the desired colour.
← Repeat the process until the colour palette is entirely finished.
You can now paint your animation and publish it!
| BACK TO TIPS AND TRICKS
Maximizing your use of cell swapping
| BACK TO TIPS AND TRICKS
One of the most useful functions when doing cut-out animation and cut-out character designs is cell
swapping. It is most commonly used when creating mouths for your character to allow lip-syncing. But
with a little more work and thought, we can maximize the use of cell swapping and create much more
elaborate cut-out characters.
How to use Cell Swapping
Of course, before starting any swapping, you must draw all the cells for each element. Some elements
might need just one, but others like the mouth, will need many cells.
Use it to Swap Body Parts
Plan ahead! Your character will probably repeat certain movements when you animate it. Blinking,
pointing, arm and hand movements that will be secondary animation so that the character doesn’t look
too static while talking. Therefore the first elements that should have a variety of cells are eyes,
eyebrows and hands. The bigger the number of cells available for each element, the more elaborate
your animation becomes.
What if the Character is Holding an Object?
If your character is holding an object you will need to match the moving object with the animation, To do
this you could always create a new layer for the accessory your character will hold and try to match the
moving object with the movie animation. However, this method can be difficult and time-consuming and
chances are the animation will jitter and look unnatural. A great way to get around this problem is to
create a cell where the hand of the character is actually holding the accessory.
In this example, we swap one hand for a hand that is holding an object, in this case a love letter. From
this point we can rotate the hand and the letter will always follow.
If both hands need to hold the object, one hand should be swapped for an empty cell while the other
hand will have everything in one cell. In our example, both hands are holding the fishing rod.
All that is needed is to align the arm with the hand at the bottom of the fishing rod and work our
animation from there. This technique is a little more complex, but efficient.
Are We Playing Dress-Up?
We are! Imagine the cut-out character is just like a dress-up doll. Not only can you swap body parts like
hands or mouths to create animation, but you can also create a puppet that becomes an efficient tool by
including all sorts of clothing. Just start swapping clothes when you think your character needs a new
look! Here are a few helpful examples:
Skirts, Dresses, Pants and Shirts
Full wardrobes can be created for your character. In this example, we only need to swap the dress to
create a whole new look for our puppet. This could easily be done with pants, shirts, skirts or even
shoes!
Hats, Glasses and other Accessories
By creating an accessory layer, you can add items to your character without too much work. We
recommend that you put all similar items on a element. This way, you can put on more than one
accessory at a time, and also, it will prevent you from having the move the pivot point everytime you
change the cell.
Hairstyles
Why not give a whole new “hairdo” to your character? You can easily create new heads by only
changing the style of haircut.
Summary
Here are some important things you should remember:
← Cell Swapping is great tool to create elaborate cut-out animation
← Use it for repetitive animation like blinking, lip-syncing or arm and hand movements
← If a character needs to hold accessories, make sure to use cell swapping to facilitate your
work
← Create elaborate puppets by using cell swapping to clothing, hairstyles and other accessories
Picking Up Items With A Cut-out Character
| BACK TO TIPS AND TRICKS
Cut-out animation is one of the most efficient ways to produce animation. However, you can sometimes
come across some interesting problems that are more challenging than you might expect. One such
problem occurs when you want your cut-out character to pickup an item.
How do you do it? Read on to find out.
Draw the Item as a New Element
The first step, after deciding which item you want your character to pick up, is to draw that item as a new
element. In our example, we decided that the boy will pick up a shovel. Draw and colour your element
and then place it into your scene exactly as it should be when you start animating it. Extend the
exposure of the item up to the frame where the character will start to pick it up.
Use Cell Swapping to Hold the Item
When your cut-out character holds an item, the item should be part of the hand element, this means that
you will create a cell where the hand is holding it. If you have already drawn the item to be picked up as
a new element, you can easily copy and paste it to the new cell of the hand. Retrace and recolour the
hand if needed until you are satisfied with the result. You are now ready to do your animation!
Combine These Two Methods for Seamless Animation
If you want your character to pick up the item, it is fairly simple if you have followed the previous two
steps. You only need to animate your character to the point where the item is picked up, then do some
cell-swapping to the hand, so that the cell is the one which is holding the item.
Make sure that the item element is now empty at the moment the hand element is switched to the cell
with the item.
You must make sure that the item element and the cell of the hand holding the item are the same size.
The easiest way to do this is to adjust the item element making sure you do not resize the hand at the
same time! Place the item element temporarily as a top layer and extend its exposure so that for one
frame the element overlaps the character. Then in the sceneplanning view, align and resize the item as
needed. Once you are done, adjust the exposure of the item to what it was before. You can now
animate your character if needed.
Clipping: Not Just For Your Hedges!
| BACK TO TIPS AND TRICKS
Ever need to animate an object so it’s on top of your background and behind part of it at the same time?
Wonder how to make a hand disappear into a cookie jar or how to show a scene unfolding as if you are
viewing it through a pair of binoculars? Look no further and learn to use Clipping to solve all your
hiding needs.
With Toon Boom Studio, forget about redrawing and piecing together your background and have the
freedom to use bitmap images. Discover the properties of Clipping and use them to hide or reveal
objects in your animation.
Preparing Your Layers
Creating a Clipping Mask for your animation is fairly simple.
In this example, we will show you how to hide part of the frog’s eyes if they pass beyond the perimeter
of the eyeballs.
You can follow along with your own project, for this exercise you will need to place the following on
different layers:
← The drawing object(s) to be clipped.
← The drawing object that the clipped object should be in front of for the most part.
← A cut-out shape of the section of your object where you would like the hidden object to be
revealed (matte).
Creating and Ordering the Clipping Layer
1. Prepare the objects listed in the section above. Make sure that each object is on a different
layer, including each eye, and that the matte is perfectly aligned with its corresponding drawing
object.
2. In the Timeline view, click-on the plus button and from the dialog box, select Clipping from the
layer type options.
3. Rename this layer and click-on the arrow beside the Clipping layer to show its sub-layer.
4. Select your matte layer, in this case the frog’s eyeballs highlighted by a red fill, and connect it
to the Mask sub-layer. You will know if it has been successfully attached by its disappearance in
the Camera view. Due to the fact that it is destined to be rendered invisible, the colour of the matte
is of no consequence.
5. Connect the drawing object that you would like to be partially revealed as you animate it to the
Clipping layer, in this case, it is both eyes. Your layers should look something like this:
The frog layer remains unattached to the Clipping layer.
6. In the Camera view, test the mask by moving the drawing object(s) (eyes) behind the mask
area, as well as beyond it. Marvel as they partially disappear beyond the edge of the Mask.
Using an Inverted Matte
Sometimes the area that you need to mask is quite large in comparison to the area that
you wish to hide your object behind. Have no fear! The Clipping Mask can still be used.
All you need to do is invert your matte shape area.
What You Will Need
In order to use the masking technique, you will need to place the following on separate layers:
← The drawing object(s) to be partially hidden.
← The background image or drawing object that the hidden object should be in front of for the
most part.
← A cut-out shape of the section of your scene or object where you would like the hidden object
to be revealed (matte).
Creating and Ordering the Clipping Effect Layer
Creating a Clipping layer for your animation is fairly simple.
1. Prepare the objects listed in the section above. Make sure that each object is on a different
layer and that the mask drawing is overlaid and perfectly aligned with its corresponding drawing
object.
2. In the Timeline view, click-on the plus button and from the dialog box, select Clipping from the
layer type options.
3. Rename this layer and click-on the arrow beside the Clipping layer to reveal its sub-layer.
4. Select your matte layer, in this case it is the train tunnel highlighted by a green fill, and connect
it to the Mask sub-layer. You will know if it has been successfully attached by its disappearance in
the Camera view. Due to the fact that it is destined to be rendered invisible, the colour of the matte
is of no consequence.
5. Connect the drawing object that you would like to be partially revealed as you animate it to the
Clipping layer, in this case, it is the train. Your layers should look something like this:
The train_tunnel_BG layer remains unattached to the Clipping layer.
6. In the Camera view, test the mask by moving the drawing object (train) behind the mask area,
as well as beyond it. Marvel as it partially disappears beyond the edge of the Mask.
Creating Printed Material
| BACK TO TIPS AND TRICKS
Wouldn’t it be useful to have a printed version of character model sheets that you can place next to your
computer for reference? Or maybe you want to create a printed animation reference book. You may
even want to make a portfolio of your work for interviews or to show to prospective clients. Well, with
Toon Boom Studio it’s possible to export your designs or still frames and then print them out using a
third-party software!
Preparing your Model in Toon Boom Studio
Open the file you want to export and resize it so that it fills the 12 field guide space. Remember, that
because you want to print your work you will need to export it in bitmap format instead of vector. The
downside of this is that you cannot scale a bitmap to a larger size if it is too small. To get around this,
you must export your work at its largest size and then rescale it in the third-party software if it is needed.
Changing the Size of your Project
Before exporting your character, you need to know what size it must be to export it. To make things
easier we have given you the correct pixel dimensions for a sheet 8.5 x 11 inches in size a little bit later
in this section.
If you want to know the size of any sheet of paper you can open a blank document in Photoshop, or a
similar third-party software, and then set the image size to the size of paper which you will print on, for
instance, letter (8.5 x 11 inches), legal (8.5 × 14 inches), A4 (8.3 × 11.7 inches), etc. Once this is set,
you can read off the pixel dimensions and note them down, this is the size you will set the camera size
to in the Toon Boom Studio Animation Properties dialog box.
In this example, you want your model sheet to be letter size 8.5 x 11 inches and the resolution to be at
300 DPI (dots per inch). For your character to be at the same resolution you need to take note of the
size of the sheet in pixels: 3300 x 2550 pixels.
In Toon Boom Studio you need to set your project to be at a similar pixel size. Go to File >Animation
Properties.
The project is currently at 720 x 540 pixels. This is clearly not enough to be able to print our model
sheet. Change the camera size to the same as the pixel dimensions for the 8.5 x11 inch sheet which is,
3300 X 2550 pixels. Click OK to apply those changes.
Exporting Your Work
Now you have set the correct size you are ready to export! Go to File > Export Movie. Make sure to
change the path accordingly and select which frames you want to export. Click on the Option button to
change to format to PNG. The PNG format will keep the transparency of the frame making it easier to
transfer the characters to your model sheet later on.
Once you are ready, click on OK and Toon Boom Studio will export your frames.
Creating Your Model Sheet
Open your PNG file in the third-party software. Now you need to make some changes before copying it
to your model sheet. Go to the image size properties and change the DPI of your file for 300. Make sure
that options like Resample Image are deactivated before changing the DPI. Then apply the changes
Next you can copy your character to the model sheet. Resize the character if it is still too large to fit on
the page.
Once you are satisfied with your Model Sheet, you can use the third-party software to print it out. You
can add the sheet to your portfolio, reference book or just use it as a drawing guide by placing it next to
your computer as you animate.
How to Use Advanced Cycle and Peg Looping With a Walk Cycle
| BACK TO TIPS AND TRICKS
Walk cycles are probably one of the things animators will draw the most. It’s always great to have a
trick or two so that we can save time doing them. In Toon Boom Studio, two very useful options can help
you work your way through without too much pain, here you will learn about:
← Using the Create Advanced Cycle Option
← Using the Change Loops Option
These options can easily be mixed up at the beginning, but once you learn the difference, they can both
be powerful tools!
Creating Your Walk Cycle
The first step is to create a stationary walk cycle. There are no real frame limits. Use a character such
as this walking baby. Make sure that you develop a full cycle, meaning that your character must do two
steps. Once it completed, you are ready to make the character cross the screen!
Adding the Peg and Creating the Motion Path
Your character is now ready to be added to a peg:
1. Click the Add Peg Element button.
2. Drag your character element over the peg to connect it.
Once your character is connected to your peg, you will need to create a motion path that will go from
left-to-right or right-to-left depending on your animation.
To create a motion path:
1. Select the Motion Tool from Sceneplanning Tools toolbar.
2. Drag the last keyframe to the left or the right while holding [Shift].
A motion path will appear.
3. Run through your animation a few times and see if your character’s feet are sliding on the
ground.
4. If they are sliding you must adjust the length of the motion path until it looks like the feet are no
longer sliding.
Once the adjustments are done, you are ready to start repeating your cycle.
Using the Create Advanced Cycle Option
The next step is to repeat the hand drawn animation several times so that there are enough frames for
the character to cross the screen.
1. In the Timeline View, right click the first empty cell of your hand-drawn animation and select
Create Advanced Cycle.
The Advanced Cycle window opens. This contains two windows, one for the First Drawing and
one for the Last Drawing. Make sure that both drawings are correct. If you want to change the
drawing, simply use the slider or enter the name of the cell in the specified text box.
2. Next, select the number of times you want the cycle to repeat.
None: If you don’t want the cycle to repeat.
Continuous: If you want the cycle to restart with the first drawing on each loop.
For example, if you create two continuous drawing loops for drawings-2-3, the resulting loop
would be: 1-2-3-1-2-3.
Forward-Backward: If you want to restart the loop with the previous drawing.
For example, if you create 2 forward-backward loops with drawings 1-2-3, the resulting loop
would be: 1-2-3-2-1-2-3-2.
3. Type the number of times you want the cycle repeat in the Loops field.
If you want to repeat the cycle for a specific number of frames, type a value in the Frames field.
In this example, the baby walk will loop 5 times.
4. Click on OK to close the window and go back to your work.
If you browse through your animation, you will now see that the character will move from left to right only
during the first cycle. After, it will be stationary again. You can change this by using the Change Loops
option.
Using the Change Loops Option
The Change Loops option is specific to the peg and is used to repeat a peg sequence. You can repeat
cycles of hand drawn animation using the Advanced Cycle option.
1. First you must select the first empty cell next to the last peg keyframe in the timeline.
2. Right-click and select Change Loops.
3. Enter the number of loops you wish to create.
In this example we created 6 loops.
4. Click on OK to close the window and go back to your work.
If at the end of your animation, you notice that the peg loops do not fit with your hand drawn animation.
This can easily be corrected by dragging the end of the peg sequence up to the same frame as your
animation.
You can now play your animation to see the result!
Your character should now walk all the way to the end of your motion path.
Moving the Motion Path
Now that the animation is completed, you will probably notice that the motion path is not correctly placed
in your scene. To move the motion path so that your character comes in and goes out of the screen:
← Using the Select tool from the Sceneplanning Tools toolbar, click on the motion path and move
the it until your are satisfied with its position and the result.
Summary
Here are some important things you should remember:
← The Create Advanced Cycle option is specifically used to repeat drawing cells.
← The Change Loops option is used to repeat a selected section of a peg.
← Repeating a peg will not create copies of your drawing cells, it will only repeat the Motion Path.
← Use both options together to save time and effort.
Good luck!
Creating Perspective Grids For Your Projects
| BACK TO TIPS AND TRICKS
Perspective is always a bit tricky to get right, especially if you are still new to drawing! Adding this skill
on top of animation can become quite overwhelming. Here is a simple trick that will help you to save
time and effort while working on your animation project.
Creating Perspective Grids in Toon Boom Studio
If you have learned the basics of perspective, you know how to draw your horizon line and vanishing
point. From there you can create a full grid. By using Toon Boom Studio’s 12 Field grid, you can easily
trace your lines at equal distance to make a clear and useful grid. This image shows an example of a
one vanishing point perspective grid and a two vanishing point perspective grid:
We suggest that you create this grid on a separate element. This allows you to activate the light table
and use this grid as a reference.
You can use this method to create backgrounds or shapes that require accurate perspective. And since
the grid is on another layer, you do not need to erase any guide lines. Once you are done, you will just
need to delete the Grid element in your Timeline!
Using Perspective Grids in Animation
It is also possible to use these grids for animation. For example, this grid has two vanishing points:
You could use this grid as a reference for a 3/4 walk animation. You can see this demonstrated in the
next image where each square equals one step:
Trying to create an animation like this without any visual references can be quite tricky and give
unpleasant results. Save yourself some time and headaches by using the grid guide lines.
Reuse your Grids by Creating Templates
Why redraw your grids over and over when you can reuse them. In Toon Boom Studio you can easily
save each grid as a template and store them in your library to use whenever you need to. To use the
Library to store all your grids as a template, simply create a new catalogue called Perspective Grids and
then drag and drop the selected cell into your library! Each time you create a new grid, make sure to
save it. You just never know when it might be useful again!
Get A Painterly Look For Your Animation Using Bitmaps
| BACK TO TIPS AND TRICKS
Working with vector artwork in Toon Boom Studio has many great advantages, especially when it
comes to file size. But what if you are looking for a more organic, painterly look for your animation? The
fine detail found in a painted brush stroke on canvas is difficult to achieve in a vector drawing. The best
solution for this is to import bitmap art into Toon Boom Studio. Once you have imported your bitmap
artwork into Toon Boom Studio, you can combine it with vector art to produce almost any style of
animation.
Here are some vector clouds that were created within Toon Boom Studio:
Below are some bitmap clouds that were painted using a simulated art brush to give them a soft and
fluffy appearance:
There are a few options for achieving a more painterly look in Toon Boom Studio. First of all, you can
create a painting on paper or canvas and then scan it (when it is dry of course). If you save your artwork
to a bitmap format compatible with Toon Boom Studio, you will be able to import it directly into your
project.
You can also use one of the many digital painting applications that exist and create your artwork using a
digital tablet and pen. Some of these applications will allow you to use different types of media brushes,
such as oil paint or crayon. When your artwork is complete, save it as one of the many bitmap formats
that are supported by Toon Boom Studio.
Importing Bitmaps into Toon Boom Studio
Create an Image element within Toon Boom Studio and import your bitmap artwork into your scene:
Some of the most commonly used bitmap formats supported by Toon Boom Studio are:
← PSD (Photoshop file)
← TGA
← PNG
← JPEG
Of the ones listed, only the JPEG format will not support transparency.
Resolution Settings
Keep in mind that when dealing with bitmap artwork in Toon Boom Studio, you will not have the benefit
of resolution independence as you do when working with vector art. Planning your project is important to
ensure that you maintain the quality you need while keeping file size as low as possible. The best way
to know if your bitmap will have a high enough resolution is to first determine your output format. Then,
depending on camera moves, you can determine the minimum resolution your image has to be in order
to retain the correct amount of detail without becoming pixilated.
Transparency and Alpha Channels
Another important aspect of using bitmaps in Toon Boom Studio is the benefit of retaining transparency
and alpha channel information. An alpha channel is an additional image channel used to store
transparency information for compositing. An alpha channel is like a sophisticated stencil and works
much like the clipping effect in Toon Boom Studio. It is used to isolate specific elements in an image,
blocking out the rest .Alpha channels are usually used to combine a foreground image, such as actors
on a set, with a background image.
When you import a bitmap image that contains transparency or an alpha channel, Toon Boom Studio
will detect it automatically. This makes it possible to have bitmap overlays and underlays in your scenes.
An alpha channel was then created so that only the lamp would be visible; the area shown in white. The
black zones are the areas that we want to leave out of the composition.
When this bitmap image (this particular one is in PSD format) is imported into Toon Boom Studio,
complete with alpha channel, this is what you see in the Drawing View:
If you are using a digital painting application, you could paint your elements on separate layers and
export them individually to retain the transparency. Then you will be able to blend your bitmap elements
with the rest of your scene. An image with transparency might look like this in your digital painting
software:
Working with your bitmap images in Toon Boom Studio
Once in your scene, you can animate bitmap image elements using keyframes. You cannot edit the
bitmap itself in Drawing View, but if you switch over to the Camera View, you will be able to resize it with
the Select tool. If you want to make changes to the bitmap element over time, use the other scene-
planning tools to create keyframes in the Timeline.
Having many high-resolution bitmaps in your scene may increase the size of your project. To help avoid
this, try to clone your bitmap elements so that you are manipulating an instance of the bitmap instead of
importing it a second time.
In this example, the first cloud was cloned and then changes were made to the size and positioning of
the clone to offset it from the original. Each one was then animated individually.
Tip: When animating bitmaps in Toon Boom Studio, you may notice that rendering a SWF (Flash) file
will produce unexpected results. This is due to limitations with the SWF format and how it deals with
bitmap images. To resolve this issue, render your animation to a QuickTime or AVI format that better
supports bitmaps and you will get it to look exactly the way you want it to. To preview your QuickTime
movie in Toon Boom Studio before you export, use the Preview Scene option instead of the Flash Quick
Preview.
| BACK TO TIPS AND TRICKS
Use Motion Points to Modify Your Animation Path
| BACK TO TIPS AND TRICKS
Choose the Motion Tool to Animate Along a Path
When you want to animate an object along a path, it’s best to use a Peg in conjunction with the Motion
Tool. This way, you will be able to see the path your object follows, and make adjustments to the shape
of this path. Motion Points are created when you set keyframes along a path, and by moving these
points you can change the shape of your path, as well as the timing of your animation.
There are two types of Motion Points you can create when animating with the motion tool. Keyframes
are used to lock a drawing in position at a specific frame in time. Just moving your object with the
motion tool will create a keyframe. You can also add a Control Point to your motion path. Control points
are different than keyframes, as they will modify the shape of the path, but not change the timing of your
animation. On your path, a keyframe will be red, while a control point will be green. Add a control point
with the Motion tool by holding down the [Shift] key with the cursor over your path.
Change the Tension of a Motion Point
The shape of the path between motion points will greatly impact your animation. Changing the tension
of a motion point will help with just that. Selecting a motion point in Camera view will bring up its options
in the Properties window, where you can change a point’s tension by dragging the Tension slider. -1
being the lowest and 1 being the highest. (There are also Continuity and Bias settings you can change.
See the User Guide for more information on these settings.)
The basic curve below (on the left) has four keyframes with a default tension of 0, and shows a smooth
path for this ball. In the example on the right however, the tension of the 2nd keyframe was set to 1
while the 3rd was set to –1. This results in a different path altogether. Depending on the movement you
are trying to achieve, you may have to adjust one or all of the motion point properties to get the desired
shape for your curve.
The Bouncing Ball
The following example of a bouncing ball, animated with keyframes, uses two different types of tension
settings. At the point of impact, where the ball smashes into the ground abruptly then flies off in the
opposite direction, we need a sharp angle. The default tension of 0 was changed to 1 to achieve this
effect.
But at the top of the curve, where the ball is floating through the air, a smoother curve is required. In this
case, the tension was left at 0. It would be impossible to achieve a smooth curve if you were to use a
tension of 1.
Change the Default Tension in Toon Boom Studio
The default tension of a motion point is 0. You can, however, modify this in the Preferences window, in
case you would prefer the default be set to something else. In this window, set the default tension for
motion points to be whatever is most logical for your style of animation.
Here is the result
Working with pegs and animated elements
| BACK TO TIPS AND TRICKS
In Toon Boom Studio V3.5, we have implemented the new concept of
animated elements, which allows you to easily animate elements without
having to attach them to a Peg element. This new feature can simplify the
entire character rigging process by simply making a hierarchy of elements
without additional pegs.
Toon Boom Studio also allows you to instantly manipulate bitmap images using the new Select tool from
the sceneplanning tools. Combining this new feature with the peg system will allow you to have more
flexibility and simplify your Timeline’s element hierarchy. The example shown employs one of
the ways both of these features can simplify your workflow.
This project uses one peg and one animated element. We worked with multiple peg properties to
optimize the work. One of these properties is the control point. You can create a control point by
using the Motion tool and holding [Shift] while clicking on the motion path of a peg (when you do
this, the cursor will assume a diamond shape). A control point is represented by a green dot on
the peg’s motion path.
Compared to a keyframe, a motion path is not locked to a specific frame and can be moved anywhere
on the motion path. Be aware that control points are not displayed in the Timeline so you will need to
select the peg with the Motion tool to see them. You can also access multiple functions in the Motion
Point tab that appear in the Properties window when you select a keyframe or a control point. For more
information on motion points, refer to the reference section in the online help.
*Note that when you have a keyframe or a control point selected in the Camera View, you can hold
down the [Alt] key and drag the point to change its depth in your scene. You can also easily change the
timing of existing movement by holding down the [Shift] key and dragging the last keyframe of your peg
in the Timeline. This will stretch the duration of the entire peg, repositioning all of its keyframes to keep
the same animation properties.
We also used the Rotate tool on both the bat element and the peg’s motion path. By doing this, we were
able to set a different speed for the tilting of the bat and the camera tilt. This gives a more natural look to
your camera movement. Rather than fit the movement of your element exactly, it traces the bat’s
movement as if it was trying to keep up. We specifically chose the Rotate tool instead of the Transform
tool so the rotation will not interfere with the motion; if we have to make some adjustments to the motion
path, the keyframe that is created will have a fixed rotation but won’t be locked at that position.
There are tons of possibilities available using pegs and animated elements. Simply remember that the animated element is a good way to do some simple animation with a cleaner timeline, and the peg allows for more complex animation due to the addition of the motion path and the ability to group elements without necessarily having a drawing as a parent.
Downloads
← Sample Material (ZIP)
| BACK TO TIPS AND TRICKS
Looping Pan Backgrounds In Toon Boom Studio
| BACK TO TIPS AND TRICKS
This effect is useful when you have a character running or car moving quickly, so that you don't have to
draw a background that is a mile long. Follow these steps using your background design and you'll soon
create a looping pan background effect of your own.
Drawing The Background
Draw your background to be at least twice the width of the camera frame for your scene. This could be
anything from a city street to a jungle scene, but remember, you should design it with the idea of looping
it in mind.
In order for the loop pan to work properly, you'll need to have the first part of your drawing repeated at
the end of your background. To quickly do this, select and copy the entire background drawing, then
paste it into the same frame in drawing view. Position it at the right side so that the background is now
twice as long.
Then you'll have to make sure that the two background pieces will line up properly. The following image
shows how we've used the Contour Editor to adjust the lines so that they would blend seamlessly.
Setting The Pan Speed
It's useful to be able to see the motion path for your background pan, so use a parent peg to control the
movement. Precisely following these next steps is very important, and is key in easily achieving a
smooth pan.
With the Motion tool, set the first keyframe to be the beginning of the background on the left.
Then, create a second keyframe, immediately after the first, and use the Onion Skinning feature (set to
show one previous drawing) to line up the second part of the background with the first. The view in the
Camera frame should be the same for both keyframes, but one background length left. Placing the
second keyframe like this will guarantee your background will loop properly. Hold [shift] or use the arrow
keys when you position the second keyframe to contrain the motion to a straight line.
To set the speed of the pan, drag the second keyframe as far right as necessary in the Timeline. This
will create the inbetweens. Now, preview your animation and make adjustments to the position of the
second keyframe until the desired speed is achieved.
Looping The Background Pan
The motion you've created is fine for one pass, but there's a couple of things still to do before it can be
looped. Firstly, the second keyframe should not be exactly the same as the first one or the animation will
stick when it is looped. To make sure this doesn't happen, position the second keyframe to be one
increment (on the Motion path) before it reaches the same position in the background. You can easily
do this now that your timing is established. Simply, add a new keyframe to your Timeline just before the
last one then delete the end keyframe. If you preview your animation on loop now, you should see that it
could play forever!
Tip: You want to make sure that the velocity of your peg is constant. The increments on your
background's motion path should be even. This maintains a constant pan speed and helps loop the
background seamlessly.
All there is left to do now is copy the first cycle in the Timeline, and paste it one after the other, as many
times as needed to achieve the desired scene length. Add any other elements necessary and you've got
your animation!
Here are some more tricks you can use in this scene to simulate movement and depth:
← To give the car some extra movement, two keyframes were repeated throughout the scene to
give it a little bounce.
← A drop shadow was created beneath the car using a gradient fill, and speed lines were added
to the wheels.
← The car was placed on a peg of it's own and made to advance slightly, creating a "gain" so that
the movement would look a little less static.
← A foreground and a background element were added. Both moving at different speeds to
simulate depth. The clouds for example, are moving slower because they are farther away.
Almost all elements in this scene were imported from the template library included with Toon Boom
Studio 3.5
Downloads
← Sample Material (ZIP) (includes project files)
| BACK TO TIPS AND TRICKS
Converting Images to Cut-Out Characters
| BACK TO TIPS AND TRICKS
We get a lot of questions about how to convert clip art into a cut-out character, or how to create proper
cut-out joints, so for this article that’s exactly what we’ve done. Using these techniques, it is possible to
cut up one still image and make it into a cut-out character, or use your skills to create a brand new
character from scratch.
The example that we will use is Marina. Marina comes with Toon Boom Studio v3.5, but she isn’t a cut-
out character. Her template consists of just one image. We’ll show you how we divided her pieces, and
give you some pointers on how to use the Z depth to help set up your character.
Cutting up a Drawing
To begin with, you’ll have one image that you want to cut up. You’ll always want to have one intact and
unedited copy of this image. Use this element to copy and paste sections of it into new elements to start
building up the cut-out pieces of your character. You’ll most likely have to do a bit of drawing when
converting a still image to a cut-out character, mainly to enable the rotation of joints, but also to “finish”
any part of the drawing that was incomplete or covered by another body part. The static light table is a
very good tool to use when cutting up your pieces. Put the original on the static light table and use it as
a reference for which parts to add or remove. Work on one joint at a time and you’ll have all your pieces
separate in no time. The real test will be when you set pivot points and test rotation. There’s always the
possibility you’ll have to make corrections as you go, but the more characters you set up, the more tricks
you’ll learn to help to do it faster, and make less mistakes. (See image of Marina Pieces)
Z-Depth
Remember you can move elements back and forth along the Z-axis to place certain elements on top of
others, even if they are under them in the timeline. This trick is indispensable when dealing with cut-out
characters. For example, if you look at the finished Marina template you‘ll notice that we’ve put her head
and hair on separate elements, and redrew the neck so that it would be more suited to cut-out rotation.
For Marina our challenge was to keep her hair behind everything, but we also wanted her face on top.
This is where the Z-depth really comes in handy. We’ve made the head a parent of the back of Marina’s
hair, so when we move the head the hair will follow. But then we played with the Z depth of these
elements and made the hair go behind the neck, and her head on top. This is a neat little trick that
works well for hats, sleeves, and just about anything you can think of. Also, with
the neck and head drawn and layered this way, you can easily get a very full
range of rotation.
← Remember that if you put something on a separate element, you’ll have to
remove it from the original in order for the rotation to work
← Use the keyboard shortcuts [Alt] + [up and down arrow keys] in Camera view
to bump your elements back and forth on the Z-Axis
← Make sure you have the Select tool active so that you aren’t setting keyframes on your
elements.
← Keep in mind that when you move an element in Z-space that it will appear larger (or smaller)
in relation to the other elements. You may have to make adjustments
← Notice the Z-value change in the drawing tab of the Properties window.
Patches
The idea of a patch is similar to the example of Marina’s head, where the head controls the back section
of Marina’s hair. A patch, however, is a separate element that is created solely to cover up overlapping
lines, and make a very simple, fool proof joint for your cut-out character. There are several of these
patches in the Marina cut-out character, but as an example we’ll look quickly at Marina’s right arm. Her
arm consists of three pieces; the shoulder, the arm and the hand. These pieces have been drawn and
layered in a particular way so that when we add a patch the rotation will be easy. First, we set up the
hierarchy and pivot points for the pieces of the arm. Then we copied only the fill section of Marina’s right
arm, and pasted it into a brand new element. We’ve added this piece to the arm hierarchy so that
whenever the arm moves, that patch will move along with it. Then we bumped the patch just ahead of
the other pieces of the arm in Z space, so that it hides some of the lines on the joints of the arm. Take a
look at the other patches in the Marina character and play around to test the rotation.
← You should lock the patches you create so that you are unable to select them via the Camera
View as you animate. Make sure to remember to lock the patches of your character when you start
animating, as this information will not be saved from scene to scene.
← When adding drawings to an element, such as more hands, make sure that the new one is in
the same spot as the old one so that you can use the cell substitution window without having to worry
about your pivot points.
← Don’t worry about making the joints perfect. Look at what is a realistic rotation of a joint, and
make sure the joint looks good for that.
← When setting the rotation pivots for your cut-out character, use the Rotate tool so that your
pivot will be kept.
Try experimenting with these techniques and see how it can help you create cut-out characters easily in
Toon Boom Studio.
Downloads
← Sample Material (ZIP) (includes image and template files)
| BACK TO TIPS AND TRICKS
Advanced Lip-Synching
| BACK TO TIPS AND TRICKS
Accurate Lip-Synching is an important step towards making a convincing animated character. Toon
Boom Studio offers this amazing tool that allows you to automatically synchronize a sound to a
character’s mouth element. But why limit it to only that? In this article we will introduce you to some
advanced lip-synching techniques you can use to produce results that will amaze your audience. We will
show you how to use effects such as synchronizing multiple expressions to one single mouth element,
and adding and removing shapes for sounds that are not recognized correctly by the automated lip-sync
tool.
First we will do a quick overview of the lip-synching function. To lip-synch an element you will first need
to have a sound and a drawing element containing the according mouth shapes. Once you have
imported the sound into the application you will need to enable lip-synching by going to the edit sound
window and pressing the lip-sync button after selecting the sound track. Then simply right-click in the
header of the sound element to get the Lip Sync Mapping feature.
You might wish to use sound tracks with multiple feelings expressed in them and having only one shape
to synchronize to the sound might not be enough. For example, the mouth shape B would look different
if the character was sad. Therefore you might need to add several mouth shapes for one sound in the
same element to fit the different expressions needed.
Once you have those extra shapes done, there is a trick to get them synchronized to the sound without
having to use a whole new element. The first thing to do, is to create a clone of your mouth element.
This clone will be used to temporarily synchronize the sound. Make sure that this element is the top
layer of your animation to prevent any confusion later on. Once the clone is done, you will need to open
the Modify Lip Sync Mapping function on your sound. Make sure that your target element is the first
mouth element on top. Then, assign your mouth with the first expression to the element. When done,
you will see that the clone element has been synchronized to the sound. Now you need to turn on the
sound playback in the Play top menu and afterwards turn on the sound scrubbing. These functions will
help you to define what the range of a certain expression is. Once determined, copy the exposure range
from the clone to the original mouth element. Now the only thing left to do is to repeat the same process
by making sure to copy the range that was not yet mapped. Once you have finished mapping the whole
sound you can delete the cloned element as it will no longer be used.
It is now time to fine tune the lip synchronization. First you need to see
how accurately your animation is synchronized to the sound. Making a full
exportation of the movie is the most accurate way to do so. From time to
time, you might notice that your mouth seems to be moving too much in
certain words or sentences. This is basically due to the fact that the lip-
synching function recognizes every variation in the sound and some of the
sound that gets picked up should not necessarily be a new shape but might be a transition shape from
one mouth to another. One great way to know if the mouths that have been generated are correct is by
saying the text yourself. If you pay close attention, you will notice that some of the shapes that have
been mapped might not need to be there. After identifying those mistakes, you can easily fix them by
using the cell swapper from the cell tab of the properties window. You might also figure out that some
sounds might need some extra mouth shapes for the lip-synching to be really convincing. Once you find
out where you need to add those extra mouths, you can simply input a new mouth name in the
exposure sheet in those locations and draw them directly in there.
The last thing to do would be to export your animation and see if everything is fine. If you are to export to Flash, an important thing would be to trigger on the Streamed checkbox in the middle right of the sound editor to make sure that your sound keeps its synchronization with the drawing. Since the Flash format is loaded progressively as the animation is played, your image might take more time than your sound to load and you will notice inconsistencies in the lip synch from one playback to another if the Streamed option is not triggered.
Downloads
← Mouth chart (PNG)
| BACK TO TIPS AND TRICKS
Camera Effects
| BACK TO TIPS AND TRICKS
Even though you don’t use multiple cameras in Toon Boom Studio, there are a lot of ways to create
camera effects to give momentum to your animation. For camera effects, we suggest moving around the
camera, either with smooth panning or with quick cuts from one place to another on the scene. To do
these effects, we can rely on two tools: the Peg element and the Function Editor.
Camera Trucks and Dolly
The first thing you should always do when you want to add camera effects is attach your camera to a
peg. Drag the camera element onto the peg. Then use the Motion tool to move your camera around the
scene in the same way as you would move any element attached to a peg. Then create the path you
want the camera to follow and it will move around from the beginning of the path to the end. You can
fine tune your motion by adding one or more motion points.
*Note: you can attach any camera to a peg, but to see the result of the movement you must select the
camera in the Camera List in the Scene View toolbar. Also, remember that whenever you render a
scene, it will use the camera selected in the Camera List.
Holding Position
You may want to stop the camera from moving for a certain amount of time, then resume moving again.
You can easily do this by creating a keyframe at the position at which you want the camera to stay in
place, then copy the newly created keyframe to a later frame in your scene.
Creating Cuts
Cutting means moving a camera from one position to another without any transition. To do clean cuts,
you will first need to keyframe every position you want to go to on the peg. Then, on the timeline, select
the keyframe you want the scene to be cut from and set the segment to constant (Element > Peg > Set
Constant Segment; or [Ctrl] + [L] for Windows users and [Command] + [L] for Mac OS X users). By
doing this, you will remove any interpolation in between the current frame and the next frame (meaning
the camera will not move in between the two positions, creating a clean cut). To change a segment back
to its original state, you will need to reset the peg to a non-constant segment (Element > Peg > Set Non
Constant Segment or [Ctrl] + [Shift] + [L]). This will reactivate the interpolation in between the two
keyframes.
Ease in/out
An ease-in is an acceleration of a movement over time. Conversely, an ease-out is the deceleration of a
movement toward a specific frame. You can control the speed of the acceleration and deceleration of a
movement through the Function Editor (display this window by selecting Window > Show Function
Editor). You can see any transformations over time that you applied to an element represented as a
graph in that window.
Once you have opened up the editor you will need to display the Velocity Function. By default, the
velocity is represented as a straight line between both points on the graph. To create an ease-in and
ease-out you will need to reshape the line so it becomes curved. Click a point to display handles that
you can use to reshape the curve the way you want. You can add additional points to your curve to
change the dynamism of movement by selecting a frame (the vertical line marks the frame number) and
clicking the arrow with a + icon. You can remove any keyframe in the editor by selecting the frame
where it is located and clicking the arrow with a – icon. When you change the velocity of the peg’s
movement you might notice that the position of the element over time will vary on the peg based on the
new velocity.
| BACK TO TIPS AND TRICKS
Lighting Effects
| BACK TO TIPS AND TRICKS
Adding special effects is an important part of creating high-quality cartoon animation. Applying an effect
is not mandatory, but it will certainly help to catch your audience’s attention.
Lighting is one of the first special effects you should consider when enhancing the look of your
animation. If done properly, lighting effects will add a lot of volume and depth to your character,
contributing to a more realistic environment and a more convincing animation.
Move your mouse over the images to see the updated effects.
We will show you how to make tones and highlights using the Stroke tool or a mask layer. You will also
learn how to add shadows to your elements.
Before you begin adding any lighting effects, you should plan where your light source is located, its
angle and its level of intensity. This preparation is essential to prevent bad shading or incorrect shadow
positioning and direction. The best method is to make a quick map of your scene (from the top and the
front view) and position the light on the map. This will help you determine the origin and angle of the
light and where the shadow will fall.
The bottom picture on the left shows the correctly lit scene where the shadow follows the correct angle
cast by the light source. If you put your cursor over it, an incorrectly lit scene where the shadow does
not match the angle of the light source will appear.
Highlights and Tones
Highlights are areas of reflected light on the surface of an object. The more reflective the surface is, the
more the object will contain highlights. Highlights are small, very bright areas of an object. Highlights
should typically be pure white. If you are highlighting a tone you can make this the lightest tone in the
picture and have it contain some detail. In animation, the tones are placed on an object and shadows
are placed on the ground. This process is also called shading.
Using the Stroke Tool
Using the Stroke tool is a fast way to create some highlights and tones for your drawings. The Stroke
tool is typically used to close elements that have gaps, but in this case we will use it to define zones
where we want highlights. The first step would be to define the color of the highlights and tones that you
are going to use. A great way to choose colors for the highlight and tone is to use the Color Picker in the
color palette.
← In the color palette, select the color you want to use as a highlight.
← Use the + button to duplicate the color. Rename it by adding “_h” for highlights and “_t” for
tones to the original color name, so you can identify which colors are associated to each other.
← Open the Color Picker by double-clicking on the newly created colors. You can also use the
Color Picker icon (a multicolored circle).
← The bar to the left of the Dropper is the currently selected color. The colors below it are
different shades of the same color. By clicking on the shades at either end, you can get lighter or
darker shades of colors. If the colors shown don’t fit your needs you can also choose any colors by
changing the RBG and HSV values or selecting specific colors from the left part of the window.
After you have chosen your colors, define the zones that se have highlights with the Stroke tool. Make
sure that your line t ouches both edges of the drawing. If it doesn’t, Toon Boom Studio won’t isolate the
zone and repainting the zone will result in the whole surface being repainted. To see the strokes that
have been made so far, activate the Show Strokes option (View > Show Strokes, or the [K] shortcut).
When strokes are visible, all closed edges are shown as green dots and all unclosed edges are shown
as red dots. Once you have defined your tone and highlight zones, use the Paint tool to change the
color to the ones that you defined earlier.
Tip: Remember that once you have defined the color, you can always change it in the color palette and
it will be automatically updated in your scene.
Animating the Shading Effect Using Mask and Color Transform
Another method of creating highlights and tones is to use multiple layers. Even though this method
might sound more complicated, it allows you to easily animate the intensity of the light by simply
changing the values in the Color Transform effect. For this method you will need to use two more
drawing objects: one for the highlights and one for the tones. Here are the steps required to apply this
method.
← Create the color for the shadow and the outlines. For the highlights, take a light color (such as
white or yellow) and enter an Alpha value that is less than 100. Do the same for the tones, using a
dark color.
← Create a layer called Highlight and a layer called Tones and place them over the element
drawing (inside the clipping mask if you used one).
← Paint the highlights. You will need to determine where your light is coming from. If the light is
coming from the left, the highlights should be to the left and the tones should be to the right. If it
comes from the center, highlights should be in the center and tones to the side. Remember that by
adding these, you are actually giving depth to your character so you can also use tones or highlights
on the neck or parts that are deeper or not accessible to as much light.
← If your drawing is in one element only, you can also add a clipping mask (see the previous
article on making a mask to create a transition) of the element you want to highlight so you don’t have
to bother with painting outside of the element. Also, if you have black contour lines in your element,
we suggest that you make a copy of them on a new layer or delete them from the mask so they won’t
be affected by the highlights.
Drop Shadow
Adding a drop shadow to elements on your animation project is a great way to give depth to it. However,
you must be careful about the angle of the drop shadow so it fits with the angle of your highlights and
tones. If you don’t pay special attention to it, you might end up with a scene in which the lighting isn’t
consistent and you will lose the feeling of depth that you wanted to acquire by doing the lighting in the
first place.
To make a convincing drop shadow:
← Create a clone of the element.
← Add a Peg element to the timeline with the + button.
← Attach the clone to a peg
← Add a Color Transform Effect element into the Timeline with the + button.
← Drag the peg containing the clone into the Color Transform effect.
← Move the group containing the Color Transform effect behind the element that is going to have
the shadow.
← Set the Red, Green and Blue color values in the Color Transform effect to 0 on the first and last
frame.
← Select the Rotation tool and move the pivot point of the peg to the bottom of your element
(where the shadow will be attached to the element).
← Select the Free Transform tool and use the skew function (keep [Alt] pressed and select the top
of the element) and the scale function to adjust the angle of the shadow.
Creating Transitions in Toon Boom Studio
| BACK TO TIPS AND TRICKS
A transition is a way to gradually move from one scene to another. We usually use transitions to indicate
a change of location or to give a rhythm to the action. Even though there are no actual transition tools in
Toon Boom Studio, there are lots of easy ways to create transitions between your scenes. You can
simply use a drawing or an image on a peg or using either the Clipping effect or the Color Transform
effect.
Using only drawings or images
Pegs are used to apply movements to elements in the Camera View. Animating a drawing or a bitmap
on top of your scene using a peg is the quickest and easiest way to make simple transitions. An
example of transition using a single peg is a horizontal or vertical wipe. You can achieve this by moving
a rectangle over your scene using the motion scene operator. Note that using this technique you can
only make a transition to a solid color, such as black or white or to a bitmap image. If you would like to
make a wipe transition between two sets of action, you can use the Clipping Effect, also known as a
mask.
Using a Clipping Effect
The Clipping effect will hide part of your scene using a mask. Everything that appears under the mask
drawing element is displayed. The rest will be hidden as shown in the next figure.
You can also achieve more complex transitions using this technique. The following example shows you
how to create a wipe transition like the one shown above by making the transition between two sets of
action instead of wiping from an action to a solid color.
← Create a rectangle the size of the entire scene in the Camera View.
← Add a Clipping Effect element into the timeline with the + button.
← Add a peg and attach the rectangle to the peg.
← Drag the peg inside the mask element (the rectangle should follow).
← Drag the elements of your scene inside the Clipping Effect.
← Animate the rectangle’s peg element by moving it from the center of the screen at the first
frame to the far right (so the rectangle is completely outside of the Camera View) at the last frame.
← Now the transition effect should be done. If you wanted the transition to apply to another scene
put the other scene element below the Clipping Effect. If you want to do a transition to black put a
black rectangle below the Clipping Effect.
Using the Color Transform Effect
Finally, you can use the Color Transform effect to make fading transitions in between scenes. The Color
Transform effect can transform color as well as the transparency level of an element. For a fading effect,
simply animate the transparency of a solid rectangle that covers the entire Camera View by setting its
alpha values from 0 to 1. Here are the steps to make a quick fade to black with Toon Boom Studio:
← Create a black rectangle that covers the entire scene in the Camera View.
← Add a Color Transform Effect element into the timeline with the + button.
← Drag the black rectangle inside the Color Transform Effect. Make sure that these 2 elements
are above every other element on the scene.
← Select the first frame of the Color Transform Effect and set the alpha to 0 (either multiplicative
or additive).
← Select the last frame of the Color Transform Effect and set the alpha to 1.
Downloads
← Sample Material (ZIP)