All language subtitles for 6.2 - The 3rd Dimension

Okay.

Now we're going to make our scene
three D well, ten layers into 3D layers.

Position them how we want.

Add a camera and animate that 3D motion.

Now, for the scene,
we want a pretty simple camera motion,

and we're just going to be moving
straight ahead to the center of the comp.

All of our UI elements
are going to stay still.

There'll be no movement of the UI
elements themselves.

But as we push in and get closer
to camera, we'll get that nice

parallax effect because some will be
closer to us than others.

And that doesn't make sense.

We're going to see that
by the end of this chapter.

So don't worry.

Now, I think it makes sense
to make a camera first.

We've got such a simple motion,
so I think we can animate that.

And then as we adjust
the positions of these columns,

we'll be able to see how they look in the
final animation in the camera right away.

Okay, So let's create a new camera.

We're going to layer new camera.

Camera one is a great name.

We're going to choose a preset, though.

Let's just go for a 50 mm lens.

That is always a good, safe option.

It is often known as a nifty 50
just because of how versatile it is.

You can use a 50 mil lens
to take portraits to landscapes.

Pretty much anything works,
so when in doubt, go for 50. Mm.

It's as close to an all purpose
lens as you can get.

Now. Also don't want any depth of field.

We don't want anything
in and out of focus.

Nothing blurry in our design,
everything with sharp.

So that's how we'll keep it

and we can always adjust this later
if we think we need to.

But especially at the start,
we don't want all of that blur

slowing us down
as it takes longer preview.

So 50 millimeter, no depth field.

That's all we need,
let's say. Okay. All right.

We'll make sure that camera is on
top of the last stack

and we can hide our style
frame reference as well.

We don't need to see that.

And now let's make our 3D layers.

So I think we can make
pretty much everything a 3D layer

except for our background lines
in that background.

So let's make all of these 3D and let's
change our views

from one view to two views.

Okay, I will make some extra room
for these views as well

because we were going to be doing

a decent amount in here
for the next little while.

So we need all the screen real estate
we can get. All right.

And this one set to custom view three.
That's great.

That's the one we want.

So on the left we have an active camera.

Camera one, which is what we'll render.

And on the right we have the overview
of everything in 3D space,

which at the moment is only 3D layers,
which are all in this one same flat plane.

Now we also can't see
the background layer,

and that's because it is a 2D layer.

Even if we go to the front view where
we would definitely see the background

behind it, it is not visible
because this only shows a 3D layers.

All right,
let's go back to Custom View three.

And now let's animate our camera.

Now let's open up it's position properties
and we're going to animate its

Z position,
which currently is at -2,666.7.

So that is how many pixels, I believe,
how far back it is from our layers,

which will currently have the default
position which will be zero Z position.

So I think we want a camera to start off
a little further back than it is now

and then push in and get closer
over the duration of our animation.

Now we haven't actually decided how long
we want this animation to be for comp.

Let's do 5 seconds. I think that work.

I'll put the end of the work area
there using the shortcut and let's zoom

in a bit as well.

So it fills up the majority
of our timeline. Okay.

Now let's keyframe
our camera position here right at the end.

In this view.

And we want
and a little bit more zoomed in.

We want the whole animation to roughly
look like this style frame.

So we'll get to this in between two
or 3 seconds, I think.

So the very end here at 5 seconds,
let's zoom in a bit further

and we can either do that

by dragging this number or we can drag
this control on the camera here.

I think it makes sense to drag it in here.

And you can see as we do that,
we get a bit of parallax

between the other layers,
which are the keyframes

and the after effects
layer designs as well.

And actually we want
those to be 3D as well.

So let's just turn the 3D layers
on those on as well.

And you can see as we do that
they pop into this view here

and they will also currently be at a0z
position.

All right, back to our camera
and let's find out what we want.

A maximum zoom to be.

Something around -2200 I think is good.

I might just change that.

So it's a nice round number
and then at the very start,

we're going to have our camera further
back.

Let's go -3300. There we are.

Now, it doesn't matter that the edges
of some of our UI elements are cut off.

