Introduction to Hand-Drawn Animation With Animatic

1. Intro: Hi. I'm Jake Bartlett. In this free Skillshare class I've teamed up with Animatic to teach you the basics of hand-drawn animation. Animatic is a fantastic app for quickly and easily creating flip book style animations on your phone or tablet. You can get it for free on iOS or Android. I was already a huge fan of the Animatic app, so when their team reached out to me to see if I'd be interested in collaborating I jumped at the opportunity. Animating by hand is a lot of fun, and it's also really great practice for any type of animator. It forces you to think about things like timing and spacing in a way that you typically don't when using computer programs. Practicing animation by hand can have a huge impact on the quality of your motion regardless of how it was animated. In this class I'll get you up and running with the Animatic app and walk you through my entire process for animating something by hand. I'll be using an iPad Pro and an Apple pencil, but you could even do this on your phone using your fingers if you wanted to. For the class project you'll be creating your very own hand-drawn animation, and if you'd like some inspiration definitely check out Animatic on social media @getanimatic. Let's get started. 2. Overview & Extreme Poses: Here's the home screen of antiemetic. This is where you're going to see all of your own creations as well as some of the sample animations that came with the app. To make a new animation just hit the plus sign up here in the top right corner. Now we have a blank Canvas that we can start animating on. You'll see down here at the bottom we have a whole bunch of different tools and some colors for those tools. I have a CRAN and I have a selection of colors for that tool. I can change the color, make a couple different strokes. I've got a basic pencil, I have a permanent marker, a ballpoint pen, some chalk, a highlighter and then a wide tip permanent marker that has some line variation to it. Let me just hit the "Undo" until we get back to a blank Canvas. I'm going to be drawing with the regular pencil, but you can use anything that you'd like. Just pick your tools, choose your colors, and then we can start drawing. I'm going to be animating a simple ball bouncing up and down. The way I will go about doing this is drawing my extreme poses first. For a ball bounce, there are just a few extreme poses. The first is where it's at rest on the ground, another is where it's at the peak of its jump at the top part of the screen. So the ball needs to go up and come back down to where it started. I'll start by drawing the ball down where I want the ground to be. I'm going to put it somewhere right around here. Okay. That's my first frame and my first extreme pose. Now I'm going to come up to this little plus sign and tap it to make a new frame. Right away you'll notice that you can see my previous frame semi-transparent on my Canvas. This is called onion skinning, and I'm going to get into it a little bit later, but this is going to be very helpful for lining up my drawings between frames. For the next frame, I'm going to draw the second extreme pose, which is going to be the ball up in the air at the height of its jump. Somewhere around here. 3. Squash & Stretch and Onion Skinning: These are my first two extreme poses. Now I'm going to add another frame. But I don't want it to go after my second extreme pose. So I'm going to hold down on this frame and drag it over between the other two to rearrange where this next frame will be in my sequence. For this next pose, I want the ball to anticipate the jump before it lifts off the ground. I don't want it to just afloat off the ground like a balloon, like gravity was just turned off. I want it to squash down so that it looks like it's getting ready to jump before it burst off the ground and gets to that next extreme pose. For this frame, I'm actually going to draw a very squashed out version of this ball. If you're familiar with animation principles, this one is called squash and stretch. It's a pretty simple concept, but it makes your animations feel much more cartoony and gives them a lot more personality. The basic idea is that you always want your object to maintain the same surface area. So however much I squash this down, I also need to stretch it out to the sides the same amount. That way my surface area stays proportional. Now when you drawing by hand, you pretty much have to do this by eye. But just make sure that you're not stretching this out super far to the sides without squashing it down as well. I see that this is the same height as my original frame, but it's stretched way out to the side. That just doesn't look as realistic. So let me just get rid of this frame. I'll tap on that frame once and then hit "Delete". I might draw a few more frames between these two, but we'll get to that process a little bit later. Next, I want to do is stretch diversion where it's thinner and taller and lifted off the ground. I'll add another frame. This is where I want to talk about the onion skinning a little bit. I'm going to come up with this icon over here and open it, and you see that I have Onion Skinning turned on and my Mode set to Grayscale. You could also set this to color if you were using colors. Now I'm using the pro version of Animatic. With the free version, you get Onion Skin visibility for the previous three frames. So that means if I just draw something on this frame, go to the last frame, I can see the three previous frames as reference through that onion skinning. With the Pro version, you're able to control how many frames before and after the current frame you're able to see through the Onion Skinning. So if I put this back up to three in both directions, now wherever I am in my sequence, I will always see the previous and next three frames of my animation in that Onion Skinning. That is super, super helpful for lining up your drawings between frames. Let me go back to this frame and I'll hit "Undo" to get back to my blank frame. I want to draw a stretched out jumping version of this ball. If this is my baseline right here, I'm going to want the ball to come up pretty far, something like this. That's a very stretched out version of the ball but I think it's pretty proportional and looks good. So I'm going to add another frame and move on. 4. Timing & Spacing: For this next frame, I still want it to be stretched, but not as much. That takeoff is where the most stretching is going to happen. I'll draw the next frame something like this, add another frame. I'm just going to continue this process using my onion skinning as a guide to know where this ball needs to be traveling on each frame. You can use undo and redo to reschedule any single frame if you're not happy with the way that it came out the first time you drew. Add a new frame. Great, one more. Now the closer I get to this second extreme frame, the closer I want the drawings to be together and this is where animatic is a great tool for helping animators practice spacing and timing. The distance traveled between each one of these frames is the spacing and the number of frames between the extreme poses is the timing. For this animation the number of frames between the resting position of the ball before it jumps and the height of its jump, is the timing. But if you look at my onion skinning, you can see that with every drawing, the ball moves less and less. That is your spacing and that's what makes your animations look more realistic. If you think about how you would throw a ball up in the air, it doesn't just move up at a constant speed hit its peak and then move back down at a constant speed. It starts out fast, gravity starts to kick in, it almost hovers at its peak for just a little bit before slowly starting to fall back to the ground and moving fastest just before it hits the ground. It's not a linear movement, it has some easing to it. That's what I'm trying to replicate with the timing of these drawings. I'm going to add one more and dry it very close to that next extreme pose and just so I'm not confused, I'm going to go ahead and turn off the onion skinning for the previous frames and I'm just going to look at the frame rate ahead of it. I'll almost trace this ball offset just a little bit towards the ground. Now, just to get an idea of the timing, I'm going to go ahead and hit the next button to play back this animation. Let me hit next and right away I see this animation playing back. Now, I want to work with my animation at 12 frames per second. I'm going to leave this speed rate in the middle where it is but you can increase or decrease this and if you have the pro version, you can even increase it up to 24 frames per second. But like I said, I'm going to leave mine right down at 12. Another thing you can do with this preview screen is touch and drag your finger across to scrub through the animation very precisely. 5. Inbetweens: I'm pretty happy with the way that the ball is jumping up, but I need to add in a couple more drawings at the beginning of the animation where it squashes down and takes off. Let's go back to the animation, go to the first frame and add a new one, and then turn my onion skinning on, one frame ahead so I can see the squashed version. I want to draw frame between the resting pose and the squashed version of it. This type of frame is called the In-between because it's literally in between two key poses. I want to draw a ball that's just starting to stretch out, squashed down just a little bit but not by much and I want to try and keep all of these drawings on the same baseline, so that it's not shifting around. That's pretty good and then I'm actually going to redraw this frame, so let me grab my eraser because I'm not happy with the way that this drawing, the base of the ball is going below the baseline of the previous frames. I want it to look like it's staying on the ground. I'm just going to erase this and redraw that extreme stretched out pose. Something like this that may be a little bit too stretched out. Let me do it a little less dramatic and I want to make sure to keep that baseline in the exact same place. That looks pretty good. Now let me turn off my onion skinning and just step through this animation one frame at a time. I've got my resting pose in-between, squashed, leaped out in the air and stretched out tall and these two I might not actually need an in-between for because I want that motion to be very fast. We'll play that back and see what it looks like. Then I've got a series of in-betweens all the way up to this topic stream pose. 6. Finishing the Sequence: Now let's draw the ball falling back down. I'll turn my onion skinning back on and add another frame. I can use the onion skinning of the previous frames as a guide for where my next couple drawings need to be. The first frame after that topic stream pose can lined up right here. I think I can draw that a little bit better. Something around there. I'll add another frame. Drop it down just a little bit. You know what, I'm going to turn down my onion skinning just so I can see that topic stream pose and the previous frame. I'll bring this down a little bit more. That one was a little too big. So let me redraw that. That one was off to the right. That's the beauty of this app undoing and redrawing as much as you need to until you're happy with every single frame. I'll add another one. I want the number of frames to be symmetrical on either side of this topic stream post. So let's count the frames between the squashed version on the ground and the peak of the jump. So I've got 1, 2, 3, 4, 5, 6 between this extreme pose and this squashed version on the ground. So I'm on 1, 2, 3. Turn my onion skinning back on. This one can drop down a little bit more add another frame. So I've got 1, 2, 3, 4, 5, and I'll need 6. This is the fourth frame. This one I'm going to stretch out a little bit. Since I'm stretching it, I also need to squash it on the sides. Let's compare that to the corresponding frame on the other side of the ball bounce. That's pretty symmetrical, so that's exactly what I wanted. Let's look at this again. I will turn off my onion skinning. We've got extreme pose 1, 2, 3, 4, 5, 6 topic stream 1, 2, 3, 4, 5. We need one more frame before I get back down to this squashed pose. Just so I have a reference of where this ground plane is going to be, I'm actually going to duplicate this frame by tapping on it and then hitting duplicate. Then I'm going to hold down and drag this frame all the way to the end of the animation. That way I can use it as a reference through my onion skinning of where the ground plane needs to be. It actually looks like I need an extra drawing between these two. I think it's covering too much distance between these two frames because this is the last frame that I want to have before it hits the ground. I'm going to grab this empty frame and move it back between these other two. So I've got this frame and this frame and I'm going to draw right between those two. Now that I've drawn this frame, I can tell that the spacing is off between the previous two frames. Too much distance is being covered between those two. I'm just going to erase this frame and redraw it a little bit closer to the frame before it. So I'll switch back to my pencil and we'll do it right about here. Let me do a little bit better job. Something like that. Now I think this frame is also moving a little bit too far down. I'm going to redraw this one as well. Then I'll stretch it out just slightly, not a whole lot, something like that. Then it drops down and then hits the ground. I don't want to have this as a duplicate drawing in my animation so I'm actually just going to add another one and just trace it. But this way the frames are unique. Since I have this frame as a reference, I can make sure to keep the bottom of this ball on the base ground plane. That looks good. Now that it's hit the ground, I want it to hop up once and land on the ground again. It doesn't have to go too far up. But just before I forget, I'm going to click on this frame and delete it, so I don't have that duplicate. Then I'll add another frame and I want the ball to lift off the ground just slightly. It'll stretch up just a tiny bit. Then I'll add another frame. Draw another regular roundness version of the ball a little bit higher off the ground. Then bring it back down basically where it was on the previous frame. Then I want it to hit the ground one more time. That's where the baseline is. So somewhere right around here squashed just a little bit. Recoil back up. Then we'll draw one more frame at its final resting place. Let's play this back and see what it looks like. Awesome. This is a great start. 7. Making Adjustments: It looks like I could add some frames in where it hits the ground. Right there. The squash diversion could use them in between on either side of it. If I just scrub through here, between this frame, and this frame, I'm going to add a frame on either side of that squashed version. Let me back it up, we'll find that frame, turn on the onion skinning. Let's say two frames in each direction. We'll start with the frame before it. Let me add a frame. I just want to add one that's not quite as stretched out as it's hitting the ground. Just giving the timing a little bit more room, and make this transition a little bit smoother. Here's an in-between from this pose here down to the squash version. Then we hit that squash pose, and I'm going to add another frame where again, I'm basically just going to trace the frame that we just drew, something like that. You know what, maybe this one comes up a little bit further because it is on its way up. Let's just take that up a little bit. Great. Then let's play that back again. All right, now I think hitting the ground looks pretty good, but that little bounce afterwards is taking much too long. Right in there, it hits the ground, and then it takes too long for it to go up and back down again. It looks a little floaty on that second bounce. Let's go back, and take a look at those frames. Turn off my onion skinning. It comes down, hits the ground, splat, rises up, goes up, goes up. I think there's just too many frames here on the way back up. Maybe we just didn't need this second drawing on the right side of the stretched out version. Let me select that frame, and hit Delete, and play that back to see if it makes much of a difference. Yeah, that definitely helps. Now overall, I'm noticing that this animation looks a little bit like it's happening on the moon. The gravity just doesn't seem strong enough. Everything's floating. A simple way to fix this would be to just increase the frame rate. Let's see if I bump this up to 14 or even 16 frames per second. Now it looks a little bit more natural. 8. Better Spacing: Another thing I'm noticing is that right now I'm the takeoff. I think we do need one more frame between this extreme squashed version and the stretched version rate after it. I definitely want it to look fast, but I think it's a little bit too fast. Let's back out. Find that frame. Turn on my onion skinning. I'll just need to see one frame on either side. Then I'll add a frame after this stretched version. Now I can clearly see the two frames that I need to draw in between. I wanted to be something like that. It's just barely off the ground and starting to stretch up. Let's preview that. That's looking great. Now that it's playing back as a whole, I can see that we can have a little bit better spacing around this section right here. The ball is traveling the same distance between each one of these frames. Up near the top of the jump, it's spaced out better. But right here in the in-between frames, I think all the drawings can be bunched up towards the top of the screen a lot more. Let's go back and analyze those frames again. I'll turn off my an intending and step through here. Squash up. Stretch. That frame could probably be moved up a little bit closer to the top of the screen. That frame could be moved up further. Between these four, they're pretty much all traveling the same distance right now. I want them all to be bunched up closer to the top of that jump. I'll turn my onion skinning previous frames all the way down, and forward frames up. I'll start with this one right here, and I'm going to lift this one up higher on the screen. Let me start by erasing this frame. Then I'll redraw it a little bit higher. I pretty much want this to go as far up as the next frame does. Something like that. A lot of distances covered between these two frames. Next, let's move this one up a little bit further. I'll keep it stretched out, not quite as much as the previous frame. Just for reference, I'm going to turn one frame previous on my onion skinning. I'll draw this one right about there. You can see that lines up with the top of the next frame. What we might be able to do at this point is just eliminate this next frame. I'll select it and delete it, and play that back. I think that spacing is much better now on the way up. Now what I could do is add one more frame at the top extreme. That's literally just going to be a tracing of the top extreme pose right here. That it lingers at the top before it drops down again. Just to add a little bit of tension, before it starts falling back to the ground. Let me add another frame and turn my onion skinning down, so I can just see the frame before it. Then I'm just going to trace over that frame. Let's play that back. Great. 9. More Spacing: Now let's work on the spacing on the other side where it's falling down to the ground, just like we did with the first half of the jump. Right in here is where those frames are kind of traveling the same distance again and something wonky is going on right here between these two frames. Lets just back out and step through those frames and see what's going on. Here I have my top extreme pose. Starting to drop down. That one does not move nearly as much as these two frames do. Let me turn on my onion skinning and check out what's going on, and you can see that the base of the ball for these two frames are much closer together than the tops of the ball for those two frames. This frame is going to need to be redrawn. I also think that the distance between this frame, and this frame is a little too much. It shouldn't be moving quite that fast yet. I'll turn my onion skinning back on, erase this frame, and then redraw it. Just barely down from the previous frame. That way it has a very slow start at the beginning and then I'm going to need to redraw this frame as well because it's moving way too far now. I'll redraw it, somewhere around here. That's a little better. Now those new drawings makes this one move a lot further than it should, so I'm going to redraw it and it can be dropped down a little bit more now and I'm even going to start stretching it out because it is picking up speed at this point, and then I'm going to redraw this frame as well, making it a little bit more stretched out. Pretty good and then we've got a pretty drastic change in spacing between these two frames. That might actually be a little too much. Let me undo and redraw this one, one more time a little bit further down. One thing I want to make sure of this, that I do not stretch out this frame more than the next frame. Because the next frame is where it's moving the fastest and it needs to be the most stretched out. Let me just adjust my onion skinning, so I can only see these two frames and know exactly how much this should be stretched out, and let's see what that looks like. Yeah, those spacing adjustments helped make this animation look a lot better. 10. Finishing it Off: Now one more thing that I can do to make this a little bit nicer, is on its way back and down. When it does it second bounce, so right in here. I think it makes a little too much of a speed change as it reaches that second peak and comes back down. There needs to be a little bit more easing in there. I'm going to add another frame right in between this frame and this frame. Let me go back to there, hits to the ground, bounces up, hits the peak and then drops down again. I need one more frame right in here, o I'll draw another ball just slightly down from the previous frame. Just so it takes a little bit longer to fall back down to the ground, okay? I think that looks a lot more natural and it really shows you the difference that one single frame can make in an animation. To finish this animation off, I'm just going to add a couple more duplicate frames of this resting pose at the end of the animation. Now I could duplicate this frame a couple times or with the Pro-version, I could tell this frame to repeat two or three frames. But if I play this back, you'll notice that the end of the animation, that drawing just sits there longer than any of the other frames. That can be perfectly fine for your animation. But for the style I'm going for, I want every frame to be unique and redrawn by hand. I'm going to turn the repeat frames off, add another frame and then just trace this two or three more times. That's all there is to it. Now at this point I could go back in and color in the ball, add some more style and texture to it or trace over it with another tool, treating my original drawings as a pencil test and then I can come back and ink it. But I'm pretty happy with the way that this looks. I was going for a scribbled look anyway. I'm going to stop here. 11. Exporting: Now, all I have to do to share this animation is export it as a video or a GIF. If you export it as a video, you can share it online on Instagram or Twitter or Facebook, or you can export it as a GIF and then upload it to your class project on Skillshare. Either of these export options will give you lots of ways to save your file. If you're on a Mac, AirDrop is a very quick way of transferring a file to your computer. Otherwise, you can use a Cloud service like Google Drive or Dropbox, or you can even e-mail it to yourself. Once you're finished, hit Done, and then, you'll see that animation live on your home screen along with your other creations. You can always go back in and continue to work on it or export again. 12. Thanks!: Now that you've seen my process, you can apply it to your own animation. If this is your first time animating something by hand, I definitely recommend that you keep it simple like I did. Have fun experimenting with the different tools and colors. Don't forget to post your final animation to your class project on Skillshare. If you share any of your animations online, be sure to tag me getanimatic and Skillshare, so we can all see your work. If you have any questions, don't hesitate to ask them on the Community page and I can't wait to see what you come up with. Thank you so much for taking this class.