ANIMATIONChapter 5

'In his book "Web Site Usability," researcher Jared Spool found that his web site testers found animation uniformly irritating, and some were so distracted that they could not read the other text on the screen. In testing the Disney site (no longer online), many users were so annoyed with an animation that they covered it with a hand.'

- from http://www.dack.com/web/flash_evil.html

A Few Examples

• http://muffinfilms.com/ (click each muffin for a different clip)

• http://animusic.com/ (various animations set to MIDI music)

• http://animfactory.com/ (for animated GIFs)

• Finally, http://www.navone.org/

Introduction

• Animation is defined as the act of making something come alive.

• It is concerned with the visual or aesthetic aspect of the project.

• Animation is an object moving across or into or out of the screen.

How Animation Works

• Animation is possible because of a biological phenomenon known as persistence of vision and a psychological phenomenon called phi.

• In animation, a series of images are rapidly changed to create an illusion of movement

Digital Television Video

• 24-60 entire frames or pictures every second

• The speed with which each frame is replaced by the next one makes them appear to blend together smoothly.

• The basic principle of animation is translation: change an objects shape or position very gradually over several frames.

Animation by Computer

• Static 2-D animations: they don't change position on the screen• A color-cycling logo such as a blinking word• A cel animation• A button or tab that changes state on mouse

rollover to let a user know it is active

• Path animation in 2-D space provides motion• changing the location of an image along a

predetermined path during a specified amount of time

• adds complexity

Animation by Computer

• 2½-D animations: give an illusion of depth• The z axis is added through shadowing and

highlighting, embossing providing a sense of depth

• 3-D animation:• motion is calculated along all three axes: x, y, and z• objects have front, back sides, top, and bottom• varying points of view

Animation Techniques

Creating an animation: • map it out as a series of steps• make a storyboard or script• choose a tool• build and tweak the sequences• experiment and test• post-process: add sound, etc.

Cel Animation

• Made famous by Disney• Progressively different graphics or cels on each frame

• ~24 fames per second => 1,440 frames for one minute of animation!

• Each frame may have many layers of cels• The term cel derives from clear celluloid sheets used for drawing each frame

• Now replaced by layers of digital imagery

Cel animation artwork

• Keyframes: first and last frame of an action

• Tweening: calculating the number of frames in between the keyframes each with a progressively different outline.

• A pencil test checks smoothness, continuity and timing

Computer Animation

• Computer animation is very similar to cel animation.

• The primary difference is in how much must be drawn by the animator and how much is automatically generated by the software.

• Kinematics is the study of the movement and motion of structures that have joints.

• Inverse kinematics is the process of linking objects, and defining their relationship and limits.

3-D Animation

• Most effort is spent • creating the models of individual objects• designing the characteristics of the shapes and

surfaces

• The software• renders each frame• stiches them together• inks details in paint, color values, edge detection

and layering

Morphing

• Morphing is an effect in which a still or moving image is transformed into another.

• Key points make for smooth transitions between two images

Animation File Formats• dir and .dcr - Director files• .fli and .flc - AnimatorPro files• .max - 3D Studio Max files• .pics - SuperCard and Director files• .fla and .swf - Flash files• .svg - scalable vector graphics files, which are new to HTML 5 •GIF89a file format:

– It is a version of the GIF image format.

– GIF89a allows multiple images to be put into a single file and then be displayed as an animationin the web browser.

– Applications like Stone Design’s GIFfun or ULead’s GIF Animator are needed to create GIF89a animation.

Using Animation Successfully

• Use animation carefully and sparingly.• High-quality animations require superior display platforms and hardware, as well as raw computing horsepower.

• File compression is very important when preparing animation files for the Web.

Rolling Ball Example

Adding Complexity: Bouncing Ball

Adding Complexity: Bouncing Ball

Creating an Animated Scene

Creating an Animated Scene