5.1.PengolahAnimasi 2D (Flash)
Flash menyediakan IDE (Integrated Development Environment) atau lingkungan pengembangan terintegrasi yang cukup lengkap. Di lingkungan inilah para developer Flash bekerja untuk menghasilkan beragam aplikasi. Disini pula nantinya kita akan bekerja untuk menghasilkan objek-objek dan menambahkan animasi yang variatif.Secara default, Flash akan menampilkan Start Page setiap kali ia mulai dijalankan. Tampilan Start Page berisi item yang baru dibuka dan menu untuk menciptakan projek baru.
Untuk memulai masuk ke IDE utama, menu yang dipilih adalah Flash flash document di bagian Create New. Pilihan ini akan
memunculkan tampilan IDE Flash beserta komponen-komponen pendukungnya.
Tools panel
Bagian yang normalnya terletak di sebelah kiri ini menyediakan sejumlah kakas (tool) yang dikelompokkan sesuai kegunaannya.
Stage
Stage (atau biasa disebut area kerja) merupakan bidang luas berwarna putih yang terletak di bagian tengah IDE. Bagian ini nantinya akan digunakan untuk meletakkan komponen-komponen animasi, misalnya button. Dalam konteks animasi, bagian ini merepresentasikan layar film.
Timeline STAGE Tools Panel Timeline Properties LAYER
Bagian yang berada di atas stage ini berfungsi untuk mengatur konten dan animasi saat bekerja menggunakan layer dan frame.
Properties
Window ini memuat pengaturan-pengaturan umum, filter, dan parameter- parameter terkait dokumen (stage) dan komponen-komponen di dalamnya.
5.1.1. Dasar-dasar pembuatan animasi 2D
Penggunaan Tools untuk pembuatan animasi 2D :
Frame: pada dasarnya, setiap gambar disebut sebagai sebuah frame. Di Flash, tiap frame—yang dinotasikan menggunakan kotak—di timeline merepresentasikan frame dari sebuah film. Keyframe: keyframe sederhananya adalah sebuah frame yang ditetapkan untuk dimunculkan. Bisa juga dikatakan, setiap frame merupakan keyframe. Di Flash, animasi dapat diciptakan melalui tiga pendekatan: frame-by-frame, tweening, dan timeline effect. Pendekatan pertama merupakan pendekatan konvensional, di mana animasi dilakukan per frame sehingga cukup rumit. Adapun di sini, akan dijelaskan teknik animasi tweening dan timeline effect.
Tweening : Teknik ini dilakukan dengan menciptakan awal dan akhir
frame, kemudian memberikan animasi di antara frame..
• Pembuatan Objek Lingkaran pada Toolbox ke dalam kanvas
- Drag frame1 sampai frame10 lalu klik kanan,kemudian pilih Create Motion Tween
- Geser posisi Objek Lingkaran
- Pindahkan posisi Objek Lingkaran ke bawah Lalu tekan Enter untuk menjalankan animasi
• Export format SWF ke AVI
- Pilih File pada Menu Bar, lalu pilih Export, Export Movie
- Pada kotak dialog Export Movie ganti lokasi Save In, isikan File Namedan ganti Save as type ke format AVI.
• Keying Effect
- Import animasi yang sudah dibuat dengan format AVI ke dalam
ProjectWindow
- Masukkan klip animasi ke dalam Timeline Window
- Buka tab Effect pada Project Window
- Video Effects pilih Keying lalu pilih efek RGB Difference Key
Kemudian sisipkan pada klip animasi
- Aktifkan tab Effects Control pada Source Monitor Window atur efek RGB Diiference Key
Pada pilihan Color pilih warna yang ingin dihapus, misalnya putih - Geser tombol pilihan Similarity sampai warna putih hilang
- Atur frame rate sebesar 24 fps atau sesuaikan dengan kebutuhan (frame rate digunakan untuk mengatur kecepatan animasi per detiknya) dan atur size nya (jika menginginkan tampilannya full screen, sesuaikan dengan ukuran windows pada laptop /PC)
- Buatlah objek rectangle tool pada timeline ke 1, atur fill color berwarna merah dan stroke color berwarna hitam, jangan lupa beri nama layer rectangle tool yang kita buat dengan nama ‘ktkmerah’ (untuk mengganti nama layer, double klik pada layer 1 dan ketikan namanya)
- Klik frame ke- 50 kemudian pilih F5 (F5 adalah shortcut yang digunakan untuk menyisipkan frame)
- Klik frame 25 kemudian pilih F6 (F6 adalah shortcut yang digunakan untuk menyisipkan keyframe) dan pindahkan lagi objeknya
- Klik Frame ke- 40 kemudian pilih F6 dan pindahkan lagi objek
- Pada menu insert pilih timeline create motion tween (motion tween digunakan untuk memberikan efek animasi agar terlihat lebih halus). Efek motion tween diberikan pada frame ke 1 dan ke 25
- Setelah itu hentikan pergerakan objek dengan memberikan action script pada frame ke 40 (gunakan shortcut F9 untuk membuka halaman action script) dengan script
stop ();kemudian tes hasilnya dengan menekan CTRL+ENTER pada keyboard
- Simpan dengan nama demo flash
• Menyisipkan teks dan gambar
- Buatlah layer baru, pilih insert layer dan beri nama ‘judul’ 1.
- Sisipkan teks berwarna biru pada frame ke 40, jangan lupa menekan F6 terlebih dahulu untuk memberikan keyframe pada frame ke-40 pada layer judul
- Beri efek perubahan warna pada judul dengan cara Klik frame ke- 45 kemudian pilih F6 dan ubah warna tulisan menjadi kuning
- Lakukan seperti langkah diatas pada frame ke 50 dengan perubahan warna menjadi hitam
- Tekan CTRL+ENTER, terlihat tidak terjadi perubahan warna pada teks, hal ini dikarenakan ada action script stop (); pada layer ktkmerah. Untuk menjalankannya, hapus terlebih dahulu action script tersebut dan pindahkan action script ke layer judul pada frame ke 50.
- Masukan gambar dengan cara pilih file import import to library (untuk memasukkan gambar ke library macromedia flash) pilih gambar yang diinginkan
Gambar yang telah dimasukkan dalam library
- Sebelum memasukkan gambar ke dalam stage, perhatikan letak layer. Letakkan layer pada layer judul dan pada frame ke 50 kemudian drag gambar ke stage dan sesuaikan ukuran dengan tool free transform pada tools panel.
• Membuat Button
- Buatlah layer baru bernama ‘start’ - Tekan F6 pada frame ke 50
- Buatlah button pada layer ‘start’ dari oval tool dan beri fill color biru tua dan stroke color biru muda. Atur ketebalan stroke color menjadi 5
- Klik kanan pada objek oval, kemudian pilih convert to symbol pilih type button dan beri nama btnstart. Objek akan berubah menjadi button
Catatan :
Movie clip: simbol untuk membuat objek-objek animasi. Button: simbol untuk menciptakan tombol interaktif. Graphic: simbol untuk menghasilkan objek statis.
- Beri teks dengan nama ‘START’ berwarna putih di dalam button tersebut seperti dibawah ini
- Berikan interaksi perubahan warna pada button dengan cara double klik button, akan tampil halaman sebagai berikut :
awal
diatas
Area button Ketika di tekan
- Untuk melakukan perubahan warna pada saat mouse berada diatas button, pilih frame over dan tekan F6, lalu klik objek dan ubah warnanya menjadi merah.
- Misalnya kita ingin menambahkan efek suara ketika button diklik, caranya mudah. Pilih frame hit dan tekan F6, pada sound pilih suara yang akan dimasukkan (import terlebih dahulu suaranya pada library).
- Kembali ke stage utama dengan meng-klik scene 1 dan test hasilnya.
• Bekerja dengan Link
- Pada kegiatan diatas, kita sudah membuat button, namun button tersebut belum di-link-kan dengan frame, swf, atau video.
- Me-Link-kan button dengan frame lain
- Buat layer baru bernama ‘hal2’ dan beri nama frame tersebut pada frame label dengan nama ‘hal2’
- Buat keyframe di frame ke 51
- Kembali ke layer start (layer untuk button), kemudian beri action script button agar ketika button di klik maka ia akan mengarahkan ke frame hal2. Lalu test movie
Action script : on (release){ gotoAndStop('hal2'); }
Catatan : pemanggilan pada script gotoAndStop diatas menggunakan nama frame label, selain menggunakan cara tersebut pemanggilan bisa
menggunakan letak frame yang dituju. Action Script : on (release){
gotoAndStop(‘letak_timeline’); // contoh : gotoAndStop(‘4’); stop ();
}
• Pengenalan Action script dasar :
1. gotoAndStop('frame'); // pergi ke frame yang dituju lalu berhenti
2. gotoAndPlay('frame');// pergi ke frame yang dituju lalu mainkan frame tersebut.
3. nextFrame(); // menuju ke frame selanjutnya 4. prevFrame(); // menuju ke frame sebelumnya 5. stop (); // berhenti pada frame itu.
• Me-Link-kan button dengan swf lain
Me-Link-kan file demo flash.swf ke file submain.swf
- Button next yang telah dibuat sebelumnya digunakan untuk me-link-kan ke file submain.swf
- Beri keyframe pada frame ke 76 dan beri nama frame label-nya dengan nama ‘lempar2’
- Sebelum kita me-link-kan swf-nya, kita harus melompatkan button ‘next’ dari frame ke 51 frame ke 76, baru pada frame ke 76 dilakukan link ke file submain.swf.
- Berikut ini adalah action script yang digunakan untuk melompatkan button back (letakkan action script di
buttonbukan di frame
perhatikan pada action
):on (release){
}
- Setelah button telah dilompatkan ke frame 76, selanjutnya pada frame 76 ini baru dilakukan link ke file demo flash.swf
Action script :
loadMovie('submain.swf',1); stop();
Catatan :
Sintax loadMovie :
loadMovie (url, target, method);
• Me-Link-kan file submain.swf ke file demo flash.swf
- Buat file baru dengan nama ‘submain’
- Tambahkan button dengan nama ‘back’ pada frame ke 1 dan tambahkan frame sampai frame 9
- Berikan efek seperti pada contoh sebelumnya dan beri nama pada convert to symbol dengan nama ‘btnback’
- Beri keyframe pada frame ke 10 dan beri nama frame label-nya dengan nama ‘lempar’
- Sebelum kita me-link-kan swf-nya, kita harus melompatkan button ‘back’ dari frame 1 ke frame 10, baru pada frame 10 dilakukan link ke file demo flash.swf.
Berikut ini adalah action script yang digunakan untuk melompatkan button back (letakkan action script di
buttonbukan di frame
perhatikan pada action
):on (release){
gotoAndStop('lempar'); }
- Setelah button telah dilompatkan ke frame 10, selanjutnya pada frame 10 ini baru dilakukan link ke file demo flash.swf
Action script :
loadMovie('demo flash.swf',1); stop();
- Tes movie. Perhatikan yang terjadi. Lakukan troubleshooting untuk memperbaiki hasil tersebut.
• Menyisipkan Audio
Sebelum memulai langkah penyisipan audio, pastikan bahwa file yang akan
digunakan sudah dipersiapkan. - Bukalah file swf “demo flash.swf”
- Untuk mengimpor file ke library, pilih menu File > Import > Import to Library.
- Cari nama file yang akan digunakan, kemudian klik Open. Selanjutnya akan terlihat ikon sound di window Library.
- Sampai di sini, sound belum akan dimainkan secara otomatis sehingga diperlukan langkah lanjutan. Misalkan kita ingin memainkan sound dari awal, drag sound dan letakkan di lembar kerja (stage).
- Tekan Ctrl+Enter untuk melihat hasilnya.
• Memainkan Sound di Frame Tertentu
Adakalanya pemutaran audio atau sound tidak selalu dari awal, misalkan pada frame tertentu. Untuk melakukan hal ini, ikuti langkah-langkah berikut:
- Buka dokumen flash demo flash.swf - Import file sound ke library.
- Letakkan kursor di frame tertentu, misal frame ke 51 pada layer hal2 , kemudian tekan F6 untuk menyisipkan keyframe.
- Pada posisi kursor masih di frame 51, drag file sound ke lembar kerja. - Tekan Ctrl+Enter untuk melihat hasilnya.
Memotong Sound
Adakalanya pula kita ingin memutar sound tidak sampai selesai dan tetap melanjutkan ke frame berikutnya. Untuk melakukan hal ini, maka kita perlu memotong keyframe aktif dan menghentikan pemutaran sound. Langkah-langkah implementasinya sebagai berikut:
- Buat dokumen flash baru. - Import file sound ke library.
- Buat layer baru dengan nama sound, lalu letakkan kursor di frame tertentu, misal 40, kemudian tekan F6 untuk menyisipkan keyframe. - Pada posisi kursor masih di frame 40, drag file sound ke lembar kerja. - Misal kita ingin menghentikan di keyframe 50, letakkan kursor di posisi
tersebut kemudian tekan F6.
- Letakkan kursor di frame 51, kemudian klik F6.
- Pada window Properties, pilih sound yang sama dan atur konfigurasi sinkronisasi.
Terkait dengan penyisipan suara, terkadang diperlukan kontrol pendukung guna memainkan, menghentikan, dan melanjutkan pemutaran suara. Langkah ini dimaksudkan untuk menyediakan pilihan bagi pengguna. Berikut ini langkah-langkah pembuatan kontrol suara:
- Buat dokumen Flash “demo flash.swf”
- Impor file mp3 dengan pilihan Import to Library.
- Klik kanan file mp3 di panel Library, kemudian pilih Linkage.
- Pada kotak dialog Linkage Properties, contreng pilihan Export for ActionScript, kemudian isikan identifier. Setelah selesai, klik OK.
- Klik frame 51 pada layer sound kemudian tekan F9 untuk memunculkan window Action dan isikan kode berikut:
- Gunakan Tool Text (T) untuk menciptakan tombol Play. - Seleksi teks, kemudian tekan F8 dan konversi ke Button.
- Klik kanan button, kemudian pilih menu Actions dan isikan kode berikut: mySound = new Sound();
// Sesuaikan nama musik dg identifier mySound.attachSound("instrumen");
on (release) {
mySound.play("instrumen "); mySound.start();
- Tambahkan juga tombol Stop dan isikan kode program berikut:
- Test movie
• Menginputkan video
Untuk melakukan input video, terlebih dahulu kita harus memastikan bahwa extensi file video harus .flv. Pada prinsipnya untuk melakukan input video sama dengan melakukan link dari swf satu ke swf lain.
- Buat button video pada frame ke-85 (frame yang dipih adalah frame kosong yang tidak terdapat objek apapun) layer sound, beri nama label vid - Masukkan video ke library dengan cara pilih File > Import > Import Video - Akan muncul halaman dialog sebagai berikut dan browse file video yang
akan dimasukkan ke flash:
on (release) {
// Menghentikan musik mySound.stop("instrumen "); }
- Pilih next, akan muncul halaman dialog sbb :
2. Pilih Next, dan pilih finish
3. Link-kan button video ke video dengan action script : on (release){
gotoAndStop('vid'); }
5.2 Rangkuman
Animasi merupakan manipulasi gambar diam menjadi gambar bergerak yang diolah pada Flash dengan fungsionalitas yang cukup handal melalui IDE (Integrated Development Environment) menghasilkan beragam aplikasi.Untuk menjalankan aplikasi flash maka area kerjanya adalah stage, timeline dan properties.Sementara, untuk membuat dan menjalankan gambar 2D dibutuhkan teknik Frame ( yang dinotasikan menggunakan kotak), Keyframe (setiap frame merupakan keyframe). Di Flash, animasi dapat diciptakan melalui tiga pendekatan: frame-by-frame, tweening, dan timeline effect. Penggunaan Action Script dibutuhkan pada flash untuk melakukan manipulasi objek transisi ditambah dengan pemakaian format swf sebagai format animasi video bergerak sedangkan untuk animasi gambar terformat juga bias dilakukan dalam bentuk PNG
5.3 Tugas
1. Buat animasi yang menarik menggunakan Macromedia Flash 2. Susun video ke dalam Timeline Window
3. Sisipkan animasi yang telah dibuat pada video pada waktu bersamaan 4. Durasi minimal 1 menit, maksimal 2 menit
Referensi
Modul : Praktikum Multimedia materi pembuatan animasi 2D dengan
Macromedia Flash , Pendidikan Teknik Informatika Universitas Negeri Malang 2010
Modul : Praktikum Multimedia materi animasi flash , Infokom ITN Malang 2008 Manual Book Software Macromedia Flash