Memanfaatkan Fitur Drawing API Pada Flash

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’.

buat tombol palet warna

pensil

penghapus

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:

hasil

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. 8)

Iklan

18 thoughts on “Memanfaatkan Fitur Drawing API Pada Flash

  1. Bang, faisal….terima kasih atas inspirasi ilmunya……
    saya mau tanya bagaimana kalo action buat tombol penghapus untuk sebagian gambar saja…
    bagaimana biar space canvasnya diatur biar tidak mencoret-coret di space yang lain, dicontohnya bang faisal kan tombol pensilnya bisa mencoret permukaan tombol…
    pensilnya biar ada di atas coretan bagaimana bang?
    kalo menyimpan data dalam bentuk gambar bgmana caranya yaa?
    setau saya dengan sharedobject hanya untuk data teks… nah kalo data gambar bgmana bang
    kalo tombol fill color bgmana bang?
    terima kasih…

  2. @Arief adi widodo
    Untuk buat penghapus seperti itu buat saja pensil yg warnanya putih (0xFFFFFF) dengan ketebalan garis ditambah, bisa atur di lineStyle()..
    Nantinya, dengan background yg putih, warna putih yang menimpa warna lain di bawahnya akan tampak seperti menghapus..

    @Dhek DhyCha
    Bisa diatur aja depth-nya movieclip pensil harus jauh lebih besar dari movieclip garis supaya pensil selalu diatas..

  3. abang…
    bisa bikin flash menulis bahasa arab ga?…
    ntar ad kata misalnya taroma…
    trus ntar user nggambar (drawing) arabnya di aplikasi flashnya…
    trus klo dah selesai dicocokin bener apa nggak…

    klo tau kirim email y bang…
    klo g tau y saran2nya aj bang…
    thanx…
    hehehe…

  4. assalamu’alaikum..
    salam kenal bang faisal..

    senang bisa melihat blog yg seperti ini 😀

    jangan sungkan untuk berkunjung ke blog saya, dengan harapan kita bisa saling berbagi ilmu, karena sepertinya concern kita terhadap flash sama.. 🙂

    – ruly

  5. @cumi
    kalau untuk aplikasi mengggambar bebasnya bisa dengan cara seperti di atas, tapi untuk nyocokin si gambar dengan tulisan yg benarnya mungkin perlu teknik tersendiri lagi…

    @ga
    sama2 KK ga

    @rulyardiansyah
    wa’alaikumsalam..
    salam kenal juga bang rulyardiansyah..

    senang juga bisa mendapat komentar dari master.. 😀

    wah sip pisan, siap2.. 8)

    -F4154LMAN

  6. asssalamu’alaikm… bang 🙂
    gmana caray buat fungsi simpan gambar dengn formt .jpg /.png, biar apa yg dicoret-coret tadi bisa di lihat hasilnya ??mkasih n slam kenal 🙂

  7. Bang faisal saya mau belajar nih cara membuat media belajar menulis huruf dan angka menggunakan adobe flash.

    Seperti aplikasi marbel..
    Ditunggu ya bang tutorialnya.

    Terimakasih

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s