Warna Background

Silahkan Pilih Background Warna Sesuai Keinginan Kamu :

Kamis, 14 Februari 2013

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
    2var _canvas:Sprite;
    3var setX:int;
    4var setY:int;
    5
    6var drawPen:Boolean=false;
    7var lineStyle1:Boolean=true;
    8var lineStyle2:Boolean=false;
    9var 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();
    7addChildAt(_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);
    03function 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}
    13function 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.
    01addEventListener(Event.ENTER_FRAME, onFrame);
    02pencil_mc.addEventListener(MouseEvent.CLICK, aktifDrawPen);
    03line1_mc.addEventListener(MouseEvent.CLICK, line1Aktif);
    04line2_mc.addEventListener(MouseEvent.CLICK, line2Aktif);
    05line3_mc.addEventListener(MouseEvent.CLICK, line3Aktif);
    06
    07function 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
    21function line1Aktif(event:MouseEvent)
    22{
    23    lineStyle1=true;
    24    lineStyle2=false;
    25    lineStyle3=false;
    26}
    27function line2Aktif(event:MouseEvent)
    28{
    29    lineStyle1=false;
    30    lineStyle2=true;
    31    lineStyle3=false;
    32}
    33function line3Aktif(event:MouseEvent)
    34{
    35    lineStyle1=false;
    36    lineStyle2=false;
    37    lineStyle3=true;
    38}
    39
    40function 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);
    2function 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

ARTIKEL TERKAIT:

Posting Lebih Baru Posting Lama Beranda

0 RESPON:

Posting Komentar

silahkan isi kolom komentar ini sebelum anda meninggalkan blog saya

mouse