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. Layerlayer 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/stockimage-vector-millimeter-paper-grid-seamless-pattern-mm-square-size-patchimage39139021. 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();
}
}