Multimedia Animations

What is animation?
According to Webster’s Unabridged Dictionary, animation is the state of being

lively, brisk, vigorous quality. With one click into the Internet domain, one is drawn to

blinking text, waving banners … a lively quality indeed. Such displays of animation are a

result of the technique made famous by Walt Disney in the 1930s. A series of

progressively different graphics on each frame of movie film would play 24 frames per

second. An inanimate drawing of a mouse became a much-loved personality once

animated. The terminology incorporating animation thus evolved from Disney’s efforts.

What is Cel Animation?

The term cel derives from the clear celluloid sheets that were used for drawing

each frame. The series of frames in between the keyframes (first and last frame of

action) are drawn in a process called tweening. Tweening an action requires calculating

the number of frames between keyframes and the path the action takes, and then actually

sketching onto a cel with pencil the series of progressively different outlines. Cel

animation is the traditional method of eight overlapping stages:

· Storyboard (scripting)

· Soundtrack

· Exposure sheet (giant spreadsheet to log sound and direction for

animation)

· Background painting

· Drawing

· Pencil testing· Inking and coloring

· Compositing
Wagstaff (p. 147, 1999) recommends for low-end cel animation Web Painter, a

simple cel animation tool for the Macintosh that provides capable onion skinning and

painting tools. It can quickly add and delete frames in a window and quickly switch

onionskinning to show previous or subsequent frames. The other cel animation paint tool

for Windows called ProMotion is not as simple to use according to Wag staff.

What is keyframe animation?

Keyframe animation programs eliminate many of the traditional steps. The

keyframe tools offer automatic inbetweening – that is, you set up the key frames, and the

program calculates and generates the inbetween frames for you. These programs are

primarily used to animate the elements of graphic design: type, photography, and

individual pieces of hand-drawn art. Many of these programs also work well with frames

of video and film. Macromedia Director and Macromedia Flash animate one frame at a

time when they work with hand-drawn cels, or they generate inbetween frames for

objects moved from point to point or rotated.

What is computer animation?

Computer animation follows the same format by filming a sequence of painted

cels then using layers, keyframes, and tweening techniques. Layers provide the capability

to place one image on top of another and to allow all or part of the underlying image

show through. This capability allows you to maintain registration between multiple

frames of animation and to see how various images in an animation go together.

Registration is a crucial concept in animation. Registration points let you know whetheryour
layers are aligned. When you work with Adobe Illustrator, Macromedia Freehand,

or another program that support layers, you can copy and paste the registration point into

every layer in the drawing so that the points exactly overlap. (Vaughn p.156, 1998) On

the computer, paint is most often filled or drawn with tools using features such as
gradients and anti-aliasing (soft gray edges that make lines appear smooth). The word

inks, in computer animation terminology, usually means special methods for computing

RGB (red, green, blue) pixel values, providing edge detection, and layering so that

images can blend or otherwise mix their colors to produce special transparencies,

inversions, and effects.

Animation using Macromedia Dreamweaver

Dreamweaver is a Web-page design tool that allows users to animate elements of

pages with graphical interface. You set up a timeline reminiscent of the timelines in

Director and Flash. You can quickly set up animation of an object by setting values such

as scale and position on the timeline as keyframes. Here is how you create a simple

DHTML (combination of HTML and Java scripting) animation in

Dreamweaver:
1. Open a new document

2. Place an image on the page by clicking the Insert Image button and choosing a

file in the file dialog.

3. Choose Insert/Layer to create a new layer in the document. This layer appears as a

bounding box with a marker and a position handle. If you click with of these

objects, control handles will appear around the layer, indicating that it is selected.

4. Drag the image into the layer box to add it to the layer.

5. Select the layer in the Timeline window.6. Choose Modify/Add Object to Timeline. This
command inserts a control track for

the layer into the timeline.

7. Drag the final keyframe of the layer’s control track left or right to adjust the

duration of the animation.

8. Select the final keyframe of the layer’s control track, grab the position handle of

the layer, and move the layer across the page window. This step sets the position
of the layer at the selected frame in the timeline. A line indicates the animation

path.

9. Select a point on the timeline halfway between the first and last keyframes; then

move the layer again to set its position at the new point in time. This step creates a

third keyframe, and the animation path changes to curve connecting the three key

positions.

10. Save the page in HTML format.

11. Open the page in your browser, which should be Netscape or Internet Explorer.

Animation using Director

In Director, you can create animations that are highly interactive and that take

advantage of advanced programmatic controls created with Director’s scripting language,

call Lingo. To build a project – called a movie—in Director, you begin by importing or

painting cells of animation into a cast. Then you place the cast members on a stage as

sprites, which you can animate by tweening or by cycling through consecutive cast

members. You control sprites with a spreadsheet-like timeline called the score. Finally,

you give sprites behaviors by using the Lingo language to attach programs called scripts.Director
can also be used for traditional cel animation,which may not be as

compacts as tweened animation but can be much more graphically interesting and

