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 adult. Comic usually made
by drawn by a artist and the scenario is made by a writer. In this time computer can
processed pictures well. So to simplify comic depiction can use a comic editor. In
design a comic editor software that can make picture like another application. This
software is equiped with facilities tools like text, word balloon, caricature model,
special effect facilities, and template frame found on this software can speed up and
save time in course of comic design maker. Result that got from this article serve the
purpose of tool to make comic.
---------------
Keywords:

1. PENDAHULUAN
1.1. Latar Belakang
Salah satu proses pembelajaran dan pengembangan pada anak dapat
dengan meningkatkan minat baca seperti pada bacaan komik (cerita bergambar).
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 software
yagn digunakan telah tersedia dan terus berkembang. Hasil penggambaran dengan
menggunakan software 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 designer karena adanya template yang telah jadi untuk
membuat gambar kartun.

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

154
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

1.3. Batasan Masalah

Pada perancangan ini, pembahasan dan cakupannya dibatasi pada:
1. Hasil gambar yang dibuat hanya dapat disimpan dalam format Bitmap
(BMP).
2. Untuk proses undo dan redo hanya dapat dilakukan satu kali saja. Tersedia
fasilitas Copy, Paste, dan Cut.
3. Selain itu juga tersedia opsi untuk menangkap (capture) screen untuk
diinput sebagai gambar.
4. Untuk keperluan latar belakang (background) gambar dapat di-import
dengan format file GIF, JPEG, BMP, WMF.
5. Untuk perancangan perangkat lunak tersebut digunakan bahasa
pemrograman Visual Basic 6.0.

1. 4 Metodologi Penyelesaian Masalah

Untuk menyelesaikan masalah maka dilakukan beberapa tahapan sebagai
berikut :
1. Mengumpulkan bahan pustaka yang berbagai sumber seperti buku-buku,
paper dan website.
2. Mempelajari algoritma dan cara kerja dari proses filtering dan efek
khusus.
3. Merancang user interface program.
4. Melakukan penulisan kode program dalam bahasa Visual Basic.
5. Menguji aplikasi yang telah dirancang.
6. Menampilkan hasil perancangan

2. TINJAUAN PUSTAKA
2.1. Pengertian Citra
Citra 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. (Rinaldi
Munir)
Citra dapat direpresentasikan ke dalam citra analog dan citra digital. Citra
analog biasanya ditampilkan oleh garis-garis raster horizontal (Gambar 2.1). Tiap
garis dibentuk oleh sinyal analog yang membawa variasi berkelanjutan dari
intensitas cahaya sepanjang garis horizontal dalam objek tiga dimensi aslinya.

Gambar 2.1 Citra Analog

155
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Citra digital dibentuk oleh sekumpulan angka dalam array dua dimensi.
Tiap angka menggambarkan warna dari tiap titik dalam gambar sesuai dengan
mode warna yang digunakan. Titik-titik ini disebut pixel yang merupakan
singkatan dari picture element (elemen gambar)

Gambar 2.2 Citra Digital

Gambar di atas menunjukkan citra digital yang menggunakan 24-bit warna
tiap pixel-nya. 24-bit warna dibagi ke dalam tiga bagian sebesar 8-bit, tiap bagian
merupakan representasi intensitas warna dasar yaitu merah, hijau, dan biru (RGB).
Komputer 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. Citra digital selalu harus
merupakan hasil langsung dari rekaman suatu sistem. Terkadang hasil rekaman
data bersifat kontinu seperti gambar pada monitor televisi, foto sinar-X dan lain
sebagainya. Oleh karena itu untuk mendapatkan suatu citra digital maka
diperlukan suatu proses konversi, sehingga citra tersebut selanjutnya dapat
diproses melalui komputer.
Aniati Murni (1992 : 5)

2.2.1 Pengertian Pengolahan Citra

Ada tiga bidang studi utama yang menangani pengolahan data berbentuk
gambar atau citra, yaitu: Grafika Komputer, Pengolahan Citra, dan Pengenalan
Pola (Pavlidis). Karena pengenalan pola sering merupakan juga bagian dari
pengolahan citra seperti misalnya pada proses klasifikasi, maka pembedaan tiga
bidang studi tersebut berubah menjadi: Grafika Komputer, Pengolahan Citra, dan
Visi Komputer (Jain); di mana Pengenalan Pola menjadi bagian dari Pengolahan
Citra dan juga bagian dari Komputer Visi. Hubungan ketiga bidang studi tersebut
dapat digambarkan sebagai diagram di bawah ini.
Grafika 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.
Contoh aplikasi dari teknik grafika komputer ini banyak dijumpai pada proses
disain di bidang enjinering dan banyak pula ditemui di bidang seni.

