CAP 201a - Computer Animation I

Lesson 1 - Basic Concepts, User Interface, and First Animation

Objectives:

This lesson introduces the student to basic concepts and the software used for the course. Objectives important to this lesson:

  1. Terminology used in the text
  2. Production cycle
  3. Image types and color depth
  4. Broadcast formats and resolution
  5. Overview of the user interface: viewports, panels, and tools
  6. Manipulating the viewports : panning and zooming
  7. Creating simple objects (primitives)
  8. First animation exercise
  9. Manipulating an object
Concepts:

Special disclaimer: In a previous class, a student had a problem that stemmed from his having bought a Mac notebook. He was taking this class and wanted to run 3DS Max on the notebook. Sorry, Autodesk has not published a Mac version of 3DS Max. It is a Windows program only.

Before we begin, understand that these notes are not a substitute for your textbook. They are provided here for several reasons:

  • to enhance the lessons in the text with more lecture material
  • to correct errors in the text
  • to provide questions that you must answer as part of your assignment (You do want the points, right?)

You must use these notes in conjunction with your textbook to get the intended experience from this class.

 

The first chapter of the text defines many terms used in this and subsequent courses. Students should be aware that other texts will define some of these terms differently. Some of the basic terms:

  • 3D space - the workspace you use in your 3D program (e.g. the work environment in 3DS Max)
  • CG and CGI - in this text, computer generated (CG) is just an abbreviation for computer generated imagery (CGI). Both terms can refer to static photos, image files (like gif, jpg, and png files), or animated images.
  • Character sheet (model sheet) - a series of drawings of a character, showing different sides, actions, and emotional states . Take a look at these model sheets done by Alex Toth.
  • Conceptual art - basic design for characters, settings, and props in your project
  • Foley editing - adding sound effects to a sound track
  • Props and scenics - if an item is handled by a CGI character in your story, that item is a prop. If the item only appears in a scene, the item is a scenic. (In theater classes, scenics are called stage dressing.)
  • Storyboard - a comic strip version of a CGI scene/sequence

Several steps in the creation process for CGI projects are described. They fall into three broad categories: preproduction, production, and postproduction.

  • Preproduction
    • Script creation - basic story is written, and refined as many times as needed
    • Storyboard creation - sketches are made in comic strip format
    • Concept art creation - character designers create characters and settings, including character sheets and three-quarter views
  • Production
    • Recording - the voice track for animated characters is recorded
    • Modeling - CGI software is used to create the characters, props, scenics, etc.
    • Texturing - surface materials are applied to models
    • Animating - models are rigged (given a working skeleton) and animated
    • Lighting - light and shadows are applied to each scene
  • Postproduction
    • Rendering - each frame of the movie is created and stored in a computer file
    • Compositing - the movie may be created in several layers, rendered separately. The are combined in this step.
    • Editing - rendered files are combined in the right order, following the master storyboards
    • Soundtrack creation - adding music, sound effects, and other sound features (Not the voice track: see below)

Not all productions will follow these steps in this sequence. The Pixar web site has a nice lesson on how their animated movies are made. Note that their voice sound track is created at their step 4 (of 14): before the models are created. This matches the description in your text, that animation must be done to match the voice actors.

    1. The pitch - A rough story is presented, perhaps with blue sky designer (concept artist) illustrations. A polisher (artist who produces finished art) may be needed next if the pitch is approved.
    2. The text treatment - Writers flesh out the story, and may go through several versions. No art needed at this time.
    3. Storyboards - The designer is called in (or back) to make a comic strip version of the approved story.
    4. Voice talent records the script - Several takes on each scene are done. (Animation of the scenes is done after the voice recordings are made.)
    5. Editors make reels - Editors use the voice tracks and the storyboards to create a non-animated version of the story.
    6. Art department creates look and feel - Both kinds of designers are needed again. Rough ideas must be submitted, edited, approved, and polished.
    7. Models are sculpted and articulated - This means that the design moves from 2D to 3D, in both models and in computer software. Which kind of designers will you need?
    8. Sets are created and dressed - This means that computer software is used to create each scene, including props (items handled by actors) and stage dressing (items not handled by actors). Which kind of designers will you need?
    9. Shots are laid out - The characters are added to each scene. Think of this as making a 3D version of the storyboards.
    10. Shots are animated - Pixar describes what the animators do as being like operating a puppet, making the on screen character act out the scene to match the voice tracks. Key frames are set, and the animation software adds motion that the animator can modify.
    11. Shading is added - Color and texture are added to surfaces, like fur and reflections.
    12. Lighting - Light sources are added to the scene, adding shadows as well.
    13. Rendering - The raw information in the animation program is used to create a "final" version, frame by frame, of the project.
    14. Final touches - Sound effects, special effects, and music are added. Each frame is transferred to film, if needed.

