Construction Phase

ANALISIS DAN PERANCANGAN

IMPLEMENTASI SISTEM

4.1 Construction Phase

Pada tahap ini mulai dibuat script yang dibutuhkan dalam membangun visualisasi pembelajaran Sandi Morse ini. Dalam aplikasi pembelajaran ini digunakan metode penghafalan morse dengan alphabet EISH, TMO, AUVWY, NDBGQ, CJZ, KPF, dan RXL. Pembagian kode morse menurut metode penghafalan tersebut dapat dilihat pada gambar di bawah ini.

Gambar 4.1 Metode pengahafalan sandi morse

Dari pembagian kode morse seperti di atas maka akan dibuat 7 tingkatan materi dan latihan dalam media visualisasi pembelajaran Sandi Morse. Pada panel Action

Script 3.0 yang terdapat dalam Adobe Flash CS4, dibuat script untuk membuat formMenu, formMateri dan formLatihan seperti dibawah ini:

1. Membuat form Menu, Latihan dan Materi

//membuat form Menu, Latihan dan Materi

var formMenu:Sprite=new Sprite()

var formLatihan:Sprite=new Sprite()

var formMateri:Sprite=new Sprite()

Script di atas digunakan untuk membuat stage atau form yang akan digunakan untuk menampung setiap objek yang akan dimasukkan di dalamnya. Form yang terbentuk dari script diatas merupakan halaman-halaman yang terdapat pada aplikasi Visualisasi Pembelajaran Sandi Morse.

2. Membuat semua objek pada form Menu

//inisialisasi formMenu

formMenu.x=0

formMenu.y=0

stage.addChild(formLatihan)

stage.addChild(formMenu)

//bikin semua objek menu ditaruh pada sprite formMenu

bacground.x=400 bacground.y=300 formMenu.addChild(bacground) btnBelajarEISH.x=200.5 btnBelajarEISH.y=384.8 formMenu.addChild(btnBelajarEISH) btnBelajarTMO.x=200 btnBelajarTMO.y=418.8

btnBelajarAUVWY.x=200.5 btnBelajarAUVWY.y=447.8 formMenu.addChild(btnBelajarAUVWY) btnBelajarNDBGQ.x=200 btnBelajarNDBGQ.y=477.3 formMenu.addChild(btnBelajarNDBGQ) btnBelajarCJZ.x=200.5 btnBelajarCJZ.y=505.8 formMenu.addChild(btnBelajarCJZ) btnBelajarKPF.x=200.5 btnBelajarKPF.y=533.8 formMenu.addChild(btnBelajarKPF) btnBelajarRXL.x=200.5 btnBelajarRXL.y=563.3 formMenu.addChild(btnBelajarRXL) btnLatihanEISH.x=600.5 btnLatihanEISH.y=384.8 formMenu.addChild(btnLatihanEISH) btnLatihanTMO.x=600 btnLatihanTMO.y=418.8 formMenu.addChild(btnLatihanTMO) btnLatihanAUVWY.x=600.5 btnLatihanAUVWY.y=447.8 formMenu.addChild(btnLatihanAUVWY) btnLatihanNDBGQ.x=600.5 btnLatihanNDBGQ.y=477.3 formMenu.addChild(btnLatihanNDBGQ) btnLatihanCJZ.x=600.5 btnLatihanCJZ.y=505.8 formMenu.addChild(btnLatihanCJZ) btnLatihanKPF.x=600.5 btnLatihanKPF.y=533.8

formMenu.addChild(btnLatihanKPF)

btnLatihanRXL.x=600.5

btnLatihanRXL.y=563.3

formMenu.addChild(btnLatihanRXL)

Script di atas adalah inisialisasi dari form Menu yang mana merupakan tampilan halaman utama saat aplikasi pertama kali dijalankan. Setiap objek yang digunakan pada aplikasi Visualisasi Pembelajaran Sandi Morse yang berupa button dimasukkan lewat script ini. Peletakan button latihan dan materi menggunakan indeks x dan y. Supaya button dapat ditampilkan pada halaman utama ini maka digunakan script formMenu.addchild() , dimana formMenu adalah nama stage dari halaman utama dan addchild() digunakan untuk menambahkan objek pada stage. Hasil tampilan dari script di atas ditunjukkan pada Gambar 4.2.

3. Membuat objek pada form Materi

//untuk lagu pada form Materi

var lagu:soundMateri= new soundMateri()

var mainLagu:SoundChannel = new SoundChannel()

//inisialisasi formMateri formMateri.graphics.lineStyle(1) formMateri.graphics.beginFill(0x929292) formMateri.graphics.drawRect(10,10,780,580) formMateri.graphics.endFill() formMateri.x=810 formMateri.y=610 stage.addChild(formMateri)

//membuat semua objek Materi pada formMateri

