BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

4.1 Implementasi

Setelah melakukan analisa dan perancangan terhadap aplikasi belajar membaca untuk anak paud berbasis mobile phone (Android), tahapan selanjutnya adalah implementasi dan pengujian aplikasi, pada tahapan implementasi ini meliputi beberapa proses pengkodean pada struktur frame beserta layer, penulisan nama tabel pada scene, dan spesifikasi kebutuhan yang meliputi perangkat keras(hardware), perangkat lunak(software), dan hal-hal yang mendukung penelitian aplikasi yang dibuat penulis.

4.2 Lingkungan Implementasi

Aplikasi Pembelajaran Membaca Untuk Anak-Anak Pra Sekolah Berbasis Android ini dibangun dan diimplementasikan pada seperangkat komputer pribadi (Personal Computer) dengan spesifikasi masing-masing kebutuhan sistem sebagai berikut :

1. Perangkat keras (hardware)

a. Leptop Toshiba prosesor intel pentium b. Memory : 1 GB

c. Harddisk Drive: 320 GB d. Monitor, keyboard dan mouse e. Handphone Blackberry 8320

f. Samsung Tab 2 OS android Icecream Sandwich 4.0 2. Perangkat lunak (software)

a. Plugin Flash PlayerProfesional yang sudah terpasang pada kepada sistem Operasi Android terkait.

b. Microsoft Windows 7 United

c. Website www.swiftapk.com sebagai Converter SWF menjadi format APK d. Adobe Flash CS3

(2)

f. Audiocity sebagai merekam audio

g. AMR to MP3 converter sebagai converter agar dapat menjadi format MP3.

Tabel 4.1 Tombol Navigasi.

No Gambar Tombol Keterangan

1. Tombol ini berfungsi untuk

masuk ke halaman

pengenalan huruf A sampai Z.

masuk ke halaman mengeja huruf.

masuk ke halaman relasi atau arti contoh gambar.

masuk kehalaman soal latihan dari level 1 sampai 3.

5. Tombol Ini berfungsi untuk

masuk kehalaman profil.

masuk kehalaman Home.

masuk kehalaman mengenal huruf.

8. Tombol lanjut ini berfungsi

untuk masuk ke halaman selanjutnya.

9. Tombol kembali ini

berfungsi untuk kembali kehalaman selanjutnya.

10. Tombol YA berfungsi

untuk masuk kehalaman latihan soal.

11. Tombol TIDAK berfungsi

untuk keluar pada halaman latihan soal.

12. Tombol pintar jika

(3)

4.3 Proses

Aplikasi membaca dibuat menggunakan Adobe Flash Profesional CS3 dengan resolusi layer 1050 x 700 pixel dan frame rate 12.0 fps menggunakan bahasa pemograman ActionScript 2.0. Tampilan pada aplikasi belajar membaca di atur berurutan pada tiap frame dengan nama label yang terdiri dari beberapa scene, pada tiap frame terdapat animasi movie clip yang digerakan dengan script dan teknik montion tween yaitu teknik untuk membuat gambar atau objek bergerak secara otomatis.

4.4 Implementasi HalamanAntarmuka

Implementasi antarmuka merupakan hasil dari perancangan user interface yang sebelumnya sudah dilakukan pada tahapan perancangan. Pada implementasi antarmuka ini, menampilkan rancangan halaman dan potongan script dari beberapa tampilan aplikasi seperti halaman utama, halaman mengeja huruf, mengenal huruf, relasi, latihan dan profil.

4.4.1 Tampilan Awal

Pada tampilan awal menu ini terdapat animasi gambar pada mobil, awan,gedung bertingkat, anak-anak dan text yang bergerak.Terdapat movie clip pada judul aplikasi, button yang terdapat pada tombol masuk dan keluar, tombol masuk yang menuju ke kehalaman menu utama.

(4)

Tabel 4.2 Scene Tampilan Awal.

Layer Keterangan

Judul Terdapat Judul aplikasi dari frame 1.

Gambar Terdapat Objek gambar pada scene menu awal Button Masuk Terdapat ActionScript pada button masuk.

Background Terdapat pemandangan sebuah bukit yang terdapat animasi gambar anak-anak, gedung,pohon.

Actionscript yang terdapat pada button masuk sebagai berikut:

Jikabutton masuk ditekan, sistem akan menuju ke frame 10 di scene pertama dan menampilkan halaman menu utama pada aplikasi,dan pada baris ke dua dijelaskan ketika tombol button diklik maka secara otomatis musik yang berada di halaman menu akan berhenti.

on (release) {

gotoAndPlay ("menuawal",10); stopAllSounds();

}

4.4.2 Tampilan Menu Utama