156
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Gambar 2.3 Diagram Hubungan Antara Tiga Bidang Studi yang Melakukan Proses
Pengolahan Gambar
Visi komputer merupakan proses analisis citra yang cirinya merupakan
kebalikan dari Grafika Komputer. 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-X paru penderita.
Pengolahan Citra merupakan proses pengolahan dan analisis citra yang
banyak melibatkan persepsi visual. 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
Grafika Komputer sedangkan pembuatan latar belakangnya dapat dilakukan
dengan teknik Pengolahan Citra. Di sini latar belakang gambar dapat dibuat secara
sederhana melalui kombinasi proses digitisasi suatu foto dan proses zooming atau
scrolling, atau dapat pula dengan teknik yang lebih rumit seperti pembuatan fraktal
dan tekstur. Pembauran antara penggunaan teknik Pengolahan Citra dan Grafika
Komputer juga dapat dilihat pada proses penggabungan peta tematik dan peta
kontur. Contoh lain, pada proses pengenalan obyek yang terkandung pada suatu
citra; di mana proses segmentasi yang diperlukan merupakan bagian dari teknik
Pengolahan Citra dan proses pengenalan obyeknya merupakan bagian dari teknik
Visi Komputer. (Rinaldi Munir)

2.2.4.1 Format File Citra BMP

Format file BMP merupakan format standar sistem operasi Windows dan
IBM OS/2. Format ini mendukung mode warna dari Bitmap Mode hingga RGB
Mode.
BMP mudah dibuka dan disimpan, tetapi ada beberapa aturan khusus yang
harus dicermati, diantaranya:
1. Format file ini menyimpan datanya secara terbalik, yaitu dari bawah ke atas
2. Citra dengan resolusi warna 8-bit, lebar citra harus merupakan kelipatan dari
4, bila tidak maka pada saat penyimpanan akan ditambahkan beberapa byte
pada data hingga merupakan kelipatan dari 4.
3. Citra dengan resolusi warna 24-bit, urutan penyimpanan tiga warna dasar
adalah biru, hijau, merah (B, G, R). Lebar citra dikalikan dengan 3 harus
157
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

merupakan kelipatan dari 4, bila tidak maka pada saat penyimpanan akan
ditambahkan beberapa byte pada data hingga merupakan kelipatan dari 4.
4. BMP mendukung pemampatan run length encoding (RLE)
Format file BMP secara jelas dapat dilihat pada tabel berikut ini:
Tabel 2.1 Format File BMP
Name Size Description
Header 14 bytes
Signature 2 bytes BM
File Size 4 bytes File Size in bytes
Reserved 4 bytes Unused (= 0)
Data Offset 4 bytes File Offset to Raster
40 bytes WindowsStructure:
Info Header
BITMAPINFOHEADER
Size 4 bytes Size of Info Header = 40
Width 4 bytes Bitmap Width
Height 4 bytes Bitmap Height
Planes 2 bytes Number of planes ( = 1)
BitCount 2 bytes Bits per Pixel
1 = monocrome palette, NumColors = 1
4 = 4 bit palletized, NumColors = 16
8 = 8 bit palletized, NumColors = 256
16 = 16 bit RGB, NumColors = 65536
24 = 24 bit RGB, NumColors = 16 M
Compression 4 bytes Types of Compression
0 = BI_RGB (no compression)
1 = BI_RLE8 (8 bit RLE encoding)
2 = BI_RLE4 (4 bit RLE encoding)
ImageSize 4 bytes (compressed) Size of Image
It is valid to set this = 0 if compressed = 0
XpixelsPerM 4 bytes Horizontal Resolution: Pixels/meter
YpixelsPerM 4 bytes Vertical Resolution: Pixels/meter
ColorsUsed 4 bytes Number of actually used colors
ColorImportan 4 bytes Number of important colors = 0 all
t
4 * NumColors Present only if info. BitsPerPixel 8
Color Table
(bytes) Color should be ordered by importance
Red 1 byte Red Intensity
Green 1 byte Green Intensity
Blue 1 byte Blue Intensity
Reserved 1 byte Unused ( = 0)
Repeated NumColors Times
Info.ImageSize The Pixel Data
Raster Data
(bytes)
(Rinaldi Munir)
158
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

2.5 Pengertian Komik

Komik, merupakan sejumlah gambar-gambar yang dirangkai menjadi
suatu cerita. Kebanyakan komik juga termasuk sejumlah teks, dimana muncul
sebagai dialog ataupun caption. Secara tipikal komik mempunyai seorang tokoh
utama dalam cerita. Kebanyakan 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. Komik mempunyai bentuk yang identik
dengan kartoon. Dimana perbedaannya kartoon mempunyai efek animasi. Komik
juga berhubungan dengan animasi, dimana jika dibuat ke dalam bentuk film maka
komik akan menjadi suatu animasi. Cara ini dibuat dengan merekam sejumlah still
image hasil penggambaran.
Komik 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 vertikal ataupun horizontal. Kebanyakan komik surat
kabar harian diterbitkan enam hari dalam satu minggu dalam warna hitam putih,
dimana khusus untuk hari Minggu dibuat berwarna. Sedangkan buku komik
kebanyakan dicetak dengan halaman berwarna.