The text discusses some basics about Computer Graphics:

  • raster or vector - A raster image contains information about every pixel (picture element) that appears on a screen. This kind of image degrades when it is blown up or shrunk too far. This kind of image can also be called a bitmap. Don't confuse this idea with bmp files. In this sense, bmp files are bitmaps, but so are jpg and gif files.
    A vector image contains information about drawing lines and curves from one relative location in an image to another. This makes it possible to change the size of a vector image without losing detail. 3DS Max creates vector images that can be scaled to any size needed.
  • color depth - a measure of how many different colors may be used in an image. Gif files, for example can only have 256 different colors in them, but those colors vary from one gif to another. Jpg files can have over 16 million colors in them. Other file types have other properties, and each should be used where appropriate.

Color itself is discussed briefly.

  • In kindergarten we learned that the primary colors were red, yellow, and blue, and by combining them we could get all other colors, except white. This is true for colors that are made by subtractive (reflective) methods like mixing paint. A good way to think of this is paint reflects the light that shines on it. It is the reflected light's color that we see. If we see light reflected from a red object, the light is red because the object reflects more red light than any other color of light.
  • Another subtractive color system is the CMYK system, which uses combinations of Cyan, Magenta, Yellow, and Black to make individual colors. Ink jet and color laser printers often use this system. (Why does K stand for black? B was already used as the letter for blue.)
  • When we work with computers, or with TV, we use red, green, and blue as the primary colors (RGB). These are the primary colors of additive (generative) methods of creating color. A computer monitor, a television screen, and a movie projector all create color with light itself. They do not reflect light as much as they generate it. We mix various amounts of these three colors to get all the others. In a 24 bit color system (like a jpg file), each color we use has a red, a green, and a blue value. Each of these values can run from 0 to 255 (256 possible values for each component). So we can have 256 x 256 x 256 "different" colors. A human being would have a hard time seeing the difference between some of those colors.

    In the image on the right, I have drawn three overlapping red circles. You may be surprised to know that I used three different shades of red. The circle at the upper left is full red: R=255, G=0, and B=0. The circle in the center of the image was created as R=245, G=0, and B=0. The circle at the lower right was created as R=235, G=0, and B=0. They are three different colors, but the only real difference is that each is darker than the one above it, and brighter than the one below it. I could have varied the color by 1 instead of 10 each time, but that would have been even less apparent.
  • I have already mentioned file types. You should be aware that gif and jpg are good file types for web browsers, for simple images and for photographs, respectively. The text recommends that we should render (produce) TIFF or TGA files with 3DS Max, to maintain color information with little or no compression. Compression makes files smaller, but it leaves out some information.

The chapter moves on to discuss formats used for television broadcasting. Its discussion leads to a comparison of several aspects of systems used in different countries: lines and columns (resolution), refresh rate (vertical frequency), and aspect ratio (width: height). Note that the refresh rate tells us how many times per second a screen is redrawn, but the frame rate tells us how many times per second we have a new frame from our movie to put on the screen. The concepts need to be coordinated, but they are separate issues. The text mentions that:

  • Films (movies) are often shown at 24 frames per second (24fps)
  • NTSC televisions show frames at 30fps
  • PAL televisions show frames at 25fps

