Tangents In this tutorial we are going to take a look at how tangents can affect an animation. One of the 12 Principles of Animation is called Slow In and Slow Out. This refers to the spacing of the in between frames at maximum positions. Rather than having a uniform velocity for an object, it is more appealing, and any times more realistic, to have the velocity vary at the extremes or key frames. For example, a bouncing ball moves faster as it approaches or leaves the ground and slower as it approaches or leaves its maximum height. The name comes from having the object or character "slow out" of one pose and "slow in" to the next pose. In 3DS Max, this principle is accomplished by using Tangents. Tangents are the invisible lines that connect an animation from one key frame to the next. By changing these line types, we can adjust the speed of our object as it either leaves its starting key frame, or approaches its next key frame in the line of animation. Let's start by opening a new 3DS Max file, and in the top view we will create 7 boxes, all equal in dimensions. It is always helpful when making an exact object to turn on your Snap tool. Then, in your TOP viewport, you should start to see the snap icon jump from point to point on your grid. Draw out a box in the top viewport. I drew mine out to equal 3 grid boxes high, by 3 wide, by 3 long. Like this The blue lines in the above image represent the snap icon, it is adjusting itself based on the points at each intersecting line of the grid. This allows me to make my box exactly 3 grids high.
If you have any trouble drawing the box out perfectly, don't worry. You can always go to your modifier tab with your box selected and manually adjust the settings for Height, Length, and Width. 3 grid boxes in all directions, is equal to 30 units. The settings for my box look like this. Once you have yourself a single box, we are going to copy it so that we have 7 boxes. Leave your snap tool on so the boxes end up evenly spaced apart, we are going to give all of these boxes exactly the same key frames and the same animation to begin so we want to make sure they are all the same.
Get your Move tool, and select the box you have made. The simultaneously while holding down the shift key on your keyboard, drag the box down. Holding the shift key is our short cut for the copy tool. It will duplicate the box for us. When you have dragged your new box to the desired location, let go of the mouse and shift key. A Copy dialogue box should have appeared like this: You should see that I have dragged my copy down giving it a space of exactly 1 grid length between the two boxes, and the Clone Options have popped up allowing me to make some decisions. The settings under 'Object' we have are Copy, Instance, or Reference. Copy creates a duplicate of your object, Instance creates a duplicate of your object where anything you do to change the first object, will also happen proactively to the second object in the future. Reference will give you an object that will only be used as reference, useful for positioning, or modeling but will not be a viable render object. We want to make sure that Copy is selected. In the Name box, you can name your box, or allow it to default a name to it. Box01 is what we started with, it will automatically name your new copy Box02. For what we are trying to do, this is just fine. The last settings we have to look at is the "Number of Copies:" setting. Remember earlier when I told you we were going to make a total of 7 boxes? Well by setting our number of copies to 6, we can get all 7 copies, evenly spaced down our viewport without the extra effort of doing this over and over. 6 copies + 1 original = 7 total boxes. It will automatically rename them Box02, Box 03, Box04 etc. as well.
Once you have set it to make 6 copies click the OK button. You should see 7 evenly spaced boxes on your screen now. You can click the Snaps Toggle button again to turn off snapping now, and hide your grid. If you screen looks like mine, you are right on track. Now, to make these boxes stand apart a bit, we can go in and change the color of each of our boxes. You could assign different textures to each box, but as we are only demonstrating an idea here, it is not necessary. Select your boxes 1 by one, and go to the right side of your screen. Next to the name of each of your boxes, is a color swatch. By clicking on the color swatch you can assign it a generic color. Do this for each of your boxes so that they are all a different color. This will help us keep them apart when we test our animation later.
When you are finished you should have a rainbow colored array of boxes on your screen. If you turn on your smooth+highlets on in your viewport, you will be able to see our boxes a bit more clearly as well. To do this, click in the top left corner of your viewport on the word Wireframe, and select Smooth+Highlights from the menu.
Now we will animate our boxes by giving them 3 key frames. We will make our boxes move from the left side of the screen, all the way to the right, and then back to the left again. So drag a selection around all of your boxes to select them all, and turn on your Auto Key button, towards the bottom right of your screen. Once Auto Key has been turned on you should see your timeline, and the button itself turn bright red to let you know Auto Key is active. Move the scrubber to frame #50, and get your move tool again. Then drag all of your boxes to the right side of your viewport. Like this:
You should notice that a key frame has now been made for you both at frame #0, and frame #50. Turn off your Auto Key button now. Scrubbing back and forth across your timeline, you should see all of your boxes move in unison to the other side of your screen. We also want our boxes to move back to their original starting point for this demonstration. Instead of moving the scrubber to frame 100 and turning Auto Key back on and moving them back, it is easier to just copy our first key frame over to frame 100. This keeps the boxes starting and ending in the EXACT same position. So, on your timeline with your move tool selected, drag a selection around the first red key frame on your timeline: -------> The timeline turns a blue color when you have items on it selected, and the key frame itself should turn white to let you know you have a specific key frame selected. Then simply hover over your key frame until you see the move arrows and just like with our boxes, hold down the shift key on your keyboard, and drag the key frame over to frame #100. Now you have 3 key frames, and scrubbing back and forth across the timeline, should show your boxes moving together from left to right and back to left again. All of our boxes have the exact same animation applied to them. Now we will be able to truly see the effects that Tangents will play in our animations. Select the top box, and move to the right hand side of your screen. Click on the motion tab, 4th one in from the left.
On the motion tab, we have all of our settings for the animation controllers for our 3 types of settings. Size, Rotation, and Position. You should recognize this from our tutorial on Spline Path Constraints. First of all we want to concern ourselves with what type of motion we are editing. At the top of our settings menu you will see two large buttons. Parameters and Trajectories. Make sure that Parameters is toggled down, then below that in the PRS Parameters rollout, make sure that the Position button at the bottom of the rollout is depressed as well. See above image.
If all is well, you will be able to see the rollout labeled "Key Info (Basic)" This is where we will do all of our changes to the tangents. They are represented by the blue line drawings in the In: and Out: area of the settings rollout. We will be going back and forth between our Top viewport, and these settings for the rest of this tutorial. You must be on one of the frames containing the box's key frames in order to adjust these settings. They are changing the settings for the Key Frame, and not the actual box. So make sure you start on frame #0 of your animation. By clicking and holding on the blue line drawing in the" In:" settings area, you will see that we have some choices in tangents. They are not listed by name, only by curve so I will list them out here for you. You can also find this information in the 3DS Max Help files. Just search for Tangent Types.
From top to bottom they are: Smooth Linear Step Fast Slow Custom Flat Smooth: Creates smooth interpolation through the key. Linear: Creates linear interpolation at the key. A linear tangent affects the curve near the key only. Full linear interpolation between two keys occurs only when the Out tangent of the first key and the In tangent of the next key both use a linear tangent Step: Creates binary interpolation from one key to the next. Step tangents require a matched set between the Out tangent of one key and the In tangent of the next key. Choosing Step for the In tangent of the current key also sets the Out tangent of the previous key to Step. Likewise, choosing Step for the Out tangent of the current key also changes the In tangent of the next key to Step. Using Step tangents, the outgoing value of a key is held constant until the time of the next key is reached. The value then abruptly jumps to the value of the next key. Use this tangent when you want to animate On/Off switching or instantaneous changes from one value to the next. This can be very helpful when you want to key frame out your own animation without 3DS Max interfering. The action will only change at your specified key frames. Fast: Causes the interpolated rate of change to speed up around the key. The effect is the opposite of using slow. A fast In tangent accelerates as it approaches the key. A fast Out tangent begins fast and decelerates as it leaves the key. Slow: Causes the interpolated rate of change to slow down around the key. A slow In tangent decelerates as it approaches the key. A slow Out tangent begins slow and accelerates as it leaves the key. Custom: Displays adjustable tangent handles at the key in Function Curves mode in 3ds Max. Flat Tangent: Displays a smooth interpolation type designed to eliminate overshoot with no editable handles. Tangent slopes automatically in order to take the most direct route to the next key value.
Each of these tangents gives us a different rate of speed, at which the key frames connect to each other. Some start out moving fast and end slowly, some start slower and end quickly, and others get more even more bazaar by adjusting the curve throughout. Let's start by changing our In: and Out: tangent to Smooth (the top one in the list). <--- At the top here is the key frame number, you can navigate quickly using these arrows to go back and forth between key frames. <---- Time: this tells you what actual frame you are at, our first key frame is at 0 <---- Value: this is the actual location in the scene that your object is sitting at. In this case, -165.0 from the center along the X axis. <---- Tangents: You can change these both for the In: value and Out: differently depending on how you want your animation to move. Now, move your scrubber to frame #50 where your second key frame is located, and change the tangents for this key frame to smooth as well. You will notice that the top number in the settings has changed to a #2. This is our second key frame in the animation, so it has labeled it as such. In the Time: settings, you'll notice the number 50. This is the frame that our second key frame was created in. Now Once you have changed our tangents for the In: and Out: to Smooth, try clicking on the arrow pointing to the right at the top of the settings rollout, here:
You should notice that it takes you to our 3rd key frame directly, moving the scrubber to time frame #100 in the animation. Utilizing these arrows can help you quickly jump from key frame to key frame without worrying about going back and forth from the scrubber in the timeline. Change both of our tangents here to Smooth as well.
Now let's go back to our top viewport, and select our second box. On the motion tab in our Key Info (Basic) settings rollout: Change the In: tangent to the second one down in our list. The Linear tangent: It should look like the above image.
Now notice the arrow buttons next to our tangent curves. Click on the one highlighted above, the arrow pointing right from the In: tangent setting. It copies the tangent from the first box, over to the second box. Giving us the linear tangent in both In: and Out: This is a nice quick way of carrying our tangent settings forward through our animation. Now, try clicking on the arrow pointing to the right from our Out: box setting.
It will appear as though nothing has changed, but move to your second key frame now, by clicking on the arrow in the top left of our settings pointing right like we did before. It should move you to your second key frame at frame #50. Now notice that when clicked the arrow pointing right from our Out: setting in the first key frame, it did in fact copy it over to the In: value on our second key frame. Utilizing these arrow buttons for navigation and copying over tangents from one setting to the next can save you a lot of time and patience when working with tangents. Do the same thing to copy the Linear tangent to the Out: setting, and then the In and Out settings for key frame #3. All of your tangents for all 3 key frames of your Box02 should now be set to linear.
Select your third box in the top viewport now. Then move to the right for your Motion Tab settings, and change the tangent in all of your key frames to the third option in our list. The Step tangent. Make sure they all have the Step Tangent line in all 3 of our key frames, for both In: and Out: boxes.
Then move to the 4th box and do the same thing, only this time with the 4th option down. The Slow Tangent: After all the key frames settings have been successfully changed to the Slow tangent like above, then move to the 5th box down in your Top viewport, and change all of its tangent settings to the 5th choice in our tangent list. The Fast Tangent:
Now we will do the same thing for our 6th box down, we will change all of its tangents to the "Custom" tangent. This one gets a little more interesting. The custom tangent, as the name suggests. Allows you to customize the curve used in speeding up or slowing down our animation. In order to do this, we need to go to a new window called the "Curve Editor" there are two options for this. Our first option is a button down near our timeline, on the left hand side of the screen: This button will expand our timeline area, to show the "Mini" curve editor. Click it now to see. Your time line changes to show you the entire layout of your animation, based on your curves instead of just the key frames. These curves sloping up and down in the curve editor, are the rate at which your object will travel. Sloping the curve up will speed your object up, and down will slow it down. We only need to worry about our X axis, since that is all we animated the box moving in.
In order to do that, click on the filters button. It is the button shown above, that resembles a funnel, and a tiny settings dialogue window. We are going to RIGHT Click it to bring up the filter settings right click menu, if you regular left click this button you will get a large settings dialogue box that we just don't need to worry about right now. So! Right click, and select Animated Tracks Only from the resulting list menu. <---- Click this one!
In your Mini Curve Editor, it will select for you any tracks that you currently have animated. In this case, it is the object track, for X, Y, and Z axis settings. Shown below. In order to make this a little simpler for ourselves, we are going to realize that in reality the only direction we did animate our boxes, was back and forth along the X axis, or... the red arrow/curve. In the selection list highlighted above, click on the label " X Position" to only edit the curve for the red line. The other color lines disappear and we are left with only a single line to manipulate.
In the section of our mini curve editor, where the curve is actually drawn for us, you can zoom in and out using your mouse wheel. Get to a point where you can see all 3 of our key frames where they occur along this line. Like this: Our key frames appear along the line as little grey boxes, we can now individually edit the bezier handles on this boxes by selecting each individual key frame, and moving them just like you would in a program like Illustrator with the pen tool. You can do this for all the key frames you currently have set, and adjust the curve to your liking. Changing these slopes will change the speed your object moves towards and away from each of these key frames. Try editing the line in various ways to see the results. Experiment until you are familiar with how adjusting these curves will affect your animation. you can also add new key frames along your curve by clicking the add key frame button, and then clicking anywhere on your line.
When you are finished editing your X axis curve, click the close button in the top left of the mini curve editor to return to your normal animation timeline. Our 7th box, we will leave at the default. The Flat Tangent which appears below the custom tangent in our tangents list.
Now test your animation to see how differently each of your boxes move. Each one of these boxes has the same key frame, and the same animation applied to it. All we have changed, is the speed at which the boxes arrive at or travel from a key frame. See also the attached movie clip showing the different rates at which our boxes are moving. **Challenge!** If you are feeling frisky, try animating a bouncing ball using custom tangents only. http://tutorials.render-test.com/examples/tangents.avi