pleasing. There is a command, Cast to Time, that makes a series of cast members animate

over time. Select all the cels in sequence then choose the Modify/Cast to Time command.

The cels are automatically compiled into a single sprite on stage. This sprite can be

animated using automatic tweening. This sprite can be animated as many times as you

like.

On the score, each layer of animation is given its own track, and as the animation

plays, all the tracks with any action play along. When one frame of the script track or one
of the sprites has a behavior attached at a particular frame, the behavior executes when

the needle arrives at that point in time. Each column of the score represents a frame of

action; each row is an actor, script or event.

Shockwave animation
Shockwave is Macromedia’s collection of compressors and run-time player plugins for
delivering to Director, Flash, and Authorware projects over the Web. To create a

Shockwave animation in Director one must first install the Shockwave plug-in in your

browser.

Follow the following process:

1. Launch Director

2. Choose File/New/Cast to open the New Cast dialog, and name the cast

example.3. Click the first frame in the cast and choose File/Import to open standard file

dialog.

4. Navigate to the example folder and choose Add All.

5. Click the import button to add all the frames to the cast. Notice that Director

automatically imports the frames in proper order if the files are numbered.

6. In the Cast window, Command+click all the cast members that make up the

cels of the animation (right click in Windows) to select them all.

7. Choose Modify/Cast to Time. The cast members are placed on stage in a

sequence as a sprite. The cast members also appear on the first timeline in the

Score with a duration equal to the number of frames in the new sprite.

8. Click frame 0 in the score to move the time pointer to that frame; then select

the sprite on the stage and drag it to the left side of the screen.

9. In the Score, click the last keyframe for the sprite (represented by a small

vertical bar) and then drag the sprite to the right side of the stage. This step
changes the position of the sprite at that keyframe so that the sprite animates

across the screen.

10. Click Play in the Control Panel to preview the animation.

11. To adjust the timing for the animation, drag the last keyframe for the sprite

from frame 10 to frame 60 in the Score. This step stretches the animation to

take more time.

12. To add a behavior to the sprite, choose Xtras/Behaviors to open the cast of

preset behaviors. You can drag and drop behaviors onto the objects to apply

them. For this example, choose Frame: Hold on Current and drag to frame 60

in the script track of the Score.13. Play the animation again to see the effect of this behavior.
The timeline and

the animation should play smoothly all the way to frame 60 and then stop.

14. Add a user input behavior to the sprite. Drag the behavior Frame: Go to /Play

Number to the sprite’s timeline in the Score. A small dialog box opens,

allowing you to specify parameters to the behavior. Enter 1 in the Frame box,

choode Initializing Event: MouseUp and Play Mode: Go to, and click OK to

accept the changes. Now, whenever the movie is playing or paused, clicking

the sprite causes the movie to jump to frame 1 and begin playing again.

15. To make the movie play with sound when the viewer clicks the sprite, drag

the behavior Sound: Play Member onto the Score. In the behavior’s dialog

box, choose the cast-member sound file to play.

16. Play the movie. Notice that when the movie pauses at the last frame, you can

click the sprite, and the movie jumps t frame 1 and begins playing again. Any

time you click the sprite, the sound plays also.

17. Choose File/Save AS Shockwave Movie to save the movie in Shockwave

format.

18. Drag the Shockwave movie to your browser’s window to preview it. The

movie should start playing. (p.379-383)

Animation using the computer is like a front door to Web sites. Simple animation

is easy to accomplish and can add a lot of visual interest. Listed below are products to

include in your animation library:

· Pacework’s Object Dancer: specialize in animating text.· Adobe After Effects: powerful text
on path plug-in that works with all the

other features of the professional animation tool.

· QuickTime Virtual Reality: images you can “walk” through using your

mouse.

· 3D Images: images created in three dimensions that can be rotated and

viewed from any angle.

· Shockwave: combines animation, sound, and interactivity.

· Java: programming that creates applications that can run from within the

web site.

· JavaScript: scripts, or small programming sequences, that can make

certain actions take place.

· ActiveX: programming that creates and allows interactivity within the web

site.

· Database interaction: the browser creates web pages “on the fly”, calling

upon changing information in a database and combining that information

with designated graphics to create a page that reflects the latest possible

information.

· GIF89a: with Version 2.0 of Netscape Navigator, Netscape implemented

an animation feature of the final 1989 revision “a” of the GIF (Graphics

Interchange Format) specification. It is possible to make simple

animations by putting multiple images or frames into a single GIF89a file

and display them with programmable delays (in 100ths of a second)

between them. When you use the <IMG> tag to embed a GIF89a

multiframe image, Netscape Navigator will download the file and store it

in the cache folder pf your local hard disk. Once fully downloaded, theimage will play each
frame quickly and smoothly. Limit animated GIFs to

small images, and use a more capable plug-in for animations over larger

areas.

The variety presents a challenge to the animator. The golden rule is to keep animations