"Digital Media Primer" Yue-Ling Wong,

Copyright (c)2013 by Pearson Education,

Inc. All rights reserved.

1
 Chapter 8
Interactive Multimedia Authoring
with Flash: Animation
Part 2
Animation

2
 In this lecture, you will learn:
• the types of animation techniques

• characteristics of these techniques and what

kind of content each is best for

• strategies to adjust animation speed

(not always simply increasing or decreasing
the frame rate)
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

Details about timeline is covered in Sections 8.5.3 and 8.6,

which are in the next two Powerpoints.

7
 Types of Techniques to Create Animation
in Multimedia Authoring Program
• Frame-by-frame
• Tweening
• Scripting

8
 Frame-by-Frame
• By explicitly placing different visual content
for each frame

• Each frame is a keyframe.

• Like flipbook animation

http://www.youtube.com/watch?v=FH97UerMW6I
http://www.youtube.com/watch?v=zO8MlSjo0T0

9
 Keyframe
• A frame in which the content is explicitly
specified.

• Different from a frame in which the content is

interpolated between frames.

10
 Frame-by-Frame Example

Frame: 1 2 3 4 5 6 7

11
 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

12
 Tweened Animation
• Content in frames between 2 keyframes is
interpolated

• These interpolated frames are called in-

between frames.

13
 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

14
 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

15
 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

16
 What can be tweened?
• Position (shown in the bird example)
• Rotation
• Size
• Color
• Opacity
• Shape

17
 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

18
 Example of Shape Tweened Bird
• Position (tweened)
• Rotation
• Size (tweened)
• Color
• Opacity (tweened)
• Shape (tweened)
Animation
playing 30 fps

19
 Instruction on creating tweened
animation is covered in Section 8.6.3
(in another Powerpoint)

20
 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

21
 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

22
 Frame-by-Frame vs. Tweened vs. Scripted
Frame-by-Frame Tweened Scripted
Relative work in
general required in longest shortest
creating the visual
content
Choice of animation
involving complex or may be
organic motion such
as walking and
dancing
Choice of animation
involving continuous
motion that can be
interpolated

23
Also see the interactive tutorial:

FRAME-BY-FRAME, TWEENING, AND

SCRIPTED ANIMATION
A side-by-side comparison of frame-by-frame, tweening, and scripted
animation using the bird flying example shown in Figure 8.3.

24
 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

25
 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
26
 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)

27
 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

28
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

29
 Example of Adjusting Speed
Suppose you have this 5-frame
animation and you want to slow it Frame 1
down.

Frame 2

Frame 3

Frame 4

Frame 5

30
 Example of Adjusting Speed
Suppose you have this 5-frame If you reduce the frame rate and
animation and you want to slow it keep the same frame number:
down.

31
 Example of Adjusting Speed
Suppose you have this 5-frame If you reduce frame rate and keep
animation and you want to slow it the same frame number:
down.

If you keep the frame rate and

add more frames:

32
 Review Questions
Note to instructor:
Depending on your preference, you may want to go
over the review questions at the end of this lecture as
an instant review or at the beginning of next lecture to
refresh students' memory of this lecture.

33
 Review Question
Which animation technique is more dynamic--
allowing the animation to respond to the user
interaction?

A.frame-by-frame
B.tweening
C.animation by scripting

34
 Review Question
Which animation technique does not require
you to explicitly create visual content in every
frame?

A.frame-by-frame
B.tweening
C.none of the above

35
 Review Question
In a tweened animation, the content in the in-
between frames is ___.

A.drawn by the animator

B. randomly selected by the computer from a
sequence of images
C. selected by the computer from a sequence of
images in the order specified by the animator
D.interpolated by the computer

36
 Review Question
Which animation technique would be your best bet
to use to create the animation shown below?

A.Frame-by-frame
B. Tweening
C. Scripting

37
 Review Question
Which animation technique would be your best bet
to use to create the animation shown below?

A.Frame-by-frame
B. Tweening
C. Scripting

38