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)