Anda di halaman 1dari 24

VISI (2011) 19 (3) 666-688 PERANCANGAN APLIKASI EDITOR GRAFIS COMIC PAGEMAKER BERBASIS VISUAL Sanco Simanullang dan

Darwis Robinson Manalu ABSTRACT


Comic is pictorial storybook many is liked by also ad lt! Comic s ally made by dra"n by a artist and t#e scenario is made by a "riter! In t#is time comp ter can processed pict res "ell! So to simpli$y comic depiction can se a comic editor! In desi%n a comic editor so$t"are t#at can make pict re like anot#er application! &#is so$t"are is e' iped "it# $acilities tools like te(t) "ord balloon) caricat re model) special e$$ect $acilities) and template $rame $o nd on t#is so$t"are can speed p and sa*e time in co rse o$ comic desi%n maker! +es lt t#at %ot $rom t#is article ser*e t#e p rpose o$ tool to make comic! --------------,ey"ords-

1. PENDAHULUAN 1.1. Latar Belakang Salah satu proses pembelajaran dan pengembangan pada anak dapat dengan meningkatkan minat baca seperti pada bacaan komik ( cerita ber%ambar). Dalam pembuatannya melibatkan seorang seniman yang mempunyai keahlian menggambar dan mempunyai ide dalam membuat alur cerita komik. Pada awalnya komik dibuat dengan cara menggambarnya terlebih dahulu pada media seperti kertas. Seiring dengan perkembangan teknologi grafis dengan bantuan komputer maka komik sudah dirancang dengan menggunakan komputer. Berbagai so$t"are yagn digunakan telah tersedia dan terus berkembang. asil penggambaran dengan menggunakan so$t"are komputer mempunyai beberapa keuntungan karena format disimpan dalam bentuk digital sehingga mudah diedit kembali tanpa harus menggambar keseluruhan gambar kembali. Selain itu dalam proses pemilihan warna lebih mudah dimana tanpa perlu mencampur cat-cat pada palet warna untuk mendapatkan warna yang diinginkan. Selain itu beberapa tools yang tersedia juga memudahkan para desi%ner karena adanya template yang telah jadi untuk membuat gambar kartun. 1. . Ma!ala" Sesuai dengan latar belakang di atas! maka yang menjadi masalah adalah bagaimana membuat sebuah aplikasi yang dapat memudahkan proses penggambaran atau pengeditan gambar sehingga hasilnya dapat digunakan untuk keperluan pembuatan komik. "#$ %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 1.#. Bata!an Ma!ala" Pada perancangan ini! pembahasan dan cakupannya dibatasi pada, ". asil gambar yang dibuat hanya dapat disimpan dalam format Bitmap (B-P). +. .ntuk proses ndo dan redo hanya dapat dilakukan satu kali saja. /ersedia fasilitas 0opy! Paste! dan 0ut. *. Selain itu juga tersedia opsi untuk menangkap ( capt re) screen untuk diinput sebagai gambar. $. .ntuk keperluan latar belakang (back%ro nd) gambar dapat di-import dengan format $ile 1&2! 3P41! B-P! 5-2. #. .ntuk perancangan perangkat lunak tersebut digunakan bahasa pemrograman 6isual Basic 7.(. 1. $ Met%&%l%g' Pen(ele!a'an Ma!ala" .ntuk menyelesaikan masalah maka dilakukan beberapa tahapan sebagai berikut , ". -engumpulkan bahan pustaka yang berbagai sumber seperti buku-buku! paper dan "ebsite. +. -empelajari algoritma dan cara kerja dari proses $ilterin% dan efek khusus. *. -erancang ser inter$ace program. $. -elakukan penulisan kode program dalam bahasa 6isual Basic. #. -enguji aplikasi yang telah dirancang. 7. -enampilkan hasil perancangan . TIN)AUAN PUSTAKA .1. Pengert'an C'tra 0itra adalah suatu proyeksi scene tiga dimensi ke dalam permukaan dua dimensi. Scene didefinisikan sebagai kumpulan objek tiga dimensi dengan pengaturan geometris dan biasanya diatur secara fisik oleh hukum alam. ( +inaldi . nir) 0itra dapat direpresentasikan ke dalam citra analog dan citra digital. 0itra analog biasanya ditampilkan oleh garis-garis raster hori8ontal (1ambar +."). /iap garis dibentuk oleh sinyal analog yang membawa 9ariasi berkelanjutan dari intensitas cahaya sepanjang garis hori8ontal dalam objek tiga dimensi aslinya.

Ga*+ar .1 C'tra Anal%g "## %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 0itra digital dibentuk oleh sekumpulan angka dalam array dua dimensi. /iap angka menggambarkan warna dari tiap titik dalam gambar sesuai dengan mode warna yang digunakan. /itik-titik ini disebut pi(el yang merupakan singkatan dari pict re element (elemen gambar)

