bab iv new

37

BAB IV

PEMBAHASAN

4.1 Perancangan

4.1.1 Perancangan Sistem

Berdasarkan latar belakang dan perumusan masalah yang terdapat dalam bab sebelumnya dapat diketahui perancangan yang dilakukan adalah membuat PEMBELAJARAN ILMU TAJWID INTERAKTIF UNTUK ANAK-ANAK BERBASIS FLASH .

Game Pembelajaran ini diterapkan dengan menjalankan program yang dibangun dengan menggunakan program Flash dan memilih materi yang diinginkan dengan menjalankan tombol-tombol fungsi seperti menu materi yang terdiri dari pengenalan huruf Hijaiyah, pengenalan tanda baca dan tajwid, permainan tanda tajwid yang bersifat edukatif.

Konsep dari aplikasi Pembelajaran Interaktif untuk Anak Kecil Berbasis Multimedia Menggunakan Flash ini adalah dengan menggabungkan beberapa teknologi, yaitu:1. Teknologi Flash

2. Teknologi Multimedia

3. ActionScript 2.0

4. XML

Dengan menggabungkan beberapa teknologi tersebut, diharapkan akan menghasilkan output yang ringan, mudah dan menarik baik dari segi sistem maupun dari segi tampilan.

4.1.2 Struktur Menu

Struktur menu aplikasi di klasifikasikan kedalam beberapa kelompok, yaitu :

1. Bagian Intro

Berisi beberapa sponsor yang memberikan dukungan dalam pembuatan aplikasi permainan ini.

2. Sesi Login

Pada bagian ini user/pemain diharuskan untuk mengetikkan nama agar dapat masuk ke bagian selanjutnya, apabila tidak diisi maka user tidak akan bisa masuk.

3. Sesi Sambutan

Untuk dibagian sambutan hanya menampilkan teks dan suara kepada user/pemain setelah mengisi nama di sesi login.

4. Menu Utama

Setelah user/pemain menekan tombol YA pada sesi sambutan maka akan masuk ke tampilan Menu Permainan. Dam bagian ini terdapat 4 tombol, yaitu :

1) Tombol Belajar Hijaiyah

2) Tombol Belajar Tajwid

3) Tombol Permainan

4) Tombol Keluar dari Aplikasi Game

Apabila user/pemain menekan tombol Keluar dari Aplikasi Game maka akan muncul peringatan untuk keluar dari aplikasi.

5. Permainan

Berisi permainan yang di sediakan di dalam aplikasi. Daftar tersebut akan menjadi menu utama dari alikasi yang akan dihasilkan, dengan tujuan utama yaitu memudahkan user/pemain dalam menggunakan aplikasi ini.

Sedangkan Materi yang akan disampaikan dalam aplikasi pembelajaran interaktif ini adalah sebagai berikut :a. Materi 1,

Pengenalan huruf hijaiyah mulai dari sampai dengan memperlihatkan bentuk serta pengucapannya.b. Materi 2,

Pengenalan tanda baca hijaiyah dengan memperlihatkan bentuk serta pengucapannya.

c. Materi 3,

Pengenalan hukum nun sukun dengan memperlihatkan syarat serta cara membacanya.

d. Materi 4,

Pengenalan hukum mim sukun dengan memperlihatkan syarat serta cara membacanya.

e. Materi 5,

Pengenalan mad dengan memperlihatkan syarat serta cara membacanya.

f. Materi 6,

Permainan tanda tajwid dengan memilih tanda tajwid tertentu dengan batas waktu 30 detik.

4.1.3 Alur Aplikasi

Dalam pembuatan aplikasi ini dibutuhkan dialog dan semua elemen tersusun menurut urutan yang telah ditentukan secara terperinci. Dalam hal ini digunakan pendekatan diagram, dengan diagaram akan terlihat runtutan struktur dengan jelas dan mudah dipahami. Struktur yang digunakan adalah hierarki, karena dapat menunjukan informasi pada setiap levelnya, sehingga pengguna dapat bebas memilih informasi yang dibutuhkan. Untuk lebih jelasnya dapat dilihat pada diagram berikut ini:

Gambar 4.1 Diagram Alur Aplikasi

4.1.4 Rancangan Struktur XML

