Memanfaatkan Fitur Drawing API Pada Flash

18Okt09

Membuat aplikasi tiruan MS Paint (tau kan? software preinstalled di Windows yg dipake buat menggambar, biasa diakses lewat Start Menu > Program > Accessories > Paint) tapi menggunakan Flash, emang bisa yah? wow, dulu pun saya sempat tidak tahu fitur Flash selain yang biasa digunakan untuk membuat CD interaktif, dan baru terbuka matanya setelah melihat demo game menggambar buatan kang Fathah.. wah ternyata Flash itu asyik ya?

Kalau kita eksplorasi lagi Flash+tombolF1 (manual helpnya Flash yg cukup lengkap) pada bagian Class MovieClip disana ada penjelasan bahwa Class MovieClip memiliki beberapa fungsi untuk menggambar (diistilahkan dengan Drawing API) seperti: beginFill(), beginGradientFill(), clear(), curveTo(), endFill(), lineTo(), lineStyle(), moveTo(), yang memungkinkan untuk menghasilkan perpaduan kurva, garis, dan warna pada stage hanya dengan menuliskan beberapa baris script.

Sebagai latihan ngoprek, kali ini kita akan coba buat aplikasi corat-coret (menggambar bebas) dengan 4 pilihan warna plus fitur hapus-semua. Pertama-tama, siapkan 4 buah button berbeda warna dengan format instance name ‘<sesuaiWarnanya>_btn’, sebuah movieclip bergambar pensil dengan instance name ‘pensil_mc’, dan sebuah button bergambar penghapus dengan instance name ‘penghapus_btn’.

Kemudian pada frame utama berikan script berikut:

this.createEmptyMovieClip("canvas_mc", 999);
var isDrawing:Boolean = false;
var warna:String = "0xFF0000";
var mouseListener:Object = new Object();
Mouse.addListener(mouseListener);
Mouse.hide();

mouseListener.onMouseDown = function(){
    canvas_mc.lineStyle(5, warna, 100);
    canvas_mc.moveTo(_xmouse, _ymouse);
    isDrawing = true;
};

mouseListener.onMouseMove = function(){
    if (isDrawing){
        canvas_mc.lineTo(_xmouse, _ymouse);
        updateAfterEvent();
    }
};

mouseListener.onMouseUp = function(){
    isDrawing = false;
};

pensil_mc.onMouseMove = function(){
    this._x = _xmouse;
    this._y = _ymouse;
    updateAfterEvent();
};

penghapus_btn.onRelease = function(){
    canvas_mc.clear();
};

biru_btn.onRelease = function(){
	warna = "0x003366";
}

merah_btn.onRelease = function(){
	warna = "0xFF0000";
}

hijau_btn.onRelease = function(){
	warna = "0x339900";
}

kuning_btn.onRelease = function(){
	warna = "0xFFFF00";
}

Oprekan ini saya adaptasi dari Flash help manual, untuk contoh source .FLA yg udah jadinya bisa didownload di http://www.box.net/shared/i6argdxhmq. Setelah dipublish, hasilnya kurang lebih akan seperti demikian:

Memang ini masih terlalu sederhana, baru sekadar membuat fitur corat-coret, karena itu selamat mempelajari lebih dalam dan silakan lengkapi kekurangan fitur-fiturnya untuk membuat tiruan MS Paint yang sempurna.

Filed under: ActionScript 2.0, Flash, Tutorial   |  4 Comments
Tags: Corat-coret, Drawing API, Flash Asyik, MS Paint