Tips and Tricks toonboom.doc

63
| 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

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.