Creating Animation Images

| ACG Home | Instructor Home | Class Home | list of tutorials |

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).


• 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.


• There will also be a third window (non-draggable, non-resizable) on the screen--this is the Stage, and while we won't need it now, it is always open. 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 Left location to 0 and the Top location to 20; leave Default Palette at "System - Mac".
• 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 check boxes at the bottom of the dialog 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.
• Because of the way Director handles animation elements, an object that rotates must be handled in the Paint window--even though its shape may not change.
• Stage window animation--the focus of the following tutorial
• Motion of objects across the frame, or relative to each other, without changes in shape and or orientation.
• Size changes (such as 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 by animating characters that fly or swim. Walking characters must be aligned with the ground accurately to yield convincing motions.
• Minimize the length of the animation by making 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 'System - Mac' 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.


• 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.
• You may also want to see previous and/or following positions as you draw. This lets you compare the images directly, and fine-tune the changes between them.
• Display the Onion Skin palette using the View menu.


• click on the first button on the left of the palette to turn Onion Skin on.
• Use the second and third controls from the left to select how many previous/following images you want to see.
• Note: this feature only works if your pictures appear one after the other in the Internal Cast window, without gaps.

Notes

Director

• Director is a tool for multimedia creation based on VideoWorks, one of the very first Macintoh programs.
• Director comprises two distinct layers of features:
• 2-D Animation: the process of creating several slightly different pictures which, when displayed in rapid sequence, create for the viewer the illusion of motion. Director includes capabilities for painting the individual pictures, and for arranging the pictures in a time sequence.
• Interactive Multimedia: gathering and integrating elements of various kinds (text, video, sound, etc.), with the addition of controls that allow the viewer to determine the course of the presentation.

Shockwave

• Director is among the most popular programs for producing interactive material for CD-ROMs, and through a technology called Shockwave it can now be used to enhance Web pages.
• Shockwave provides:
• File compression, to reduce download time.
• File locking, to protect proprietary contents of the work.
• A communications mechanism to allow interaction with additional content on the web.
• Later versions of Shockwave added the capability to stream the animation--meaning that it will start playing as it is being downloaded. Without streaming, the viewer must wait to receive the entire file before viewing any of the animation.
• The playback software for Shockwave files is implemented as a web browser plugin--an add-on that lets the browser display the animation as part of a web page.

Registration

• An animation comprises a sequence of images called frames. Any changes from one frame to the next are perceived as movement. In other words, any part of the scene which is not supposed to move should align from frame to frame. The alignment process is called registration.

Color Depth

• The color depth of an image determines how many colors it can include. As the depth increases, so do the number of colors and the size of the file.
• Commonly used color depths include: 1 bit (= 2 colors); 4 bits (= 16 colors); 8 bits (= 256 colors); 16 bits (= thousands of colors); 24 bits (= millions of colors).
• Director automatically sets the depth of the stage to the depth of the display at the time the animation was first created.
• The depth of the display can be set using various system controls, such as the Control Strip used at the beginning of this tutorial.
• The depth of an imported image is set at the time the image is created. In the case of a scanned image, it's one of the settings in the scanner software.
• Director detects discrepancies between the depth of an imported picture and the stage, and offers to reconcile the two in the Image Options dialog
• Note that this is not strictly indispensible, and in fact an important strategy in making Director files as small as possible is to fine-tune each picture separately, lowering its depth while retaining the overall appearance.
• All the images, however, must share the same color map, and this is somewhat more difficult across different bit depths. For simplicity, this introductory tutorial will keep all images at the same depth of 8 bits.

Information specific to the ACG Lab

If you wish to look at prior students' work for inspiration, make sure to use Netscape Communicator, since Internet Explorer in the lab is not configured with the required plugin to display the animations.

After completing this step of the project, make sure to copy your new Director file to your floppy disks. This file will be needed again for subsequent steps of the project. The filename can be anything you want, since we won't post Director files to the web server.

While using Director, view its online documentation with the Director Help command in the Help menu.

The Art Computer Graphics program of Fullerton College offers a class dealing at great length with Director animations, ACG162-Intro to Multimedia for Macintosh. Look it up in our schedule of classes.