CHAPTER SEVEN: ANIMATION BASICS This chapter introduces you to DeluxePaint III's animation features. It begins by explaining the basic model for animation and then covers each of the different ways to create animations in DeluxePaint III. We recommend that you work through this chapter in one sitting. It will take you approximately 45 minutes to complete. BEFORE YOU BEGIN Do the following before you start into the examples: Boot DeluxePaint as you normally would. When the Choose Screen Format requester appears,click OK to use the default settings(Lo Res 320x200 and 32 colors). In a moment the DeluxePaint screen appears,and you're ready to begin. THE BASIC MODEL The basic idea behind animation in DeluxePaint is that instead of having a single page to paint on,you have multiple pages that you can paint on and flip through. By creating images that differ slightly from page to page and then playing them back in rapid succession,you can create the illusion of motion. Figure 7.1 The basic model This section shows you how to: Create frames for your animation. Paint on individual frames in the animation. Paint while the frames are flipping--this is called animpainting. CREATING FRAMES The first step in building an animation is to create the frames to paint on. Choose Frames>Set# from the Anim menu. The Set Frame Count requester appears. SET FRAME COUNT COUNT: 0 CANCEL OK FIGURE 7.2 The Set Frame Count Requester Click in the Count edit field,change the frame count to 10 and click OK. You now have 10 frames to paint on. Notice the numbers 1/10 at the left side of the menu bar. This means you are positioned on the first frame of a 10 frame animation. PAINTING ONE FRAME AT A TIME Select the largest round built in brush and paint a dot in the upper left area of your screen. The dot you just places in on frame 1. The trick of animation in DeluxePaint is to paint a slightly different picture on successive frames. So you need to move to the next frame. Choose Control>Next from the Anim menu to move to frame 2. (Notice the menu bar shows 2/10). Click another dot to the right of where your first dot was. Now you have a dot on frame 1 and a dot on frame 2. To create a series of dots that move across the screen,you just continue the last step. Of course,choosing from the menu to change frames is a little cumbersome,and it forces you to move the mouse when you want to change frames. It's more efficient to move through the animation frames by using the keyboard equivalents.(You'll see them listed in the menu beside the options.)We'll use one to complete our little animation: Position your brush just to the right of the dot you painted. Press the 2 key at the top of the keyboard once,then click the mouse to paint a new dot. Repeat this step until your first dot appears again in the left side of the screen. (The menu bar will show 1/10 as your frame position.) You've just created a brief animation. Now let's play it. Choose Control>Play from the Anim menu(or press 4 at the top of the keyboard). You should see your dot moving from left to right across the screen. To stop the animation,press the Space bar. So,one way to create an animation in DeluxePaint is to paint on a series of frames individually. PAINTING WITH ANIMATION For animations that involve simple movement of an object,DeluxePaint provides a much easier method called animpainting. Essentially,the frames flip automatically while you paint. Click CLR. The Options requester appears. OPTIONS CURRENT FRAME CLEAR RANGE: 1 TO 2 ALL FRAMES CANCEL FIGURE 7.3 Options requester When you click CLR with multiple frames,DeluxePaint gives you the option of clearing only the current frame,a range of frames in your animation,or all frames. Click All Frames in the requester. Instantly all of your frames are cleared and you are automatically set back at frame 1. Now let's do some animpainting. Select the large round brush. Click the Dotted Freehand tool. Hold down the Left Amiga key(the Commodore key on the Amiga 500)and paint by holding down the left mouse button and dragging across the screen from left to right. As you paint,the frames flip,so you place only one dot on each frame of your animation. Notice that the frame counter in the menu bar changes to show you the frame you are on. When you reach the last frame,you loop back to frame 1, where you'll see your first dot again. After you have painted for a few seconds,stop and choose Control>Play from the Anim menu(or press 4 at the top of the keyboard). Press the Space bar(or click the mouse button)to stop the animation. Now you know how to create frames,how to move through the frames one by one and paint,and how to animpaint. Animpainting is especially powerful if you have an animated brush to paint with;we'll show you how animated brushes work later in this chapter. Right now we want to show you more ways to move things on the screen. AUTOMATIC ANIMATION USING THE MOVE REQUESTER The Move requester lets you move and rotate a brush over a number of animation frames. More importantly,you can move and rotate the brush in all three dimensions. In essence,you are painting using Perspective,but DeluxePaint makes all of the calculations for the individual frames. This section will take you through a detailed explaination of each feature of the Move requester and give examples for most of the features. To begin,click CLR and All Frames to clear the previous animation sequence. Choose Frames>Set # from the Anim menu. In the requester,change the count to 20 and click OK. Press Shift-1 to move to frame 1 of your animation. Choose load from the Brush menu,and load the brush DPaint Title from the art disk. Choose Change Color>Use Brush Palette from the Picture menu. NOTE These instructions assume that your memory method(Method in the Anim menu) is set to compressed--the default setting. Amigas with one megabyte of RAM can create only 9 to 10 frames using the Expanded method. You'll find a brief description of the two memory methods in the Reference section of this manual. SIMPLE MOVES IN THREE DIMENSIONS The Move requester does exactly what its name implies--it moves your brush on the screen. There are many impressive animations you can create with only the Move requester and a brush like our DPaint III brush,but to create those impressive animations,you need to know how each feature of the move requester works. This brief section explains the most basic Moves. Stamp your brush in the center of the screen. Choose Move from the Anim menu. The Move requester appears. MOVE X Y Z DIST: 0 0 0 BRUSH ANGLE: 0 0 0 BRUSH CLEAR GO TO BACK CYCLIC EASE-OUT: 0 DIRECTION: EASE-IN: 0 MOVE RECORD COUNT: 10 PREVIEW TRAILS FILL DRAW CANCEL EXIT FIGURE 7.4 The Move requester The first row in the Move requester lists the three axes in the thee dimensional space of your screen. If you are familiar with Perspective you know that these axes run up and down,left and right,and out and in from the screen respectively. Figure 7.5 shows the orientation of threee axes to the screen. Directly below X,Y,Z letters there are edit fields for entering Distance(Dist:) numbers. You enter numbers here to tell DeluxePaint how far to move your brush in any direction or combination of directions.(If your brush is moving only on the X and Y axes,the numbers are equal to pixels,but once you move along the Z axis,the units are either smaller or larger than pixels.)Let's look at a simple example: Click in the Dist edit field below X and enter 200. Check that the edit field beside Count(near the middle of the requester)shows 20 as the current setting. If the number is not 20,click in the edit field and change the number. Click Preview to see a preview of the movement of your brush. You will see your brush enclosed in a wire frame move to the right across the screen. If you want your brush to move to the left,you enter a negative number for the X Distance. In the Move requester,set the X Dist edit field to -200. Click Preview. This time your brush moves to the left across the screen. A similar rule applies to the other two axes:Y Distance moves your brush upward if the number is positive and downward if the number is negative. Z Distance moves your brush out to the distance if the number is positive or inward to the screen if the number is negative. You can use any combination of the three Dist edit fields to move your brush anywhere in three dimensional space. Try it if you like. Set a number for each of the three fields and click Preview to see where the brush would move. SIMPLE ROTATION In addition to moving the brush along an axis or several axes in combination, the Move requester lets you rotate the brush around one or more axes. In the Move requester,click Clear to clear all of the Distance and Angle edit fields. Click in the Z Angle edit field and enter 360 as the angle of rotation.(This tells DeluxePaint that you want to rotate the brush 360 on the Z axis.)Click Preview. You'll see a wire frame representation of your brush rotate clockwise on the screen. Just as you entered negative numbers to change the direction of movement wen using Distance moves,you enter negative numbers to change the direction of rotation when you use Angle moves. Change the Z Angle setting to -360 and click Preview. Now you'll see the wire frame rotate counter-clockwise. MOVEMENT ALONG THE BRUSH'S AXES In our examples,we've been moving the brush along the screen axes. You might have noticed that there are buttons labeled Brush to the right of the Distance and Angle edit fields. These buttons let you set whether you want to move and rotate on the screen axes or the brush axes. When your brush is in a standard orientation(0,0,0)movement on the brush axes is the same as movement on the screen axes. If you rotate your brush using Perspective,the brush axes may no longer correspond to the screen axes,and movement on the brush axes will be different. Here's an example. Click Exit to close the Move requester. Click CLR and click All Frames in the requester to clear all frames. Choose Perspective>Do from the Effect menu to enter Perspective mode. Move the brush down near the bottom of the screen and press Shift-Keypad 7 to flop the brush over on its back. Click the left mouse button to paint down the brush. To flop the brush over on its back,you rotated it 90 on the X axis(see the Menu Bar)and shifted the brush axes so that they no longer correspond to the screen axes. Figure 7.6 illustrates the change in the brush axes. Now if you use the Move requester to move the brush along the Y axis,you will get different results depending on whether or not you have selected the Brush button. Choose Move from the Anim menu. In the Move requester,click Clear,set the Y Distance to 200,and click Preview. You see a wire frame of your brush move upwards on the screen,just as you would expect when moving along the screen axis. Click the Brush button beside the Distance edit fields.(The button becomes highlighted.)Now click Preview and watch the direction the brush moves. This time the brush moved into the distance along the Y axis of the brush. As Figure 7.6 above shows,the brush's Y axis is the same as the screen's Z axis when you rotate backwards 90 on X as we did. ROTATION ON THE BRUSH'S AXES You may have already guessed what will happen when we rotate the brush on it's own axes rather than on the screen axes,but this is sometimes difficult to visualize,so we'll give an example. Click Cancel to close the Move requester. Click CLR and click All Frames in the requester to clear all frames. Choose Perspective>Reset from the Effect menu to reset all of the Perspective settings. At this point you once again have your brush in the original orientation and are in Perspective mode. Now we'll rotate the brush on the Z axis,so that the X and Y axes of the brush no longer match the X and Y axes of the screen. Hold down the 2 key on the keypad until the brush has rotated 45 on the Z axis. (You'll see the degrees of rotation in the right side of the menu bar.) Paint down the brush in the middle of the screen. Display the Move requester.(Are you getting tired of choosing Move from the Anim menu? Then try the keyboard equivalent,Shift-M.) In the Move requester:click Clear;set the X Angle to 360;click the Brush button to the right of the Angle edit fields;click Preview. With the settings above,you'll see the brush tumble toward the screen on the X axis. Remember that the brush is rotating on the screen's X axis. Now let's look at a rotation on the brush's X axis. In the Move requester:click the Brush button to the right of the Angle edit fields;click Preview. This time the brush spins around its own X axis instead of tumbling toward the screen. The idea is the same for all rotations,though it isn't always easy to predict what a complex set of rotations will look like. You'll probably find that most of your moves can be accomplished with rotation around only one axes, we think you'll use these most often,so brush rotations are the default setting. NOTE If you found this last example to be confusing,you should probably review the chapter on Perspective. There you will find more information on the difference between screen and brush angles. The examples might help you understand how the Move requester uses them. THE GO BACK COMMAND The Go Back button has a similar function to the Clear button,only it affects the location of the brush rather than the settings in the Move requester. When you use the Move requester to move your brush in three dimensional space, DeluxePaint remembers the ending position of the brush when the move is complete. If you want to do a second move from the original brush position,you click Go Back to reset the brush location. We'll show you the results of two different move paths,one without using Go Back and one using Go Back. In this example you'll also actually draw and play the animation instead of simply previewing it. SUCCESSIVE MOVES WITHOUT GO BACK Click Cancel in the Move requester. Click CLR and clear all frames. Choose Perspective>Reset from the Effect menu(or press Shift-Keypad-0)to reset your brush to the original orientation. Position the brush at the bottom of the screen,and paint it down. Display the Move requester. Click Clear to clear the edit fields and then set the Y Distance to 200 and the Z Distance to 400. Click Draw. You just created the first part of the brush's movement,now we'll create the second part to continue from where the brush ended. Display the Move requester. Set the X Distance to 800,leave the Y distance at 200,and set the Z distance to 0. Click Draw. Choose Control>Play from the Anim menu and watch your animation. Press Spacebar when you've seen it enough. In the animation you created,your brush moves into the distance and upward and then shoots off the screen diagonally to the right. Because you didn't use the Go Back button,the second part of the brush's movement follows directly from the end of the first part. SUCCESSIVE MOVES WITH GO BACK In the next set of steps,you'll use the same settings as the first example,but you'll also click the Go Back button before drawing the second part of the brush movement. Click CLR and clear all frames. Choose Perspective>Reset from the Effect menu (or press Shift-Keypad-0)to reset your brush to the original orientation. Position the brush at the bottom of the screen,and paint it down. Display the Move requester. Set the X Distance to 0,the Y Distance to 200,and the Z Distance to 400. Click Draw. Display the Move requester. Set the X Distance to 800,leave the Y distance at 200,and set the Z distance to 0. Click the Go Back button. Click Draw. When DeluxePaint is finished drawing the animation,choose Control>Play from the Anim menu and watch your animation. This time you see your animation shows a title splitting into two,with one title moving into the distance and upward and the other moving diagonally off the screen to the right. CYCLIC AND NON-CYCLIC MOVES You use the Cyclic button to tell DeluxePaint which of two kinds of animation you want: an animation that will loop back on itself(cycle)or chain from the current move to another move of a similar type;or an animation that is linear and will end at the last frame you requested with the Move requester. DeluxePaint draws your move differently depending on whether or not the Cyclic button is selected. In this section we'll give you a very quick example of the difference between the two moves. Load any brush that contains features to help you tell whether or not the brush has been rotated.(The DPaint Title Brush will do very well). Click CLR and clear all frames. Choose Perspective>Reset from the Effect menu (or press Shift-Keypad-0)to reset your brush to the original orientation. Stamp the brush in the upper half of the screen. Display the Move requester. Click Clear in the requester. Set the Z Angle to 360. Make sure the Cyclic button is selected. Click Draw. When DeluxePaint is finished drawing your animation,notice that you are on frame 1 of your animation. DeluxePaint moved you to the frame past the ending frame of your Count. Press Shift-2 to go to the last frame of the animation.(The Menu Bar will show 20/20 on the left side.) Notice that on the last frame of your animation,the brush is not rotated 360, even though you asked for a 360 rotation in the Move requester. This is because you had the Cyclic option selected to tell DeluxePaint that you were creating a "cyclical" animation(one that starts and ends at the same point). With this animation,you can play continuously with a seam. Press the 4 key at the top of the keyboard and watch the animation for a moment. Press Space bar to stop the animation. If DeluxePaint had painted the brush fully rotated on the last frame,you would have the same image on frames 1 and 20,and the animation would hiccup when you played it continuously. Let's draw the same thing with Cyclic turned off to see how that works. Press Shift-1 to move to frame 1 of your animation. Paint your brush in the lower half of the screen Display the Move requester. Click Cyclic to turn if off(remove the highlight)and click Draw. Even as the new move is being drawn you will probably notice that the new rotation is in larger steps than the first one. When the draw is complete,you will be left at frame 20,where you can see that the new move completed the 360 rotation on frame 20.(Remember that the Cyclic move left you on frame 1). Press the 4 key at the top of the keyboard and watch the animation. Press Space bar to stop the animation. You should be able to see that the rotation at the top of the screen is smooth, but the rotation at the bottom of the screen hiccups noticeably. You might ask yourself at this point why anyone would want Cyclic turned off. The answer is simple:you might want to rotate exactly 90 by a particular frame or you might want to move an object from point A to exactly point B. Generally, if you are creating an animation sequence that runs for less than the full number of frames you have allocated for your animation,you don't want Cyclic turned on. For a clear example of why you would want Cyclic turned off,follow the next set of steps. Clear all frames of your animation. Press Shift-2 to move to the last frame. Select the Unfilled Circle tool and the single-pixel brush and draw a small circle on the right side of the screen. Choose Coordinates from the Prefs menu to turn on Coordinates. Select the Dotted Freehand tool and the largest round built-in brush. Position the brush in the middle of your unfilled circle and note what the Coordinates show as the location of the brush. Move the brush 200 pixels to the left,press 2 to move to frame 1 and stamp down your brush. TIP When you need to move your brush in a straight line horizontally or vertically as you did in the step above,hold down the Shift key. This constrains your cursor to horizontal or vertical movement,depending on which direction you move in first. Display the Move requester,click Clear,set the X Distance to 200,make sure Cyclic is selected,and click Draw. When DeluxePaint finishes drawing the animation,notice that you are left on frame 1. Now look at the last frame(press Shift-2). You'll see that even though the distance from where you stamped your brush to the center of the circle was exactly 200 pixels and the move you requested was 200,the dot did not reach the center of the circle. If you want to move your brush to a specific location by your ending frame,you don't want Cyclic on. Figure 7.7 shows the results of the steps above with Cyclic selected and not selected. Although you can't see it,DeluxePaint has positioned the brush in the center of the circle on frame 1. If you want to prove this. Go to frame 20,display the Move requester,click Clear,change the Count to 1 and click Draw. When you complete a move with Cyclic selected,DeluxePaint automatically advances you to the frame beyond the end of your Count and the brush position DeluxePaint remembers is the position your specified in the Move requester. SMOOTH MOVES WITH EASE The Ease Out and Ease In edit fields let you specify a number of frames over which you want the brush to accelerate or decelerate in your animation. The primary advantage of these feature is that you can make the brush movement smooth at the beginning and ending points. Also,some effects require a gradual acceleration and deceleration to be realistic. For example,a bouncing ball should accelerate on the way down. The bouncing ball is a good example of how this feature works,so let's try it. In the process we'll also use the Come To option. Clear all of your frames. Draw a filled circle about the size of a nickle and pick it up as a brush. Move to frame 20 and stamp the brush down near the bottom of the screen. Display the move requester;click Clear;enter -170 for your Y Distance move. Change the Ease Out field to 10. Select the Come to option. Make sure the Count is set to 20. Click Draw. When DeluxePaint has finished drawing your animation,chose Control>Ping Pong from the Anim menu to play the animation forward and backward. What you should see is a bouncing ball. Let's take a moment to review what you just did. When you entered -170 for your Y move,you told DeluxePaint that you wanted the brush to move downward 170 pixels. When you entered 10 in the Ease Out edit field,you told DeluxePaint that the brush should gradually increase its speed ove the first 10 frames and then move at the same speed for the last ten. Finally,by clicking the Come To option,you told DeluxePaint that the brush movement should end in the position and on the frames where you clicked. The Come To option is especially useful when it is easier to stamp the brush at the end of a move than to stamp it at the beginning. This was exactly the case with our bouncing ball example. We can more easily stamp the brush where we want the ball to bounce than we can stamp above and enter numbers that will move the ball to the proper end point. WHAT'S LEFT What remains in the Move requester is fairly straightforward. For now,we'll summarize what each of the buttons does. You'll find examples of the features in the following chapter and additional explanations in the Reference. DIRECTION The Direction options control the direction of the move and the direction of the recording. The Go From button is the default setting for movement. With this option selected,the settings in the Move requester are used to paint motion away from the point where you stamped your brush. For example,an X Distance of 200 moves to the right from where you stamped your brush. With the Come To option selected,the settings in the Move requester are used to paint motion toward the point where you stamped your brush. For example,an X Distance of 200 moves to the right to where you stamped your brush. This option is most useful when it's easier to specify the position where you want to move to end than it is to specify the beginning. Remember that you want to stamp the brush on the last frame you want to draw. RECORD The Record options let you specify the direction in which DeluxePaint paints the frames of your move. Forward is the default and paints the frames by flipping forward. In Place causes DeluxePaint to paint all of the move on the current frame. Backward paints the frames by flipping backward--this option is useful with Trails. Trails and Fill are best explained by vivid example,you'll find two examples of each in the next chapter. ANIMATED BRUSHES So far we've shown you how to create an animation by painting on a series of frames. DeluxePaint also lets you select an area of animation as a brush and paint with it. The result is that the brush changes while you paint,and, depending on whether or not the frame changes,you create either animation or interesting effects. In A Guided Tour,we showed you how to load and use one of the animbrushes included on your Animation disk. In this section,we'll show you how to create as imple animbrush and paint with it. CREATING A SMALL ANIMATION To begin,let's create a simple animation that we can easily pick up as a brush. Choose Change Color>Default Palette from the Picture menu. Clear all of your animation frames. Paint a circle about the size of a quarter and filled with a gradient. Pick your circle up as a brush. Paint your brush down and use the move requester to rotate it 360 over twenty frames(display the Move requester;set all of the options to their defaults;set the Z Angle to 360;select Brush angles;make sure the Count is 20 and that Cyclic is selected). Your brush will rotate in place to create an animation that looks a little like a spinning planet. PICKING UP AN ANIMBRUSH When DeluxePaint is finished painting the animation,step to frame 1 and choose Anim Brush>Pick Up from the Anim menu. This last step gave you a large cross-hair like the one you use to pick up standard bushes,but it is special in that it picks up from all of your frames. Pick up the circle animation as a brush as you normally would using the left mouse button. When you release the mouse button,you will see each of the frames flip as the area is picked up. When it's done,you have your animbrush. Another way to pick up an animbrush is to select the Brush Selector and hold down the Left Amiga key(Commodore key on Amiga 500's)as you pick up an area of your animation. USING THE ANIMBRUSH To prove that you have an animated brush,paint with it a little. You'll see that the brush spins as you paint. This is one way to use an animated brush. But better yet,try animpainting: Click CLR and clear all frames. Hold down the Left Amiga key(Commodore key on Amiga 500's). Position the brush in the lower left corner of the screen and paint from left to right across the screen. The frames flip as you paint,so you only place one cel of the animbrush on each frame of your animation. When you play the animation back,you'll see a ball roll from left to right across the screen. ANIMBRUSH SETTINGS When you begin to combine animbrushes into large animations,you'll find that occasionally you want to change the rate at which an animbrush transforms. You might even want to change the direction in which an animbrush plays. For example,you might want the gradient ball you created above to turn in the opposite direction. You can do this with the AnimBrush Settings requester. Choose AnimBrush>Settings from the Anim menu. ANIM BRUSH SETTINGS NUMBER OF CELS = 2 DURATION: 2 CURRENT: 1 DIRECTION: CANCEL OK FIGURE 7.8 AnimBrush Settings Click the (backward) direction button and click OK. Now your gradient circle will rotate in the opposite direction when you paint with it. The Duration field in the AnimBrush Settings requester let's you specify how many stamps of the brush the animbrush uses to complete its cycle. If the Duration number is larger than the number of cels,the brush seems to move more slowly. If the Duration number is smaller than the number of cels,the brush seems to move more quickly. Let's try painting normally with a brush and then paint with the Duration set higher. Choose AnimBrush>Load from the Anim menu. Load the file named Bird from the Animbrush folder of your Animation disk. Display the AnimBrush Settings requester and set the Direction to play forward. Click OK. Select light blue as your background color and clear all frames. Stamp the brush in the middle of the screen Display the Move requester. Click Clear. Set the X Distance to -100 and the Z Distance to -100. Click Draw. Your bird is painted flying outward from the center of the screen toward the left edge. Play the animation to see what it looks like. Now let's paint another bird that flaps its wings more slowly. Choose AnimBrush>Settings from the Anim menu. Set the Duration field to 24. Set the Current field to 1 to put the brush at its first cel. Click OK. Go to frame 1. Display the Move requester. Click Go Back. Change the X distance to +100 and leave everything else the same. Click Draw. This time your bird flies out to the right. Play the animation and compare the flapping of the birds wings. If you step through the frames of your animation one at a time,you'll see that the bird on the right takes two frames before changing the wing position,while the bird on the left moves its wings on every frame. Now that you've seen some of DeluxePaint's animation features,you might like to play around a little. Load the animations on your Animation disk and play them. There are several animbrushes on the disk that you can combine with the Mermaid animation. When you feel you're ready to see some more of DeluxePaints animation features,move on to the next chapter. It shows you how to create some interesting animation effects by combining different features of the program.