Aplikasi Pembelajaran Ilmu Tajwid Interaktif untuk Anak-Anak Berbasis Flash ini menggunakan file XML sebagai media load teks sehingga lebih mudah diubah tanpa harus membuka file utama (.fla). Rancangan struktur XML yang digunakan adalah sebagai berikut :

4.1.5 Rancangan Antarmuka

1. Intro

Pada saat program pertama kali dijalankan, tampilannya berupa intro yang urutannya digambarkan pada gambar di bawah ini. Berisi beberapa sponsor yang memberikan dukungan dalam pembuatan aplikasi permainan ini.

STMIK JEND.A.YANI

Gambar 4.2 Halaman Intro

2. Sesi Login

Pada bagian ini user/pemain diharuskan untuk mengetikkan nama agar dapat masuk ke bagian selanjutnya, apabila tidak diisi maka user/pemain tidak akan bisa masuk.

Gambar 4.3 Halaman Login

3. Sesi Sambutan

Untuk dibagian sambutan hanya menampilkan teks dan suara kepada user/pemain setelah mengisi nama di sesi login.

Gambar 4.4 Halaman Sambutan

4. Menu Utama

Setelah user/pemain menekan tombol YA pada sesi sambutan maka akan masuk ke tampilan Menu Permainan. Dan pada bagian ini terdapat 4 tombol, yaitu :

1) Tombol Belajar Huruf Hijaiyah

2) Tombol Belajar Tajwid

3) Tombol Permainan

4) Tombol Keluar dari Aplikasi

Gambar 4.5 Halaman Menu Utama

5. Belajar Hijaiyah

Pada bagian ini user/pemain di beri tampilan berupa sebuah huruf hijaiyah dan nama huruf pada dialog box serta cara baca huruf tersebut, yang kemudian diberi tombol navigasi yang mengarah ke huruf selanjutnya berupa bentuk beserta pengucapannya. Ketika semua huruf hijayah tersebut telah ditampilkan maka akan secara otomatis kembali ke huruf pertama.

Gambar 4.6 Halaman Belajar Hijaiyah

6. Belajar TajwidPada bagian ini user/pemain di beri tampilan berupa 4 buah tombol, yang setiap tombol yang akan menjelaskan tanda baca, hukum nun sukun, hukum mim sukun, dan mad. Pada bagian tanda baca pemain akan diperkenalkan dengan berbagai tanda baca beserta cara membacanya. Pada bagian hukum nun sukun pemain akan diperkenalkan dengan hukum nun sukun seperti ikhfa, idgham, iqlab, dan idzhar beserta cara membacanya. Pada bagian hukum mim sukun pemain akan diperkenalkan dengan hukum mim sukun seperti idzhar syafawi dan ikhfa syafawi beserta cara membacanya. Pada bagian mad pemain akan diperkenalkan dengan berbagai mad seperti mad thabii, mad wajib muttashil, dan mad jaiz munfatshil beserta cara membacanya.

Gambar 4.7 Halaman Belajar Tajwid

Gambar 4.8 Halaman Tanda Baca

Gambar 4.9 Halaman Isi Tajwid

7. Permainan

Pada bagian ini user/pemain di beri tampilan berupa sebuah gambar ayat Al-quran dengan beberapa tombol tersembunyi, pada permainan ini pemain diminta untuk menunjukkan ilmu tajwid tertentu dengan cara di klik pada tombol tersembunyi dan disediakan waktu 30 detik untuk setiap soal, jika benar maka pemain akan mendapatkan tambahan nilai yang akan ditampilkan pada kotak nilai dengan nilai maksimal adalah 21, tapi jika salah maka nilai pemain akan dikurangi sesuai dengan jumlah soal yang salah, sebagai indikator pemain akan dinyatakan lulus apabila mendapatkan nilai lebih dari 14, apabila kurang dari 14 maka pemain akan diminta belajar lagi untuk mengulang.

Gambar 4.10 Halaman Permainan4.1.6 Rancangan Teknologi

Untuk dapat menjalankan aplikasi pembelajaran ini dibutuhkan dua hal yaitu: hardware (perangkat keras) dan software (perangkat lunak).

1. Perangkat Keras

Perangkat keras yang digunakan untuk menjalankan aplikasi pembelajaran interaktif ini adalah sebagai berikut:

a. Intel Pentium 4 1,60 GHz atau lebihb.Memory RAM 512 MB atau lebihc. Sisa ruang Hard Disk minimum 1 GB

d. Monitor dengan resolusi 1024 x 768 atau 1280 x 800

e. Speaker Aktif2. Perangkat Lunak

Perangkat lunak yang digunakan untuk menjalankan aplikasi pembelajaran interaktif ini adalah :a. Sistem Operasi Windows

b. Flash Player

4.2 Pembahasan

4.2.1 IntroGambar 4.11 Halaman IntroPada halaman intro program di setting untuk tampilan layar penuh/fullscreen dengan mengecek resolusi dari komputer dengan menggunakan ActionScript berikut ini :

///ActionScript untuk men seting layar penuh///

("fullscreen",true);

Jika resolusi pada komputer yang sedang menjalankan aplikasi ini adalah 1280x768 maka panjang, lebar dan posisi x,y aplikasi akan di ubah.

///ActionScript untuk mengecek resolusi///

resolusi=System.capabilities.screenResolutionX;

resolusi_simpan.text=resolusi;

if (resolusi_simpan.text == "1280"){

_root._x=-100;

_root._y=0;

//_root._xscale *=1.3;

_root._width=2400;

}

4.2.2 Sesi Login

Gambar 4.12 Halaman LoginPada bagian tombol masuk terdapat ActionScript untuk mengecek apakah form nama sudah diisi atau belum, apabila belum diisi maka user/pemain tidak dapat melanjutkan kebagian aplikasi selanjutnya. Bila form nama sudah diketikkan nama pemain maka akan menuju ke bagian aplikasi selanjutnya. Berikut ini ActionScript nya:

///ActionScript untuk mengetest apakah form nama

kosong atau tidak///

Selection.setFocus("nama");

btn_masuk._alpha = 50 ;

btn_masuk.onRollOver = function() {

if (nama.text==""){


btn_masuk._alpha = 50 ;

}else{

btn_masuk._alpha = 100 ;}

}

btn_masuk.onRelease = function() {

if (nama.text==""){


btn_masuk.visible = false;

}else{

_parent.nama_simpan.text=nama.text;

_parent.gotoAndStop(4)}

}Pada bagian ini juga ada suara yang meminta pemain untuk mengetikkan namanya.

///ActionScript untuk memainkan musik pada bagian

login///

var suara:Sound = new Sound();

suara.loadSound("suara/tulis nama.mp3",true);

4.2.3 Sesi Sambutan

Gambar 4.13 Halaman SambutanPada bagian ini akan ditampilkan nama pemain yang sudah diketikkan saat di bagian login serta ada kata-kata untuk sambutan untuk pemain. ActionScript yang digunakan pada Sesi Sambutan yaitu sebagai berikut:///ActionScript untuk menampilkan nama pemain///

pengguna =_parent.nama_simpan.text;

nama_pengguna="Hai "+ pengguna+",";

sambutan.text=nama_pengguna;

Setelah itu pengguna akan menekan tombol ya sehingga pengguna masuk ke sesi selanjutnya. Berikut adalah ActionScript yang digunakan untukmenampilkan kata sambutan :

///ActionScript untuk menampilkan teks sambutan///

dialog.text="Aku Aiko, Belajar bareng yuks..";

4.2.4 Menu Utama

Gambar 4.14 Halaman Menu UtamaPada bagian menu utama ini ditampilkan nama pemain serta nilai yang akan didapatkannya, serta tombol keluar untuk keluar dari aplikasi. Apabila user/pemain menekan tombol Keluar dari Aplikasi maka akan muncul peringatan untuk keluar dari aplikasi.

Gambar 4.15 Halaman KeluarSaat tombol keluar dari aplikasi di klik maka nama pemain akan di simpan di lokal komputer serta muncul kotak peringatan yang mengingatkan pemain apakah benar-benar ingin keluar dari aplikasi game. ActionScript yang digunakan pada tombol keluar dari aplikasi yaitu sebagai berikut:

///ActionScript yang digunakan pada tombol Keluar dari Aplikasi///

btn_keluar_game.onRelease=function(){

_parent.gotoAndStop(9);

}///ActionScript yang digunakan untuk keluar aplikasi///

