Flash, aku butuh weker

Me m b u a t Ja m W e k e r d e n g a n Fl a sh I. PENDAHULUAN Hallo, kawan semua pecinta flash, kali ini kita akan membuat aplikasi berbasis flash yaitu pembuatan weker. Pada Macromedia Flash MX 2004 Profesional telah terdapat dukungan action script yang memadai, diantaranya pendetekasi jam atau get Hourse() get Hours() dan sebagainya . Pada tutorial ini akan banyak digunakan action script sebagai pendeteksi waktu yang ada pada komputer anda. Oleh karena itu hasil akhir pada waktu eksekusi file swf akan tergantung pada setting jam di komputer anda masing-masing. Pada tutorial ini saya asumsikan bahwa anda pernah setidaknya membuka program Macromedia Flash MX 2004 professional sebelumnya atau bahkan sering menggunakannya malah lebih bagus. II. PROSES KERJA Proses kerja dibagi kedalam dua bagian, pada bagian pertama kita akan merancang elemen-elemen jam, antara lain jarum penunjuk jam, jarum penunjuk menit, jarum penunjuk detik, angka pada jam serta lingkaran jam. Sedangkan pada bagian kedua kita akan menuliskan action script pada masingmasing elemen. Oke guys, kita mulai saja dengan mendesain tampilan jamnya II.1. . PERANCANGAN ELEMEN-ELEMEN JAM 1. Buat file baru, caranya klik menu file >new>flash document. Atur ukuran stage pada properties panel sehingga size menjadi 500 x 250 pixels dan background warna merah bata (#990000). Gambar 1. Mengatur ukuran stage dan warna background 2. Dengan menggunakan oval height 5 dan fill color coklat. tool buat sebuah lingkaran dengan stroke color hitam, stroke Gambar 2. Membuat lingkaran dengan Oval Tool 3. Buat tiga buah garis menggunakan Line Tool dengan ukuran dan warna yang berbeda, ini dikarenakan nanti akan dipakai untuk jarum jam, jarum menit dan jarum detik. Setelah itu konversi ketiga garis menjadi symbol dengan cara menekan tombol F8 dan beri nama masing masing jarum_jam, jarum_menit dan jarum_detik. Gambar 3. Hasil konversi garis menjadi simbol Jangan lupa menggeser register point pada ujung garis, karena ini nanti akan digunakan untuk menentukan center dari rotasi movie clip. 4. Tambahkan angka dari satu sampai dengan dua belas untuk melengkapi jam analognya, serta atur posisinya supaya jaraknya sama antara angka yang satu dengan yang lain. Gambar 4. Tampilan setelah ditambahkan angka 5. Untuk memudahkan penyeleksian pada ketiga jarum, putar posisi jarum agar berbeda satu dengan lainnya dengan menggunakan free transform tool . Lalu drag ketiga jarum(garis) sehingga register point masing-masing jarum tepat berada di tengah-tengah lingkaran. Gambar 5. Menggeser ketiga jarum pada posisinya 6. Seleksi ketiga jarum secara bergantian dan beri nama masing-masing instance pada properties panel di bagian dengan jarumJam_mc , jarumMenit_mc dan jarumDetik_mc . Akhiran _mc menunjukkan bahwa symbol tersebut adalah movie clip sehingga saat penulisan action script nanti akan muncul code hint action-nya yang akan memudahkan anda. Gambar 6.Memberi nama Intances jarum 7. Buat layer baru dengan cara klik Insert>Timeline>Layer. Klik ganda layer yang baru anda buat untuk mengganti namanya menjadi jam digital , oh ya ganti juga nama layer yang satunya menjadi jam analog . Gambar 7. Menambahkan layer baru 8. Klik Text Tool untuk membuat Dynamic Text sebanyak lima buah, setelah itu pada properties panel di bagian var isi masing-masing dengan displayJam , displayHari , displayTanggal , displayBulan dan displayTahun . Gambar 8.1. Membuat Dynamic Text Gambar 8.2. Memberi nama instance display 9. Buat sebuah layer baru lagi, masih ingat kan caranya ?, ya sudah kalu lupa saya akan berbaik hati mengingatkan, klik Insert>Timeline>Layer OK?. Jika sudah beri nama layer tersebut dengan weker . Gambar 9.1 Menambahkan layer baru Masih dengan layer weker terseleksi klik Text Tool dua buah. untuk membuat Input Text sebanyak Gambar 9.2 Menambahkan Input Text Pada properties panel isi var masing-masing Input Text dengan wekerJam dan wekerMenit , eh jangan lupa juga pastikan anda mengklik Show border arround text supaya border input text terlihat oleh user pada waktu di eksekusi. Gambar 9.3 Mengisi var Input Text 10. Buat sebuah symbol baru, caranya tekan Ctrl+F8 pilih behaviornya movie clip lalu beri nama tombol untuk symbol yang baru anda buat lalu klik OK. Gambar 10.1 Membuat symbol baru Sekarang anda telah masuk pada edit symbol area, buat sebuah Static Text dengan Text tool pada frame1 OFF dan pada frame2 ON , kalau sudah silakan kembali ke stage utama sekarang anda telah mempunyai movie clip dengan nama tombol. Gambar 10.2 Menambahkan Satatic Text On Silakan anda tekan F11 untuk membuka Library dari sana drag movie clip tombol ke stage utama tepat disamping input text wekerJam dan beri nama instance dengan tombol_mc . Gambar 10.3 Memberi nama Instance tombol 11. Untuk mengakhiri bagian pertama tutorial ini silakan melengkapi dengan static text dan rectangel serta atur posisi semua elemen jam agar semenarik mungkin anda pasti lebih bagus dari punya saya, kalu saya sih seadanya saja. Gambar 11. Tampilan jam weker akhir Ah..... akhirnya selesai juga, sampai disini anda telah punya tampilan jam yang cukup untuk melanjutkan pada bagian kedua yaitu penulisan action script. Bagi yang sudah hasrat pengin selesai sabar dong, istirahatkan sejenak pikiran anda, bikin kopi atau teh juga boleh kok kita akan kembali setelah yang satu ini . II.2. PENULISAN ACTION SCRIPT Hallo Guys, segar rasanya setelah istirahat dan menikmati secangkir teh, gimana? sudah siap melanjutkan tugas yang tertunda? Harus siap dong. Baiklah kita sekarang telah menginjak-injak (eh salah, menginjak maksud saya ) bagian kedua yaitu menuliskan action script. Oke langsung saja. 1. Buat layer baru dan beri nama action masih dengan frame 1 terseleksi tekan F9 untuk membuka action panel. Ketikkan script berikut ini dengan benar dan jangan sampai keliru besar kecilnya huruf karena action script bersifat case sensitif. hariIni = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"); bulanIni = new Array(); bulanIni[0] = "Januari"; bulanIni[1] = "Februari"; bulanIni[2] = "Maret"; bulanIni[3] = "April"; bulanIni[4] = "Mei"; bulanIni[5] = "Juni"; bulanIni[6] = "Juli"; bulanIni[7] = "Agustus"; bulanIni[8] = "November"; bulanIni[9] = "Oktober"; bulanIni[10] = "September"; bulanIni[11] = "Desember"; Script di atas befungsi untuk membentuk array bernama hariIni dan bulanIni .Walaupun cara penulisannya berbeda tapi dua array di atas menghasilkan jenis array yang sama. Anggota dari array hariIni adalah minggu sampai dengan sabtu sedangkan anggota array bulanIni adalah Januari sampai dengan Desember. Sebuah array bisa dianalogkan dengan sebuah tabel dengan dua kolom di mana kolom 1 merupkan index dan kolom 2 merupakan nilainya. Index dimulai dari angka 0 dan seterusnya. 2. Seleksi layer jam analog lalu tekan tombol F8 untuk mengkonversi menjadi symbol dengan jenis movie clip dan beri nama jamAnalog_mc . Gambar 12. Mengkonversi menjadi symbol 3. Seleksi Movie clip jamAnalog_mc dan tekan tombol F9 utntuk masuk ke script panel lalu tambahkan script berikut ini. onClipEvent (enterFrame) { myTime = new Date(); tahun = myTime.getYear(); bulan = myTime.getMonth(); hari = myTime.getDay(); tanggal = myTime.getDate(); jam = myTime.getHours(); menit = myTime.getMinutes(); detik = myTime.getSeconds(); mili_detik = myTime.getMilliseconds(); if (jam<10) { jam = "0"+jam; } if (menit<10) { menit = "0"+menit; } if (detik<10) { detik = "0"+detik; } if (mili_detik<10) { mili_detik = "00"+mili_detik; } else if (mili_detik<100) { mili_detik = "0"+mili_detik; } _root.displayJam = jam+" : "+menit+" : "+detik+" : "+mili_detik; _root.displayTahun = tahun+Number(1900); _root.displayBulan = _root.bulanIni[bulan]; _root.displayTanggal = tanggal; _root.displayHari = _root.hariIni[hari]; count = mili_detik; this.jarumDetik_mc._rotation = detik*6; this.jarumMenit_mc._rotation = menit*6+((detik*6)/60); this.jarumJam_mc._rotation = jam*30+((menit*6)/12); } Script di atas menggunkan event handler enterFrame, artinya akan dilakukan terus-menerus. 4. Klik ganda pada Movie Clip tombol_mc, nah sekarang anda telah masuk pada edit symbol area, buat dua buah layer baru dan beri nama action dan label . Klik pada frame 1 milik layer action dan tekan F9, di action panel ketikkan script berikut : kondisi="OFF"; stop(); Pendek ya script-nya? biar pendek tapi bisa manghentikan movie clip tombol_mc, sehingga tidak teru-menerus di play. Selanjutnya klik kanan pada frame 2 tetap pada layer action, dan akan muncul menu pop up, pilih Insert Keyframe dan tekan F9, di action panel isikan script sama seperti di atas, yaitu kondisi="ON"; stop(); 5. Klik pada frame1 milik layer label, dan pada panel Propeties di bagian Fame Label isikan OFF . Selanjutnya klik kanan pada frame 2 , pada pop up menu klik Insert Keyframe . Pada panel Properties di bagian Label isikan ON . Gambar 13. Menambahkan frame label 6. Klik ganda di area kosong, sekarang anda telah kembali pada stage utama. Klik frame1 milik layer action dan tekan F9, lalu tambahkan script berikut ini : kondisi = "OFF"; tombol_mc.enabled; tombol_mc.onRelease = function() { if (kondisi == "OFF") { _root.tombol_mc.gotoAndStop("ON"); kondisi = "ON"; } else if (kondisi == "ON") { _root.tombol_mc.gotoAndStop("OFF"); kondisi = "OFF"; } }; 7. Klik pada movie clip jamAnalog_mc dan tekan F9, pada panel action tambahkan script berikut ini : if (_root.wekerJam == jam & _root.wekerMenit == menit & _root.kondisi == "ON") { mySound = new Sound(); mySound.attachSound("bell"); mySound.start(0, 1); } Anda harus menempatkan script di atas dalam event handler, karena bila berada di luar event handler enterframe akan terjadi error. Oh ya saya hapir lupa bahwa anda juga harus mengimport sebuah file suara, boleh wav atau mp3 usahakan cari suara yang nyaring sehingga bila weker berbunyi akan terdengar jelas. Cara mengimport file suara adalah, klik file>Import>Import to Library. Lalu cari file yang akan anda gunakan sebagai suara weker, dan klik OK. Gambar 14. Mengimpor file suara 8. Setelah itu periksa apakah file tadi telah masuk di library, caranya tekan F11. Jika telah masuk ke dalam library, klik kanan pada file suara tersebut maka akan muncul menu pop up lalu klik Linkage . Pada Linkage Properties beri centang pada kotak Export for Action Script dan pada Identifier ketikkan bell lalu klik OK. Hal ini berguna supaya file tersebut bisa diakses oleh action script tanpa harus berada di stage. Jadi pada saat action script dieksekusi maka file suara tadi akan dipanggil dan dimainkan. Gambar 15. Memberi linkage file suara Ahhh..... akhirnya selesai juga, lega rasanya sekarang silakan anda mengetes apakah sudah bisa berjalan seperti yang diinginkan atau belum. Untuk mengetes sudah tahu kan caranya ? ya, betul tekan tombol Ctrl+Enter kalau belum bisa berarti ada yang salah, mungkin anda salah ketik besar kecilnya huruf atau mungkin saya yang salah ketik atau kurang, kalau memang ada salah-salah kata mohon maaf. Semoga dengan tutorial ini memacu anda untuk berkreasi terutama menggunakan action script. OUR EMOTION IS INFLUENCED BY OUR MOTION, SO KEEP ON MOVIN III. REFERENSI [1] Macromedia Flash MX Professional 2004 manual help. [2] Wijaya, Didik. Hutasoit, Andar Parulian. Februari 2003. Tips dan Trik Macromedia Flash MX dengan Action Script. PT Elex Media Komputindo. Jakarta. BIOGRAFI PENULIS Ahmad Muzaki. Lahir di Tulungagung, 10 Juni 1983. Menamatkan SMU di SMUN 1 Kedungwaru, Tulungagung pada tahun 2002. Saat ini sedang menyelesaikan program S1 Teknik Informatika di STT Pomosda, Nganjuk. Penulis sedang menekuni pemrograman PHP dan Action Script Flash untuk dikolaborasikan. Informasi lebih lanjut tentang penulis ini bisa didapat melalui: Email: zk_zakia@yahoo.co.uk