Creating Animation Images

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.


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

• 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 leading tool for multimedia creation. It is a direct descendant of VideoWorks, one of the very first Macintosh 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 (pushbuttons, menus, sliders, etc.) that let the viewer 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 amount of storage required for the image.
• 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).
• The storage requirements affect the size of image files. In animation, they also affect the speed and smoothness of playback.
• 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

• On ACG Lab computers, the program Director is on the hard drive, inside the Multimedia folder.
• 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.
• If you wish to look at prior students' work for inspiration, make sure that the browser you use is configured with the required plugin to display the animations.
• In Internet Explorer:
• Apple menu-->About Internet Explorer
• Click the 'Support' button
• In Netscape Communicator:
• Apple menu-->About Plug-ins
• In both cases, look for the Director Shockwave plug-in. Communicator will also tell you if the plug-in is enabled or not.
• Additional information and examples concerning animation design issues is in the 'Principles of Animation' interactive presentation. Find it in this week's class materials folder on ACG_FILE.
• Make sure to set the display to 256 colors or grays, or you won't see the sample animations.
• Director documentation and Help are in the ACG_DOCS volume on the file server (you will need your ACG Student password to get in).
• The program that displays Director 6.0 Help is Altura QuickHelp (in the Utilities folder on your startup disk)
• The additional help regarding Director 6.5 is a set of web pages (use any browser to view them)
• 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.