26
BAB IV 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
27 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.addChildformLatihan
stage.addChildformMenu bikin semua objek menu ditaruh pada sprite formMenu
bacground.x=400 bacground.y=300
formMenu.addChildbacground btnBelajarEISH.x=200.5
btnBelajarEISH.y=384.8 formMenu.addChildbtnBelajarEISH
btnBelajarTMO.x=200 btnBelajarTMO.y=418.8
formMenu.addChildbtnBelajarTMO
28
btnBelajarAUVWY.x=200.5 btnBelajarAUVWY.y=447.8
formMenu.addChildbtnBelajarAUVWY btnBelajarNDBGQ.x=200
btnBelajarNDBGQ.y=477.3 formMenu.addChildbtnBelajarNDBGQ
btnBelajarCJZ.x=200.5 btnBelajarCJZ.y=505.8
formMenu.addChildbtnBelajarCJZ btnBelajarKPF.x=200.5
btnBelajarKPF.y=533.8 formMenu.addChildbtnBelajarKPF
btnBelajarRXL.x=200.5 btnBelajarRXL.y=563.3
formMenu.addChildbtnBelajarRXL btnLatihanEISH.x=600.5
btnLatihanEISH.y=384.8 formMenu.addChildbtnLatihanEISH
btnLatihanTMO.x=600 btnLatihanTMO.y=418.8
formMenu.addChildbtnLatihanTMO btnLatihanAUVWY.x=600.5
btnLatihanAUVWY.y=447.8 formMenu.addChildbtnLatihanAUVWY
btnLatihanNDBGQ.x=600.5 btnLatihanNDBGQ.y=477.3
formMenu.addChildbtnLatihanNDBGQ btnLatihanCJZ.x=600.5
btnLatihanCJZ.y=505.8 formMenu.addChildbtnLatihanCJZ
btnLatihanKPF.x=600.5 btnLatihanKPF.y=533.8
29
formMenu.addChildbtnLatihanKPF btnLatihanRXL.x=600.5
btnLatihanRXL.y=563.3 formMenu.addChildbtnLatihanRXL
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.
Gambar 4.2 Tampilan Menu Utama
30 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.lineStyle1 formMateri.graphics.beginFill0x929292
formMateri.graphics.drawRect10,10,780,580 formMateri.graphics.endFill
formMateri.x=810 formMateri.y=610
stage.addChildformMateri membuat semua objek Materi pada formMateri
btnKembali.x=150 btnKembali.y=550
btnLatihanSoal.x=700 btnLatihanSoal.y=550
formMateri.addChildbtnLatihanSoal formMateri.addChildmcMateriEISH
formMateri.addChildmcMateriTMO formMateri.addChildmcMateriAUVWY
formMateri.addChildmcMateriNDBGQ formMateri.addChildmcMateriCJZ
formMateri.addChildmcMateriKPF formMateri.addChildmcMateriRXL
formMateri.addChildbtnKembali formMateri.addChildmcBelajarMorse
formMateri.addChildmcHafalMorse
31 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
teksNoSoal.y=50 teksCounterSoal.x=175
32
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.addChildteksNoSoal
formLatihan.addChildteksCounterSoal formLatihan.addChildteksPenilaian
formLatihan.addChildteksNilai formLatihan.addChildteksJawab
formLatihan.addChildmcSoal formLatihan.addChildbtnKembaliLatihan
btnKembaliLatihan.addEventListenerMouseEvent.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
33 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.pushhurufE;
var hurufI:morseI=new morseI Level1.pushhurufI;
var hurufS:morseS=new morseS Level1.pushhurufS;
var hurufH:morseH=new morseH Level1.pushhurufH;
34
menampilkan Level 2, morse strip dari alphabet T M O var Level2:Array = new Array
var hurufT:morseT=new morseT Level2.pushhurufT;
var hurufM:morseM=new morseM Level2.pushhurufM;
var hurufO:morseO=new morseO Level2.pushhurufO;
menampilkan Level 3, morse berkebalikan dari alphabet A U V W Y var Level3:Array = new Array
var hurufA:morseA=new morseA Level3.pushhurufA;
var hurufU:morseU=new morseU Level3.pushhurufU;
var hurufV:morseV=new morseV Level3.pushhurufV;
var hurufW:morseW=new morseW Level3.pushhurufW;
var hurufY:morseY=new morseY Level3.pushhurufY;
menampilkan Level 4, morse berkebalikan dari alphabet N D B G Q var Level4:Array = new Array
var hurufN:morseN=new morseN Level4.pushhurufN;
var hurufD:morseD=new morseD Level4.pushhurufD;
var hurufB:morseB=new morseB
35
Level4.pushhurufB; var hurufG:morseG=new morseG
Level4.pushhurufG; var hurufQ:morseQ=new morseQ
Level4.pushhurufQ;
menampilkan Level 5, morse tak ada lawan dari alphabet C J Z var Level5:Array = new Array
var hurufC:morseC=new morseC Level5.pushhurufC;
var hurufJ:morseJ=new morseJ Level5.pushhurufJ;
var hurufZ:morseZ=new morseZ Level5.pushhurufZ;
menampilkan Level 6, morse sandwiches dari alphabet K P F var Level6:Array = new Array
var hurufK:morseK=new morseK Level6.pushhurufK;
var hurufP:morseP=new morseP Level6.pushhurufP;
var hurufF:morseF=new morseF Level6.pushhurufF;
menampilkan Level 7, morse sandwiches dari alphabet R X L var Level7:Array = new Array
var hurufR:morseR=new morseR Level7.pushhurufR;
var hurufX:morseX=new morseX
36
Level7.pushhurufX; var hurufL:morseL=new morseL
Level7.pushhurufL;
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.pushLevel1
arrayLevel.pushLevel2 arrayLevel.pushLevel3
arrayLevel.pushLevel4 arrayLevel.pushLevel5
arrayLevel.pushLevel6 arrayLevel.pushLevel7
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 mcI:abjadI=new abjadI
37
var mcS:abjadS=new abjadS var mcH:abjadH=new abjadH
formLatihan.addChildmcE formLatihan.addChildmcI
formLatihan.addChildmcS formLatihan.addChildmcH
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 fungsi click.
function game:void{ mcH.addEventListenerMouseEvent.CLICK,click3
bilRandom=Math.floorMath.randomjumlahHuruf mcSoal.addChildarrayLevel[level-1][bilRandom]
teksCounterSoal.text=StringcounterSoal }
function click0mevt:MouseEvent:void{ if bilRandom==0{
teksJawab.text=Jawabanmu Benar; nilai+=1
teksNilai.text=Stringnilai }
else {
38
teksJawab.text=Oops Salah }
counterSoal += 1 mcSoal.removeChildarrayLevel[level-1][bilRandom]
bilRandom=Math.floorMath.randomjumlahHuruf mcSoal.addChildarrayLevel[level-1][bilRandom]
teksCounterSoal.text=StringcounterSoal }
Dalam program ini dimasukkan juga script untuk tombol kembali dari halaman materi menuju ke halaman utama. Berikut ini script yang digunakan :
btnKembali.addEventListenerMouseEvent.CLICK, kembali function kembalimevt:MouseEvent:void{
mcSoal.removeChildAt0 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
39
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 kembaliLatihanmevt:MouseEvent:void{ mcSoal.removeChildarrayLevel[level-1][bilRandom]
counterSoal = 1 nilai = 0
teksNilai.text=Stringnilai teksJawab.text=;
formMateri.x=810 formMateri.y=610
formLatihan.x=810
40
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 script
counterSoal = 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.
41 Gambar 4.6 Tampilan latihan soal dengan materi baru
42
BAB V PENGUJIAN DAN ANALISA HASIL
Kategori