Ga*+ar . C'tra D'g'tal 1ambar di atas menunjukkan citra digital yang menggunakan +$-bit warna tiap pi(el-nya. +$-bit warna dibagi ke dalam tiga bagian sebesar )-bit! tiap bagian merupakan representasi intensitas warna dasar yaitu merah! hijau! dan biru (:1B). ;omputer digital bekerja dengan angka-angka presisi terhingga! dengan demikian hanya citra dari kelas-kelas diskrit yang dapat diolah dengan komputer! citra dari kelas tersebut lebih dikenal sebagai citra digital. 0itra digital selalu harus merupakan hasil langsung dari rekaman suatu sistem. /erkadang hasil rekaman data bersifat kontinu seperti gambar pada monitor tele9isi! foto sinar-< dan lain sebagainya. =leh karena itu untuk mendapatkan suatu citra digital maka diperlukan suatu proses kon9ersi! sehingga citra tersebut selanjutnya dapat diproses melalui komputer. /niati . rni (1992 - 0) Pengert'an Peng%la"an C'tra >da tiga bidang studi utama yang menangani pengolahan data berbentuk gambar atau citra! yaitu, 1rafika ;omputer! Pengolahan 0itra! dan Pengenalan Pola (Pa9lidis). ;arena pengenalan pola sering merupakan juga bagian dari pengolahan citra seperti misalnya pada proses klasifikasi! maka pembedaan tiga bidang studi tersebut berubah menjadi, 1rafika ;omputer! Pengolahan 0itra! dan 6isi ;omputer (3ain)? di mana Pengenalan Pola menjadi bagian dari Pengolahan 0itra dan juga bagian dari ;omputer 6isi. ubungan ketiga bidang studi tersebut dapat digambarkan sebagai diagram di bawah ini. 1rafika komputer banyak melakukan proses yang bersifat sintesis yang mempunyai ciri data masukan berbentuk deskriptif dengan keluaran hasil proses yang berbentuk gambar. Sebagai contoh adalah proses penggambaran perspektif suatu obyek tiga dimensi! yang menggunakan data masukan berupa koordinat titik-titik yang membentuk obyek tersebut ? kemudian melalui proses transformasi tiga dimensi menghasilkan gambar obyek tiga dimensi sebagai hasil keluarannya. 0ontoh aplikasi dari teknik grafika komputer ini banyak dijumpai pada proses disain di bidang enjinering dan banyak pula ditemui di bidang seni. "#7 %%%%%%%%%%%%% &SS' ()#*-(+(* . .1

VISI (2011) 19 (3) 666-688

Ga*+ar .# Diagram ubungan >ntara /iga Bidang Studi yang -elakukan Proses Pengolahan 1ambar

6isi komputer merupakan proses analisis citra yang cirinya merupakan kebalikan dari 1rafika ;omputer. Data masukan biasanya merupakan suatu citra atau gambar! dan proses yang dilakukan adalah proses penggalian struktur gambar dengan hasil keluaran yang bersifat deskriptif. Sebagai contoh! pengenalan jenis penyakit paru melalui citra sinar-< paru penderita. Pengolahan 0itra merupakan proses pengolahan dan analisis citra yang banyak melibatkan persepsi 9isual. Proses ini mempunyai ciri data masukan dan informasi keluaran yang berbentuk citra. Dalam kenyataannya! batas antara ketiga bidang studi di atas sulit untuk ditentukan. Sebagai contoh! dalam proses pembuatan film animasi! obyek dan proses animasinya diciptakan dengan teknik 1rafika ;omputer sedangkan pembuatan latar belakangnya dapat dilakukan dengan teknik Pengolahan 0itra. Di sini latar belakang gambar dapat dibuat secara sederhana melalui kombinasi proses digitisasi suatu foto dan proses 1oomin% atau scrollin%! atau dapat pula dengan teknik yang lebih rumit seperti pembuatan fraktal dan tekstur. Pembauran antara penggunaan teknik Pengolahan 0itra dan 1rafika ;omputer juga dapat dilihat pada proses penggabungan peta tematik dan peta kontur. 0ontoh lain! pada proses pengenalan obyek yang terkandung pada suatu citra? di mana proses segmentasi yang diperlukan merupakan bagian dari teknik Pengolahan 0itra dan proses pengenalan obyeknya merupakan bagian dari teknik 6isi ;omputer. (+inaldi . nir, . .$.1 F%r*at F'le C'tra BMP 2ormat $ile B-P merupakan format standar sistem operasi 5indows dan &B- =S@+. 2ormat ini mendukung mode warna dari 2itmap .ode hingga +32 .ode. B-P mudah dibuka dan disimpan! tetapi ada beberapa aturan khusus yang harus dicermati! diantaranya, ". 2ormat $ile ini menyimpan datanya secara terbalik! yaitu dari bawah ke atas +. 0itra dengan resolusi warna )-bit! lebar citra harus merupakan kelipatan dari $! bila tidak maka pada saat penyimpanan akan ditambahkan beberapa byte pada data hingga merupakan kelipatan dari $. *. 0itra dengan resolusi warna +$-bit! urutan penyimpanan tiga warna dasar adalah biru! hijau! merah (B! 1! :). Aebar citra dikalikan dengan * harus "#B %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 merupakan kelipatan dari $! bila tidak maka pada saat penyimpanan akan ditambahkan beberapa byte pada data hingga merupakan kelipatan dari $. B-P mendukung pemampatan r n len%t# encodin% (:A4) 2ormat $ile B-P secara jelas dapat dilihat pada tabel berikut ini,

$.

Ta+el .1 F%r*at F'le BMP


Na*e Hea&er Signature 2ile Si8e :eser9ed Data =ffset In0% Hea&er Si8e 5idth eight Planes Bit0ount S'-e "$ bytes + bytes $ bytes $ bytes $ bytes $( bytes $ bytes $ bytes $ bytes + bytes + bytes De!.r'/t'%n CB-D 2ile Si8e in bytes .nused (E () 2ile =ffset to :aster 5indows Structure, B&/->P&'2= 4>D4: Si8e of &nfo eader E $( Bitmap 5idth Bitmap eight 'umber of planes ( E ") Bits per PiFel " E monocrome palette! 'um0olors E " $ E $ bit palleti8ed! 'um0olors E "7 ) E ) bit palleti8ed! 'um0olors E +#7 "7 E "7 bit :1B! 'um0olors E 7##*7 +$ E +$ bit :1B! 'um0olors E "7 /ypes of 0ompression ( E B&%:1B (no compression) " E B&%:A4) () bit :A4 encoding) + E B&%:A4$ ($ bit :A4 encoding) (compressed) Si8e of &mage &t is 9alid to set this E ( if compressed E ( ori8ontal :esolution, PiFels@meter 6ertical :esolution, PiFels@meter 'umber of actually used colors 'umber of important colors E ( all Present only if info. BitsPerPiFel ) 0olor should be ordered by importance :ed &ntensity 1reen &ntensity Blue &ntensity .nused ( E () /he PiFel Data

