Proses membuat simulasi sederhana dengan memanfaatkan konsep drag dan drop seperti .swf di atas.
1) Buat MovieClip. Untuk membuat simulasi sederhana seperti di atas kita harus membuat MovieClip dan Button seperti gambar di bawah ini.
*Silahkan berimproviasi, ganti bentuk object sesuai keinginan. Juga tidak perlu mengikuti panamaan variabel yang panjang lebar karena saya melakukan hal tersebut untuk mempermudah dalam menjelaskan saja.
*Ukuran workspace di bawah ini adalah 400 x 300 px
 |
| Tampilan MovieClip dan Button yang Digunakan |
Keterangan :
_mc : artinya object tersebut bertipe MovieClip
_btn : artinya object tersebut bertipe Button
2) Code ActionScript 3. Namun sebelum itu perhatikan screen shoot penempatan urutan layer dari simulasi sederhana di atas agar lebih memberi gambaran.
 |
| Tampilan Layer-layer untuk Drag dan Drop |
Berikut adalah code Action Script 3-nya:
/*
[RS]
*/
import flash.events.MouseEvent;
[RS]
*/
import flash.events.MouseEvent;
//melakukan inisialisasi posisi awal dari object
//fungsi ini dibuat terutama untuk keperluan "me-reset posisi object"
function inisialisasi_posisi():void{
benar_mc.visible = false;
salah_mc.visible = false;
//set posisi awal lingkaran
lingkaran_mc.x = posisiawal_lingkaran_mc.x;
lingkaran_mc.y = posisiawal_lingkaran_mc.y;
//set posisi awal kotak
kotak_mc.x = posisiawal_kotak_mc.x;
kotak_mc.y = posisiawal_kotak_mc.y;
//set posisi awal poligon
poligon_mc.x = posisiawal_poligon_mc.x;
poligon_mc.y = posisiawal_poligon_mc.y;
}
inisialisasi_posisi();
//DRAG & DROP OBJECT
function dragdrop(object_mc:MovieClip):void
{
object_mc.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
object_mc.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
function startdrag(e:MouseEvent):void
{
e.currentTarget.startDrag();
}
function stopdrag(e:MouseEvent):void
{
e.currentTarget.stopDrag();
}
//set dragdrop
dragdrop(kotak_mc);
dragdrop(lingkaran_mc);
dragdrop(poligon_mc);
//test button
test_btn.addEventListener(MouseEvent.CLICK, test);
function test(e:MouseEvent):void
{
//jika semua object berada pada tempat yang benar
if(lingkaran_mc.hitTestObject(tempat_lingkaran_mc)== true &&
kotak_mc.hitTestObject(tempat_kotak_mc)== true &&
poligon_mc.hitTestObject(tempat_poligon_mc)== true)
{
benar_mc.visible = true;
salah_mc.visible = false;
}
else
{
benar_mc.visible = false;
salah_mc.visible = true;
}
}
//reset object ke posisi awal
reset_btn.addEventListener(MouseEvent.CLICK, reset);
function reset(e:MouseEvent):void
{
inisialisasi_posisi();
}
stop();
Penjelasan
Inisialiasi Posisi
Pada code AS3 di atas, awalnya kita membuat fungsi inisialisasi yang digunakan untuk menentukan posisi awal dari object yaitu dengan cara menyamakan koordinat x,y. Misalnya, kita mengeset posisi awal object kota, maka koordinat x,y dari kotak_mc disamakan dengan koordinat x,y posisiawal_kotak_mc.
Drag dan Drop
Untuk membuat drag dan drop kita juga memanfaatkan MOUSEEVENT. Ketika suatu object ditekan dan tahan (mouse down) maka fungsi startdrag() akan dijalankan yang kemudian akan mengaktifkan fungsi bawaan AS3 yaitu startDrag(). Fungsi bawaan tersebut lah yang membuat posisi object dapat dipindah. Dan sebaliknya, ketika tombol mouse dilepaskan (mouse up) maka fungsi bawaan AS3 yaitu stopDrag() akan dijalankan. Fungsi tersebut mengunci posisi terakhir object, yaitu sebelum tombol mouse dilepaskan.
Test
Fungsi test akan dijalankan ketika tombol test di klik. Fungsi test akan mengecek kesesuaian posisi object (kotak_mc, lingkaran_mc, poligon_mc) dengan posisi seharusnya (tempat_kotak_mc, tempat_lingkaran_mc, tempat_poligon_mc).
Reset
Ketika tombol reset di klik, maka fungsi reset akan dijalankan. Fungsi ini selanjutnya akan menjalankan fungsi inisialisasi_posisi() dimana fungsi ini digunakan untuk mengeset posisi awal ketiga object.
Sebenarnya movieClip posisiawal_kotak_mc, posisiawal_lingkaran_mc, posisiawal_poligon_mc dapat dihilangkan. Sebagai gantinya kita bisa menggantinya dengan nilai koordinat x,y sesuai posisi yang diinginkan untuk meletakkan object.
Namun di sini saya sedang mempraktekkan kepraktisan, keuntungan menggunakan ketiga movieclip tersebut adalah ketika kita ingin mengubah letak posisi awal object (kotak_mc, lingkaran_mc, poligon_mc) kita tinggal menggeser posisiawal_..._mc saja tanpa perlu direpotkan dengan melihat dan mengeset ulang koordinat x,y tiap object, sehingga tidak perlu mengutak-atik code AS3.
Sekian tutorial kali ini. Semoga bermanfaat. :)
[RS]
Klik Like & Share jika postingan ini bermanfaat