PANDUAN PENGGUNAAN ANIMASI FLASH

PANDUAN PENGGUNAAN ANIMASI FLASH

DAFTAR ISI. PENGANTAR ANIMASI... 2. TEKNIK ANIMASI... 2. Frame-by-Frame... 2 2.2 Shape Tweening... 2 2.3 Motion Tweening... 2 3. TEKNIK MASKING... 3 4. TEKNIK MOTION GUIDE... 7 5. PROYEK ANIMASI I LOADING MOVIE... 8 6. PROYEK ANIMASI II SIMULASI JARINGAN...

KATA PENGANTAR Perkembangan teknologi informasi, khususnya dalam bidang multimedia, mempengaruhi sistem belajar mengajar. Dulu proses belajar mengajar masih konvensional: dosen, mahasiswa, ruang kelas untuk tatap muka, dan buku banyak bersifat sebagai referensi. Saat ini proses belajar mengajar bisa dilakukan dalam dunia maya (baca: online). Proses belajar mengajar bisa dilakukan tanpa harus berada di dalam kelas, melainkan secara on-line. Demikian halnya referensi menjadi lebih kaya, mahasiswa tidak hanya menggunakan buku sebagai referensi, tetapi referensi digital bersifat interaktif, yang dapat menampilkan simulasi dalam format animasi atau video bisa digunakan sebagai suplemen, atau bahkan mungkin menggeser buku sebagai referensi primer. Mendukung fakta di atas, tentunya penguasaan program-program aplikasi multimedia sangat diperlukan agar dapat mengikuti perkembangan proses belajar mengajar. Salah satu program aplikasi multimedia yang popular, yang mempunyai fitur lengkap adalah Macromedia Flash. Program ini menawarkan pembuatan animasi, dengan kemudahan pengoperasian dan kelengkapan fitur. Macromedia Flash sangat tepat untuk membuat referensi digital. Digital Innovation Center atau Diginnovac, sebuah institusi yang bergerak di bidang Teknologi Informasi yang salah satu unit usahanya adalah pembuatan Multimedia Pembelajaran Interaktif menyusun modul ini sebagai referensi pembuatan animasi menggunakan program Macromedia Flash. Akhir kata penyusun berharap modul ini dapat bermanfaat untuk pengembangan ilmu teknologi informasi, lebih khususnya untuk pengembangan sistem belajar berbasis multimedia. Tim Penyusun

. PENGANTAR ANIMASI Animasi adalah sebagai proses perubahan bentuk atau properti obyek yang ditampilkan dalam kurun waktu tertentu. Contoh: Animasi perubahan bentuk dari kotak menjadi lingkaran. Animasi perubahan properti koordinat x dan y objek (bergeser). Animasi perubahan properti warna dari kuning menjadi merah. Animasi perubahan properti ukuran, dari kotak kecil menjadi kotak besar. Durasi adalah waktu yang ditempuh untuk menyelesaikan suatu tampilan animasi. Contoh, tampilan animasi pergeseran posisi obyek dari koordinat awal ke koordinat akhir diselesaikan dalam waktu 5 detik. Dalam Macromedia Flash, pengaturan durasi dilakukan dengan menggunakan frame rate dengan unit pengukurannya fps (frame per second). Penentuan nilai fps berarti menentukan jumlah frame yang akan diputar dalam waktu detik. Sebagai contoh, jika suatu movie Flash menggunakan frame rate: 2 fps, maka movie akan dimainkan dengan memutar 2 frame dalam detik. CATATAN Frame merupakan tempat objek-objek movie diletakkan. 2. TEKNIK ANIMASI Terdapat tiga teknik dasar pembuatan animasi, yaitu: frame-by-frame, tweening dan skrip. Masing-masing teknik dapat dieksplorasi untuk membuat berbagai tampilan animasi. A n i m a s i F l a s h

