Welcome to the lesson in exercise we're going to do  to help learn squash and stretch. We are going to use 2D digital animation  and animate a little bouncing water balloon. Uh, don't worry you don't have to be great at drawing. We're gonna use this, uh,  free online web tool called Brush Ninja. There's also a few other resources  in the course PDF if you want  to use a different one than we're using in this exercise. So you can just follow along with what I'm doing.

You could also think of your own, uh, example of squash  and stretch and animate that instead of the water balloon. So let's get started. So most people have a Wacom tablet  that will help quite a bit. I'm just gonna use a mouse just to keep things fair. I have a tablet, um,  but I'm not gonna use it for this exercise. So I'm gonna show you what you can still do  with just having a mouse.

And if you've never seen this program before, one  or any animation program, there's a few common features  that you can be familiar with  and that's, you know, having something to, uh, draw  with like a brush, having a way to control the number  of frames that you have and  to add frames and move them around. So we have that ability down here. And also onion skinning. Onion skinning means I wanna see the frame before and  after the one I'm working on,  but at a lower opacity so that it's not as overbearing  as the drawing I'm working on so I can tell the difference. So that's gonna be common between  all 2D animation programs that you use. And this program is free  and it has it, you can choose to support them on Patreon.

So what we're we are looking at is the current version. I'm gonna switch over to the beta version  because that's probably the direction this site's headed in,  just so we're all on the same page. Um, I'm gonna switch over to that and create a new project. Hit, okay. And so we basically have all of our tools up here  and you can switch between those with 1, 2, 3, 4, 5. Um, and this is the onion icon.

All this stuff could change,  but I, I want you to understand, you know, the basic, uh,  layout because it's gonna be true if this website changes  or you're using something different. There's gonna be these common traits that you can look for  and find, um, even if they move around on this site. So we have our first frame. Let's go ahead and set our settings. We can remove the, uh, credit here if you want. Um, I, I'm a Patreon, uh, con contributor.

I encourage you to as well if, if you're interested in that. Um, and,  and you can give them credit by leaving that on if you want. And the other thing,  because now you know, frame rate,  we can go ahead and set our frame rate. That's the little speedometer down icon down here. So right now it's set to a frame rate of six. And, but we know everything has a frame rate  of 24 in film.

So that's a very common frame rate. But we also know it's very common to animate on twos. So we have two options. We could either set this to 12 frames per second, so  that's like animating on twos. Or we could set this to 24 frames per second. But when we're animating down here,  you see this little times one, we could say times two.

That means hold it for two frames. So whether we did this  or animate on 12 frames per second, it's the same thing. I'm gonna animate on 12 frames per second just  so I'm not having to hit, uh,  an extra plus every time I make a new frame. So I'm gonna go 12 frames per second,  and that way we can leave these at one every time  we add a new frame. And that's how you add a new frame. So let's get started by drawing the water balloon.

First, let's, let's draw the neutral pose  of it just being a water balloon sitting there. So I'm gonna go over to the shapes here  and I'm gonna select a shape and I'm just gonna draw it out. Now, normally in most programs, if you hold down shift,  you can constrain it to be a perfect circle. This is in beta, so I think it's not perfect yet for me,  so that's okay. Uh, water balloons aren't perfect either, so, um,  I'm also going to change the background real quick. So this is a background icon.

I'm gonna select a different color  and just use kind of like a fun purple. And then after the fact, you can also still change the  colors of your objects here. So I can select it and then just choose a different color. I'm gonna use yellow. Alright,  so now we have our first frame  and we can add the little, uh, fun  knot bit on top as well by hand. So let's grab the brush and draw that.

It's basically like an upside down triangle depending on  how you look at triangles. And then fill it in. I'm having the mouse button is still held down. And the other thing I'm gonna do is I'm gonna move both  of these down because I don't want it in the center. I want more room for it to stretch. So even though, you know, I've made like mistakes  or whatever, it's not that big a deal,  I can use the cursor here  and just click drag, select both of these  and then just pull them down.

Cool. So let's move on to the next frame. Let's do the squash frame. So I'm gonna add a frame and instead of adding it,  let's duplicate it. So let's go back to the first frame and choose duplicate. That's the kind of two squares icon here.

And if you hover over it,  it'll show you that's what that is. I'm gonna delete the one that's empty. And so now with onion skin on  or off, we can't tell a difference  because the frames are identical. But as soon as we start to move this, we can see the, uh,  sphere we had behind that on, on the other frame. So we can use that as a guide to know  where we came from on our new drawing. So when we wanna squash, we have to remember  to keep the volume so when we're drawing it,  or in this case, we can manipulate it.

If I scale this water balloon down, I need  to scale it out in the same amount. So if I scale it down this much, I can think, okay,  I took away this kind of grayed out yellow volume, I need  to add that back in on the sides. So let's add that back in over here in the same amount. Now I wanna go a little more extreme with my squash. So it's, it's very obvious. So I'm gonna do it a little bit more.

