Rigging and Rolling a Cube in After Effects

How hard could it be to animate a cube rolling correctly in After Effects? The answer, as we found out, is very hard. 

This tutorial starts out by showing you how to approach animating something like a cube once you have the rig in place, because honestly we're not sure you would want to attempt animating this without a rig. You could do it using a bunch of nulls or something, but that would be painful. So if animation is your thing just grab the rig and get crackin'!

But… if you are a budding expressionista, then maybe you want to know how Joey made the rig. In that case, watch the whole video and he'll explain the entire process, including how he first tried and failed to rig this bad boy. Check out the resources tab for all the expressions you'll need to re-create this cube rig on your own.

If you have any questions, click over to the Q&A tab to post them. Other students can answer you, and we'll put our team on the case to try and get you a solution ASAP. 

Download Project Files

EXPRESSIONS

Watch the tutorial for how this all wires together, but here are the expressions: 

BAdjustY Null – Y Position: 

// Get Box Dimension

boxD=thisComp.layer("BCTRL_01").effect("Box_Size")("Slider");

b=boxD/2;

// Get Box Null Y-Position

bNullY=thisComp.layer("BCTRL_01").position[1];

// Define Corners

tl=[-b,-b];

tr=[b,-b];

bl=[-b,b];

br=[b,b];

// Convert to Comp Space

tlc=thisComp.layer("BRotate_01").toWorld(tl);

trc=thisComp.layer("BRotate_01").toWorld(tr);

blc=thisComp.layer("BRotate_01").toWorld(bl);

brc=thisComp.layer("BRotate_01").toWorld(br);

// Grab Y-Values

tly=tlc[1];

trighty=trc[1];

bly=blc[1];

bry=brc[1];

// Find the highest value (lowest position)

maxY = Math.max(tly, trighty);

maxY = Math.max(maxY, bly);

maxY = Math.max(maxY, bry);

bNullY-maxY

BRotate Null – Z Rotation

startPoint=thisComp.layer("BStart_01").position[0];

endPoint=thisComp.layer("BCTRL_01").position[0];

boxD=thisComp.layer("BCTRL_01").effect("Box_Size")("Slider");

d=endPoint-startPoint;

