T

BROWSE MORE SEARCH JOIN SIG N IN SUBMIT

P
See More by PowerOfSin 
∫

LITERATURE

[TUTORIAL] Motion Tweening in PewDiePie vs Tbot:

written storyboard
OpenToonz PewDiePie floating on his chair
in the colorful void of the
internetCamera zooms in
PewDiePie drinks Gfuel Warni…
ADD TO FAVOURITES COMMENT

57 22 4K (5 Today)
BY ∫ |
PowerOfSin  WATCH
Published: July 10, 2017

Welcome to my second OpenToonz tutorial!

Since people seemed to like the first one (I think), I decided to make the next one where I
will explain how tweening and motion works in OpenToonz.
If you are just joining in, I would suggest checking the first tutorial to make sure we are on
the same track since I won’t be repeating what I already covered there.

Tweening Basics
FEATURED IN COLLECTION S

Let’s cover the basic theory first and the most basic way tweens are used. Advanced stuff will Tutorials for foxy, also recipes and brushe
BY Keeneon
be down below.

What is Tweening?

Helpful Reference BY
NOTE: I am uncertain if that is the proper term, but Flash coined the Motion Tween and SpeedWagonRequiem  ƒ
Shape Tween terms for this so I tend to still use them.
Tutorolls and Refs BY Duskkyy
A tween is a computer generated animation calculated automatically to fill frames between
two user defined keyframes.
FEATURED IN GROUP S
For example, if I move an object to a point A on frame 1 and at frame 10 move it to point B,
the application will fill frames 2-9 with the motion between these two points. More in actual
examples below.

theAnimators Unknown-
Animators
How to do Tweening in OpenToonz?

As with many other things, the way OpenToonz handles tweening has a few differences which
work to it’s favor in the long run, but can confuse newcomers. New-Animators Rising-Artists
Before we get to it, I will assume you have the same room as the one we set up in the first
tutorial (or similar). What we will need is an Xsheet and the Viewer or ComboViewer at least.
In the Xsheet you will need to create some kind of a graphic to use for tweening and put it in
one of the columns and make it last for roughly 10 frames, like this: See More by PowerOfSin 
∫

(doesn’t have to be a bone, but I will pretend it is)

Afterwards select the Edit Tool (the one I just mentioned previously, the first on the toolbar).
Afterwards, drag the bone to the left side of the canvas (providing the second dropdown
below the Edit Tool says position). Then, select the frame number 10 and move the bone to
the right side.
Congratulations, you just made a Tween! You can play the animation now as you would
usually and you will see that OpenToonz filled the frames between those two points on it’s
own.

The Edit Tool

Now, let’s explain what actually happened here.

First thing to keep in mind is that Edit Tool works with Columns, not images or Levels.
Meaning that the original image has not been moved by it. If you wanted to move the bone on
the base image, you would use the Selection Tool to select parts of it and have them move,
but that cannot be used for animation, just for image manipulation.
To illustrate what I mean, copy the bone level to another column and you will notice it’s
centered as we made it first. You can then repeat the steps above on this column but for
example make it move up and down, or just move it once and have it always stay near the
top for example.
The second thing to take note of is what you probably noticed appear in the Xsheet where
you created some movement, the little white squares with a key symbol in it. That is a
Keyframe, and any manual tweenable movement you make in OpenToonz will create one of
these, and the program will interpolate between them.

So far you only made a change in position for the Columns (I hope) but you can do the same
kind of setting of Keyframes for Rotation, Scale and Shear. They can all be selected from the
second dropdown below the Edit Tool icon once it’s selected.
A very important fact to keep in mind is that all of these values tween individually, so
making a new Keyframe with just a position change will not automatically create a key frame
for rotation for example. And having only 1 keyframe in a column for a value will make it not
tween at all, just stay at that value, so you might need to add a keyframe of it being 0 too.
There is also the Center option in that dropdown and it’s usually the first one you should set.
The movement of the Center itself doesn’t create Keyframes but it sets the point around
which the other tweens will move. Trying to move this after you made a lot of rotations or
scales will cause problems so it’s best to move it before you do any of those.
You can also try to use some more exotic tween motions while holding the ctrl key, like
moving along the Z axis or scaling only by width or height, or shearing… in 3D?