btnKembali.x=150 btnKembali.y=550 btnLatihanSoal.x=700 btnLatihanSoal.y=550 formMateri.addChild(btnLatihanSoal) formMateri.addChild(mcMateriEISH) formMateri.addChild(mcMateriTMO) formMateri.addChild(mcMateriAUVWY) formMateri.addChild(mcMateriNDBGQ) formMateri.addChild(mcMateriCJZ) formMateri.addChild(mcMateriKPF) formMateri.addChild(mcMateriRXL) formMateri.addChild(btnKembali) formMateri.addChild(mcBelajarMorse) formMateri.addChild(mcHafalMorse)

Script diatas adalah inisialisasi untuk menambahkan objek pada halaman Materi. Pada halaman ini ditambahkan button Kembali dan button Latihan. Tombol Kembali digunakan oleh user untuk kembali pada halaman utama. Sedangkan tombol Latihan digunakan untuk menuju ke halaman Latihan Morse. Pada halaman Materi ini dimasukkan pula materi-materi Morse yang akan dipelajari. Materi morse ini berbentuk gambar dan di dalam Adobe Flash, gambar tersebut diubah menjadi MovieClip. Pada script diatas contoh penamaan gambar yang diubah ke movieclip ditunjukkan dengan nama mcMateri. Hasil tampilan materi ditunjukkan pada Gambar 4.3.

Gambar 4.3 Tampilan Halaman Materi

4. Membuat objek pada form Latihan

//inisialisasi Form Latihan dan objek di atasnya

teksNoSoal.x=50

teksCounterSoal.y=50 teksPenilaian.x=600 teksPenilaian.y=50 teksNilai.x=700 teksNilai.y=50 teksJawab.x=200 teksJawab.y=250 mcSoal.x=200 mcSoal.y=115 btnKembaliLatihan.x=100 btnKembaliLatihan.y=550 formLatihan.addChild(teksNoSoal) formLatihan.addChild(teksCounterSoal) formLatihan.addChild(teksPenilaian) formLatihan.addChild(teksNilai) formLatihan.addChild(teksJawab) formLatihan.addChild(mcSoal) formLatihan.addChild(btnKembaliLatihan) btnKembaliLatihan.addEventListener(MouseEvent.CLICK, kembaliLatihan)

Script diatas adalah inisialisasi dari halaman Latihan. Semua objek yang digunakan pada halaman latihan dimasukkan melalui script ini. Hampir sama dengan peletakan objek pada form Materi, objek pada halaman latihan dimasukkan dengan menggunakan script formLatihan.addchild(). Pada halaman latihan disediakan 1 tombol yaitu tombol Kembali. Pada Adobe Flash tombol ini diberi nama btnKembaliLatihan untuk membedakan dengan tombol Kembali pada form Materi. Meskipun fungsi dari tombol ini sebenarnya sama yaitu untuk

kembali pada halaman utama atau form Menu. Tampilan form latihan ditunjukkan pada Gambar 4.4.

Gambar 4.4 Tampilan Halaman Latihan

Setelah membuat form untuk menu, materi dan latihan, maka dibuat pembagian kode morse tersebut dalam array seperti di bawah ini .

//menampilkan Level 1, morse titik dari alphabet E I S H var Level1:Array = new Array()

var hurufE:morseE=new morseE() Level1.push(hurufE);

var hurufI:morseI=new morseI() Level1.push(hurufI);

var hurufS:morseS=new morseS() Level1.push(hurufS);

var hurufH:morseH=new morseH() Level1.push(hurufH);

//menampilkan Level 2, morse strip dari alphabet T M O var Level2:Array = new Array()

var hurufT:morseT=new morseT() Level2.push(hurufT);

var hurufM:morseM=new morseM() Level2.push(hurufM);

var hurufO:morseO=new morseO() Level2.push(hurufO);

//menampilkan Level 3, morse berkebalikan dari alphabet A U V W Y var Level3:Array = new Array()

var hurufA:morseA=new morseA() Level3.push(hurufA);

var hurufU:morseU=new morseU() Level3.push(hurufU);

var hurufV:morseV=new morseV() Level3.push(hurufV);

var hurufW:morseW=new morseW() Level3.push(hurufW);

var hurufY:morseY=new morseY() Level3.push(hurufY);

//menampilkan Level 4, morse berkebalikan dari alphabet N D B G Q var Level4:Array = new Array()

var hurufN:morseN=new morseN() Level4.push(hurufN);

var hurufD:morseD=new morseD() Level4.push(hurufD);

Level4.push(hurufB);

var hurufG:morseG=new morseG() Level4.push(hurufG);

var hurufQ:morseQ=new morseQ() Level4.push(hurufQ);

//menampilkan Level 5, morse tak ada lawan dari alphabet C J Z var Level5:Array = new Array()

var hurufC:morseC=new morseC() Level5.push(hurufC);

var hurufJ:morseJ=new morseJ() Level5.push(hurufJ);

var hurufZ:morseZ=new morseZ() Level5.push(hurufZ);

//menampilkan Level 6, morse sandwiches dari alphabet K P F var Level6:Array = new Array()

var hurufK:morseK=new morseK() Level6.push(hurufK);

var hurufP:morseP=new morseP() Level6.push(hurufP);

var hurufF:morseF=new morseF() Level6.push(hurufF);

