Transcript ppt

CSC 8610 & 5930
Multimedia Technology
Lecture 7
Animation Techniques
Today in class (4/16)






6:15
6:20
6:45
7:30
7:45
9:00
Recap, Reminders
Project discussion
Lecture – Animation
Break
Lecture - Animation (cont’d)
Wrap
2
ANIMATION TECHNIQUES
3
Animation

Like video

A sequence of images
–

Create illusion of movement when played in succession
Commonly used in multimedia projects
4
Creating Animation

Video editing programs

Multimedia authoring programs:
–
–
Adobe Flash, Adobe Director
Often frame-based
5
Frame-based


Animation sequence is created as a sequence of frames
Usually on a timeline
6
What a Timeline Look Like in Adobe Flash
Frame numbers
A layer with a seqence
of frames
7
Types of Techniques to Create Animation in
Multimedia Authoring Program



Frame-by-frame
Tweening
Scripting
8
FRAME BY FRAME
9
Frame-by-Frame

By explicitly placing different visual content for each
frame

Each frame is a keyframe.

Like flipbook animation
“Flip Book Animation 1”
“Flip Book Animation 2”
10
Keyframe

A frame in which the content is explicitly specified.

Different from a frame in which the content is
interpolated between frames.
11
Frame-by-Frame Example
Frame:
1
2
3
4
5
6
7
12
Frame-by-Frame Example
Frame 1
Frame 6
Frame 2
Frame 7
Frame 3
Frame 8
Frame 4
Frame 9
Frame 5
Animation
playing 2 fps
13
More Examples


Post-It Note Animations
How to Create Walking Animation
14
TWEENED ANIMATION
15
Tweened Animation

Content in frames between 2 keyframes is interpolated

These interpolated frames are called in-between
frames.
16
What Does Interpolation Mean?
Example:
Suppose a bird in the first keyframe (frame 1) is at x =
11 and at x = 20 in the second keyframe (frame 10).
Linear interpolation of the bird's x will make the bird at:
–
–
–
–
x = 12 in frame 2
x = 13 in frame 3
x = 14 in frame 4
... and so forth
17
Continuing with the Bird Example
In tweened animation,
–
what you need to do:


–
create 2 keyframes: frames 1 and 10
only explicitly place the bird at x=11 in frame 1 and x=20 in frame
what the computer do for you:




place the bird at x=12 in frame 2
place the bird at x=13 in frame 3
...
place the bird at x=19 in frame 9
18
Example of Bird Tweening Position
Frame 1
Frame 6
Frame 2
Frame 7
Frame 3
Frame 8
Frame 4
Frame 9
Frame 5
Animation
playing 2 fps
19
What can be tweened?






Position (shown in the bird example)
Rotation
Size
Color
Opacity
Shape
20
Example of Shape Tweened Bird
Frame 1
Frame 50
Frame 10
Frame 60
Frame 20
Frame 70
Frame 30
Frame 80
Frame 40
Animation
playing 30 fps
21
Example of Shape Tweened Bird






Position (tweened)
Rotation
Size (tweened)
Color
Opacity (tweened)
Shape (tweened)
Animation
playing 30 fps
22
SCRIPTED ANIMATION
23
Examples of Scripted vs Timeline



Creating Animated GIFs (timeline)
Adobe Flash with Tweening (scripted)
PowerPoint animation (scripted)
24
Animation by Scripting/Programming

Does not rely on a sequence of frames on timeline

Dynamic:
–
–
Animation can be programmed to respond to the user's interaction
Animation can be different in a different play through
25
Frame-by-Frame vs. Tweened vs. Scripted
Frame-by-Frame
Tweened
Scripted
Rely on a fixed
sequence of visual
content on timeline
Always same
animation every
time you play
Dynamic and
interactive
Require scripting
26
Frame-by-Frame vs. Tweened vs. Scripted
Frame-by-Frame
Relative work in
general required in
creating the visual
content
Choice of animation
involving complex or
organic motion such
as walking and
dancing
Tweened
longest
Scripted
shortest
may be
Choice of animation
involving continuous
motion that can be
interpolated
27
Animation Frame Size

Width and height of the animation

In multimedia authoring programs, such as Adobe Flash
and Director:
–
–
determined by the stage dimension
also in pixels
28
Animation Frame Rate

Playback speed of the animation

In frames per second (fps)

Too low: choppy

Too high:
choppy if the computer is not fast enough to process
and display the frames
29
Animation Frame Rate Setting in
Multimedia Authoring Programs

Maximum rate

The playback will:
–
–
not exceed the frame rate setting
not gurantee to maintain the frame rate
(slower computer may play at frame rate lower than the setting)
30
Adjusting Speed of a Frame-based
Animation
Suppose you have a frame-based animation and want to
change its playback speed.
General Strategy:
Avoid eliminating frames if possible
31
Adjusting Speed of a Frame-based
Animation

To speed up:
–
–

Increase frame rate if possible and keep the number of frames
(preferred)
Keep the frame rate but reduce the number of frames (not preferred)
To slow down:
–
–
Keep frame rate but add more frames (preferred)
Reduce frame rate but keep the number of frames
32
Example of Adjusting Speed
Suppose you have this 5-frame
animation and you want to slow it
down.
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
33
Example of Adjusting Speed
Suppose you have this 5-frame
animation and you want to slow it
down.
If you reduce the frame rate and
keep the same frame number:
34
Example of Adjusting Speed
Suppose you have this 5-frame
animation and you want to slow it
down.
If you reduce frame rate and keep
the same frame number:
If you keep the frame rate and
add more frames:
35
Broader Context and Application




Imagine – from Pencils to Pixels
History of Computer Animation (2 parts)
Torsten Reil builds better animations (TED Talk)
David Bolinsky animates a cell (TED Talk)
36