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

Halaman penutup menampilkan informasi pembuat. Untuk memberi gambaran dalam pembuatan proyek. proyek animasi ini dibuat sangat sederhana. proyek animasi yang akan dihasilkan adalah pembelajaran mengenai cara kerja mesin 4 tak. Secara garis besar. Agar terkesan lebih menarik di awal akan diberikan halaman pengantar sebelum masuk ke animasi utama. dan penutup yang masing-masing terdiri dari satu halaman. spesifikasi proyek animasi mencakup: • • • Halaman awal yang menyajikan informasi deskriptif mengenai proyek. LATIHAN 1. Halaman isi berisi animasi utama yang menjelaskan cara kerja mesin. di mana hanya mencakup halaman awal. Desain hasil proyek animasi Untuk membatasi materi. PROJASTE Jurusan Teknik Elektro FT UM 57 . Proyek Animasi Pada pembahasan ini. kira-kira hasil yang diharapkan adalah seperti pada Gambar 1. Gambar 1. isi.Modul Animasi Flash D.

Langkah-langkah pembuatan halaman awal adalah sebagai berikut: 1. kemudian pilih file background. 6.jpg. pastikan Align/Distribute to Stage di panel Align sudah aktif. klik Open. Tambahkan layer baru dengan mengklik kanan Layer 1 dan memilih Insert Layer. Gambar 2. Sampai di sini. 7. Dalam posisi gambar masih terpilih. Susunan layer di dalam folder 5. Buat dokumen Flash baru. kemudian klik OK. Apabila panel Align belum aktif. gambar akan diposisikan di tengah stage. 3. Gambar 3. Drag Layer 1 ke layer folder Background sehingga akan terlihat sedikit menjorok. Susunan layer di dalam folder PROJASTE Jurusan Teknik Elektro FT UM 58 . Klik ganda Folder 1 dan rename menjadi Background. Pilih fill color dari palet warna dengan nilai #999999 dan Stroke color didisable. Membuat Halaman Awal Halaman awal merepresentasikan tampilan pertama yang menyajikan informasi deskriptif terkait animasi. Klik juga Align horizontal center dan Align vertical center. 8. 2. tambahkan layer folder dari menu Insert > Timeline > Layer Folder.Modul Animasi Flash 2. Perhatikan contohnya seperti Gambar 2. Impor file gambar background dengan menekan Ctrl+R. buat kotak menggunakan Rectangle Tool. ubah dimensi menjadi 800 x 600. Tekan Ctrl+J. Dalam kondisi Layer 2 aktif. Untuk memudahkan pengorganisasian layer. tekan Ctrl+K. 4.

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

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

Klik kanan Layer 8 dan pilih Insert Layer. 8. 9. Berikut langkah-langkah untuk mempersiapkan halaman isi: 1. 3. Membuat Halaman Animasi 1. Pembuatan halaman ini akan digabung dengan halaman utama karena merupakan satu kesatuan proyek. Tekan Ctrl+Enter untuk melihat hasilnya. Klik frame 150 (Layer 8). Perhatikan contohnya seperti Gambar 6. Aktifkan Selection Tool. Pindahkan kotak ke luar stage sebelah atas. 10. kemudian letakkan di sebelah kiri luar stage bagian atas. Klik frame 150 (Layer 8) dan tekan F6. kemudian klik kotak dan tekan F8 untuk mengonversi ke Movie clip.Modul Animasi Flash 3. 7. Klik frame 150 (Layer 8) dan tekan F6. yakni pembelajaran mengenai mesin 4 tak. 5. kemudian tekan F5. PROJASTE Jurusan Teknik Elektro FT UM 61 . Menambah layer folder Content 3. Klik tombol play untuk melihat reaksinya. Klik kanan frame antara 121-150 dan pilih Create Motion Tween. Gunakan Text Tool untuk membuat teks “Mesin 4 Tak”. 6. Tambahkan layer baru (Layer 8) di dalam layer folder Content. 2. Klik frame 150 dari Layer 1 dan 2. 4. Gambar 6. Klik frame 121 (Layer 8) dan tekan F6. Membuat Halaman Isi Halaman isi menyajikan materi utama animasi. kemudian buat kotak ukuran 800 x 400 dan letakkan untuk menutupi kotak berwarna agak terang. 2. Terlebih dahulu Insert Layer Folder dan beri nama Content.

