MULTIMEDIA ANIMASI

MODUL 3
DASAR ANIMASI FLASH
Kompetensi Dasar
Mahasiswa dapat membuat animasi dasar menggunakan adobe flash

Indikator
Setelah mengikuti perkuliahan, mahasiswa diharapkan dapat :
1. Membuat animasi menggunakan classic tween
2. Membuat animasi menggunakan motion tween
3. Membuat animasi menggunakan shape tween

Deskripsi Singkat
Di Bab ini mahasiswa akan diperkenalkn dengan teknik animasi dasar. Selanjutnya mahasiswa
akan diajak untuk membuat animasi yang akan digunakan dalam pembuatan multimedia pada
bab selanjutnya.

Materi
1. Tehnik animasi classic tween
2. Tehnik animasi motion tween
3. Tehnik animasi shape tween

Teori
Seperti film-film, dokumen ADOBE Flash membagi panjang waktu menjadi frame. Dalam
timeline, anda dapat mengatur dan mengendalikan isi dokumen Anda. Anda menempatkan
frame dalam timeline dalam urutan yang anda inginkan, object yang berada dalam frame akan
muncul dalam konten.
1. Keyframe adalah penanda dimana perubahan object yang terjadi dalam timeline.
Sebagai contoh, keyframe dapat menunjukan di mana object baru akan muncul dalam
timeline. Keyframe juga dapat menjadi tempat untuk menuliskan kode ActionScript.
2. Motion Tween : Teknik animasi dengan menggunakan dua titik yang berbeda, animasi
berupa perubahan posisi, ukuran, rotasi dan transparent. Dapat juga diatur lintasan dari
pergerakan animasi yang berupa curve.
3. Shape Tween : teknik animasi dengan menggunakan dua titik yang berbeda, animasi
berupa perubahan bentuk object, posisi, ukuran, dan transparent.
4. Classic Tween : teknik animasi dengan menggunakan dua titik yang berbeda, animasi
berupa perubahan posisi, ukuran, dan transparent.

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

5. Motion Guide : teknik animasi dengan menggunakan jalur bantuan sebagai lintasan dari
pergerakan movie clip.

Praktik
1. MEMBUAT ANIMASI MOTION TWEEN
a. Buatlah dokumen baru
b. Pilih Creat New ActionScript 2.0
c. Buatlah symbol graphic untuk object animasinya. Dalam kasus ini kita gunakan
symbol “logo_STMIK” atau anda bisa membuat symbol yang lainnya.

d. Masukkan symbol “logo_STMIK” kedalam stage : klik logo_STMIK di library 

Drag ke stage

e. Perhatikan di frame nomor 1 di layer 1 sudah berbentuk lingkaran hitam, yang

menandakan sudah terisi object symbol logo_STMIK.

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

f. Untuk membuat motion tween : klik frame nomor 1  klik kanan Create
Motion Tween

g. Frame nomor 1 tersebut sebagai titik yang pertama, berikutnya kita tentukan
titik yang kedua, misalkan titik yang kedua di frame nomor 30. Klik frame nomor
30  klik kanan  insert Keyframe (F6)  All

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

h. Untuk merubah posisi, ukuran, rotasi dan transparent pada titik yang kedua. Klik
Frame nomor 30  klik symbol logo_STMIK ubah
posisi/ukuran/rotasi/transparan barunya
 Untuk merubah posisi cukup di drag

 Untuk merubah ukuran : Klik symbol logo_STMIKtekan keyboard huruf

Q gunakan node yang muncul untuk merubah ukuran atau gunakan
transform tool

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

 Untuk merubah rotasi : Klik symbol logo_STMIK gunakan transform

toolrotate

i. Pada motion tween akan terlihat garis path atau lintasan dari pergerakan
animasinya. Path tersebut bisa dimodifikasi menjadi melengkung.
 Klik tombol sub selection (A)

 Arahkan ke ujung garis path(node), sambil menekan tombol ALT klik dan
Drag ujung path(node)

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

j. Untuk melihat gerakan animasi tekan ENTER

k. Ulangi langkah-langkah diatas (mulai g) untuk membuat titik ke-3, ke-4 dan
seterusnya sesuai dengan kebutuhan anda

Titik 1
Titik 4

Titik 3

Titik 2

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

2. MEMBUAT ANIMASI SHAPE TWEEN

Untuk membuat animasi shape object yang dianimasikan harus berupa shape, tidak bisa
berupa symbol. Dalam kasus ini kita akan membuat animasi perubahan “rectangle” yang
akan menjadi teks “STMIKTSM”
a. Buat dokumen flash baru
b. Buat rectangle di frame nomor 1 di layer 1
Klik rectangle toolklik dan drag di dalam stage