Selain itu terdapat teknik tambahan yang bisa digunakan untuk memperkaya tampilan animasi, seperti Motion Guide dan Masking. 2. Frame-by-Frame Teknik frame-by-frame merupakan teknik merangkai urutan gambar yang diletakkan pada sejumlah frame. Pada dasarnya pembuatan animasi frame-by-frame memerlukan minimal dua frame. Jika pada frame diletakkan objek lingkaran warna merah, pada frame 2 diletakkan objek lingkaran warna kuning, maka pada saat movie dimainkan akan tampil animasi warna kelip merah dan kuning. 2.2 Shape Tweening Teknik shape tweening digunakan untuk menganimasi objek shape (kurva), seperti lingkaran, persegiempat, poligon, atau bentuk bebas. Teknik pembuatannya adalah:. Membuat objek shape pertama pada frame awal. 2. Membuat objek shape kedua pada frame akhir. 3. Memberikan tweening shape di antara frame awal dan frame akhir. 2.3 Motion Tweening Teknik tweening tipe motion, atau motion tweening, digunakan untuk menganimasi objek objek, seperti teks, group objek, dan symbol. Cara membuatnya sama seperti teknik tweening shape:. Mengatur objek pada frame awal. 2. Mengatur objek pada frame akhir. 3. Memberikan tweening motion di antara frame awal dan frame akhir. 2

CATATAN Identifikasi pemilihan tipe tweening yang lebih mudah adalah: Objek yang jika terseleksi ditampilkan dengan titiktitik putih hanya bisa diterapkan tweening shape. Objek yang jika terseleksi ditampilkan dengan kotak warna biru di sekelilingnya hanya bisa diterapkan tweening motion. Gambar : Perbedaan tampilan seleksi antara objek shape dan non-shape 3. TEKNIK MASKING Teknik masking digunakan untuk menampilkan objek yang berada dalam layer yang dimasked berdasarkan area yang bersimpangan dengan objek yang berada dalam layer mask. Sebagai contoh, Gambar 2 mengilustrasikan tampilan sebelum penerapan masking, objek kotak berada di Layer 2 (yang atas) dan teks berada di Layer, terlihat bahwa karakter dalam teks yang berada di bawah objek kotak tidak terlihat. Sedangkan Gambar 3 mengilustrasikan tampilan setelah diterapkan masking, yaitu Layer 2 tempat objek kotak berada dijadikan layer mask, dan Layer tempat teks berada dijadikan layer yang di-masked. Tampilan menjadi kebalikan dengan sebelum diterapkan mask, karakter dalam teks yang berada di bawah objek kotak menjadi terlihat, dan yang berada di luar objek kotak menjadi tidak terlihat. 3

Gambar 2: Tampilan sebelum penerapan masking Gambar 3: Tampilan setelah diterapkan masking Berikut akan dipraktekkan teknik animasi masking untuk membuat animasi teks.. Buatlah dokumen baru dengan properti sesuai keinginan. 2. Pada Layer ketikkanlah sembarang teks, misalnya DIGINNOVAC. Gambar 4: Menuliskan teks pada Layer 4

3. Pada panel Timeline tambahkanlah layer baru dengan mengklik tombol New Layer yang terletak di bagian bawah panel. 4. Pada layer baru, Layer 2, buatlah objek persegiempat tanpa warna stroke, dengan ukuran dan posisi seperti contoh pada Gambar 4. Gambar 5: Membuat objek kotak pada Layer 2 5. Animasi masking akan dibuat menggunakan 0 frame, dan objek yang dianimasi adalah objek kotak, sedangkan teks akan terlihat statis. Oleh karena itu pada Layer tempat teks berada, klik kanan frame 0, kemudian klik menu Insert Frame. Sedangkan pada Layer 2 tempat objek kotak berada, klik kanan frame 0, kemudian klik menu Insert Keyframe. 6. Kotak akan diskala sehingga ukurannya dapat menutup tampilan teks. Aktifkanlah tool Free Transform pada Toolbox, kemudian seleksilah objek kotak pada Layer 2 frame 0. Terapkanlah transformasi skala pada objek sehingga ukurannya menutup semua tampilan teks. Gambar 6: Menerapkan transformasi pada kotak A n i m a s i F l a s h 5

