Chapter 8 – Part I
Interactive Multimedia Authoring
with Flash: Animation
“Computers and Creativity”
Richard D. Webster, COSC 109 Instructor
Office: 7800 York Road, Room 422 | Phone: (410) 704-2424
e-mail: webster@towson.edu
109 website: http://pages.towson.edu/webster/109/
1
What is Multimedia Authoring?
Process of multimedia production
– Assembling media elements
– Adding interactivity
– Export project for distribution to end users
• Final product can be:
– played back in a Web browser
– a stand-alone executable
2
Common Types of Multimedia Production
•
•
•
•
•
Business presentations
Advertising kiosks
Games
Educational: training and tutorials
Use of multimedia authoring program
3
Multimedia Authoring Program
• Allow you to combine text, images, audio, video,
animation into an interactive presentation
• May have its own scripting language
– to add interactivity
• Examples:
– Adobe Flash/ActionScript
– Adobe Director/Lingo
4
Multimedia Production Process
1. Collect media elements
2. Assemble media elements
3. Add interactivity
– By scripting or computer programming
– Example: Use ActionScript in Flash
4. Export the project into a format that your
target audience can play
5
Media Elements
• Often created outside of the multimedia
authoring program
• In Flash:
– Use pencil and brush tools
– Create vector graphics
6
Types of Media Elements Supported by
Adobe Flash
• Bitmap images
– Photoshop (PSD), BMP, GIF, JPEG, PNG, TIFF
• Vector graphics
– Flash Movie (SWF), Adobe Illustrator
• Digital Video
– QuickTime (MOV), AVI, Flash Video (FLV)
• Digital Audio
– WAV, MP3, AIFF, AU
7
Export the Project
• Web playback
–
–
–
–
SWF file
Smaller size than stand-alone
Playable in a Web browser that has the Flash player
Windows, Mac OS, and Linux
• Stand-alone version
• Mobile apps
– AIR app for iOS
– AIR app for Android
8
Animation
• Like video
• A sequence of images
– Create illusion of movement when played in
succession
• Commonly used in multimedia projects
• Animation sequence is created as a sequence
of frames
• Usually on a timeline
9
What a Timeline Looks 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.
10
Types of Techniques to Create Animation in
Multimedia Authoring Program
• Frame-by-frame
• Tweening
• Scripting
11
Frame-by-Frame
• By explicitly placing different visual content for
each frame
• Each frame is a keyframe
– A frame in which the content is explicitly specified.
– Different from a frame in which the content is
interpolated between frames.
• Like flipbook animation
http://www.youtube.com/watch?v=FH97UerMW6I
http://www.youtube.com/watch?v=zO8MlSjo0T0
12
Frame-by-Frame Example
Frame:
1
2
3
4
5
6
7
13
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
14
Tweened Animation
• Content in frames between 2 keyframes is
interpolated
• These interpolated frames are called inbetween frames.
15
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 does for you:
•
•
•
•
•
Creates all the in-between frames automatically
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
16
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
17
What can be tweened?
•
•
•
•
•
•
Position (shown in the bird example)
Rotation
Size
Color
Opacity
Shape
18
Tweening
• Both “Classic tween” and “Motion tween can
be used to animate symbol instances.
• “Shape tween” is used to animate shapes
19
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
20
Example of Shape Tweened Bird
•
•
•
•
•
•
Position (tweened)
Rotation
Size (tweened)
Color
Opacity (tweened)
Shape (tweened)
Animation
playing 30 fps
21
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
22
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
23
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
24
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
• Maximum rate in authoring programs
– not exceed the frame rate setting
– not guaranteed to maintain the frame rate
(slower computer may play at frame rate lower than
the setting)
25
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
• 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
26
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
27
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:
28
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:
29
Flash - Most Essential Workspace
Elements
•
•
•
•
•
Tools
Stage
Timeline
Property Inspector
Library
30
Tools Panel
Contains tools to
• select the visual content
• modify the content (like using the appropriate
tools to draw vector graphics)
– draw
– scale
– rotate
– erase
31
Most Essential Workspace Elements
Stage
32
Stage
• Where a Flash movie plays
• Background color can be set:
– in Property Inspector, or
– by choosing Modify > Document...
• Area outside of the stage:
– Gray color
– Objects placed there will not be visible when the movie
plays.
– Note that if a graphic is in the gray area outside the stage,
that graphic will not be visible when the movie plays
33
Most Essential Workspace Elements
Timeline
34
Timeline and Keyframes
• Timeline
– A stack of layers
• Content in a layer cover the ones beneath it
– A series of frames across
• A circle in a frame: a keyframe
– A solid circle in a frame:
a keyframe with content on the stage
– An empty circle in a frame:
a keyframe without any content on the stage
35
Keyframes in Flash
In this example:
1. Which frames are keyframes?
2. Which keyframes have content on the stage?
3. Which keyframes do not have content on the stage?
36
Frames and Keyframes
• Any non-keyframes frames subsequence to a
keyframe has the same content as that
keyframe
37
Frames and Keyframes
Examples
Keyframe: frame 1
Frames 1 – 4 has the same content as in frame 1 in Layer 1 on stage
38
To Create Keyframes in Flash
Do any of the followings:
• Select a frame in the Timeline and select Insert >
Timeline > Keyframe
• Select a frame in the Timeline and hit the F6 key
• Right-click (Windows) or Control-click (Mac OS) a
frame in the Timeline and select Insert Keyframe.
39
To Convert a Keyframe into a Regular
Frame
Do any of the followings:
• Select a frame in the Timeline and select Insert >
Timeline > Clear Keyframe
• Select a frame in the Timeline and hit the Shift-F6
keys
• Right-click (Windows) or Control-click (Mac OS) a
frame in the Timeline and select Clear Keyframe.
40
To Insert Frames in Flash
Do any of the following:
• Select a frame in the Timeline and select
Insert > Timeline > Frames
• Select a frame in the Timeline and hit the F5
key
• Right-click (Windows) or Control-click a frame
in the Timeline and select Insert Frame.
41
To Remove Frames
Do any of the following:
• Select a frame in the Timeline and hit the
Shift-F5 keys
• Right-click (Windows) or Control-click (Mac
OS) a frame in the Timeline and select Remove
Frames.
42
Most Essential Workspace Elements
Property
Inspector
43
Property Inspector
• Displays the information and properties that can be
edited
• If a frame on the Timeline:
– displays the frame property
– If the frame selected is a keyframe, you can also assign a
frame label and a tweening to that frame.
• If an object on the Stage is selected:
– displays the object’s properties that you can edit, e.g.,
• x and y
• width and height
44
Property Inspector
This object
on stage is
selected.
Its x, y, width and height are
displayed and can be
changed by entering different
numbers.
45
Most Essential Workspace Elements
Library
46
Library
• Stores symbols, imported bitmaps, and
sounds to be used in the project.
• Symbols are explained in Section 8.6 and next
Powerpoint.
47