Modul Animasi Flash

MODUL V PROYEK ANIMASI

A. TUJUAN Memahami teknik pembuatan proyek animasi. Mampu memanfaatkan dan memadukan teknik-teknik multimedia ke dalam animasi. Memahami tahap publikasi hasil animasi.

B. PETUNJUK Awali setiap aktivitas dengan do'a, semoga diberikan kemudahan dan berkah. Pahami tujuan, dasar teori, dan latihan-latihan dengan baik dan benar. Tanyakan kepada instruktur apabila ada hal-hal yang kurang jelas.

C. DASAR TEORI 1. Proyek Animasi Untuk mengerjakan proyek animasi, ada banyak perangkat lunak bantu yang bisa dipergunakan. Masing-masing perangkat lunak tentunya memiliki kelebihan dan kekurangan. Adapun strategi dalam pemilihan perangkat lunak adalah dengan menyesuaikan sesuai kebutuhan. Salah satu perangkat lunak bantu yang dapat dimanfaatkan untuk menghasilkan aplikasi animasi adalah Adobe Flash. Bagian ini secara khusus akan menguraikan tahap-tahap pembuatan proyek animasi menggunakan Flash CS 3 (atau bisa juga Flash 8). Pada prinsipnya, pembuatan proyek animasi ini melibatkan sejumlah teknik yang telah dibahas di materi-materi sebelumnya, meliputi gambar, teks, animasi, dan suara. Bagaimanapun, kasus yang diulas masih sangat sederhana, namun demikian diharapkan dapat dikembangkan lebih lanjut. Untuk melengkapi materi proyek animasi ini, juga diuraikan mengenai teknik pengelolaan hasil animasi. Beberapa langkah yang lazim dilakukan saat proyek akhir misalnya konversi ke format tertentu (swf, avi, gif) dan pendistribusian ke CD.

PROJASTE Jurusan Teknik Elektro FT UM

56

Modul Animasi Flash

D. LATIHAN 1. Proyek Animasi Pada pembahasan ini, proyek animasi yang akan dihasilkan adalah pembelajaran mengenai cara kerja mesin 4 tak. Agar terkesan lebih menarik di awal akan diberikan halaman pengantar sebelum masuk ke animasi utama. Secara garis besar, spesifikasi proyek animasi mencakup: Halaman awal yang menyajikan informasi deskriptif mengenai proyek. Halaman isi berisi animasi utama yang menjelaskan cara kerja mesin. Halaman penutup menampilkan informasi pembuat.

Untuk memberi gambaran dalam pembuatan proyek, kira-kira hasil yang diharapkan adalah seperti pada Gambar 1.

Gambar 1. Desain hasil proyek animasi

Untuk membatasi materi, proyek animasi ini dibuat sangat sederhana, di mana hanya mencakup halaman awal, isi, dan penutup yang masing-masing terdiri dari satu halaman.

PROJASTE Jurusan Teknik Elektro FT UM

57

Modul Animasi Flash

2. Membuat Halaman Awal Halaman awal merepresentasikan tampilan pertama yang menyajikan informasi deskriptif terkait animasi. Langkah-langkah pembuatan halaman awal adalah sebagai berikut: 1. Buat dokumen Flash baru. 2. Tekan Ctrl+J, ubah dimensi menjadi 800 x 600, kemudian klik OK. 3. Untuk memudahkan pengorganisasian layer, tambahkan layer folder dari menu Insert > Timeline > Layer Folder. Klik ganda Folder 1 dan rename menjadi Background. 4. Drag Layer 1 ke layer folder Background sehingga akan terlihat sedikit menjorok. Perhatikan contohnya seperti Gambar 2.

Gambar 2. Susunan layer di dalam folder

