- 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 : Langkah pertama, mari kita buat sebuah
gambar button seperti di atas. Untuk menggambarnya anda dapat
menggunakan Adobe Flash sendiri, Photoshop,
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.
sumber : http://www.ilmugrafis.com/flash.php?page=membuat-flash-button
