Modul Pelatihan

TEKNIK ANIMASI DENGAN M. FLASH

oleh Wahyu Tri Widadyo

Biro Pelatihan ADVY

AKADEMI DESAIN VISI YOGYAKARTA 2007

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Macromedia Flash Macromedia Flash merupakan program pengolah materi multimedia yang multiguna. M. Flash antara lain bisa dipakai untuk mengkomposisikan animasi 2 dimensi. Pada
kesempatan lain, orang dapat menggunakan Flash untuk mengemas media interaktif termasuk tampilan halaman sebuah website. Beberapa orang bahkan menggunakan

Flash untuk membuat game.

Untuk menjalankan Macromedia Flash dalam sistem operasi Windows XP bisa

dilakukan dengan klik tombol Start (1) di pojok kiri-bawah layar Program (2)

Macromedia (3) Macromedia Flash (4).

1 Gb. 1. Cara memanggil program M. Flash

Setelah melewati proses inisialisasi program, maka di layar monitor akan terlihat tampilan antar-muka (desktop interface) dari Macromedia Flash.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Menu, memuat perintah kerja

Tool Box; memuat alat kerja

Time line, untuk mengatur frame dan animasi

Stage; untuk melayout tampilan

Panel-panel kerja; (panel color mixer, misalnya, untuk mencampur warna) Properties & Action Panel; untuk mengatur atribut objek & script action

Gb. 2. Tampilan antar-muka program M. Flash dan bagian-bagiannya

A. Mengatur Atribut Stage/Layar Kerja Untuk mulai bekerja, bisa diatur terlebih dulu beberapa atribut dari stage, seperti ukuran, warna background, frame rate, dan lain-lain. Untuk itu bisa klik menu

Modify Document, atau klik parameter Size pada Properties Panel.

Ukuran Layar dalam satuan pixels

Warna Background

Frame rate / kecepatan animasi dalam satuan frames per second

Gb. 3. Document Properties

Parameter Dimensions dipakai untuk mengatur ukuran layar dalam satuan resolusi layar yaitu pixels. Sebagai acuan, resolusi layar monitor saat ini berkisar antara 800 x 600 pixels sampai 1024 x 768 pixels.
Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Parameter Frame rate dipakai untuk mengatur kecepatan animasi dalam satuan

frames per second (fps). Sebagai acuan, tampilan video di layar TV menggunakan
kecepatan sekitar 25 sampai 30 fps. B. Teknik Animasi dengan M. Flash Animasi berasal dari bahasa Yunani kuno anima yang berarti membuat sesuatu menjadi seolah-oleh hidup. Dalam pembahasan di sini, animasi adalah susunan beberapa (baca: banyak) frame gambar yang diperlihatkan secara simultan dalam sebuah layar dengan kecepatan tertentu, sehingga memunculkan kesan gerak pada benak pemirsanya. Teknik animasi yang berkembang banyak jenisnya. Film kartun seperti Doraemon,

Donald Duck, dll. dibuat dengan teknik gambar cell (Cell Animation). Film Nightmare before Christmast atau Chicken Run dibuat dengan teknik Stop motion menggunakan
boneka dari tanah liat. Film Final Fantasy dibuat full animasi 3 D dengan komputer. Ada beberapa istilah yang sering dipakai dalam pembuatan animasi, antara lain: 1. Frame, merupakan potongan gambar diam. 2. Key framing, susunan dan urutan linier sejumlah frame dalam timeline. 3. Timeline, susunan sejumlah key frame menurut durasi dan kecepatan tertentu. 4. Frame rate / kecepatan, menunjukkan kecepatan frame yang dimainkan dan diukur dalam satuan fps (frames per second). 5. Key pose, posisi kunci dari sebuah key frame. 6. In between, posisi antara antar 2 key pose.

Keyframe Frame Frame Frame Frame Frame Frame

Timeline Frame rate

Keypose I
Gb. 4. Bagan animasi
Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Inbetween