5. Impor file gambar background dengan menekan Ctrl+R, kemudian pilih file background.jpg, klik Open. 6. Apabila panel Align belum aktif, tekan Ctrl+K. Dalam posisi gambar masih terpilih, pastikan Align/Distribute to Stage di panel Align sudah aktif. Klik juga Align horizontal center dan Align vertical center. Sampai di sini, gambar akan diposisikan di tengah stage. 7. Tambahkan layer baru dengan mengklik kanan Layer 1 dan memilih Insert Layer. 8. Dalam kondisi Layer 2 aktif, buat kotak menggunakan Rectangle Tool. Pilih fill color dari palet warna dengan nilai #999999 dan Stroke color didisable.

Gambar 3. Susunan layer di dalam folderPROJASTE Jurusan Teknik Elektro FT UM58

Modul Animasi Flash

9. Buat kotak di stage dengan posisi sembarang, kemudian klik Selection Tool dan klik kotak untuk menyeleksi. 10. Ubah nilai width dan height kotak menjadi 800 dan 600, kemudian klik Align horizontal center dan Align vertical center. 11. Tekan F8 dan pilih Movie clip, klik OK. 12. Ubah nilai Color di panel Properties menjadi Alpha dan isikan nilai 95%. Sampai di sini kita sudah memiliki background transparan untuk animasi. 13. Klik kanan Layer 2 dan pilih Insert Layer untuk menambahkan Layer 3. 14. Buat kotak berukuran 800 x 400 pixel dan beri warna sedikit lebih terang dari background, kemudian letakkan agak jauh di sebelah atas stage. 15. Tekan F8 untuk mengonversi kotak ke Movie clip, kemudian beri nilai Alpha 90%. 16. Klik frame 40 (Layer 3) dan tekan F6. Geser kotak hingga menempati 2/3 bagian stage dengan posisi rata atas. 17. Klik kanan frame 1-40 (Layer 3) kemudian pilih Create Motion Tween. 18. Klik kanan Layer 3 dan pilih Insert Layer, kemudian tekan F6 di frame 40 (Layer 4). 19. Gunakan Text Tool (T) untuk membuat teks Cara Kerja dan letakkan di sebelah kiri stage. 20. Klik frame 80 (Layer 4) dan tekan F6, kemudian klik Align horizontal center di panel Align. Klik kanan frame 40-80 (Layer 4) dan pilih Create Motion Tween. 21. Klik kanan Layer 4 dan pilih Insert Layer, kemudian tekan F6 di frame 40 (Layer 5). 22. Gunakan Text Tool (T) untuk membuat teks Mesin 4 Tak dan letakkan di sebelah kanan stage. Atur jaraknya ke stage agar seimbang dengan teks Cara Kerja.

Gambar 4. Susunan layer di dalam folderPROJASTE Jurusan Teknik Elektro FT UM59

Modul Animasi Flash

23. Klik frame 80 (Layer 5) dan tekan F6, kemudian klik Align horizontal center di panel Align. Klik kanan frame 40-80 (Layer 4) dan pilih Create Motion Tween. 24. Klik kanan Layer 5 dan pilih Insert Layer, kemudian tekan F6 di frame 80 (Layer 6). 25. Buat teks Oleh: Tim dan letakkan persis di bawah stage. 26. Aktifkan Selection Tool, klik teks, kemudian klik Align horizontal center. 27. Tekan F8 dan konversi teks ke Movie clip. 28. Klik frame 110 (Layer 6) dan tekan F6, kemudian seret teks Oleh: Tim ke dalam stage bagian bawah (sesuaikan posisinya). 29. Klik kanan frame 80-110 (Layer 6) kemudian pilih Create Motion Tween. 30. Klik kanan Layer 6 dan pilih Insert Layer, kemudian tekan F6 di frame 120 (Layer 7). 31. Tambahkan button play dari menu Window > Common Libraries > Button. Letakkan di stage bagian tengah bawah, di bawah teks Oleh: Tim. 32. Impor file romantic.mp3 ke library. 33. Klik frame 1 (Layer 1), kemudian seret file romantic.mp3 ke stage. 34. Berturut-turut klik frame 120 dari Layer 1 s/d 6 kemudian tekan F5 untuk menambahkan frame. 35. Klik frame 120 (Layer 7) kemudian tekan F9 dan isikan kode berikut: stop(); 36. Tekan Ctrl+Enter untuk melihat hasilnya.