7. Pada Layer 2 tempat objek kotak berada, klik salah satu frame di antara frame dan 0, misalnya frame 5, kemudian pada panel Properties pilihlah Shape pada kotak Tweeen untuk menerapkan animasi shape tweening. 8. Pada panel Timeline posisikanlah playback pada frame, yaitu dengan mengklik frame atau menyeret playback ke frame. Tekan tombol Enter pada keyboard untuk memainkan animasi pada jendela pengeditan. Terlihat bahwa ukuran kotak semakin melebar sehingga menutupi teks di bawahnya. 9. Selanjutnya adalah menerapkan masking. Pada panel Timeline klik kanan nama Layer 2 (tempat kotak berada), kemudian klik menu Mask untuk membuat Layer 2 menjadi mask, dan layer di bawahnya, yaitu Layer menjadi layer yang dimasked. 0. Pada panel Timeline posisikanlah playback pada frame, yaitu dengan mengklik frame atau menyeret playback ke frame. Tekan tombol Enter pada keyboard untuk memainkan animasi pada jendela pengeditan. Terlihat bahwa teks yang semula tidak terlihat menjadi terlihat sesuai animasi pada objek kotak. Gambar 7: Hasil menerapkan animasi teknik masking CATATAN Pada jendela pengeditan Flash, efek tampilan teknik masking dapat terlihat apabila layer mask dan yang di-masked dalam keadaan terkunci. 6

4. TEKNIK MOTION GUIDE Macromedia Flash memungkinkan Anda untuk membuat animasi pergeseran posisi obyek dengan menentukan garis lintasannya, yaitu menggunakan layer Motion Guide. Motion guide adalah layer yang di dalamnya terdapat obyek garis (baik lurus, melengkung, atau bebas) yang digunakan sebagai garis lintasan pergeseran obyek yang berada di layer bawahnya (layer target guide). Dari istilahnya, yaitu motion guide, tentunya bisa disimpulkan bahwa teknik animasi ini hanya dapat diterapkan pada motion tweening. Berikut ini akan dipraktekkan pembuatan animasi dengan menggunakan teknik motion guide.. Buatlah movie baru dengan properti sesuai yang ditentukan program. 2. Gambarlah obyek lingkaran, kemudian konversikan menjadi symbol Graphic (klik menu Modify > Convert to Symbol). Gambar 8: Membuat symbol Graphic 3. Di dalam layer instance symbol Graphic tersebut, sisipkan keyframe, misalnya pada frame 20. 4. Klik kanan salah satu frame di antara frame dan 20, kemudian pilihlah menu Create Motion Tween. 5. Di dalam jendela Timeline, klik tombol Add Motion Guide yang terletak di bagian bawah jendela, maka akan tampil layer baru (layer Motion Guide). A n i m a s i F l a s h 7

6. Di dalam layer Motion Guide, gambarlah garis seperti contoh yang terlihat pada Gambar 9. Gambar 9: Membuat layer Motion Guide 7. Langkah selanjutnya di dalam frame awal (frame ), Anda harus memposisikan obyek (instance symbol Graphic) tepat pada ujung garis. Demikian halnya di dalam frame akhir (frame 20). Untuk memudahkan pengaturan posisi obyek, Anda dapat mengunci layer Motion guide, dan mengaktifkan tombol Snap (ikon magnet) yang terletak di dalam Toolbox. 8. Lakukan test movie, setelah itu simpan latihan ini. Jika movie dimainkan di dalam jendela pengeditan movie Flash, obyek garis (lintasannya) masih terlihat. Namun jika Anda menampilkan movie di dalam Flash Player, obyek garis tidak akan terlihat. 5. PROYEK ANIMASI I LOADING MOVIE Proyek animasi pertama yang akan dipraktekkan adalah membuat loading movie.. Buatlah movie baru dengan properti sesuai yang ditentukan program. 8