Pada tampilan menu utama di frame 10 terdapat menu belajar yang terdiri dari,mengenal huruf, mengeja huruf, relasi, latihan, dan profil. Dimana pada masing-masing tombol mempunyai fungsi button yang akan memainkan animasi dan menampilkan halaman kepada pengguna jika masing-masing tombol button ditekan. Button mengenal huruf untuk menuju kehalaman mengenal huruf dasar abjad, button mengeja huruf menuju kehalaman mengeja huruf pada scene 3, button relasi menuju kehalaman relasi yang terdapat pada scene 4,buttonbelajar menuju kehalaman soal-soal latihan yang terdapat pada scene 5 danlevel 1 sampai 3 terdapat pada scene 6 sampai 8.selanjutnya button pada profil yang menuju kehalaman profil atau biodata penulis yang terdapat pada scene 9

(5)

Gambar 4.2 Menu Latihan Utama Tabel 4.3 Scene TampilanMenu Utama.

Judul Terdapat menu pembelajaran. Gambar Terdapat objek gambar pada scene.

Button Terdapat ActionScript padasetiap menu pembelajaran. Menu Terdapat menu mengenal huruf,mengeja

huruf,relasi,belajar dan profil.

Background Terdapat pemandangan sebuah bukit yang terdapat animasi gambar.

Actionscript yang terdapat pada masing-masing layerpada tombol button menu sebagai berikut:

pada button menu mengenal huruf ditekan, sistem akan menuju ke scene 2 di layer 10 dan menampilkan halaman mengeja huruf dan dijelaskan pada koding stopAllSaounds ( ); tersebut ketika tombol button Next diklik maka secara otomatis musik yang berada di halaman latihan akan berhenti dan masuk kehalaman yang telah dipilh atau halaman mengenal huruf.

on(release){

stopAllSounds();

gotoAndPlay ("mengenalhuruf",1); }

(6)

Script ini akan menuju kehalamanmengeja huruf pada scene 2 di layerpertama.

on(release){

stopAllSounds(); }

Perintah scropt ini akan menuju kehalaman relasi yang terdapat pada scene4 di frame pertama

on(release){

stopAllSounds();

gotoAndStop ("relasi",1); }

Perintah script ini akan menuju kehalaman latihan soal yang terdapat pada scene 5 di frame pertama

on(release){

stopAllSounds();

gotoAndStop("latihan",1);}

Perintah script ini akan menuju kehalaman profil yang terdapat padascene 9 di frame pertama.

on(release){

stopAllSounds();gotoAndPlay ("profil",1); }

(7)

4.4.3 Tampilan IntroAwal Mengenal Huruf

Tampilan ini adalah tampilan intro awal pada halaman mengenal huruf, animasi pada gambar dan movieclip pada text dan button pada tombol masuk, yang menuju ke halaman latihan mengenal huruf.huruf .

Gambar 4.3 Tampilan intro awal pada mengenal huruf.

Tabel 4.4 Scene IntroTampilan Mengenal Huruf

Actionscriptyang terdapat pada button masuk,dihalaman intro menu mengenal huruf.

on(release) {

nextFrame ();}

Judul Terdapat Judul aplikasi dari frameintro

Gambar Terdapat objek gambar pada scene menu awal

Button Masuk Terdapat ActionScriptpada button masuk yang menuju kehalaman mengenal huruf.

(8)

4.4.4 Tampilan Halaman Mengenal Huruf

Pada halamanmengenal huruf terdapatbutton submateriabjad yang apabila kursor ditekan ke masing-masing huruf akan mengeluarkan suara dan contoh kalimat yang berawalan dengan awalan huruf tersebut, di halaman mengenal huruf ini terdapat 3buttonyaitu pada tombol home,lanjut dan kembali. Ketiganya mempunyai fungsi yang berbeda,dihalaman ini pengguna mempelajari mengenal huruf abjad A sampai Z.

Tabel 4.5 Letak Tampilan Halaman Mengenal Huruf

A,B,C,D E,F,G,H

I,J,K,L,M N,O,P,Q

(9)

Tabel 4.6 SceneTampilan Mengenal Huruf.

Judul Menu Mengenal Huruf.

Button lanjut dan kembali

Terdapat ActionScript pada button lanjut dan kembali.

Button Home Terdapatbutton home menuju kehalaman menu utama.

Abjad Terdapat huruf abjad pada scene mengenal huruf. Background Terdapat latar background padascene .

Actionscript yang terdapat pada button tombol home, dan jika diklik akan menuju kehalaman menu utama, pada halaman awal berikut scriptnya:

on (release) {

gotoAndPlay("menuawal",10); }

Script ini terdapat pada button next, yang jika diklik akan menuju kehalaman berikutnya pada halaman mengenal huruf.

on (release){ nextFrame (); }

Script ini terdapat pada button prevt, yang jika diklik akan menuju kehalaman sebelunya pada halaman mengenal huruf.

on (release){ prevFrame (); }

(10)

4.4.5 Tampilan Halaman Mengeja Huruf

