Computer Graphics Survey

Creating Animation Images

Using Director 7 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 use Director's animation features to create Shockwave files that will be displayed in our web pages:
  • 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 7.0 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.
    
  • All other windows can be closed.
• Set the width and height of the animation to a small size for quicker download.
  • Use the Modify-->Movie-->Properties command to display the Movie Properties dialog
    
  • Set the Width to 240 and the Height to 160; the Location to 'Upper Left'; Color Selection at "RGB"; Default Palette at "Web 216"; Score Channels at 150. You can also choose a different background color (Stage Color).
    • 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).
  • Leave the fields at the bottom of the dialog blank, and the check boxes unchecked. Click 'OK'.
• 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.
• 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).
  • Choose 'Web 216' for 'Remap to'.
  • If 'Image' Color Depth is higher than 'Stage' Color Depth, then check 'Dither'.
  • 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.
  • If you need to erase 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.