Membuat Tombol Rollover Dengan Macromedia Flash 8
Tombol rollover adalah tombol dengan animasi pada saat tombol di sorot maka tombol akan berubah sehingga akan lebih menarik dari tombol biasa. Yang kita butuhkan disini adalah dua gambar yang berbeda. Gambar satu digunakan untuk tombol normal (belum disorot) dan gambar yang satunya lagi digunakan untuk tombol hover (setelah disorot).
Kita dapat membuat tombol dengan efek rollover atau biasa disebut rollover button dengan menggunakan Macromedia Flash. Dalam tutorial ini, saya mengguanakan Macromedia Flash versi 8.
Langkah pertama, atur dokumen dengan panjang 150px, lebar 75px dan background color: hitam.
Buat objek rounded rectangle hingga memenuhi canvas. Ubah menjadi symbol graphic. Dengan cara seleksi objek > klik kanan > Convert to Symbol... > graphic, pada kotak Name beri nama "normal" > OK.
Objek yang akan kita gunakan sebagai tombol normal telah selesai kita buat. Sekarang kita akan membuat objek hover yang akan digunakan sebagai efek pada saat tombol disorot. Duplikatkan saja symbol graphic dengan nama normal yang telah kita buat tadi. Buka panel Lybrary dengan cara klik menu Window > Lybrary. Atau tekan tombol CTRL + L. Dalam panel Lybrary terdapat symbol graphic dengan nama normal. Klik kanan symbol graphic "normal" > Duplicate. Pada kotak name ketikkan hover, type: Graphic.
Lakukan beberapa modifikasi pada symbol graphic "hover". Pada panel lybrary, klik kanan symbol graphic "hover" > Edit. Ubah warna gradasi di dalam garis berwarna putih dengan diseleksi terlebih dahulu, pada panel color lakukan pengaturan seperti berikut. Jika panel color belum muncul, tekan tombol SHIFT+F9.
Sekarang kita akan menggunakan 2 symbol graphic sebagai bagian dari tombol. Buat symbol baru berupa tombol dengan cara tekan tombol CTRL+F8. Maka akan muncul kotak dialog Create New Symbol. Pada kotak name ketikkan "tombol hover" dan pada type pilih Button. Pada panel Lybrary bertambah satu objek dengan tipe button. Drag objek button dengan nama "tombol hover" ke pojok kiri atas dokumen/kanvas. Kemudian double klik lingkaran kecil di pojok kiri atas tersebut.
Terdapat 4 frame utama pada symbol button "tombol hover" yaitu: UP, OVER, DOWN dan HIT. Frame yang dibutuhkan dalam membuat tombol rollover adalah UP dan OVER. UP mendeskripsikan tombol pada saat tidak tersorot, sedangkan OVER mendeskripsikan tombol pada saat disorot. Isi frame UP dengan symbol graphic "normal", dengan cara: pastikan frame UP terseleksi kemudian drag symbol graphic "normal" ke dokumen/kanvas.
Masukkan symbol graphic "hover" ke dalam frame Over. Caranya: seleksi/klik frame Over (dibawah tulisan Over), tekan tombol F7 untuk membuat key frame kosong kemudian drag symbol graphic "hover" ke dokumen/kanvas.
Terakhir, tambahkan teks pada tombol. Caranya adalah dengan menambahkan layer baru diatas layer pertama, klik menu Insert > Timeline > Layer. Beri nama layer baru dengan nama "teks". Gunakan teks tool untuk menuliskan teks, misalnya "klick here".
Tombol rollover telah selesai dibuat. Selamat mencoba!
Kita dapat membuat tombol dengan efek rollover atau biasa disebut rollover button dengan menggunakan Macromedia Flash. Dalam tutorial ini, saya mengguanakan Macromedia Flash versi 8.
Langkah pertama, atur dokumen dengan panjang 150px, lebar 75px dan background color: hitam.
Buat objek rounded rectangle hingga memenuhi canvas. Ubah menjadi symbol graphic. Dengan cara seleksi objek > klik kanan > Convert to Symbol... > graphic, pada kotak Name beri nama "normal" > OK.
Objek yang akan kita gunakan sebagai tombol normal telah selesai kita buat. Sekarang kita akan membuat objek hover yang akan digunakan sebagai efek pada saat tombol disorot. Duplikatkan saja symbol graphic dengan nama normal yang telah kita buat tadi. Buka panel Lybrary dengan cara klik menu Window > Lybrary. Atau tekan tombol CTRL + L. Dalam panel Lybrary terdapat symbol graphic dengan nama normal. Klik kanan symbol graphic "normal" > Duplicate. Pada kotak name ketikkan hover, type: Graphic.
Lakukan beberapa modifikasi pada symbol graphic "hover". Pada panel lybrary, klik kanan symbol graphic "hover" > Edit. Ubah warna gradasi di dalam garis berwarna putih dengan diseleksi terlebih dahulu, pada panel color lakukan pengaturan seperti berikut. Jika panel color belum muncul, tekan tombol SHIFT+F9.
Sekarang kita akan menggunakan 2 symbol graphic sebagai bagian dari tombol. Buat symbol baru berupa tombol dengan cara tekan tombol CTRL+F8. Maka akan muncul kotak dialog Create New Symbol. Pada kotak name ketikkan "tombol hover" dan pada type pilih Button. Pada panel Lybrary bertambah satu objek dengan tipe button. Drag objek button dengan nama "tombol hover" ke pojok kiri atas dokumen/kanvas. Kemudian double klik lingkaran kecil di pojok kiri atas tersebut.
Terdapat 4 frame utama pada symbol button "tombol hover" yaitu: UP, OVER, DOWN dan HIT. Frame yang dibutuhkan dalam membuat tombol rollover adalah UP dan OVER. UP mendeskripsikan tombol pada saat tidak tersorot, sedangkan OVER mendeskripsikan tombol pada saat disorot. Isi frame UP dengan symbol graphic "normal", dengan cara: pastikan frame UP terseleksi kemudian drag symbol graphic "normal" ke dokumen/kanvas.
Masukkan symbol graphic "hover" ke dalam frame Over. Caranya: seleksi/klik frame Over (dibawah tulisan Over), tekan tombol F7 untuk membuat key frame kosong kemudian drag symbol graphic "hover" ke dokumen/kanvas.
Terakhir, tambahkan teks pada tombol. Caranya adalah dengan menambahkan layer baru diatas layer pertama, klik menu Insert > Timeline > Layer. Beri nama layer baru dengan nama "teks". Gunakan teks tool untuk menuliskan teks, misalnya "klick here".
Tombol rollover telah selesai dibuat. Selamat mencoba!
Komentar
Posting Komentar