Padahalaman mengeja huruf tertdapatactionscript,button, tombol next dan prevpada setiap frame.Tombol next dan prevmempunyai dua fungsi yang berbeda. Dihalaman ini pengguna akan mempelajari pembelajaran mengeja huruf, dan sistem menampilkan halaman mengeja huruf A sampai Z dengan menekan tombol next dan seterus.

Tabel 4.7 Tampilan Letak Tabel Mengeja Huruf

A PE L B A L O N

C A P U N G D A S I

E L A N G F O T O

(11)

Lanjutan Tabel 4.7 Tampilan Letak Tabel Mengeja Huruf K U R S I L A M P U M A N G G A _{N A N A S} O B E N G P E R A H U Q U R „ A N R A M B U T A N S A N D A L T O M A T

(12)

on (release) {

Tabel 4.8 Scene Tampilan Mengeja Huruf

Actionscript yang terdapat pada button tombol home, dan jika diklik akan menuju kehalaman menu utama, pada halaman awal berikut scriptnya:

Script ini terdapat pada button next, yang jika diklik akan menuju kehalaman berikutnya pada halaman mengenal huruf.

on (release){

nextFrame (); }

4.4.6 Tampilan Halaman Awal Pada Relasi

Pada tampilan awal relasi terdapat animasi text yaitu “RELASI” dan karakter gambar orang dengan background pemandangan bukit hijau. Selain itu terdapat 2 button yang menuju ke halaman tertentu, yaitu tombol button masuk menuju ke halaman relasi di frame 2 scene 4, dan button home yang menuju ke halaman utama pada scene 1.

Judul Mengeja huruf Button lanjut dan

kembali

Terdapat ActionScriptyang menuju kehalaman selanjutnya

Button Home Terdapatbutton home menuju kehalaman menu utama. Patahan kata Terdapat pengejahan kata pada scene

(13)

Gambar 4.4 Tampilan Awal Pada Relasi.

Tabel 4.9 Scene Tampilan Intro Awal Pada Relasi

Judul Terdapat judul halaman awal relasi

Tombol Home Terdapat ActionScriptmenuju halaman menu utama. Tombol Masuk Terdapat ActionScript menuju halaman relasi. Content Terdapat text, animasi gambar

Background Terdapat background gambar pada scene

script ini akan menuju kehalaman berikutnya pada halaman relasi arti pada gambar.

on(release) { nextFrame (); }

4.4.7 Tampilan Halaman Relasi

Actionscript danbutton padatombolnext dan prev, yang menuju ke halaman sebelum dan selanjutnya. Pengguna mempelajari arti penjelasan pada gambar yang ada, dengan bantuan suara dan sistem akan mengeluarkan suara sesuai dengan gambar yang di pilih, pada halaman relasi menggunakan Audocity caranya

(14)

dengan merekam suara yang sudah di convert menggunkana AMR to MP3 convert, dan sistem akan mengeluarkan suara untuk mengetahui arti pada gambar yang ditekan. Sistem akan mengeluarkan suara dan pengguna akan mengetahui arti pada gambar yang ditekan.

Tabel 4.10 Letak Tampilan HalamanRelasi

Arti Gambar Ikan Arti Gambar Bebek

Arti Gambar Ulat Arti Gambar Zebra

Arti Gambar Burung Arti Gambar Gajah

(15)

Tabel 4.11 SceneTampilan Halaman Pada Relasi

Judul Terdapat Judul Relasi Tombol next dan

prev

Terdapat ActionScriptmenuju halaman selanjutnya ndan kembali kehalaman sebelumnya.

Content Terdapat suara yang menggunakan aplikasi audocity, animasi gambar, movieclip dan button tombol lanjut (anak panah)

Home Terdapat ActionScript dan movieclipyang menuju kehalaman menu utama.

Background Terdapat background gambar

script ini akan menuju kehalaman berikutnya pada halaman relasi arti pada gambar.

on (release) {

4.4.8 Tampilan Awal Pada Menu Latihan

Tampilan ini adalah tampilan awal pada halaman latihan, pada halaman ini terdapat Actionscript,animasi pada gambar dan movieclip pada text,button pada tombol YA dan tombol TIDAK. Jika pengguna memilih tombol button “YA” sistem akan menuju ke halaman latihan soal dan sistem menampilkan halaman latihan level 1- 3, dan jika pengguna memilih tombol button “TIDAK” sistem akan menuju kehalaman menu utama dan sistem menampilkan halaman menu utama pada scene 1.

(16)

Gambar 4.5 Tampilan Awal Pada Halaman Latihan.

Tabel 4.12 Scene Tampilan Awal Pada Halaman Relasi

Judul Terdapat halaman awal latihan belajar Button YA dan

TIDAK

Terdapat ActionScript yang menuju kehalaman belajar, atau kembali kehalaman menu utama.

Content Terdapat suara yang pembuatannya menggunakan aplikasi audocity, pada tombol buttonYA dan TIDAK.

Background Terdapat background gambar.

script berikut akan meuju kehalaman latihan soal, dan berikut scriptnya:

Pada tombol button “YA”di tekan maka sistem akan menuju kehalaman latihan soal yang terdapat pada scene 5, dan akan menampilkan halaman latihan.

on(release) {

nextFrame (); }

(17)

script berikut akan meuju kehalaman latihan soal, dan berikut scriptnya:

Pada tombol button “TIDAK” ditekan maka sistem akan menuju kehalaman menu utama dan menampilkan halaman menu utama pada scene pertama di frame pertama, dan secara otomatis music yang ada pada button TIDAK akan berhenti.

on(release){

stopAllSounds();

gotoAndPlay ("menuawal", 10);}

4.4.9 Tampilan Halaman Menu Latihan

Ini adalah tampilan halamanmenu soal-soal latihan, pada halaman ini terdapatactionscriptpada setiapgambar animasi dan movieclip pada text dan tombol button.Halaman ini terdiri dari level 1 sampai 3, yang masing-masing level mempunyai fungsi yang berbeda,kesulitan yang berbeda. Penggunaakanmemilih dan mempelajari pada halaman latihan soal-soalyang terdapat pada scene 5.

(18)

Tabel 4.13 Scene Tampilan Menu Latihan

Judul Terdapat judul halaman Menu Latihan

Per Level Terdapat ActionScript yang menuju ke masing-masing halaman yaitu halaman 1,2 dan 3.

Content Terdapat text, animasi gambar dan Button pada setiap level dengan mengeluarkan suara.

Home Terdapat ActionScript dan movieclip. Background Terdapat background gambar.

Script ini mi akan meuju ke scane halaman menu utama.

on (release) {

Actionscriptyang terdapat pada masing-masing layer sebagai berikut :

Tombol button gambar pelangi jika ditekan maka sistem akan menuju kehalaman mengenal warna dan contohnya yang terdapat pada frame 1 di scene6.

on(release) {

gotoAndPlay ("level1", 1); }

.

Script berikut jika salah satu gambar animasi buah atau hewan di tekan, maka akan meuju kehalaman menyamakan gambar yang terdapat pada scene 7 frame 1.

on (release) {

gotoAndStop("level2",1); }

Script berikut jika ditekan disalah satu hurufnya, maka akan menuju kehalaman menyusun huruf yang terdapat pada scene 8 di frame 1.

(19)

on(release) {

gotoAndPlay ("level3", 1); }

4.4.10 Tampilan Halaman Latihan Mengenal warna dan Contohnya.

Pada halaman ini sistem akan menampilkan halaman yang dipilih oleh pengguna, pada scene 6 terdapat latihan soal level 1 mengenal warna dan contohnya, dimana pengguna akan mengenal dasar warna diantaranya hijau,merah,biru,unggu,kuning dan coklat.Kemudian contohnya yaitu daun,apel,laut,terong,pisang dan coklat, cara penggunaanya dengan mengklik pada tombol buttonpensilyang berwarna. Kemudian sistem akan menampilkan textdan suara dari hasil yang telah dipilih dan contohnya.

Tabel 4.14 Letak Tampilan Latihan Level 1 Mengenal Warna.

Warna Hijau dan contohnya Daun _{Warna merah dan contohnya Apel}

(20)

Lanjutan Gambar 4.13 Letak Tampilan Latihan Level 1 Mengenal Warna.

Warna Kuning dan Contohnya Pisang Warna Coklat dan contohnya Coklat

Tabel 4.15 Scene Tampilan Awal Pada Halaman Level 1.

Judul Terdapat judul tampilan halaman level 1

Pensil Warna Terdapat ActionScriptyang menampilkan objek gambar,suara dan text

Content Terdapat text, animasi gambar dan suara.

Home Terdapat ActionScript menuju halaman menu utama. Background Terdapat background gambar.

Berikut adalah scriptframe 2 pada button pensil, jika di klik akan mengeluarkan suara dan gambar secara bersamaan dan akan munjul text sebagai contoh pesan yang telah kita klik pada tombool button.

on (release) {

gotoAndStop(2);stopAllSounds(); }

script berikut menuju kehalaman utama yang terdapat pada scene pertama.

on (release) {

(21)

4.4.11 Tampilan Latihan Mencocokan Gambar

Pada halaman ini terdapat halaman mencocokan gambar pada halaman ini sistem akan menampilkan halaman yang telah dipilih oleh pengguna(user), sebelum latihan dimulai pengguna diberikan petunjuk permainan agar pengguna dapat mengerti cara memainkan aplikasinya. Dihalaman ini terdapat beberapa susunan kartu yang terdapat isi gambar pada masing-masing kartu tersebut, Selanjutnya pengguna mempelajari cara belajar mencocokan gambar. Pengguna akan memilih salah satu objek kartu dengan cara mengkliknya, dan kartu akan berbalikdan terbuka. Berikut tampilan awal pada halaman ini :

Gambar 4.7 Tampilan Awal halaman mencocokan gambar.

Pada gambar 4.7 tampilan awal pada halaman mencocokan gambar, terdapat beberapa kartu (card)yang masih tertutup, dan buah apel sebagai objeknya, kemudian keranjang sebagai target terdapat juga tombol panah untuk lanjut ke halaman selanjutnya. Berikut ini potongan kode program dari tampilan awal halaman mencocokan gambar :

Script berikut menuju ke halaman selanjutnya yang berada pada latihan level 3.

on (release) {

(22)

4.4.12 Tampilan Halaman Level 2 Setelah Terbuka.

Gambar 4.8 Tampilan kartu (card) yang telah terbuka.

Pada gambar 4.8 Terdapat tampilan kartu (card) yang telah terbuka dengan cara mengklik pada bagian masing-masing kartu, dan terdapat beberapa object gambar buah. Pengguna mengklik pada bagian object buah yang terdapat di dalam kartu, kemudian object tersebut akan berpindah tempat ke dalam keranjang. Actionscript yang terdapat pada halaman pertama dengan tampilan kartu (card) sudah terbuka, sebagai berikut:

pintar_mc.onEnterFrame = function() { if (kartu.hitTest(tempat) && kartu3.hitTest(tempat)&&kartu5.hitTest(tempat)) { _root.pintar_mc.gotoAndStop(13); next_btn.enabled = true; } }; next_btn.enabled = false; next_btn.onRelease = function() { nextFrame();_root.pintar_mc.gotoAndStop(1); }; kartu.btn1.onRelease=function(){ _root.kartu.gotoAndPlay(2); }; stop(); kartu2.btn2.onRelease=function(){ _root.kartu2.gotoAndPlay(2); }; kartu3.btn3.onRelease=function(){ _root.kartu3.gotoAndPlay(2); };

(23)

kartu4.btn4.onRelease=function(){ _root.kartu4.gotoAndPlay(2); }; kartu5.btn5.onRelease=function(){ _root.kartu5.gotoAndPlay(2); };

4.4.13 Tampilan Halaman Level 2 Benar.

Gambar 4.9 Tampilan kartu (card) benar.

Pada gambar 4.9 tampilan pada halaman ini, ada beberapa kartu (card) yang sudah terbuka, dan apel sebagai objek utamanya yang sudah dipilih dan sudah masuk di dalam keranjang. Kemudian jika pengguna (user) sudah menyelesaikan latihan mencocokan gambar, maka gambar pintar akan muncul sebagai tanda bahwa untuk objek yang dipilih sudah benar semua. Berikut script yang terdapat pada halaman ini:

next_btn.enabled = false;

next_btn.onRelease = function() {

nextFrame();pintar_mc.gotoAndStop(1); };

pintar_mc.onEnterFrame = function() {

if (kartu.hitTest(tempat) && kartu3.hitTest(tempat) &&artu5.hitTest(tempat)) {

(24)

_root.pintar_mc.gotoAndStop(13); next_btn.enabled = true; } }; kartu.btn1.onRelease=function(){ _root.kartu.gotoAndPlay(2); }; stop(); kartu2.btn2.onRelease=function(){ _root.kartu2.gotoAndPlay(2); }; kartu3.btn3.onRelease=function(){ _root.kartu3.gotoAndPlay(2); }; kartu4.btn4.onRelease=function(){ _root.kartu4.gotoAndPlay(2); }; kartu5.btn5.onRelease=function(){ _root.kartu5.gotoAndPlay(2); };

4.4.14 Tampilan Halaman Level 2 Yang Salah.

(25)

Pada gambar 4.10 tampilan pada halaman ini, ada beberapa kartu (card) yang sudah terbuka, dan apel sebagai objek utamanya yang sudah dipilih dan sudah masuk di dalam keranjang. Kemudian jika pengguna (user) memilih salah satu object selain buah apel makan tanda (text) salah akan muncul sebagai tanda bahwa object yang dipilih salah. Berikut script yang terdapat pada halaman ini:

if (kartu.hitTest(tempat) && kartu3.hitTest(tempat) && kartu5.hitTest(tempat)) { _root.pintar_mc.gotoAndStop(13); next_btn.enabled = true; } }; next_btn.enabled = false; next_btn.onRelease = function() { nextFrame();_root.pintar_mc.gotoAndStop(1); }; kartu.btn1.onRelease=function(){ _root.kartu.gotoAndPlay(2); }; stop(); kartu2.btn2.onRelease=function(){ _root.kartu2.gotoAndPlay(2); }; kartu3.btn3.onRelease=function(){ _root.kartu3.gotoAndPlay(2); }; kartu4.btn4.onRelease=function(){ _root.kartu4.gotoAndPlay(2); }; kartu5.btn5.onRelease=function(){ _root.kartu5.gotoAndPlay(2); };

(26)

Gambar 4.11 Tampilan berhasil pada halaman mencocokan gambar.

Pada gambar 4.11 tampilan pada halaman ini, terdapat gambar animasi yang bergerak, dan tulisan berhasil, serta tombol home untuk kembali ke halaman menu. Berikut ini potongan kode program dari tampilan berhasil pada halaman mencocokan gambar :

jika user sudah menyelesaikan tahap akhir dan gambar pintar tidak akan muncul kembali karna sudah di stop.Berikut scriptnya:

stop();_root.pintar_mc.gotoAndStop(1);

4.4.16 Tampilan Latihan Mencocokan Gambar level 3

Pada halaman ini terdapat halaman mencocokan huruf sistem akan menampilkan halaman yang telah dipilih oleh pengguna (user), sebelum latihan dimulai pengguna diberikan petunjuk permainan agar pengguna dapat mengerti cara mmenjalankan aplikasinya. Dihalaman ini terdapat beberapa susunan huruf yang diacak kemudian pengguna menyusunnya menjadi sebuah kalimat dan ditempatkan dikotak yang sudah disediakan yaitu kotak yang tersedia dan sesuai dengan contoh yang disediakan disebelah kiri dengan contoh gambarnya. Berikut tampilan awal pada halaman ini :

(27)

Pada gambar 4.16 tampilan pada halaman awal mencocokan huruf, terdapat beberapa huruf yang teracak, dan kolom kosong yang sudah disediakan untuk meletakan huruf-huruf yang tersusun sesuai dengan objek gambar sebagai contohnya, pengguna menjalankan aplikasi ini dengan cara mendrag salah satu huruf yang ada dan mendragnya kedalam kolom kosong yang sudah tersedia kemudian disusun menjadi sebuah kata yang sudah dicontohnkan. Terdapat tombol panah untuk lanjut ke halaman mencocokan huruf selanjutnya. Berikut ini potongan kode program dari tampilan halaman keempat mencocokan gambar :

stop();

//posisi awal huruf dilihat pada kordinat x & y pda propertis mc_b._x = 467.1; mc_b._y = 454.9; mc_g._x = 590.0; mc_g._y = 457.7; mc_u._x = 730.6; mc_u._y = 420.8; mc_a._x = 757.6; mc_a._y = 553.6; mc_k._x=860.5; mc_k._y=454.4; score=0; pintar_mc.gotoAndStop(1); mc_b.onPress = function() { this.startDrag(); };

//jika MC b dipindahkan ke target b maka benar akan muncul & score bertambah 1 mc_b.onRelease = function() { this.stopDrag(); if (eval(this._droptarget) == target_b) { this._x = target_b; this._y = target_b; benar_mc.gotoAndPlay(2); score+=1; } else {

(28)

mc_b._x = 467.1; mc_b._y = 454.9; salah_mc.gotoAndPlay(2); } }; this.startDrag(); }; mc_u.onRelease = function() { this.stopDrag(); if (eval(this._droptarget) == target_u) { this._x = target_u; this._y = target_u; benar_mc.gotoAndPlay(2);score+=1; } else { mc_u._x = 730.6; mc_u._y = 420.8; salah_mc.gotoAndPlay(2); } }; mc_a.onPress = function() { this.startDrag(); }; mc_a.onRelease = function() { this.stopDrag(); if (eval(this._droptarget) == target_a) { this._x = target_a; this._y = target_a; benar_mc.gotoAndPlay(2);score+=1; } else { mc_a._x = 757.6; mc_a._y = 553.6; salah_mc.gotoAndPlay(2); } }; pintar_mc.onEnterFrame=function(){ if(score==4){ pintar_mc.gotoAndPlay(2);score=0;next_btn.enabled=true;}

(29)

};

next_btn.enabled=false;

next_btn.onRelease=function(){ nextFrame();

};

Tabel 4.16 Scene Tampilan Awal Pada Halaman Level 3.

Judul Terdapat judul tampilan halaman level 3

Card Terdapat Montion yang mmembuat kartu berbalik dan mengeluarkan suara.

Content Terdapat, animasi gambar dan suara. Tombol Button

Next Terdapat ActionScript menuju kehalaman selanjutnya. Home Terdapat ActionScriptmenuju halaman utama.

Background Terdapat background gambar.

Pada script yang terdapat dibawah ini jika pengguna sudahmenyelesaikan untuk latihan soal level 3 maka tanda pintar akan muncul, dan secara otomatis jika (user) mengklik tombol button next tulisan pintar akan berhenti. Kemudian pengguna (user) bisa melanjutkan latihan kehalaman berikutnya dengan mengklik tombol next, berikut scriptnya:

next_btn.enabled = false;

next_btn.onRelease = function() {

nextFrame();_root.pintar_mc.gotoAndStop(1); };

pada script yang terdapat dibawah ini jika kartu dklik maka kartu akan bergerak keFrame2 Berikut acriptnya:

kartu.btn1.onRelease=function(){ _root.kartu.gotoAndPlay(2); } ;

(30)

Ketika kartu diklik dan berputar arah membuka kartu, terdapatgambar buah apel didalam kartu. Kemudian buah apel diklik maka akan berpindah tempat kedalam keranjang.

if (kartu.hitTest(tempat) && kartu3.hitTest(tempat) &&kar tu5.hitTest(tempat)) { _root.pintar_mc.gotoAndStop(13); next_btn.enabled = true; } }; 4.5 Pengujian

