Chapter 5

Creating and Embedding Simple 3D Animations

-by Kelly Murdock

CONTENTS

• Animation by Moving the Camera
• Animation by Moving the Models
• Working with Paths
• Animating Materials
• Creating GIF Animations with the GIF Construction Set
• Client-Pull Animations Using the <Meta> Tag
• Workshop Wrap-up

This is the chapter where you make the bold move from photographer to movie director. Animation is more than just moving objects; it's a visual language and one that we all identify with because it mimics real life.

In the last chapter, you learned to set up scenes and create 3D images. Now suppose in that same scene, you move the camera a little bit and capture another image. If you keep doing this and link all the images together, you end up with an animation. Even easier than that, 3D packages have ways to automate the movements within a scene. In this chapter, you'll cover various ways of creating animations with 3D packages and how to embed them in your Web page. Here's what you'll accomplish in this chapter:

• Create animations by simply moving the camera, also known as a camera fly-by.
• Animate models by using keyframes. Keyframes are the beginning, intermediate, and ending model positions. Once the computer knows these, it will happily generate all the in-between positions.
• Learn to work with paths.
• Create special effects with animated materials.
• Learn to embed your 3D animations as GIF animations with the GIF Construction Set.
• Learn to use the client-pull and server-push methods for adding 3D animations to the Web.

You'll be surprised how easy it is to create animations; the difficult part is already behind you. So round out your skills in using these 3D packages and learn how you can display them to the world over the Web. Maybe this is the start to your earning an Oscar.

For this chapter, you'll use trueSpace again. You should be feeling comfortable with this product by now; trueSpace does a good job with the animation basics, and it's easy to learn to use. There are several advanced animation techniques that other packages have, but you'll explore them in Chapter 9, "Creating Advanced 3D Animations for the Web."

Animation by Moving the Camera

Animations can be created very simply from a scene that's already set up by moving the camera around the scene. This is usually called a camera fly-by. In the previous chapter, you learned how to navigate objects. To perform a camera fly-by, you simply move and rotate the camera, but it's really even easier than that.

Because the computer knows the location of all objects in the scene and their relationships to each other, all that's necessary to animate a scene is to position the camera at the locations where the animation should start and end. These positions are known as keyframes.

If you want to move the camera through an intermediate position, then you can do that, too. Just tell the computer where the camera looks at which frame. The computer can then generate all the intermediate frames automatically. Take a look at this example:

1. Set up your scene by loading your model and background. For this example, a model of the Chrysler building and a sky background are used. Place a camera in the scene, open a new View window, and set it to the camera view. Position this camera to the first frame of the animation.
2. Click the Animation tool in the Animate Group. This opens the Animation panel that lets you control the animation frames. Notice that the current frame is set to 0.
3. Make sure the camera is selected, then enter 30 in the Current Frame Number field and hit the Enter key.
4. Reposition the camera to show the final frame of the animation in the camera window. Frames 1-29 are computed automatically at points between the first and last frames.
5. To see the animation, click the Play button in the Animation panel. The animation will be shown in the active window in either Wireframe or Solid Render mode, depending on which setting is active in the View Group.
6. If you're happy with what you see, then click the Render Scene to File button in the View Group to open the Directory dialog box. Give the file a name and select the type of file you want to save. Select the animation resolution and make sure the All Frames option is set and the Frame Rate is set to 30, then click OK.

In Figure 5.1, you can see Frame 17 of a camera fly-by of the Chrysler Building. Figure 5.2 shows how the animation progresses. In the background window, you can see the camera and lights.

Figure 5.1: Creating a camera fly-by past the Chrysler Building by specifying the first and last keyframes.

Figure 5.2: Frames from the Chrysler Building fly-by animation.

That's all there is to it. However, being able to move only the camera for fly-bys is rather limited and can grow old quickly. Luckily, trueSpace offers many other means of animating not only models, but even materials, so move on to find out more.

Animation by Moving the Models

Another way to produce animations is to keep the camera stationary and move the models. Although this method is slightly more complex, the animations are made the same way, by using keyframes. Take a look at how this is done in the following example.

After loading your models, you need to determine what needs to be animated. For the helicopter in this example, it wouldn't look right if the main and tail rotors didn't spin, so start there:

1. Move through the hierarchy until you've located the main rotor and switch to the Top view. First, you need to make sure the rotor will rotate around the center of the blades. Click the Axis button in the Util Group. The rotor will be dimmed, and the axes associated with the rotor will be white. Move the axis to the center of the rotor, then click the Axis button again to return to the rotor object.
2. With the axes centered, click the Animation tool button and enter 6 for the Current Frame Number. Click the Object Rotate button and spin the rotor about 160 degrees, using the right mouse button.
   

   Caution

   You may be tempted to rotate the rotor beyond 180 degrees, but if you do, the rotor will spin backward to that position. The computer always takes the shortest path between two keyframes.

   
   

3. Next, enter 12 as the Current Frame Number in the Animation panel and rotate the rotor another 160 degrees. If the rotor starts to stray, then the rotor's axis is still misaligned. In that case, go back to Step 1 and line up the axes. Repeat this step, incrementing by six frames each time until you reach Frame 30.
4. Now that you've completed the keyframes for the rotor blades, you should have noticed that the rotor center is separate from the blades. Repeat the previous actions for the rotor center, and use the blades to line up the rotor center.
5. Once you've got the rotor set, switch to the Perspective view and click the Play button to see how the spinning rotor looks.
6. Now switch to the Left view and zoom in on the tail rotor. Repeat the previous steps for the tail rotor and blades, but set your keyframes every three frames because you want the tail rotor to spin faster.
7. Select the entire helicopter and enter 30 for the Current Frame Number. From the Top view, move the helicopter a good distance toward the top of the screen. Click the Rotate Object button and rotate the helicopter slightly.
8. For a realistic touch, set a keyframe at 10 and rotate the helicopter about 20 degrees so that the nose is down; this adds a slight tilt to the helicopter in the Left view.
9. Finally, load the sky background image in the Render Options panel. Next, make a cube to represent some land below the helicopter and move it left in the Top view to simulate the moving ground. Frame 1 of the animation should look like Figure 5.3.

Figure 5.3: A helicopter that flies into the distance. This example shows how moving parts can be animated.

There are quite a few techniques in this example, such as moving axes, setting multiple keyframes, and animating object parts. It can be some work, but look at the flexibility you've gained. Using these simple techniques, you can animate any 3D model. Take a look at the finished animation in Figure 5.4.

Figure 5.4: A frame-by-frame look at the helicopter animation.

Working with Paths

Any moving object has an associated path. These paths are standard splines and can be saved and loaded from the Path Library. Occasionally, you can edit these paths without having to reset keyframes.

Splines are beneficial because of the power and control you have in manipulating them. Each spline has several control points that define its curvature. By selecting these control points, you can alter the way the curve looks. Each point also has handles, which change the way the curves approach and leave the control point. Handles can be set to make the control point a sharp point or a smooth curve.

Perhaps the best use of paths in trueSpace is attaching them to cameras. This allows you to save your favorite camera movements to be applied wherever you want.

Now to the example. In this example, you'll use a path to create an abstract tube, then match the tube with a camera on a similar path that will fly through the tube:

1. Start by placing a camera, then attach a path to it by clicking the Path button in the Animate Group. trueSpace will go into Spline Drawing mode. Click around in the view to set control points. The spline will automatically be drawn between the points you select. Click the right mouse button to make the curve a complete loop.
2. When you've finished your path, click the Play button in the Animation panel. The camera will move along the path. This looks nice, but it would be helpful if you could see where you're going. Click the Look Ahead button in the Animate Group, then click the Play button again. The Look Ahead button realigns the camera so that the lens is always facing forward.
3. Open the Path Library, which is a button in the Lib Group, and click the Add Path to Library button. This adds the path you just drew to the Path Library under the name Anim.
4. Next, you need something to move through. Click the Regular Polygon button in the Model Group to open the Poly Modes panel. Enter 16 in the Set Number of Edges field at the bottom of the panel, which gives you enough edges to represent a small-diameter circle. Next, click in the Perspective view and drag the mouse until you have a small 2D circle about the size of the camera.
5. Rotate the circle 90 degrees so that it's perpendicular to the reference grid.
6. Click the Sweep/Macro button in the Model Group and make sure the new Anim path you created is selected in the Path Library panel. The path will be attached to the circle you created. Change to the Left view and rotate the path so that it lines up with the grid.
7. Once the path is lined up, click the Sweep/Macro button again to create a tube that looks like the path, with the circle for a cross section.
8. Shift back to the Top view and select the camera object, then click the Path button in the Animate Group to show the linked path. Rotate and move the camera and its path until it lines up on the tube you created, as Figure 5.5 shows.
9. Now you're ready to create the animation. Apply a material to the tube, choose a background color, and switch to Camera view. My example has a slightly transparent red tube with a texture map and a blue background, so the tube looks purple.