We're going to be repositioning those
and drawing in the extra bits anyway.

I'll just try to imagine they're there.

All right,
so we've got a camera slowly zooming in.

Let's just watch it and see how it looks.

All right.

I think that's pretty good.
We cover a decent amount of distance.

We will definitely notice that,
but not too much.

It's not like
we're really pushing in really fast.

And of course,
this is really easy to change.

This is just two keyframes and adjusting
this won't really affect anything else.

So we animate.

Okay, now let's put our 3D layers
in actual 3D space.

Let's get a bit of distance
between each of them

so they're not all on the same one
flat plane here.

Now we'll start with UI one.

Now this is really the main
focus of our animation.

This is what we want our eyes to be
drawn to.

It's right in the middle.

So let's keep that where it is.

And a Z position of zero.

This is going to be our baseline

and we can move our other layers forward
from this or back from this.

Now, UI two over here

is obviously designed
to be a little bit closer than this layer.

You can tell by the size
and kind of where I've positioned them,

the intended Z position
that I wanted these to have.

So this one definitely feels like
it should be closer.

It is overlapping with other layers
as well.

So let's move this one forward,
bring up its position here

just so we can see the number

and we can click and drag on any of these
controllers to bring it forward.

I'll just drag on this one
on the custom view

and you see, as I'm dragging it
forward, it's getting more off

screen, it's getting further away
from where it was before.

But that's okay.

We can compensate that.

Let's get back to the start
and play it back

and we can add a little bit of parallax
in there.

It is kind of pulling away from the other
layers which are further behind.

It's moving faster because it's closer
to us, but it's not that noticeable.

Let's move it
a little bit further forward.

It's a -723
now let's move it up to -900 ish

there, that's a little more noticeable.

Okay.

But it does position it kind of outside
of that frame for most of the duration

of the animation, which is not where
we intended it to be in our design.

It was a lot closer to the center.

So let's move it further back
and I'm just going to make our sovereign

visible again so we can see that.

And obviously this isn't going to match
now that we have the motion of the camera,

but we can find a position where all
the other elements kind of fit together,

and that is almost about halfway
through to be closer to 3 seconds here.

So at around this time,
everything else is pretty much lined up.

So let's move this UI two element into
place and change it size so it matches it.

So let's move.

It's exposition with this arrow here
and then it's wide position up

and then to get it to be the same size,
I'm just going to open up scale

and scale it down to its approximate size.

Let's zoom in a bit
and make that a little bit more precise.

It doesn't need to be exact,
but there we go.

We can hide our style frame and playback.

We still have that parallax,
but the composition matches the design.

We intended, what we designed it for.

Okay, now
let's exaggerate that parallax a bit more,

and we can do that by pushing back
the depth of the UI elements around it.

So these are elements
UI ten and UI nine, UI nine.

Let's push that further back.

Let's push that way back to 1000.

We can see the numbers ticking over right
near the cursor over here.

When we move it around, around a thousand.

Let's see how that looks.

Okay, we're getting a lot more depth
there.

You can see that UI nine element moving
less because it is further away from us.

Now let's reposition it
by pulling up a star frame again.

This time
we are going to need to scale it up

and we'll just nudge it
with these 3D controllers here.

Looks like we scale it up
a bit too much and scale it down

and put it roughly
into place there by the style frame.

See how that looks?

All right.

That's pretty good.

Now, if you tend this one over here,
let's put it back.

Maybe not quite as far.

Maybe let's push it back. 500 there.

Great. I'm liking the depth
we can see there.

Ten on that style frame.

And let's move that back into position
and resize it.

That's close enough.

Now, this after effects layer that we have
here, let's move this way back.

Let's just push this back,
see how it goes to 4000 or so.

It gets pretty much hidden
underneath that layer.

That's great.

We can see it barely moving at all.

That feels really distant.

Now. Let's alter
it size to match the style frame again.

All right, that's looking good.

This whole bottom left corner
starting to have a lot of depth.

Now, this keyframe, while we're in that
area, let's push that back a bit as well.