Dalam perancangan aplikasi belajar membaca untuk anak paud berbasis androidpenulis akan melakukan pengujianpada aplikasi.Pengujian ini dilakukan dengan cara berulang-ulang dan bertahap untuk mengetahui kemungkinan terjadi kesalahan dalam pembuatannya dan untuk memastikan program atau fitur-fitur yang terdapat dalam aplikasi berjalan dengan baik. Apabila dalam melakukan pengujian ditemukan kesalahan pada aplikasi, maka akan dilakukan perbaikan dalam kesalahan aplikasi ini, tanpa adanya pengujian sampai aplikasi benar-benar berjalan dengan baik.

4.5.1 Pengujian Black Box

Pengujian dengan menggunakan Balck Box ini penulis bertujuan untuk menentukan langkah-langkah dalam pengujian dan memeriksa apakah ada bagian dari spesifikasi sebelumnya yang belum atau tidak diimplementasikan. Berikut ini adalah tahap dari skenario pengujian.

1. Pengujian Terhadap Jedela Menu

(31)

Tabel 4.17 Skenario Pengujian dan Hasil Pengujian Black Box Menu Utama. No Antarmuka Yang Diuji Bagian Dari Antarmuka Yang Diuji Skenario Pengujian Hasil Yang Diharapkan Hasil Pengujian 1 Jendela Menu Utama Menu Belajar Mengenal Huruf Pengguna Mengklik Menu Mengenal Huruf Menampilkan Jendela Mengenal Huruf Sesuai 2 Jendela Menu Utama Menu Belajar Mengeja Huruf Pengguna Mengklik Menu Mengeja Huruf Menampilkan Jendela belajar Mengeja Huruf Sesuai 3 Jendela Menu Utama Menu Belajar