Fscommand(quit,true);Sedangkan untuk menampilkan nama pemain yang sudah di masukkan oleh pemain di bagian login, menggunakan ActionScript berikut ini :

///ActionScript untuk menampilkan nama pemain///

player.text=_parent.nama_simpan.text;Di bagian poin, berfungsi sebagai penunjuk kepada pemain berapa poin yang didapatkan pada permainan yang ada di dalam aplikasi pembelajaran interaktif ini.Pada bagian tombol belajar hijaiyah apabila didekati kursor maka tombol lain akan mati dan dialog box akan bertuliskan Belajar Hijaiyahyang di load dari file XML serta muncul suara, kemudian jika diklik maka pemain akan masuk ke tampilan belajar hijaiyah. ActionScript yang digunakan yaitu sebagai berikut :

///ActionScript yang digunakan pada tombol belajar hijaiyah///


this.btn_hijaiyah.onRollOver=function(){

import mx.utils.Delegate;

var daftar:Array;

mov_dragger.mov_h_back.colorTo(_global.color_on,0);

var xml_file = new XML();

xml_file.ignoreWhite = true;

xml_file.onLoad = function()

{

_parent.opsi.pilihan.htmlText=this.firstChild.firstChild.firstChild.nodeValue;

}

xml_file.load("xml/hijaiyah.xml");

btn_game._alpha=50;

btn_tajwid._alpha=50;

suara.loadSound("suara/hijaiyah.mp3",true);

}

this.btn_hijaiyah.onRollOut=function(){

_parent.opsi.pilihan.text="Pilih Kategori"

btn_game._alpha=100;

btn_tajwid._alpha=100;

}

this.btn_hijaiyah.onRelease=function(){

_parent.opsi.pilihan.text=""

_parent.gotoAndStop(6)

}4.2.5 Belajar Hijaiyah

Gambar 4.16 Halaman Belajar HijaiyahPada bagian tombol navigasi terdapat ActionScript yang berfungsi untuk berpindah ke huruf hijaiyah berikutnya dan mengubah text pada dialog box. ActionScript sebagai berikut:

///ActionScript yang digunakan pada tombol navigasi kanan///

on (release)

{

nextFrame()

}

///ActionScript yang digunakan untuk merubah text pada dialog box///

stop();

_parent.opsi.pilihan.text="Alif";


suara.loadSound("suara/alif.mp3",true);4.2.6 Belajar Tajwid

Gambar 4.17 Halaman Belajar TajwidUntuk masuk ke dalam sub menu pada halaman belajar tajwid digunakan Actionscript sebagai berikut :

///ActionScript yang digunakan untuk masuk ke sub menu///on(rollOver){


// mendeklarasi variabel

var daftar:Array;

//Load informasi dari file xml


//load




{

_parent.opsi.pilihan.htmlText=this.firstChild.firstChild.firstChild.nodeValue;

}

//Load xml file

xml_file.load("xml/tanda_baca.xml");


suara.loadSound("suara/tanda baca.mp3",true);

}

on(release){

gotoAndStop(2)

}Sedangkan Actionscript yang digunakan pada tombol menu utama adalah sebagai berikut :

///ActionScript yang digunakan untuk kembali ke menu utama///

on (rollOver){

opsi.pilihan.text="Kembali ke menu"


suara.loadSound("suara/kembali ke menu.mp3",true);

}

on (release) {

_root.mv.gotoAndStop(5)

}

Gambar 4.18 Halaman Spesifik hukum nun sukunSedangkan pada tombol kembali menggunakan Actionscript sebagai berikut ini:

///ActionScript yang digunakan untuk kembali ke menu sebelumnya///

on(rollOver){


suara.loadSound("suara/kembali.mp3",true);

}

on(release){

gotoAndPlay(1)

}

Gambar 4.19 Halaman Penjelasan iqlaab

4.2.7 Permainan

Gambar 4.20 Halaman PermainanPada dialog soal digunakan file XML sehingga lebih mudah di edit, dan dapat menyesuaikan dengan gambar yang akan dimunculkan, Actionscript yang digunakan adalah sebagai berikut :

///Actionscript yang digunakan pada dialog soal///


// mendeklarasi variabel

var daftar:Array;

