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.