Keypose II

Teknik animasi dengan M. Flash sendiri bisa dikelompokkan menjadi 3 kelompok: 1. Animasi frame by frame; 2. Animasi Tweening; 3. Animasi dengan Scripting; Pada modul ini hanya akan dibahas teknik animasi frame by frame dan teknik animasi tweening. Teknik animasi frame by frame dilakukan dengan cara menggambar atau menempatkan objek yang berbeda pada frame yang berbeda. Jumlah frame yang dipakai akan menentukan aspek kehalusan animasi dan durasi animasi. Animasi dengan kecepatan 25 fps sepanjang 15 menit akan memerlukan jumlah frame kurang lebih sekitar (15 x 60 detik) x 25 frame = 22500 frame. Sebagai latihan bisa dibuat animasi seekor cacing yang bergerak dari kiri layar menuju tepi layar sebelah kanan dengan menggunakan M. Flash berikut: 1. Buat file baru dengan klik menu File New, dan pada kotak dialog New

document pilih Flash document kemudian klik OK.

2. Atur ukuran stage dan kecepatan animasi dengan cara klik menu Modify

Document. Pada kotak dialog Document properties atur parameter Dimensions menjadi 320 x 240 pixels dan Frame rate pada 12 fps. Klik OK.
3. Tekan tombol Ctrl dan angka 2 pada keyboard agar tampilan stage mendekat (zoom in). 4. Klik Brush tool dan atur ukuran mata kuas dengan klik Brush size dari Tool box.

serta pilih warna cat dengan klik Fill color 5. Klik frame nomer 1 pada Timeline.

Frame nomer 1
Gb. 5. Timeline

6. Drag mouse di atas stage pada tepi sebelah kiri untuk menggambar bentuk cacing pada frame nomer 1.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Gb. 6. Bentuk cacing pada frame 1

7. Klik frame nomer 2 dan klik menu Insert Timeline Blank keyframe (atau cukup tekan tombol F7) untuk menambahkan satu buah frame kosong sebagai tempat menggabar bentuk dan posisi objek cacing selanjutnya. (Catatan: agar gambar objek cacing pada frame sebelumnya bisa terlihat, klik tombol Onion skin yang terdapat di bagian bawah

Timeline). Kemudian, gambar objek cacing di frame nomer 2 dengan posisi

sedikit lebih ke kanan dari objek cacing pada frame sebelumnya.

objek cacing pada frame 2

Gb. 7. Bentuk cacing pada frame 2

8. Ulangi langkah nomer 7 di atas untuk frame-frame selanjutnya sehingga membentuk keseluruhan animasi gerak cacing dari kiri layar menuju kanan layar. Sebagai catatan, jika ingin menganimasikan gerakan tersebut selama 1 detik, maka harus disediakan 12 frame gambar objek cacing tadi.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Gb. 8. Satu detik animasi dengan 12 frame gambar

9. Tekan tombol Enter untuk melihat animasi. 10. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi. Sementara itu, teknik animasi tweening dilakukan dengan cara membuat beberapa

keyframe sebagai frame-frame kunci. Gambar objek pada frame inbetween secara
otomatis akan diselesaikan oleh M. Flash. Sebagai latihan bisa dibuat animasi bola jatuah dengan menggunakan M. Flash berikut: 1. Buat file baru dengan klik menu File New, dan pada kotak dialog New

document pilih Flash document kemudian klik OK.

2. Atur ukuran stage dan kecepatan animasi dengan cara klik menu Modify

Document. Pada kotak dialog Document properties atur parameter Dimensions menjadi 320 x 240 pixels dan Frame rate pada 12 fps. Klik OK.
3. Tekan tombol Ctrl dan angka 2 pada keyboard agar tampilan stage mendekat (zoom in). 4. Klik Oval tool pada Tool box untuk menggambar lingkaran (bola).