0ompression

$ bytes

&mageSi8e <piFelsPerGpiFelsPer0olors.sed 0olor&mportan t C%l%r Ta+le

$ bytes $ bytes $ bytes $ bytes $ bytes

$ H 'um0olors (bytes) :ed " byte 1reen " byte Blue " byte :eser9ed " byte :epeated 'um0olors /imes &nfo.&mageSi8e Ra!ter Data (bytes) (+inaldi . nir)

"#) %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688

Pengert'an K%*'k ;omik! merupakan sejumlah gambar-gambar yang dirangkai menjadi suatu cerita. ;ebanyakan komik juga termasuk sejumlah teks! dimana muncul sebagai dialog ataupun caption. Secara tipikal komik mempunyai seorang tokoh utama dalam cerita. ;ebanyakan komik masih berfokus pada humor! sebagian yang lain melibatkan masalah politik! hobi! pembunuhan! petualangan! dan hubungan antarmanusia. Dalam bentuk dasarnya! komik terdiri atas garis sederhana yang digambar membentuk suatu karakter dan scene. ;omik mempunyai bentuk yang identik dengan kartoon. Dimana perbedaannya kartoon mempunyai efek animasi. ;omik juga berhubungan dengan animasi! dimana jika dibuat ke dalam bentuk film maka komik akan menjadi suatu animasi. 0ara ini dibuat dengan merekam sejumlah still image hasil penggambaran. ;omik yang ada di koran juga disebut comic strip! secara tipikal muncul dalam bentuk sel berbentuk persegi dengan tiga atau empat bagian yang disebut dengan panel. Panel diatur dalam bentuk baris yang dibaca dari kiri ke kanan seperti halnya dengan teks. Buku komik adalah komik dengan ukuran booklet yang lebih menarik biasanya halamannya berwarna dan menceritakan lebih banyak cerita. Buku komik juga ditulis dengan cara yang sama seperti comic strip! tetapi buku komik sering menampilkan panel dengan bentuk yang berbeda dan ukuran dan dapat dibaca secara 9ertikal ataupun hori8ontal. ;ebanyakan komik surat kabar harian diterbitkan enam hari dalam satu minggu dalam warna hitam putih! dimana khusus untuk hari -inggu dibuat berwarna. Sedangkan buku komik kebanyakan dicetak dengan halaman berwarna.

.1

1ambar +.$ ;omik -utt dan 3eff

-utt dan 3eff pertama kali muncul sebagai -r. >. -utt pada bulan 'o9ember "I(B dengan judul San 2rancisco 0hronicle. ;omik Bud 2isher strip diperkenalkan kepada umum dalam bentuk karton di surat kabar! dan menjadi komik strip harian pertama yang paling sukses di >merika Serikat. .ntuk memuaskan permintaan! surat kabar ini menerbitkan koleksi dari karton dan pada "#I %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 tahun "I"" koleksi -utt dan 3eff merupakan salah satu buku komik yang diterbitkan pertama kali. #. PEMBAHASAN DAN PERANCANGAN #.1 . Pe*+a"a!an Pada bagian pembahasan ini akan dijelaskan mengenai proses perancangan dari aplikasi editor komik. >plikasi editor komik yang dibuat ini diberi nama 0omic Page -aker karena program nantinya dibuat hanya dapat menyunting dan menggambarkan untuk satu halaman komik. Secara umum aplikasi ini mirip dengan aplikasi penyunting gambar seperti halnya dengan -icrosoft Paint untuk beberapa komponen tools-nya tetapi karena lebih ditujukan sebagai editor komik terdapat beberapa tools seperti untuk menyisipkan "ord balloon atau callo t! model karikatur! pembuatan $rame dan beberapa efek khusus untuk memanipulasi gambar. &ools yang dibuat dan dirancang juga ditambah dan melebihi fasilitas yang disediakan oleh Paint. Bentuk aplikasi 0omic Page -aker ini dapat digambarkan dengan diagram berikut,

1ambar *." Bentuk >plikasi 0omic Page -aker

#.1.1

