Post on 23-Feb-2016
description
transcript
CSC 8610 & 5930Multimedia Technology
Lecture 7Animation Techniques
2
Today in class (4/16) 6:15 Recap, Reminders 6:20 Project discussion 6:45 Lecture – Animation 7:30 Break 7:45 Lecture - Animation (cont’d) 9:00 Wrap
3
ANIMATION TECHNIQUES
4
Animation Like video
A sequence of images– Create illusion of movement when played in succession
Commonly used in multimedia projects
5
Creating Animation Video editing programs
Multimedia authoring programs:– Adobe Flash, Adobe Director– Often frame-based
6
Frame-based Animation sequence is created as a sequence of frames Usually on a timeline
7
What a Timeline Look Like in Adobe Flash
Frame numbers
A layer with a seqence of frames
8
Types of Techniques to Create Animation in Multimedia Authoring Program Frame-by-frame Tweening Scripting
9
FRAME BY FRAME
10
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”
11
Keyframe A frame in which the content is explicitly specified.
Different from a frame in which the content is interpolated between frames.
12
Frame-by-Frame Example
Frame: 1 2 3 4 5 6 7
13
Frame-by-Frame Example
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Frame 6
Frame 7
Frame 8
Frame 9
Animationplaying 2 fps
14
More Examples Post-It Note Animations How to Create Walking Animation
15
TWEENED ANIMATION
16
Tweened Animation Content in frames between 2 keyframes is interpolated
These interpolated frames are called in-between frames.
17
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
18
Continuing with the Bird ExampleIn 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
19
Example of Bird Tweening Position
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Frame 6
Frame 7
Frame 8
Frame 9
Animationplaying 2 fps
20
What can be tweened? Position (shown in the bird example) Rotation Size Color Opacity Shape
21
Example of Shape Tweened Bird
Frame 1
Frame 10
Frame 20
Frame 30
Frame 40
Frame 50
Frame 60
Frame 70
Frame 80
Animationplaying 30 fps
22
Example of Shape Tweened Bird Position (tweened) Rotation Size (tweened) Color Opacity (tweened) Shape (tweened)
Animationplaying 30 fps
23
SCRIPTED ANIMATION
24
Examples of Scripted vs Timeline Creating Animated GIFs (timeline) Adobe Flash with Tweening (scripted) PowerPoint animation (scripted)
25
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
26
Frame-by-Frame vs. Tweened vs. Scripted
Frame-by-Frame Tweened ScriptedRely on a fixed sequence of visual content on timeline
Always same animation every time you play
Dynamic and interactive
Require scripting
27
Frame-by-Frame vs. Tweened vs. Scripted
Frame-by-Frame Tweened ScriptedRelative work in general required in creating the visual content
longest shortest
Choice of animation involving complex or organic motion such as walking and dancing
may be
Choice of animation involving continuous motion that can be interpolated
28
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
29
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
30
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)
31
Adjusting Speed of a Frame-based AnimationSuppose you have a frame-based animation and want to
change its playback speed.
General Strategy:Avoid eliminating frames if possible
32
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
33
Example of Adjusting Speed
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Suppose you have this 5-frame animation and you want to slow it down.
34
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:
35
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:
36
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)