Gambar 2.4 Komik Mutt dan Jeff

Mutt dan Jeff pertama kali muncul sebagai Mr. A. Mutt pada bulan
November 1907 dengan judul San Francisco Chronicle. Komik Bud Fisher strip
diperkenalkan kepada umum dalam bentuk karton di surat kabar, dan menjadi
komik strip harian pertama yang paling sukses di Amerika Serikat. Untuk
memuaskan permintaan, surat kabar ini menerbitkan koleksi dari karton dan pada

159
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

tahun 1911 koleksi Mutt dan Jeff merupakan salah satu buku komik yang
diterbitkan pertama kali.

3. PEMBAHASAN DAN PERANCANGAN

3.1 . Pembahasan
Pada bagian pembahasan ini akan dijelaskan mengenai proses
perancangan dari aplikasi editor komik. Aplikasi editor komik yang dibuat ini
diberi nama Comic Page Maker 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
Microsoft Paint untuk beberapa komponen tools-nya tetapi karena lebih ditujukan
sebagai editor komik terdapat beberapa tools seperti untuk menyisipkan word
balloon atau callout, model karikatur, pembuatan frame dan beberapa efek khusus
untuk memanipulasi gambar. Tools yang dibuat dan dirancang juga ditambah dan
melebihi fasilitas yang disediakan oleh Paint.
Bentuk aplikasi Comic Page Maker ini dapat digambarkan dengan
diagram berikut:

Gambar 3.1 Bentuk Aplikasi Comic Page Maker

3.1.1 Komponen Utama

Adapun tools utama atau basic tool yang terdapat pada bagian ini dapat
dilihat pada gambar 3.2. Adapun nama dan fungsi masing-masing dari tools
tersebut adalah sebagai berikut:
1. Erase. Berfungsi untuk menghapus bagian tertentu dari gambar.
2. Pencil. Berfungsi sebagai suatu pensil yang dapat digunakan untuk
menggambar garis atau bentuk secara bebas.
3. Brush. Berfungsi sebagai layaknya kuas untuk menyapukan warna
tertentu pada drawing area.
4. Smudge. Berfungsi sebagai tool untuk membentuk efek seperti
mencoreng sesuatu pada kertas.
5. Fill Color atau Flood Fill. Berfungsi untuk memberikan warna tertentu
pada suatu daerah yang tertutup.
6. Steal Color atau Color Picker. Berfungsi untuk mengambil warna
tertentu pada drawing area.
7. Line. Berfungsi untuk menggambar garis pada drawing area.

160
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

8. Elips. Berfungsi untuk menggambar elips pada drawing area.

9. Rectangular. Berfungsi untuk menggambar persegi dan persegi panjang
pada drawing area.
10. Clone Tool. Berfungsi untuk mengklon atau mengkopi warna tertentu
pada drawing area.
11. Text. Berfungsi untuk menyisipkan text pada drawing area.
12. Zoom atau Magnifier. Berfungsi untuk memperbesar atau memperkecil
daerah tertentu pada drawing area.
13. Select Color. Berfungsi untuk memilih warna tertentu dengan
memunculkan sebuah kotak dialog untuk memilih warna.
14. Undo. Berfungsi untuk membatalkan perintah terakhir.
15. Redo. Berfungsi untuk mengembalikan perintah terakhir yang telah
dibatalkan.
16. Poligon. Berfungsi untuk menggambarkan bentuk poligon
17. Block. Berfungsi untuk memblok atau memilih daerah persegi tertentu
untuk dilakukan operasi seperti cut, copy, dan paste.
18. Spray. Berfungsi untuk memberi efek seperti hasil semprotan kaleng cat.
19. Stiple Brush. Berfungsi seperti kuas kepala kuas dengan bentuk khusus.
20. Trace. Berfungsi untuk melakukan proses tracing di daerah drawing area.
21. Capture. Berfungsi untuk menangkap screen dan menampilkan pada
drawing area.
Susunan basic tools pada aplikasi editor Comic Page Maker ini dapat
digambarkan sebagai berikut bagian kiri merupakan nomor yang
merepresentasikan tool basic di sampingnya.

Gambar 3.2 Basic Tools Editor Komik Comic PageMaker

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

Gambar 3.3 Pilihan Jenis Brush pada Tool Brush

161
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

3.1.2 Komponen Tambahan