More Options in the Xsheet

There is a lot of ground to cover from now on, and things will get a bit hard to follow if we
don’t take precautions.
So, before anything else, since we will be working with Columns, it would be the best to
name them meaningfully. You can do so by double clicking it’s name in the xsheet (it might
end up hiding it by accident so turn it back on afterwards). I will name them H (For Horizontal)
and V (For Vertical) since I decided to move them like that, and I think it’s best to do the same
for you so it’s easier to follow along.

First, let’s cover what you can do on the Xsheet alone with this. You can select and drag the
keyframes up or down the column, copy them to other columns, and even do it with multiple
of them.
BUG WARNING: though I have witnessed it just refusing to drag them on the xsheet after I
select them, still unsure why, but I can still move them in the other windows mentioned
below.

You also might want to insert one new keyframe along the line, on the path the computer
already calculated, and you can do it by selecting that spot and right clicking and selecting
Set Key (z). You can also have one created by using the edit tool again at that point.

You can also click the little round arrow at the bottom of the column and it will proceed to
loop the existing animation going forward. It would not do anything with our example set up
but it can be very useful.

You should also keep in mind that the animation still happens even if there is no image
present at that frame, so you could make a frame a lot further down and the animation would
still interpolate accordingly, since it’s not bound to graphics just to the column itself. This can
come in handy for getting a loop to transition smoothly by copying the first Keyframe one
frame below the last frame of the column to have things pretend to loop.

You may also notice those arrows along the line between those two Keyframes. You can drag
them around too or right click on them for some presets. They can help you time things a bit
better, like where the animation speeds up and slows down

Advanced Tweening

There is a lot to cover when it comes to all the ways things can tween. So, let’s take it one
step at a time.

Motion Room

I thought about it and I believe the best way to cover the other options is to make a new
room with the minimum required windows. So, create a new room (I named it motion) and pull
out these windows:

Function Editor – Snapped left

Combo Viewer – snapped right (you can use just the Viewer if you want, it just doesn’t have
the toolbar)

Stage Schematic – snapped below the Combo Viewer

For me it looks something like this:

Few words about the new windows.

The Function Editor lets you see the exact values for each frame for each column and
manipulate them in more detail.

The Stage Schematic has a lot more uses than just for tweening but here you can see all the
objects that exist on the scene, even those that don’t show on the Xsheet.

Stage Schematic

If you are like me, the first thing you would think looking at the Schematic would be:

“AH, there is the camera!”

Or, in my screenshot the Ca~ra1 <_<

And yeah, the camera doesn’t show up in the Xsheet but it can be animated the same way as
any column. And, in general, anything that can be seen in the Stage schematic can be
tweened, including columns, invisible columns (Pegbars), special effects, cameras and even
the Table (base Xsheet) itself. All of these can also be seen in the Function Editor once they
are added.
TIP: You can select the elements in the schematic from the Viewer via the right click menu
too, so you can animate the camera without going to this room

There is another important function of the Schematic, and that is the parenting of elements.
So far, you can see that both the columns are parented to the Table since there is a line
connecting them. You can, however, drag out a new line from the blue dot on the V column to
the red dot of the H column. That will make the H column be the parent of the V column. The
moment you do that, you will notice the animation changed drastically. Now the bone (or
whatever you made) that moves up and down is now also moving left and right like it's
parent! You can delete any parenting by selecting the line itself and pressing delete on the
keyboard.

Parenting can come in handy when making a complex animation and animating it one limb at
a time.
FUNFACT: you can parent the camera for the ride as well, so you can do something like this
(though you probably shouldn’t):

In the chance you ended up dragging one of the elements too far up or down and lost track
of all the pieces, you can use the buttons near the bottom left of the schematic to get things
back in order. The first button will fit the view to make sure everything is visible, the second
one will focus on the currently selected one and the third one will auto-arrange them pretty
nicely. Next button will reset the view and the last one will show/hide previews of the
columns.

The buttons on the right will enable you to create a pegbar (works like an invisible column
which you can use just for parenting and animating multiple columns at once) or a camera.
The rest of the buttons are out of scope of this tutorial, but you may be able to figure out how
special effects work based on the stuff we learned here.

