Membuat Menu Invisible Button (Tombol Tidak Tampak)

invisiblebtnJika kita akan membuat sebuah tampilan menu pilihan yang berisi banyak tombol, maka kita harus konsisten dalam membuat perubahan tampilan UP, OVER, DOWN dan HIT pada tombol. Untuk itu kita dapat mensiasati dengan membuat tombol yang tidak tampak (Invisible Button), yaitu dengan cara memasukkan teks saja kemudian memanfaatkan tombol dengan tampilan HIT. Jika masih bingung dengan UP, OVER, DOWN dan HIT, buka kembali materi konsep tombol.

Nah, berikut ini saya akan berbagi pengalaman lagi bagaimana membuat banyak tombol pada tampilan mata pelajaran dan daftar guru berikut.

Langkah Pertama, buatlah ukuran dimensi 800 x 600 px.

scroll1

Gambar 1. Ukuran dimensi 800 x 600 px

 

Langkah Kedua, buatlah garis bantu dengan mengaktifkan Ruler (buka View>Rulers).

scroll2

Gambar 2. Tampilan Ruler

Langkah Ketiga tarik garis bantu (Guides) secara vertikal dan horizontal aturlah posisi tengah, garis tepi kanan kiri atas dan bawah (sesuai selera) dan kuncilah (Lock Guide) dengan cara klik kanan pada Stage (warna dapat diubah sesuai selera pada Edit Guide).

scroll3

Gambar 3. Garis bantu (Guides) secara vertikal dan horizontal

Langkah Keempat, Ketiklah tulisan daftar Mata Pelajaran dan Daftar Guru (sesuai selera) seperti Gambar 4.

menu1

Gambar 4. Daftar Mata Pelajaran dan Daftar Guru

Langkah Kelima, buatlah kotak/ Rectangle (tekan R) yang panjang dan lebarnya cukup untuk menutupi teks yang paling panjang, kemudian Convert to Symbol pilih tipe Button.

menu2

Gambar 5. Rectangle menutupi teks yang paling panjang

menu3

Gambar 6. Convert to Symbol pilih tipe Button

Langkah Keenam, ketika Kotak tersebut sudah berubah menjadi Movie Clip, maka klik kanan Edit in Place. Kemudian hapus tampilan UP, modifikasi warna pada tampilan OVER dan DOWN.Langkah Ketujuh, keluar dari editing tombol dengan menekan Scene 1 maka akan muncul warna tombol yang transparan (warna biru) kemudian copy tombol sebanyak daftar nama (aturlah posisinya dengan Align (tekan CTRL+K)).

menu5

Gambar 7. Edit in Place tombol

menu4

Gambar 8. Tampilan UP dihapus

menu6

Gambar 9. Tampilan OVER warna kuning

menu7

Gambar 10. Tampilan DOWN warna merah

menu8

Gambar 11. Copy dan Paste tombol

menu9

Gambar 12. Letakkan posisi tombol di bawah teks

menu10

Gambar 13. Desain pada layer yang berbeda

menu12

Gambar 14. Hasil akhir

Langkah Kedelapan, letakkan posisi tombol transparan ke bawah teks dengan cara klik kanan Arrang>Send to Back.Langkah Kesembilan, desainlah background menggunakan layer yang berbeda.Langkah Kesepuluh, Lakukan Test Movie (tekan CTRL+ENTER).Seperti ini hasil akhirnya.

Lihat fullscreen

Leave a Reply

Your email address will not be published. Required fields are marked *