(d/boxD)*90;

    • I followed this tutorial to the letter and somehow my box is moving much higher along the Y postion than it needs to so the box appears to be bouncing. Has anyone else had a similar problem or know what I might be doing wrong? Thanks

    • Have you tried downloading the project files to check your expressions against the ones in the project? It could just be one tiny typo and it messes the whole thing up. Also, check out this tutorial which has another way to skin this problem: https://www.youtube.com/watch?v=sVg8jnajLSk

      • Hi, could you pls check that the project file opens on Mac? it doesn't seem to be a proper ZIP file... just a blank white sheet icon. This seems to be a reoccurring problem with most of the tutorial project files. Thanks!

      • Sorry to hear you're running into trouble with the project file. I just refreshed it and it should now download as ZIP. If you're still running in to trouble, please drop us a line at [email protected] and we can email you a copy directly.

        • My box is doing the opposite. When I just finish to write the BYAdjust expression. The box is going down when the corner touchs the floor. And going up when the box is straight. What is going wrong?

        • Hi. Please download the project files and compare the expression found there with the one you've created. There's likely one or two lines with subtle differences that are causing the issue.

          • I just wanted to drop by and mention that new website design - IS AWESOME. Super handy. All the sections separated and coherent. Very neat and smart. Sorry for spam.

          • Glad to hear you're enjoying the new site!

          00:00:00,131(upbeat digital music)
          00:00:08,056(swoosh)
          00:00:11,095(upbeat electronic music)
          00:00:16,692- What's up?
          00:00:17,525Joey here at School of Motion and welcome
          00:00:19,157to the 19 of 30 days of After Effects.
          00:00:21,435Today's video is going to be half an animation class
          00:00:25,015and half a class about rigging and expressions.
          00:00:27,653What we're going to try to do is tackle the problem,
          00:00:29,965which is actually much trickier than I thought it would be.
          00:00:32,524How do you make a cube or a square that can roll accurately?
          00:00:36,691You know, if you think about it,
          00:00:37,960there's a lot of logistical problems involved
          00:00:40,216in doing something like that.
          00:00:41,929First, I'm gonna show you how to animate
          00:00:44,040the cube once you have it rigged.
          00:00:45,673Then for the geeks out there,
          00:00:47,039I know that there are some geeks out there,
          00:00:48,491I'm gonna walk you step-by-step through how I built a rig.
          00:00:52,085I'm gonna show you the expressions
          00:00:53,705and explain how they work, then of course,
          00:00:56,381I'm gonna give you everything you need
          00:00:58,037to build the rig for free.
          00:00:59,516Or if you just want to practice your animation skills,
          00:01:01,827you can grab the completed rig too.
          00:01:04,265All you need to do is sign up
          00:01:05,957for a free student account so you can grab
          00:01:07,711the project files from this lesson,
          00:01:09,085as well as stuff from any other lesson on this site.
          00:01:12,410Now, I want to go into After Effects
          00:01:13,351and show you some cool stuff, so let's go do that.
          00:01:17,494For the first part of this video,
          00:01:18,711we're just gonna talk about how to animate a cube
          00:01:22,328kind of tumbling once you have the rig set up.
          00:01:26,362And then, after we do that, I will walk
          00:01:28,208through how i actually came up with it and made this rig
          00:01:31,077and I'll copy and paste the expression code on to the site.
          00:01:33,672So if you guys don't want to watch that part,
          00:01:36,128feel free to just copy and paste the code
          00:01:38,368and it should work for you.
          00:01:41,002There's a lot of things going on here
          00:01:43,214that make this animation work and the rig is part of it.
          00:01:47,088There's also just a lot of animation principles
          00:01:49,550and really precise key framing
          00:01:51,917and animation curve manipulation.
          00:01:54,052I wanted to talk about that first.
          00:01:56,244What I have here is a copy of the scene
          00:01:58,585with no animation on it.
          00:02:00,658And I do have my rig set up.
          00:02:03,296The way this rig works, is there's a bunch of nulls,
          00:02:06,306and the nulls all do different things
          00:02:08,126and we'll talk about that in the second part of this video.
          00:02:10,307But the one that you control is this null here,
          00:02:13,945Box Control 01, and I labeled this 01,
          00:02:17,504because in the demo I had two boxes,
          00:02:19,672so I had two sets of controls.
          00:02:20,932So this null literally, if you just move it left to right,
          00:02:25,099like this, the box rolls correctly,
          00:02:28,242based on where that null is.
          00:02:30,399So if you just wanted to box to just kind
          00:02:32,384of simply roll across the screen,
          00:02:34,519all you need to do is move the null, it's really easy.
          00:02:37,254I wanted it to feel like the box got kicked or something
          00:02:39,667and sort of landed like this.
          00:02:43,663The good thing about having a rig
          00:02:46,421that takes a lot of the manual labor out,
          00:02:48,537is I literally only have to keyframe one thing.
          00:02:52,219The X position.
          00:02:53,489The rotation and really the trick
          00:02:55,819is that the box has to move up and down a little bit
          00:02:58,823as it rotates to always keep it touching the ground.
          00:03:02,397If you look at this box of just Y null right here,
          00:03:06,293that actually moves up and down.
          00:03:09,618Let me move this box back and forth.
          00:03:12,139If you keep an eye on it, it's this null right here.
          00:03:15,080It actually moves up and down as the box rolls.
          00:03:19,264That's kind of what's doing the trick there.
          00:03:21,224Why don't we start out by just animating
          00:03:22,823the X position of this box.
          00:03:24,777We'll have it start off-screen, I'll put a keyframe here.
          00:03:27,150And then, let's go forward a couple of seconds,
          00:03:32,108and we'll have it roll out to the middle of the screen.
          00:03:35,547And I want to make sure that it lands
          00:03:37,224totally flat on the ground.
          00:03:39,449It's gonna be pretty tricky to do that,
          00:03:41,247because all I'm animating is the X position
          00:03:43,503and I can kind of eyeball it and say, oh, that looks right.
          00:03:45,865But how do I actually check and make sure
          00:03:48,232that it's flat on the ground?
          00:03:49,806Let me unlock this null.
          00:03:51,806This null here, the B Rotate, for Box Rotate,
          00:03:54,956if I open up the rotation properties of that null,
          00:03:58,472the Z rotation has an expression on it.
          00:04:01,337And that expression is what's actually setting
          00:04:04,013the rotation and then I have my box parented to that null.
          00:04:08,509So that null is rotating, the box is parented
          00:04:11,427to the null, and that's why the box rotates.
          00:04:13,344What I can do is, I can just reveal the rotation property
          00:04:16,917and slowly adjust my X position
          00:04:22,673until I get this to be a flat zero.
          00:04:26,420And so I can just click on the X position
          00:04:28,298and use my arrow keys.
          00:04:29,623And you can see if I hit up and down,
          00:04:31,578it actually jumps over and misses
          00:04:34,628the perfectly zeroed out rotation.
          00:04:37,116But if you hold command and use the arrow keys,
          00:04:39,890it adjusts the numbers at sort of a smaller scale,
          00:04:43,749so now I can really precisely dial that in.
          00:04:46,977Now I know that the box is flat.
          00:04:49,893If we just do a quick grand preview of that,
          00:04:52,165you've already got your box kind of tumbling
          00:04:53,951with two keyframes.
          00:04:55,046That's why I love rigs and expressions,
          00:04:57,531because it takes a lot of time to set them up,
          00:05:00,145but once you do, you can get all kinds
          00:05:01,967of really complex movement with almost no effort.
          00:05:05,130Think about the speed of this, right?
          00:05:10,800If someone kicked this little box guy
          00:05:12,880and he was gonna land over here,
          00:05:15,121what would happen, and this is where having
          00:05:18,142some animation training and you know,
          00:05:20,462reading a few books about animation
          00:05:22,925and just kind of learn as much as you can,
          00:05:24,897it can help you understand
          00:05:26,338how you should animate things, right?
          00:05:27,934If you kick something and it's tumbling through the air,
          00:05:30,945what basically happens is every time it makes contact
          00:05:33,772with the ground, it's gonna lose some of its energy.
          00:05:38,777Because this box is right now, constantly in contact
          00:05:42,373with the ground, it's gonna be losing momentum
          00:05:44,358all the way through the animation.
          00:05:47,414What it should be doing is moving quickly at the beginning
          00:05:49,772and then slowly, slowly, slowly coming to a stop.
          00:05:52,950Let's select those keyframes, hit F9,
          00:05:55,576to easy ease them.
          00:05:56,693Let's go to the Animation Curve Editor
          00:05:57,983and let's bend the Bezier, like this.
          00:06:01,373What I'm doing is I'm saying,
          00:06:02,474the first keyframe, there is no easing out.
          00:06:04,904It just pops right out really quickly
          00:06:06,464and then that last keyframe, right here,
          00:06:08,763I want it to ease into very slowly.
          00:06:12,034Now it looks like it got kicked
          00:06:13,621and it's sort of slowing down there.
          00:06:18,892There's a lot of stuff wrong with this right now.
          00:06:21,497Obviously, when the box tips over here,
          00:06:26,641it shouldn't slowly settle into the ground like that.
          00:06:29,976Because the box has to follow the rules of gravity,
          00:06:32,637it's gonna tip and land and
          00:06:36,481the way I had it work in this demo,
          00:06:40,683and don't worry about the bouncing,
          00:06:41,667I'll show you all that too.
          00:06:42,608It sort of lands here and
          00:06:46,825doesn't quite have enough energy
          00:06:48,301and then it bounces back the other way.
          00:06:51,055Let's make it do that.
          00:06:53,136What I actually want it to do is when it gets here,
          00:06:55,121I want the box to be a little bit further,
          00:06:58,572I'm just adjusting the X position
          00:07:00,966so it ends up not quite at a 45 degree angle.
          00:07:04,888The weight is still on the left side of the box,
          00:07:07,679so it's gonna have to fall back down.
          00:07:09,586Now let's look at this.
          00:07:12,649It's getting there, it's better, okay?
          00:07:16,993But, it feels like the box is defying gravity,
          00:07:20,321like it's just slowly lifting up its foot
          00:07:23,115at the end there.
          00:07:24,427And so what I really want is, I want that last move.
          00:07:29,271I just want this move to feel like
          00:07:32,600that's where all of that energy really starts
          00:07:36,180to slow down.
          00:07:37,884What I want, at this point of the animation,
          00:07:40,073I just don't want that box moving quickly.
          00:07:42,439What I'm gonna do is, I'm gonna hold command,
          00:07:44,327I'm gonna put another keyframe here.
          00:07:47,209And I'm gonna scoot that keyframe backwards.
          00:07:50,719And what this is doing, is it's letting me create
          00:07:55,315a type of curve where there's a really fast move
          00:07:58,243at the beginning, and then after a certain point,
          00:08:00,314it flattens out very quickly.
          00:08:03,166And it's easier to do this with three keyframes
          00:08:05,610than it is with two.
          00:08:06,443Now if I play this, you can see
          00:08:09,099that it's sort of, all that momentum dies out
          00:08:12,370kind of all at once.
          00:08:14,628I'm just gonna scoot this over a little bit
          00:08:16,499and try to find a sweet spot for it.
          00:08:21,000I might want to move this a little bit,
          00:08:25,036maybe so that the box is lifted up a little bit
          00:08:29,063before it really starts to lose its energy.
          00:08:32,471So it's getting there.
          00:08:36,930But what's happening is, when this box does this
          00:08:39,333final sort of fall right there,
          00:08:41,761it's easing into that keyframe, which I don't want.
          00:08:44,858I need to manipulate these curves,
          00:08:46,310I need to bend them and really make them.
          00:08:49,674And you can see, we're starting
          00:08:51,217to get some weird little points and things like that.
          00:08:53,046And that's gonna be okay.
          00:08:55,819Normally when you guys have seen me
          00:08:57,611in the Animation Curve Editor,
          00:08:58,831I try to make the curves really smooth
          00:09:00,430and avoid stuff like this.
          00:09:01,740That is a rule that just in general
          00:09:04,337can make your animations feel smoother.
          00:09:05,928When things are obeying gravity and hitting the ground,
          00:09:09,850that's a different story.
          00:09:11,692Because when things hit the ground, they stop instantly,
          00:09:14,333and the energy transfers instantly to a different direction.
          00:09:17,000When you have stuff like this, you are gonna have
          00:09:19,652little points in your animation curves.
          00:09:22,523Now it's feeling better, but it's happening too quickly.
          00:09:26,525I just need to flatten it out a little bit.
          00:09:30,862That's better, okay.
          00:09:34,106And really you can see how
          00:09:38,009I'm just doing little adjustments
          00:09:39,411to these Bezier curves
          00:09:40,528and it really can make or break your animation.
          00:09:43,918This just takes practice, just watching your animation
          00:09:46,616and figuring out what the problems are with it, okay?
          00:09:49,743I like how this part feels.
          00:09:52,280And then it leans up and I want it to hang there
          00:09:55,528for a second and then, I want it to start coming back
          00:09:59,498the other way.
          00:10:00,358I'm actually gonna move this keyframe a little closer.
          00:10:03,188And now, it's gonna tip back this way.
          00:10:06,318Let's try 10 frames.
          00:10:09,031So I hit Shift + Page Down.
          00:10:10,748Jumps me forward 10 frames.
          00:10:11,888And sometimes I just like to work
          00:10:13,961right in the Curve Editor, 'cause it's just
          00:10:16,064a nice visual way of working.
          00:10:17,247Hold Command.
          00:10:18,468Click on this dash line and it'll add another keyframe.
          00:10:21,518And then I can pull that keyframe down
          00:10:23,348and I want that cube to over shoot
          00:10:26,032and come back a little too far.
          00:10:28,434And the way this is gonna work, is it's gonna ease out
          00:10:31,477of that first keyframe, and it's actually going
          00:10:35,727to ease into this keyframe, but what I need to do
          00:10:37,935is go to the frame where it hits the ground
          00:10:40,437and make sure that my curve is not easing at that point.
          00:10:44,663And this is a little confusing.
          00:10:46,092It's actually hard to explain, but you want to make sure
          00:10:48,823that as the cube falls, it's accelerating.
          00:10:51,924And it has to accelerate an acceleration
          00:10:54,273and animation curve means it's getting
          00:10:56,384steeper and steeper and steeper and steeper.
          00:10:58,414Once it hits the ground and it starts to come back up,
          00:11:01,015now it's fighting gravity and that's when
          00:11:03,063it can start easing.
          00:11:06,432You can help it if you need to.
          00:11:08,823You can put a keyframe right here
          00:11:10,902and then you have control over this
          00:11:14,074and you can make it even steeper if you want to.
          00:11:17,067I'm gonna try without doing that.
          00:11:18,682Let's see what we get.
          00:11:19,666It leans and comes back, okay?
          00:11:23,257Cool.
          00:11:24,963Now that lean, I like what it's doing.
          00:11:29,774I kind of want it to happen a little bit faster.
          00:11:31,909I'm just gonna move all these keyframes closer.
          00:11:36,999Alright, maybe not that fast.
          00:11:39,764You can really just, depends how anal retentive you are,
          00:11:43,443I guess, I could really do this all day long.
          00:11:46,342So the box hits and leans and I'm just gonna
          00:11:49,968pull this handle out a little bit more.
          00:11:55,190There we go.
          00:11:56,558And you can see it almost makes it.
          00:11:59,154And it's even, this is unintentional,
          00:12:00,912I didn't do this on purpose, but,
          00:12:02,416it even leans a little bit farther,
          00:12:04,641like it's trying to reach and it doesn't quite.
          00:12:07,436And it's kind of interesting, so I'm gonna leave that,
          00:12:10,820but I just want to make it not so strong.
          00:12:13,468There we go.
          00:12:16,577So falls and then it comes back.
          00:12:18,658It comes back this way and then I'm gonna have it
          00:12:21,538overshoot one more time.
          00:12:23,423Each time there's a move, it's gonna take less and less time
          00:12:26,996because you know, the distance it has to fall
          00:12:29,995is getting less and less.
          00:12:33,145Let's just go forward a few frames and let's move
          00:12:36,162this keyframe back to here, so it's just barely
          00:12:40,350off the ground.
          00:12:43,543Let's pull these handles out, let's double check.
          00:12:45,433When the box is touching the ground.
          00:12:49,319So now, the box is touching the ground on this frame,
          00:12:51,876but I can see that this curve is starting
          00:12:55,194to slow down already.
          00:12:56,443I need to make sure it doesn't do that.
          00:12:58,546I'm gonna pull this Bezier handle out so it's steeper
          00:13:01,180on the point of the animation curve
          00:13:03,579where the box is touching the ground.
          00:13:06,762And then, it's gonna one more position here
          00:13:09,914what's actually gonna settle on to the ground.
          00:13:13,151For this, I need to make sure that it's actually sitting
          00:13:16,363on the ground, so I'm gonna do that little trick,
          00:13:18,266where I select this value, I hold Command,
          00:13:20,724and I'm just gonna nudge the values until I get
          00:13:24,173to 360 degrees, which means it's flat on the ground.
          00:13:27,978That's play our animation and see what we've got so far.
          00:13:31,976Cool.
          00:13:32,809There's a few little timing issues, I feel it's too slow
          00:13:35,499at the end, so that's an easy fix.
          00:13:38,020I'm just gonna grab these last few keyframes.
          00:13:40,181Hold Option and scale those last few, back a few frames.
          00:13:45,939Cool.
          00:13:48,697Alright, now this animation, you know,
          00:13:50,802that little hang right there, maybe it's a little too long,
          00:13:54,162but overall, this feels pretty good.
          00:13:56,732It gives you a sense that there's weight
          00:13:58,627and that the box has momentum and all of those things.
          00:14:02,079And what's great, is we've literally only had
          00:14:04,708to keyframe one property to get all
          00:14:06,935of this cool, complex motion.
          00:14:08,673So now, let's talk about having the box bounce a little bit,
          00:14:14,185by doing the Y position.
          00:14:16,662I know that in the end, I'm gonna want it to land here.
          00:14:20,421So that's the final Y position.
          00:14:22,783Why don't we start by saying, okay,
          00:14:25,790let's have the box bounce, maybe this is where it lands
          00:14:29,598on the first bounce.
          00:14:30,724I'm gonna put a keyframe there on Y position.
          00:14:32,542Then I'm gonna go back to the first frame
          00:14:34,316and I'm gonna raise up the box.
          00:14:37,413How high do we want it to be when it comes, maybe there.
          00:14:40,584Maybe that's good.
          00:14:45,558Now let's easy ease these keyframes.
          00:14:47,406Let's go into the Graph Editor.
          00:14:49,072Let's talk a little bit.
          00:14:50,544This is a topic that actually,
          00:14:52,384this is one of the first things that I would teach
          00:14:55,631students at Ringling when we're getting into After Effects,
          00:15:00,144how to do a bouncing animation.
          00:15:02,280There's some rules that bounces follow.
          00:15:04,367One of those rules is, as something is falling,
          00:15:07,429if it's starting up here and someone drops it,
          00:15:10,330let's pretend someone dropped it or that this is
          00:15:13,122the apex of a bounce that we can't see back here.
          00:15:16,132It's gonna ease out of that bounce.
          00:15:19,282It's not going to ease into the floor though, right?
          00:15:23,359Gravity makes things accelerate until they hit something.
          00:15:27,051That means, that handle needs to be shaped like this.
          00:15:31,057So that fist fall needs to look like that.
          00:15:33,644Now, the ball's going to bounce a little bit.
          00:15:35,703And the rules of the bounce are essentially this.
          00:15:40,527The height of each bounce is going to decay
          00:15:43,781following a decay curve.
          00:15:46,990You can Google bounce decay curve,
          00:15:49,122I guarantee you'll find like a little drawing
          00:15:51,160of what it's supposed to look like.
          00:15:52,718And then when you're key framing it,
          00:15:54,351and using the Animation Curve Editor,
          00:15:55,869there's some rules you can follow
          00:15:57,510to make it look more natural.
          00:15:58,926One of those rules is each bounce
          00:16:00,846is gonna take less and less time.
          00:16:02,722This bounce, starting at frame zero,
          00:16:05,811hits the ground at frame 11.
          00:16:07,613What that means is that this bounce,
          00:16:10,513if this was a full bounce, would have taken 22 frames.
          00:16:14,213So that means the next bounce has
          00:16:16,225to take less than 22 frames.
          00:16:18,190Why don't we say 10 frames.
          00:16:19,558I'm gonna jump forward 10 frames,
          00:16:20,949put a keyframe here.
          00:16:22,536And now I'm just gonna bend these Bezier handles, like this.
          00:16:29,706And the rule you want to follow is
          00:16:32,361when the box or whatever is bouncing
          00:16:35,361comes into the ground and you can see
          00:16:38,506the angle this Bezier is making,
          00:16:40,774it's gonna bounce off the wall at the same angle,
          00:16:44,502so you don't want to do this, you don't want to do this,
          00:16:46,783you want to basically, a good trick,
          00:16:50,050you put your play head right on that keyframe
          00:16:52,021and then you try to make this symmetrical, okay?
          00:16:54,977And then, you want to do the same thing here.
          00:16:57,093You want to make this angle more or less match
          00:17:02,360this angle here.
          00:17:03,990So now let's do a little RAM preview.
          00:17:06,029So bounces, and that's actually kind of cool.
          00:17:08,533The bounce is actually happening kind of slowly,
          00:17:11,054but we're out just luckily that
          00:17:12,628it's almost like the box bounces
          00:17:14,660and catches itself like a little ballerina.
          00:17:17,252I love when I do things accidentally
          00:17:19,363that are actually pretty cool.
          00:17:20,893I just want to see what happens if I take
          00:17:23,142these keyframes now and scale them just a little bit.
          00:17:31,239There we go, that's great.
          00:17:32,999Now what's happening is that it's landing on the ground
          00:17:35,419slightly before and then catching itself.
          00:17:38,442So I just moved these keyframes a little bit.
          00:17:40,429If you wanted to, you can even add one more bounce,
          00:17:44,127which might be kind of cool.
          00:17:45,325This bounce from here is frame 10
          00:17:48,120to here is frame 19.
          00:17:50,163So this bounce was nine frames.
          00:17:51,479The next bounce needs to take less than nine frames.
          00:17:56,011You could figure out exactly the right number of frames
          00:17:59,020if you wanted a perfectly, physically accurate bounce.
          00:18:01,569We're just sort of eyeballing it here
          00:18:03,690so we're gonna make it five frames.
          00:18:05,754So we'll go one, two, three, four, five.
          00:18:07,499Put a keyframe there.
          00:18:08,925We'll just have it do a little bounce.
          00:18:11,920You saw what just happened, I pulled this Bezier handle
          00:18:14,247and screwed this thing up.
          00:18:15,475If that happens, it means the Bezier handles
          00:18:17,616on this keyframe are locked together.
          00:18:19,560If you hold Option, now you can break those handles.
          00:18:22,883And make sure that the angles are symmetrical.
          00:18:28,669There we go, and let's see now.
          00:18:32,395Yeah, like that, it's fantastic.
          00:18:34,090It's funny, like, this looks totally different
          00:18:36,845than the demo that I showed you guys
          00:18:38,183at the beginning of this video.
          00:18:40,743It's kind of nice, it's kind of quirky.
          00:18:43,347Again, I wanna just call out that all we've keyframed
          00:18:47,036is X position, Y position on this null,
          00:18:49,358and all of that rotation and all that stuff
          00:18:51,983is happening for free, which is great.
          00:18:54,893Let's turn on some motion blur.
          00:18:59,032We're gonna get a nice, little cute animation.
          00:19:01,253For some reason, I've been into really cute little shapes
          00:19:03,405and eyeballs and stuff like this lately.
          00:19:07,162So that's that.
          00:19:08,224That shows you how once you have this rig,
          00:19:10,333you can really, really easily animate this stuff.
          00:19:15,340If you look at the demo that I did,
          00:19:17,804there's a little bit more sort of fancy composing going on.
          00:19:21,468This giant box is animated the exact same way.
          00:19:24,658The only extra thing was I used an effect called CC Bend It.
          00:19:29,575And that effect just bends layers.
          00:19:32,284I wanted that one 'cause it's so big to fill,
          00:19:35,174a little bit jiggly.
          00:19:37,020And so I just used that to bend it a little bit.
          00:19:38,694That's a pretty simple trick.
          00:19:40,588Now, let's get into, and I'm gonna use this opportunity
          00:19:44,787to say, if you do not care for expressions,
          00:19:47,387hopefully you'll grow out of that.
          00:19:51,889We're gonna get pretty deep in the woods now.
          00:19:55,205Now this rig,
          00:19:57,716it's not that complicated.
          00:20:01,228The code for it is a little bit long,
          00:20:04,179but it's not as math heavy as I thought it was gonna be.
          00:20:07,604Originally when I set out to do this, this is what I did.
          00:20:11,100I took a box and I put a little guide at the bottom of it
          00:20:15,278and I just rotated it just to see what happens.
          00:20:19,766Obviously, what you notice, is that the box as it rotates,
          00:20:24,625it breaks the ground plane.
          00:20:26,403And so I knew I need to lift that box up somehow
          00:20:29,405based on the rotation.
          00:20:31,654When it's rotated, you know,
          00:20:34,721zero degrees or 90 degrees,
          00:20:36,838it needs to not move.
          00:20:38,626As it rotates, it needs to go up and down.
          00:20:42,295At first I thought maybe I could write an easy expression
          00:20:45,231where as the rotation goes up to 45.
          00:20:48,802'Cause 45 degrees, that's where the box
          00:20:51,172is gonna have to lift up the most.
          00:20:54,007I thought maybe I could just write an expression
          00:20:56,090where you know, the Y position of the box
          00:20:59,138is based on the rotation of the box.
          00:21:01,188The problem is that there's not a really simple relationship
          00:21:06,082between how high the box needs to be
          00:21:08,354and how much it's rotate.
          00:21:10,427If it's rotated 10 degrees, it still needs to lift up,
          00:21:13,879but as it's rotated 20 degrees, it doesn't need
          00:21:17,251to lift up nearly as much.
          00:21:19,008There's not a one to one linear relationship
          00:21:21,908between rotation and height.
          00:21:24,867The next thing I tried was very painful
          00:21:28,329and I tried figuring out some trigonometry
          00:21:31,885and I don't know, that probably says a lot more
          00:21:34,499about me than about the way you should
          00:21:36,760go about doing this, but I was trying
          00:21:38,411to use trigonometry to figure out,
          00:21:39,782can you figure out based on the rotation
          00:21:43,592how much taller this cube is getting.
          00:21:48,142I got close with it, but maybe I'm not good enough
          00:21:50,907at trigonometry and I'm sure that there's a way to do it
          00:21:53,289with cosines and sines and tangents and all that.
          00:21:57,050Then I remembered, and this is where just knowing
          00:22:00,560what's possible with expressions can be amazing.
          00:22:03,145I remembered that there's some expressions
          00:22:05,395in After Effects, that will let you, for example,
          00:22:08,733figure out where on screen this point of this layer is.
          00:22:13,661No matter where this cube is rotated,
          00:22:16,968it can tell me where this corner is, right?
          00:22:19,633So as I rotate it, I can have a value
          00:22:21,938that tells me exactly where that corner is.
          00:22:24,835What I could do then, is put an expression on the cube
          00:22:29,310to figure out the top left, top right,
          00:22:32,091bottom right, bottom left, to figure out
          00:22:33,699where those corners are on screen at all times.
          00:22:36,476Figure out which of those corners is the lowest,
          00:22:41,390and then, figure out the difference
          00:22:42,986between where that corner is and where the center
          00:22:45,271of the box is.
          00:22:47,093I don't know if that made any sense,
          00:22:48,644but we're gonna start making this expression
          00:22:50,297and hopefully it'll make sense as we go.
          00:22:52,397Let's start, I hit F1.
          00:22:54,788I brought up the Help for After Effects,
          00:22:56,702which is funny, because I actually did that
          00:22:59,175when I was trying to figure this out.
          00:23:00,668So let's make a null, new Null Object.
          00:23:03,744We are gonna call this the B Rotate Null.
          00:23:07,741And I'm just gonna parent the box to it.
          00:23:09,821The reason I'm doing that is because,
          00:23:11,915whenever I make a rig, I try to think ahead
          00:23:14,302and say, you know, what?
          00:23:15,990This box is not always going to be the box
          00:23:18,178that I'm gonna want.
          00:23:19,738Sometimes I'm gonna want a bigger box
          00:23:21,216or a smaller box or a red box.
          00:23:23,041I'd rather rotate a null and then have the box
          00:23:26,732just parented to it.
          00:23:28,671I rotate the null, there you go.
          00:23:31,522The next null I'm gonna make.
          00:23:33,363Let me just duplicate this.
          00:23:34,548I'm gonna call this B Y Adjust.
          00:23:38,288This null, what I need this to do,
          00:23:41,448and I'm gonna parent the rotate null to it.
          00:23:44,053This null, I'm going to need to separate the dimensions
          00:23:47,265and have the Y position adjust
          00:23:50,201based on the rotation of this null here.
          00:23:54,008If I rotate this, I want this null
          00:23:57,104to automatically rise up like this,
          00:23:59,292so that the bottom of the box,
          00:24:01,099wherever that happens to be, lines up right on that line.
          00:24:06,059That make sense?
          00:24:07,187There we go.
          00:24:08,235Let's rotate that back to zero
          00:24:09,444and let's set that back to 540.
          00:24:12,384And now we're gonna start talking about expressions.
          00:24:18,372Here's what we need to do.
          00:24:19,332First thing we need to do is figure out
          00:24:21,050how big this layer is, this little box layer.
          00:24:24,466Because what I need to do is tell After Effects
          00:24:27,779to sort of track the top left corner,
          00:24:29,933right corner, bottom right, bottom left.
          00:24:31,777And I can't do that if I don't know how big the box is.
          00:24:34,697Well, I was very smart when I made this box,
          00:24:37,737and I made it 200 pixels by 200 pixels.
          00:24:40,689Very easy numbers.
          00:24:44,122What I can do is, I'm gonna put an expression
          00:24:46,456on the Y position.
          00:24:47,597So let's hold Option, click Stopwatch and let's get rolling.
          00:24:52,015And we're gonna define some variables first.
          00:24:56,139The first thing we need to know
          00:24:57,295is what is the length of one side of the box.
          00:25:00,873What are the dimensions of the box.
          00:25:02,456I made a variable called Box D for dimensions.
          00:25:06,924And I'm gonna say that equals 200.
          00:25:12,196If I know that one side is 200 pixels,
          00:25:16,206what are the coordinates of each of these corners?
          00:25:19,327The way After Effects works, is the anchor point
          00:25:23,051of my layer is the zero, zero points of my layer.
          00:25:27,823And you can see the anchor points right in the middle.
          00:25:30,379As we move to the left, our X value
          00:25:32,818is gonna turn negative.
          00:25:34,897And as we go right, it's gonna turn positive.
          00:25:37,953For Y values, if we go up, it's gonna turn negative
          00:25:41,074and if we go down, it's gonna turn positive.
          00:25:43,390What that means is that this corner here
          00:25:45,015is negative 100, negative 100.
          00:25:48,389And then this corner is positive 100, negative 100.
          00:25:52,319That's how you can figure out where the corners are.
          00:25:54,878Because when the anchor point is right in the middle
          00:25:58,486and we want to go back half the length of the box,
          00:26:02,212I'm then gonna say, D equals Box D divided by two.
          00:26:07,731That D, that is now a variable that tells me
          00:26:10,021how far to move to find these corners.
          00:26:13,180Now, I'm going to define the actual coordinates
          00:26:17,194of the corners.
          00:26:18,904I'm just gonna say top left, TL equals.
          00:26:22,974And what I want to do is use an expression
          00:26:26,188called toWorld, and I'll explain why in a minute.
          00:26:29,780But the first thing I need to do,
          00:26:31,347is say that I'm looking at
          00:26:35,255the layer B Rotate.
          00:26:38,787Because B Rotate that null, that is what's going
          00:26:41,325to actually rotate, not the Box one layer,
          00:26:45,245but the Rotation null is going to rotate.
          00:26:48,284As it rotates, let me just hit Enter for a minute.
          00:26:52,157As this rotates, right?
          00:26:56,808The corner of that null, which just happens
          00:27:00,151to correspond perfectly to the corner of my cube,
          00:27:03,499that is going to move through space.
          00:27:06,190I'm looking at the layer, B Rotate.
          00:27:09,633And I'm going to use an expression called toWorld.
          00:27:15,087And what toWorld does is it translates
          00:27:17,478a coordinate on a layer.
          00:27:19,615For example, this bottom right corner
          00:27:21,939is gonna be 100, 100, on that layer.
          00:27:25,754And as it rotates, it's gonna move through space.
          00:27:30,790The coordinate of that point doesn't change
          00:27:33,968on the layer itself, but it does change
          00:27:36,577as to where it exists in After Effects' world.
          00:27:38,902toWorld converts that point
          00:27:41,201into a world coordinate for me.
          00:27:43,379It's the layer, period, toWorld,
          00:27:46,504and then you open parenthesis,
          00:27:48,453and then you tell it what coordinate to convert.
          00:27:51,752The first coordinate I want it to convert,
          00:27:54,058is the top left corner.
          00:27:57,422So the top left corner remember,
          00:27:58,712is negative 100, negative 100.
          00:28:00,741I don't want to just type in those coordinates,
          00:28:03,559I want it to get the coordinates from this variable here.
          00:28:06,877So if you remember, D is our box dimension divided by two.
          00:28:11,462So, D actually equals 100 right now.
          00:28:13,809If I type in, and you have to do this in brackets,
          00:28:16,617'cause we're gonna put in two numbers.
          00:28:18,141If you said, negative D, comma, negative D,
          00:28:22,571close the brackets, close the parenthesis,
          00:28:24,230semicolon, there you go.
          00:28:26,430That's how you have to structure this.
          00:28:29,725Again, it's the layer, toWorld, and then the coordinate
          00:28:33,315on that layer you want to convert into world coordinates.
          00:28:36,556Now let's do the top right.
          00:28:37,983And I'm just gonna copy and paste this
          00:28:39,653so I don't have to type in every time.
          00:28:41,330We paste it, we change the variable name
          00:28:43,742to Top Right.
          00:28:46,454So now, the top right coordinate
          00:28:48,181is 100, negative 100.
          00:28:51,607That first number is positive.
          00:28:54,520And then we're gonna do the bottom left coordinate,
          00:28:58,407so that's gonna be negative 100, 100.
          00:29:01,155So now it's negative, positive.
          00:29:05,786And then finally, bottom right,
          00:29:09,182is gonna be positive, positive.
          00:29:13,248And what makes it even great,
          00:29:15,250what makes it even more confusing and awesome
          00:29:17,142is that when you get into Cinema 4D,
          00:29:20,272it doesn't work that way.
          00:29:21,820It actually, the X and the Y values,
          00:29:24,521they're reversed, I believe.
          00:29:28,153That might see, now I just said it,
          00:29:29,866now I'm self doubting, so someone correct me
          00:29:32,288if I just made that up.
          00:29:33,508Now what we've got is we've got these four variables,
          00:29:35,513TL, TR, BL, BR.
          00:29:37,594And those coordinates are literally world coordinates now.
          00:29:43,006Which is fantastic.
          00:29:44,828The next step is to figure out
          00:29:49,894which of those coordinates
          00:29:51,526is the lowest one.
          00:29:54,590Let me just show you here.
          00:29:55,547If we have, for example, let's say we
          00:29:58,525rotate this like this, okay?
          00:30:00,903The bottom right corner is the lowest one.
          00:30:05,821If we keep rotating it, though,
          00:30:07,234now the top right corner is the lowest one.
          00:30:10,981We need to know which coordinate is the lowest one.
          00:30:15,026And so what we're gonna do, we're gonna make
          00:30:17,680some new variables here.
          00:30:21,478What I basically want to do,
          00:30:22,882each of these variables, top left, top right,
          00:30:25,312bottom left, bottom right, these contain two numbers.
          00:30:28,440They contain what's called an array
          00:30:30,399and it's an X position and a Y position.
          00:30:32,783And I don't really care what the X position is,
          00:30:35,191I just care what the Y position is.
          00:30:37,917So let's pull out just the Y position here.
          00:30:41,542What we can do is, we can do it two ways.
          00:30:45,556I could just keep adding to this expression
          00:30:48,623and tweak it a little bit,
          00:30:49,673but to make it less confusing,
          00:30:51,424I'll just do it as a separate line.
          00:30:53,318Why don't we say, the top left Y position
          00:30:58,563equals that top left variable, and then in brackets, a one.
          00:31:04,079Now, why a one?
          00:31:04,930Well, when you have an array with two numbers, right?
          00:31:08,822This variable TL right now, if you were to look
          00:31:11,781at actually what the value of it is,
          00:31:13,502it would look like this.
          00:31:15,039It would be negative 50, comma, negative 50, right?
          00:31:18,662X then Y, and I don't care about X,
          00:31:21,467I just want Y.
          00:31:23,175This value here has a number
          00:31:26,231and this value here has a number,
          00:31:28,744sort of like and index and it starts at zero.
          00:31:31,804If I want the X value, I would make this zero.
          00:31:34,420If I want the Y value, I would make it one.
          00:31:36,937So that's what I'm doing.
          00:31:38,426There we go.
          00:31:39,900Now I'll just copy and paste this.
          00:31:41,974Three more times and I'll just change the name.
          00:31:44,796So this is gonna be TR Y position,
          00:31:47,230BL Y position, and BR Y position.
          00:31:52,674And then I'll just change these variables
          00:31:54,429so that we're getting the right ones.
          00:31:57,935Now, I have these four variables here,
          00:32:01,585which only contain one number, they Y position
          00:32:03,909of the corner.
          00:32:05,341Now, let's figure out, which one of these
          00:32:07,023is the lowest on screen.
          00:32:09,760So here is what you can do, there's a bunch
          00:32:12,098of ways to do it.
          00:32:13,730You could write out a bunch of if, then statements,
          00:32:16,631that sort of check.
          00:32:18,101If this one is lower than this one, then let's use that.
          00:32:20,853And then check the next one.
          00:32:22,405If this one is lower than this one.
          00:32:23,943There's a little shortcut.
          00:32:25,436There's a command called Max
          00:32:29,301and there's another one called Minimum.
          00:32:30,960And it basically lets you compare two numbers
          00:32:32,947and it would just tell you which one is the higher or lower
          00:32:35,023based on what you want to know.
          00:32:36,496What I'm gonna say is the lowest Y equals,
          00:32:40,531so I'm making a new variable.
          00:32:42,088And to find that lowest Y, I'm gonna use
          00:32:44,595a command called Math dot max.
          00:32:48,219And when you use this Math command,
          00:32:52,047you have to capitalize Math, just one
          00:32:54,010of these weird confusing things.
          00:32:55,122Most things are lower case, that one's upper case.
          00:32:57,577And then dot max.
          00:32:59,610The math command, which actually,
          00:33:01,616if you click on this little arrow here,
          00:33:03,765it's in the Java Script math section here.
          00:33:07,196And you can see a whole bunch of things you can use.
          00:33:09,414And so we are using this one, Math dot max.
          00:33:13,557And you give it two values and it tells you
          00:33:15,703which one is the highest, or the maximum.
          00:33:19,186Now, it would be counter intuitive,
          00:33:21,714we want to know which one is the lowest on screen.
          00:33:23,941Remember, in After Effects, the lower you go on screen,
          00:33:27,175the higher the value of Y gets.
          00:33:30,133And when you go up on screen, Y gets negative,
          00:33:32,512so the lower the value is.
          00:33:33,714That's why we're using max.
          00:33:35,051And I'm just gonna check between the first two variables.
          00:33:39,685TL Y position, and TR Y position.
          00:33:46,479Now, the lowest Y variable is going to contain
          00:33:49,860whichever these numbers is the highest,
          00:33:53,929meaning the lowest on screen.
          00:33:56,318So now, we need to check the other variables.
          00:33:59,930I'm just gonna do the same thing again.
          00:34:01,366Lowest Y equals, and this is a cool trick you can do
          00:34:05,925when an expression is.
          00:34:07,721I now want to take whatever the variable currently is,
          00:34:11,472lowest Y, so I can actually use the variable
          00:34:14,743to examine itself.
          00:34:17,471It's like being John Malkovich or something.
          00:34:19,124And now I'm gonna add the next variable,
          00:34:21,853the bottom left Y position.
          00:34:26,632And then I'll do it one more time.
          00:34:27,797Lowest Y equals Math dot max,
          00:34:33,253look at the lowest Y and then examine
          00:34:35,363the bottom right Y position.
          00:34:39,047And as I'm doing this, I realize
          00:34:40,510I didn't name these variables correctly.
          00:34:43,902These should be bottom right Y position,
          00:34:47,369there we go.
          00:34:49,463Cool.
          00:34:50,296I hope you guys can understand what's going on here.
          00:34:52,577I'm just literally just kind of iterating
          00:34:54,839through each one of these variables
          00:34:56,211to compare all four of them and figure out in the end,
          00:34:59,671which one is the lowest on screen.
          00:35:03,027And I probably should have named this differently.
          00:35:05,405I'm looking for the lowest on screen,
          00:35:07,505but actually, the highest number.
          00:35:09,641Lowest Y actually contains the highest value,
          00:35:13,499but it's the lowest position on screen.
          00:35:15,926Now, after all this work, we have a variable that tells me
          00:35:19,176where on screen the lowest point of that cube is.
          00:35:23,961No matter how I rotate it.
          00:35:25,995The next thing I could do is I can take that value, right?
          00:35:30,932And let's talk through this a little bit.
          00:35:35,648And actually, what just happened is.
          00:35:39,416Let's see what happens if I rotate this now.
          00:35:41,530You can see that some stuff is starting to happen.
          00:35:44,470I haven't really set this up correctly yet,
          00:35:46,030but this is what I want you to think about.
          00:35:48,538The B Rotate null
          00:35:53,922is right in the middle
          00:35:56,021of our layer.
          00:35:57,648And what I really want to find out is
          00:36:04,130what is the difference between the bottom
          00:36:06,831of our layer when it's on the floor
          00:36:09,655and the bottom once it's rotated.
          00:36:12,320So what I'm gonna do is I'm gonna make one more null,
          00:36:16,629and I'm gonna call this Box Control, Box C-t-r-l.
          00:36:21,874And I'm gonna just temporarily parent this to my box
          00:36:25,713and position it
          00:36:31,042at 100 comma 200, there you go.
          00:36:34,106So now it's at the very bottom of the box.
          00:36:37,010Then I'm gonna unparent it,
          00:36:38,884and now I'm gonna parent the box.
          00:36:40,525Sorry, I'm gonna parent the B Rotate null.
          00:36:43,970Nope, see I'm telling you guys lies.
          00:36:45,907Box is parented --
          00:36:47,774I knew I was gonna stumble through this, I knew it.
          00:36:50,006The box is parented to the rotate null,
          00:36:52,172the rotate null is parented to the Y adjuster.
          00:36:54,303And the Y adjuster, I now want to parent to the box control.
          00:36:59,282So now I've got this nice parenting chain.
          00:37:01,857And that's gonna screw some stuff up, but don't worry.
          00:37:04,441And I want the box control to end up right in the middle,
          00:37:08,291right on this floor right here.
          00:37:10,497And let's go to the Y adjust
          00:37:11,932and just turn this off for a minute.
          00:37:13,994Let's think about this.
          00:37:17,398If my box control, and now everything's all messed up,
          00:37:21,260but don't worry about it yet.
          00:37:22,164If what I want to find out is,
          00:37:23,957my box control null is here, okay?
          00:37:27,172I know where it is and I'm also gonna know
          00:37:29,737where the lowest point of my box is.
          00:37:33,749if the box is rotated, let me turn off
          00:37:38,258this expression for a minute, so I can demonstrate this.
          00:37:43,283If my box is rotated like this,
          00:37:47,414I want to measure the distance between
          00:37:50,231my box control null and whatever the lowest point
          00:37:53,959of that box is.
          00:37:56,906Does that make sense?
          00:37:57,856Because then, I can adjust it up by that amount.
          00:38:01,884That's the key to this whole setup here.
          00:38:04,511What I need to do now is go into this expression
          00:38:09,652and I need to add something up at the top here.
          00:38:14,213I need to find out the Y position of my box control null.
          00:38:17,635I'm gonna say control Y position equals,
          00:38:22,932and I'm gonna pick whip this layer
          00:38:25,947and I'm going to use the toWorld command,
          00:38:28,901just like I did here.
          00:38:31,298So that way, if I make this into a 3D layer,
          00:38:35,880or if I more a camera around it, it should still work.
          00:38:38,852So toWorld, parenthesis, and the coordinate
          00:38:42,944I want to put in there is zero comma zero.
          00:38:47,064Because I want to find out where the anchor point
          00:38:49,277of that null is.
          00:38:50,662So there you go.
          00:38:52,373Now, I have two values.
          00:38:54,959I have the control points Y value, which is here,
          00:38:58,511and then I have the lowest point of the cube's Y value,
          00:39:02,013which is here.
          00:39:03,903And what I want to do is subtract one from the other.
          00:39:08,924And honestly I can't remember which one to subtract,
          00:39:12,610so let's just try this way.
          00:39:13,832Let's just try subtracting control Y position
          00:39:18,478minus lowest Y.
          00:39:22,126Let's see what that does.
          00:39:25,783Alright, so we are --
          00:39:27,322I know what's going on here.
          00:39:28,326See this little warning.
          00:39:29,448Let me try and troubleshoot this with you guys.
          00:39:31,619It's telling me, error at line zero,
          00:39:34,307so I know that it's something going on.
          00:39:39,097Actually, I don't think it's line zero,
          00:39:40,479but let's take a look at this.
          00:39:42,084The Y position of layer two, blah, blah, blah,
          00:39:45,350must be of dimension of one not two.
          00:39:47,330What's going on here?
          00:39:51,498I set this variable incorrectly
          00:39:52,425to control Y position equals
          00:39:54,801the box control layer, toWorld,
          00:39:59,155and the problem is that this toWorld
          00:40:00,648is actually gonna give me an X and a Y.
          00:40:03,945And all I want is the Y.
          00:40:05,256Remember, to get the Y you just add bracket one,
          00:40:08,216there we go.
          00:40:09,656So now, as I rotate this, it's going.
          00:40:12,785There you go, it's working.
          00:40:14,747Dear god.
          00:40:15,693This is actually the --
          00:40:19,393This is sort of how I acted once I finally figured this out.
          00:40:22,147I couldn't believe that it worked.
          00:40:25,969Let me try and just walk through it one more time
          00:40:28,174because I know that this is probably gobbly gook
          00:40:31,215in your head right now.
          00:40:32,506I have a null, the box control null.
          00:40:35,707Let me actually move this.
          00:40:40,671Let's see here, where's my box control, there we go.
          00:40:43,067I just adjusted the Y position of the BY adjust null
          00:40:47,049so that I could put that box control null
          00:40:50,724right on the bottom.
          00:40:52,299If I rotate this cube now, right,
          00:40:55,076it always stays on the floor.
          00:40:56,938Remember the reason that's happening
          00:40:58,922is because I'm tracking the four corners of it
          00:41:02,101and wherever those four corners are,
          00:41:03,486I'm figuring out which corner is the lowest.
          00:41:05,759Right now it's this corner.
          00:41:07,454But here, it's this corner.
          00:41:09,096And whichever corner's the lowest,
          00:41:10,598I'm figuring out how far below my control null
          00:41:14,051is going and then I'm subtracting that amount
          00:41:17,982to bring it back up to level with the floor.
          00:41:20,768Boy, I really hope you guys could understand this
          00:41:23,810because I know that if you've never used expressions,
          00:41:26,952it probably isn't making a lot of sense
          00:41:29,130and you may have to watch this video
          00:41:31,049a bunch of times to really comprehend this.
          00:41:33,024What I'd love you guys to do is actually
          00:41:35,404go through the painful process of typing
          00:41:37,762in the expressions.
          00:41:38,791For some reason, typing them in helps
          00:41:40,181solidify the concepts in your mind.
          00:41:44,754Now it's working.
          00:41:46,051Now I've got this rotation null
          00:41:48,828that is going to, you know,
          00:41:51,189give me this automatically, super simple.
          00:41:53,408The next step is, how do I make sure that
          00:41:57,160as I move my control null around,
          00:41:59,238it rotates the correct amount.
          00:42:02,789Because, you know, what you could just try doing
          00:42:04,575is say, let's put a position key frame here
          00:42:07,121an another one and move this.
          00:42:08,868And then, we'll just put key frames on rotation.
          00:42:11,045And we'll just have it rotate 90 degrees.
          00:42:13,703If you're lucky, it'll work.
          00:42:16,942But you can see even in this example,
          00:42:18,828it looks like it's kind of gliding across the ground,
          00:42:22,084it's not stuck to the ground.
          00:42:24,797And it's gonna be very hard to manually
          00:42:27,150get that to work right, especially if you're trying
          00:42:30,710to do kind of more complex movements like this
          00:42:33,757and have it land and then stop for a minute
          00:42:36,639and fall back.
          00:42:37,719I mean, that's gonna be really tricky.
          00:42:38,624I wanted the rotation to happen automatically
          00:42:41,889based on where this thing is.
          00:42:44,288What I figured was that each side of this cube
          00:42:49,633is 200 pixels, so if it's gonna rotate 90 degrees,
          00:42:53,591it's gonna move 200 pixels.
          00:42:56,243All I needed to do was make an expression
          00:42:58,295that would rotate this 90 degrees
          00:43:00,941for every 200 pixels I move this.
          00:43:04,646How do I know that I've moved it 200 pixels?
          00:43:07,521First I need a starting point to measure from.
          00:43:12,410I made another null, one more null here,
          00:43:16,934and I called this box start position.
          00:43:22,781I'm gonna put this null level with the ground here.
          00:43:26,944I'm gonna look at the Y position of box control,
          00:43:29,368it's 640, so I'm gonna put this at 640.
          00:43:34,293This box control null, or this starting position null,
          00:43:38,341all it's gonna do is it's gonna give me a reference point
          00:43:40,278where I can measure the distance between this
          00:43:42,103and my control null and that will control
          00:43:45,047the rotation of the box.
          00:43:47,069And this is a pretty simple expression.
          00:43:48,807I'm gonna put an expression on rotation
          00:43:53,125for the B Rotate null.
          00:43:55,035And what I want to do is compare two points.
          00:43:56,939So the start position equals
          00:44:02,295this null dot, and again,
          00:44:05,835I'm gonna use this toWorld command
          00:44:08,044just in case.
          00:44:09,710This will work, but as soon as you make things 3D
          00:44:13,250and you start moving a camera around,
          00:44:14,941if you don't have that toWorld,
          00:44:16,793your values aren't gonna be correct.
          00:44:18,570I'm gonna say, toWorld, parenthesis, brackets,
          00:44:21,236zero, zero, zero.
          00:44:22,862Sorry, just zero, zero.
          00:44:24,917I'm just looking at the anchor point of this.
          00:44:27,230And then I'm going to --
          00:44:30,695I'm just gonna add the bracket zero to this.
          00:44:35,115Because now, all I'm concerned with
          00:44:37,309is the X position, right?
          00:44:38,944The distance between this and this,
          00:44:40,595but only on X.
          00:44:42,333And I didn't include Y, because I knew
          00:44:45,109if this box was bouncing up and down,
          00:44:47,208I didn't want that to throw off the rotation.
          00:44:49,386I only want the rotation to be based on horizontal movement.
          00:44:53,090So that's why that bracket zero's there.
          00:44:56,393So then, the same thing for the end position equals.
          00:45:00,631End position equals, we're looking at the control null,
          00:45:05,048right here.
          00:45:05,923So we're looking at this dot toWorld,
          00:45:10,987parenthesis, bracket, zero, zero,
          00:45:14,368close, bracket close, parenthesis,
          00:45:16,749and then add that, bracket zero to the end
          00:45:18,947and now I've got start position
          00:45:20,429and the end position.
          00:45:21,494One thing that used to trip me up all the time
          00:45:24,049is that when you use the toWorld command,
          00:45:27,717or expression, you don't use it
          00:45:29,931with the position property of the layer.
          00:45:33,956You don't do this toWorld.
          00:45:37,494That won't work.
          00:45:38,958What you have to make sure you do
          00:45:40,228is you actually need to pick whip
          00:45:41,978and select the layer itself and then use toWorld.
          00:45:45,547If you're having trouble, make sure you're doing that.
          00:45:48,293And then all I need to do is figure out
          00:45:50,933how far this thing has moved.
          00:45:53,662I have this start position, I have the end position,
          00:45:55,446so I'll just say, start position minus end position,
          00:45:59,836so that's now the difference, right?
          00:46:02,269The distance that's been moved.
          00:46:04,159I'm gonna put that in parenthesis
          00:46:05,582and then I'm going to multiply it by 90.
          00:46:14,421Let's see here, I'm missing a step, I know what it is.
          00:46:19,221Let's think about this for a minute.
          00:46:20,849If this thing moves, if our control null moves
          00:46:24,440200 pixels, that means that it should rotate 90 degrees.
          00:46:31,016What I actually want to find out
          00:46:32,516is how many times this thing has moved 200 pixels away.
          00:46:37,374And then multiply that number by 90.
          00:46:39,533I actually need to get the difference
          00:46:41,607between the start and the end,
          00:46:43,658divide by the length of one side of the box,
          00:46:46,969which we know is 200, and then multiply
          00:46:50,779the result of that by 90.
          00:46:54,968There we go.
          00:46:55,973Now, if I move this box control null,
          00:46:58,036it's kind of interesting.
          00:47:00,471It's rotating, it's just rotating the wrong way,
          00:47:04,133so let me multiply it by negative 90 instead.
          00:47:09,636Now let's move it, and there you go.
          00:47:14,306And now you've got this great little control scheme.
          00:47:16,712That ladies and gentlemen, that's the rig,
          00:47:20,034that's how it works.
          00:47:21,127I added a couple of other little helpers.
          00:47:26,556Good rule of thumb, when you're making an expression,
          00:47:28,561anytime you have a number like this, this 200,
          00:47:32,458that's hard coded into this expression.
          00:47:36,046If, for example, I decided, instead of box one,
          00:47:39,864I wanted to use box two, which is a much bigger box.
          00:47:44,084Now I have to go in and change this expression.
          00:47:49,022And I also have to go and change this expression
          00:47:52,465because it's hard coded in here too.
          00:47:54,488And that doesn't take that much time.
          00:47:55,848It's certainly would be a pain
          00:47:59,018if you had a whole bunch of boxes,
          00:48:00,961so what I did was on this box control null,
          00:48:04,934I added a nice little expression slider control.
          00:48:07,851And I just called this box side length.
          00:48:11,489And that way, I can tie this number
          00:48:15,252to any expressions that need to use that number.
          00:48:18,144So box one, let me replace box one with box two again,
          00:48:22,899and I'll show you how to adjust this.
          00:48:24,681We know that box two has a length of 200 for each side,
          00:48:27,596so now what I'll do, is I'll make sure
          00:48:30,585I can see this slider.
          00:48:32,227I just hit E to bring out the effects on my null.
          00:48:35,339And then I open this so I can see it.
          00:48:37,003Now let's double tap U to bring up our expressions.
          00:48:39,659Instead of hard coding 200 in there,
          00:48:43,014I'm gonna pick whip to that slider.
          00:48:46,158Now whatever that slider is set to
          00:48:48,583is actually the number that will get used.
          00:48:50,238In this expression, that's all I have to change.
          00:48:53,805Now on the rotation expression,
          00:48:55,184I just need to do the same thing.
          00:48:56,429Instead of 200, I can just pick whip to this.
          00:49:00,568And there you go.
          00:49:01,759And now the beauty is, if I swap out a different box,
          00:49:06,537right now it's not gonna work right,
          00:49:09,183but if I change the box side length
          00:49:11,726to whatever the correct size is,
          00:49:13,444which box two is 800 by 800.
          00:49:17,391If we switch this to 800 now,
          00:49:21,518and now I move this, this box will now rotate correctly.
          00:49:25,094Now you've got a very versatile rig,
          00:49:27,871which is very important.
          00:49:30,005You could probably, I don't know,
          00:49:32,092if you guys are like me, you can probably think
          00:49:34,185of 10 other things that you can add controls for.
          00:49:38,397This in essence is really all you need to do
          00:49:41,544to start animating these boxes.
          00:49:43,259This was an interesting one.
          00:49:45,856We kind of hit some animation principles
          00:49:47,895in the beginning and then we really went deep
          00:49:49,813with expressions and making a box rig.
          00:49:51,962I hope that there was kind of something for everyone
          00:49:54,663in this tutorial.
          00:49:55,724I hope, you know, if you're a beginner
          00:49:57,117and you're just getting the hang of animation,
          00:49:58,733I hope that the first part was really helpful.
          00:50:00,352And if you're more advanced
          00:50:01,551and you're really digging rigging and expressions
          00:50:05,133and want to learn more about that,
          00:50:06,677then hopefully the second part of the video was helpful.
          00:50:09,245So thank you so much and I'll see you guys next time.
          00:50:14,232Thank you so much for watching that.
          00:50:16,196I hope you learned not only something
          00:50:17,819about animation, but also something about problem solving
          00:50:20,894and After Effects and how to approach
          00:50:22,403tackling an expression rig.
          00:50:24,047I know a lot of you maybe haven't done that yet,
          00:50:26,569but just knowing what's possible
          00:50:28,213can sometimes open up a lot of opportunities
          00:50:30,734in After Effects.
          00:50:32,230If you have any questions or thoughts about this lesson,
          00:50:34,524let us know and we'd love to hear from you
          00:50:36,931if you use this technique on our project.
          00:50:39,173Give us a shout on Twitter at School of Motion
          00:50:42,129and show us your work.
          00:50:42,989And I you've learned something valuable
          00:50:44,754from this video, please share it around.
          00:50:46,400It really helps us spread the word
          00:50:48,191about School of Motion and we definitely appreciate it.
          00:50:50,994Don't forget to sign up for a free student account
          00:50:53,449so you can access the project files
          00:50:55,103from the lesson that you just watched,
          00:50:56,643plus a whole bunch of other neat stuff.
          00:50:58,467Thanks again and I'll see you on the next one.
          00:51:02,340(swoosh)
          00:51:07,925(bright digital music)