Function Editor

The function editor is probably one of the most intimidating parts of OpenToonz at a glance,
since it’s just a huge table filled with numbers. So, let’s explain what is what and make it less
scary.

First, on the bottom right part, you can see all the elements we can see in the schematic. Any
one of them may be marked as orange and will be visible in the editor. Clicking on the folders
will toggle their visibility and you can right click to toggle between seeing only the values that
have already been animated or all of them. You can toggle individual values as well with the
subfolders inside the folders.

For my example, I showed the H and V columns only and only the values I animated so far.
After that I manually had the V rotation value show too. I also selected the bottom right cell
(last N/S value of the V column.

To clarify N/S stands for North/South and E/W for East/West, which are the y and x axis for
animation. The rest of the values are pretty clear, except the SO… I don’t know what SO does
at all yet. I would like to know so I can add it here! The posPath is for when motion paths are
created but I won’t be covering that here.

Now, as for the table itself, the orange values are the keyframes we set in the Xsheet before,
on the frames indicated on the left. The gray values are the ones the program calculated
inbetween. You can type in a new number at any of these cells and that will create a new
keyframe for that value at that point, or change an existing one. You can also drag the cells
around by their left edge. You can for example try to add a few keyframes in the rotation
value and see that the bone will start rotating now.

There is another important part Once you select a keyframe other than first, on the top right
part you will see what it’s interpolation function is. It defaults to Speed In/Speed Out with
new keyframes (and you can change the default in file > preferences… (ctrl+u) > animation
category). There are many options and you can change the values they use for calculation for
each of these functions. Just don’t forget to click apply after any changes.

But… quite quickly you realize that doing so manually here is really impractical, since, unlike
the computer, these numbers mean nothing to us human beings. Luckily, there is a better way
to adjust all of this. Click the little unmarked button on the top right of the table to the right of
the interpolation functions to open the Function Curves window.

Function Curves

NOTE: this window cannot be snapped anywhere (in this version at least), so you will need
to live with it floating around.

This window contains all the same data currently visible in the Function Editor but in a form
we humans can perceive and understand and should be familiar to anyone that used any 3D
animation tools (like 3DSMax, Blender).
Chances are, the first time you start it up, it will look pretty empty, except for a grid and some
dashed lines. You can right click and select Fit to get a better look at what is there. You can
scroll and zoom with the mouse wheel from there.
You will probably see something similar to what I have here:

This view is vastly more practical than the table from before but it’s hard to tell due to the
lack of any buttons. Let’s go over what is what.

First off, each of these curves represent one of those animated values we have shown in the
editor beneath, so E/W, N/S and possibly rotation. You can see what each of them is by
hovering the mouse over them, and you can select them by clicking on them and they will be
red, like the one I have selected.

The left axis it the actual number from the table and the top axis is time or the frame it is at.
You can drag the purple line left or right to go through the animation, like you would on the
Xsheet.

Now, each of these lines is defined by those dots at the ends, which are the Keyframes we
created before. You can click and drag them up, down, left or right to adjust the shape of the
curve very easily and the change will right away be visible in the Viewer. You can drag the
whole curve as well, which will drag both of it’s Keyframes. And, at the top where the time
axis is, each keyframe has a little square and if you drag that square, ALL the visible
keyframes that exist on that frame will drag together.

Now, for really fine control, you can see those white lines that are coming out of the
Keyframes. Those are the curve's Tangents and you can drag the little dots at their end and
they will affect the shape of the curve and will update in the viewer right away too. Changing
these is the same as typing those vague numbers before but they now make sense to us

You can also ctrl+click anywhere on the line (on the dash too) and drag out a brand new
keyframe.

Right clicking on the curve will allow you to choose another interpolation function and it will
be a lot easier for you to tell what are the differences between each of them and how they
calculate their timings (though some of them require you to put numbers in there). The ones
you will mostly care about are the Speed In/Out, Ease In/Out, Linear and Constant. You can
also force a step so that it updates position only on those steps, so it will appear more frame
by frame.

Conclusion and Examples

I think if you can understand these tools you will be able to make animating a LOT easier on
yourself, and they will look a lot smoother too.

Here are a few sample animations created using only tools you should know by now (which,
looking at it is most of what i made so far):

The stuff that is mostly tween:

The stuff that is half tween half frame by frame:

The stuff that is mostly frame by frame but has some tweens:

Though for the last one, the only tween is the flip of the whole column once it gets to the half.
Which I wouldn't be able to do without the stuff mentioned in this tutorial

Hope this was helpful

Any feedback would be appreciated.

You can check all my other tutorials here.

Digital Art

animation application free motion tutorial tweening opentoonz

© 2017 - 2019 PowerOfSin 

∫

My second tutorial on OpenToonz!

After the 1st one and this one it's actually most of what I know about OpenToonz so far, yet I can already
make quite a lot of stuff with it

ADD TO FAVOURITES COMMENT

COMMENTS 22

Join the community to add your comment. Already a deviant? Sign In

Toxicoow Student Interface Designer

Is there a way to apply ease to every item quickly?

I have like 60 item on my project and doing one per one take way too long.

Reply Aug 22, 2018

PowerOfSin 
∫ Hobbyist General Artist
You can adjust your default tweening that will be set when you move things around
in:
file -> preferences -> animation tab -> default interpolation
As for doing it afterwards for a lot of them, there isn't an easy way, unfortunately.
60 of them is a lot, but I found that I would usually need to go and fiddle with them all
manually anyway to give them that extra manmade timing. And having the default
interpolation as non-linear can sometimes really mess with my transitions if I move
things around too fast.
If they are similar, however, you may consider setting one up and copying the
keyframes over. You can do it in the function viewer or on the timeline as well.

Reply Aug 22, 2018

BrightFire2002 Hobbyist Filmographer

Will this work with raster levels or is it just for vectors?

Reply Apr 8, 2018

PowerOfSin 
∫ Hobbyist General Artist
For general tweening, the type of level is irrelevant, since it's always the entire image
that moves.
Though, vector layers will scale and rotate with better quality than raster layers, but
it's rarely a big deal.

Reply Apr 8, 2018

BrightFire2002 Hobbyist Filmographer

Okay, thank you!

Reply Apr 8, 2018

Blueray-Treehouse Student General Artist

Hi! Wow this is extremely helpful! I’ve been struggling to understand this program so these
should hopefully help. Also, do you know of any good YouTube videos that help show you
how to animate using the program? I seem to be unable to find one.

Reply Jan 26, 2018

PowerOfSin 
∫ Hobbyist General Artist
Hope you will learn from it
Well, these tutorials are for general "how to" when it comes to using the software
itself, and the latest tutorial I made should allow you to understand the program well
enough to be able to animate up to level of examples near the bottom, providing you
know general animation principles (and you seem to know how to animate already).
Most youtube videos just cover how individual tools work, not step by step how to
make good animations in OpenToonz specifically. I see tons when I just enter
opentoonz in the youtube search, but most seem to be for older versions of the
software, and newer versions allow for a lot more.
I may make specific tutorials for that in the future, but I don't have any at the
moment. I do have some works that I have WIP in the description and were made in
OpenToonz, so you may at least see what the application is actually capable of (even
though it can do a lot more than this):

Reply Jan 26, 2018

Blueray-Treehouse Student General Artist

Okay thank you for the help. I can’t wait to start animating again. My toon
boom harmony free trial ran out so I kinda don’t have any programs that have
x-sheets aside from opentoonz. Good luck on your future works!

Reply Jan 27, 2018

PowerOfSin 
∫ Hobbyist General Artist
Thanks, to you as well
Wait, toonboom uses the xsheet now as well? I covered using the
timeline in OpenToonz in the latest tutorial, but it has both and are
easily toggleable.
Also, when I checked out some of your animations, I noticed you using
a certain animation method which I have not covered yet, but you
asked for some youtube videos so here:
www.youtube.com/watch?v=NLYv9I…
After going through my tutorials (both of them) you should be able to
figure this one out as well.

Reply Jan 27, 2018

Blueray-Treehouse Student General Artist

Hi, sorry. I think I accidentally meant that toonboom just uses

the time line. But thanks for the youtube video. Thank you for all
your help and do you have any tips and or thoughts on my two
lates animations and the one titled Let's Gooo?

Reply Jan 27, 2018

PowerOfSin 
∫ Hobbyist General Artist
Here, have some feedback:
"Where are you" looks good as far as animation goes,
but the timing is off, like it's rushed. It would have made
more impact and sense if the camera took it's time and
focused on those speaking for longer, and waited for
them to finish completely. You have a good set up and a
chance to extend the animation's duration for little to no
effort. Seems like a no brainer to me
"He lives" It looks real smooth and is kind of mesmerizing
to look at, but it isn't the best walk cycle. Mostly due to
the upper body just sliding stiff without any bounce or
secondary motion, but it extends to the movement of
legs being more like a slither or some kind of a sneaky
slide motion than an actual walk. But even with all that, it
kind of works, just probably not the way you intended xD
"Let's go" is actually rather nice, even if it is at a lower
framerate. The framerate is consistent and that makes it
work, even if doubling the frame count would make it
better. It's hard to find issues with it and it's quite fun to
look at. Only thing that may have made it better would be
a bit of a windup before the slither begins, just one frame
would do it at this framerate. Otherwise, best of the
bunch.
With that in mind, I do think for the last two you focused
more on enforcing smoothness and using the magics of
animation software instead of focusing on good timing
and good planning over smoothness. It may be more
time efficient but "Let's go" has great timing and
execution, despite the lack of smoothness, even if it took
you a long time to make. You can have both, obviously,
but you should always prioritize the quality of the motion
and the timing before making it smooth for the sake of
being smooth. With experience, speed and smoothness
will come, once you get used to the software and
visualizing the motion in advance.

Reply Jan 27, 2018

Blueray-Treehouse Student General Artist

Thank you for the feedback!!!! It was a major wake

up and I’ll definitely work on my timing and stuff.

Reply Jan 27, 2018

evilredcaboose Hobbyist General Artist

I'm going to have to get this program and start from the begining. Looks like it could be fun

Reply Aug 27, 2017

PowerOfSin 
∫ Hobbyist General Artist

It sure is, once you get used to it, but that part can be a bit rough

Reply Aug 27, 2017

GWKTM Hobbyist Filmographer

Tweening suits the environmental animation, text or other layout animation and
animatronics, better than character animation. Some of fully tweened characters look dumb.

Reply Jul 11, 2017

PowerOfSin 
∫ Hobbyist General Artist

Tweening is a useful tool and as any tool it should be used when appropriate. Fully
frame by frame can be just as bad as fully tweened, if the situation doesn't call for it.

Reply Jul 11, 2017

Akarichi-Dono Hobbyist Digital Artist

this so cool, but i will take a while before i can get my head around it.

Reply Jul 10, 2017

PowerOfSin 
∫ Hobbyist General Artist
Yeah, with OpenToonz being what it is, it's more about experimentation and
understanding what is what instead of just following prewritten steps. So there is no
need to rush it, just try things out as you learn them. Otherwise it's just a lot of
information to process, and it's best to try things out instead, and know what you are
doing.

Reply Jul 10, 2017

Akarichi-Dono Hobbyist Digital Artist

Well I did manage to find onion skin , still can't animate like I could in flash 8

Reply Jul 10, 2017

PowerOfSin 
∫ Hobbyist General Artist

it is very alien to a person used to flash. Just take it one step at a time
and figure out what is where

Reply Jul 10, 2017

Akarichi-Dono Hobbyist Digital Artist

i hope that i can learn it, so i can teach my friend who is good at
this stuff. he makes games in his spare time.

Reply Jul 10, 2017

PowerOfSin 
∫ Hobbyist General Artist
You might be able figure it out easier together.
Knowledge of making games makes understanding of
new applications easier.

Reply Jul 10, 2017

Join the community to add your comment. Already a deviant? Sign In

ABOUT DEVELOPER S PRIVACY POLICY

CONTACT ADVERTISE COPYRIGHT P OLICY

CORE MEMB ER SH IP TERMS OF SERVICE HELP & FAQ

CAREER S ETIQUETTE

©2019 DeviantArt All Rights Reserved