And this is kind of the fun of animating, is, you know,  you don't have to know exactly what you're doing  as soon as you start working. You can play, you can figure it out  as you're messing around. So I wanna make sure I grab the whole thing. So I'm gonna click and drag and then move it down. And again, we're using the cursor icon over here. So now just between those two frames, we have a squash.

Now let's make the stretch. So I'm gonna duplicate the  original, just so I know we're staying  with the at least starting point of the original volume. So let's click and drag the top part and then move that up. I'm just gonna move it totally outta the way  so we can just deal with this. So I'm gonna stretch this up and again,  because we're stretching, we're adding volume, so we need  to take it away from somewhere else. And that's from the sides.

So I'm gonna take it away from the sides and equal measure  and ask myself, is the amount of volume here,  I'm gonna go to this middle frame so we can kind  of see them overlapping each other. Is the amount of volume I'm adding here,  the same amount that I took away from the sides here,  and I think it's pretty close. So those are basically the only poses we need to  do a squash and stretch exercise. Um, we can have a little more fun with this  and make it into a dancing, um, what I would call a dancing  water balloon by, let's have it go out to the side. So I'm gonna select both of these  and I'm gonna rotate it using the top little handle here. And you can actually rotate it.

And I'm gonna recenter it so that the point  of contact is in the center is gonna be the same. And I'm gonna duplicate this one,  and I'm gonna do the same thing, but for the other side. So I'm gonna rotate this and then go over here. And they're going back  and forth about the same amount of rotation. And again, I center it back up here. Now the one thing I kind of wanna do on the squash  is make this a bit more three dimensional and squashy  because we just kind of flattened it.

But if you watch this thing, you know,  it's a bit more, there's a bit more on the bottom  than there is on the top. Um, so let's add that with the brush. So I'm gonna take a brush and I'm just gonna kind  of brush here and add  some to the side. Now as I'm adding this, you could also ask yourself, well,  shouldn't I be taking it away from somewhere? And you would be right. So we could do that with the eraser tool  or we could scale down the oval that we already have.

I think I'm gonna try to scale down the  oval just a little bit more. And then I want to click drag, just the top piece  and then bring that down a little bit more  so it looks a bit more, you know,  there's more volume on the bottom. 'cause we're also dealing with gravity. So if I play that back, it's gonna be very, very fast  and it's dancing pretty wildly. But what I wanna do is loop this so it goes squash  to one side stretch squash to another side stretch,  and it does that over and over. So what I can do is duplicate the squash  and put it in between the two stretch poses  and do the same thing for the neutral pose.

And this neutral pose would be considered like an  in-between, um, um, you know, it's just,  it's helping marry the two extreme poses. So I'm duplicating that  and then I'm putting it on either side so  that it has somewhere to go from, from here  to here would be too big of a jump right from,  from stretch to squash. We don't wanna do that. We wanna, you know,  have a little bit of an in-between, so it doesn't flicker  otherwise it's gonna look a bit flickery  and strobe to our eyes. So, you know, this is only a few drawings,  only a few minutes, and we have a,  a little dancing water balloon. What you could do too is add like a little highlight  to make it, give it a little reflection  to make it look like a more, uh,  make it look more like a water balloon.

So let's grab a white  and just give each one of these drawings like a little,  little reflection here to help indicate the rubbery nature  of our water balloon. Oh, I wasn't, so you can hit undo. Um, if you make a mistake, command Z. And now we have a little, um,  highlight there on the water balloon. So the other thing you can do is, you know, I,  I mentioned this earlier, if we wanted  to hold these frames a little bit, we could. So instead of having to actually redo the drawing,  we can just say plus two.

So I'm gonna do that on the extreme poses so that we have,  we spend a little more time at the extremes  because to change direction takes a lot of energy  and to change direction quickly. It, um, can be a little jarring to the eye. So when we make those big changes, it might feel better  to have just a little bit more time on those extreme poses. Um, and you can play around with that. And that's really fun about that. This effect here on, on the frames is I didn't have  to spend all that time redoing the drawing to actually hold  that for another frame to test the, the new timing  that I, I was interested in.

So if we wanted to export this, all we have  to do is just go up to export  and it gives us options to use, uh, as an animated gif  or gif if you're one of those people. So she's an animated gif, they'll ask me where  to save it and we're good to go. As we go through the course, we're going  to get a little bit more complicated  with the tools I show you. And, you know, by the end of the course, you're going  to be able to add and combine  and arrange all these ingredients of the principles  of animation in the way that you want to,  to make something super appealing. So stay tuned for the next principle  of animation in the next lesson. Thanks for watching and I hope you share what you make.

I wanna see these bouncing and dancing water balloons  or any other example that you came up with. You know, like our muscles, I, I don't have a lot,  but you know, I could do this and that. That's the squash and this is the stretch. So, uh, you know, get  to animating and show me what you make. See you in the next lesson.