5. Klik frame nomer 1 pada Timeline. 6. Drag mouse di atas stage pada tepi sebelah kiri atas untuk menggambar bentuk bola pada frame nomer 1. 7. Klik bentuk bola dengan Selection tool untuk menyeleksinya.

8. Ubah warna bola mejadi gradasi Radial dengan menggunakan panel Color

mixer dan geser pusat gradasi dengan Gradient transform tool

Gb. 9. Panel Color mixer

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

9. Misalkan pada 1 detik yang pertama bola jatuh menyentuh dasar layar. Untuk itu, klik frame 12 dan klik menu Insert Timeline Frame (F5), sehingga muncul blok frame dari frame 1 sampai frame 12. 10. Klik menu Insert Timeline Create motion tween. 11. Klik frame terakhir (frame 12) dan klik menu Insert Timeline

Keyframe (F6) sehingga muncul 2 tanda keyframe (tanda titik pada frame
1 dan frame 12) dan sebuah garis panah dari frame 2 sampai frame 11 (frame inbetween). 12. Klik frame terakhir (frame 12) dan geser objek bola ke sisi bawah layar.

Keyframe I

inbetween

Keyframe II

Gb. 10. Motion tween

13. Klik frame 13 dan tekan tombol F6 untuk menambah keyframe baru. 14. Klik Free transform tool pada Tool box dan ubah ukuran bola

sehingga terlihat seolah gepeng karena membentur dasar layar. 15. Klik frame 18 dan tekan tombol F6 untuk menambah keyframe baru. Kemudian, geser objek bola menyerong ke kanan atas dan kembalikan ke benuk semula dengan Free transform tool. Dengan Free transform tool yang sama putar objek bola ke kiri untuk menganimasikan gerakan bola melenting sambil berputar. 16. Ulangi langkah yang sama untuk keyframe selanjutnya pada frame 23, 26, 29, dan 36.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Gb. 11. Keyframe pada frame 13, 18, dan 36

17. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi. 18. Seleksi objek bola pada frame 13 dan ubah parameter Color pada panel

Properties menjadi Tint. Kemudian, ubah menjadi warna lain.

Gb. 12. Parameter Color = Tint pada panel Properties

19. Ulangi langkah 18 untuk objek bola pada frame 18, 23, dan 36 sehingga pada tiap keyframe tersebut objek bola berganti warna. 20. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi. Dari latihan ini bisa disimpulkan bahwa Tween dapat menganimasikan gerakan pindah lokasi, perubahan ukuran, gerakan berputar, dan perubahan warna. Selain itu

Tween dapat juga menganimasikan perubahan bentuk seperti berikut:

1. Buat file baru dengan klik menu File New, dan pada kotak dialog New

document pilih Flash document kemudian klik OK.

2. Klik Pencil tool pada Tool box.

3. Klik frame nomer 1 pada Timeline. 4. Dengan Pencil Tool, drag mouse di atas stage pada tepi sebelah kiri untuk menggambar bentuk kurva bebas tertutup pada frame nomer 1. 5. Klik Paint Bucket tool kurva tadi. pada Tool box, dan tuangkan warna di dalam

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

Gb. 13. Kurva bebas pada frame 1

6. Misalkan selama 1 detik kurva tadi akan dianimasikan berubah menjadi bentuk lain. Untuk itu, klik frame 12 dan klik menu Insert Timeline

Frame (F5), sehingga muncul blok frame dari frame 1 sampai frame 12.
7. Ubah parameter Tween pada panel Properties menjadi Shape.

Gb. 14. Parameter Tween = Shape pada panel Properties

8. Klik frame 12, dan tekan tombol F6 untuk menambahkan keyframe baru. 9. Drag mouse dengan Pencil tool di atas stage pada tepi sebelah kanan untuk menggambar bentuk kurva bebas tertutup yang lain pada frame nomer 12. Tuangkan warna lain pada kurva baru dengan Paint Bucket tool. Kemudian, hapus bentuk kurva pertama pada frame 12.

