Chapter 6:
Animation
COM269 Multiplatform Interactive
Design
WAN ANIS AQILAH MEGAT ZAMBRI
Principle of Animation
Animation possible due to biological phenomenon called
persistence of vision and psychological phenomenon known as phi.
Principle of Animation
Object seen by human eye remains chemically mapped on the eyes of
retina for the brief time after viewing and combined with mind need
to conceptually complete a perceived action.
This make possible after images changed very slightly and very
rapidly, one after other to seemingly blend together into a visual
illusion of movement.
Principle of Animation
Principle of Animation
Digital television video builds 24, 30, or 60 entire frames or pictures every second,
depending upon settings; the speed with which each frame is replaced by the
next one makes the images appear to blend smoothly into movement.
*I will show the example during Google Meet Discussion session
Principle of Animation
Quickly changed the viewed image is the principle of an animatic,
flip book, or a zeotrope.
Principle of Animation
Change the shape and move or translate a few pixels for each frame
to make object travel across the screen.
Animation by Computer
2-Dimension 2 ½ - Dimension 3-Dimension
Animation by Computer
(2D)
1. Visual change only on the flat Cartesian x
and y.
2. A blinking word, color cycling logo, cel
animation, button or tab that change state
on mouse rollover to let user know it is
active.
Animation by Computer
(2D)
3. Path animations increase the complexity
of an animation and provide motion,
changing the location image along the
predetermined path during the specified
amount of time.
4. Ex. Flash and PowerPoint.
Animation by Computer (21/2-D)
1. The 2.5D animation stands in the middle ground between 2D and
3D animation. In this type of animation, we use 3D objects in a 2D
environment.
2. An illusion of depth (z axis) is added to an image through shadowing
and highlighting, but the image still rest on the flats x and y axes in
two dimension.
3. Embossing, shadowing, beveling, and highlighting provide a sense
of depth by raising an image or cutting it into a background.
4. Ex. Zaxwerks : Zaxwerks 3D Flag is a plug-in for Adobe After Effects
that turns any picture, comp or movie into a realistic animated flag.
Animation by
Computer (3-D)
1. Creates a virtual realm in three
dimensions, and changes (motion) are
calculated along all three axes (x,y and
z).
2. Allowing an image is created with a
front, back, sides, top, and bottom to
move towards.
3. Allowing viewer to wander around and
get look at all object part of angles.
4. Ex. NewTek’s LightWave and
Autodesk’s Maya
Animation Techniques
Cel animation artwork begin with keyframes which the first and last frame
of action.
The series of frames in between keyframes called tweening. Tweening is
an action that requires calculating the numbers of frame between
keyframes and the path the action takes.
The action is checked by flipping through the frames and pencil frames
are assembled and then actually filmed as a pencil test to check the
smoothness, continuity and timing.
Computer Animation
Kinematics Morphing
Computer Animation
Computer Animation (Kinematics)
Study of movement and motion of the structures that have joints,
such as a walking man.
Walking animation step is tricky, need to calculate the position,
rotation, velocity and acceleration of all the joints and articulated
parts involved knees, hips flex, shoulder and head.
Computer Animation (Kinematics)
Example software such as Smith Micro’s Poser
Inverse kinematics is the process by link object such as
hand to arms and defines their relations and limit. It available
in high 3-D programs like Lightwave and Maya.
Computer Animation (Kinematics)
Is a popular effect in which
Computer one image transforms into
another.
Animation
(Morphing) Transition not only between
still images but also often
between moving images.
Computer
Animation
(Morphing)
Any Question?
THANK YOU FOR
WATCHING &
LISTENING!
