Aplikasi Mewarnai Gambar Untuk Pembelajaran...

Aplikasi Mewarnai Gambar Untuk Pembelajaran Pengenalan....

89

ISSN 2356 - 4393

I. PENDAHULUAN

Masa anak-anak usia dini adalah masa tumbuh kembang pesatnya. Di umur keemasan tersebut waktu yang tepat untuk memberikan pembelajaran mengenai lingkungannya agar anak dapat menggunakan kerja otaknya secara maksimal.

Salah satu hal yang diajarkan pada anak usia dini adalah pengenalan warna. Pengenalan warna pada anak usia dini bertujuan agar anak dapat membedakan antara warna satu dengan warna yang lainnya. Selain itu pengenalan warna juga dapat membantu perkembangan saraf motorik untuk meningkatkan perkembangan kognitifnya dan juga mengetahui apakah anak tersebut mengalami buta warna atau tidak.

Tidak semua anak-anak tertarik dan cepat mengenal warna-warna tersebut ketika diajarkan. Kebanyakan anak-anak pada usia dini merasa cepat bosan jika terus-menerus ditanyakan “warna apa ini?” pada sebuah benda yang dipegang atau menunjuk ke suatu benda yang ada. Hal tersebut dirasa wajar karena pada anak usia dini masih lebih tertarik untuk bermain-main daripada harus belajar dan menghafal.

Berdasarkan penjelasan di atas, maka peneliti bermaksud untuk membuat aplikasi mewarnai gambar berbasis mobile. Aplikasi berbasis mobile dipilih karena perangkat mobile mudah dibawa kemana saja dan dapat digunakan kapan saja tidak seperti PC yang hanya dapat digunakan pada suatu tempat tertentu dan sulit untuk dibawa. Pada saat ini banyak orang yang telah memiliki mobile dan anak-anak usia dini pada

Aplikasi Mewarnai Gambar Untuk Pembelajaran Pengenalan Warna pada Anak Usia Dini

Berbasis MobileShelly Dini Debyanzah 1), Alexander Waworuntu2)

Informatika, Institut Teknologi dan Bisnis Kalbis, JakartaJl. Pulomass Selatan Kav. 22, Jakarta Timur 13210

1)E-mail: [email protected])E-mail: [email protected]

Abstract: Color identification for early age children is aimed to make the children able in differentiating color and detecting the symptoms of daltonism (color blind). Therefore, this work develops an object coloring application that runs in the Windows Phone operating system. The purpose of this coloring application is to help the children identifying colors and their names. In the application development, this work employs Luther’s multimedia development method which consist of six phases: concepts, design, material collecting, assembly, testing, and distribution. This method selected because it is not complex, as well as suitable to the application. The upshot of this tested application shows that the children are able to use and understand the application considerably.Keywords: coloring identification, early age, mobile, windows phone

Abstrak: Pengenalan warna pada anak usia dini bertujuan agar anak dapat membedakan antara warna satu dengan warna yang lainnya dan juga mengetahui apakah anak tersebut mengalami buta warna atau tidak. Dari latar belakang tersebut peneliti bermaksud untuk membuat aplikasi mewarnai objek/gambar berbasis mobile yang berjalan pada sistem operasi Windows Phone. Tujuan dari pembuatan aplikasi mewarnai ini adalah untuk membantu anak-anak usia dini dalam mengenal nama – nama warna. Dalam pengembangan aplikasi peneliti memilih metode pengembangan multimedia versi Luther yang memiliki enam tahapan yaitu, concepts, design, materiall colecting, assembly, testing, dan distribution. Metode ini dipilih karena tahapan tersebut tidak terlalu rumit dan kompleks, sesuai dengan aplikasi yang dibangun. Hasil dari ujicoba dan evaluasi kepada anak-anak menunjukkan, aplikasi yang dibuat mudah untuk digunakan dan fungsi-fungsi yang ada tidak terlalu sulit untuk dipahami anak-anak.Kata Kunci: pengenalan warna, mobile, usia dini, windows phone

Kalbiscentia,Volume 2 No.1 Februari 2015

90

saat ini pun telah bisa mengoperasikannya, serta agar anak-anak tertarik untuk belajar mengenal warna dan membedakan nama-nama dari warna tersebut.