Gb. 15. Animasi perubahan bentuk / Shape

10. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi. C. Animasi dengan Movie clip dan Animasi Gerak Mengikuti Lintasan

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

10

Teknik animasi lain yang bisa dicoba di M. Flash adalah animasi dengan Movie clip

symbol. Dengan teknik ini beberapa animasi bisa dijalankan dalam animasi yang lain
dalam bentuk Movie clip: 1. Buat file baru dengan klik menu File New, dan pada kotak dialog New

document pilih Flash document kemudian klik OK.

2. Klik menu Insert New symbol atau tekan tombol Ctrl F8. Pada kotak dialog Create New Symbol ketik kupu-kupu pada parameter Name, dan klik pilihan Movie clip pada parameter Type, kemudian klik OK. Langkah ini berfungsi untuk membuat objek simbol yang akan tersimpan dalam panel

Library. Untuk menampilkan Library bisa lewat menu Window Library

atau tekan tombol Ctrl L. Langkah ini juga berfungsi untuk memunculkan

stage khusus untuk membuat dan mengedit objek simbol yang akan
ditambahkan.

Gb. 16. Kotak dialog Create New Symbol dan panel Library

3. Klik Brush tool

dan atur ukuran mata kuas dengan klik Brush size dari Tool box.

serta pilih warna cat dengan klik Fill color

4. Klik frame 1 pada Layer 1. Di atas stage / layar simbol yang ada gambar bentuk kepala, antena, dan badan seekor kupu-kupu tepat di tengah stage. 5. Tambahkan Layer baru dengan cara klik tombol Insert Layer bagian bawah dari panel Time line. Dan, klik frame 1 pada Layer 2. pada

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

11

6. Dengan Brush tool yang sama, gambar bentuk sayap kupu-kupu. (Catatan: Fasilitas Layer berfungsi untuk memisah gambar pada lapisan-lapisan yang terpisah sehingga mudah diedit kelak).

Layer 2memuat gambar sayap kupu-kupu Layer 1 memuat gambar badan kupu-kupu

Gb. 17. Objek simbol Movie clip kupu-kupu dan pemisahan objek pada Layer

7. Klik frame 2 pada Layer 1 dan tekan tombol F6 untuk membuat Key frame baru untuk gambar badan kupu-kupu. 8. Klik frame 2 pada Layer 2 dan tekan tombol F6 untuk membuat Key frame baru untuk gambar sayap kupu-kupu. 9. Klik Free transform tool pada Tool box dan ubah ukuran gambar sayap

pada frame 2 sehingga terlihat seolah melipat karena dikepakkan. Langkah ini untuk mebuat animasi kepakan sayap. Tekan tombol Enter beberapa kali untuk mengetes hasilnya.

Stage Symbol Stage Scene 1

Gb. 18. Animasi kepakan sayap pada layar simbol

10. Klik Tab Scene 1 untuk kembali ke stage pada scene 1.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

12

11. Drag simbol movie clip kupu-kupu dari panel Library masuk ke dalam stage pada scene 1. Dengan Free Transform tool, ubah ukuran objek kupu-kupu seperlunya. 12. Klik tombol Add motion guide yang terdapat pada bagian bawah dari

panel Time line untuk menambahkan layer khusus = guide layer. 13. Klik frame 1 pada guide layer dan gambar lintasan terbang kupu-kupu dengan menggunakan Pencil tool. Gambar lintasan yang ada akan memandu gerakan dalam animasi kupu-kupu selanjutnya. Gambar lintasan ini tidak akan terlihat ketika animasi yang sedang dikerjakan sudah disimpan dalam bentuk file Flash Movie (*.swf).

guide layer

lintasan gerak

Gb. 19. Objek kupu-kupu dan lintasan gerak pada guide layer

14. Klik frame 24 pada Layer 1 dan tekan tombol F5 untuk menambahkan

frame baru sampai frame 24 untuk objek kupu-kupu.

