BAB V

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 V ini mahasiswa akan diperkenalkan dengan teknik animasi dasar.
Selanjutnya mahasiwa akan diajak untuk membuat animasi yang akan digunakan dalam
pembuatan multimedia pada bab berikutnya.

Materi
1. Teknik animasi classic tween
2. Teknik animasi motion tween
3. Teknik 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 inginkaan, obyek yang berada
dalam frame akan muncul dalam konten.
1. Keyframe adalah penanda dimana perubahan object yang terjadi dalam timeline.
Sebagai contoh, keyframe dapat menunjukkan di mana object baru akan muncul

Modul Praktikum Multimedia | STMIK Duta Bangsa - 49

 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 transparant. Dapat juga diatur lintasan
dari pergerakan animasinya yang berupa curve.
3. Shape Tween : teknik animasi dengan menggunakan dua titik yang berbeda, animasi
berupa perubahan bentuk object, posisi, ukuran, rotasi dan transparant.
4. Classic Tween: teknik animasi dengan menggunakan dua titik yang berbeda, animasi
berupa perubahan posisi, ukuran, rotasi dan transparent
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. Buatlah symbol graphic untuk object animasinya. Dalam kasus ini kita gunakan
symbol “logo_STMIK” atau anda bisa membuat symbol yang lainnya.

c. Masukkan symbol “logo_STMK” kedalam stage : Klik logo_STMIK di library

Drag ke stage

Modul Praktikum Multimedia | STMIK Duta Bangsa - 50

d. Perhatikan di frame nomor 1 di layer1 sudah berbentuk lingkaran hitam, yang
menandakan sudah terisi object symbol logo_STMIK

e. Untuk membuat motion tween: Klik frame nomor
Klik kanan
Create
Motion 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)
All

Modul Praktikum Multimedia | STMIK Duta Bangsa - 51

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

- Untuk merubah ukuran : klik symbol logo_STMIK
tekan keyboard

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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 52

 - Untuk merubah rotasi : klik symbol logo_STMIK
gunakan transform
tool
rotate

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

- Arahkan ke ujung garis path (node), sambil menekan tombol ALT
Klik
dan Drag ujung path (node)

Modul Praktikum Multimedia | STMIK Duta Bangsa - 53

 i. Untuk melihat gerakan animasi tekan ENTER
j. Ulangi langkah-langkah diatas (mulai f.) untuk membuat titik ke-3, ke-4 dan
seterusnya sesuai kebutuhan anda

2. MEMBUAT ANIMASI SHAPE TWEEN

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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 54

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 nomor 30 akan muncul lingkaran warna putih yang menandakan
bahwa di keyframe tersebut belum ada isinya.

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

Klik frame nomor 30
Klik text tool
Klik dalam stage
tulis “STMIKDB”

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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 55

 f. Untuk membuat animasi shape tween. Klik frame diantara nomor 1 dan 30

Klik kanan
Create Shape Tween

g. Jalankan dengan menekan tombol ENTER

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 digunakan
symbol graphic “logo_STMIK” yang telah dibuat sebelumnya

Modul Praktikum Multimedia | STMIK Duta Bangsa - 56

c. Masukkan symbol “logo_STMK” kedalam stage : Klik logo_STMIK di library

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

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)

Modul Praktikum Multimedia | STMIK Duta Bangsa - 57

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

- Untuk merubah ukuran : klik symbol logo_STMIK
tekan keyboard huruf

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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 58

 - Untuk merubah rotasi : klik symbol logo_STMIK
gunakan transform
tool
rotate

h. Untuk melihat gerakan animasi tekan ENTER

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

4. MEMBUAT ANIMASI MOTION GUIDE

a. Buatlah layer seperti gambar berikut ini:

b. Membuat movieclip. Klik Insert
New Symbol
Name: Pesawat
Type :

Movie Clip
OK

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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 59

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

f. Membuat garis guide. Klik Frame Nomor 1 Layer “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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 60

g. Membuat animasi pesawat.
- Klik layer pesawat
Klik Object Pesawatnya
Drag ke ujung kiri garis guide

- 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 Frame (F5)

- Klik kanan frame diantara nomor 1 dan 50 pada layer pesawat
Create
Classic Tween

Modul Praktikum Multimedia | STMIK Duta Bangsa - 61

- Klik frame terakhir (nomor 50) pada layer pesawat
Klik objek pesawatnya

Drag ke ujung kanan garis.

Modul Praktikum Multimedia | STMIK Duta Bangsa - 62

 - Rotasikan pesawat sesuai dengan arah garis

- Klik frame diantara nomor 1 dan 50 layer pesawat
Properties
Centang

Orient to Path

h. Jalankan. 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

Modul Praktikum Multimedia | STMIK Duta Bangsa - 63