Winter 2020

DMET501 – Introduction to Media Engineering

Video and Animation (2)

Seif Eldawlatly

1
Animation
• Animation is the creation of moving pictures one frame at a time

• Traditional animators have developed many techniques, including

cel animation, stop motion and claymation

The Process of Animation

http://www.youtube.com/watch?v=V7ZWeLLTqJw

2
Image Sequences
• Animation made using any of the traditional techniques can be captured
one frame at a time using a camera connected to a computer, instead of
being recorded on film

• Animation captured to disk can be combined with digital animation

Hybrid Animation
https://www.youtube.com/watch?v=tAwbcDb5y2k

3
Image Sequences
• Animation can be created digitally

• Individual frames can be created in a graphics program

• Using layers to represent the contents of a frame can streamline the

animation process

Animation of Layer’s Position

4
Image Sequences
• Creating animation digitally allows effects such as rotoscoping:
Tracing selected elements from a live-action video clip onto a new layer,
one frame at a time

Rotoscoping
http://www.youtube.com/watch?v=z0YaC8pE8BU

• A sequence of images can be stored in consecutively numbered image

files, which can be imported into video editing programs or Flash
5
Animated GIFs
• An animated GIF contains multiple bitmapped images in a single file

• The individual images can be displayed in sequence by Web browsers

and other programs, without the need for a plug-in

6
Animated GIFs
• Animated GIFs are only suitable for short simple animations

• Animated GIFs use indexed color and lossless intra-frame

compression, whose effectiveness depends on the nature of the images
in the animation

• Animated GIFs cannot have a soundtrack or player controls

7
Interpolation
• In traditional cel animation, chief animators draw key frames at
important points in the animation, and in-betweeners create the
intervening frames
Key Frame 1 Key Frame 2 Key Frame 3

• Animation programs perform the equivalent of in-betweening by

interpolating the values of properties such as position between key
frames

8
Interpolation
• Motion Interpolation: Creating frames that represent the motion of an
object given a number of key frames

• Since bitmaps do not contain identifiable objects, the use of layers to

isolate different elements is essential for interpolation

• Layers of a bitmap can be moved independently of each other

Layer 1 Layer 2

9
Interpolation
• If motion is interpolated linearly, movement begins and ends
instantaneously, and there may be unnatural discontinuities between
interpolated sequences

Key Frame 1

kf: Key Frame

Key Frame 2

10
Interpolation
• To make movements look more natural, easing in and out can be used
to cause the motion to increase or decrease gradually

11
Interpolation
• Linear interpolation can cause other problems such as when 3 key
frames exist in a scene with linear interpolation in-between

• Custom easing using Bézier curves is used to control the rate of change
in arbitrarily complex ways
12
Interpolation
• Objects or layers can be made to move along motion paths

• When using motion paths, it is usually necessary to orient the moving

object to the path to achieve a realistic effect

13
Interpolation
• Motion paths can be used to simulate effects such as a bouncing ball

14
Vector Animation in Flash
• Flash movies, also known as SWF files, are the most popular Web
animation format. They are usually created in Flash, but SWFs may
also be exported from other programs

• An animation being created in Flash is organized using a timeline

15
Vector Animation in Flash
• Key frames are drawn in their entirety on the stage. Ordinary frames
have no content, they just hold the picture from the preceding key frame

• Graphical objects can be stored in a library as symbols

• Instances of symbols can be created on the stage, allowing objects to

be reused

16
Vector Animation in Flash
• Interpolation (“tweening”) is applied to symbol instances

• Easing can be applied to tweened motion

• An object’s size, orientation, opacity and color may also be interpolated

17
Vector Animation in Flash
• There are three sorts of symbols in Flash:
- Graphic symbols are reusable vector objects

- Movie clip symbols are self-contained animations with their own

timelines, that play within the main movie and can be controlled by
scripts

- Button symbols for interaction

18
Motion Graphics
• Motion graphics is animated graphic design

• Interpolation may be used to control the rate of change of properties as

well as their values

19
Delivering Animation
• The three predominant formats for delivering digital animation are
animated GIF, Flash (SWF) and video

• Video must be used for animation that will be played on a television

• If animation is delivered as video a soundtrack can be added, player

controls can be used and high compression can be achieved using
modern video codecs

• Flash is superior for vector animations

• For bitmapped animations, animated GIF may be used without a plug-

in, but video provides the best quality

• The Flash movie file format is a compressed binary format that provides
an efficient way to deliver animation over a network 20