Tidak 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 user dalam membuat dan
merancang komik. Fasilits advanced tools pada program editor komik ini
mencakup word ballon dan fasilitas frame yang disebut dengan comic border yang
biasanya merupakan tampilan bingkai yang terdapat pada suatu komik.
Susunan advanced tools pada aplikasi editor Comic Page Maker ini dapat
digambarkan sebagai berikut bagian kiri merupakan nomor yang
merepresentasikan tool basic di sampingnya.

Gambar 3.4 Advanced Tools pada Comic PageMaker

Pada gambar di atas terlihat bahwa fasilitas word balloon yang disediakan
terdapat enam buah yang merupakan word balloon yang paling banyak digunakan.
Sedangkan comic border standarnya terdapat 3 buah. Untuk bentuk word balloon
dan comic border dengan bentuk yang lain maka user dapat membuatnya sendiri
dengan menggunakan basic tools.

3.1.3 Model Karikatur

Model karikatur dalam program ini adalah template kartun yang telah jadi.
Model karikatur dapat langsung diimport ke dalam drawing area. Model karikatur
bertujuan untuk mempermudah user dalam menggambar gambar kartun karena
gambar dasarnya telah tersedia. Pada program ini model karikatur yang tersedia
hanya empat buah saja. Tetapi juga tersedia opsi untuk mengimport langsung dari
file melalui Menu > Import. Berikut ini merupakan empat contoh model karikatur
yang disediakan dalam program ini.

162
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Gambar 3.5 Contoh Model Karikatur

3.2 Perancangan
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
form dan perancangan yang menyangkut komponen aplikasi Comic Page Maker
ini.

3.2.1 Perancangan Form

Form yang dirancang pada program ini terdiri atas 8 (delapan) form yaitu
form utama, form text tool, form horizontal ruler, form vertical ruler, form trace,
form color replacement, dan form splash screen.
Tampilan utama yang dibuat harus sederhana dan jelas, sehingga pemakai
tidak bingung. Pembuatan aplikasi editor komik dilakukan pada bahasa
pemrograman Visual Basic dalam lingkungan MS-Windows, sehingga bentuk-
bentuk standar dari tombol dan window mengikuti standar dari MS-Windows.
Gambar 3.6 berikut ini adalah bentuk rancangan form utama yang dipakai dalam
aplikasi editor komik:
3.2.2 Fungsi Pembacaan Pixel Citra
Untuk melakukan pembacaan pixel dan mengambil nilai RGB dari citra
asli maka digunakan fungsi Windows API (Application Programming Interface).
Windows API terdiri atas fungsi, pesan, struktur data, jenis data, dan statement
yang dapat dipakai untuk membuat aplikasi yang berjalan di bawah sistem operasi
Windows. Bagian dari API yang paling banyak dipakai adalah elemen kode untuk
pemanggilan fungsi API dari Windows. Ini termasuk deklarasi prosedur (untuk
fungsi atau rutin Windows), definisi user-defined type (untuk struktur data yang
akan di-pass ke fungsi), dan deklarasi konstanta (nilai yang di-pass dan
dikembalikan oleh fungsi).
Fungsi yang berhubungan dengan ini yaitu GetPixel dan SetPixel.
Fungsi ini merupakan rangkaian fungsi yang termasuk dalam GDI (Graphical

163
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Device Interface) yaitu fungsi untuk memanipulasi grafik Windows termasuk

untuk pengolahan dan menampilkan citra ke layar.(Microsoft Windows API)
Kedua fungsi ini dirangkum ke dalam sebuah pustaka yaitu berupa file
DLL (Dynamic Link Library) GDI32.DLL. File ini merupakan jenis pustaka
32-bit Windows.

Gambar 3.6 Prototype Form Utama

Sebelum dapat dipakai maka kedua fungsi tersebut harus terlebih dahulu
dideklarasikan di Visual Basic. Bentuk deklarasinya dalam bahasa Visual Basic
seperti pada baris kode di bawah ini.
Public Declare Function GetPixel Lib "gdi32"
(ByVal hdc As Long, ByVal X As Long, ByVal Y As
Long) As Long
Public Declare Function SetPixel Lib "gdi32"
(ByVal hdc As Long, ByVal X As Long, ByVal Y As
Long, ByVal crColor As Long) As Long
Fungsi API: GetPixel berfungsi mengambil nilai RGB pixel dari koordinat
tertentu pada citra

164
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Parameter: a. hdc merupakan properti Windows operating environment

yang dipakai untuk menangani device context.
b. X merupakan koordinat pixel horizontal dari citra
c. Y merupakan koordinat pixel vertikal dari citra
Pustaka: GDI32.DLL
Fungsi API: SetPixel berfungsi membentuk pixel berwarna pada koordinat
tertentu
Parameter: a. hdc merupakan properti Windows operating environment yang
dipakai untuk menangani device context.
b. X merupakan koordinat pixel horizontal dari citra
c. Y merupakan koordinat pixel vertikal dari citra
d. crColor merupakan nilai long dari warna
Pustaka: GDI32.DLL