Rumusan masalah dari penelitian ini adalah bagaimana cara membangun sebuah aplikasi mewarnai gambar untuk membantu pengenalan warna pada anak usia dini (1-5 tahun) berbasis mobile?

II. METODE PENELITIAN

A. Komponen Multimedia

Ada lima komponen dasar yang menyusun suatu multimedia, yaitu teks, grafik, audio, video, dan animasi. Penggunaan teks dalam multimedia bertujuan untuk menyampaikan pesan seluas mungkin dengan teks yang sesedikit mungkin. Saat menggunakan teks harus memperhatikan jenis font yang digunakan, ukuran font yang digunakan, pemilihan warna yang sesuai, dan style hurufnya agar tidak menjadi lebih dominan atau tidak terlihat pada obyek utamanya.

Grafik berarti juga gambar. Istilah grafika berasal dari bahasa Yunani graphikos yang artinya melukiskan atau menggambar garis-garis. Menurut jenisnya gambar dibagi menjadi dua yaitu bitmap dan vektor. Bit menunjuk pada angka biner dan map merupakan matriks dua dimensi dari bit tersebut. Bitmap berarti matriks sederhana dari titik-titik kecil yang membentuk sebuah image dan ditampilkan di layar komputer atau dicetak. Bitmap digunakan untuk foto realistik dan gambar kompleks yang membutuhkan detail yang halus. Bitmap memiliki beberapa format file gambar antara lain JPEG, EXIF, TIFF, RAW, PNG, GIF, dan BMP. Format vektor berisi deskripsi geometri yang dapat di render dengan halus pada ukuran yang diinginkan. File format vektor dapat berisi data bitmap. Vektor baik digunakan untuk garis, kotak, lingkaran, polygon, dan bentuk grafis lainnya yang dapat diekspresikan secara matematis dalam sudut, koordinat, dan jarak. Seperti halnya bitmap, vektor pun memiliki format file gambarnya antara lain CGM, SVG, CDR, dan format file yang termasuk vektor (ODG, EPS, PDF, SWF, WMF/EMF, dan XPS).

Audio didefinisikan sebagai macam-macam bunyi dalam bentuk digital seperti suara, music, narasi, dan sebagainya yang bisa didengar untuk keperluan suara latar, penyampaian pesan duka, senang, sedih, semangat dan macam-macam disesuaikan dengan kondisi dan situasi. Audio memiliki beberapa format antara lain AIFF, AU, SND, RA, atau RM, MP3, MOV, SWA, dan sebagainya. Audio pun dibedakan kedalam

tiga macam, yaitu: Percakapan (speech) berupa suara dari orang yang berbicara, Musik berupa suara yang dihasilkan dari alat-alat music, baik alat music akustik, elektronik, maupun synthesizer, Efek suara (sound effect) merupakan suara selain percakapan dan music, misalnya suara pesawat terbang, klakson kendaraan, suara gelas pecah, dan lain-lain.

Istilah video berasal dari latin yaitu dari kata vidi atau visum yang artinya melihat atau mempunyai penglihatan. Video memiliki format file antara lain MPEG, AVI, FLV, MKV, dan sebagainya.

Animasi merupakan suatu teknologi yang dapat menjadikan gambar diam menjadi bergerak seolah-olah gambar tersebut hidup dapat bergerak, beraksi dan berkata. Animasi komputer adalah seni membuat gambar bergerak menggunakan komputer dan animasi dengan menggunakan bantuan tools.

Aspek interaktif pada multimedia dapat berupa navigasi, simulasi, permainan, dan latihan. Apabila dalam suatu aplikasi multimedia pengguna multimedia diberikan suatu kemampuan untuk mengontrol elemen-elemen yang ada, maka multimedia itu disebut sengan interactive multimedia. Apabila aplikasi multimedia disediakan struktur dari elemen terhubung yang dapat dikendalikan oleh pengguna, maka interactive multimedia tersebut menjadi hypermedia.

B. Metode Pengembangan Aplikasi

