Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the basic principles of animation is something called squash and stretch. In this movie we'll take a look at how to apply squash and stretch to an animation. To understand squash and stretch I am going to test the movie here. The file that I am using is Squash_Stretch.fla in the Chapter 01 folder, so we'll test the movie and we'll watch the monster moving up and down. You may notice that there is something that just doesn't feel quite right about this animation, and that's because the monster doesn't adjust it all when it hits the ground. I'll close the Preview window. Let's talk about squash and stretch.
When the monster hits the ground its body should contract just a little bit to emphasize the impact of the monster with the ground. The principle of squash and stretch says basically just as much as the object contracts vertically, it should expand horizontally. So it should squash in one dimension and it should stretch in the other dimension. So let's take a look at how to do that in this movie, and again if you don't have access to Exercise Files you can just create a simple animation of something moving up and down.
Now I remember I am applying custom easing with a bell curve to make the monster move up and down. What I am going to do is go to Frame 1 and then I am going to scroll up; I am going to remove the easing for my Y property. And the reason why I am doing this is so that I can adjust squash and stretch in relation to the monster's position. So what I am going to do is go to the last frame now and when the monster is at the bottom of the screen I want it to squash and stretch a little bit. So what I am going to do is go down to the Transformation area and I am going to make sure that Scale X and Scale Y are unlinked. So you should see the Unlink icon.
Now I am going to click-and-drag Scale X to scale out the monster to about 125% on the Scale X property, and then I am going to click-and-drag the Scale Y in the other direction to about 75. So it's up 25% in Scale X and down 25% in Scale Y. I also don't need any easing applied at this point. So I am going to turn easing off for all of the Transformation properties. So we go to no easing, and notice that when I squash and stretch the monster it's not touching the bottom anymore that's, because it's squashing and stretching based on its transformation point which is in the center.
So what I am going to do is scroll up back to the Y property and click-and-drag this Slider on the last frame to move the monster down so its feet are at the bottom of the Stage. So I basically we have the monster starting up with no scale applied and then finishing off squashed and stretched. So that looks good. Now what I am going to do is apply the Custom easing to the Y position, and then I am going to scroll down, and I am going to apply that same custom easing to my Transformation properties. So I am going to click the drop-down for ease for all the Transformation properties and I'll choose Custom. That will apply my same bell curve to my squash and stretch animation.
So if I scrub the playhead, I'll see this squash and stretch animation goes along with up and down animation. So now I'll test the movie using Command+Return on the Mac or Ctrl+8 on the PC. So now here you may notice that the monster is kind of squashing and stretching a little bit early. You pretty much don't want any squash and stretch to happen until the monster hits the ground, because obviously the squash and stretch is to represent the impact of the ground on the monster. So what I can do is create another Custom Ease specific to the scale X and scale Y properties.
So that is what I am going to do right here. I am going to scroll down to the bottom and in the Ease's section I am going to add another Custom Ease, so this is Custom 3, and then I am going to expand Custom 3, and I am going to apply the same kind of bell curve that I did for the Custom 2. I am going to drag the keyframe at the end all the way down bringing the handles on the first and last keyframe so you have a straight line. I am going to Command-click or Ctrl-click on Frame 9 to create a keyframe. Drag the Slider all the way to 100 to make it 100% there.
Now what I am going to do is drag the handles all the way to the right as far as it'll go on Frame 0, and then to the left is as far as it'll go on the last frame. Now what I am going to do is going to create some more keyframes on frames 7 and 12. So I am going to Command or Ctrl-click on Frame 7 and I am going to click-and-drag the keyframe down so that no squash and stretch will be applied until Frame 8, then I am going to go to Frame 12 and then I will Command-click to create a Keyframe. Now I'll drag it all the way down. So now this curve is completely flat and then really steep between frames 7 and 11.
So now what I am going to do is apply this easing to the squash and stretch. I am going to scroll up and in transformation I am going to choose my 3-Custom easing and now I'll test the movie and see that I have a little bit more realistic animation, and that looks great so I'll close the Preview window. So in the Motion Editor you can create as many custom eases as you'd like and apply them to different properties to give your animations a more organic feel.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.