3.2.3 Modul Untuk Menangani Grafik

Grafik 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. Untuk melakukan hal ini maka digunakan
rutin API (Application Programming Interface) Windows yang dapat menangani
bitmap. Untuk itu perlu dideklarasikan terlebih dahulu jenis data objek bitmap
seperti terlihat pada baris kode di bawah ini.
Const BI_RGB = 0&
Const DIB_RGB_COLORS = 0

Type RGBQUAD
rgbBlue As Byte
rgbGreen As Byte
rgbRed As Byte
rgbReserved As Byte
End Type
Type BITMAPINFOHEADER '40 bytes
biSize As Long
biWidth As Long
biHeight As Long
biPlanes As Integer
biBitCount As Integer
biCompression As Long
biSizeImage As Long
biXPelsPerMeter As Long
biYPelsPerMeter As Long
biClrUsed As Long
biClrImportant As Long
End Type
Type BITMAPINFO
bmiHeader As BITMAPINFOHEADER
bmiColors As RGBQUAD
165
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

End Type
Setelah itu baru dipakai fungsi untuk memanipulasi bitmap dengan
deklarasi ke Visual Basic dengan perintah berikut:
Untuk membentuk objek bitmap dapat dipakai perintah sebagai berikut:
Declare Function CreateCompatibleDC Lib "gdi32" (ByVal hDC
As Long ) As Long
Untuk membentuk objek bitmap dapat dipakai perintah sebagai berikut:
Declare Function SelectObject Lib "gdi32" (ByVal hDC As
Long, ByVal
hObject As Long) As Long
Untuk menghapus objek bitmap fungsinya adalah
Declare Function DeleteObject Lib "gdi32" (ByVal hObject As
Long) As
Long
Untuk melalukan penyalin bitmap yang satu ke bitmap yang lain fungsinya
adalah:
Declare Function BitBlt Lib "gdi32" ( ByVal hDestDC As Long,
ByVal x As Long, ByVal y As Long, ByVal nWidth As
Long,
ByVal nHeight As Long, ByVal hSrcDC As Long, ByVal
xSrc As
Long, ByVal ySrc As Long, ByVal dwRop As Long ) As
Long

4. ALGORITMA DAN HASIL

4.1 . Algoritma
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 , Isi harga awal atau inisialisasi nilai; Mouse down
atau Tombol mouse ditekan; Mouse move atau Mouse digerakkan dan Mouse up
atau tombol mouse dilepas.
Alasan untuk menjelaskan intinya adalah agar algoritma yang disajikan
bersifat umum dan tidak terikat kepada teknik pengkodean suatu bahasa
pemrograman, walaupun dibatasi hanya dalam lingkungan MS-Windows.

A. Algoritma Mouse Down

Start
Item=1, Pen Tool.
Item=2, Line Tool.
Item=3, Flood Fill Tool.
Item=4, Polygon Tool.
Item=5, Eraser Tool.
Item=6, Block Tool.
Item=7, Block Move Tool.

166
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Item=8, Alt = 0, Zoom Tool.

Item=8, Alt = 1, Unzoom Tool.
Item=9, Text Tool.
Item=10, Box Tool.
Item=11, Ellipse Tool.
Item=12, Pick Color Tool.
Call Konversi(X,Y) ke (CX,CY).
Konversi Window(Top,Left,Bottom,Right) dan Skala ke
WindowZoom(ZTop,ZLeft,ZBottom,ZRight).
Mode gambar=true.
CX2=CX.
CY2=CY.
CX3=CX.
CY3=CY.
If not (Item=7 or Item=8)
Copy Image Memori Layar ke Memori Satu untuk
Undo.
Endif.
If Item=1
Tentukan lebar garis.
Tentukan warna garis.
Pixel(CX,CY).
Endif.
If Item=2
Tentukan lebar garis.
Tentukan warna garis.
Endif.
If Item=3
Tentukan warna isian.
Floodfill(CX,CY).
Endif.
If Item=4
Reset array(A).
C=0.
A(C)=pixel(CX,CY).
Tentukan lebar garis=1.
Tentukan warna garis.
Endif.
If Item=5
Tentukan Lebar Penghapus.
Tentukan warna latarbelakang.
Erase(CX,CY).
Endif.
If Item=6
Reset array(A).
C=0.
A(C)=(CX,CY).
Tentukan lebar garis=1.
167
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Tentukan warna=putih.
Endif.
If Item=7
If Blocked and Mouse berada dalam kotak
block(BTop,BLeft,BBottom,BRight)
Cliparea=true.
Else
Cliparea=false.
Endif
If Cliparea
Tentukan batas gambar hasil
potongan(Top,Left,Bottom,Right).
Top2=Top.
Left2=Left.
Right2=Right.
Bottom2=Bottom.
Top3=Top.
Left3=Left.
Right3=Right.
Bottom3=Bottom.
Moveonce=false.
Endif.
Endif.
If Item=8
If Zoom Mode and Alt=1
Konversi(X,Y) ke (CX,CY).
Skala=Skala-1.
If Skala>1
Konversi posisi CX,CY dan Skala ke
Window(Top,Left,Bottom,Right).
Konversi Window(Top,Left,Bottom,Right) dan Skala ke
WindowZoom(ZTop,ZLeft,ZBottom,ZRight).
Copy Image Memori Gambar
Asli(Top,Left,Bottom,Right) ke Memory
Layar(ZTop,ZLeft,ZBottom,ZRight).
Else
Zoom Mode=false.
Copy Image Memori Gambar
Asli(Top,Left,Bottom,Right) ke Memory
Layar(Top,Left,Bottom,Right).
Endif.
Else
If Not Zoom Mode dan Alt=0
Skala=Skala+1.
Konversi posisi CX,CY dan Skala ke
Window(Top,Left,Bottom,Right).

