Was this video useful to you?
Rate this video from 1 to 5.


3D Path Trajectories

Learn the basics of 3D path trajectories, keyframes, control points, pegs, Show Control display, preferences and the Default Separate Position for Pegs preference.

About the Author

Matisse Verheyden

Matisse Verheyden

Toon Boom Software Instructor - Animator, Compositor and Designer

Toon Boom Animation

Toon Boom

Video Transcript

Hi and welcome to this fourth and last section of this tutorial about multiplane and camera. In this video, we're going to talk about what a 3D path is, how to create it, where to apply it and where not to apply it.

So what is a 3D path?

Basically, a 3D path links the three axes together, so the X, Y and Z. Meaning that when you create a keyframe on a node put on 3D path, this key will be added to the X, Y, Z at the same time. So they will share the same velocity, and therefore allow you to create a very smooth animation path. This fits exactly the purpose of what we are trying to achieve today, which is to move our character animation through the multiplane scene or 3D space that we just created and have it interact with background elements.

We're going to activate our animated character later, by selecting it either in the timeline or in the Node view and clicking on [A]. Now let's add a peg on it. So by keeping it selected, I'm going to go down in the timeline and press on the Add Peg button. You can also do the same thing by just keeping your element selected and clicking on [Command] or [Ctrl] + [P]. It's on this peg that we're going to activate the 3D path.

So to do so, let's go to the Properties window of our peg and under Position, switch from Separate to 3D Path.

If you're not using the Premium version of Harmony, you'll be able to get access to its Properties by selecting that player on the Timeline, right-clicking and going to Layer Properties in the menu or pressing on [Shift + E].

We're now going to move my character right over the ramp, where she's supposed to be.

As you can see, she's overlapping the building. Whereas, I actually want her to be behind the ramp. And so I'm going to go in the Top view and locate where that building is. And then I'm going to use the Maintain Size tool to move that character just behind the building. I'm now going to analyze the animation of my character and the camera movement. And Im going to decide where I put my keys on my peg.

Something to remember is that you don't want to put keys just when there's a change of movement, but you also want to put keys when there's a hold.

Let me show you what I mean by that.

This pose is the last one before my character leaves the ramp. So if I was to not put a key there and put a key when she lands on the next building, the interpolation would move the drawing and cause it to not be properly placed in this case. I'll bring up my Timeline view toolbar and click on the icon to add the keyframe. I'll then identify the first drawing, where she lands on next the building, locate where that building is in the Z-axis, move my character with the Maintain Size tool, so that she interacts with that building and keep on doing so for the next poses.

All right, let's have a look.

Ok so we don't call this 3D path for no reason.

Let's actually have a look at the path that we created.

To do so, you just need to select the peg that has a 3D path on it. Make sure that in your Camera view you have your Camera view toolbar activated. If not, you can right-click and make it appear. And then when it's done, you'll want to click on the Show Controls button. You'll then see this orange path appear both in your Camera view, your Perspective view or your Top and Side view, for those of you who don't have Premium. The yellow circles that you see on this path represent the keys that are on your timeline.

Now what's truly great about a path like this is that you can modify the shape of the path, without creating new keyframes. In order to do so, you'll hover over the path and you'll click on [P]. This will add a pink point right under your cursor. This is a control point and it's a point that you can move around and shape. And you'll see that it's going to deform the arc of your path that was previously set. But you'll also notice that it doesn't create any extra keyframes on your timeline. So it's an extra tool for you, to twist and curve the animation path of your layer, while keeping the keyframe number to a minimum. It is not possible to do so with pegs that are put on Separate.

Now you may be wondering why the path is so high up in this case and kind of dislocated from the actual animation. In this case, it is totally normal, but let me explain.

In order to have the path follow the animation of a character or a layer closely, you'll want to set the pivot point of the peg, that has the 3D path on it, right over your asset. For example, if I want to have a character walking across the screen, I'll put the pivot of the 3D path peg, let's say, at the level of the feet of the character. Now let's also say that this character is a cut-out character. Well that would work very well because the peg that has a 3D path on it is also a peg that moves the character, right?

Whereas, in this case, with traditional animation, the movement that the character is making is actually happening just because you've drawn the character at a different place. This might sound a bit confusing, but you can get a better understanding of it by doing a simple exercise.

Create two new layers, one that will be animated with the cut-out animation tools and the other one that will be aniamted traditionally. On both, put a peg that will be on a 3D path and look at the path that you just created.

Ok, so let's end this tutorial with some extra knowledge that will be very relevent to you.

So in order to not make mistakes and have full control over which peg is in 3D path. We're going to go into our Preferences and in the General section, you're going to make sure that you have the Default Separate Postion for Pegs. Therefore, all the pegs that you will be creating will always have the separate position on them and you'll just have to turn on the 3D path on the ones that you really want to use the 3D path on.