Impor file animasi 4 tak. Setelah selesai memberikan teks keterangan. 7.gif ke library. 16. 5. 8. Tekan F8 pilih Movie clip. Membuat label judul 4. Intake or Induction” dan letakkan di stage bagian pojok kanan atas. Klik frame 190 (Layer 11) kemudian tekan F6. Seret gambar ke dalam stage bagian kiri. 9. Tambahkan layer baru (Layer 10) kemudian klik frame 170 dan tekan F6. 10. Lakukan dan selesaikan seperti pertemuan sebelumnya. Power 14 265 4. Klik kanan frame antara 170-190 (Layer 10) kemudian pilih Create Motion Tween. Klik frame 170 (Layer 9) kemudian tekan F6. Seret file animasi ke bagian kanan luar stage. Ulangi langkah 12-13 untuk Layer 12 s/d Layer 14 dengan ketentuan sebagai berikut: Layer Keyframe Keterangan 12 215 2. tekan F5. Buat layer baru sebanyak 4 buah (Layer 11 s/d Layer 14) 12. Gunakan Text Tool untuk membuat teks “1. Klik frame 190 (layer 10) kemudian tekan F6. Seret teks ke sebelah pojok kiri atas stage. 14. Ubah nilai Color menjadi Alpha dan isikan 20%. 13. PROJASTE Jurusan Teknik Elektro FT UM 62 . 6. 11. Ubah nilai Alpha menjadi 100%.Modul Animasi Flash Gambar 7. Compression 13 240 3. Exhaust 15. kemudian OK. klik frame 290 untuk Layer 9 s/d Layer 14.

Masih melanjutkan proyek sebelumnya. 2. Klik Align horizontal center di panel Align untuk mengatur teks rata tengah. PROJASTE Jurusan Teknik Elektro FT UM 63 . Klik frame 320 (layer 15) kemudian tekan F6. Gunakan Text Tool untuk membuat teks berikut satu per satu (misal ada empat teks): Pengarah Cerita Tim Copyright 2010 Universitas Negeri Malang 5. buat layer folder dan beri nama Penutup. Halaman ini nantinya berisi informasi-informasi penutup yang diiringi animasi. Sebagai gambaran. Membuat Halaman Penutup Tahap ketiga dari proyek animasi sederhana ini adalah membuat halaman penutup. 4. 6. Tambahkan layer baru di folder Penutup. Tekan Ctrl+Enter untuk melihat hasilnya. klik frame 290 pada Layer 1 dan Layer 2. Menambahkan folder penutup 3. 4. animasi yang akan dihasilkan mengadopsi teks berjalan pada setiap akhir film. 18. Gambar 8. Seleksi semua teks dan letakkan di bawah luar stage. kemudian tekan F5. Agar background dan suara juga ikut ditampilkan.Modul Animasi Flash 17. Berikut langkah-langkah pembuatannya: 1.

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

Gambar 10. kita bisa melakukannya dari menu File > Publish. tentukan format keluaran yang akan dihasilkan. lokasi penyimpanan hasil akan diletakkan satu folder dengan proyek. Klik OK jika sudah mempublikasikan. Jika kita belum mengklik Publish. Normalnya. selesai atau Publish untuk langsung 4. Mengatur publikasi 3. Dari proyek yang sudah jadi. Hasil publikasi pada aplikasi web diperlihatkan seperti Gambar 11.Modul Animasi Flash 5. pastikan pengaturan sudah disesuaikan dengan format luaran produk. 1. 2. Mem-publish Animasi Tahap akhir dari proyek animasi sederhana ini adalah mempublikasikan hasil ke beberapa format media. Sebelum melakukan publikasi. Pada kotak dialog Publish Settings. PROJASTE Jurusan Teknik Elektro FT UM 65 . 5. pilih menu File > Publish Settings.

Publikasi ke aplikasi web PROJASTE Jurusan Teknik Elektro FT UM 66 .Modul Animasi Flash Gambar 11.

Publikasikan hasil animasi ke dalam CD autorun PROJASTE Jurusan Teknik Elektro FT UM 67 . TUGAS 1. Animasi harus melibatkan semua media (gambar.Modul Animasi Flash E. Buat proyek animasi sesuai dengan bidang keilmuan (matakuliah) yang akan diampu. 2. dan animasi) dan menggunakan struktur direktori layer. teks. suara.

Sign up to vote on this title
UsefulNot useful