168
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Konversi Window(Top,Left,Bottom,Right) dan

Skala ke
WindowZoom(ZTop,ZLeft,ZBottom,ZRight).
Copy Image Memori Gambar
Asli(Top,Left,Bottom,Right) ke Memory
Layar(ZTop,ZLeft,ZBottom,ZRight).
Endif.
Endif.
Endif.
If Item=9
Buka dialog Text.
Endif
If Item=10
Tentukan Lebar Garis.
Tentukan Warna Garis.
Tentukan Warna Isian.
Mode Garis Xor.
Endif.
If Item=11
Tentukan Lebar Garis.
Tentukan Warna Garis.
Tentukan Warna Isian.
Mode Garis Xor.
Endif.
If Item=12
Ambil Warna pada Pixel(CX,CY).
Endif.
End.
B. Algoritma Mouse Move
Start
Konversi(X,Y) ke (CX,CY).
Konversi Window(Top,Left,Bottom,Right) dan Skala ke
WindowZoom(ZTop,ZLeft,ZBottom,ZRight).
If Mode gambar
If Item=1
Line(CX2,CY2) ke (CX,CY).
CX2=CX.
CY2=CY.
Endif.
If Item=2
Mode garis Xor.
Line(CX2,CY2) ke (CX,CY).
Endif.
If Item=4
Line(CX2,CY2) ke (CX,CY).
CX2=CX.
CY2=CY.
C=C+1.
169
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

A(C)=(CX,CY).
Endif.
If Item=5
Erase(CX,CY).
Endif.
If Item=6
Line(CX2,CY2) ke (CX,CY).
CX2=CX.
CY2=CY.
C=C+1.
A(C)=(CX,CY).
Endif.
If Item=7
If Blocked
If CopyMode
Dx=CX-CX2.
Dy=CY-CY2.
Top2=Top2+dy.
Bottom2=Bottom2+dy.
Left2=Left2+dx.
Right2=Right2+dx.
Isi Memori Dua dengan warna putih.
CopyImageMode=copy.
Copy Image Memori
Satu(Top2,Left2,Right2,Bottom2) ke Memori-
Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=Not(Memori Empat) or (Memori
Dua).
Copy Image Memori
Empat(Top,Left,Right,Bottom) ke Memori-
Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=(Memori Tiga) and (Memori Dua).
Copy Image Memori Tiga(Top,Left,Right,Bottom)
ke Memori- Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=copy.
Copy Image Memori
Satu(Top3,Left3,Right3,Bottom3) ke Memori -
Layar(Top3,Left3,Right3,Bottom3).
CopyImageMode=Copy.
Copy Image Memori
Dua(Top2,Left2,Right2,Bottom2) ke Memori-
Layar(Top2,Left2,Right2,Bottom2).
CX2=CX.
CY2=CY.
Top3=Top2.
Left3=Left2.
Right3=Right2.
Bottom3=Bottom2.
170
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Endif.
Else
Dx=CX-CX2.
Dy=CY-CY2.
Top2=Top2+dy.
Bottom2=Bottom2+dy.
Left2=Left2+dx.
Right2=Right2+dx.
Isi Memori Dua dengan warna putih.
CopyImageMode=copy.
Copy Image Memori
Satu(Top2,Left2,Right2,Bottom2) ke Memori-
Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=Not(Memori Empat) or (Memori
Dua).
Copy Image Memori
Empat(Top,Left,Right,Bottom) ke Memori-
Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=(Memori Tiga) and (Memori Dua).
Copy Image Memori Tiga(Top,Left,Right,Bottom)
ke Memori- Dua(Top2,Left2,Right2,Bottom2).
If Not Moveonce
CopyImageMode=copy.
Copy Image Memori Satu(Top3,Left3,Right3,Bottom3) ke
Memori-
Layar(Top3,Left3,Right3,Bottom3).
Tinggi=Bottom-Top.
Lebar=Right-Left.
Buat Memori Sementara(Tinggi,Lebar).
Buat Memori Sementara2(Tinggi,Lebar).
Isi Memori Sementara dengan warna latar
belakang.
Copy Memori Layar(Top,Left,Bottom,Right)
ke Memori Sementara2(0,0,Tinggi,Lebar).
CopyImageMode=Not(Memori Empat) or (Memori
Sementara2).
Copy Memori Empat(Top,Left,Bottom,Right)
ke Memori Sementara2(0,0,Tinggi,Lebar).
CopyImageMode=(Memori Empat) or (Memori
Sementara).
Copy Memori Empat(Top,Left,Bottom,Right)
ke Memori Sementara(0,0,Tinggi,Lebar).
CopyImageMode=(Memori Sementara2) and
(Memori Sementara).
Copy Memori Sementara2(0,0,Tinggi,Lebar)
ke Memori Sementara(0,0,Tinggi,Lebar).
CopyImageMode=Copy.

