1. ITBIS351 Multimedia Systems and Hypermedia
Chapter 5: Animation
ITBIS351 Multimedia Systems and Hypermedia

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

3. The Power of Motion

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

5. Persistence of Vision

6. Phi

7. Principles of Animation
Frames
Flickering
Principles of Animation

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

9. Path animation

10. Path Animation

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

12. Cel Animation

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

14. Keyframes
Tweening
Pencil Test
Ink and Paint
Cel Animation Process

15. Keyframes and Tweening

16. Pencil Test

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

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

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

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

21. 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=" " xmlns=" 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