//Load informasi dari file xml


//load




_parent.dialog.soal.htmlText=this.firstChild.firstChild.firstChild.nodeValue;

}

//Load xml file

xml_file.load("xml/soal1.xml");Setiap kali masuk ke permainan maka nilai akan kembali ke nol sehingga tidak terjadi kecurangan, Actionscript yang digunakan sebagai berikut :

///Actionscript untuk menghindari kecurangan///

_root.mv.nilai.nilai_soal1=0;





Sedangkan pada soal, gambar akan di load dari luar flash, sehingga lebih bisa menyesuaikan dengan dialog soal, Actionscript yang digunakan sebagai berikut :

///Actionscript untuk load gambar///

var myMCL:MovieClipLoader = new MovieClipLoader();

var ml:Object = new Object();

ml.onLoadInit = function(target_mc:MovieClip) {

target_mc._width = 897;

target_mc._height = 278;

}

myMCL.addListener(ml);

myMCL.loadClip("soal1.png",soal1);Untuk tombol tersembunyi digunakan satu tombol yang kemudian di gandakan dengan Actionscript pada koordinat tertentu, Actionscript yang digunakan sebagai berikut :

///Actonscript untuk menggandakan tombol///

btn_benar.duplicateMovieClip("benarCopy",this.getNextHighestDepth(),{_x: -14.1, _y: 47.1});

btn_benar.duplicateMovieClip("benarCopy",this.getNextHighestDepth(),{_x: 31.9, _y: 44.9});




btn_salah.duplicateMovieClip("salahCopy",this.getNextHighestDepth(),{_x: 429.1, _y: 49.1});




Saat waktu yang diberikan habis maka secara otomatis akan berpindah ke soal berikutnya. Pada timer digunakan Actionscript sebagai berikut :

///Actioscript pada timer///

timer += 1;

if (timer == 30){

_parent.nextFrame();

}else {

gotoAndPlay (2);

}

Pada akhir soal maka akan ditampilkan nilai total sebagai indikator kelulusan, Actionscript yang digunakan sebagai berikut :

///Actionscript untuk menampilkan indikator dan nilai///

if (_parent.nilai.total_score > 14) {

_parent.dialog.soal.text = " Selamat, kamu lulus dengan nilai : "

hasil.text = _root.mv.nilai.nilai_soal1 + _root.mv.nilai.nilai_soal2 + _root.mv.nilai.nilai_soal3 + _root.mv.nilai.nilai_soal4 + _root.mv.nilai.nilai_soal5}

else{

_parent.dialog.soal.text = "maaf"

hasil.text = "kamu belum lulus, belajar lagi ya"

}

Gambar 4.21 Halaman IndikatorPERMAINAN TANDA TAJWID

MAD JAAIZ MUNFASHIL

MAD WAJIB MUNTTASHIL

MAD THABII

IDZHAAR SYAFAWI

IKHFA SYAFAWI

IDGHAAM

IDZHAAR

IKHFA

IQLAB

MAD

MIM SUKUN

NUN SUKUN

TANDA BACA

PEMBELAJARAN

KELUAR APLIKASI

TOTAL SKOR

PERMAINAN

BELAJAR TAJWID

BELAJAR HIJAIYAH

MENU UTAMA

SESI SAMBUTAN

SESI LOGIN

INTRO

Form Pengisisan Nama

Tombol Masuk

Kotak Teks Sambutan

Tombol Ya

Tombol Tidak

Nama

nilai

Tombol Keluar

Kotak Dialog

Tombol Belajar Hijaiyah

Tombol Belajar Tajwid

Tombol Permainan

Nama

nilai

Kotak Dialog

Tombol Keluar

Tombol Kiri

Tombol Kanan

Huruf Hijaiyah

Nama

nilai

Tombol Keluar

Kotak Dialog

Menu Utama

Tanda Baca

Hukum nun sukun

Hukum mim sukun

Mad

Nama

nilai

Tombol Kiri

Tombol Keluar

Tombol Kanan

Kotak Dialog

Tanda Baca

Kembali

Kembali

Kotak Dialog

Tombol Keluar

nilai

Nama

Materi Tajwid

Menu Utama

Tombol Keluar

nilai

Nama

Soal

Dialog Soal

19

bab iv new

Documents