Aspect ratio basically means standard TV (4:3) or widescreen (16:9), but widescreen has variations, too. 4:3 can also be described as 1.33:1 (check the math), which is the resolution your text calls academy standard. This is the resolution movies used when television was invented. Movies moved on to other aspect ratios in the 1950s, but television sets stayed at 4:3 until the 1990s.

Your text lists several aspect ratios that are commonly used for widescreen video: 16:9 (also called 1.78:1), 1.85:1 (also called academy flat), and 2.35:1 (also called anamorphic). Follow the preceding links for some good illustrations of what happens when material composed in wide formats has to be chopped off to fit in narrow formats.

The text turns to some concepts that are used in 3DS Max:

  • objects - Anything you create in 3DS Max, such as circles, cylinders, and spheres.
  • spinner - A user interface tool that allows you to click or use your mouse wheel to increase or decrease a property of an object, such as the radius of a circle.
  • flyout - Several buttons in the user interface have a command function of their own, but they are also placeholders for other related buttons. You can hover over one of these buttons and hold down the your left mouse button to see the other command buttons that are available. This type of array of buttons is called a flyout. (Why does it exist? It saves screen space.)
  • coordinate systems - This will be familiar to anyone who has done drafting or graphing. Cartesian coordinates were invented by René Descartes, a mathematician who proved you could determine the location of a point by its vertical and horizontal distance from a reference point. In 3DS Max, we use three dimensional coordinates. Each object can be located on an x (width), y (height), z (depth) coordinate system.
  • frames, key frames, and in-betweens - Computer animation is based on movie animation. Movies are composed of a series of still photos, frames, that are shown to the viewer rapidly.

    In the image on the right, photos taken by Eadweard Muybridge are shown rapidly, one after another. Each frame (an individual image is a frame) in this series is numbered (see the lower left corner). These frames are of historical significance. Muybridge made these photos, and became one of the inventors of movies, after he settled a bet about whether all four feet of a running horse are ever off the ground at the same time. By developing a method to capture a series of such pictures in rapid succession, he was close to developing a form of animation.

    In computer animation, we don't usually take photos, but we compose frames. We create frames that show objects at different stages of motion, like the frames in Muybridge's sequence. Each of them becomes a key frame. We place each key frame on a timeline, indicating the amount of time that should pass between successive frames. In-betweens are frames that 3DS Max creates to fill in the gaps between the key frames. If the running horse sequence had in-betweens, then the animation would look smoother.

    It might be argued that we would have to create an infinite number of in-betweens, since motion is often continuous, and each frame is a still. As you can see by viewing this loop of 16 frames, an infinite number of frames are not necessary to create the illusion of motion. The viewer's mind participates in the illusion, creating many in-betweens to smooth out the perceived motion.

The chapter concludes with a discussion of terms related to the 3DS Max interface. This is not useful until you see the interface, so we should continue with the next chapter.

The second chapter gives you a quick start view of 3DS Max and walks you through an exercise. The author suggests in the introduction that some readers will want to read chapter three first, to become familiar with the program's user interface. This may be helpful if you have trouble following the instructions in chapter 2. (More on chapter 3 below.)

Before beginning the exercise, the text cautions you to use meaningful names for your working files, including using version numbers as part to the name. Be aware that the Save As command in 3DS Max includes a button to increment the version number on the file you are saving. How do you use it?

  1. Make sure that the first time you save a file, the filename has a number in it, preferably just before the extension, such as "MobileProject1.max".
  2. After you have worked on your scene for a while, click Save As, and click the Plus sign button instead of the Save button. The title bar of your current project will show that the number in the filename has increased (incremented) by 1. You have now saved a new copy of the file, with a new name. Handy, when you want to go back in time.

