Computer Graphics Survey

Creating Animation Images

Using Director 8 on MacOS Computers

| previous handout | ACG Home | Instructor Home | Class Home | list of tutorials | next handout |

Before beginning the project

Tutorial Goals

• In this tutorial, we will create visual elements that will appear in an animation on our web page. In later tutorials we will work on sequencing these visual elements, as well as adding a soundtrack.
• The program introduced in this tutorial is Director, by Macromedia, Inc. For our project, we will focus on Director's animation features.
  • After the initial setup, where we make sure that the program meets our requirements, we proceed to choose the most suitable content for our animation.
  • For the visual elements, you have a choice of:
    • Importing existing image files, such as the ones you created with Photoshop or the scanner software.
    • Painting new images from scratch using the tools in the Director paint window, which resembles Photoshop in many of its basic features.
  • At the end of the tutorial, you will have one Director file containing all the visual elements. This file needs to be saved so you can add to it in later tutorials.

Basic Setup

• Set the computer display to 256 colors, so that your pictures will be automatically set to 8 bits per pixel of color content (this will reduce file size). You can use the Control Strip (displayed by clicking on the tab "protruding" from the margin of the screen).
  
• Reset Director to factory defaults by trashing the file 'Director 8 Preferences' (it's in the 'Preferences' folder inside the 'System Folder' on the startup disk).
• Recovering from mistakes: like many other programs, Edit-->Undo will recover from the last editing operation only. You can retrace your steps further back using File-->Revert (provided you had previously saved a satisfactory version of your work in progress).
• Open the windows you will need for this first part of the animation process (you can use the Window menu to do it).
  • The Paint window. This is where you can create new pictures, or modify pictures imported from outside Director.
    
  • The Cast window. This is where all the elements (pictures, sounds, etc.) that make up the animation are stored.
    
    • Click the View Style button in the upper-left corner of the window to display cast members as thumbnails.
      
  • The Stage window. This is where all the animation will play back.
  • All other windows can be closed.
• Set the width and height of the animation to a small size for quicker download.
  • Make sure the Stage is the active window.
  • Use the Modify-->Movie-->Properties command to display the Property Inspector, then click on the 'Movie' tab.
  • If necessary, click the View Style button to turn off List View, so that the palette contains menus and icons, like this:
    
  • Use the first pop-up menu to set the Default Palette at "Web 216".
  • Use the second pop-up menu to set the Width to 160 and the Height to 120.
    • If necessary, you can choose a slightly larger movie size, but keep in mind that this will generally increase the file size (though the actual size of the file is affected by a number of other settings as well).
  • Use the third pop-up menu to set the Location to 'Upper Left' (you can also drag the Stage window directly to a convenient location.
  • Leave Score Channels (last field) set to 150.
  • You can also choose a different background color (Stage Fill Color) by clicking on the color swatch next to the paint bucket icon.
• Make sure to save your work as you go along, using the File-->Save command.

Animation Contents

• Plan for two types of animation
  • Paint window animation--addressed in this tutorial
    • This is animation that involves changes to the shape of the objects as they move.
      • Examples include the wings of a flying bird, the legs of a walking person, theater curtains being drawn open, and so on.
  • Stage window animation--which will be the focus of the following tutorial
    • Motion of objects across the frame, or relative to each other, without changes in shape and or orientation.
  • Geometric transformations (such as size changes to suggest an object appearing to move away from the user), can be handled in either the Stage or Paint window:
    • Stage size changes decrease playback speed and image quality.
    • Paint size changes increase file size.
• Before you start drawing, identify which parts of your intended scene actually move--these are the only ones that need to be redrawn to indicate motion. Static objects can be drawn just once and re-used over and over.
  • Director allows you to assemble separate cast members into a single picture, just like you can with Photoshop layers. Objects that move at different rates should be drawn separately, and later combined on the Stage (a process we'll discuss next time). Also, the same cast member can be re-used multiple times in the same image.
  • For instance, to show a hand taking oranges out of a bowl, you would draw separately:
    • The outside of the bowl--this will be layered in front of all other elements.
    • One picture of an orange. This will be placed in the image repeatedly to fill the bowl.
    • The inside of the bowl--to be layered behind other elements, so that it will be revealed gradually as the hand removes the oranges.
    • Several different pictures of the hand, in different positions: extended (as it approaches the bowl) and closed (as it grasps the oranges).
  Avoid spending a lot of time on registration problems. Animating characters that fly or swim lets you avoid this issue altogether. Walking characters must be aligned with the ground accurately to yield convincing motions.
• To create a short and effective animation, make sure that the beginning and the end of the motion are the same. This allows you to loop the animation (i.e., play it indefinitely), thus getting greater mileage from a small file.

Import Images

• If you want to add pictures from outside sources (e.g., from the scanner) to your animation, use the File-->Import command.
  
  • Select "Pictures" or "All Files" from the Show pop-up menu, and make sure that "Standard Import" is selected in the pop-up menu at the bottom.
  • Look for the picture file on the disk, and click on its name to select it; then click 'Import'.
    • If any pictures do not show up in the list of files, they were probably not saved in a format that Director understands. You can use Photoshop to open them, then use the Save As command to convert them to PICTs.
• Director may display the Image Options dialog. If it does, pick settings that will minimize the size of the file without serious damage to the image:
  
  • Choose the lowest of the two Color Depth values displayed (or either one if they are the same).
  • If 'Remap to' is not greyed out, choose 'Web 216' for the palette.
  • If 'Image' Color Depth is higher than 'Stage' Color Depth, and the image is continuous tone (like a photograph), then check 'Dither'.
  • If there is extra space around your image, you can check 'Trim White Space' to get rid of it.
  • If all of your images have the same color settings, check 'Same Settings...'.
  • Click 'OK' to exit the dialog.
• After importing, thumbnails of the images will appear in the Internal Cast window.
  • Double-clicking the thumbnail opens the picture in the Paint window, where it can be modified as needed.

Paint Images

• To create new animation images, click on the "+" button at the top-left of the Paint window. This will create a blank new cast member.
  
• Use the painting tools in the Paint window's toolbox (similar to the toolbox in Photoshop) to create your picture.
  • To change type of brush, double-click on the Paintbrush tool in the toolbox to display the Brush Settings dialog.
    
    • The Brush Settings dialog appears. Pick a new size and shape by double-clicking on your choice in the grid on the left.
      
  • Select the color to paint with by clicking and holding on the foreground color swatch in the toolbox, then sliding the cursor over to select the new color in the palette.
    
  • In most cases, you will want to set the Ink pop-up menu (at the bottom-left of the Paint window) to 'Normal'. You can experiment with the other settings to achieve special effects.
  • Director does not implement transparency directly the way Photoshop does. However, you will be able to tell it later to make the white parts of your picture transparent.
    • If you plan to do this, make sure not to use white for any parts of the picture you want to keep opaque in the animation (use a very light color instead).
    • If you need to erase (= white out) everything and start over, double-click the Eraser tool in the toolbox.
      
• For pictures representing the various positions of an animation character, it is helpful to modify a copy of the previous picture rather than start from scratch each time.
  • In the Internal Cast window, click on the thumbnail of the picture you want to duplicate.
  • Use the Duplicate command in the Edit menu.
  • An example of this technique is the popular 'invisible writing hand' effect:
    
  • Handwrite a word (such as your name) in a paint cast member.
  • Duplicate the cast member. Use the eraser to remove a bit of the writing.
  • Continue duplicating the last cast member, each time erasing some more of your handwritten strokes, until there's none left.
  • When this sequence is played back in reverse, it will appear that the word is being written by an invisible hand.