Let's go to not quite 1765.

And while we're here, scale it up to fit
kind of zoom

in a fair bit, reposition at roughly,
scale it up too far.

Let's push that back there. Okay.

Hide the style frame.

Now, this bottom left corner
should be pretty close.

All right, That is good.

I'm really liking how all of its elements
are starting to feel separate,

like they're on separate planes.

And we really do have a 3D effect.

Now, just to finish up this area,
this little blue box here,

let's push this way back to around 3000.

It's much harder to to control here
when it's completely flat on.

So that's undo that
and I'm going to control it

over here in this window.

There we are, about -3000.

Reposition it to match the style
frame there.

Okay.
This whole bottom left section is done.

All right, Now on to our next element.

Let's just go down the right side here.

We'll start with UI five,
which is right at the top.

And I think we'll just try to go down
our layer stack now.

I think overall I want more things
move forward closer to us

because the closer to us
they are, the more motion they give us,

and that's
just a little bit more exciting.

We do need a balance, but
it's good to have things nice and close.

So this one, let's move a little bit
closer to us and to grab it here

on our Custom View three and let's drag
it forward around.

It's going to -600.

Some are about that height. Good.

We get some more motion in there.
I like that.

Let's align its position
with how it was in the style frame.

They're looking pretty good now.

Next we have UI three.

Now let's do something similar.

We want this more forward,
but we do want it at a different depth.

So let's drag this forward.

We don't want it a -600

because then these two will just look like
they're on the same flat plane.

It's going to maybe -400.

That should be different enough.

And with these main UI elements
that have all of a detail on them

with the crafts and the charts,

I really don't win
these too far back or too far forward.

These ones are kind of for us to take in.

We have much simpler UI elements
that we can push really far back

and really far forward

and they're going to give us
a lot of interest in the movement.

These ones are all going
to have animation in them as well.

So I don't want too much distraction
happening at the very edges of our screen

where we really want

the audience looking in the center

and we're going to get more in depth
into that later.

But that's what I'm considering.
When I'm placing these in 3D space.

I don't want them too far apart.

I do want them to feel like
they are separate

from each other on separate planes,
but not so far out.

And also from here on in.

We don't need to reposition
these with our style frame.

After each one.

It is going to be a process of back
and forth anyway.

Getting to see what feels right in
3D space and then adjusting that position.

So for the rest of these elements,
let's just move them around in 3D space,

move their Z position to Z depth
until we like it

and like how much motion and depth
we're getting out of them,

and then we'll reposition them
to fit the style frame at the end.

Okay, UI for let's push this one
a bit further back.

Let's go 1000.

So that's the same distance
back as you want to was forward.

So that's kind of the limit.

We've got about 1000 pixels
either way of center where we're allowing

these detailed UI elements to be know
that it needs to have a specific number,

but I'm just not pushing it any further
than I've already pushed this one forward.

Now, this yellow keyframe here
we have on the right,

let's push that pretty close towards it.

Let's go 1000.

That almost takes it off the edge.

Let's go even further.

Right off the edge, 1500.

And that one's going right off the screen.

Let's just push
that further back into the composition.

Let's take a look at how this is looking.

All right. That is pretty good.

We have a lot of depth
over here on the right.

The composition isn't as good as looking
a bit messy, a little bit cluttered,

but the depth is great.

We've got elements, some really far away,
some really close.

We really feel that 3D
and that's what this shot is all about.

Next, that the white keyframe

that we have down here now,
I think this one should be a bit distant.

So we've got the contrast between
this one keyframe that's really close

and we don't start to think
all the keyframes

are a lot more closer to us
and we sort of recognize a pattern.

So let's push that back around a thousand.

Now, this yellow UI element UI seven down
here, let's go pretty far back as well.

Let's go 1000, maybe 500.

So we get some contrast between that
and the UI that's in front of it

here when they separate like that pushes
it really far.

Let's just move it down
and across with the X and Y position.

So it kind of see the depth there.

We're getting a nice bit of contrast

