Video: Squashing and stretching with custom easing

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.

Watch the Online Video Course Flash CS4 Professional Tools for Character Animation

1h 57mIntermediateOct 28, 2008

Viewers:
in countries
Watching now:

The animation tools have been greatly enhanced in Flash CS4, and Todd Perkins teaches their advanced capabilities in Flash CS4 Professional Tools for Character Animation. He shows how to master the new Motion Tween model and the Motion Editor to control easing and effects such as Squash and Stretch. He demonstrates how to use the new 3D tools to add rotation, perspective shadows, and layered animations. Complex interactive animations and walk cycles are created without a line of code using bone systems. Todd also demonstrates the power of advanced masking, sound effect syncing, and much more. Exercise files accompany the course.

Squashing and stretching with custom easing

One of the basic principles of animation is something called squash andstretch. In this movie we'll take a look at how to apply squash and stretch toan animation.To understand squash and stretch I am going to test the movie here. The filethat I am using is Squash_Stretch.fla in the Chapter 01 folder, so we'll testthe 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 aboutthis animation, and that's because the monster doesn't adjust it all when ithits 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 toemphasize the impact of the monster with the ground. The principle of squashand stretch says basically just as much as the object contracts vertically, itshould expand horizontally. So it should squash in one dimension and it shouldstretch in the other dimension.So let's take a look at how to do that in this movie, and again if you don'thave access to Exercise Files you can just create a simple animation ofsomething moving up and down.

Now I remember I am applying custom easing with a bell curve to make themonster move up and down.What I am going to do is go to Frame 1 and then I am going to scroll up; I amgoing to remove the easing for my Y property. And the reason why I am doingthis is so that I can adjust squash and stretch in relation to the monster'sposition. So what I am going to do is go to the last frame now and when themonster is at the bottom of the screen I want it to squash and stretch a littlebit. So what I am going to do is go down to the Transformation area and I amgoing to make sure that Scale X and Scale Y are unlinked. So you should see theUnlink 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 inthe other direction to about 75. So it's up 25% in Scale X and down 25% inScale Y. I also don't need any easing applied at this point. So I am going toturn easing off for all of the Transformation properties.So we go to no easing, and notice that when I squash and stretch the monsterit's not touching the bottom anymore that's, because it's squashing andstretching 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-dragthis Slider on the last frame to move the monster down so its feet are at thebottom of the Stage.So I basically we have the monster starting up with no scale applied and thenfinishing off squashed and stretched. So that looks good.Now what I am going to do is apply the Custom easing to the Y position, andthen I am going to scroll down, and I am going to apply that same custom easingto my Transformation properties. So I am going to click the drop-down for easefor all the Transformation properties and I'll choose Custom. That will applymy same bell curve to my squash and stretch animation.

So if I scrub the playhead, I'll see this squash and stretch animation goesalong with up and down animation. So now I'll test the movie usingCommand+Return on the Mac or Ctrl+8 on the PC.So now here you may notice that the monster is kind of squashing and stretchinga little bit early. You pretty much don't want any squash and stretch to happenuntil the monster hits the ground, because obviously the squash and stretch isto represent the impact of the ground on the monster. So what I can do iscreate 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 thebottom and in the Ease's section I am going to add another Custom Ease, so thisis Custom 3, and then I am going to expand Custom 3, and I am going to applythe 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 thehandles on the first and last keyframe so you have a straight line. I am goingto Command-click or Ctrl-click on Frame 9 to create a keyframe. Drag the Sliderall 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 faras 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 7and 12. So I am going to Command or Ctrl-click on Frame 7 and I am going toclick-and-drag the keyframe down so that no squash and stretch will be applieduntil Frame 8, then I am going to go to Frame 12 and then I will Command-clickto create a Keyframe. Now I'll drag it all the way down. So now this curve iscompletely 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. Iam going to scroll up and in transformation I am going to choose my 3-Customeasing and now I'll test the movie and see that I have a little bit morerealistic 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 andapply them to different properties to give your animations a more organic feel.

There are currently no FAQs about Flash CS4 Professional Tools for Character Animation.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.