Download - CSC 8610 & 5930 Multimedia Technology
![Page 1: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/1.jpg)
CSC 8610 & 5930Multimedia Technology
Lecture 7Animation Techniques
![Page 2: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/2.jpg)
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
![Page 3: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/3.jpg)
3
ANIMATION TECHNIQUES
![Page 4: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/4.jpg)
4
Animation Like video
A sequence of images– Create illusion of movement when played in succession
Commonly used in multimedia projects
![Page 5: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/5.jpg)
5
Creating Animation Video editing programs
Multimedia authoring programs:– Adobe Flash, Adobe Director– Often frame-based
![Page 6: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/6.jpg)
6
Frame-based Animation sequence is created as a sequence of frames Usually on a timeline
![Page 7: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/7.jpg)
7
What a Timeline Look Like in Adobe Flash
Frame numbers
A layer with a seqence of frames
![Page 8: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/8.jpg)
8
Types of Techniques to Create Animation in Multimedia Authoring Program Frame-by-frame Tweening Scripting
![Page 9: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/9.jpg)
9
FRAME BY FRAME
![Page 10: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/10.jpg)
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”
![Page 11: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/11.jpg)
11
Keyframe A frame in which the content is explicitly specified.
Different from a frame in which the content is interpolated between frames.
![Page 12: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/12.jpg)
12
Frame-by-Frame Example
Frame: 1 2 3 4 5 6 7
![Page 13: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/13.jpg)
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
![Page 14: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/14.jpg)
14
More Examples Post-It Note Animations How to Create Walking Animation
![Page 15: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/15.jpg)
15
TWEENED ANIMATION
![Page 16: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/16.jpg)
16
Tweened Animation Content in frames between 2 keyframes is interpolated
These interpolated frames are called in-between frames.
![Page 17: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/17.jpg)
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
![Page 18: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/18.jpg)
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
![Page 19: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/19.jpg)
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
![Page 20: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/20.jpg)
20
What can be tweened? Position (shown in the bird example) Rotation Size Color Opacity Shape
![Page 21: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/21.jpg)
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
![Page 22: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/22.jpg)
22
Example of Shape Tweened Bird Position (tweened) Rotation Size (tweened) Color Opacity (tweened) Shape (tweened)
Animationplaying 30 fps
![Page 23: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/23.jpg)
23
SCRIPTED ANIMATION
![Page 24: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/24.jpg)
24
Examples of Scripted vs Timeline Creating Animated GIFs (timeline) Adobe Flash with Tweening (scripted) PowerPoint animation (scripted)
![Page 25: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/25.jpg)
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
![Page 26: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/26.jpg)
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
![Page 27: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/27.jpg)
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
![Page 28: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/28.jpg)
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
![Page 29: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/29.jpg)
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
![Page 30: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/30.jpg)
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)
![Page 31: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/31.jpg)
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
![Page 32: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/32.jpg)
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
![Page 33: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/33.jpg)
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.
![Page 34: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/34.jpg)
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:
![Page 35: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/35.jpg)
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:
![Page 36: CSC 8610 & 5930 Multimedia Technology](https://reader036.vdocuments.us/reader036/viewer/2022062305/56816348550346895dd3d68c/html5/thumbnails/36.jpg)
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)