1. Multimedia Building Block : Animation
References:
T. Vaughan, “Multimedia: Making It Works 5th Edition”, Osborne/McGraw-Hill, 2001
S. McGloughlin, “Multimedia: Concepts and Practice”, Prentice Hall, 2001
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

2. The power of animation
Animation is achieved by adding motion to still image/object.
May also be defined as the creation of moving pictures one frame at a time.
Animation grabs attention.
Few types of animation
Layout transition
Process/ information transition
Object movement
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

3. Layout Transition The simplest form of animation is transition. Spiral
Stretch
Zoom
Checkerboard
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

4. Process / Information transition
Animation can be used to describe complex information / process in an easier way
Perform visual cues (e.g. how things work)
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

5. Process / Information transition
ALTER TABLE sales ADD customer_name char(30) null
ADD
Customer_name
Commission
Sales_amount
Sales_date
Customer ID
DROP
ALTER TABLE sales DROP COLUMN sales_date
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

6. Object movement Simple animated GIF Complex scene
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

7. How animation works Animation is possible because of
a biological phenomenon known as persistence of vision
An object seen by human eye remains chemically mapped on the eye’s retina for a brief time after viewing
a psychological phenomenon called phi.
Human’s mind need to conceptually complete the perceived action i.e. translating the action
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

8. How animation works
Combination of these two (persistence of vision + phi) make it possible for a series of images that are changed very slightly and very rapidly, one after another, to seemingly blend together into a visual illusion of movement.
E.g. a few cells or frames of rotating logo, when continuously and rapidly changed, the arrow of the compass is perceived to be spinning.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

9. How animation works
Still images are flashed in sequence to provide the illusion of animation
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

10. How animation works
The speed of the image changes is called the frame rate.
Film is typically delivered at 24 frames per second (fps)
In reality, the projector light flashes twice per frame, thus increasing the flicker rate to 48 times per second to remove any flicker effect.
The more interruptions per second, the more continuous the beam of light appears, the smoother the animation.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

11. Animation techniques Cel animation Stop-motion Computer animation
Digital cel & sprite animation
Key frame animation
Hybrid technique
Kinematics
Morphing
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

12. Animation techniques – Cel Animation
Made famous by Disney
A series of progressively different graphics are used for each frame of film
Elements in a scene that might move, for example Kluang man, are drawn on sheets of transparent material called ‘cel’, and laid over a background which is drawn separately (kampung scenery for example)
In producing a sequence, only the moving elements on the cel need to be redrawn for each frame, the fixed part of the scene need only be made once.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

13. Animation techniques – Cel Animation
Animation is drawn between keyframes.
Key frames identify the start and end of some action
The process of filling in the action is called tweening.
Tweening is a process which requires calculating the number of frames between keyframes and the path the action takes, and then actually sketching on to a cel the series of progressively different outlines.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

14. Animation techniques – Stop motion
Miniatures three-dimensional sets are used (stage, objects)
Objects are moved carefully between shots.
Objects may include articulate figures, whose limbs can be repositioned, or solid figures whose parts are replaced, or substitute between shots, to produce an effect of gesture, walking, and so on.
Plasticine may be used for objects, to be manipulated between shots to produce both natural movement, and otherwise impossible changes and transformations.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

15. Computer Animation – Digital cel & sprite animation
Employ the same logic and procedural concept of cel animation.
Objects are drawn using 3D modeling software
Objects and background are drawn on different layers, which can be put on top of one another.
Layers allow you to create separate parts of a still image, for example, a person and the background of a scene they are walking through – so that each can be altered or moved independently.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

16. Computer Animation – Digital cel & sprite animation
Sprite animation – animation on moving object (sprite).
A set of images, called faces is associated with each sprite.
Example, a walking man, can be created by advancing the position of the sprite (the man) and cycling through the faces (walking motion), the man can be made to walk.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

17. Computer Animation – Key Frame Animation
Keyframes :
Are drawn to provide the detailed characteristic of characters at important points in the animation.
Example, specify the start and end of a walk, the top and bottom of the fall.
3D modeling and animation software will do the tweening process
It fill in the gaps between the keyframes and create a smooth animation.
You just set the value of frames per second (fps) for your animation.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

18. Computer Animation – Key Frame Animation
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

19. Computer Animation – Hybrid technique
Mixing cel and 3D computer animation.
May as well include life footage.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

20. Animation Techniques - Kinematics
The study of motion of jointed structure (such as people)
Realistic animation of such movement can be complex.
Latest technology use motion capture for complex movement animation.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

21. Animation techniques - Morphing
The process of transitioning from one image to another
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

22. Animation Techniques - Morphing
When morphing, few key elements (such as a nose from both images) are set to share the same location (one the final image).
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

23. Animation Techniques - Morphing
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

24. Animation File Formats
Windows Media files : .avi, .asf or .wmv
Apple QuickTime files: .qt or .mov
Motion video files : .mpeg or .mpg
Flash files : .swf
Shockwaves files : .dcr
Animated GIF : .gif
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

25. Creating Animation Use digital camera to capture each drawn frame.
Scan the drawn image/frame.
Video camera (connected through video capture card) is connected directly to computer to capture each frame of animation on disk – let it be on paper, cel, constructed on 3D set or by any other techniques discussed.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

26. Creating Animation Software tool can help create object such as:
Rolling ball
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

27. Creating Animation
Create eight rotated images at 45-degree incremental angle, rotating a full circle of 360-degrees.
when displayed sequentially at the same location, the sphere spins.
Calculation is needed in order to create a smooth rolling effect.
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

28. Creating Animation A bouncing ball
Gravity makes the ball speed up as it falls and slow down as it rises
Formula: s = 1/2gt2
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002

29. Creating Animation = + Animated scene
Few images are combined together. = +
CMPD273 Multimedia System
Prepared by Nazrita Ibrahim © UNITEN2002