Model pengembangan multimedia yang ada antara lain Dasbatz, Vaughan, dan Luther. Dasbatz dikenal dengan nama Interactive Multimedia System Design and Development (IMSDD). Tahapan-tahapan pada metode ini terdiri dari: System Requirements pada tahap ini dilakukan analisis terhadap kebutuhan sistem, Design Consideration pada tahap ini dibuat metafora design yang merupakan simbol-simbol yang digunakan untuk mengembangkan suatu fungsi tertentu, Implementation pada tahap ini dibangun aplikasi dan setelah aplikasi telah selesai dilakukan implementasi terhadap pengguna, Evaluation – pada tahap ini dilakukan evaluasi yang dilakukan setelah proses pengembangan aplikasi selesai yang bertujuan untuk melakukan pengecekan terhadap sistem tersebut telah sesuai atau belum.

Pada model Vaughan, empat dasar proyek multimedia adalah Perencanaan dan Pembiayaan pada tahap ini mencakup seluruh proses identifikasi kebutuhan dan tujuan serta menyusun anggaran biaya-biaya yang dibutuhkan, Desain dan Produksi pada tahap ini dilakukan desain terhadap semua


91

rencana dan mencakup perencanaan struktur navigasi yang baik untuk rancangan antar muka penggunanya. Tahap produksi merupakan tahap ketika proyek multimedia dibuat untuk menghasilkan suatu proyek, Pengujian pada tahap ini dilakukan pengujian terhadap hasil dari produk yang telah dibuat sudah benar-benar sesuai dengan tujuan proyek atau belum, Pengiriman pada tahap ini produk yang telah jadi dikemas untuk didistribusikan kepada klien.

Dalam pembuatan penelitian yang akan dilakukan, metode yang digunakan adalah metode pengembangan multimedia (Multimedia Development Life Cycle) Versi Luther [1]. Metode ini dipilih karena cocok dengan pengembangan aplikasi yang akan dihasilkan pada penelitian ini, karena penelitian ini bersifat multimedia tool serta karena tahapan-tahapan yang ada dalam metode ini terstruktur dan sesuai dengan tahapan dalam membangun aplikasi ini. Menurut Luther, tahapan - tahapan pada metodologi pengembangan multimedia tidak perlu berurutan. Ke enam tahapannya dapat saling bertukar posisi namun tetap dimulai dari tahap konsep dahulu dan diakhiri dengan tahap distribusi. Ke enam tahapan tersebut [1] adalah sebagai berikut:l Concepts, Tahap ini adalah tahap untuk

menentukan tujuan aplikasi, siapa pengguna program (identifikasi audiens), karakteristik pengguna (kemampuan pengguna), jenis aplikasi (presentasi, interaktif, dan lain-lain), dan dasar aturan perancangan aplikasi (ukuran, target, dan lain – lain).

l Design, Pada tahap ini dilakukan pembuatan spesifikasi mengenai arsitektur program, gaya, tampilan, dan kebutuhan material/bahan untuk program. Di tahap akan dibuat storyboard, flowchart, dan struktur navigasi untuk menggambarkan tahapan desain projek yang akan dibangun.

l Material Collecting, Pada tahap ini adalah pengumpulan bahan yang sesuai dengan kebutuhan yang dikerjakan. Bahan-bahan yang dimaksud adalah gambar clip art, foto, video, suara, animasi, dan lain-lain. Tahap ini dapat dikerjakan secara paralel dengan tahap assembly.

lAssembly, Pada tahap ini dilakukan pembuatan semua objek atau bahan multimedia. Pembuatan aplikasi didasarkan pada tahap design, seperti storyboard, flowchart, dan / atau struktur navigasi. Pada tahap ini peran perangkat lunak authoring digunakan. Perangkat tersebut digunakan untuk

mengolah bahan-bahan yang telah dikumpulkan pada tahap material collecting serta untuk pembuatan kode program pada suatu projek tertentu.

l Testing, Pada tahap ini dilakukan pengujian setelah menyelesaikan tahap assembly dengan menjalankan program / aplikasi dan melihata ada tidaknya kesalahan.

l Distribution, ini merupakan tahap terakhir, pada tahap ini aplikasi akan disimpan dalam suatu media penyimpanan dalam suatu media penyimpanan. Tahap ini disebut juga tahap evaluasi untuk pengembangan produk yang sudah jadi agar menjadi lebih baik.

C. Windows Phone

