Tutorial Membuat Tombol dengan Adobe Flash
-
Upload
marvel-rondonuwu -
Category
Documents
-
view
283 -
download
16
description
Transcript of Tutorial Membuat Tombol dengan Adobe Flash
Tutorial membuat Tombol Dengan Adobe Flash
1
Tutorial membuat Tombol
1. Buka Adobe Flash. Dan pilih “Action Script 2.0”
2. Setelah masuk pada lembar kerja. Klik “Window” ⇒ “Common Library”
⇒ “Buttons”. Tahap ini berfungsi untuk memunculkan tombol-tombol yang
telah disediakan Adobe Flash.
3. Kalau “Buttons” sudah muncul, pilih “buttons bubble 2”. Klik untuk
memunculkan daftar tombolnya.
Tutorial membuat Tombol Dengan Adobe Flash
2
4. Drag tombol yang ada di “buttons bubble 2” kedalam lembar kerja. Drag
tombol-tombol yang tertanda dibawah ini.
5. Setelah 6 buah tombol didrag pada lembar kerja. Susun tombol dengan urutan
sebagai berikut: biru, hijau, abu-abu, merah, ungu, oranye. (susunan ini hanya
sebagai contoh)
6. Pada layer yang memuat tombol-tombol, pada frame 30, klik kanan ⇒ “Insert
Frame”.
7. Ubah nama layer 1 menjadi layer “tombol” dengan cara klik 2 kali pada bagian
nama layer. Langkah ini berfungsi untuk memudahkan proses editan dan
mempermudah untuk mengetahui apa isi dari layer tersebut.
`
Tutorial membuat Tombol Dengan Adobe Flash
3
8. Setelah itu, kunci layer “Tombol”. Caranya, klik simbol titik yang berada
dibawah simbol gembok. Langkah ini berfungsi untuk menon-aktifkan aktifitas
pada layer yang dikunci.
9. Buat layer baru. Layer ini akan menampung warna-warna latar belakang.
10. Dan ubah nama layer 2 menjadi layer “Warna”.
11. Pindahkan layer “Warna” dibawah layer “Tombol”. Caranya, drag layer
“Warna” kebawah layer “Tombol”. Tampilannya akan jadi seperti berikut.
12. Pada layer “Warna”, pilih “Rectangle Tool”. Tool ini berfungsi untuk membuat
bentuk kotak.
13. Sebelum membuat bentuk kotak, sesuaikan terlebih dahulu warna “Fill” -nya
dengan warna pada salah satu tombol. Pertama, pilih tombol berwarna biru.
(Fill Color)
ketika “Fill Color” diklik, pointer mouse akan berbentuk seperti ini.
Tutorial membuat Tombol Dengan Adobe Flash
4
Arahkan pointer pada tombol biru. Ambil sempel warna pada tombol agar
warna dari kotak akan sesuai dengan warna pada tombol.
14. Pada layer “Warna”, buatlah bentuk kotak yang seukuran dengan lembar kerja.
Tampilan lembar kerja akan menjadi seperti berikut. kotak ini akan menjadi
warna latar belakang (background).
15. Layer “Warna”. Klik kanan ⇒ “Insert Keyframe” pada frame 6, 11, 16, 21,
dan 26.
Tampilan layer “Warna” akan menjadi seperti berikut.
16. Layer “Warna”. Pilih “Selection Tool”. Pada frame 6-10, buat warna latar
sesuai dengan warna tombol. Seperti yang dibuat pada langkah 12 sampai
langkah 14.
17. Layer “Warna”. Setelah selesai dengan frame 6-10, buatlah langkah yang
serupa pada frame 11-15, dan seterusnya. Langkah ini akan membuat warna
latar bervariasi atau berwarna-warni sesuai dengan warna keenam tombol pada
lembar kerja.
Tutorial membuat Tombol Dengan Adobe Flash
5
Setelah langkah itu dikerjakan, ketika diklik pada frame-frame yang ada
dilayer “Warna”, tampilan lembar kerja menjadi seperti berikut.
18. Kunci layer “Warna”. Caranya seperti pada langkah ke-8.
19. Buat layer baru dan beri nama layer “Label”. Kemudian berikan keyframe pada
frame sesuai dengan posisi keyframe pada layer “Warna”. Tapi pada layer ini,
tambahkan sebuah keyframe pada frame 30. Berikut tampilannya.
20. Pada layer “Warna”, klik diantara frame 1-5.
Tutorial membuat Tombol Dengan Adobe Flash
6
21. Kemudian klik pada “Properties” ⇒ “Frame” ⇒ “Label”. Masukkan nama
tiap-tiap warna tombol pada “Name” (nama label). Tuliskan tanpa spasi.
Langkah ini berfungsi untuk memberikan nama label pada warna latar.
Lakukan langkah ini pada layer “Warna” diframe-frame selanjutnya yang telah
dikelompokan dengan keyframe. Karena tiap bagian frame memiliki warna
latar yang berbeda, maka lama label harus berbeda dan disesuaikan dengan
nama warna latar yang dipakai.
22. Setelah diberikan nama label, tampilan layer label akan jadi seperti berikut.
23. Kunci layer “Label”.
24. Buat layer baru dan beri nama layer “Script”. Tampilannya seperti berikut.
25. Pada layer “Script”, berikan keyframe pada frame 30.
Tutorial membuat Tombol Dengan Adobe Flash
7
26. Layer “Script”. Klik pada frame 30. Klik “Window” ⇒ “Actions”.
27. Pada jendela “Actions”, masukan perintah “Stop ();”. Tampilannya seperti
berikut.
Jika perintah sudah diketikan, pada frame 30 di layer “Script” akan muncul
simbol seperti berikut.
28. Layer “Script”. Berikan keyframe pada frame 26, 21, 16, 11, dan 6.
Tampilannya seperti berikut.
29. Layer “Script”. Tambahkan keyframe dan masukan perintah “Stop ();” pada
frame 5, 10, 15, 20, dan 25. Cara memasukan perintah ini sama dengan yang
dilakukan pada langkah 27. Jika frame-frame tersebut sudah diberikan
perintah, tampilannya akan jadi seperti berikut.
30. Kunci layer “Script” dan buka layer “Tombol”.
Tutorial membuat Tombol Dengan Adobe Flash
8
31. Layer “Tombol”. klik pada tombol (bukan klik pada frame) dan masukan
perintah seperti dibawah ini. Pertama, masukan perintah pada tombol biru.
32. Setelah selesai memasukan perintah pada tombol biru. Klik pada tombol-
tombol yang lain dan masukan perintah. Pada tombol hijau dan seterusnya.
Seperti yang tertanda pada koding, bagian itu harus diganti-ganti sesuai nama
label yang telah diberi (lihat langkah 21 dan 22).
33. Jika tiap-tiap tombol telah diberikan perintah/koding. Tekan “Control”
⇒ “Test Movie” ⇒ “Test”. Langkah ini berfungsi untuk menjalankan
sekaligus memunculkan file .swf -nya.
Tutorial membuat Tombol Dengan Adobe Flash
9
Ketika file .swf dijalankan, barulah efek yang dibuat pada langkah-langkah
diatas akan berfungsi. Ketika tombol-tombol yang ada pada lembar kerja
diklik, maka warna latar akan berubah sesuai dengan warna tombol yang
diklik.