Membuat Aplikasi “PaintDraw” – Part #2

3 Comments

Pada tutorial pertama anda sudah membuat toolbox sederhana untuk menggambar. Sekarang kita beri action agar semuanya berfungsi.

  1. Pertama, kita definisikan variable dan nilai awal.
    //variable
    var _canvas:Sprite;
    var setX:int;
    var setY:int;
    
    var drawPen:Boolean=false;
    var lineStyle1:Boolean=true;
    var lineStyle2:Boolean=false;
    var lineStyle3:Boolean=false;
  2. Selanjutnya kita buat kanvas atau area kerja menggambar dengan luas yang sama dengan stage.
    //setting canvas
    _canvas=new Sprite();
    _canvas.graphics.beginFill(0xffffff);
    _canvas.graphics.lineStyle(2,0x000000);
    _canvas.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
    _canvas.graphics.endFill();
    addChildAt(_canvas,0);
  3. Kita tambahkan event mouse pada objek kanvas yang telah dibuat tadi. Event MOUSE_DOWN, akan menjalankan fungsi menggambar pada saat tombol mouse di klik.
    //memulai menggambar pada kondisi tombol mouse ditekan
    _canvas.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
    function onDown(event:MouseEvent)
    {
    	if(drawPen)
    	{
    		setX=event.localX;
    		setY=event.localY;
    		_canvas.graphics.moveTo(setX,setY);
    		_canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
    	}
    }
    function onMove(event:MouseEvent)
    {
    	_canvas.graphics.lineTo(event.localX,event.localY);
    	event.updateAfterEvent();
    }
  4. Kita beri event pada objek yang telah dibuat dengan kondisi true dan false. Jika drawPen bernilai true maka mode menggambar akan aktif. Sedangkan movieclip “line1Aktif”, “line2Aktif” dan “line3Aktif” berfungsi untuk mengatur ketebalan garis. Pada script paletColor.selectedColor berfungsi untuk menentukan warna garis sesuai warna palet yang di pilih.
    addEventListener(Event.ENTER_FRAME, onFrame);
    pencil_mc.addEventListener(MouseEvent.CLICK, aktifDrawPen);
    line1_mc.addEventListener(MouseEvent.CLICK, line1Aktif);
    line2_mc.addEventListener(MouseEvent.CLICK, line2Aktif);
    line3_mc.addEventListener(MouseEvent.CLICK, line3Aktif);
    
    function aktifDrawPen(event:MouseEvent)
    {
    	if(drawPen==false)
    	{
    		drawPen=true;
    		pencil_mc.gotoAndStop(2);
    	} 
    	else if(drawPen==true)
    	{
    		drawPen=false;
    		pencil_mc.gotoAndStop(1);
    	}
    }
    
    function line1Aktif(event:MouseEvent)
    {
    	lineStyle1=true;
    	lineStyle2=false;
    	lineStyle3=false;
    }
    function line2Aktif(event:MouseEvent)
    {
    	lineStyle1=false;
    	lineStyle2=true;
    	lineStyle3=false;
    }
    function line3Aktif(event:MouseEvent)
    {
    	lineStyle1=false;
    	lineStyle2=false;
    	lineStyle3=true;
    }
    
    function onFrame(event:Event)
    {
    	if(lineStyle1)
    	{
    		line1_mc.gotoAndStop(2);
    		_canvas.graphics.lineStyle(2,paletColor.selectedColor);
    	}
    	else
    	{
    		line1_mc.gotoAndStop(1);
    	}
    	if(lineStyle2)
    	{
    		line2_mc.gotoAndStop(2);
    		_canvas.graphics.lineStyle(4,paletColor.selectedColor);
    	}
    	else
    	{
    		line2_mc.gotoAndStop(1);
    	}
    	if(lineStyle3)
    	{
    		line3_mc.gotoAndStop(2);
    		_canvas.graphics.lineStyle(6,paletColor.selectedColor);
    	}
    	else
    	{
    		line3_mc.gotoAndStop(1);
    	}
    }
  5. Terakhir, kita tambahkan event MOUSE_UP untuk mengakhiri event menggambar pada saat tomol mouse di lepas.
    _canvas.addEventListener(MouseEvent.MOUSE_UP, onUp);
    function onUp(event:MouseEvent)
    {
    	if(drawPen)
    	{
    		_canvas.graphics.lineTo(event.localX,event.localY);
    		_canvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
    	}
    }
  6. Sekarang kita test Movie.
  7. Wohohoho.. kayaknya Photoshop bisa kesaingan nih,. Hehe,. :thumbup

Selamat Mencoba :)

VN:F [1.9.8_1114]
Rating: 8.6/10 (9 votes cast)
VN:F [1.9.8_1114]
Rating: +1 (from 1 vote)
Membuat Aplikasi "PaintDraw" - Part #2, 8.6 out of 10 based on 9 ratings

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

 

More from our blog

See all posts
3 Comments
  1. Reply

    Your comment is awaiting moderation.

    keren tapi kalau bikin penghapus gimana tuh?

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
  2. Reply

    keren, saya mau lihat sourcenya dulu biar ngga binggung.

    salam kenal

    VA:F [1.9.8_1114]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.8_1114]
    Rating: 0 (from 0 votes)
      • admin
      • January 18, 2013
      Reply

      Salam kenal gan :)

      VN:F [1.9.8_1114]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.8_1114]
      Rating: 0 (from 0 votes)
  3. Pingback: Membuat Aplikasi “PaintDraw” – Part #1 » Flash Indonesia

 

Leave a Comment

[+] kaskus emoticons nartzco