Windows Phone perupakan sistem operasi yang dikembangkan oleh perusahaan Microsoft, untuk tampilan Windows Phone dan desktop sama atau identik, karena Windwos Phone berjalan di mobile sehingga skala ruang lingkupnya lebih kecil. Windows Phone di kembangkan oleh Raksasa Sistem operasi yaitu Microsoft, Windows Phone merupakan perkembangan dari windows mobile, Windows Phone peratama kali muncul pada awal oktober 2010 dengan versi pertamanya yaitu Windows Phone 7, sebelumnya Microsoft telah memulai system operasi mobile ini pada tahun 2007, yang awal mulanya windows mobile dengan versi 5.0 [2].

D. Metode Pengujian Aplikasi

Metode dalam melakukan pengujian bermacam -macam dan untuk penelitian ini peneliti menggunakan metode pengujian black-box. Berikut ini penjelasan tentang metode black-box testing.

Pengujian ini dilakukan untuk melihat kesesuaian antara fungsi-fungsi, input, dan output dengan tujuan yang diharapkan dari aplikasi yang diuji. Cara melakukan pengujian ini adalah dengan mencoba semua fungsi yang ada pada aplikasi [3].

Terdapat beberapa kategori yang dapat diujikan dalam metode black-box ini ketika aplikasi bekerja. Beberapa kategori kesalahan yang dapat ditemukan pengujian black-box tersebut [4] antara lain:l Kesalahan interface (antarmuka) perangkat

lunak.

lFungsi-fungsi yang salah atau hilang.

lKesalahan inisialisasi dan terminasi.


92

l Kesalahan dalam struktur data atau kesalahan dalam akses database eksternal.

lKesalahan performa.

III. PEMBAHASAN

A. Langkah-langkah Pembangunan Aplikasi

Langkah-langkah pembangunan aplikasi mewarnai gambar didasarkan pada langkah-langkah metode pengembangan multimedia versi Luther, yaitu:

1. Concepts

Concepts dari aplikasi yang akan dibangun pada penelitian ini adalah aplikasi yang bersifat pembelajaran dengan memanfaatkan teknologi mobile untuk penggunaannya. Mobile dipilih agar mudah digunakan di mana saja dan kapan saja. Secara umum konsep dari aplikasi yang akan dibuat dalam deskripsi sebagai berikut:

Tabel 1 Deskripsi konsep aplikasi

2. Design

Pada tahapan design hal yang dilakukan yaitu membuat instrumen perancangan, yang terdiri dari flowchart, storyboard, struktur navigasi, dan perancangan antar muka pengguna.1. Flowchart

Penggunaan flowchart pada desain aplikasi ini adalah sebagai alat bantu menjelaskan proses pada

sistem yang dirancang. Berikut rancangan flowchart tersebut:

Gambar 1 Flowchart aplikasi

2. Storyboard

Storyboard pada desain ini bertujuan untuk mendeskripsikan rancangan tampilan aplikasi yang akan dibuat. Berikut contoh storyboard aplikasi tersebut:- Storyboard Menu Utama

Gambar 2 contoh storyboard aplikasi warnai aku

- Storyboard Menu Mulai

Gambar 3 Storyboard menu mulai


93

- Storyboard Menu Tentang

Gambar 4 Storyboard menu tentang

- Storyboard Menu Profil

Gambar 5 Storyboard menu profil

- Storyboard Sub Menu Mulai: Daftar Gambar

Gambar 6 Storyboard sub menu mulai: daftar gambar

- Storyboard Sub Menu Mulai: Mewarnai Gambar

Gambar 7 Storyboard sub menu mulai: mewarnai gambar

- Storyboard Sub Menu Mewarnai Gambar: Button Hasil

Gambar 8 Storyboard sub menu mewarnai gambar: button hasil

3. Struktur Navigasi

Struktur navigasi adalah hirarki desain aplikasi yang dibuat berdasarkan Storyboard Aplikasi Mewarnai Gambar. Struktur navigasi bertujuan untuk menggambarkan urutan-urutan menu pada rancangan aplikasi yang akan dibangun.

Tanda panah dua arah pada gambar struktur navigasi menandakan bahwa pada scene tersebut dapat menautkan ke halaman selanjutnya dan dapat kembali kehalaman sebelumnya, atau halaman yang dituju oleh tanda panah. Contoh: pada scene 2 bertautan dengan scene 5, dan dapat kembali pada scene 1. Lalu scene 7 dapat kembali ke scene 6 dan scene 5.


94

Gambar 9 Struktur navigasi aplikasi

