Membuat Aplikasi Paint Draw dengan adobe flash

Sudah lama sekali saya tidak membuat postingan yang berkaitan dengan Adobe Flash, dan baru kali ini saya membuat postingan mengenai flash. Baiklah langsung saja ke TKP.

Disini kita aka mencoba membuat program paint sederhana dengan memanfaatkan drawing api.
Pertama, kita buat Toolbox sederhana seperti gambar berikut:

• Aktifkan Rectangle Tool. Setting Properti dengan, stroke color :No, Fill Color: #EDEDED, Round: 5px. Buat kotak persegi panjang.

• Tambahkan objek lain seperti menambahkan label “Fl” dengan warna border merah dan area putih pada bagian tengah kotak.

• Seleksi semua objek di atas kemudian Konversi menjadi symbol Movieclip. Beri nama “Toolbox”.

Percantik tampilan toolbox dengan menambahkan filter Drop Shadow. Dengan memilih menu Window > Propertise > Filter. Klik tanda ‘+’ kemudian pilih Drop Shadow.

• Buat gambar pencil kemudian ubah menjadi movie clip. Pada instance name beri nama “pencil_mc” 

• Masuk menu edit symbol movie clip pencil. Buat keyframe baru pada frame 2. Buat tampilan yang berbeda pada pencil seperti gambar berikut:  

• Pada frame 1, beri action stop(); lalu kembali ke scene utama.

• Lakukan langkah 9-11 untuk membuat objek garis lainnya dengan ketebalan yang berbeda.

 

• Yang terakhir kita buat palet warna, untuk membuatnya kita cukup memanfaatkan komponen ColorPicker yang sudah tersedia pada flash. Lakukan dengan memilih menu Windows > Components. Pada bagian User Interfaces, drag ColorPicker ke dalam stage.

 

• Pada instance name, beri nama “paletColor”.

• Setelah semua objek selesai dibuat, atur hingga tampak seperti gambar berikut: 

1. Pertama, kita definisikan variable dan nilai awal.

   1	//variable

   2	var _canvas:Sprite;

   3	var setX:int;

   4	var setY:int;

   5

   6	var drawPen:Boolean=false;

   7	var lineStyle1:Boolean=true;

   8	var lineStyle2:Boolean=false;

   9	var lineStyle3:Boolean=false;

2. Selanjutnya kita buat kanvas atau area kerja menggambar dengan luas yang sama dengan stage.

   1	//setting canvas

   2	_canvas=new Sprite();

   3	_canvas.graphics.beginFill(0xffffff);

   4	_canvas.graphics.lineStyle(2,0x000000);

   5	_canvas.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);

   6	_canvas.graphics.endFill();

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

   01	//memulai menggambar pada kondisi tombol mouse ditekan

   02	_canvas.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

   03	function onDown(event:MouseEvent)

   04

   {

   05	if(drawPen)

   06

   {

   07	setX=event.localX;

   08	setY=event.localY;

   09	_canvas.graphics.moveTo(setX,setY);

   10	_canvas.addEventListener(MouseEvent.MOUSE_MOVE, onMove);

   11

   }

   12

   }

   13	function onMove(event:MouseEvent)

   14

   {

   15	_canvas.graphics.lineTo(event.localX,event.localY);

   16	event.updateAfterEvent();

   17

   }

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.

   01	addEventListener(Event.ENTER_FRAME, onFrame);

   02	pencil_mc.addEventListener(MouseEvent.CLICK, aktifDrawPen);

   03	line1_mc.addEventListener(MouseEvent.CLICK, line1Aktif);

   04	line2_mc.addEventListener(MouseEvent.CLICK, line2Aktif);

   05	line3_mc.addEventListener(MouseEvent.CLICK, line3Aktif);

   06

   07	function aktifDrawPen(event:MouseEvent)

   08

   {

   09	if(drawPen==false)

   10

   {

   11	drawPen=true;

   12	pencil_mc.gotoAndStop(2);

   13

   }

   14	else if(drawPen==true)

   15

   {

   16	drawPen=false;

   17	pencil_mc.gotoAndStop(1);

   18

   }

   19

   }

   20

   21	function line1Aktif(event:MouseEvent)

   22

   {

   23	lineStyle1=true;

   24	lineStyle2=false;

   25	lineStyle3=false;

   26

   }

   27	function line2Aktif(event:MouseEvent)

   28

   {

   29	lineStyle1=false;

   30	lineStyle2=true;

   31	lineStyle3=false;

   32

   }

   33	function line3Aktif(event:MouseEvent)

   34

   {

   35	lineStyle1=false;

   36	lineStyle2=false;

   37	lineStyle3=true;

   38

   }

   39

   40	function onFrame(event:Event)

   41

   {

   42	if(lineStyle1)

   43

   {

   44	line1_mc.gotoAndStop(2);

   45	_canvas.graphics.lineStyle(2,paletColor.selectedColor);

   46

   }

   47

   else

   48

   {

   49	line1_mc.gotoAndStop(1);

   50

   }

   51	if(lineStyle2)

   52

   {

   53	line2_mc.gotoAndStop(2);

   54	_canvas.graphics.lineStyle(4,paletColor.selectedColor);

   55

   }

   56

   else

   57

   {

   58	line2_mc.gotoAndStop(1);

   59

   }

   60	if(lineStyle3)

   61

   {

   62	line3_mc.gotoAndStop(2);

   63	_canvas.graphics.lineStyle(6,paletColor.selectedColor);

   64

   }

   65

   else

   66

   {

   67	line3_mc.gotoAndStop(1);

   68

   }

   69

   }

5. Terakhir, kita tambahkan event MOUSE_UP untuk mengakhiri event menggambar pada saat tomol mouse di lepas.

   1	_canvas.addEventListener(MouseEvent.MOUSE_UP, onUp);

   2	function onUp(event:MouseEvent)

   3

   {

   4	if(drawPen)

   5

   {

   6	_canvas.graphics.lineTo(event.localX,event.localY);

   7	_canvas.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);

   8

   }

   9

   }

. Silahkan Test Movie Sekarang
source fla disini






http://flashindonesia.com