Panduan Penggunaan Animasi Flash
Panduan Penggunaan Animasi Flash
Panduan Penggunaan Animasi Flash
2. TEKNIK ANIMASI.................................................................................................... 1
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
1. PENGANTAR ANIMASI
Animasi adalah sebagai proses perubahan bentuk atau properti obyek yang ditampilkan
dalam kurun waktu tertentu. Contoh:
• 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 1 detik. Sebagai contoh, jika
suatu movie Flash menggunakan frame rate: 12 fps, maka movie akan dimainkan dengan
memutar 12 frame dalam 1 detik.
CATATAN
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 asi Fl ash
1
Selain itu terdapat teknik tambahan yang bisa digunakan untuk memperkaya tampilan
animasi, seperti Motion Guide dan Masking.
2.1 Frame-by-Frame
Teknik shape tweening digunakan untuk menganimasi objek shape (kurva), seperti
lingkaran, persegiempat, poligon, atau bentuk bebas. Teknik pembuatannya adalah:
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:
2
CATATAN
3. TEKNIK MASKING
Teknik masking digunakan untuk menampilkan objek yang berada dalam layer yang di-
masked 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 1, 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 1 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
Berikut akan dipraktekkan teknik animasi masking untuk membuat animasi teks.
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.
5. Animasi masking akan dibuat menggunakan 10 frame, dan objek yang dianimasi
adalah objek kotak, sedangkan teks akan terlihat statis. Oleh karena itu pada
Layer 1 tempat teks berada, klik kanan frame 10, kemudian klik menu Insert
Frame. Sedangkan pada Layer 2 tempat objek kotak berada, klik kanan frame 10,
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 10. Terapkanlah transformasi skala pada objek sehingga ukurannya
menutup semua tampilan teks.
A n i m asi Fl ash
5
7. Pada Layer 2 tempat objek kotak berada, klik salah satu frame di antara frame 1
dan 10, 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 1, yaitu dengan mengklik
frame 1 atau menyeret playback ke frame 1. 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 1 menjadi layer yang di-
masked.
10. Pada panel Timeline posisikanlah playback pada frame 1, yaitu dengan mengklik
frame 1 atau menyeret playback ke frame 1. 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.
CATATAN
6
4. TEKNIK MOTION GUIDE
Berikut ini akan dipraktekkan pembuatan animasi dengan menggunakan teknik motion
guide.
4. Klik kanan salah satu frame di antara frame 1 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 asi Fl ash
7
6. Di dalam layer Motion Guide, gambarlah garis seperti contoh yang terlihat pada
Gambar 9.
7. Langkah selanjutnya di dalam frame awal (frame 1), 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.
Proyek animasi pertama yang akan dipraktekkan adalah membuat loading movie.
1. Buatlah movie baru dengan properti sesuai yang ditentukan program.
8
2. Pada frame 1 layer 1 ketikkanlah teks, misalnya loading atau please wait atau
yang lainnya.
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.
A n i m asi Fl ash
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.
10. 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.
12. Selanjutnya adalah mengatur agar teks pada layer 1 ditampilkan dengan durasi
yang sama seperti objek pada layer 2. Jika objek pada layer 2 menggunakan 7
1
0
keyframe, maka pada layer 1 klik kanan frame 7 kemudian klik menu Insert
Frame (Gambar 15).
13. Tekan tombol Ctrl + Enter untuk melakukan test movie.
14. Simpanlah proyek ini.
A n i m asi Fl ash
1
1
3. Agar memudahkan pengeditan, groupkan gambar tersebut, klik menu Modify >
Group.
5. Aturlah posisi ketiga gambar komputer sehingga terlihat seperti Gambar 17.
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 18: Membalik (Flip Horizontal) gambar komputer yang posisinya paling kanan
1
2
7. Pada panel Timeline tambahkan frame pada layer 1. Klik kanan frame 80
kemudian klik menu Insert Frame. Untuk memudahkan pengeditan kuncilah
layer ini.
9. Aktifkanlah tool Line, kemudian pada panel Properties ubahlah ukuran width
menjadi 6 atau 8, dan pilihlah warna sesuai keinginan.
10. Pastikanlah layer yang aktif adalah layer 2, kemudian gambarlah garis vertical
seperti contoh pada Gambar 20.
11. Pada layer 2 klik kanan frame 10 kemudian klik menu Insert Keyframe.
A n i m asi Fl ash
1
3
12. 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.
13. Pada layer 2 klik salah satu frame di antara frame 1 dan 10, kemudian pada panel
Properties pilihlah Shape pada kotak Tween.
14. Selanjutnya adalah membuat animasi garis jaringan berikutnya. Pada panel
Timeline tambahkanlah layer baru (layer 3). Dan untuk memudahkan pengeditan
kuncilah layer 2.
1
4
Gambar 23: Gambar garis horizontal dimulai dari frame 10
15. Klik kanan frame 10 layer 3, kemudian klik menu Insert Keyframe.
16. Klik frame 10 layer 3, kemudian gambarlah garis horizontal menyambung ujung
garis sebelumnya ke arah kanan, seperti contoh pada Gambar 22.
17. Pada layer 3 klik kanan frame 20 kemudian klik menu Insert Keyframe.
18. Hilangkan seleksi pada garis, kemudian menggunakan tool Selection seret ujung
garis untuk memperpanjang garis.
19. Pada layer 3 klik salah satu frame di antara frame 10 dan 20, kemudian pada panel
Properties pilihlah Shape pada kotak Tween.
A n i m asi Fl ash
1
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.
21. Klik kanan frame 10 layer 4, kemudian klik menu Insert Keyframe.
22. Klik frame 10 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 10 dan 20, kemudian pada panel
Properties pilihlah Shape pada kotak Tween.
1
6
Gambar 27: Memperpanjang garis
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 1 (gambar
komputer), kemudian klik menu Edit > Select All untuk menyeleksi semua garis
yang berada pada frame terakhir.
A n i m asi Fl ash
1
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 1 layer 5 untuk menyeleksi garis, kemudian gantilah warnanya
(stroke).
31. 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.
1
8
Gambar 31: Mengatur urutan layer 5
32. Animasi akan terlihat lebih cantik jika gambar komputer berada di atas garis. Oleh
karena itu aturlah layer 1, tempat gambar komputer berada, sehingga berada pada
urutan paling atas.
A n i m asi Fl ash
1
9