Gambar 5. Hasil pembuatan halaman awalPROJASTE Jurusan Teknik Elektro FT UM60

Modul Animasi Flash

3. Membuat Halaman Isi Halaman isi menyajikan materi utama animasi, yakni pembelajaran mengenai mesin 4 tak. Pembuatan halaman ini akan digabung dengan halaman utama karena merupakan satu kesatuan proyek. Berikut langkah-langkah untuk mempersiapkan halaman isi: 1. Terlebih dahulu Insert Layer Folder dan beri nama Content. 2. Tambahkan layer baru (Layer 8) di dalam layer folder Content. Perhatikan contohnya seperti Gambar 6.

Gambar 6. Menambah layer folder Content

3. Klik frame 121 (Layer 8) dan tekan F6. 4. Klik frame 150 (Layer 8), kemudian buat kotak ukuran 800 x 400 dan letakkan untuk menutupi kotak berwarna agak terang. 5. Aktifkan Selection Tool, kemudian klik kotak dan tekan F8 untuk mengonversi ke Movie clip. 6. Klik frame 150 (Layer 8) dan tekan F6. Pindahkan kotak ke luar stage sebelah atas. 7. Klik kanan frame antara 121-150 dan pilih Create Motion Tween. 8. Klik frame 150 dari Layer 1 dan 2, kemudian tekan F5. 9. Tekan Ctrl+Enter untuk melihat hasilnya. 10. Klik tombol play untuk melihat reaksinya.

Membuat Halaman Animasi 1. Klik kanan Layer 8 dan pilih Insert Layer. 2. Klik frame 150 (Layer 8) dan tekan F6. 3. Gunakan Text Tool untuk membuat teks Mesin 4 Tak, kemudian letakkan di sebelah kiri luar stage bagian atas.

PROJASTE Jurusan Teknik Elektro FT UM

61

Modul Animasi Flash

Gambar 7. Membuat label judul

4. Klik frame 170 (Layer 9) kemudian tekan F6. Seret teks ke sebelah pojok kiri atas stage. 5. Tambahkan layer baru (Layer 10) kemudian klik frame 170 dan tekan F6. 6. Impor file animasi 4 tak.gif ke library. 7. Seret file animasi ke bagian kanan luar stage. Tekan F8 pilih Movie clip, kemudian OK. 8. Ubah nilai Color menjadi Alpha dan isikan 20%. 9. Klik frame 190 (layer 10) kemudian tekan F6. Seret gambar ke dalam stage bagian kiri. Ubah nilai Alpha menjadi 100%. 10. Klik kanan frame antara 170-190 (Layer 10) kemudian pilih Create Motion Tween. 11. Buat layer baru sebanyak 4 buah (Layer 11 s/d Layer 14) 12. Klik frame 190 (Layer 11) kemudian tekan F6. 13. Gunakan Text Tool untuk membuat teks 1. Intake or Induction dan letakkan di stage bagian pojok kanan atas. 14. Ulangi langkah 12-13 untuk Layer 12 s/d Layer 14 dengan ketentuan sebagai berikut:Layer Keyframe Keterangan 12 215 2. Compression 13 240 3. Power 14 265 4. Exhaust

15. Lakukan dan selesaikan seperti pertemuan sebelumnya. 16. Setelah selesai memberikan teks keterangan, klik frame 290 untuk Layer 9 s/d Layer 14, tekan F5.PROJASTE Jurusan Teknik Elektro FT UM62

Modul Animasi Flash