As you start the program, 3DS Max shows you a Welcome Screen with a menu of videos that introduce you to major features of the program. I recommend that you play them all. You will want to play videos and audios several times in this class. Please bring ear buds or some other kind of headset to class on a regular basis: do not play your video for everyone to hear.

The text describes the viewports shown in 3DS Max, panels that show several different simultaneous views of your project. These four panels can be changed in size, in orientation, and in content. They can be set to show other views than the default set: Top, Front, Left side, and Perspective. In the first set of exercises, you get to change the views, exploring what some others look like. Note: the default set of views (other than perspective) corresponds to standard orthographic drawing, a way to use drafting or CAD tools to show three dimensions on a flat surface.

You will work in one viewport at a time, but when you make a change, the change should immediately appear the other viewports as well. You can select a viewport by clicking it.

Tutorial 1 (Creating a mobile):

Get a feeling for creating the basic objects in the exercise that begins on page 40. You will create several cylinders, and some basic geometric shapes to make a model of a mobile, like one that might be hung over a child's crib. Use this exercise to get a feel for creating and modifying objects, and for switching from one tab to another in the command panel. Note that you should modify an object's properties from the modify tab, not the create tab.

The tutorial introduces you to arranging objects in a hierarchy.
Question 1: Explain the meaning of the words parent and child with regard to the discussion of hierarchy in this lesson. (Yes, really. Type the answers to these questions, save them in a file, print the file, and hand them in.)

This exercise introduces the command panel. Each time you click one of the six buttons at the top of the command panel, the rest of the panel can change dramatically, giving you the different options for that command set.
Question 2: What are the names of each of those six buttons? (One is shown in the image on the right.)

The text directs you to create a cylinder and set several parameters for it. After you make the first cylinder, you are told you will need several copies of it.
Question 3: What item from the toolbar, and what keyboard modifier are used together to initiate the Clone Options dialog?

Back to the hierarchy, the text offers a mini-exercise, then teaches you to link the objects in your current scene.
Question 4: When you use the Select and Link tool, do you link from a parent to a child or from a child to a parent?

The text continues work on the mobile by adjusting the pivot points for several objects. You have already seen pivot points displayed when you used the Select and Rotate tool. The steps on pages 56 and 57 show you how to change the location of an object's pivot point, the point about which it rotates. (Note: an object's pivot point does not have to be inside the object. This will be useful later.)
Question 5: Which panel is used in the exercise to change the location of pivot points?

The text turns to animation of the objects on page 58. Follow the steps in this exercise to practice using:

  • the Time slider
  • the Auto Key button
  • the Select and Rotate tool

The third chapter introduces you to the user interface for 3DS Max. Let me stress that: it introduces you, it does not make you an expert. There are far too many buttons, menus, and choices to become an expert in one lesson. In fact, this chapter does not walk you through an exercise, but discusses the features one by one for forty pages. Consider using this chapter for reference when you need to find a command that another chapter calls for.

The text reintroduces you to the menu bar and tool bars, which you used in the last chapter. You will use several commands on each in every exercise.

The main toolbar has icons on each end of it that you will need from time to time. This is a problem if you are running at a resolution that does not show you the whole toolbar at once. Be aware that 3DS Max should be run at 1280 by 1024 (or higher) screen resolution in order to see all of the controls in the user interface. As such, it should be run on a computer that is faster, has more memory, and has a better graphics card than the average user needs. The interface was designed for widescreen monitors, but it can be used with a "standard " monitor by dragging the toolbar left or right as needed to access the buttons on the end that you can't see.

The chapter runs through most of the tools you will find in 3DS Max. It is unfortunate that the authors included no work for you to do that would make the discussion of the tools memorable. Again, take this chapter as a reference for all the chapters that follow. We will come back to it for details as needed.

For now, read these sections of the third chapter:

  • menu bar (pages 63-65)
  • main toolbar (pages 65-67)
  • command panels (pages 72-76)
  • time slider and track bar (page 79)
  • viewports (pages 89-90)
  • gizmos (pages 95-97)