Stop Motion Animation in After Effects

Stop Motion Animation in After Effects


– Oh my gosh! Joey here at School of Motion and welcome
to the last day of 30 Days of After Effects. I wanna give a quick shout out to the Department
of Motion Design at Ringling College of Art and Design for sponsoring this series. They were an amazing partner to work with
throughout this whole process and I really want to thank them. If you haven’t already, check out the link
in the resource tab where you can get more information about them. This last video is pretty cool. What we’re going to talk about is how you
can integrate stop motion into your After Effects work. I’m gonna go over some tricks that’ll let
you sort of setup a template that you can create really neat stop motiony elements with. We’re also gonna talk about some compositing
tricks that go along with it. This is going to be kind of a unique one and
I hope that it’s going to be something you want to go out and try and eventually start
building your own elements and playing around with it. Don’t forget to sign up for a free student
account so you can grab the project files from this lesson, as well as assets from any
other lesson on the site. Now, once more into After Effects. So, today what I want to show you guys is
some interesting ways you can incorporate stop motion into your After Effects toolbox. So, you know, doing stop motion there’s a
million ways you can do it and so I thought what an interesting example might be is to
show you how to do like a paper crumpling transition. Now, I’ve done this before without using stop
motion software because it’s really not that hard. Really what you do is you just start with
a piece of paper that’s folded flat and you just frame by frame slowly crumple it up and
take a picture until it gets to a small little ball, okay? Now it’s much, much easier to do if you use
stop motion software. So I’ll show you guys Dragonframe. If you’re unfamiliar with Dragonframe, it
is one of the most fun programs I’ve ever used in my entire life and you pretty much
can hook up any DSLR camera to it and it can control the camera and take a picture and
it can do a lot of things and I don’t want to really spend too much time in Dragonframe
in this tutorial. But, I used Dragonframe to shoot this piece
of paper. I pointed my camera straight down on the desk,
I had a ring light on it, and you can see the last frame looks a little bit blue, you
don’t have to worry about that. The way Dragonframe works is genius. It takes full RES pictures with your camera. So, my T3i takes like, I don’t know what the
megapixel is, but they’re like 5K images. But, it saves a low RES version of that image
that it can play back really quickly, literally in real time. So, you can very quickly preview what your
animation’s looking like and so it took me about ten minutes to do this and I was very
happy with it and even at the end I did, you know, I sort of, I mean I’ll kind of go frame
by frame and show ya. Here’s the first frame and then I crumpled
up the edges and I taped the paper to the desk so it wouldn’t move and I just kept crumpling
it and then when I got to the end, I just moved it a little bit just to get a little
extra motion at the finish. Okay, so there you go, that’s Dragonframe
and then you can export out you image sequence and export it however you want. So, I exported it out and here it is, this
is my image sequence. Now, I imported it into After Effects and
I made sure, and we talked about this in the last video, to interpret the footage correctly. Now this is stop motion, so I wanted it to
go at 12 frames a second, not 24. Now you can do it at whatever you want, but
to get that stop motion feel it’s better to do it at 12, it just sort of is the look,
that’s the aesthetic. So 12 frames a second, and so now if I take
this and I drop it into a comp, it’s gonna make a gigantic comp, right? So this is actually the pixel size of these
images. So let me set this to 1920 by 1080 and then
I’m gonna scale my images way down like that. Okay, and what I want it to do is to have
it start where the paper is full frame like this, and then at the end, have like a little
ball of paper like that. So, what I’m gonna do is I’m gonna go to the
last frame and I’m gonna move my anchor point into the center of the ball, so it will be
easier to control, to control it and let’s line it up in the center and I’m gonna put
a key frame on position, scale, and rotation. Then I’m gonna go to the first frame and I’m
gonna scale this thing back up and move it so it’s kind of centered, greatness. And I’ll put a rotation key frame there, and
then I’m gonna go to the end and just have it rotate a little bit further in the direction
that it moves. Okay and I’ll easy ease those and let’s just
RAM preview this and see what it looks like, cool. Now, I should also point out that I took and
actually I might as well go ahead and show you the original images. The original images looked like this. If I go to the exports, I exported a TIFF
sequence out of Dragonframe and you can see that the TIFF sequence, especially on these
later shots, you can still see the desk. So there’s only 13 frames, right, it wasn’t
like a million frames, it was only 13. So, all I had to do was open each frame in
Photoshop and very quickly use my pen tool and cut out the paper. Okay, that’s all I did, so when I imported
my Photoshop sequence, it already had the correct alpha channel. Alright, I had already cut away the desk. So, that’s gonna be kind of a recurring theme
in this tutorial is that sometimes you just have to do the tedious thing. Now, if you have access to a green screen
or a surface that can get you a better key with the paper, then you could certainly do
that. It’s always tricky to do that though because
the paper is touching the surface that it’s sitting on, it’s gonna create really hard
shadows, there’s gonna be a lot of color spill happening. So, in the end you’re probably just gonna
have to rotoscope it, but you know if you animate it 12 frames a second and you do this
in like one second, it’s really not that many frames. Cool, so we’ve got the piece of paper and
you know in general I’m pretty happy with the motion of that. So, now the next part is, we need to put something
on the paper and have it sort of crumple up with the paper, right? So, what I did was I made a little precomp
here where I just took the 30 Days of After Effects Day 30 badge and I just scaled it
up and I used this plug-in that I’ve been using lately to make the grid because I wanted
it to look kind of like graph paper and the built in grid effect in After Effects isn’t
very good, but my buddy Aharon Rabinowitz talked me into trying out the universe plug-ins,
which actually there’s some pretty cool ones in there and there’s a grid plug-in that is
actually like a really legit good grid plug-in. So, actually some pretty useful utilities
in there, something to think about. So, that’s what I made, I made it 12 frames
a second, it’s super simple. So, that is a precomp called paper image,
I’m just gonna copy and paste this right over my image, okay? And I’ve got a bunch of stuff on here, so
let me just delete all this junk, we’ll start from scratch. So, here is my image, okay? First thing I’m gonna do is I’m gonna go to
the first frame, I’m gonna parent it to the paper crumple, okay? So now it will at least sort of move with
the crumpling paper. Alright, so that’s step one and I’m gonna
turn the opacity down so we can kinda see what’s going on, there’s also a mask on here
I’m gonna delete. Okay, cool, so you know, as this thing is
crumpling up, two things are gonna happen. One is the image needs to distort as though
it’s being crumpled up. The other thing is parts of the image need
to disappear. You can see that if the paper’s folded over
here, you’re not gonna see what’s on that part of the paper, you’re only gonna see what’s
in the middle. And then as it gets more and more crumpled
up, you might see pieces of the image kind of poking through, but then some parts are
gonna be gone. So you need to do a combination of distorting
and masking, okay? So, here’s basically how I approach this. I’m gonna set this to like 50 percent opacity
just so we can always see the paper through it a little bit. So, the first thing I’m gonna do is, I’m actually
going to animate the scale of the paper just so that you know, up until this frame the
paper’s actually bigger than this image so that’s not gonna work all that well. So I’m just gonna scale it up a little bit
right at the beginning and it’s happening so fast that you’re probably not even gonna
notice it once it’s all done. The next thing I wanna do is make my comp
longer. So, let’s make it like six seconds, and I
don’t want the paper crumple to start right away, I wanna see these things pop up and
then I want it to crumple. So, I’m gonna go forward to like a little
bit after a second so it pops up and then it crumples. So that’s what’s gonna happen, cool. So, once this thing starts to crumple, we’ve
agreed we need to have some sort of mask to sort of only show parts of the image, but
the big thing is how do you make a layer crumple? And it’s actually pretty simple, here’s what
you do, you use the mesh warp effect and this effect it’s kind of, I don’t know, oh and
it’s on the wrong layer, let me actually put it on the right layer. I feel like this effect needs to be updated,
the interface is very simple, right? You put the effect on, you define how many
rows and columns you want to have control over, and then you just move control points
around and it warps your layer. But, the interface for this hasn’t been updated
in a long time and it would be nice if you had a little bit more control over these control
points and maybe some way to access them individually, but you don’t at this point, so what you’re
gonna do is you’re just gonna come to the first frame of this paper crumple and you’re
gonna put a key frame on the distortion mesh. This is what key frames the actual shape of
the distortion. And then I’m gonna go forward to like the
middle and here’s what I’m gonna do, I’m gonna grab some of these points and I’m going to
just sort of roughly eyeball what I think this should be doing, okay? And you’ll notice that I keep missing these
control points, that is something all of you will do too, you’re gonna try to click a control
point and you’re gonna miss and if you do, you just hit undo, and it’ll bring the grid
back up for you. So, one thing that sort of throwing me off
here is I can see the entire layer outside the boundaries of the paper. So, one easy trick is you just hit this little
box here, right? This is the transparency checkbox, if you
don’t see it, hit F4 or hit this toggle switches modes button down here and make sure you bring
up this column and then you can check it and now it’s gonna matte out this layer based
on every layer underneath it, okay? So this doesn’t work if you have a background
back here because then this background is not gonna allow this to be matted out. So, if you wanna preview this over like that
yellow color for example, you can hit Command+K and bring up your composition settings and
set a background color in there, and that background color is actually non-existent,
okay? There is no alpha there so you can still use
this trick, the little checkbox. And so now I can, let me go back to my distortion
mesh and now I get a much better sense of what this is actually gonna look like when
it’s all crumpled up. Alright, and you know, there’s not, you don’t
really have to be that exact. I mean that’s the beauty of this and that’s
one of the points I wanted to stress with this video, when you’re animating stuff and
it’s happening really quickly, especially in a situation like with stop motion, it’s
not as important that every frame looks perfect. It’s way more important that the animated
thing looks good. And I’ve actually heard animation described
as, I think it was described as crummy drawings animated beautifully or something like that. Alright, so you’re starting to get this nice
crumpling effect using that mesh warp, okay? And you know if at the beginning I feel like,
oh I want a little bit more of it. Oh, by the way, now that I’ve got this check,
this transparency little checkbox turned on, I can’t see my paper image at the beginning
here. So, I need to time re-map, so Command+Option+T,
time re-map that layer and drag it all the way back to the beginning, so now I’ll see
it. Cool, alright. And you can see already it’s starting to look
like it’s gettin’ crumpled up and then at the end I want it to get really crumpled up,
so I’m just gonna put another bunch of key frames on here. And you can go as crazy as you want with this
and you can try to be really accurate and actually follow contours of the folds of the
paper and stuff. One of the things that’s cool with the mesh
warp is if you cross, if I take this point and cross over some other points, you can
really mess up the image and get it really kind of distorted and janky lookin’, which
you know if you’re going for crumpled paper is what you want. Alright, and so I’m just sort of messing around
here and I know that in the end I’m gonna mask some of this stuff out, so I’m not gonna
see the whole thing. Alright, at the end here I want to make sure
that I can still see all my layers. So let’s do a little RAM preview and see what
we got. So you can see really quickly just kind of
key framing that mesh warp, we’ve already got a nice little crumple happening. Alright, and I think for now we can probably
stop because I believe by this point I’m not gonna want to see this paper image anymore. So I’m actually gonna trim the layer right
there, Option+], that’ll set the out point of that layer right there. And now let me turn the transparency back
up and let’s just do a quick little preview and see what we got, cool. So, the other thing that you’re not seeing
is you’re not seeing any of the shading of the paper, I mean that’s what’s kind of cool
about using this crumpled paper is that you get all this texture to it, right? So, one way you can do it is you can just
set the transfer mode of this to multiply and now you’re gonna see through that paper,
but it’s gonna make it, it’s gonna really darken this image. So actually, maybe a better way to do it,
and this is very similar to the last tutorial where we did something kind of like this,
but with a 3D phone instead of a stop motion piece of paper. You can duplicate this layer and put it back
on top of your paper image, use a copy of your paper image as a alpha matte, and there
you go. And so now you get a copy of this back on
top of itself that you can multiply. Multiply, multiply, there we go. You can multiply over the image and we’re
not, oh that’s because I did the wrong layer. This layer, this is the layer that should
be multiplied. And let me name this, so this is now the shading
layer, right? And this is the paper image matte, okay? And what I wanna make sure is that any effects
I have on this paper image matte always match up to what’s going on with this layer and
I’m actually gonna parent this to this layer, okay? And get rid of any key frames that are on
here so that all I have to do is control this layer and this one will be updated. Now, I want the mesh warp of this layer to
match the mesh warp of this one. So, an easy way to do that is open up the
effects on both layers on your timeline like this, and hold Option, click the stopwatch
for the distortion mesh on your matte, and then you can pick whip to this distortion
mesh. So there you go, that’s all you have to do. So now this mesh warp is always gonna be in
sync with this mesh warp, this one. Cool, so now I’ve got this matte setup and
the reason that is a better way to do it is because now you can color correct the shading
layer. You can put a levels effect on it and brighten
it, but also bring back more of that gritty paper texture if you want, right? And that’s probably too much, and then you
can just kind of adjust the black alpha to control how much of that you’re seeing through
it, right? So now I still have that nice bright lookin’
layer, but I can still see all the folding happening. So let’s go to these frames, cause these frames
here I wanna make sure that I’m still getting that nice grid texture on there. So maybe what I need to do is actually go
to my paper image comp and make it a little bit taller. So let’s make that actually 1300 in height. And then I’m going to hit Shift+Command+Y
to bring up my solid options for my grid layer. I’ve got two of them, I’m just gonna hit make
comp size, and so now the grid extends all the way, and this grid I’ve got two copies
of it, one has a little bit of a blur on it just to give it that fuzzy kind of papery
look. And so now we should be all good, yeah there
we go, cool. Alright, so now that that image extends all
the way to the top of the crumpled paper and it’s crumpling up and it’s looking fantastic. Okay, so now let’s deal with the masking part
of this. So I’m gonna turn the paper image opacity
down again for a second and I’m just gonna go to a frame where there’s kind of a complex
shape, right, like this is a good one. Every frame is so different from the previous
frame that you’re not gonna be able to just easily do a quick tweened mask shape here. But, if you pick a shape that’s relatively
complicated like this, you’ll know that at least you probably have enough mask points
to get the shape correct and it doesn’t have to be perfect. Okay, so now we turn this back up. One thing that’s gonna throw you off is because
you have a mesh warp on there, your mask is not going to work exactly the way you want,
which is kind of annoying. But, that’s okay, you could precomp this whole
layer and including the mesh warp and then the mask will work correctly, but it doesn’t
bother me too much that you’re seeing sort of pieces of the image that you weren’t expecting
to because I don’t just totally want to lose, I don’t want to lose all of the image on these
folded parts of this crumpled paper. I want to keep some of that and I want it
to look a little bit random and I want it to just happen very quickly so that it feels
like you’re just, you know, it just happened so fast that the whole thing just kind of
disappears. So I’ve got this interesting mask shape on
there, I’m gonna hit Option+M, set a key frame, and then I’m gonna go backwards and I’m gonna
go to the first frame where I see the full thing and I’m just gonna quickly make a roughly
rectangular shape like this. And one quick tip with working with masks,
you can select a bunch of points, double-click them, and then you can scale them like this,
and it’s a really easy way to sort of align points up on a mask really quickly. And then I can select all the points and double-click
them and rotate them, and scale them, and make roughly a rectangle, so I don’t have
to grab every single point individually, you can do it pretty quickly. And now moving forward I can just sort of
go forward a few frames, fix the mask in this frame, and I’m just trying to get roughly
where I want it. Now in the end I’m gonna apply motion blur
to this whole thing and that’s gonna sort of help cover up some of the sin too, some
of these hard edges where you can see that the image maybe shouldn’t be showing there,
but it is. Alright and let’s go forward and backwards
on this frame, I’d like to see a little more there, maybe a little less there, right? And then by the end, by this frame, this mask
should be pretty small and kind of in the middle here, and you should only see a little
bit of it, but I still want it to be a little random so on some of these frames I’m gonna
pull some of this back and reveal a little bit more maybe so it really just feels random. Okay, and then this, maybe this is the last
frame that we actually see the image, so I’m gonna trim the layer there, and let’s do a
quick RAM preview. And it crumples and goes away, cool. Alright, so that’s lookin’ pretty good, I
feel like it doesn’t crumple enough. Like right in there, it should start to be
really really crumpled. So I’m gonna grab the mesh warp and I’m really
gonna mess with this key frame, I’m gonna just distort the mess out of it and really
try to mess the image up so it looks like it’s really getting smooshed at this point. And you can see I’ve kind of made a mess in
here and it’s kind of hard to see what’s going on. So I’m just trying to do my best here, there
we go, okay, and so now it’s like crumple, crumple, gets really crumpled, and then that
last frame, I mean that’s the last frame that we see this on and it really needs to be messed
up. So let’s just almost invert some stuff like
this. Okay, let’s see, so now we preview this and
that works pretty good, that works better. Okay, so now how can we add motion blur to
this? Cause this was shot stop motion so there is
no motion blur, this wasn’t a 3D render, so there’s no motion vector pass or anything
like that. So, what I wanna do is just precomp, first
I wanna make sure everything’s set correctly, is 100% opacity, I’m gonna select this whole
thing and I’m gonna precompose it and just call it Paper ball. Cool, there it is. Now, a bunch of stuff disappeared and let’s
figure out why that happened. That happened because it didn’t precompose
this layer too, so I precompose everything, paper ball, go. And so what you can do is you can use, there’s
a plug-in you can get and I mentioned it in the last tutorial actually, reelsmart motion
blur. Now, in the last tutorial we used this effect,
the pro vectors, in this one we can just use the plain old reelsmart motion blur. This effect is incredible. What is does is it looks at each frame, right? And between one frame and the next frame it
figures out which pixels are moving and in what direction and it blurs them. And you can see that if you look at it too
closely you’re gonna see some weird artifacts, but again, that’s okay. When you play it, it looks like motion blur. Now there’s way too much blur on here right
now, so I’m gonna turn the blur amount down to like 0.1. So there’s just a little bit of blur on it,
okay? And look at that, it motion blurs the stop
motion. This is actually a very common technique with
stop motion animators, to apply motion blur after they shoot their stop motion because
it gives it a smoother more natural look and it’s you know when you shoot stop motion it’s
impossible to get motion blur because you know, the stuffs not moving, alright? So this reelsmart motion blur effect is really
handy and I know again it’s a plug-in that you have to buy, but you know there are certain
plug-ins that if you’re serious about being a motion graphics artist you should own, you
really should, and you’re talking about like 100 bucks, 200 bucks, it’s really a small
investment. Alright, so let’s talk about finishing up
this animation. This was the bulk of this tutorial, figuring
out how you can use something like this and incorporate it into your After Effects. Another thing I did too by the way, is I color
corrected the paper ball a little bit, just doing some levels on it, I brightened it a
little bit, and I pushed the black outputs up a little bit so it wasn’t so stark. Like I didn’t want those shadows to be so
dark. Another thing you can try too, I didn’t do
this on the example, but just seeing some of these hard edges with the image, I wonder
if it would help to feather the mask a little bit, I suspect it’s gonna look weird, but
why don’t we just preview it just to see if that helps at all, I mean I don’t know, I
don’t know. And then we can look at it with the motion
blur and see what we’re getting, see if that does anything interesting for us. Eh, it looks a little funky, I don’t know
if I dig it. I don’t know if I’m in to that, so let’s turn
that, let’s undo the feather on that, set that back to zero, there we go. And now at the very end here we need to make
sure, oh I see what’s going on, you see how the paper turns white there? I was trying to figure out why, that’s because
this shading layer is using this layer as a matte and that layer ends too early, so
now there you go. Excellent, so what I also did was I added
a little extra motion to this ball, of this rolling little paper ball here so it stops,
right? And then once it stops, I animated the position,
so Y position I had it just for like two frames, maybe three frames it just dips down a little
bit in anticipation of being chucked up in the air. So now were gonna go forward like six, seven
frames and we’ll have this ball go up in the air like this and then maybe another ten,
maybe eight frames, gonna fall down to the bottom of the screen. Let’s easy ease all these. Let’s go into the animation curves and again
this is were understanding animation curves is so crucial because you can just look at
this and figure out what’s wrong, right? It should not be easing into this last key
frame, if it’s falling it should be pointed like that. Alright, and we can extend this and then we
can, let’s just preview this. So it goes, it anticipates down and then pops
up a little bit, maybe we want it to go a little bit further down, and let’s preview
this. Let’s set our in and out point here. So it gets tossed up and then it falls, and
it’s way too slow. So I want it to get tossed up really quickly,
so maybe let’s try five frames, and then it’s gonna fall. See one of the things I forgot is I’m animating
at 12 frames a second, so six frames is half a second, so really it should probably only
anticipate like two frames and then maybe four frames up in the air, and then maybe
another four frames back down. Let’s see how that looks, so it gets tossed
up and then it falls. Alright, and it doesn’t need to fall that
fast, so we’ll give it one more frame and that’s pretty good, and then once it starts
to go up I want it to rotate also. So I’m also gonna have it sort of rotate backwards
like this, and I’m just gonna put an easy ease key frame on this so it will just sort
of start to roll as it gets thrown. So there you go, so now it’s like tossed up
in the air and thrown away, right? 30 Days of After Effects finished. Day 30 good riddance, right? Nah, just kidding, so you know other than
that all I did was reveal the little School of Motion logo and the thanks for watching,
right? Thank you guys so much for watching, I really
can’t tell you how thankful I am that you guys have been so supportive and you’ve been
such an amazing audience throughout this whole thing. And I hope that this was an interesting one
to end on. I know it seems a little bit random, but this
is one of those topics that I just don’t see a lot of information out there about, you
know using stop motion in conjunction with After Effects. After Effects is just a tool, it’s a compositing
tool, you can use absolutely anything. You can use footage, you can use drawings,
you can make stuff, you can use shape layers and whatever. You can also use Dragonframe and create stop
motion, and you can get such an interesting unique look by doing that. Look at some of Buck’s stuff from like three
and four years ago when they big into their stop motion phase. They did all that with Dragonframe and they
did amazing stop motion and it looks so unique, and it’s a great tool to have, and Dragonframe
I believe is only 300 bucks, which as far as an awesome tool like that goes, I can’t
believe it’s that inexpensive. So, as it says here, thank you guys so much
for watching 30 Days of After Effects. I hope you learned more than you can possibly
remember and you have to come back and watch all these all over again, and once, twice
a year you have to watch all 30 of these. Thank you guys so much, I will see ya on the
next one. Thank you so much for watching. I hope you learned a lot about creating unique
stop motion animation. It’s a really cool technique that you can
use in a variety of ways and I hope you go out and create your own stop motion video
sometime. If you have any questions or thoughts about
this lesson, definitely let us know, and we would love to hear from you of course if you
use this on a project. So give us a shout on Twitter @schoolofmotion
and show us your work. And if you learned something valuable from
this video, it means so much if you could share it, it really helps us spread the word,
thank you. Don’t forget, sign up for a free student account
to access project files from the lesson you just watched, plus a whole bunch of other
awesome things. I want to thank Ringling one more time for
sponsoring this series and thank you for watching. I’ll see you on the other side.