Relasi Pengguna Mengklik Menu Relasi Menampilkan Jendela belajar Arti Kata Sesuai 4 Jendela Menu Utama Menu Belajar

Latihan Pengguna Mengklik Menu Latihan Menampilkan Jendela Latihan Soal Sesuai 5 Jendela Menu Utama Menu Belajar Latihan Level 1 Pengguna Mengklik Menu Latihan Level 1 Menampilkan Jendela Belajar Mengenal Warna Sesuai 6 Jendela Menu Utama Menu Belajar Latihan Level 2 Pengguna Mengklik Menu Latihan Level 2 Menampilkan Jendela Latihan Mencocokan Gambar Sesuai 7 Jendela Menu Utama Menu Belajar Latihan Level 3 Pengguna Mengklik Menu Latihan Level 3 Menampilkan Jendela Latihan Menyusun Huruf Sesuai 8 Jendela Menu Utama

Menu Profil Pengguna Mengklik Menu Profil

Menampilkan Jendela Profil

(32)

2. Pengujian Terhadap Jendela Mengenal Huruf.

Skenario pengujian dapat dilihat pada tabel berikut ini:

Tabel 4.18 Skenario Pengujian dan Hail Pengujian BlackBox Mengenal Huruf. No Antarmuka Yang Diuji Bagian Dari Antarmuka Yang Diuji Skenario Pengujian Hasil Yang Diharapkan Hasil Pengujian 1 Jendela Mengenal Huruf Tombol

