Subject
Year
: L0182 / Web & Animation Design
: 2009
Animation
Session 04 & 05
Learning Outcomes
At the end of this session, the students will be able to :
• Show how to use animation on multimedia application
• Create the simple animation using Adobe Flash CS3
tools
Bina Nusantara
Course Outlines
•
•
•
•
•
•
•
•
•
•
•
•
•
Definition
2D Animation
3D Animation
Morphing and Warping
What is Flash?
General Flash Workflow
Drawing Tools
Stage
Timelines
Property Inspector
Library Panel
Action Panel
Color Panel
Bina Nusantara
•
•
•
•
•
Creating Animation
Motion Tweening
Shape Tweening
Motion Guide
Using a Sound
Definition
• Animation is a sequence of frames that, when played in
order at sufficient speed, presents a smoothly moving
image like a film or video.
Bina Nusantara
2D Animation
• 2D animation is the creation of moving pictures in a
two-dimensional environment. This is done by
sequencing consecutive images, or "frames", that
simulate motion by each image showing the next in a
gradual progression of steps.
• Two types of 2D animation :
– Cel animation : based on changes that occur from one frame to
the next
– Path animation : moves an object along a predetermined path
on the screen
Bina Nusantara
Cel Animation & Path Animation
Cel Animation
Bina Nusantara
Path Animation
3D Animation
• 3D animation is animating objects that appear in a
three-dimensional space. They can be rotated and
moved like real objects.
• The process of creating 3D computer graphics can be
sequentially divided into three basic phases :
– Modeling : the process of forming the shape of an object
– Animation : defining the object’s motion
– Rendering : the process of generating an image from a model,
by means of computer programs.
Bina Nusantara
Modeling and Rendering
Bina Nusantara
Animation Special Effects
• Morphing : a transformation of images. It is used in
many animations and movies to warp a first image into a
second image.
• Warping : the process of digitally manipulating an image
such that any shapes portrayed in the image have been
significantly distorted.
Bina Nusantara
Morphing
Bina Nusantara
Warping
Bina Nusantara
Advantages and Disadvantages of Using
Animation
• Animation captures the imagination like no other tool, portraying
actions and spatial relationships that are not readily visible in reality
or that may not exist at all.
• Advantages
–
–
–
–
Attracts and holds attention
Show otherwise invisible actions or physical processes
Increases retention
Allows visualization of imagined concepts, objects and relationship
• Disadvantages
– Requires extensive memory and storage space
– Requires special equipment for a quality presentation
– 2D animation cannot depict actuality like video or photography
Bina Nusantara
What is Flash?
• Flash is a multimedia graphics program specially for use
on the Web
• Flash enables you to create interactive "movies" on the
Web
• Flash uses vector graphics, which means that the
graphics can be scaled to any size without losing
clarity/quality
• Flash does not require programming skills and is easy to
learn
Bina Nusantara
General Flash Workflow
• To build a Flash application, you typically perform the
following basic steps :
–
–
–
–
–
–
Bina Nusantara
Plan the application.
Add media elements.
Arrange the elements.
Apply special effects.
Use ActionScript to control behavior.
Test and publish your application.
Drawing Tools
• The drawing tools in
Flash let you create
and modify shapes for
the artwork in your
movies.
Bina Nusantara
Stage
• The Stage is the rectangular area where you place
graphic content when creating Flash documents.
Bina Nusantara
Timelines
• The Timeline organizes and controls a document’s
content over time in layers and frames.
• Like films, Flash documents divide lengths of time into
frames.
• Layers are like multiple film strips stacked on top of one
another, each containing a different image that appears
on the Stage.
• The major components of the Timeline are layers,
frames, and the playhead.
Bina Nusantara
Timelines (cont..)
•
•
•
•
•
•
A. Playhead
B. Empty keyframe
C. Timeline header
D. Guide layer icon
E. Frame View pop-up menu
F. Frame-by-frame animation
Bina Nusantara
•
•
•
•
•
•
G. Tweened animation
H. Scroll To Playhead button
I. Onion-skinning buttons
J .Current Frame indicator
K Frame Rate indicator
L Elapsed Time indicator
Property Inspector
• The Property inspector provides easy access to the
most commonly used attributes of the current selection.
• Depending on what is currently selected, the Property
inspector displays information and settings for the
current document, text, symbol, shape, bitmap, video,
group, frame, or tool.
• Example : the property inspector for the text tool
Bina Nusantara
Library Panel
• The Library panel is where you
store and organize symbols
created in Flash, as well as
imported files, including bitmap
graphics, sound files, and video
clips.
• The Library panel lets you
organize library items in folders,
see how often an item is used in a
document, and sort items by type.
Bina Nusantara
Action Panel
• The Actions panel lets you create and edit ActionScript
code for an object or frame.
• The Actions panel title changes to Button Actions, Movie
Clip Actions, or Frame Actions, depending on what is
selected.
Bina Nusantara
Color Panel
• The Color panel lets you change the color of strokes
and fills.
Bina Nusantara
Graphic Objects
• In Flash, graphic objects are items on the Stage. Flash
lets you move, copy, delete, transform, stack, align, and
group graphic objects.
• Shape are one type of graphic object you can create in
Flash. When you draw shapes that overlap each other in
the same layer, the topmost shape cuts away the part of
the shape underneath it that it overlaps.
• Arranging Objects
–
–
–
–
Bina Nusantara
Stack objects
Align objects
Group objects
Break apart groups and objects
Creating Animation
• Keyframe
– Changes in the animation are defined in a keyframe.
– When you create frame-by-frame animation, every frame is a
keyframe.
• Tweening
– Tweening is an effective way to create movement and changes
over time.
– In tweened animation, you define keyframes at significant points
in the animation and Flash creates the contents of frames
between.
– Flash can create two types of tweened animation :
• Motion tweening
• Shape tweening
Bina Nusantara
Motion Tweening
• In motion tweening, you define properties such as
position, size, and rotation for an instance, group, or text
block at one specific time, and change those properties
at another specific time.
• A black dot at the beginning keyframe indicates motion
tweens; a black arrow with a light blue background
indicates intermediate tweened frames.
Bina Nusantara
Shape Tweening
• In shape tweening, you draw a shape at one specific
time, and change that shape or draw another shape at
another specific time. Flash interpolates the values or
shapes for the frames in between, creating the
animation.
• A black dot at the beginning keyframe indicates shape
tweens; a black arrow with a light green background
indicates intermediate frames.
Bina Nusantara
Motion Guide
• Motion guide layers let you draw paths along which
tweened instances, groups, or text blocks can be
animated.
• You can link multiple layers to a motion guide layer to
have multiple objects follow the same path.
• Use the Pen, Pencil, Line, Circle, Rectangle, or Brush
tool to draw the desired path.

Bina Nusantara
Motion Guide (cont..)
Bina Nusantara
Using Sound
• You place sound files into Flash by importing them into the library for
the current document.
• You can import the following sound file formats into Flash :
– WAV (Windows only)
– AIFF (Macintosh only)
– mp3 (Windows or Macintosh)
• If you have QuickTime 4 or later installed on your system, you can
import these additional sound file formats :
–
–
–
–
–
–
Bina Nusantara
AIFF (Windows or Macintosh)
Sound Designer II (Macintosh only)
Sound Only QuickTime Movies (Windows or Macintosh)
Sun AU (Windows or Macintosh)
System 7 Sounds (Macintosh only)
WAV (Windows or Macintosh)
Import a Sound
• Select File > Import > Import To Library.
• In the Import dialog box, locate and open the desired
sound file.
• With the new sound layer selected, drag the sound from
the Library panel onto the Stage. The sound is added to
the current layer.
• You can place multiple sounds on one layer or on layers
containing other objects. However, it is recommended
that each sound be placed on a separate layer.
Bina Nusantara
Import a Sound (cont..)
Bina Nusantara