171
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Copy Memori Sementara(0,0,Tinggi,Lebar) ke

Memori Layar(Top3,Left3,Bottom3,Right3).
Moveonce=true.
Else
CopyImageMode=copy.
Copy Image Memori
Satu(Top3,Left3,Right3,Bottom3) ke Memori-
Layar(Top3,Left3,Right3,Bottom3).
Endif.
CopyImageMode=Copy.
Copy Image Memori
Dua(Top2,Left2,Right2,Bottom2) ke Memori-
Layar(Top2,Left2,Right2,Bottom2).
CX2=CX.
CY2=CY.
Top3=Top2.
Left3=Left2.
Right3=Right2.
Bottom3=Bottom2.
Endif.
Endif.
If LastItem=9
Dx=CX-CX2.
Dy=CY-CY2.
Top2=Top2+dy.
Bottom2=Bottom2+dy.
Left2=Left2+dx.
Right2=Right2+dx.
Isi Memori Dua dengan warna putih.
CopyImageMode=copy.
Copy Image Memori
Satu(Top2,Left2,Right2,Bottom2) ke Memori-
Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=Not(Memori Empat) or (Memori Dua).
Copy Image Memori Empat(Top,Left,Right,Bottom)
ke Memori- Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=(Memori Tiga) and (Memori Dua).
Copy Image Memori Tiga(Top,Left,Right,Bottom) ke
Memori- Dua(Top2,Left2,Right2,Bottom2).
CopyImageMode=copy.
Copy Image Memori
Satu(Top3,Left3,Right3,Bottom3) ke Memori-
Layar(Top3,Left3,Right3,Bottom3).
CopyImageMode=Copy.
Copy Image Memori Dua(Top2,Left2,Right2,Bottom2)
ke Memori- Layar(Top2,Left2,Right2,Bottom2).
CX2=CX.
CY2=CY.
172
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Top3=Top2.
Left3=Left2.
Right3=Right2.
Bottom3=Bottom2.
Endif.
Endif.
If Item=10
Gambar Kotak(CX2,CY2) ke (CX3,CY3).
Gambar Kotak(CX2,CY2) ke (CX,CY).
CX3=CX.
CY3=CY.
Endif.
If Item=11
Gambar Ellipse(CX2,CY2) ke (CX3,CY3).
Gambar Ellipse(CX2,CY2) ke (CX,CY).
CX3=CX.
CY3=CY.
Endif.
If Item=12
Warna=Warna pixel(CX,CY).
Endif.
Endif.
End.

4.2 Hasil
Implementasi sistem yang dilakukan mencakup atas implementasi
perangkat keras dan perangkat lunak.
A. Tampilan Utama dengan Komponen Dasar
Tampilan form utama seperti terlihat pada gambar 4.1 berikut ini.

Gambar 4.1 Tampilan Program Dengan Basic Toolbox

173
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Seperti terlihat pada gambar 4.2 program ini terdiri atas empat bagian
yang merupakan user interface yang dapat digunakan oleh user. Bagian pertama
adalah menu dimana user dapat mengakses perintah-perintah tertentu. Bagian
kedua di tengah program disebut sebagai drawing area yaitu daerah kerja tempat
user menggambar komiknya. Bagian ketiga adalah toolbox dimana bagian ini
berupa tool-tool yang dapat dipergunakan oleh user untuk membuat komiknya.
Bagian ini mempunyai dua bentuk pilihan yaitu basic toolbox untuk tool dasar dan
advanced 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. Tampilan Utama dengan Komponen Tambahan