Home Pengguna Mengklik Tombol Home Muncul Tampilan Halaman Menu Utama Sesuai 2 Jendela Mengenal Huruf Tombol Button Selanjutnya Pengguna Mengklik Tombol Selanjutnya Muncul Tampilan Halaman Selanjutnya pada Halaman Mengenal Huruf Sesuai 3 Jendela Mengenal Huruf Tombol Button Kembali Pengguna Mengklik Tombol Kembali Muncul Tampilan Halaman Sebelumnya pada Halaman Mengenal Huruf Sesuai 4 Jendela Mengenal Huruf Tombol Pada

Huruf Abjad Pengguna Mengklik Tombol pada masing-masing Huruf

Muncul Audio Sesuai

5 Tombol Pada

Gambar Pengguna Mengklik Tombol pada gambar

(33)

3. Pengujian Terhadap Jendela Mengeja Huruf.

Tabel 4.19 Skenario Pengujian dan Hail Pengujian BlackBox Mengeja Huruf.

No Antarmuka Yang Diuji Bagian Dari Antarmuka Yang Diuji Skenario Pengujian Hasil Yang Diharapkan Hasil Pengujian 1 Jendela Mengeja Huruf Tombol

Home Pengguna Mengklik Tombol Home Muncul Tampilan Halaman Menu Utama Sesuai 2 Jendela Mengeja Huruf Tombol Button Selanjutnya Pengguna Mengklik Tombol Selanjutnya Muncul Tampilan Selanjutnya dihalaman Mengeja Huruf Sesuai 3 Jendela Mengeja Huruf Tombol Button Kembali Pengguna Mengklik Tombol Kembali Muncul Tampilan halaman sebelumnya dihalaman Mengeja Huruf Sesuai 4 Jendela Mengeja Huruf Huruf Abjad

