Subject
Year
: L0182 / Web & Animation Design
: 2009
Animation
Session 04 & 05
Learning Outcomes
Di akhir sesi ini, mahasiswa akan mampu untuk :
• Menggunakan animasi pada web
• Membuat animasi sederhana menggunakan Adobe Flash
CS3
Bina Nusantara
Course Outlines
•
•
•
•
•
•
•
•
•
•
•
•
•
Definisi
Animasi 2D
Animasi 3D
Morphing dan Warping
Apa itu Flash?
Workflow Flash secara umum
Drawing Tools
Stage
Timelines
Property Inspector
Library Panel
Action Panel
Color Panel
Bina Nusantara
•
•
•
•
•
Membuat Animasi
Motion Tweening
Shape Tweening
Motion Guide
Menggunakan suara
Definisi
• Animasi adalah suatu rangkaian frame yang ketika
dijalankan secara urut dengan kecepatan yang tepat,
menampilkan gerakan yang halus seperti pada film atau
video.
Bina Nusantara
Animasi 2D
• Animasi 2D adalah pembuatan gambar bergerak pada
lingkungan 2 dimensi. Hal ini dilakukan dengan
merangkai gambar secara berkelanjutan, atau “frame”,
yang mensimulasikan gerakan dimana setiap image
memperlihatkan gambar berikutnya secara bertahap.
• Dua jenis animasi 2D :
– Cel animation (Animasi Sel) : berbasiskan pada perubahan
yang terjadi dari satu frame ke frame berikutnya
– Path animation (Animasi Jalur) : menggerakkan obyek
sepanjang jalur yang sudah ditentukan pada layar
Bina Nusantara
Cel Animation & Path Animation
Cel Animation
Bina Nusantara
Path Animation
Animasi 3D
• Animasi 3D adalah menganimasikan obyek yang
ditampilkan pada ruangan 3 dimensi. Obyek dapat
dirotasikan dan digerakkan seperti pada obyek
sebenarnya.
• Proses pembuatan 3D computer graphics dapat
dilakukan dalam 3 tahapan dasar :
– Modeling : proses memformulakan bentuk dari obyek
– Animation : mendefinisikan gerakkan obyek
– Rendering : proses menbuat image dari suatu model dengan
menggunakan program komputer.
Bina Nusantara
Modeling dan Rendering
Bina Nusantara
Efek Spesial Animasi
• Morphing : mentransformasikan suatu image.
Digunakan pada banyak animasi dan film untuk
mengubah image pertama ke image ke dua.
• Warping : Proses manipulasi image secara digital
sehingga bentuk-bentuk yang ditampilkan pada image
diubah secara signifikan.
Bina Nusantara
Morphing
Bina Nusantara
Warping
Bina Nusantara
Keuntungan dan Kerugian Menggunakan
Animasi
• Animasi menangkap (capture) imajinasi dengan lebih baik daripada
tools yang lain, menggambarkan aksi dan relasi spasial yang tidak
terlihat pada realitas atau mungkin tidak ada sama sekali
• Keuntungan
–
–
–
–
Menarik dan menahan perhatian
Memperlihatkan aksi tak terlihat (invisible actions) atau proses fisik
Menambah daya ingat
Memampukan visualisasi konsep, object dan relasi yang dibayangkan
• Kerugian
– Membutuhkan tambahan memory dan ruang (space) penyimpanan
– Membutuhkan peralatan khusus untuk presentasi yang berkualitas
– Animasi 2 dimensi tidak dapat memperlihatkan efek “nyata” seperti
pada video atau foto.
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