Seperti yang telah diceritakan pada tulisan Saya sebelumnya, berikut adalah langkah-langkah untuk membuat aplikasi flash dengan cara pertama.
Namun, sebelum memulai latihan ini ada baiknya jika Anda terlebih dahulu mempelajari apa yang akan kita buat dengan melihat file source .fla yang dapat diunduh dari http://tinyurl.com/F4154LMAN-template-flash
Namun, sebelum memulai latihan ini ada baiknya jika Anda terlebih dahulu mempelajari apa yang akan kita buat dengan melihat file source .fla yang dapat diunduh dari http://tinyurl.com/F4154LMAN-template-flash
Buat 4 buah layer sebagai berikut :
-> layer ‘eksyen’
actionscript akan kita tuliskan pada frame yang ada di layer ini
-> layer ‘mupiklip’
tempat kita menyimpan movieclip yang merupakan content utama dari aplikasi kita
-> layer ‘tombol’
layer ini tempat kita menyimpan tombol-tombol, simpan di atas layer lain
-> layer ‘bekgron’
tempatkan layer ini di paling bawah, karena ini adalah gambar background aplikasi kita
sebenarnya
tidak menjadi masalah kalaupun kita buat semuanya di 1 layer hanya
untuk memudahkan pengeditan nantinya, kita pisah-pisahkan
2. Membuat background
Pada
latihan ini kita buat background yang sederhana saja yaitu dengan
membuat garis abu-abu vertikal yang berjejer (buat dengan line tool
terus copy-paste yg banyak) supaya ada teksturnya, jadi layar kita tidak
terlalu putih blank.
Kemudian
di bawahnya tembahkan pula space berwarna oranye (buat dengan rectangle
tool) dan untuk membuat sedikit efek berikan beberapa gradasi warna.
catatan: buat semuanya di layer ‘bekgron’. supaya tidak saling menimpa jadikan garis-garis menjadi group tersendiri (ctrl+g) dengan begitu akan lebih mudah diedit.
3. Membuat ikon-ikon
Pada
aplikasi latihan ini, ikon-ikon yang ada [rumah, orang, surat, dan
tanda belok] dibuat dengan menggunakan teknik tracing, caranya mudah
yaitu dengan membuat garis-garis kerangka dari sebuah gambar bitmap yang
ingin dibut ikonnya.
Tempatkan ikon-ikon tersebut pada layer ‘bekgron’ atau ‘mupiklip’ yang penting dia berada di atas background yang kita buat.
Berikut Saya contohkan tracing gambar gedung Labtek VI ITB:
1. gambar aslinya
2.kita buat garis-garis yg kita anggap perlu dengan line tool
3. finishing hasil dengan menebalkan bagian tepi, maka jadilah efek kartun gedung Labtek VI ITB
selamat mencoba…!
thanks to Andre 4 this great technique.
4. Membuat tombol-tombol
Kita
hanya perlu membuat sebuah tombol, buat sebuah kotak>convert to
symbol>button. Kemudian masuk ke dalam tombol dengan doubleklik pada
kotak. kemudian klik kanan pada keyframe hit>pilih insert keyframe.
kemudian delete gambar kotak pada frame sebelumnya. Sehingga akhirnya
hanya area hit saja yang berisi gambar kotak tersebut. Tombol akan
berwarna biru muda transparan yang menandakan area hit dari tombol
tersebut.
Copy-paste
tombol ini atau mudahnya drag saja langsung dari library, kemudian
geser-geser sedemikian rupa dengan free transform (klik kanan>free
transform) sehingga pas dengan ikon-ikon yang ada di bawahnya.
Kemudian berikan instance name pada masing-masing button. instance name
diisikan di bagian properties dari button tersebut caranya: klik button
yg mau diberikan instance name kemudian pilih panel properties.
Lihat contoh di bawah, tombol yang menutupi ikon orang saya beri instance name ‘btn_jalmi’. nama ini nanti akan dipakai ketika kita membuat actionscript, jadi silakan beri nama yang khas untuk tiap button.
5. Membuat movieclip utama
Nah
disini tempat movieclip yang akan ditampilkan. seperti dapat dilihat
pada latihan ini pertama-tama buat kertas sebagai latar dari movieclip
yang ada di semua frame pada movieclip tersebut. kemudian buat layer
baru diatasnya. blok kemudian klik kanan>convert to keyframe,
sehingga pada layer ini isinya berbeda-beda untuk tiap frame. misalkan
kita lihat untuk latihan ini pada frame 1 kita buat halaman home, frame 2
untuk halaman aboutme, dan frame 3 berisi halaman kontak. jangan lupa
berikan action stop(); pada frame pertama supaya movieclip tidak
berjalan sendiri.
Movieclip ini disimpan di layer ‘mupiklip‘ dan berikan pula instance name-nya seperti pada tombol sebelumnya. pada file latihan ini saya memberi instance name ‘mc_konten’, nantinya instance name akan dipakai pada actionscript, jadi berikan nama yg khas untuk tiap movieclip yang berbeda.
6. Memberikan actionscriptnya
Logikanya
ketika kita pindah halaman adalah sama dengan pindah dari satu frame ke
frame lain dalam movieclip utama tersebut yang dapat dilakukan oleh
user dengan mengklik sebuah tombol yang tentunya sudah kita beri script
yaitu: apabila tombol home diklik maka movieclip utama akan pindah ke frame 1, apabila tombol aboutme diklik maka movieclip utama akan pindah ke frame 2 (yang tentu isinya halaman aboutme), dan begitu seterusnya.
Jangan lupa untuk menuliskan actionscript pada frame di layer ‘eksyen’. klik frame pada layer ‘eksyen‘ kemudian buka panel action dan ketikkan actionscript berikut.
//misalkan untuk tombol aboutme//instance namenya adalah ‘btn_jalmi’
//kemudian instance name dari
//movieclip utama adalah ‘mc_konten’
btn_jalmi.onPress=function(){
mc_konten.gotoAndStop(2);
}
//actionscript ini berarti jika tombol
//dengan instance name ‘btn_jalmi’
//diklik (onPress=ketika ditekan) maka
//movieclip berinstance name
//‘mc_konten’ akan pindah
//ke frame 2, dalam hal ini
//yang berisi halaman aboutme
begitu pula untuk tombol-tombol lainnya, sama saja scriptnya hanya berbeda nama instance-nya dan frame tujuannya.
Catatan:
jangan salah dalam penulisan huruf besar dan kecil, karena penulisan
actionscript bersifat case-sensitive yang berarti kata ‘gotoAndStop’
akan dianggap berbeda dengan ‘goToAndStop, kadang kesalahan kecil
seperti ini akan cukup merepotkan kita jika sudah membuat aplikasi yang
kompleks.
berikut contoh actionscript pada file latihan yang sudah dimodifikasi dengan beberapa efek tambahan:
adapun efek-efek tambahan yang ada adalah:
-ikon beranimasi jika dirollover maupun rollout
-muncul balon teks ketika rollover
-efek transisi pada perpindahan antar menu
-dll
Saya
sengaja tidak memberikan langkah-langkahnya secara lengkap agar Anda
mempelajari sendiri caranya dengan melihat dari file .fla yang
disediakan. Karena dengan mencoba sendiri akan menjadi lebih paham
bahkan bisa juga mengembangkan teknik-teknik sendiri yang jauh lebih
efektif daripada yang sekarang ini Saya buat.
Jangan
lupa untuk selalu memberi masukan terhadap perbaikan-perbaikan aplikasi
ini sehingga diharapkan untuk versi berikutnya bisa lebih baik lagi.
sumber http://faisalman.com
sumber http://faisalman.com