chapter 5: animation itbis351 multimedia systems and hypermedia
TRANSCRIPT
![Page 1: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/1.jpg)
Chapter 5: AnimationITBIS351 Multimedia Systems and Hypermedia
![Page 2: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/2.jpg)
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
![Page 3: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/3.jpg)
The Power of Motion
![Page 4: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/4.jpg)
Principles of Animation
Animation
Persistence of Vision
(Biological)
Phi
(Psychological)
![Page 5: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/5.jpg)
Persistence of Vision
![Page 6: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/6.jpg)
Phi
![Page 7: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/7.jpg)
Principles of Animation
Frames Flickering
![Page 8: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/8.jpg)
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).
![Page 9: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/9.jpg)
Path animation
![Page 10: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/10.jpg)
Path Animation
![Page 11: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/11.jpg)
Animation Techniques
Brainstorm ideas
Script and Storyboard
Select best tools Animate!
When creating an animation
![Page 12: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/12.jpg)
Cel Animation
![Page 13: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/13.jpg)
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.
![Page 14: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/14.jpg)
Cel Animation Process
Keyframes Tweening Pencil Test Ink and Paint
![Page 15: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/15.jpg)
Keyframes and Tweening
![Page 16: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/16.jpg)
Pencil Test
![Page 17: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/17.jpg)
Computer Animation
• Computer animation uses the principles of cel animation
• Computer 3D animation adds more focus on modeling, lighting and rendering.
![Page 18: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/18.jpg)
Kinematics
• Kinematics is the study of the movement and motion of structures that have joints, such as a walking man.
![Page 19: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/19.jpg)
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).
![Page 20: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/20.jpg)
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
![Page 21: Chapter 5: Animation ITBIS351 Multimedia Systems and Hypermedia](https://reader038.vdocuments.site/reader038/viewer/2022102718/56649d955503460f94a7dd80/html5/thumbnails/21.jpg)
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>