Tampilan pada gambar 4.2 berikut ini menggambarkan Advanced tool box
yang memuat beberapa jenis callout dan komik frame.

Gambar 4.2 Tampilan Program Dengan Advanced Toolbox

Tampilan pada gambar 4.3 berikut ini menggambarkan contoh pembuatan
komik menggunakan aplikasi Comic Page Maker ini.

174
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Gambar 4.3 Tampilan Hasil Pembuatan Komik Dengan Comic PageMaker

5. SIMPULAN
5.1 Kesimpulan
Berdasarkan pembahasan dan hasil dapat diambil beberapa kesimpulan
antara lain:
1. Aplikasi yang dirancang sangat membantu user dalam merancang sebuah
gambar dan tulisan.
2. Dengan menggunakan aplikasi editor desain komik ini maka proses
pembuatan suatu komik menjadi lebih mudah karena beberapa tool yang
tersedia dapat membantu user lebih cepat dalam menggambar komik.
2. Hasil penggambaran komik dengan menggunakan editor komik ini akan
dihasilkan gambar dengan bentuk citra bitmap.

DAFTAR PUSTAKA

Al Bahra Bin Ladjamudin, Rekayasa Perngkat Lunak, Penerbit Graha Ilmu,

Cetakan Pertama, Yogyakarta, 2006
Darwis R. Manalu, Pemrograman Visual Basic 6.0 dan Crystal Report , Citra
Prima Utama, Medan, 2002
Darwis R. Manalu, Pemrograman Multiuser dilengkapi Microsoft Access dan SQL
Server Dan Activex Data Object 6.0, Diktat Kuliah, 2005
Darwis R. Manalu, Panduan Praktikum Pemrograman Visual Basic 6.0, STMIK
Sisingamangaraja XII Medan, 2006

175
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

Galbiati, Louis, Machine Vision and Digital Image Processing Fundamental,

Prentice Hall, New, Jersey, 2000
Kenneth E. Kendall, Julie E. Kendal, Analysis and Design, Fitif Edition Pearson
Education Inc, New Jersey 2003
Microsoft, Microsoft Windows Application Programming Interface (Windows
API)
Murni Aniati, Pengantar Pengolahan Citra, PT Elexmedia Komputindo,
Gramedia Jakarta, 1992
Rinaldi Munir, Pengolahan Citra Digital dengan Pendekatan Algoritmik, Penerbit
Informatika, Bandung, 2004
Richardus Eko Indrajit, Manajemen Sistem Informasi dan Teknologi Informasi, PT
Elexmedia Komputindo, Gramedia Jakarta, 2000
Raymond McLeod Jr, George Schell, Managemet Information System, Eight
Edition Prentice Hall , New Jersey, 2001
Yuswanto, Pemrograman Grafis dan Multimedia, Penerbit Prestasi Pustaka,
Surabaya, 2002

176
_____________
ISSN 0853-0203
 VISI (2011) 19 (3) 666-688

TENTANG PENULIS :

Sanco Simanullang, ST, MT, Lulus S-1 Teknik Informatika Universitas

Gunadarma Jakarta 1999, Lulus Pascasarjana S2 Magister Teknik Industri USU
Medan 2004.

Darwis Robinson Manalu, S.Kom, M.M adalah Kelahiran

Nagurguran 10 April 1976 Kabupaten Humbang Hasundutan
adalah lulusan dari STMIK Sisingamangaraja XII Program Studi
Teknik Informatika dan Program Pasca Sarjana Magister
Manajemen Universitas HKBP Nommensen Medan. Telah
menekuni penulisan karya ilmiah, jurnal dan buku-buku kuliah
komputer sejak tahun 1998 hingga saat ini. Sekarang ini bekerja
sebagai Dosen Kopertis Wilayah I NAD-Sumut dan sebagai Konsultan ITC pada
Gratika Kencana Indonesia yang bergerak dalam bidang Konsultan ITC. Sebagai
Dosen juga mengajarkan Mata Kuliah Pemrograman Visual, Database
Programming Visual, System Analyst Design, Management System Database,
Management Information System, Software Engineering, Object Oriented
Programming, Web Programming, Multiuser Programming, SQL Programming,
PHP dan Riset Teknologi Informasi. Buku yang telah ditulis adalah Pemrograman
Visual Basic 6.0, Pemrograman Multiuser, Program Paket Niaga, Pemrograman
C/C++. Hingga saat ini terus melakukan pengembangan terhadap pengetahuan
dengan melakukan penelitian di internet seiring dengan Kemajuan Teknologi
Informasi.

177
_____________
ISSN 0853-0203