4. Perancangan Antar Muka Pengguna

- Tampilan Menu Utama

Pada bagian teks judul aplikasi terdapat Nama Aplikasi yaitu “Warnai Aku”. Tampilan ini terdiri dari tiga image button yaitu image button Menu Mulai, image button Menu Tentang, dan image button Profil yang dibuat dengan huruf Foo.

Gambar 10 Rancangan tampilan menu utama warnai aku

- Tampilan Menu Mulai

Di tampilan ini terdapat empat buah image button yaitu image button yang mewakilkan kategori buah, sayur, dan hewan, serta image button untuk kembali ke menu utama dengan menggunakan jenis huruf Foo.

Gambar 11 Rancangan tampilan menu mulai

- Tampilan Menu Kategori Gambar

Pada tampilan kategori gambar terdapat sembilan list gambar yang tampil sesuai dengan kategori yang dipilih. Contoh: Gambar buah pada kategori buah, gambar sayur pada kategori sayur, dan gambar hewan pada kategori hewan. Pada tampilan ini terdapat tombol untuk kembali ke menu mulai dengan menggunakan font Foo untuk tulisan pada tombolnya. Cara untuk memulai mewarnai adalah dengan cara click salah satu gambar yang ada pada list.

Gambar 12 Rancangan tampilan menu kategori gambar

- Tampilan Menu Mewarnai Gambar

Pada tampilan ini akan terdiri dari gambar yang belum diwaranai, gambar yang sudah diwarnai sebagai contoh, palet warna yang berbentuk krayon, dan tombol-tombol yang terdiri dari tombol hasil, hapus, dan reset dengan menggunakan font Foo untuk tulisan pada tombolnya.


95

Gambar 13 Rancangan tampilan menu mewarnai gambar

- Tampilan Sub Menu Mewarnai Gambar: Button Hasil

Jika telah selesai mewarnai, langkah selanjutnya menekan tombol hasil untuk melihat hasilnya. Pada tampilan ini keterangan hasil dari gambar berada pada kotak seperti message box yang berada diatas halaman mewarnai seperti yang terlihat pada Gambar 15 dengan terdapat sebuah tombol di dalam kotak tersebut.

Gambar 14 Rancangan tampilan sub menu mewarnai gambar: button hasil

- Tampilan Menu TentangPada menu ini akan terdapat teks paragraph

dengan jenis font Comic Sans MS dengan align rata tengah, dan tombol untuk kembali ke menu utama.

Gambar 15 Rancangan tampilan menu tentang

- Tampilan Menu Profil

Tampilan ini akan berisi teks dengan font Comic Sans MS dengan align rata kiri, juga terdapat logo kampus tempat peneliti kuliah pada bagian kiri atas dan tombol untuk kembali ke menu utama yang terletak di bagian bawah.

Gambar 16 Rancangan tampilan menu profil

5. Material Collecting

Pada pembuatan aplikasi pengumpulan bahan – bahan berupa instrumen yang akan digunakan, file gambar serta file audio.

Instrumen yang digunakan pada proses pembuatan aplikasi terdiri dari perangkat keras dan perangkat lunak, Rincian instrumen yang digunakan pada penelitian ini adalah sebagai berikut:

Tabel 2 Instrumen yang digunakan

Peneliti menggunakan file audio berformat MPEG Layer-3 (MP3). File audio pada aplikasi terdiri dari audio yang berfungsi sebagai musik pengiring dan audio nama-nama warna.

Semua gambar pada pembuatan aplikasi menggunakan format Portable Netwwork Graphic (PNG). Gambar-gambar yang ada dalam aplikasi terdiri dari gambar desain aplikasi seperti gambar background [5], macam-macam tombol [6] [7] [8], motif anak-anak pada tombol [9] [10] [11], tombol


96

logo [12] [13] [14], dan krayon, serta gambar yang digunakan pada proses mewarnai seperti gambar buah, hewan, dan sayur.

6. Assembly

Pada tahap ini dilakukan pembuatan kode program untuk membuat aplikasi, langkah pertama yang dilakukan sebelum membuat kode program adalah mengelompokkan file gambar dan suara lalu dilanjutkan dengan pembuatan kode program.

Gambar 17 Manajemen file aplikasi warnai aku

