Drag adalah fungsi yang memungkinkan user untuk menyeret sebuah objek ke tempat tertentu. Drag sering digunakan untuk megontrol objek dengan menyeretnya ke posisi yang diinginkan. Dengan drag method user dapat dengan mudah mengontrol objek untuk keperluan tertentu dalam aplikasi yang dibangun. Biasanya dragging dilakukan dengan kontrol melalui mouse. Berikut ini adalah method drag yang sering dan akan kita gunakan.
startDrag();
stopDrag();
Pada pembahasan kali ini kita akan membuat sebuah aplikasi sederhana bagaimana penerapan drag dalam aplikasi, diikuti dengan desain aset sederhana, penggunaan objek dan script tambahan untuk melengkapi fungsi drag dalam aplikasi yang kita bangun. Cekidot.
Silahkan jalankan Adobe Flash Professional CS 6 dan buka/buat dokumen baru dokumen ActionScript 3.0. Bagaimana cara memulai (pembuatan dokumen baru) Adobe Flash Professional CS 6 silahkan lihat pada tutorial Membuat Aplikasi Kalkulator dengan Flash ActionsScript 3.0. Di sana terdapat caranya :)
Pada praktik ini kita menggunakan dua tahap utama. Yakni Design Stage dan Coding. Setelah jendela kerja baru terbuka (stage). Kita dapat melakukan dua tahap utama tersebut:
1. Design Stage
Kita akan membuat stage (panggung) aplikasi seperti pada gambar 01 di bawah. Silahkan perhatikan.
 |
| Gambar 01 |
Perhatikan gambar 02 tampilan jendela stage kita di bawah ini.
 |
| Gambar 02 |
Berikut adalah langkah yang perlu dilakukan untuk membuatnya:
- Judul halaman pada stage. Kita dapat membuatnya dengan menggunakan tool text. Tekan tombol T pada keyboard atau pilih Text Tool pada bar tools. Pastikan di jendela properties jenis text adalah Static Text. Letakkan cursor pada stage kemudian klik pada bagian yang diiginkan. Kemudian ketik teks sesuai judul yang ingin kita buat.
- Garis. Objek ini merupakan pilihan saja, kita boleh membuatnya atau tidak. Tekan tombol N pada keyboard atau pilih Line Tool pada tools bar. Letakkan kursor pada stage kemudian tahan tombol kiri mouse pada posisi yang diinginkan dan tarik sampai pada posisi yang diinginkan. Lepaskankan tombol kiri mouse.
- Cara yang sama pada bagian 2. Namun objek ini sebaiknya kita buat karena nantinya ini akan menjadi simbol yang memiliki instance. Untuk itu klik kanan pada objek dan pilih Convert to Symbol (sebelum klik kanan pastikan aktif pada Selection Tool atau tekan tombol V pada keyboard). Beri nama simbol sesuai keinginan kita dan klik Ok. Selanjutnya beri nama instansi pada isian Instance Name pada panel Properties. Ketik “garisDrag”.
- Cara yang sama seperti bagian 1.
- Objek drag. Ini adalah objek yang akan kita drag nantinya. Gunakan Oval Tool dengan memilihnya pada Tools Bar atau cukup tekan tombol O pada keyboard. Arahkan kursor pada stage dan gambar sesuai keinginan. Dengan menahan tombol kiri mouse dan melepaskannya pada akhir penggambaran. Selanjutnya kita akan menjadikannya sebagai simbol dengan klik kanan pada objek (tekan tombol V pada keyboard sebelum klik kanan). Pilih Convert to Symbol dan beri nama simbol sesuai keinginan, klik Ok. kemudian pada panel Properties beri nama instance “objek”.
- Memberikan teks pada objek “objek”. Klik ganda pada objek kemudian ikuti cara A. Kemudian pastikan kembali ke scene 1 dengan meng-klik pada teks (tombol) Scene 1.
- Objek Teks. Cara yang sama seperti bagian 1. Tetapi di sini saya menggunakan jenis teks sebagai Dynamic Text. Anda boleh memilih dinamic atau static. Yang terpenting selanjutnya kita harus membuat objek ini sebagai symbol seperti cara sebelumnya. Berikan nama instance “alert” Instance Name. Kita dapat mengedit desain text pada panel.
Sebelum ke tahap selanjutnya jangan lupa untuk melakukan embeding fonts. Pilih tombol Embed.. pada panel Properties (lihat huruf X pada gambar 02), beri centang pada All dalam pilihan Character Ranges. Dan Klik Ok.
Buat layer baru dengan meng-klik tombol New Layer pada panel Timeline. Perhatikan huruf Y pada gambar 02. Klik kanan pada frame 1 layer 2 (ubah namanya menjadi action). Pilih menu Actions. Akan tampil jendela teks editor untuk membuat script kita.
2. Coding
2. Coding
Pertama-tama kita buat event listener agar kita dapat menentukan kejadian apa yang terjadi dan aksi apa yang berdampak pada kejadian tersebut. Kali kini kejadian yang terjadi adalah ketika kita melakukan mouse down (tahan tombol kiri mouse) dan mouse up (melepas tekanan pada tombol kiri mouse). Berikut adalah bentuk script-nya. Silahkan ketikkan script berikut pada text editor jendela Actions.
objek.addEventListener(MouseEvent.MOUSE_DOWN, dragMulai); //deklarasi fungsi/event mouse down
objek.addEventListener(MouseEvent.MOUSE_UP, dragHenti); //deklarasi fungsi/event mouse up
Selanjutnya kita harus menentukan aksi apa yang terjadi setelah kejadian pada scipt di atas. Kita dapat menentukannya dengan menuliskan fungsi dalam script di bawah ini. Silahkan ketikkan script berikut pada jendela Actions.
//ketika mouse down
function dragMulai(event:MouseEvent):void{
objek.startDrag();//code untuk memluai drag
}
//ketika mouse up
function dragHenti(event:MouseEvent):void{
objek.stopDrag(); //code untuk menghentikan drag
}
Perhatikanlah tulisan script di atas. Script untuk fungsi mulai drag dan stop drag sudah selesai kita buat. Cukup simpel bukan(?). tulisan berwarna biru (“objek”) merupakan nama instance dari objek, yakni objek yang kita beri fungsi drag.
Setelah script dasar untuk fungsi drag telah selesai kita buat. Selanjutnya kita melengkapi dengan mebuat fungsi tambahan, agar aplikasi kita lebih interaktif dan lebih keren. Mari kita buat fungsi tambahan sederhana.
Ketikkan script berikut pada jendela Actions:
//code untuk menyembunyikan atau menampilkan objek alert "Drag Sukses!!"
garisDrag.visible=false; //menyembunyikan objek garisDrag
alert.visible=false; //menyembunyikan objek alert
stage.addEventListener(Event.ENTER_FRAME, sukses);
function sukses(event:Event):void{
if(objek.y > garisDrag.y) //mengatur kondisi
{
alert.visible=true; //menampilkan objek alert
}
else{
alert.visible=false; //menyembunyikan objek alert
}
}
Tulisan berwarna biru (“garisDrag” dan “alert”) adalah nama instance dari objek-objek.
Silahkan test aplikasi dengan menekan Ctrl+Enter. Aplikasi telah selesai kita bangun. Silahkan lakukan eksperimen pada aplikasi yang telah kita bangun, mulai dari desain stage maupun fungsi dari script-nya.
0 komentar:
Post a Comment