Tutorial Flash : Membuat Simulasi Bangun Datar 2 Dimensi

Aplikasi 2 dimensi seperti segitiga atau persegi empat banyak dipakai dalam menjelaskan konsep bangun datar. Pada tulisan ini, saya akan mencoba berbagi kepada pembaca bagaimana membuat aplikasi bangun datar dimana kita dapat merubah setiap titik sudut dari bangun datar tersebut untuk dapat mengatur ukuran serta posisi bangun datar. Dalam tutorial kali ini, software yang akan  dipakai adalah Adobe Flash CS

LANGKAH 1

Buka aplikasi Adobe Flash CS (versi berapapun yang Anda punya). Pilih ActionScript 3.0 dan ubah ukuran panjang dan lebar aplikasi menjadi 800 x 480.

 

LANGKAH 2

Buat 4 buah layer dan beri nama masing-masing layer dengan "Actions", "Objects", "Buttons", "BackGround". Prinsipnya, saat kita akan membuat object, aktifkan layer "Objects", saat kita akan membuat tombol, aktifkan layer "Buttons" dan seterusnya. Layer-layer ini yang akan digunakan dalam tutorial ini, jika Anda inginmenambah bagian lain seperti halaman depan, Anda boleh menambah jumlah layer.

LANGKAH 3

Kita akan membuat latar belakang berupa grid. Agar lebih mudah, Anda dapat mendownload gambar kertas milimeter. Misal pada alamat berikut : http://www.dreamstime.com/stock-image-vector-millimeter-paper-grid-seamless-pattern-mm-square-size-patch-image39139021. Tampilkan kertas milimeter tersebut pada layer "BackGround" dengan cara klik File -Import - Import to Stage (Ctrl + R). Atur kertas meilimeter tersebut agar sesuai dengan ukuran file Anda. 

Klik gambar gambar kertas milimeter dan ubah menjadi movie clip dengan menekan F8.Beri nama BackGround_mc, Type : Movie Clip.

LANGKAH 4

Sekarang kita akan mulai membuat sebuah titik sudut dari bangun ruang. Titi sudut disini akan berfungsi sebagai tombol drag yang dapat digeser sehingga membentuk ukuran bangun datar baru. Buat benda bulat kecil berbentuk lingkaran pada layer "Objects" dengan ukuran 20x20 pixel. Warna fill dan stroke menyesuaikan dengan selera, namun saya sarankan untuk memilih warna yang kontras dengan warna background Anda.Ubah gambar lingakan tersebut menjadi tombol dengan menekan F8, pilih type : Button. Beri nama TB_Bulat.

Klik lagi TB_Bulat dan ubah kembali menjadi Movie Clip, ganti type menjadi Movie Clip dan pastikan titik registrasi berada di tengah, Beri nama movie clip ini dengan "MC_Bulat".

LANGKAH 5

Copy dan Paste benda bulat ini hingga menjadi 4 buah. Dalam tutorial ini saya hanya akan membuat 3 titik sudut, berarti bangun ruang yang akan terbentuk adalah segi empat (bisa persegi, persegi panjang, trapesium dll), Anda dapat menambah atau mengurangi sesuai kebutuhan. Pada bagian properti, beri nama movie clip ini dengan instance name "dot1".

Lakukan hal yang sama pada ketiga titik obek bulat lainnya dan beri nama masing-masing dot2, dot3, dan dot4.

LANGKAH 6

Sekarang kita akan menghubungkan setiap titik-titik sudut tersebut dengan garis hitam. Aktifkan layer actions dan tekan tombol F9 lalu ketikkan baris berikut pada Action Script Panel :

var isi:Shape = new Shape();
addChild(isi);
function draw_fill()
{
    isi.graphics.clear();
    isi.graphics.lineStyle(1, 0x000000, 0.8);
    isi.graphics.moveTo(dot1.x,dot1.y);
    isi.graphics.lineTo(dot2.x,dot2.y);
    isi.graphics.lineTo(dot3.x,dot3.y);
    isi.graphics.lineTo(dot4.x,dot4.y);
    isi.graphics.lineTo(dot1.x,dot1.y);
}
addEventListener(Event.ENTER_FRAME, fl_EnterFrameHandler);

function fl_EnterFrameHandler(event:Event):void
{
    draw_fill();
   
}

Tekan Ctrl+Enter untuk melihat hasilnya. Jika berhasil maka akan tampak seperti pada gambar di bawah :

LANGKAH 7

Langkah selanjutnya adalah memberikan warna fill yang dibatasi oleh setiap garis tersebut. Copas script berwarna merah di bawah ini dan sisipkan pada script yang sudah Anda ketik sebelumnya.
    
    isi.graphics.clear();
    isi.graphics.lineStyle(1, 0x000000, 0.8);
    isi.graphics.beginFill(0xB82A07,0.6);
    isi.graphics.moveTo(dot1.x,dot1.y);
    isi.graphics.lineTo(dot2.x,dot2.y);
    isi.graphics.lineTo(dot3.x,dot3.y);
    isi.graphics.lineTo(dot4.x,dot4.y);
    isi.graphics.lineTo(dot1.x,dot1.y);
    isi.graphics.endFill();
Jika berhasil, maka tampilan aplikasi Anda seharusnya menjadi seperti pada gambar di bawah .

LANGKAH 8

Sekarang kita akan menggerakkan setiap titik sudut (gambar lingkaran) dengan menggunakan mouse. Prinsip utama dari langkah ini adalah menjadikan setiap titik sudut sebagai objek yang dapat di geser (drag). Oleh karena itu, kita akan memakai fungsi startDrag dan stopDrag untuk melakukannya. Copy potingan script berwarna merah di bawah ini dan sisipkan di bawah script draw_fill();

function fl_EnterFrameHandler(event:Event):void
{
    draw_fill();
    dot1.addEventListener(MouseEvent.MOUSE_DOWN, f1_ClickToDrag);
    function f1_ClickToDrag(event:MouseEvent):void
    {
        dot1.startDrag();

    }
    stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);
    function fl_ReleaseToDrop(event:MouseEvent):void
    {
        dot1.stopDrag();
    }

    dot2.addEventListener(MouseEvent.MOUSE_DOWN, f2_ClickToDrag);
    function f2_ClickToDrag(event:MouseEvent):void
    {
        dot2.startDrag();
    }
    stage.addEventListener(MouseEvent.MOUSE_UP, f2_ReleaseToDrop);
    function f2_ReleaseToDrop(event:MouseEvent):void
    {
        dot2.stopDrag();
    }

    dot3.addEventListener(MouseEvent.MOUSE_DOWN, f3_ClickToDrag);
    function f3_ClickToDrag(event:MouseEvent):void
    {
        dot3.startDrag();
    }
    stage.addEventListener(MouseEvent.MOUSE_UP, f3_ReleaseToDrop);
    function f3_ReleaseToDrop(event:MouseEvent):void
    {
        dot3.stopDrag();
    }
    dot4.addEventListener(MouseEvent.MOUSE_DOWN, f4_ClickToDrag);
    function f4_ClickToDrag(event:MouseEvent):void
    {
        dot4.startDrag();
    }
    stage.addEventListener(MouseEvent.MOUSE_UP, f4_ReleaseToDrop);
    function f4_ReleaseToDrop(event:MouseEvent):void
    {
        dot4.stopDrag();
    }
}
Coba lakukan test movie, jika berhasil maka Anda dapat menggeser setiap titik sudut dari bangun datar Anda.

Bersambung...