Inti dari kode program aplikasi ini terdapat pada halaman mewarnai, baik halaman mewarnai buah, hewan, dan sayur. Karena pada halaman ini terdapat kode program untuk melakukan proses pewarnaan. Sedangkan halaman - halaman lainnya untuk menautkan ke halaman yang di tuju. Di dalam file ini terdapat algoritma untuk mewarnai objek dan mengolah kesesuaian antara contoh gambar dan hasil yang dibuat oleh user.

Untuk proses pewarnaan gambar digunakan metode “Flood Fill Algorithm”. Algoritma Flood Fill adalah metode yang sering digunakan untuk proses pewarnaan gambar dengan cara paint bucket (menyentuh atau click daerah yang akan diwarnai). Dalam pengertian sebenarnya Algoritma Flood Fill adalah algoritma untuk menentukan daerah yang terhubung antara node satu dengan lainnya. Algoritma ini mengambil tiga parameter yaitu node awal, warna sasaran, dan warna pengganti. Algoritma ini mencari semua node yang terhubung ke node awal dengan jalan dari warna sasaran, dan perubahan mereka dengan warna pengganti [15].

Implementasi dari algoritma tersebut pada aplikasi ini yaitu, warna batas gambar adalah hitam,

dan kode warna hitam pun dibuat sama, lalu warna sasaran yang dimaksud dalam teori algoritma Flood Fill pada aplikasi adalah objek gambar yang akan diwarnai, bidang gambar tersebut dibuat dengan warna transparant. Pada daerah bidang gambar tersebut, algoritma ini bekerja mewarnai gambar, dan warna akan berhenti pada daerah yang berwarna hitam. Warna yang terpilih itu yang dimaksud warna pengganti. Selanjutnya algoritma pewarnaan ini diterapkan untuk mewarnai gambar hewan dan sayur.

7. Testing

- Ruang Lingkup Pengujian

Pengujian aplikasi dilakukan pada emulator Windows Phone tidak dicoba pada perangkat Windows Phone.

- Pengujian Aplikasi

Metode pengujian yang digunakan dalam menguji aplikasi adalah blackbox testing. Pengujian dilakukan dengan cara mengoperasikan tampilan interface dan melakukan pengecekan kesesuaian antara hasil dengan fungsi yang diharapkan pada perancangan.

Tabel 3 Rancangan pengujian blackbox aplikasi

8. Distribution

Dikarenakan aplikasi hanya dapat diuji pada emulator saja karena beberapa faktor yang telah dijelaskan sebelumnya, maka aplikasi ini belum dapat didistribusikan kepada pengguna luar. Hanya peneliti dan beberapa orang yang mencoba menggunakan aplikasi ini melalui emulator.


97

B. Hasil

1. Tampilan Layar Aplikasi- Tampilan Layar Utama

Tampilan layar utama adalah tampilan awal ketika aplikasi pertama kali dijalankan. Di bagian atas aplikasi terdapat nama aplikasi diikuti dengan gambar logo aplikasi.

Gambar 18 Tampilan layar utama aplikasi warnai aku

- Tampilan Layar Tombol Menu Mulai

Tampilan ini adalah tampilan ketika tombol mulai ditekan tombolnya. Tampilan ini berisi kategori gambar yang ada pada aplikasi. Kategori tersebut berupa tombol yang dapat ditekan tombolnya dan akan masuk ke daftar gambar yang tersedia.

Gambar 19 Tampilan layar menu mulai aplikasi warnai aku

- Tampilan Layar Tombol Menu Kategori GambarPada tampilan menu mulai terdapat kategori

gambar buah, hewan, dan sayur. Jika ditekan tombolnya maka tampilannya seperti yang terlihat pada gambar dibawah ini. Gambar yang ada dapat dipilih salah satu untuk selanjutnya akan diwarnai.

Gambar 20 Tampilan layar tombol menu kategori gambar: (a)buah, (b)hewan, (c)

sayur aplikasi warnai aku

- Tampilan Layar Menu Mewarnai

Setelah memilih salah satu gambar pada daftar gambar yang ada pada menu, maka gambar buah tersebut dapat diwarnai. Pada tampilan ini terdapat gambar yang akan diwarnai, gambar yang dijadikan contoh, tombol untuk menghapus warna, dan mengetahui hasil. Serta terdapat krayon berwarna warni yang akan digunakan untuk mewarnai gambar.