c. Di frame nomor 1 sudah terisi shape rectangle, berikutnya menentukan titik yang
kedua misalkan kita gunakan frame nomor 30.
Klik frame nomor 30  klik kanan insert Blank KeyFrame
Kita gunakan Blank KeyFrame karena akan menggambar shape yang berbeda
bentuk.

d. Maka di frame 30 akan muncul lingkaran warna putih yang menandakan bahwa
di keyframe tersebut belum ada isinya.

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

e. Berikutnya tambahkan text “STMIKTSM” menggunakan text tool.

Klik frame nomor 30  klik text toolklik dalam stage tulis “STMIKTSM”

Perlu diperhatikan bahwa text yang baru saja dibuat bukan merupakan shape.
Untuk merubahnya menjadi shape : Klik text “STMIKTSM” tekan CTRL+B
sebanyak 2 (dua) kali

f. Untuk membuat animasi shape tween. Klik frame diantara nomor 1 dan 30 
klik kanan Create Shape Tween

g. Jalankan dengan menekan tombol ENTER

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

3. MEMBUAT ANIMASI CLASSIC TWEEN

Teknik ini tidak jauh berbeda dengan Motion Tween, hanya pada teknik ini tidak ada
path/lintasan animasi yang dapat dimodifikasi.
a. Buat dokumen flash baru
b. Buatlah symbol graphic untuk object animasi. Dalam kasus ini akan
menggunakan symbol graphic “logo_STMIK” yang telah dibuat sebelumnya.

c. Masukkan symbol “logo_STMIK” kedalam stage : klik logo_STMIK di library 

Drag ke stage.
d. Perhatikan di frame nomor 1 di layer 1 sudah berbentuk lingkaran hitam, yang
menandakan sudah terisi object symbol logo_STMIK.

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

e. Untuk membuat classic tween: klik frame nomor  klik kanan Create Classic
Tween

f. Frame nomor 1 tersebut sebagai titik yang pertama, berikutnya kita tentukan
titik yang kedua, misalkan titik yang kedua di frame nomor 30. Klik frame nomor
30 klik kanan insert keyframe(F6)

g. Untuk merubah posisi, ukuran, rotasi dan transparan pada titik yang kedua. Klik
frame nomor 30 klik symbol logo_STMIK ubah
posisi/ukuran/rotasi/transparan barunya
 Untuk merubah posisi cukup di drag

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

 Untuk merubah ukuran: klik symbol logo_STMIKtekan keyboard huruf

Q gunakan node yang muncul untuk merubah ukuran atau gunakan
transform tool

 Untuk merubah rotasi : Klik symbol logo_STMIK gunakan transform

toolrotate

h. Untuk melihat gerakan animasi tekan ENTER

i. Ulangi langkah-langkah diatas, untuk membuat titik ke-3, ke-4 dan seterusnya
sesuai kebutuhan anda.

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

4. MEMBUAT ANIMASI MOTION GUIDE

a. Buatlah layer seperti pada gambar berikut ini:

b. Membuat movieclip. Klik insertnew symbolname:PesawatType : Movie

ClipOK

Buatlah object pesawat seperti pada gambar berikut. Bisa dengan cara import
atau anda menggambar sendiri.

c. Kembali ke Scene 1
d. Klik frame nomor 1 layer pesawat klik symbol pesawat di library Drag ke
stage.

e. Membuat guide. Klik kanan layer pesawatAdd Classic Motion Guide

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

f. Membuat garis guide. Klik frame nomor 1 “Guide:pesawat” klik pen

tool(P)Gambarlah garis seperti gambar berikut:
Caranya : klikLepasklik dan TahanDragLepasklik dan
TahanDragLepasDan seterusnya

g. Membuat animasi pesawat.

 Klik layer pesawatklik object pesawatDrag ke ujung kiri garis guide

Tanda Lingkaran
tepat diujung garis

 Rotasikan pesawat searah dengan garis

 Klik frame nomor 50 layer pesawatklik kananinsert keyframe(F6)

 Klik frame nomor 50 layer Guide:pesawatklik kananinsert keyframe(F5)

STMIK TASIKMALAYA
 MULTIMEDIA ANIMASI

 Klik kanan frame diantara nomor 1 dan 50 pada layer pesawatCreate

Classic Tween
 Klik frame terakhir (nomor 50) pada layer pesawatklik object
pesawatnyaDrag ke ujung kanan garis.

 Rotasikan pesawat sesuai dengan arah garis

 Klik frame diantara nomor 1 dan 50 layer pesawatpropertiesCentang

Orient to Path
h. Jalankan tekan CTRL+ENTER

TUGAS
1. Buatlah animasi bola memantul menggunakan Motion Tween
2. Buatlah animasi bom meledak menggunakan Shape Tween
3. Buatlah animasi text berjalan menggunakan Classic Tween
4. Buatlah animasi text berjalan menggunakan Motion Guide

STMIK TASIKMALAYA