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 *