2. Pada frame layer ketikkanlah teks, misalnya loading atau please wait atau yang lainnya. Gambar 0: Menuliskan teks loading 3. Pada panel Timeline tambahkanlah layer baru, kemudiang gambarlah obyek untuk dijadikan progress status, misalnya persegiempat atau lingkaran (Gambar ). Gambar : Menggambar objek untuk dijadikan progress status 4. Pada panel Timeline layer 2, tempat objek progress status berada, klik kanan frame 2, kemudian klik menu Insert Keyframe. 5. Dengan objek masih dalam keadaan terseleksi, tekan tombol Ctrl+C pada keyboard untuk menggandakannya. 6. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place) untuk meletakkan hasil penggandan pada tempat yang sama, lanjutkanlah dengan langsung menekan tombol panah ke kanan (sambil dihitung jumlah ketukan penekanan tombol tersebut) untuk menggeser posisi objek hasil penggandaan, misalnya 7 ketukan. Gambar 2: Menggandakan dan menggeser posisi objek A n i m a s i F l a s h 9

7. Pada panel Timeline layer 2, klik kanan frame 3, kemudian klik menu Insert Keyframe. 8. Hilangkan seleksi objek pada keyframe 3 dengan mengklik di luar area objek. 9. Klik objek ke dua untuk menyeleksinya, kemudian tekan tombol Ctrl + C untuk menggandakannya. 0. Tekan tombol Ctrl + Shift + V (menu Edit > Paste in Place) untuk meletakkan hasil penggandan pada tempat yang sama, lanjutkanlah dengan langsung menekan tombol panah ke kanan sebanyak jumlah ketukan yang telah dilakukan sebelumnya. Jika sebelumnya menekan sebanyak 7 ketukkan, maka ulangilah jumlah tersebut agar jarak antara objek menjadi rata. Gambar 3: Menggandakan dan menggeser posisi objek. Ulangi langkah di atas, yaitu menyisipkan keyframe, menggandakan dan menggeser posisi objek, sebanyak yang diinginkan. Jika akan menggunakan tujuh objek, maka keyframe yang digunakan juga 7. Gambar 4: Contoh menggunakan tujuh objek dan tujuh keyframe 2. Selanjutnya adalah mengatur agar teks pada layer ditampilkan dengan durasi yang sama seperti objek pada layer 2. Jika objek pada layer 2 menggunakan 7 0

keyframe, maka pada layer klik kanan frame 7 kemudian klik menu Insert Frame (Gambar 5). 3. Tekan tombol Ctrl + Enter untuk melakukan test movie. 4. Simpanlah proyek ini. Gambar 5: Mengatur durasi tampil teks 6. PROYEK ANIMASI II SIMULASI JARINGAN Proyek animasi kedua adalah membuat simulasi jaringan komputer.. Buatlah movie baru dengan properti sesuai yang ditentukan program. 2. Klik menu File > Import kemudian imporlah file komputer.wmf. Gambar 6: Mengimpor file komputer.wmf A n i m a s i F l a s h

3. Agar memudahkan pengeditan, groupkan gambar tersebut, klik menu Modify > Group. 4. Atur ulang ukuran gambar komputer untuk disesuaikan ukuran panggung, kemudian gandakanlah sebanyak 2 kali. 5. Aturlah posisi ketiga gambar komputer sehingga terlihat seperti Gambar 7. Gambar 7: Menggandakan gambar komputer 6. Untuk mempercantik tampilan, salah satu gambar komputer, yaitu yang berada paling kanan akan di-mirror. Klik gambar tersebut, kemudian klik menu Modify > Transform > Flip Horizontal. Gambar 8: Membalik (Flip Horizontal) gambar komputer yang posisinya paling kanan 2

7. Pada panel Timeline tambahkan frame pada layer. Klik kanan frame 80 kemudian klik menu Insert Frame. Untuk memudahkan pengeditan kuncilah layer ini. 8. Pada panel Timeline tambahkanlah layer baru. 9. Aktifkanlah tool Line, kemudian pada panel Properties ubahlah ukuran width menjadi 6 atau 8, dan pilihlah warna sesuai keinginan. Gambar 9: Mengatur properti tool Line 0. Pastikanlah layer yang aktif adalah layer seperti contoh pada Gambar 20. 2, kemudian gambarlah garis vertical Gambar 20: Menggambar garis vertikal. Pada layer 2 klik kanan frame 0 kemudian klik menu Insert Keyframe. A n i m a s i F l a s h 3

2. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung garis untuk memperpanjang garis. Untuk mempermudah pengeditan Anda dapat mengaktifkan tombol Snap (ikon magnit) yang terletak pada Toolbox. Gambar 2: Memperpanjang garis 3. Pada layer 2 klik salah satu frame di antara frame dan 0, kemudian pada panel Properties pilihlah Shape pada kotak Tween. 4. Selanjutnya adalah membuat animasi garis jaringan berikutnya. Pada panel Timeline tambahkanlah layer baru (layer 3). Dan untuk memudahkan pengeditan kuncilah layer 2. Gambar 22: Menggambar garis horizontal pada frame 0 layer 3 4

Gambar 23: Gambar garis horizontal dimulai dari frame 0 5. Klik kanan frame 0 layer 3, kemudian klik menu Insert Keyframe. 6. Klik frame 0 layer 3, kemudian gambarlah garis horizontal menyambung ujung garis sebelumnya ke arah kanan, seperti contoh pada Gambar 22. 7. Pada layer 3 klik kanan frame 20 kemudian klik menu Insert Keyframe. 8. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung garis untuk memperpanjang garis. 9. Pada layer 3 klik salah satu frame di antara frame 0 dan 20, kemudian pada panel Properties pilihlah Shape pada kotak Tween. Gambar 24: Memperpanjang garis pada layer 3 A n i m a s i F l a s h 5

Gambar 25: Menganimasi garis pada layer 3 20. Selanjutnya adalah membuat animasi garis jaringan berikutnya. Pada panel Timeline tambahkanlah layer baru (layer 4). Dan untuk memudahkan pengeditan kuncilah layer 3. 2. Klik kanan frame 0 layer 4, kemudian klik menu Insert Keyframe. 22. Klik frame 0 layer 4, kemudian gambarlah garis horizontal menyambung ujung garis sebelumnya ke arah kiri, seperti contoh pada Gambar 26. 23. Pada layer 4 klik kanan frame 20 kemudian klik menu Insert Keyframe. 24. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung garis untuk memperpanjang garis (Gambar 27). 25. Pada layer 4 klik salah satu frame di antara frame 0 dan 20, kemudian pada panel Properties pilihlah Shape pada kotak Tween. Gambar 26: Menggambar garis pada frame 0 layer 4 6

Gambar 27: Memperpanjang garis Gambar 28: Menganimasi garis pada layer 4 26. Jumlah frame yang digunakan adalah 80. Perpendeklah durasinya. Seleksilah frame yang tidak digunakan, kemudian klik kanan di atas frame yang terseleksi dan klik menu Remove Frames. 27. Selanjutnya adalah menambah garis sebagai track (jalur) animasi. Posisikanlah playback pada frame terakhir. Bukalah kunci semua layer, kecuali layer (gambar komputer), kemudian klik menu Edit > Select All untuk menyeleksi semua garis yang berada pada frame terakhir. A n i m a s i F l a s h 7

Gambar 29: Menyeleksi semua garis pada frame terkahir 28. Klik menu Edit > Copy untuk menggandakan garis yang terseleksi. 29. Pada panel Timeline tambahkanlah layer baru (layer 5), kemudian klik menu Edit Paste in Place untuk meletakkan hasil penggandaan pada tempat yang sama. 30. Klik frame layer 5 untuk menyeleksi garis, kemudian gantilah warnanya (stroke). Gambar 30: Mengganti warna stroke garis pada layer 5 3. Garis pada layer 5 merupakan objek track animasi, oleh karena itu urutan layer 5 harus berada di bawah layer animasi garis. Pada panel Timeline seretlah nama layer 5 ke bawah layer animasi garis. 8

Gambar 3: Mengatur urutan layer 5 32. Animasi akan terlihat lebih cantik jika gambar komputer berada di atas garis. Oleh karena itu aturlah layer, tempat gambar komputer berada, sehingga berada pada urutan paling atas. Gambar 32: Mengatur urutan layer sehingga berada paling atas 33. Tekan tombol Ctrl + Enter untuk melakukan test movie. 34. Simpanlah praktek ini A n i m a s i F l a s h 9