ITBIS351 Multimedia Systems and Hypermedia Chapter 5: Animation ITBIS351 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 OUTLINE

The Power of Motion

Principles of Animation Persistence of Vision (Biological) Phi (Psychological) Principles of Animation

Persistence of Vision

Phi

Principles of Animation Frames Flickering Principles of Animation

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). Animation by Computer

Path animation

Path Animation

Animation Techniques When creating an animation Brainstorm ideas Script and Storyboard Select best tools Animate! When creating an animation Animation Techniques

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

Keyframes Tweening Pencil Test Ink and Paint Cel Animation Process

Keyframes and Tweening

Pencil Test

Computer animation uses the principles of cel animation Computer 3D animation adds more focus on modeling, lighting and rendering. Computer Animation

Kinematics is the study of the movement and motion of structures that have joints, such as a walking man. 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). Inverse Kinematics

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 12 principles of animation

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> Chapter 5 Try@Home