Gambar 21 Tampilan layar menu mewarnai buah aplikasi warnai aku

- Tampilan Layar HapusJika ada bagian dari gambar yang salah diberi

warna menurut pengguna, maka pengguna dapat memilih tombol hapus dan mengarahkan mouse ke daerah bagian gambar yang akan dihapus.

Gambar 22 Tampilan layar tombol hapus aplikasi warnai aku

- Tampilan Layar ResetTombol reset memiliki fungsi yang hampir

sama dengan tombol hapus, letak perbedaannya adalah pada daerah gambar yang dihapus. Jika pada tombol hapus hanya bagian yang ditekan tombolnya saja yang akan terhapus, maka pada bagian reset semua bagian gambar akan kembali pada kondisi awal sebelum diberi warna.

Gambar 23 Tampilan layar tombol reset aplikasi warnai aku


98

- Tampilan Layar Hasil

Jika pengguna telah selesai mewarnai gambar, selanjutnya memilih tombol hasil untuk mengetahui hasil dari yang dikerjakannya. Hasil dari mewarnai gambar ada dua pilihan yaitu “Semua bagian Warna Sesuai” jika semua bagian warna yang dikerjakan telah sesuai dan “Bagian Warna Kurang Sesuai” jika ada bagian yang belum diwarnai atau memang warna yang diberikan kurang sesuai dengan contoh gambar.

Gambar 24 Tampilan layar tombol hasil: (a) benar, (b)salah aplikasi warnai aku

- Tampilan Layar Tombol Menu Tentang

Menu tentang adalah penjelasan tentang aplikasi, Selain itu pada halaman ini juga terdapat tombol untuk kembali ke menu utama yang terletak di bagian bawah aplikasi.

Gambar 25 Tampilan layar tombol menu tentang aplikasi warnai aku

- Tampilan Layar Tombol Menu Profil

Halaman ini berisi tentang data singkat pembuat aplikasi (peneliti) yang disertakan logo institusi.

Gambar 26 Tampilan layar tombol profil aplikasi warnai aku

2. Evaluasi Hasil Uji Coba Pengujian Black-Box

Telah dijelaskan pada bab sebelumnya jika pada penelitian ini digunakan metode pengujian aplikasi black box. Secara keseluruhan semua tombol yang ada pada aplikasi bekerja dengan baik sesuai fungsinya baik tombol yang ada di halaman utama aplikasi maupun di halaman lainnya. Untuk proses mewarnai gambar dan mencocokkan gambar agar mendapat hasil sesuai atau tidaknya juga berfungsi dengan baik.

IV. SIMPULAN

Dari penelitian yang dilakukan pada aplikasi mewarnai gambar didapat beberapa kesimpulan antara lain:a. Cara menggunakan aplikasi mewarnai gambar

untuk pembelajaran pengenalan warna yang dibangun pada penelitian ini tidak sulit hal tersebut di dasarkan pada hasil uji coba aplikasi terhadap anak-anak. Aplikasi ini dapat menjadi contoh aplikasi pembelajaran karena menambah pengetahuan anak-anak dalam mengenal warna dan nama-nama warna.

b. Pada saat ini dengan menggunakan bahasa pemrograman HTML5, CSS, dan JavaScript tidak hanya untuk membangun aplikasi berbasis web saja, tetapi dapat juga digunakan untuk membangun aplikasi berbasis mobile untuk sistem operasi Windows Phone.

c. Dalam proses pewarnaan gambar telah dilakukan beberapa cara yaitu dengan membaca piksel demi piksel gambar agar warna yang dipilih bisa mewarnai gambar, namun cara tersebut membutuhkan waktu tunggu yang lama. Hal tersebut dikarenakan sistem harus melakukan pengecekkan apakah setiap piksel dari gambar sudah diwarnai atau belum. Lalu cara selanjutnya adalah membuat banyak fungsi mewarnai, seperti seolah-olah dalam satu waktu terdapat banyak orang yang mewarnai gambar tersebut (contoh dalam satu gambar 50 orang sekaligus mewarnai), cara tersebut juga masih lama proses mewarnainya jika diimplementasikan untuk bidang gambar yang besar. Kemudian cara untuk mewarnai gambar dilakukan manual, yaitu seperti mewarnai menggunakan krayon pada kertas (menggosok gosokan warna terpilih pada bidang yang akan diwarnai), namun cara tersebut