17. Agar background dan suara juga ikut ditampilkan, klik frame 290 pada Layer 1 dan Layer 2, kemudian tekan F5. 18. Tekan Ctrl+Enter untuk melihat hasilnya.

4. Membuat Halaman Penutup Tahap ketiga dari proyek animasi sederhana ini adalah membuat halaman penutup. Halaman ini nantinya berisi informasi-informasi penutup yang diiringi animasi. Sebagai gambaran, animasi yang akan dihasilkan mengadopsi teks berjalan pada setiap akhir film. Berikut langkah-langkah pembuatannya: 1. Masih melanjutkan proyek sebelumnya, buat layer folder dan beri nama Penutup. 2. Tambahkan layer baru di folder Penutup.

Gambar 8. Menambahkan folder penutup

3. Klik frame 320 (layer 15) kemudian tekan F6. 4. Gunakan Text Tool untuk membuat teks berikut satu per satu (misal ada empat teks): Pengarah Cerita Tim Copyright 2010 Universitas Negeri Malang 5. Seleksi semua teks dan letakkan di bawah luar stage. 6. Klik Align horizontal center di panel Align untuk mengatur teks rata tengah.

PROJASTE Jurusan Teknik Elektro FT UM

63

Modul Animasi Flash

Gambar 9. Teks penutup

7. Dalam keadaan teks masih terseleksi, tekan F8 dan pilih Movie clip. 8. Klik frame 400 kemudian tekan F6. 9. Pindahkan teks secara vertikal ke atas luar stage. 10. Klik kanan Layer 15 kemudian pilih Insert Layer. 11. Pada frame 400 (Layer 16), tekan F6. 12. Tambahkan teks Terima Kasih menggunakan Text Tool. 13. Aktifkan Selection Tool, kemudian klik teks. 14. Pada panel Align, klik Align horizontal center dan Align vertical center. 15. Tekan F8 untuk mengonversi ke Movie clip. 16. Klik frame 440 (layer 16) kemudian tekan F6. 17. Klik Tool Selection, kemudian berikan nilai Alpha pada bagian Color dan tetapkan 0%. 18. Klik kanan frame antara 400-440 (Layer 16) pilih Create Motion Tween. 19. Klik frame 440 pada Layer 1 dan Layer 2 kemudian tekan F5. 20. Tekan Ctrl+Enter untuk melihat hasilnya.

PROJASTE Jurusan Teknik Elektro FT UM

64

Modul Animasi Flash

5. Mem-publish Animasi Tahap akhir dari proyek animasi sederhana ini adalah mempublikasikan hasil ke beberapa format media. Sebelum melakukan publikasi, pastikan pengaturan sudah disesuaikan dengan format luaran produk. 1. Dari proyek yang sudah jadi, pilih menu File > Publish Settings. 2. Pada kotak dialog Publish Settings, tentukan format keluaran yang akan dihasilkan.

Gambar 10. Mengatur publikasi

3. Klik OK jika sudah mempublikasikan.

selesai

atau

Publish

untuk

langsung

4. Jika kita belum mengklik Publish, kita bisa melakukannya dari menu File > Publish. Normalnya, lokasi penyimpanan hasil akan diletakkan satu folder dengan proyek. 5. Hasil publikasi pada aplikasi web diperlihatkan seperti Gambar 11.

PROJASTE Jurusan Teknik Elektro FT UM

65

Modul Animasi Flash

Gambar 11. Publikasi ke aplikasi web

PROJASTE Jurusan Teknik Elektro FT UM

66

Modul Animasi Flash

E. TUGAS 1. Buat proyek animasi sesuai dengan bidang keilmuan (matakuliah) yang akan diampu. Animasi harus melibatkan semua media (gambar, teks, suara, dan animasi) dan menggunakan struktur direktori layer. 2. Publikasikan hasil animasi ke dalam CD autorun

PROJASTE Jurusan Teknik Elektro FT UM

67