K%*/%nen Uta*a >dapun tools utama atau basic tool yang terdapat pada bagian ini dapat dilihat pada gambar *.+. >dapun nama dan fungsi masing-masing dari tools tersebut adalah sebagai berikut, ". Era!e. Berfungsi untuk menghapus bagian tertentu dari gambar . +. Pen.'l. Berfungsi sebagai suatu pensil yang dapat digunakan untuk menggambar garis atau bentuk secara bebas. *. Br2!". Berfungsi sebagai layaknya kuas untuk menyapukan warna tertentu pada dra"in% area. $. S*2&ge. Berfungsi sebagai tool untuk membentuk efek seperti mencoreng sesuatu pada kertas. #. F'll C%l%r ata2 Fl%%& F'll. Berfungsi untuk memberikan warna tertentu pada suatu daerah yang tertutup. 7. Steal C%l%r atau C%l%r P'.ker. Berfungsi untuk mengambil warna tertentu pada dra"in% area. B. L'ne. Berfungsi untuk menggambar garis pada dra"in% area. "7( %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 ). El'/!. Berfungsi untuk menggambar elips pada dra"in% area. I. Re.tang2lar. Berfungsi untuk menggambar persegi dan persegi panjang pada dra"in% area. "(. Cl%ne T%%l. Berfungsi untuk mengklon atau mengkopi warna tertentu pada dra"in% area. "". Te3t. Berfungsi untuk menyisipkan te(t pada dra"in% area. "+. 4%%* atau Magn'0'er. Berfungsi untuk memperbesar atau memperkecil daerah tertentu pada dra"in% area. "*. Sele.t C%l%r. Berfungsi untuk memilih warna tertentu dengan memunculkan sebuah kotak dialog untuk memilih warna. "$. Un&%. Berfungsi untuk membatalkan perintah terakhir. "#. Re&%. Berfungsi untuk mengembalikan perintah terakhir yang telah dibatalkan. "7. P%l'g%n. Berfungsi untuk menggambarkan bentuk poligon "B. Bl%.k. Berfungsi untuk memblok atau memilih daerah persegi tertentu untuk dilakukan operasi seperti c t! copy! dan paste. "). S/ra(. Berfungsi untuk memberi efek seperti hasil semprotan kaleng cat. "I. St'/le Br2!". Berfungsi seperti kuas kepala kuas dengan bentuk khusus. +(. Tra.e. Berfungsi untuk melakukan proses tracin% di daerah dra"in% area. +". Ca/t2re. Berfungsi untuk menangkap screen dan menampilkan pada dra"in% area. Susunan basic tools pada aplikasi editor 0omic Page -aker ini dapat digambarkan sebagai berikut bagian kiri merupakan nomor yang merepresentasikan tool basic di sampingnya.

1ambar *.+ Basic /ools 4ditor ;omik 0omic Page-aker

;husus untuk bentuk Brush yang kepalanya dapat diganti masih mempunyai beberapa pilihan kepalanya yaitu seperti terlihat pada gambar *.* berikut. Penomoran di sampingnya digunakan sebagai penjelasan.

1ambar *.* Pilihan 3enis Brush pada /ool Brush

"7" %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 #.1. K%*/%nen Ta*+a"an /idak seperti editor Paint ataupun program pengolah gambar lainnya maka editor komik ini harus mempunyai fasilitas yang dapat digunakan untuk membuat komik sehingga beberapa bagian memudahkan ser dalam membuat dan merancang komik. 2asilits ad*anced tools pada program editor komik ini mencakup "ord ballon dan fasilitas $rame yang disebut dengan comic border yang biasanya merupakan tampilan bingkai yang terdapat pada suatu komik. Susunan ad*anced tools pada aplikasi editor 0omic Page -aker ini dapat digambarkan sebagai berikut bagian kiri merupakan nomor yang merepresentasikan tool basic di sampingnya.

1ambar *.$ >d9anced /ools pada 0omic Page-aker

Pada gambar di atas terlihat bahwa fasilitas "ord balloon yang disediakan terdapat enam buah yang merupakan "ord balloon yang paling banyak digunakan. Sedangkan comic border standarnya terdapat * buah. .ntuk bentuk "ord balloon dan comic border dengan bentuk yang lain maka user dapat membuatnya sendiri dengan menggunakan basic tools. #.1.# M%&el Kar'kat2r -odel karikatur dalam program ini adalah template kartun yang telah jadi. -odel karikatur dapat langsung diimport ke dalam dra"in% area. -odel karikatur bertujuan untuk mempermudah ser dalam menggambar gambar kartun karena gambar dasarnya telah tersedia. Pada program ini model karikatur yang tersedia hanya empat buah saja. /etapi juga tersedia opsi untuk mengimport langsung dari $ile melalui -enu J &mport. Berikut ini merupakan empat contoh model karikatur yang disediakan dalam program ini.

"7+ %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688

1ambar *.# 0ontoh -odel ;arikatur

#.

Peran.angan Pada bagian perancangan akan dijelaskan hal yang menyangkut perancangan aplikasi editor komik. Pada bagian ini akan dijelaskan mengenai rancangan tampilan. Bagian rancangan ini akan dibahas mengenai perancangan $orm dan perancangan yang menyangkut komponen aplikasi 0omic Page -aker ini. #. .1 Peran.angan F%r* 2orm yang dirancang pada program ini terdiri atas ) (delapan) $orm yaitu $orm utama! $orm te(t tool! $orm #ori1ontal r ler! $orm *ertical r ler! $orm trace! $orm color replacement! dan $orm splas# screen. /ampilan utama yang dibuat harus sederhana dan jelas! sehingga pemakai tidak bingung. Pembuatan aplikasi editor komik dilakukan pada bahasa pemrograman 6isual Basic dalam lingkungan -S-5indows! sehingga bentukbentuk standar dari tombol dan "indo" mengikuti standar dari -S-5indows. 1ambar *.7 berikut ini adalah bentuk rancangan $orm utama yang dipakai dalam aplikasi editor komik, #. . F2ng!' Pe*+a.aan P'3el C'tra .ntuk melakukan pembacaan pi(el dan mengambil nilai :1B dari citra asli maka digunakan fungsi 5indows >P& (/pplication 4ro%rammin% Inter$ace). 5indows >P& terdiri atas fungsi! pesan! struktur data! jenis data! dan statement yang dapat dipakai untuk membuat aplikasi yang berjalan di bawah sistem operasi 5indows. Bagian dari >P& yang paling banyak dipakai adalah elemen kode untuk pemanggilan fungsi >P& dari 5indows. &ni termasuk deklarasi prosedur (untuk fungsi atau rutin 5indows)! definisi ser-de$ined type (untuk struktur data yang akan di-pass ke fungsi)! dan deklarasi konstanta (nilai yang di-pass dan dikembalikan oleh fungsi). 2ungsi yang berhubungan dengan ini yaitu K1etPiFelL dan KSetPiFelL. 2ungsi ini merupakan rangkaian fungsi yang termasuk dalam 1D& ( 3rap#ical "7* %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 5e*ice Inter$ace) yaitu fungsi untuk memanipulasi grafik 5indows termasuk untuk pengolahan dan menampilkan citra ke layar.( .icroso$t 6indo"s /4I) ;edua fungsi ini dirangkum ke dalam sebuah pustaka yaitu berupa file DAA (Dynamic Aink Aibrary) K1D&*+.DAAL. 2ile ini merupakan jenis pustaka *+-bit 5indows.

1ambar *.7 Prototype 2orm .tama

Sebelum dapat dipakai maka kedua fungsi tersebut harus terlebih dahulu dideklarasikan di 6isual Basic. Bentuk deklarasinya dalam bahasa 6isual Basic seperti pada baris kode di bawah ini. Public Declare Function GetPixel Lib "gdi32" (ByVal hdc As Long, ByVal As Long, ByVal ! As Long" As Long Public Declare Function #etPixel Lib "gdi32" (ByVal hdc As Long, ByVal As Long, ByVal ! As Long, ByVal cr$olor As Long" As Long 2ungsi >P&, 1etPiFel berfungsi mengambil nilai :1B pi(el dari koordinat tertentu pada citra "7$ %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 Parameter, a. hdc merupakan properti 5indows operatin% en*ironment yang dipakai untuk menangani de*ice conte(t. b. < merupakan koordinat pi(el hori8ontal dari citra c. G merupakan koordinat pi(el 9ertikal dari citra 1D&*+.DAA SetPiFel berfungsi membentuk pi(el berwarna pada koordinat a. hdc merupakan properti 6indo"s operatin% en*ironment yang dipakai untuk menangani de*ice conte(t. b. < merupakan koordinat pi(el hori8ontal dari citra c. G merupakan koordinat pi(el 9ertikal dari citra d. cr0olor merupakan nilai long dari warna 1D&*+.DAA

Pustaka, 2ungsi >P&, tertentu Parameter,

Pustaka, #. .#

M%&2l Unt2k Menangan' Gra0'k 1rafik yang dibuat untuk model karikatur ini semuanya merupakan format bitmap. Sebelum di-load untuk dipakai maka grafik-grafik tersebut harus dipecah atas bagian-bagian yang diinginkan. .ntuk melakukan hal ini maka digunakan rutin >P& (/pplication 4ro%rammin% Inter$ace) 5indows yang dapat menangani bitmap. .ntuk itu perlu dideklarasikan terlebih dahulu jenis data objek bitmap seperti terlihat pada baris kode di bawah ini.
$onst B%&'GB ( )* $onst D%B&'GB&$+L+'# ( ) ,y-e 'GB./AD rgbBlue As Byte rgbGreen As Byte rgb'ed As Byte rgb'eser0ed As Byte 1nd ,y-e ,y-e B%,2AP%3F+41AD1' 56) bytes bi#i7e As Long bi8idth As Long bi4eight As Long biPlanes As %nteger biBit$ount As %nteger bi$o9-ression As Long bi#i7e%9age As Long bi PelsPer2eter As Long bi!PelsPer2eter As Long bi$lr/sed As Long bi$lr%9-ortant As Long 1nd ,y-e ,y-e B%,2AP%3F+ b9i4eader As B%,2AP%3F+41AD1' b9i$olors As 'GB./AD

"7# %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


1nd ,y-e

Setelah itu baru dipakai fungsi untuk memanipulasi bitmap dengan deklarasi ke 6isual Basic dengan perintah berikut, .ntuk membentuk objek bitmap dapat dipakai perintah sebagai berikut,
Declare Function $reate$o9-atibleD$ Lib "gdi32" (ByVal hD$ As Long " As Long

.ntuk membentuk objek bitmap dapat dipakai perintah sebagai berikut,


Declare Function #elect+b:ect Lib Long, ByVal h+b:ect As Long" As Long "gdi32" (ByVal hD$

As

.ntuk menghapus objek bitmap fungsinya adalah


Declare Function Delete+b:ect Lib "gdi32" (ByVal h+b:ect As Long" As Long

.ntuk melalukan penyalin bitmap yang satu ke bitmap yang lain fungsinya adalah,

Declare Function BitBlt Lib "gdi32" ( ByVal hDestD$ As Long, ByVal x As Long, ByVal y As Long, ByVal n8idth As Long, ByVal n4eight As Long, ByVal h#rcD$ As Long, ByVal x#rc As Long, ByVal y#rc As Long, ByVal d;'o- As Long " As Long

$. ALGORITMA DAN HASIL $.1 . Alg%r't*a Pada bagian ini akan dijelaskan algoritma dari aplikasi editor komik. Secara umum editor komik yang dibuat ini mengandung beberapa bagian yang menjadi inti dari aplikasi! yakni ! &si harga awal atau inisialisasi nilai? -ouse down atau /ombol mouse ditekan? -ouse mo9e atau -ouse digerakkan dan -ouse up atau tombol mouse dilepas. >lasan untuk menjelaskan intinya adalah agar algoritma yang disajikan bersifat umum dan tidak terikat kepada teknik pengkodean suatu bahasa pemrograman! walaupun dibatasi hanya dalam lingkungan -S-5indows.

A. Alg%r't*a M%2!e D%5n Start


%te9(<, %te9(2, %te9(3, %te9(6, %te9(>, %te9(?, %te9(A,

Pen ,ool= Line ,ool= Flood Fill ,ool= Polygon ,ool= 1raser ,ool= Bloc@ ,ool= Bloc@ 2o0e ,ool=

"77 %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


%te9(B, Alt ( ), Coo9 ,ool= %te9(B, Alt ( <, /n7oo9 ,ool= %te9(D, ,ext ,ool= %te9(<), Box ,ool= %te9(<<, 1lli-se ,ool= %te9(<2, Pic@ $olor ,ool= Call Konversi(X,Y) ke (CX,CY). Eon0ersi 8indo;(,o-,LeFt,Botto9,'ight" dan #@ala @e 8indo;Coo9(C,o-,CLeFt,CBotto9,C'ight"= 2ode ga9bar(true= $ 2($ = $!2($!= $ 3($ = $!3($!= If not (%te9(A or %te9(B" Copy Image Memori Layar ke Memori Satu untuk Undo. Endif. If %te9(< ,entu@an lebar garis= ,entu@an ;arna garis= Pixel($ ,$!"= Endif. If %te9(2 ,entu@an lebar garis= ,entu@an ;arna garis= Endif. If %te9(3 ,entu@an ;arna isian= FloodFill($ ,$!"= Endif. If %te9(6 'eset array(A"= $()= A($"(-ixel($ ,$!"= ,entu@an lebar garis(<= ,entu@an ;arna garis= Endif. If %te9(> Tentukan Lebar Pengha us. ,entu@an ;arna latarbela@ang= 1rase($ ,$!"= Endif. If %te9(? 'eset array(A"= $()= A($"(($ ,$!"= ,entu@an lebar garis(<=

"7B %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


,entu@an ;arna(-utih= Endif. If %te9(A If Blocked and Mouse berada dalam kotak block(BTop,BLeft,BBottom,B ig!t" $li-area(true= Else $li-area(False= Endif If $li-area ,entu@an batas ga9bar hasil -otongan(,o-,LeFt,Botto9,'ight"= ,o-2(,o-= LeFt2(LeFt= 'ight2('ight= Botto92(Botto9= ,o-3(,o-= LeFt3(LeFt= 'ight3('ight= Botto93(Botto9= 2o0eonce(False= Endif. Endif. If %te9(B If #oom Mode and $lt%& Eon0ersi( ,!" @e ($ ,$!"= #@ala(#@alaG<= %F #@alaH< Konversi osisi CX,CY dan !kala ke "indo#(To ,Left,$otto%,&ight). Konversi "indo#(To ,Left,$otto%,&ight) dan !kala ke "indo#'oo%('To ,'Left,'$otto%,'&ight). $o-y %9age 2e9ori Ga9bar Asli(,o-,LeFt,Botto9,'ight" @e 2e9ory Layar(C,o-,CLeFt,CBotto9,C'ight"= Else 'oo% (ode)false. $o-y %9age 2e9ori Ga9bar Asli(,o-,LeFt,Botto9,'ight" @e 2e9ory Layar(,o-,LeFt,Botto9,'ight"= Endif. Else If 3ot Coo9 2ode dan Alt() #@ala(#@alaI<= Konversi osisi CX,CY dan !kala ke "indo#(To ,Left,$otto%,&ight).

"7) %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


Konversi "indo#(To ,Left,$otto%,&ight) dan !kala ke "indo#'oo%('To ,'Left,'$otto%,'&ight). $o-y %9age 2e9ori Ga9bar Asli(,o-,LeFt,Botto9,'ight" @e 2e9ory Layar(C,o-,CLeFt,CBotto9,C'ight"= Endif. Endif. Endif. If %te9(D Buka dialog Te't. Endif If %te9(<) Tentukan Lebar (aris. ,entu@an 8arna Garis= ,entu@an 8arna %sian= 2ode Garis or= Endif. If %te9(<< Tentukan Lebar (aris. ,entu@an 8arna Garis= ,entu@an 8arna %sian= 2ode Garis or= Endif. If %te9(<2 A9bil 8arna -ada Pixel($ ,$!"= Endif. End.

B. Alg%r't*a M%2!e M%6e


!tart Konversi(X,Y) ke (CX,CY). Konversi "indo#(To ,Left,$otto%,&ight) dan !kala ke "indo#'oo%('To ,'Left,'$otto%,'&ight). If 2ode ga9bar If %te9(< Line($ 2,$!2" @e ($ ,$!"= $ 2($ = $!2($!= Endif. If %te9(2 2ode garis or= Line($ 2,$!2" @e ($ ,$!"= Endif. If %te9(6 Line($ 2,$!2" @e ($ ,$!"= $ 2($ = $!2($!= $($I<=

"7I %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


A($"(($ ,$!"= Endif. If %te9(> 1rase($ ,$!"= Endif. If %te9(? Line($ 2,$!2" @e ($ ,$!"= $ 2($ = $!2($!= $($I<= A($"(($ ,$!"= Endif. If %te9(A If Bloc@ed %F Co *(ode Dx($ G$ 2= Dy($!G$!2= ,o-2(,o-2Idy= Botto92(Botto92Idy= LeFt2(LeFt2Idx= 'ight2('ight2Idx= %si 2e9ori Dua dengan ;arna -utih= $o-y%9age2ode(co-y= $o-y %9age 2e9ori #atu(,o-2,LeFt2,'ight2,Botto92" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode(3ot(2e9ori 19-at" or (2e9ori Dua"= $o-y %9age 2e9ori 19-at(,o-,LeFt,'ight,Botto9" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode((2e9ori ,iga" and (2e9ori Dua"= $o-y %9age 2e9ori ,iga(,o-,LeFt,'ight,Botto9" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode(co-y= $o-y %9age 2e9ori #atu(,o-3,LeFt3,'ight3,Botto93" @e 2e9ori G Layar(,o-3,LeFt3,'ight3,Botto93"= $o-y%9age2ode($o-y= $o-y %9age 2e9ori Dua(,o-2,LeFt2,'ight2,Botto92" @e 2e9oriG Layar(,o-2,LeFt2,'ight2,Botto92"= $ 2($ = $!2($!= ,o-3(,o-2= LeFt3(LeFt2= 'ight3('ight2= Botto93(Botto92=

"B( %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


1ndiF= Else Dx($ G$ 2= Dy($!G$!2= ,o-2(,o-2Idy= Botto92(Botto92Idy= LeFt2(LeFt2Idx= 'ight2('ight2Idx= %si 2e9ori Dua dengan ;arna -utih= $o-y%9age2ode(co-y= $o-y %9age 2e9ori #atu(,o-2,LeFt2,'ight2,Botto92" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode(3ot(2e9ori 19-at" or (2e9ori Dua"= $o-y %9age 2e9ori 19-at(,o-,LeFt,'ight,Botto9" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode((2e9ori ,iga" and (2e9ori Dua"= $o-y %9age 2e9ori ,iga(,o-,LeFt,'ight,Botto9" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= If 3ot 2o0eonce $o-y%9age2ode(co-y= Co * I%age (e%ori !atu(To +,Left+,&ight+,$otto%+) ke (e%ori, La*ar(To +,Left+,&ight+,$otto%+). Tinggi)$otto%,To . Lebar)&ight,Left. Buat 2e9ori #e9entara(,inggi,Lebar"= Buat 2e9ori #e9entara2(,inggi,Lebar"= %si 2e9ori #e9entara dengan ;arna latar bela@ang= $o-y 2e9ori Layar(,o-,LeFt,Botto9,'ight" @e 2e9ori #e9entara2(),),,inggi,Lebar"= $o-y%9age2ode(3ot(2e9ori 19-at" or (2e9ori #e9entara2"= $o-y 2e9ori 19-at(,o-,LeFt,Botto9,'ight" @e 2e9ori #e9entara2(),),,inggi,Lebar"= $o-y%9age2ode((2e9ori 19-at" or (2e9ori #e9entara"= $o-y 2e9ori 19-at(,o-,LeFt,Botto9,'ight" @e 2e9ori #e9entara(),),,inggi,Lebar"= $o-y%9age2ode((2e9ori #e9entara2" and (2e9ori #e9entara"= $o-y 2e9ori #e9entara2(),),,inggi,Lebar" @e 2e9ori #e9entara(),),,inggi,Lebar"= $o-y%9age2ode($o-y=

"B" %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


$o-y 2e9ori #e9entara(),),,inggi,Lebar" @e 2e9ori Layar(,o-3,LeFt3,Botto93,'ight3"= 2o0eonce(true= Else $o-y%9age2ode(co-y= $o-y %9age 2e9ori #atu(,o-3,LeFt3,'ight3,Botto93" @e 2e9oriG Layar(,o-3,LeFt3,'ight3,Botto93"= Endif. $o-y%9age2ode($o-y= $o-y %9age 2e9ori Dua(,o-2,LeFt2,'ight2,Botto92" @e 2e9oriG Layar(,o-2,LeFt2,'ight2,Botto92"= $ 2($ = $!2($!= ,o-3(,o-2= LeFt3(LeFt2= 'ight3('ight2= Botto93(Botto92= Endif. Endif. If LastItem%) Dx($ G$ 2= Dy($!G$!2= ,o-2(,o-2Idy= Botto92(Botto92Idy= LeFt2(LeFt2Idx= 'ight2('ight2Idx= %si 2e9ori Dua dengan ;arna -utih= $o-y%9age2ode(co-y= $o-y %9age 2e9ori #atu(,o-2,LeFt2,'ight2,Botto92" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode(3ot(2e9ori 19-at" or (2e9ori Dua"= $o-y %9age 2e9ori 19-at(,o-,LeFt,'ight,Botto9" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode((2e9ori ,iga" and (2e9ori Dua"= $o-y %9age 2e9ori ,iga(,o-,LeFt,'ight,Botto9" @e 2e9oriG Dua(,o-2,LeFt2,'ight2,Botto92"= $o-y%9age2ode(co-y= $o-y %9age 2e9ori #atu(,o-3,LeFt3,'ight3,Botto93" @e 2e9oriG Layar(,o-3,LeFt3,'ight3,Botto93"= $o-y%9age2ode($o-y= $o-y %9age 2e9ori Dua(,o-2,LeFt2,'ight2,Botto92" @e 2e9oriG Layar(,o-2,LeFt2,'ight2,Botto92"= $ 2($ = $!2($!=

"B+ %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688


,o-3(,o-2= LeFt3(LeFt2= 'ight3('ight2= Botto93(Botto92= Endif. Endif. If Item%&* Ga9bar Eota@($ 2,$!2" @e ($ 3,$!3"= Ga9bar Eota@($ 2,$!2" @e ($ ,$!"= $ 3($ = $!3($!= Endif. If Item%&& Ga9bar 1lli-se($ 2,$!2" @e ($ 3,$!3"= Ga9bar 1lli-se($ 2,$!2" @e ($ ,$!"= $ 3($ = $!3($!= Endif. If Item%&+ 8arna(8arna pi'el($ ,$!"= Endif. Endif. End.

$.

Ha!'l &mplementasi sistem yang dilakukan mencakup atas implementasi perangkat keras dan perangkat lunak. A. Ta*/'lan Uta*a &engan K%*/%nen Da!ar /ampilan $orm utama seperti terlihat pada gambar $." berikut ini.

1ambar $." /ampilan Program Dengan Basic /oolboF

"B* %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 Seperti terlihat pada gambar $.+ program ini terdiri atas empat bagian yang merupakan ser inter$ace yang dapat digunakan oleh ser. Bagian pertama adalah menu dimana user dapat mengakses perintah-perintah tertentu. Bagian kedua di tengah program disebut sebagai dra"in% area yaitu daerah kerja tempat ser menggambar komiknya. Bagian ketiga adalah toolbo( dimana bagian ini berupa tool-tool yang dapat dipergunakan oleh ser untuk membuat komiknya. Bagian ini mempunyai dua bentuk pilihan yaitu basic toolbo( untuk tool dasar dan ad*anced tool untuk tool yang lebih khusus untuk menggambar komik. Bagian keempat terletak pada sisi kanan layar digunakan untuk memilih jenis garis dan pattern-nya. B. Ta*/'lan Uta*a &engan K%*/%nen Ta*+a"an /ampilan pada gambar $.+ berikut ini menggambarkan >d9anced tool bo( yang memuat beberapa jenis callo t dan komik $rame.

1ambar $.+ /ampilan Program Dengan >d9anced /oolboF

/ampilan pada gambar $.* berikut ini menggambarkan contoh pembuatan komik menggunakan aplikasi 0omic Page -aker ini.

"B$ %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688

1ambar $.* /ampilan asil Pembuatan ;omik Dengan 0omic Page-aker

1. SIMPULAN
1.1 Ke!'*/2lan Berdasarkan pembahasan dan hasil dapat diambil beberapa kesimpulan antara lain, ". >plikasi yang dirancang sangat membantu user dalam merancang sebuah gambar dan tulisan. +. Dengan menggunakan aplikasi editor desain komik ini maka proses pembuatan suatu komik menjadi lebih mudah karena beberapa tool yang tersedia dapat membantu ser lebih cepat dalam menggambar komik. +. asil penggambaran komik dengan menggunakan editor komik ini akan dihasilkan gambar dengan bentuk citra bitmap. DAFTAR PUSTAKA >l Bahra Bin Aadjamudin! +ekayasa 4ern%kat 7 nak! Penerbit 1raha &lmu! 0etakan Pertama! Gogyakarta! +((7 Darwis :. -analu) 4emro%raman Vis al 2asic 6!0 dan Crystal +eport ! 0itra Prima .tama! -edan! +((+ Darwis :. -analu! 4emro%raman . lti ser dilen%kapi .icroso$t /ccess dan S87 Ser*er 5an /cti*e( 5ata 9b:ect 6!0! Diktat ;uliah! +((# Darwis :. -analu! 4and an 4raktik m 4emro%raman Vis al 2asic 6!0! S/-&; Sisingamangaraja <&& -edan! +((7 "B# %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688 1albiati! Aouis! .ac#ine Vision and 5i%ital Ima%e 4rocessin% ; ndamental) Prentice all! 'ew! 3ersey! +((( ;enneth 4. ;endall! 3ulie 4. ;endal! /nalysis and 5esi%n! 2itif 4dition Pearson 4ducation &nc! 'ew 3ersey +((* -icrosoft! -icrosoft 5indows >pplication Programming &nterface (5indows >P&) -urni >niati! 4en%antar 4en%ola#an Citra! P/ 4leFmedia ;omputindo! 1ramedia 3akarta! "II+ :inaldi -unir! 4en%ola#an Citra 5i%ital den%an 4endekatan /l%oritmik ! Penerbit &nformatika! Bandung! +(($ :ichardus 4ko &ndrajit! -anajemen Sistem &nformasi dan /eknologi &nformasi! P/ 4leFmedia ;omputindo! 1ramedia 3akarta! +((( :aymond -cAeod 3r! 1eorge Schell! .ana%emet In$ormation System! 4ight 4dition Prentice all ! 'ew 3ersey! +((" Guswanto! 4emro%raman 3ra$is dan . ltimedia! Penerbit Prestasi Pustaka! Surabaya! +((+

"B7 %%%%%%%%%%%%% &SS' ()#*-(+(*

VISI (2011) 19 (3) 666-688

TENTANG PENULIS 7 San.% S'*an2llang8 ST8 MT8 Aulus S-" /eknik &nformatika .ni9ersitas 1unadarma 3akarta "III! Aulus Pascasarjana S+ -agister /eknik &ndustri .S. -edan +(($. Darwis :obinson -analu! S.;om! -.- adalah ;elahiran 'agurguran "( >pril "IB7 ;abupaten umbang asundutan adalah lulusan dari S/-&; Sisingamangaraja <&& Program Studi /eknik &nformatika dan Program Pasca Sarjana -agister -anajemen .ni9ersitas ;BP 'ommensen -edan. /elah menekuni penulisan karya ilmiah! jurnal dan buku-buku kuliah komputer sejak tahun "II) hingga saat ini. Sekarang ini bekerja sebagai Dosen ;opertis 5ilayah & '>D-Sumut dan sebagai ;onsultan &/0 pada 1ratika ;encana &ndonesia yang bergerak dalam bidang ;onsultan &/0. Sebagai Dosen juga mengajarkan -ata ;uliah Pemrograman 6isual! Database Programming 6isual! System >nalyst Design! -anagement System Database! -anagement &nformation System! Software 4ngineering! =bject =riented Programming! 5eb Programming! -ultiuser Programming! SMA Programming! P P dan :iset /eknologi &nformasi. Buku yang telah ditulis adalah Pemrograman 6isual Basic 7.(! Pemrograman -ultiuser! Program Paket 'iaga! Pemrograman 0@0NN. ingga saat ini terus melakukan pengembangan terhadap pengetahuan dengan melakukan penelitian di internet seiring dengan ;emajuan /eknologi &nformasi.

"BB %%%%%%%%%%%%% &SS' ()#*-(+(*