15. Klik frame 24 pada guide layer dan tekan tombol F5 untuk menambahkan

frame baru sampai frame 24 untuk objek lintasan gerak.

16. Klik kembali frame 24 pada layer 1 dan ubah mejadi motion tween lewat menu Insert Time line Create motion tween, kemudian tekan tombol F6 untuk menambahkan keyframe baru. 17. Klik kembali frame 1 pada layer 1 dan geser objek kupu-kupu sehingga melekat / menempel pada salah satu ujung lintasan. 18. Klik kembali frame 24 pada layer 1 dan geser objek kupu-kupu sehingga melekat / menempel pada ujung lintasan yang lain.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

13

Gb. 20. Animasi objek kupu-kupu bergerak mengikuti lintasan gerak

19. Klik kembali frame 1 pada layer 1 dan aktifkan pilihan Orient to path pada panel Properties.

Gb. 21. Orient to path....

20. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi. D. Masking

Masking

adalah suatu cara untuk menyembunyikan bagian gambar tertentu,

sehingga hanya sebagian yang lain yang akan terlihat. Latihan berikut adalah contoh untuk membuat animasi dengan masking: 1. Buat file baru dengan klik menu File New, dan pada kotak dialog New

document pilih Flash document kemudian klik OK.

3. Klik frame 1 pada layer 1. 3. Tambahkan gambar bitmap dari file yang ada melalui menu File Import

Import to stage. Dari kotak dialog Import yang muncul, pilih sebuah file bitmap dan klik Open.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

14

4. Tambahkan Layer baru dengan cara klik tombol Insert Layer baru saja ditambahkan. 5. Klik Oval tool binokular:

pada

bagian bawah dari panel Time line. Dan, klik frame 1 pada Layer 2 yang

pada Tool box dan gambar 2 lingkaran dan susun

sedemikian rupa sehingga tampak seperti viewfinder pada sebuah teropong

6. Klik frame 24 pada layer 1 dan tekan tombol F5 untuk menambah sejumlah

frame baru.
7. Klik juga frame 24 pada layer 2 dan tekan tombol F5 untuk menambah sejumlah frame baru. 8. Ubah frame pada layer 2 yang memuat gambar binokular tadi menjadi

motion tween, dan animasikan sedemikian rupa sehingga gambar binokular

bergerak bolak-balik ke kiri dan ke kanan. 9. Klik Layer 2 dengan tombol kanan mouse. Dari dropdown menu yang ada klik perintah mask. Perintah ini menyebabkan bagian gambar bitmap yang ada di layer 1 sebagian akan disembunyikan kecuali bagian gambar yang berada tepat di bawah objek lingkaran pada layer 2 di atasnya.

Gb. 22. Perintah Masking dan hasilnya

10. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi.

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

15

E. Menambahkan Elemen Audio Elemen audio bisa ditambahkan pula ke dalam Timeline. Contoh berikut adalah pengaplikasian elemen audio dalam timeline: 1. Gunakan latihan Masking di atas. 2. Masukkan file audio lewat menu File Import Import to Stage. 3. Klik layer 2 di sebelah atas dan klik tombol Insert Layer pada layer baru yang baru saja ditambahkan. 4. Dari panel Properties yang ada pilih file audio yang sudah diimport tadi melalui parameter Sound. dan klik frame 1

Gb. 23. Parameter Sound pada panel Properties 5. Klik menu Control Test movie untuk mengetes animasi yang sudah jadi.

F. Export Movie Animasi yang sudah selesai dikerjakan dan diedit di M. Flash kemudian bisa disimpan menjadi file movie dengan perintah dari menu File Export Export Movie. Ada banyak jenis file movie yang bisa digunakan (swf, avi, mov, gif, dan lain-lain).

Gb. 24. Macam-macam file movie yang bisa dihasilkan

Modul Pelatihan - Teknik Animasi dengan M. Flash Biro Pelatihan ADVY

16