99

tidak dapat diterapkan untuk bidang gambar yang kecil, karena akan terjadi pewarnaan yang keluar dari bidang gambar, yang dapat berpengaruh pada saat pencocokan warna. Lalu yang terakhir dicoba adalah algoritma yang biasa digunakan dalam pewarnaan gambar yaitu Algoritma Flood Fill. Algoritma Flood Fill dipilih untuk proses mewarnai gambar pada penelitian ini karena proses pewarnaan pada gambar menjadi lebih cepat jika dibandingkan dengan dengan cara-cara sebelumnya yang telah dicobakan pada pembuatan aplikasi.

d. Aplikasi mewarnai gambar yang dibangun pada penelitian ini belum dapat di uji coba langsung pada perangkat Windows Phone karena aplikasi yang akan dicobakan pada perangkat terlebih dahulu di upload ke Windows Phone Store dan proses upload untuk Windows Phone Store lebih rumit daripada proses upload google play (Android) karena membutuhkan akun dan bersifat tidak gratis, hal tersebut yang membuat aplikasi pada penelitian ini di uji coba pada emulator saja.

V. DAFTAR RUJUKAN

[1]. I. Binanto, “Multimedia Digital : Dasar Teori dan Pengembangannya”. Yogyakarta: Andi, 2010, hlm. 28,60,97,103-108,223-225,259-271.

[2]. A. A. Putra, “Buku Praktis Belajar pemrograman Windows Phone”. Yogyakarta: nulisbuku.com, 2013, hlm. 7.

[3]. R. A. S & M. Shalahuddin, “Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek”. Bandung: INFORMATIKA, 2013, hlm. 275.

[4]. M. G. Limaye, “Software Testing : Principles, Technique, and Tools”. New Delhi, India: Tata Mc Graw - Hill, 2009, hlm. 107-109.

[5]. www.freedesignfile.com. [Online]. http://freedesignfile.com/upload/2012/11/frame_05.jpg. Di akses 15 Oktober 2013

[6]. www.wpclipart.com. [Online]. http://www.wpclipart.com/blanks/buttons/round/button_round_blue.png. Di akses 26 Desember 2013.

[7]. www.clker.com. [Online]. http://www.clker.com/cliparts/c/9/b/2/13172457351423770626round%20green%20button-hi.png. Di akses 26 Desember 2013.

[8]. www.wpclipart.com. [Online]. http://www.wpclipart.com/blanks/buttons/round/button_round_green.png. Di akses 26 Desember 2013.

[9]. www.thumbs.dreamstime.com. [Online]. http://thumbs.dreamstime.com/x/cartoon-baker-girl-1167452.jpg. Di akses 24 Desember 2013.

[10]. www.thumbs.dreamstime.com. [Online]. http://thumbs.dreamstime.com/m/cartoon-children-face-11952078.jpg. Di akses 26 Desember 2013.

[11]. w w w . 2 m u c h v e c t o r . c o m . [ O n l i n e ] . h t t p : / / w w w . 2 m u c h v e c t o r . c o m / i t e m s _images/1331151896school-1.jpg. Di akses 26 Desember 2013.

[12]. www.graffitikids.net. [Online]. http://www.graffitikids.net/wp-content/uploads/2014/01/Strawberry-And-Other-Fruit-In-The-Basket-Coloring-Page.jpg. Di akses 15 Oktober 2013

[13]. www.thumbs.dreamstime.com. [Online]. http://thumbs.dreamstime.com/z/coloring-book-cute-animals-1-16368241.jpg. Di akses 15 Oktober 2013

[14]. www.graffitikids.net. [Online]. http://www.graffitikids.net/wp-content/uploads/2014/01/Vegetables-And-Fresh-And-Healthy-Fruit-Coloring-Page.jpg. Di akses 15 Oktober 2013

[15]. G. Law, “Quantitative Comparison of Flood Fill and Modified Flood,” International Journal of Computer Theory and Engineering, vol. 5, no. 3, p. 503, Jun. 2013.

Aplikasi Mewarnai Gambar Untuk Pembelajaran...

Documents

Transcript of Aplikasi Mewarnai Gambar Untuk Pembelajaran...