9 thoughts on “Stop Motion Animation in After Effects

  1. very useful tutorial thank you, there is this video called xanarchy made by lil xan and they use this effect in a lot of creative ways do you think is possible to have a editing breakdown

  2. I don´t really know how does the After Effects Series works cause I just got into the link below and all the padlocks is locked. But I´ve enjoyed watching this tutorial. Cheers and peace!

  3. how about the cc force motion blur effect instead of the RSMB? I saw you using it earlier and it worked quite well for me until now. Whats the Difference between these two?

  4. Can't download the project files, when I do it gives me a file that my computer has no idea how to use, please provide any suggestions.

  5. Damnit! 30 days, and I forgot to sign up for a free student account so I could grab the project files for this lesson as well as assets from any other lesson on the site. I've been watching these for 29 days straight so far – why didn't you remind me before?

  6. thanks Joey, i've learned a lot in those 30 days ( actually 37 for me ) that i've followed your tutorials as a 2 months beginner in AE.
    looking forward for new tutorials from you and wish you the best.

  7. I actually watched all 30 episodes and loved them. The way you explain your thought process really helped me out to become a better animator. So I just wanted to say thanks for the good stuff! 😀

  8. Hello Joey, many thanks for sharing your Project files, also for the awesome knowledge you give out to the community. From Ghana – Africa

Leave a Reply

Your email address will not be published. Required fields are marked *