Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia

Chapter 5: AnimationITBIS351 Multimedia Systems and Hypermedia

OUTLINE

Define animation and

describe how it can be used

in multimedia

Discuss the principles of animation

Discuss the animation techniques

of cel and computer animation

Create computer-generated

animations from multiple

still images

The Power of Motion

Principles of Animation

Animation

Persistence of Vision

(Biological)

Phi

(Psychological)

Persistence of Vision

Phi

Principles of Animation

Frames Flickering

Animation by Computer

• 2D animation: the visual changes that bring an image alive occur on the flat Cartesian x and y axes of the screen.

• 2 ½ D animation: where shadowing, highlights, and forced perspective provide an illusion of depth, the third dimension.

• 3D animation: software creates a virtual realm in three dimensions, and changes (motion) are calculated along all three axes (x, y, and z).

Path animation

Path Animation

Animation Techniques

Brainstorm ideas

Script and Storyboard

Select best tools Animate!

When creating an animation

Cel Animation

Cel Animation

• Cel animation: Also known as hand drawn animation uses a number of celluloid sheets to drawn frames.

• One minute of cel animation requires 1,440 frames to be drawn.

Cel Animation Process

Keyframes Tweening Pencil Test Ink and Paint

Keyframes and Tweening

Pencil Test

Computer Animation

• Computer animation uses the principles of cel animation

• Computer 3D animation adds more focus on modeling, lighting and rendering.

Kinematics

• Kinematics is the study of the movement and motion of structures that have joints, such as a walking man.

Inverse Kinematics

• Inverse kinematics: is the process by which you link objects such as hands to arms and define their relationships and limits (for example, elbows cannot bend backward).

12 principles of animation

• Squash and stretch• Anticipation• Staging• Straight ahead action and pose to pose• Follow through and overlapping action• Slow in and slow out• Arcs• Secondary action• Timing• Exaggeration• Solid drawing• Appeal

Chapter 5 Try@Home

Type the following SVG code into notepad, then open the file on an HTML5 compliant browser (IE9, Firefox(updated), Chrome(updated) etc..

<svg width="8cm" height="3cm" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="1" y="1" width="800" height="300" fill="none" stroke="rgb(255,0,255)" stroke-width="4" />

<rect id="RectElement" x="300" y="100" width="300" height="100" fill="rgb(255,0,0)" >

<animate attributeName="x" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="300" to="0" />

<animate attributeName="y" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="100" to="0" />

<animate attributeName="width" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="300" to="800" />

<animate attributeName="height" attributeType="XML" begin="0s" dur="3s" fill="freeze" from="100" to="300" />

</rect>

</svg>