(34)

4. Pengujian Terhadap Jendela Relasi.

Tabel 4.20 Skenario Pengujian dan Hail Pengujian BlackBox Relasi. No Antarmuka Yang Diuji Bagian Dari Antarmuka Yang Diuji Skenario Pengujian Hasil Yang Diharapkan Hasil Pengujian 1 Jendela

Relasi Tombol Home Pengguna Mengklik Tombol Home Muncul Tampilan Halaman Menu Utama Sesuai 2 Jendela

Relasi Tombol Button Selanjutnya Pengguna Mengklik Tombol Selanjutnya Muncul Tampilan Selanjutnya dihalaman Mengeja Huruf Sesuai 3 Jendela

Relasi Tombol Button Kembali Pengguna Mengklik Tombol Kembali Muncul Tampilan halaman sebelumnya dihalaman Mengeja Huruf Sesuai 4 Jendela

Relasi Tombol Button Selanjutnya Pengguna Mengklik Tombol Selanjutnya Muncul Tampilan Selanjutnya dihalaman Mengeja Huruf Sesuai 5 Jendela

Relasi Tombol Button Masuk Pengguna Mengklik Tombol Masuk Muncul Tampilan Relasi Sesuai 6 Jendela

Relasi Gambar Pengguna Mengklik Gambar

