Membuat Flash Button
Di dalam tutorial ini kita membahas cara membuat Flash Button,
sedikit screenshotTentang Adobe Illustrator, membahas tentang ‘up’,
‘over’, ‘down’, ‘hit’ pada button, memberikan visual effect.
Taukah anda tentang
button? Button adalah sebuah tombol yang bisa diclick oleh mouse kita.
Biasanya button digunakan untuk memanggil fungsi-fungsi tertentu, serta
memiliki tampilan yang berubah ubah sewaktu kita meng-mouseover atau
meng-click nya. Nah, dalam tutorial kali ini kita tidak akan membahas
tentang fungsi – fungsi ( fungsi disini bukan berarti ‘kegunaan’ lho,
tapi sebuah ‘function’ ) melainkan hanya membahas pada tampilan button
nya saja.
Screenshot jadi:
-langkah 1 : Silahkan
buka Adobe Flash anda, di sini saya menggunakan versi Adobe Flash
terbaru CS5, anda juga dapat menggunakan CS4, CS3, Flash 8, atau versi
lama lainnya.
Berikut screenshotnya:
-Langkah 2
: Yang pertama, mari kita buat sebuah gambar button seperti di atas.
Untuk menggambarnya anda dapat menggunakan Adobe Flash sendiri,
Coreldraw, Adobe Illustrator, atau aplikasi lain. Di sini saya tidak
akan menggambar, tetapi saya menggunakan gambar button sederhana yang
sudah ada di Adobe Illustrator.
“hum, saya sendiri
tidak tahu, kenapa sangat minim sekali tool tool untuk menggambar di
Adobe Flash, mungkin itu merupakan teknik bisnis sehingga bila kita
menggunakannya maka kita memerlukan product Adobe lain yang
mengkhususkan pada bidang menggambar seperti Adobe Illustrator atau
Adobe Fireworks ^_^ “
Berikut Screenshotnya:
“buka Adobe Illustrator
anda dan pilih salah satu button yang sudah ada, drag button ke lembar
kerja kemudian copy paste ke lembar kerja Adobe Flash”
-Langkah 3 : Saat kita copy paste ke Adobe Flash maka tampilannya akan seperti berikut ini:
“akan
ada konfirmasi saat proses paste, silahkan untuk lebih mudahnya pilih
saja ‘paste as bitmap’ , maka semua layer layer dari AI (Adobe
Illustrator akan di merge dijadikan gambar bitmap ). Sebenarnya untuk
membuat animasi yang lebih komplek anda bisa memilih ‘paste using AI
File Importer Preferences’ , tapi karena di tutorial ini kita hanya
membuat button jadi cukup pilih saja ‘paste as bitmap’ “
-Langkah 4 : Convert
bitmap kita ke symbol. Untuk membuat sebuah flash button di Adobe
Flash, maka bitmap yang baru saja kita import harus dijadikan ‘button
symbol’. Klik kanan bitmap -> convert to symbol -> button.
Berikut adalah screenshotnya:
Setelah convert to symbol maka pilih ‘button’
Berikut screenshotnya:
“symbol di flash dibagi
menjadi 3 yaitu ‘movie clip’, ‘button’, dan ‘graphic’. Karena kita akan
membuat button, maka kita harus mengeset symbol kita sebagai button.
Bila anda ingin membuat animasi anda dapat memilih ‘Movie Clip’ . “
-Langkah 5 : Anda
telah berhasil mengkonvert bitmap kita sebagai button. Nah, kemudian
langkah selanjutnya adalah kita akan mengotak atik ‘apa yang ada’ di
dalam symbol button yang baru saja kita buat.
Double click button dan akan terlihat screenshot seperti berikut:
“di dalam button kita
terdapat 4 buah frame yang dapat kita modifikasi dengan menggunakan ‘key
frame’. Pada gambar diatas yang baru terisi hanya frame Up, sehingga
saat button di preview maka tidak ada effect ketika mouse diarahkan ke
button maupun ketika button diclick, haduh susahnya menjelaskan, untuk
lebih jelasnya silahkan dipreview control -> test movie ( ctrl +
enter ) ^_^ “
Frame Up : untuk button normal ( saat tidak ada event tertentu pada button, misalnya mouse over )
Frame Over: saat mouse diarahkan diatas button
Frame Down: saat mouse diclickan ke button ( click di sini masih dalam posisi ditekan, belum dilepaskan)
Frame Hit: Saat mouse dilepaskan ( setelah click )
-Langkah 6 : Saatnya kita isi frame demi frame button kita.
-Mari kita buat button over ( button berubah saat mouse diarah kan ke button)
a.
Klik Kanan frame over -> insert keyframe->setelah insert keyframe
pastikan anda masih dalam frame over tersebut->klik object button di
frame over-> lihat properties di window kanan.
Berikut adalah screenshotnya:
b.
Diatas kita lihat bahwa button di frame over masih bitmap, nah untuk
menambah effect saat mouse over maka bitmap ini harus kita ubah menjadi
symbol lagi. Symbol di dalam symbol adalah ciri khas product Adobe.
Untuk mengubah sebagai symbol , anda tinggal click kanan->convert to symbol ->pilih movieclip atau button.
c.
Kemudian setelah terconvert sebagai symbol ( movieclip atau button ),
click button yang sudah terconvert sebagai symbol di frame over tadi,
nah window properties sekarang sudah berubah seperti pada screenshot di
bawah:
“nah,
setelah diconvert lagi ke symbol ( movieclip atau button ) maka ada
filters (effect yang akan kita gunakan ), juga ada option option lain
yang sangat berguna untuk kita”
d. terakhir, beri effect filter saat mouse over di frame over
click symbol button ->lihat window properties-> click add filter ->glow
silahkan lihat screenshot:
“setelah filter glow muncul, anda tinggal melakukan pengaturan sekehendak anda seperti screenshot berikut ini”
Sekarang
kita telah berhasil menambahkan effect glow pada mouse over ( tepatnya
di frame over ), bila anda ingin mempreviewnya bisa mengclick control
-> test movie pada menu atas.
Berikut adalah hasil akhir untuk button over:
Untuk button down dan hit adalah sama saja prosesnya. Anda dapat berkreasi sendiri, coba coba ,
Maupun membuat sebuah proyek dengan button.
Demikian sedikit tutorial dari saya, semoga bermanfaat. Sampai jumpa
0 komentar:
Posting Komentar