Figure 5.5: Lining up the camera with its linked path to the tube created from the same path.

The number of frames in this animation depend on the number of points in your spline. Figure 5.6 gives you a small sampling of this animation, but to see the whole thing you'll need to go to the CD-ROM. The one I created had 140 frames, so you might want to create this as an AVI file. In the next chapter, you'll learn how to deal with AVI files by using plug-ins.

Figure 5.6: How about a waterslide in space ? Using the same path to create a tybe and link it to the camera, it's easy.

Animating Materials

Not only can you animate cameras, lights, and models, but with trueSpace you can animate materials on the surface of your objects. This is done by applying a material to an object, then applying a different material at a later keyframe. As the animation progresses, the surface material changes from one material to the other.

You can also apply materials to designated rectangles that are projected on top of the model. The materials for these rectangles can be different from the model's base material. These material rectangles can be animated as well. Think of how a model of a television set could use an animated material rectangle:

1. Load the model of a television set (the television set was taken from the TrueClips CD-ROM that ships with trueSpace) and move through the hierarchy until the television's front screen is selected.
2. Click the Material Rectangle button in the Render Group. The Material Rectangle panel with several controls appears.
3. Click the New button and a small rectangle will be selected in the center of the television screen. This rectangle can be moved and scaled by using the Move and Scale buttons at the top of the Material Rectangle panel.
4. Move the material rectangle so that its upper-left corner matches the upper-left corner of the television screen. Next, scale the rectangle so that the upper-right corners match and the rectangle's lower edge falls about two-thirds of the way down the height of the television screen.
5. Bring up the Animation panel and enter 30 as the Current Frame Number. In the Material Rectangle panel, move the rectangle up so that the bottom edge of the rectangle and the television set match.
6. Finally, select a material for the material rectangle, and you're done.

The final animation is difficult to show as a figure because the animated material is just a series of blue lines that scroll up the screen (I guess this television set is broken). Figure 5.7 shows the scene as it's being created with the material rectangle in the middle of the television screen.

Figure 5.7: Using material rectangles to animate materials on objects. Here you can see static on the television set.

Creating GIF Animations with the GIF Construction Set

There are several ways to embed animations in your Web page. With 3D packages, you can create your animation as either a video format, like AVI or QuickTime, or as a series of images, like JPG, BMP, or TGA. In this section, you'll see how to use each of these formats, starting with using animations saved as a series of images.

GIF animations are easy to use because they don't require using plug-ins or special HTML tags. The browser interprets GIF animations the same way it does regular GIF images, so to embed GIF animations you can use the standard <IMG SRC> tag. When the image loads, the images are loaded in successively to create the animation effect. The trick is to create the image in such a way that the frames of the animation line up.

Luckily, there's a simple package that makes it easy to line up the animation frames. The GIF Construction Set is an easy-to-use shareware program, created by the people at Alchemy Mindworks, that automates this process. Try using this program to create a GIF animation of your tube animation from the earlier section:

1. The successive images for the animation were created as a series of TGA images, which will work well with the GIF Construction Set. Start the program, and you'll see a dialog box interface with buttons along the top and menu items.
2. Create a new file by choosing the File | New command. The program will place a header at the top of the list. The dimensions listed in the header determine the size of the image. You can change the dimensions by double-clicking on the header and entering the new dimensions.
3. Click the Insert button and select Image from the pop-up menu. This brings up a Directory dialog box.
4. Find and select all the images associated with the animation. You can hold down the Shift key to insert multiple images at once.
5. A dialog box opens, letting you specify how you want to control the palette conversion. For each image, select the Use a Local Palette for This Image option. You also want to select the Use This Setting For All Remaining Images option to load all the images at once.
6. When all the images are loaded, click the View button to see the animation, then save the file.

Figure 5.8 shows the GIF animation for the tube you created earlier.

Figure 5.8: The GIF Construction Set is used to create GIF animations from a series of images created by trueSpace.]

Embedding the GIF animation is no different than embedding a regular GIF image. The browser will load the different frames automatically. Figure 5.9 shows a sample Web page that uses a GIF animation.

