Upload
sugirin
View
52
Download
9
Embed Size (px)
Citation preview
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Latihan Animasi Flash Dalam latihan kali ini kita akan membuat animasi Flash pergerakan objek mobil dengan metode tweening motion yang disertai dengan action script untuk mengendalikan animasi. Berikut ini langkah-langkahnya :
Membuat Project Baru
1. Jalankan Macromedia Flash lewat start menu, caranya pilih Start > All Programs > Macromedia > Macromedia Flash 2004 MX
2. Buat dokumen Flash caranya pilih File > New. 3. Tampil kotak dialog New Document, selanjutnya pilih Flash Document. Lalu
klik OK.
Gambar 1. Membuat dokumen baru
4. Atur ukuran dokumen pada Property Panel, sesuaikan ukuran dokumen
menjadi 550x400 pixels.
Gambar 2. Mengatur ukuran dokumen
Menggambar Objek Mobil Berikut ini langkah-langkahnya :
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
1. Buat simbol terlebih dahulu, caranya pilih Insert > New Symbol… 2. Tampil kotak dialog Create New Symbol, beri nama Mobil pada kotak isian
Name. Lalu pilih Type dengan pilihan Graphics. Kemudian klik OK.
Gambar 3. Membuat simbol baru
3. Dalam Timeline ubah nama Layer 1 menjadi Roda Mobil, karena Layer 1
akan dipergunakan untuk menempatkan gambar roda mobil. Caranya klik dua kali pada Layer 1, kemudian ketikkan teks Roda Mobil di dalamnya, kemudian tekan Enter.
Gambar 4. Merubah layer 1 menjadi layer Roda Mobil
4. Gambar roda mobil kedalam Stage menggunakan Oval Tool yang ada dalam kotak Tool Box. Caranya klik tombol Oval Tool. Kemudian klik satu kali, menggunakan klik kiri pada mouse, sambil tetap menekan tombol kiri mouse kemudian tarik kearah kanan atas atau kanan bawah sesuai dengan ukuran yang diinginkan selanjutnya lepaskan tombol kiri mouse untuk mengakhiri proses.
Gambar 5. Menggambar objek lingkaran
5. Ubah ketebalan garis tepi lingkaran dan warna lingkaran, caranya klik tombol
Selection Tool yang ada di dalam Tool Box. Lalu klik dua kali pada objek lingkaran yang ada di dalam Stage. Selanjutnya ubah tebal garis tepi dan warna objek pada Property Panel.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 6. Merubah tebal garis tepi dan warna lingkaran
6. Buat objek lingkaran yang berukuran lebih kecil, selanjutnya tempatkan di dalam objek lingkaran yang telah digambar sebelumnya.
Gambar 7. Menggambar objek lingkaran kedua
7. Berikutnya pilih kedua objek lingkaran tersebut. Lalu lakukan klik kanan, pilih
Copy. Selanjutnya klik satu kali di sembarang area Stage, lalu klik kanan, pilih Paste. Pindahkan objek lingkaran hasil kopian ke sebelah kanan objek lingkaran asli.
Gambar 8. Mengkopi objek lingkaran
8. Buat layer baru caranya pilih Insert > Timeline > Layer. Selanjutnya ubah
nama Layer 2 menjadi Bodi Mobil, dengan cara melakukan klik dua kali pada nama Layer di Timeline, ketikkan teks Bodi Mobil kemudian tekan Enter.
Gambar 9. Membuat layer Bodi Mobil
9. Gambar bodi mobil menggunakan Pen Tool yang ada dalam Tool Box. Caranya klik satu kali pada Pen Tool. Tentukan titik awal gambar bodi mobil,. kemudian klik satu kali dalam area Stage (menggunakan klik kiri). Berikutnya klik kiri pada titik kedua pada area Stage, untuk mengakhiri proses penggambaran bodi mobil, tutup bangun bodi mobil ke titik awal/pertama penggambaran tadi.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 10. Menggambar bodi mobil
10. Klik dua kali pada bodi mobil menggunakan Selection Tool yang ada
dalam Tool Box. Kemudian rubah warna dan garis tepi menggunakan perangkat yang ada dalam Property Panel.
Gambar 11. Merubah garis tebal dan warna objek
11. Rubah urutan layer yang ada di dalam Timeline, caranya drag dan drop layer
Roda Mobil, tempatkan diatas Bodi Mobil.
Gambar 12. Merubah urutan layer
12. Tampilan gambar dalam Stage tampak seperti gambar di bawah ini.
Gambar 13. Tampilan objek mobil
13. Keluar dari tampilan simbol Mobil untuk kembali ke tampilan Scene 1,
caranya klik teks Scene 1 yang ada di atas Timeline.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 14. Teks Scene 1
14. Dalam tampilan Scene 1, ubah nama Layer 1 yang ada di dalam Timeline,
menjadi layer Mobil, caranya klik dua kali pada nama layer, kemudian ketikkan nama layer dengan nama “Mobil”, lalu tekan Enter.
Gambar 15. Merubah nama layer
15. Drag (tarik) dan drop (jatuhkan) objek/simbol Mobil yang ada dalam panel
Library ke dalam Stage.
Gambar 16. Simbol mobil yang ada di dalam panel Library
16. Ukuran mobil akan terlihat memenuhi Stage, seperti tampak pada gambar di
bawah ini.
Tombol Teks Scene 1
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 17. Gambar simbol Mobil di dalam Stage
17. Rubah ukuran mobil yang ada dalam Stage, perkecil ukurannya dengan cara,
klik kanan pada objek mobil lalu pilih Free Transform. Atur ukuran mobil dengan cara menarik titik-titik yang ada di tiap sudut objek mobil.
Membuat Obyek Jalan Raya dan Pemandangan Berikut ini adalah langkah-langkah untuk membuat objek jalan raya dan pemandangan sebagai latar belakang gambar :
1. Buat layer baru untuk membuat Jalan Raya, caranya pilih Insert > Timeline > Layer.
2. Klik dua kali pada nama layer yang ada dalam Timeline, kemudian ubah namanya menjadi Jalan Raya lalu tekan Enter.
Gambar 18. Merubah nama layer
3. Ubah susunan layer dalam Timeline, drag dan drop layer Mobil, tempatkan
diatas layer Jalan Raya.
Gambar 19. Merubah susunan layer
4. Klik pada nama Layer Jalan Raya, berikutnya klik tombol Line Tool , selanjutnya gambar garis jalan raya tepat dibawah mobil, seperti tampak pada gambar di bawah ini.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 20. Menggambar garis jalan raya
5. Buat layer baru, kemudian beri nama Gedung. Caranya pilih Insert >
Timeline > Layer. Ubah nama layer menjadi Gedung, lalu atur urutan layer supaya berada pada urutan paling bawah.
Gambar 21. Membuat layer Gedung dan mengatur posisi layer
6. Gambar objek Gedung menggunakan Rectangle Tool yang ada dalam Tool Box. Caranya klik tombol Rectangle Tool, kemudian gambar kotak-kotak hingga menyerupai gedung di dalam Stage, seperti tampak pada gambar di bawah ini.
Gambar 22. Menggambar obyek gedung
Membuat Animasi 1. Klik kanan pada frame ke-80 yang ada di dalam layer Gedung. Lalu pilih
Insert Frame.
Gambar 23. Membuat frame layer Gedung sampai ke frame 80
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
2. Lakukan hal serupa untuk layer Jalan Raya dengan cara klik kanan pada
frame ke-80 pada layer Jalan Raya, kemudian pilih Insert Frame.
Gambar 24. Membuat frame layer Jalan Raya sampai ke frame 80
3. Klik kanan frame-80 pada layer Mobil, kemudian pilih Insert Keyframe.
Gambar 25. Membuat keyframe layer Mobil pada frame 80
4. Klik kiri frame 1 pada layer Mobil. Geser posisi mobil menjadi berada di
sudut paling kanan (menggunakan cara drag’n drop dengan mouse, atau menggunakan tombol Arrow Key kiri dan kanan yang ada dalam keyboard).
Gambar 26. Menggeser posisi mobil ke sebelah kanan
5. Klik kiri frame 80 pada layer Mobil. Geser posisi mobil menjadi berada di
sudut paling kiri (dengan cara drag’n drop dengan mouse, atau mengguankan tombol Arrow Key kiri dan kanan yang ada di dalam keyboard)
Gambar 27. Memindahkan posisi mobil ke sebelah kiri
6. Klik kiri frame 1 pada layer Mobil. Selanjutnya pada Property Panel, dalam
pilihan Tween pilihlah Motion.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 28. Membuat motion tweening
7. Jalankan movie dengan cara pilih Control > Test Movie.
Membuat Tombol dan Action Script
1. Berikutnya buat layer baru, beri nama Stop. Dalam layer ini nantinya akan diberi action script Stop supaya animasi akan berhenti ketika animasi pertama kali dijalankan. Caranya pilih Insert > Timeline > Layer. Ubah nama layer baru tersebut dengan nama Stop.
Gambar 29. Membuat layer Stop
2. Klik kanan pada frame 1 pada layer Stop. Lalu pilih Actions. Kemudian dalam
panel Actions, ketikkan script Stop (); seperti tampak pada gambar di bawah ini.
Gambar 30. Membuat script Stop
3. Buat layer baru kemudian beri nama Play.
Gambar 31. Membuat layer Play
4. Tampilkan Library Button, caranya pilih Window > Commons Libraries >
Buttons.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
5. Expand semua folder yang tampil dengan cara klik kanan pada salah satu menu tombol yang tampil dalam Library. Lalu pilih expand All Folders.
Gambar 32. Mengekspand folder-folder yang ada dalam Library Button.
6. Klik kiri pada layer Play terlebih dahulu. Selanjutnya pilih salah satu tombol
kemudian tarik dan masukkan ke dalam Stage.
Gambar 33. Membuat tombol Play
7. Klik kanan pada tombol Enter yang ada dalam Stage, kemudian pilih
Actions. Kemudian ketikkan kode seperti tampak pada gambar di bawah ini.
Gambar 34. Membuat action Play
8. Buat layer baru beri nama Pause.
Latihan Animasi Flash _________________________________________________________
_______________________________________Multimedia & E-Learning Workshop, UNISSULA Semarang
Gambar 35. Membuat layer Pause
9. Tarik dan masukkan salah satu tombol (button) yang ada di dalam Panel
Library ke dalam Stage, dalam layer Pause.
Gambar 36. Menempatkan layer Pause dalam Stage
10. Klik kanan pada tombol Pause yang ada dalam Stage, kemudian pilih
Actions. Kemudian ketikkan kode seperti tampak pada gambar di bawah ini.
Gambar 37. Membuat action Play
11. Jalankan animasi yang telah dibuat dengan cara, pilih Control > Test Movie.
Mempublish Hasil Akhir Berikut ini adalah langkah untuk membuat file SWF sebagai hasil akhir dari latihan Flash kali ini :
1. Untuk mempublish hasil animasi Flash yang sudah dibuat caranya, pilih File > Publish Settings. Tampil kotak dialog Publish Settings, pilih tipe output Flash dan HTML, tentukan lokasi penyimpanan file dengan cara meng-klik tombol bergambar folder yang ada di sebelah kanan masing-masing tipe output/keluaran. Berikutnya pilih Publish.