in depth in comparison to this
UI with the keyframe in front of it.

Now this big gray one, UI six.

Let's push this pretty far
back to maybe 3000 there.

All right, lots of depth there
and this last gray one at the top.

Let's push this one back
to maybe around 3000 as well.

So close then.

I think that is every element
we've repositioned.

Maybe you can see over here on the right,
we have a lot of variation in depth.

But more importantly, what does it feel
like over here in this window?

I think it's looking good.

We've got a lot of depth
across the whole scene.

I think my favorite part is over here.

I love how close this yellow keyframe is.

The fact that it does
go completely off screen.

I kind of like
and it gives us so much depth

because we've got layers
really far behind this, really close.

We get a lot of motion

and essentially what we've done here
by pushing these around is

we have scattered these throughout these
ad space, the Z position in depth.

So everything is moving
at a very slightly different speed.

Nothing I don't think
is at the exact same distance.

Some are pretty close,

but it means every single one of them
is moving at a different speed.

Well,
they're not technically moving at all.

They're staying still and our camera
is moving closer, giving the illusion

our main elements,
those five detailed ones with the graphs,

they're more interesting
and they're sitting more close together.

But the simple, more basic ones
like the key

and these boxes in the background,
they're much further, much closer.

So they add a lot more of that depth.

We don't want our main ones
with the graphs and the details

moving too much because like I said
earlier, that would be distracting.

And of course we're going to fill this

with some background animation
and all those lines raining down, too.

And also remember,
like I've mentioned before a few times,

I have animated this scene multiple times

before in preparation, so I know
approximate where I want things to go.

You will almost certainly have more back
and forth, trying different things,

moving back and forth.

The elements in Z position, trial
and error, moving them around,

playing it back and seeing if we'll try it
to you and feel right in this case.

I mean, do they feel separated enough
from the other elements?

And because all of this is decided
by that camera motion,

we can come back and change
the position of these

in touch base any time of the UI elements
and even that camera motion to.

And that won't really affect
the timing at all.

Now let's just reposition
these UI elements to get closer

to that style
frame will make our stuff invisible again.

Navigate to where it was pretty close.

I remember it was just before 3 seconds
and just move the Y and exposition

in of those layers.

We've just adjusted and scale them down
so they match and we should get

a more pleasing composition
and keep the depth we like as well.

All right.

Now it's looking better,
a little more composed.

Let's play it back and see how that looks.

Wonderful.

Now, obviously we can't match the style
frame exactly because the movement changes

how it's composed
and how it looks across these 5 seconds,

but it matches the composition
overall better and spread out in a way

that still looks random
but is more considered visually.

Now, I'm not worried at all
about some of these lines being cut off.

When we go to animate each one
individually, we're going to fix that.

At this point, I'm just worried about
the depth and the position in 3D space.

And does the overall animation
look good too?

I like the speed too.
I like where things are sitting.

And one thing
I do think I might want to change this

yellow keyframe over here,
being really close to us gives

I think maybe we need something
a bit like that over here on the left.

So let's actually get this eased keyframe
over here and we're going to make a copy.

We're going to duplicate that layer.

Okay.

And let's push this forward, way forward.

Let's go all the way up.

So it feels really, really big.

It's at 1800 now, almost.

Let's slide it over
so it doesn't go L frame too quickly.

Let's move

over to the last frame of the composition
and then slide it over from there.

Maybe move it down a bit,
maybe a little too far over.

Let's just adjust it slightly there.

I think that gives us some nice depth.

Okay. Now, pretty much
all of our elements are here.

We'll add those gradients online
training in the background, of course.

And next we're going to add the motion
inside all of these UI elements.

But the major motion of this
project is done

and that is all done with two key
frames on a camera, just two key frames.

We get all this depth

and all this motion now, all of our layers
open, showing the scale of position.

I'm going to select them on.

The shortcut for that is control
or command A

and then I'm going to hit you
on the keyboard and that hides them all

there.

I'll do select them all with control
or command shift.

I know it's much tidier and now we can
move on to the more familiar animation of

the UI elements inside.