Figure 5.9: A simple GIF animation is used to animate the logo for the Cookie Construction Company.

Client-Pull Animations Using the <Meta> Tag

The idea behind client-pull animations is to load an HTML page, then load another page right over the top of the first, and continue in this manner until the animation is finished. Some people are opposed to client-pull animations because of the strain they can put on the client.

As you can guess, it's probably not a good idea to use a lot of frames for an animation of this type. It works well for small files like logos and such. The steps below show you how to create a client-pull animation.

1. Create a simple animation and save the images as a series of JPG images.
2. Build an HTML page with the image displayed somewhere on the page using the <IMG SRC="logo1.jpg"> tag. Save the file as logo1.htm. Within the <HEAD> tag, include a <META> tag that looks like this:<META HTTP-EQUIV="refresh" CONTENT="1; URL=logo2.htm">
3. With the HTML file still open, change the <IMG> tag so that it displays the second frame of your animation, and change the <META> tag to open logo3.htm and save the file as logo2.htm.
4. Repeat this process for all frames of the animation.

When the browser encounters the <META> tag, it gets a message to fetch the second HTML file in the series. This continues until the last frame of the animation, where no <META> tag is needed.

Server-Push Animations

Server-push animations are accomplished in the same way as client-pull animations, except the server is in control of sending the series of HTML pages down. The other difference is that a program residing on the server is needed to control the action. These programs are usually written as CGI scripts that reside on the server.

With the ever-changing nature of the Web, these two techniques are slowly being discarded as cheap, dirty, old methods. They are "cheap" because they don't require much work; "dirty" because they task the machines, are inefficient for creating animation, and seldom produce smooth results; and "old" because they've been around for a while. Newer methods are quickly replacing these old dogs, and Chapter 6, "Using Animation Plug-Ins in Your Web Page," covers a number of them. I suppose these methods could be modified, but you can't teach an old dog new tricks (sorry, I couldn't resist).

Workshop Wrap-up

With this chapter, you've earned the final letter in RMA packages-animation. You've learned about several key concepts of animation that should apply to all 3D packages, and you now have the means to create Web pages with dynamic animations.

Next Steps

I hope you're still anxious to move on because there's still more to learn.

• To learn what to do with the AVI and QuickTime movies you've had your 3D packages spit out, check out the next chapter, Chapter 6, "Using Animation Plug-Ins in Your Web Page."
• You haven't exhausted the animation realm, either. Advanced animations are covered in Chapter 9, "Creating Advanced 3D Animations for the Web."
• If you're ready for VRML, you don't really need to read the stuff in between. The VRML sections start from the basics in Chapter 13, "Exploring VRML Browsers and Development Tools."

Q&A

Q:	Do I have to use a 3D software package to create animations?
A:	No. Traditional animation uses 2D images that are changed slightly from frame to frame. These techniques work fine, but tend to be more time-consuming than the animations produced by 3D software packages. The chief benefit of 3D packages is that the computer can calculate in-between images without requiring the artist to redraw every image by hand because it knows the relationship of all objects to each other. If you decide to use a 2D animation package, look for one that has onion skin features. This lets the adjoining images show through onto the current image, which will help you line up the images
Q:	Are there any 3D packages that can create animations as GIF animations, without requiring you to use another package like the GIF Construction Set?
A:	We all know that the Web has sneaked up on us. Many software vendors are working to incorporate export capabilities for their products; in time, you'll likely see such features. Two products have recently appeared that are focused on producing 3D graphics for the Web. If you're a pc user, check out Asymetrix's 3D Web product; you can use it to create animations as GIF animations. For Mac users, there's Specular's 3D Web Workshop product.
Q:	What's the difference between 3D animations and video? It seems like it would be easier to record something with a camera than to generate and animate a scene. Which is best for the Web?
A:	These are really two very different technologies. Video is real-time and photo-realistic; as such, it requires very large file sizes for low-quality videos. However, there are many places on the Web where video would be the better choice, such as an interview. It would take far more time to animate a person talking than it would to simply push the record button. On the other hand, it's a little difficult to take a video of aliens on the planet Mars. 3D animation does take some time to set up the initial scene, but many images can be created with computer graphics that would otherwise be impossible (or very dangerous) with video techniques. What's best for the Web depends on what you really want to do. If you plan on having a person talk about a new product, use video, but if you want a space animation with special effects, use 3D animation-and don't rent the space shuttle!