//menampilkan Level 7, morse sandwiches dari alphabet R X L var Level7:Array = new Array()

var hurufR:morseR=new morseR() Level7.push(hurufR);

Level7.push(hurufX);

var hurufL:morseL=new morseL() Level7.push(hurufL);

Array yang dibuat di atas digunakan untuk membuat setiap level dalam permainan. Setelah Array level 1-7 terbentuk, kemudian disimpan lagi dalam sebuah array yang bernama array level.

var arrayLevel:Array=new Array() arrayLevel.push(Level1) arrayLevel.push(Level2) arrayLevel.push(Level3) arrayLevel.push(Level4) arrayLevel.push(Level5) arrayLevel.push(Level6) arrayLevel.push(Level7)

Setelah membuat array, kemudian dibuat juga beberapa variable yang akan digunakan , terutama variable dari morse itu sendiri. Di bawah ini adalah contoh script untuk membuat variabel dan script untuk meletakkan objek movieclip morse ke dalam form latihan.

var indeks:int; var nilai:int=0; var level:int=1; var jumlahHuruf:int; var bilRandom:int; var counterSoal:int;

var mcE:abjadE=new abjadE()

var mcS:abjadS=new abjadS()

var mcH:abjadH=new abjadH()

formLatihan.addChild(mcE)

formLatihan.addChild(mcI)

formLatihan.addChild(mcS)

formLatihan.addChild(mcH)

Setelah setiap variable yang diperlukan dibuat maka kemudian membuat function game di mana di dalamnya berisi script untuk menjalankan random soal, tombol jawaban, dan nilai. Seperti contoh script di bawah ini berfungsi untuk menjalankan random soal dan menjalankan tombol jawaban dengan menggunakan fungsiclick.

function game():void{ mcH.addEventListener(MouseEvent.CLICK,click3) bilRandom=Math.floor(Math.random()*jumlahHuruf) mcSoal.addChild(arrayLevel[level-1][bilRandom]) teksCounterSoal.text=String(counterSoal) } function click0(mevt:MouseEvent):void{ if (bilRandom==0){ teksJawab.text="Jawabanmu Benar!!"; nilai+=1 teksNilai.text=String(nilai) } else {

teksJawab.text="Oops Salah!!" } counterSoal += 1 mcSoal.removeChild(arrayLevel[level-1][bilRandom]) bilRandom=Math.floor(Math.random()*jumlahHuruf) mcSoal.addChild(arrayLevel[level-1][bilRandom]) teksCounterSoal.text=String(counterSoal) }

Dalam program ini dimasukkan juga script untuk tombol kembali dari halaman materi menuju ke halaman utama. Berikut ini script yang digunakan :

btnKembali.addEventListener(MouseEvent.CLICK, kembali) function kembali(mevt:MouseEvent):void{ //mcSoal.removeChildAt(0) mcMateriEISH.x=-100 mcMateriEISH.y=200 mcMateriTMO.x=-100 mcMateriTMO.y=200 mcMateriAUVWY.x=-100 mcMateriAUVWY.y=250 mcMateriNDBGQ.x=-100 mcMateriNDBGQ.y=200 mcMateriCJZ.x=-100 mcMateriCJZ.y=200 mcMateriKPF.x=-100 mcMateriKPF.y=200 mcMateriRXL.x=-100 mcMateriRXL.y=200 mcHafalMorse.x=400

mcHafalMorse.y=400 mcBelajarMorse.x=400 mcBelajarMorse.y=75 formMateri.x=810 formMateri.y=610 formLatihan.x=810 formLatihan.y=610 formMenu.x=0 formMenu.y=0 mainLagu.stop() }

Script di atas adalah script untuk memanggil kembali halaman utama. Script tersebut merupakan fungsi dari tombol Kembali, dimana tombol tersebut berada pada halaman materi. Fungsi yang sama digunakan juga pada tombol KembaliLatihan, hanya saja pada tombol kembali pada halaman latihan, fungsi tombol kembali ditambahkan script untuk membersihkan nilai dan penghitung soal seperti di bawah ini.

function kembaliLatihan(mevt:MouseEvent):void{ mcSoal.removeChild(arrayLevel[level-1][bilRandom]) counterSoal = 1 nilai = 0 teksNilai.text=String(nilai) teksJawab.text=""; formMateri.x=810 formMateri.y=610

formLatihan.y=610

formMenu.x=0

formMenu.y=0

}

Pada script diatas terdapat script untuk membersihkan nilai dan penghitung soal. Untuk membersihkan nilai ditunjukkan dengan nilai = 0, sedangkan untuk membersihkan penghitung soal digunakan scriptcounterSoal = 1.

Gambar 4.5 Tampilan latihan soal

Pada Gambar 4.5 diatas merupakan tampilan latihan soal yang sedang dipergunakan user. Jika user menekan tombol Kembali dan memilih latihan dari materi yang lain, maka skor dan soal akan direset ke angka semula seperti pada Gambar 4.6.

BAB V

PENGUJIAN DAN ANALISA HASIL