(35)

5. Pengujian Terhadap Jendela Belajar.

Tabel 4.21 Skenario Pengujian dan Hail Pengujian BlackBox Belajar.

No Antarmuka Yang Diuji Bagian Dari Antarmuka Yang Diuji Skenario Pengujian Hasil Yang Diharapkan Hasil Pengujian 1 Jendela

Belajar Tombol Belajar Pengguna Mengklik Tombol Belajar Dimenu Utama Muncul Tampilan Halaman Belajar Sambil Bermain Sesuai 2 Jendela

Belajar Tombol YA Pengguna mengklik Tombol YA Muncul Tampilan Halaman Latihan Soal Sesuai 3 Jendela

Belajar Tombol TIDAK Pengguna Mengklik Tombol TIDAK Muncul Tampilan Menu Utama Sesuai

6. Pengujian Terhadap Jendela Latihan Level 1.

Tabel 4.22 Skenario Pengujian dan Hail Pengujian BlackBox Level 1.

Level 1 Tombol Home Pengguna Mengklik Tombol Home Muncul Tampilan Halaman Menu Utama Sesuai 2 Jendela

Level 1 Tombol Pensil Pengguan Mengklik Tombol Pensil Warna

(36)

Level 2 Tombol Button Selanjutnya Pengguna Mengklik Tombol Selanjutnya Muncul Tampilan Selanjutnya dihalaman Mencocokan Gambar Sesuai 3 Jendela

Level 2 Gambar Kartu Pengguna mengklik Kartu Muncul Tampilan Kartu Yang Terbuka Sesuai

Level 3 Tombol Button Selanjutnya Pengguna Mengklik Tombol Selanjutnya Muncul Tampilan Selanjutnya dihalaman Menyusun Huruf Sesuai

(37)

Lanjutan Tabel 4.24 Skenario Pengujian dan Hail Pengujian BlackBox Level 3.

3 Jendela

Level 3 Tombol Button Kembali Pengguna Mengklik Tombol Kembali Muncul Tampilan halaman sebelumnya dihalaman Mengeja Huruf Sesuai 4 Jendela

Level 3 Tombol Huruf Pengguna Mengklik Huruf

Muncul Audio Sesuai

9. Pengujian Terhadap Jendela Profil.

Tabel 4.25 Skenario Pengujian dan Hail Pengujian BlackBox Profil.

Profil Tombol Home Pengguna Mengklik Tombol Home Muncul Tampilan Halaman Menu Utama Sesuai 2 Jendela

Profil Tombol Profil Pengguna Mengklik Tombol Profil Muncul Halaman Profil Penulis Sesuai

4.6 Analisis Hasil Pengujian Black Box

Analisis hasil pengujian dilakukan dengan memberikan penelitian secara keseluruhan terhadap semua hasil pengujian.

Berdasarkan hasil pengujian di atasa, dapat disimpulkan bahwa :

1. Aplikasi pembelajaran membaca dapat berjalan dengan baik pada media Android.

2. Aplikasi dapat menampilkan halaman menu yang diinginkan pengguna dengan baik.

(38)

4. Halaman di setiap menu pada aplikasi pembelajaran membaca berjalan dengan baik, sehingga aplikasi ini bisa di gunakan user (pengguna) dengan konsep yang sudah dibuat.