digunakan untuk memperjelas animasi merupakan rekaman Bapak Ghozali Nurhasan, SHI.
3.2. Pengembangan Multimedia
Untuk pengembangan aplikasi, penulis telah melakukannya berdasarkan enam tahap pengembangan multimedia menurut Luther
yaitu konsep concept, perancangan design, pengumpulan bahan material collecting
, pembuatan assembly, tes testing, dan distribusi implementation
.
3.2.1. Konsep concept
Aplikasi Makharijul Huruf Hijaiyah berbasis Multimedia ini berbentuk CD interaktif yang akan digunakan sebagai alat
bantu bagi umat Islam untuk dapat membedakan cara pengucapan huruf hijaiyah
dengan baik dan benar. Secara garis besar deskripsi konsep aplikasi sebagai
berikut: • Judul
: Aplikasi Makharijul Huruf Hijaiyah Berbasis Multimedia.
• Fungsi : Sebagai alat bantu interaktif yang dapat
memberikan informasi bagaimana cara mengucapkan huruf hijaiyah dengan baik
dan benar.
52
• Jenis Aplikasi : Media pembelajaran interaktif.
• Tujuan : Membantu umat Islam dalam membedakan
pengucapan huruf hijaiyah. • Pengguna
: Anak-anak, Remaja, dan Dewasa • Gambar
: Menggunakan format file .jpg, dan .gif yang diperoleh melalui internet kemudian
dimodifikasi dengan software Adobe Photoshop CS2.
• Audio dan video : Merupakan rekaman suara asli orang Indonesia dan sekaligus sebagai ustad
yang memimpin pengajian Al-Qur’an di masjid Al-Hidayah Perumahan Taman
Pondok Cabe Pamulang yaitu ustad Ghozali Nurhasan, SHI.
• Huruf Hijaiyah : Dibuat dengan menggunakan software
Adobe Photoshop CS2 kemudian dijadikan
gambar dengan format .gif • Animasi
: Animasi mulut dibuat sendiri dengan menggunakan software Macromedia Flash
MX 2004.
53
• Interaktif : Menggunakan link berupa tombol yang
dapat berpindah dari satu halaman ke halaman yang lainnya.
3.2.2. Perancangan design
Tahap ini merupakan tahap perancangan aplikasi, dimana perancangan
tersebut berupa perancangan
storyboard ,
perancangan arsitektur navigasi, perancangan diagram transisi state transition diagram
, dan perancangan antarmuka user interface
.
3.2.2.1. Perancangan Storyboard
Storyboard merupakan deskripsi dari setiap scene
yang secara jelas menggambarkan objek multimedia serta perilakunya, penjelasan dapat menggunakan simbol
maupun teks Luther, 1994
1
.
1
Ariesto Hadi Sutopo, Multimedia Interaktif Dengan Flash Jakarta : Graha Ilmu, 2003, h. 36.
54
Storyboard
Modul : 1
Halaman : Opening
Judul Aplikasi
Nama File : Opening.dir
Gambar : Huruf Hijaiyah dan Al-Quran
Audio : Musik Intro.mp3
Huruf Hijaiyah Gambar
Keterangan : Halaman Opening adalah halaman awal dari tampilan
aplikasi yang baru dijalankan, di mana pada halaman ini berisi tentang nama program, huruf hijaiyah,masuk ke
menu utama, dan keluar
Gambar 3.3. Storyboard Opening
55
Storyboard Modul
: 2 Halaman
: Menu Utama Nama File
: Menu Utama.dir Gambar
: Al-Quran Audio
: Musik Intro.mp3
Navigasi gambar
Huruf Hijaiyah
Pengantar : Untuk masuk ke halaman Pengantar
Sifat Huruf Hijaiyah : Untuk masuk ke halaman Sifat Huruf Hijaiyah
Makharijul Huruf : Untuk masuk ke halaman Makharijul Huruf Hijaiyah
Evaluasi : Untuk masuk ke halaman Evaluasi
Tentang Penulis : Untuk masuk ke halaman Tentang Penulis
Keluar : Untuk keluar dari program
Keterangan : Halaman Menu Utama merupakan halaman pertama
dari aplikasi Makharijul Huruf Hijaiyah. Dalam Menu Utama ini terdapat 6 tombol untuk masuk ke menu
selanjutnya yang berisi materi yang berbeda.
Gambar 3.4. Storyboard Menu Utama
56
Storyboard Modul
: 3 Halaman
: Makharijul Huruf Nama File
: Makharijul Huruf.dir gambar
Animasi Mulut
Navigasi Al-Jauf
: Untuk masuk ke halaman Al-Jauf Al-Halqu
: Untuk masuk ke halaman Al-Halqu Al-Lisan
: Untuk masuk ke halaman Al-Lisan Asy-Syafatain
: Untuk masuk ke halaman Asy-Syafatain Al-Khoisyum
: Untuk masuk ke halaman Al-Khoisyum Menu Utama
: Untuk masuk ke Menu Utama
keterangan : Halaman Makharijul Huruf merupakan inti dari
aplikasi Makharijul Huruf Hijaiyah yang berisikan materi tentang pembagian tempat keluar huruf
hijaiyah di dalam membaca Al-Quran dan bagaimana cara membedakan ucapan dari masing-masing huruf.
Gambar 3.5. Storyboard Makharijul Huruf
57
3.2.2.2. Perancangan Arsitektur Navigasi
Opening
Menu Utama
Pengantar Sifat Huruf
Hijaiyah Makharijul Huruf
Evaluasi Tentang
Penulis Al-Jauf
Belajar Membaca
Al-Halqu Al-Lisan
Pilihan Ganda
Asy-Syafatain Al-Khoisyum
Gambar 3.6. Struktur Navigasi
58
3.2.2.3. Perancangan Diagram Transisi State Transition
Diagram
Pengantar Makharijul Huruf
Klik Menu Pengantar Tampilkan Menu Pengantar
Klik Makharijul Huruf Tampilkan Makharijul
Huruf Klik Menu Utama
Tampilkan Menu Utama
Klik Menu Utama Tampilkan Menu Utama
Evaluasi
Klik Evaluasi Tampilkan Evaluasi
Menu Utama
Klik Keluar Keluar dari Program
Keluar
Klik Sifat Huruf Hijaiyah Tampilkan Sifat Huruf Hijaiyah
Klik Tentang Penulis Tampilkan Tentang Penulis
Klik Menu Utama Tampilkan Menu Utama
Tentang Penulis Sifat Huruf Hijaiyah
Gambar 3.7. Diagram Transisi Menu Utama
59
Menu Utama Makharijul Huruf
Klik Menu Pengantar Klik Makharijul Huruf
Tampilkan Menu Pengantar Tampilkan Makharijul
Huruf
Evaluasi
Klik Evaluasi Tampilkan Evaluasi
Menu Pengantar
Klik Keluar Keluar dari Program
Keluar
Klik Tentang Penulis Klik Sifat Huruf Hijaiyah
Tampilkan Tentang Penulis Tampilkan Sifat Huruf Hijaiyah
Tentang Penulis Sifat Huruf Hijaiyah
Gambar 3.8. Diagram Transisi Menu Pengantar
60
Menu Utama Makharijul Huruf
Klik Menu Sifat Huruf Hijaiyah Tampilkan Menu Sifat Huruf
Hijaiyah Klik Makharijul Huruf
Tampilkan Makharijul Huruf
Evaluasi
Klik Evaluasi Tampilkan Evaluasi
Menu Sifat Huruf
Hijaiyah
Klik Keluar Keluar dari Program
Keluar
Klik Tentang Penulis Klik Pengantar
Tampilkan Pengantar Tampilkan Tentang Penulis
Tentang Penulis Pengantar
Gambar 3.9. Diagram Transisi Menu Sifat Huruf Hijaiyah
61
Al-Jauf Al-Halqu
Klik Al-Jauf Tampilkan Al-Jauf
Klik Al-Halqu Tampilkan Al-Halqu
Al-Lisan
Klik Al-Lisan Tampilkan Al-Lisan
Menu Makharijul
Huruf Asy-Syafatain
Klik Asy-Syafatain Tampilkan Asy-Syafatain
Klik Al-Khoisyum Tampilkan Al-Khoisyum
Klik
Menu Utama
Tampilkan Menu
Utama Klik Makharijul Huruf
Tampilkan Makharijul Huruf
Al-Khoisyum Menu Utama
Gambar 3.10. Diagram Transisi Menu Makharijul Huruf
62
Belajar Membaca
Klik Belajar Membaca Tampilkan Belajar Membaca
Menu Evaluasi
Pilihan Ganda
Klik Pilihan Ganda Tampilkan Pilihan Ganda
Klik Menu Utama Tampilkan Menu Utama
Klik Menu Evaluasi Tampilkan Menu Evaluasi
Menu Utama
Gambar 3.11. Diagram Transisi Menu Evaluasi
3.2.2.4. Perancangan Antarmuka User Interface
1. Rancangan Layar Opening Rancangan ini merupakan tampilan awal sebelum
masuk ke tampilan Menu Utama. Pada tampilan layar
Opening terdapat dua tombol
untuk menentukan halaman selanjutnya, yaitu :
• Tombol Menu Utama untuk masuk ke halaman Menu Utama.
• Tombol keluar untuk keluar dari aplikasi.
63
Judul Aplikasi
Animasi Huruf Hijaiyah
Tombol Menu Utama Tombol Keluar
Gambar
Gambar 3.12. Rancangan Tampilan halaman Opening
2. Rancangan Layar Menu Utama Rancangan ini merupakan tampilan halaman Menu
Utama dari aplikasi Makharijul Huruf Hijaiyah berbasis Multimedia. Dalam layar Menu Utama ini
terdiri dari 6 tombol yaitu : • Tombol Pengantar, untuk masuk ke halaman
Pengantar. • Tombol Sifat Huruf Hijaiyah, untuk masuk ke
halaman Sifat Huruf Hijaiyah. • Tombol Makharijul Huruf, untuk masuk ke
halaman Makharijul Huruf. • Tombol Evaluasi, untuk masuk ke halaman
Evaluasi.
64
• Tombol Tentang Penulis, untuk masuk ke halaman Tentang Penulis.
• Tombol Keluar, untuk keluar dari program aplikasi.
Gambar 3.13. Rancangan Tampilan Menu Utama
3. Rancangan Layar Pengantar Rancangan layar ini berisi materi tentang pengertian
dari makharijul huruf, jenis-jenis huruf hijaiyah dan tempat-tempat makharijul huruf.
65
Gambar 3.14. Rancangan Tampilan Menu Pengantar
4. Rancangan Layar Menu Makharijul Huruf Rancangan layar ini berisi tentang pembagian
tempat keluar huruf hijaiyah. Di dalam layar ini, terdapat animasi mulut, bibir ,suara huruf hijaiyah
apabila tombol huruf hijaiyah tersebut ditekan, dan video yang berfungsi untuk memberikan penjelasan
dari masing-masing huruf hijaiyah, rancangan layar ini menggambarkan bagaimana cara mengucapkan
huruf hijaiyah yang benar dalam membaca Al- Qur’an. Layar ini terdapat 6 tombol, 5 tombol untuk
pembagian makharijul huruf dan 1 tombol untuk kembali ke Menu Utama yaitu :
• Tombol Al-Jauf untuk masuk ke halaman Al-Jauf
.
66
• Tombol Al-Halqu untuk masuk ke halaman Al-Halqu
yang digambarkan dengan animasi huruf Al-Halqu yang keluar dari kerongkongan
dan hurufnya berjumlah 6. • Tombol Al-Lisan untuk masuk ke halaman
Al-Lisan yang digambarkan dengan animasi
lidah dan hurufnya berjumlah 18. • Tombol Asy-Syafatain untuk masuk ke halaman
Asy-Syafatain yang digambarkan dengan animasi
bibir dan hurufnya berjumlah 4. • Tombol Al-Khoisyum untuk masuk ke halaman
Al-Khoisyum .
• Tombol Menu Utama untuk kembali ke halaman Menu Utama.
Gambar
Animasi Makharijul Huruf
Gambar 3.15. Rancangan Tampilan Menu Makharijul Huruf
67
5. Rancangan Layar Evaluasi Rancangan layar ini berisi materi latihan, latihan
yang diberikan ada 2 macam, yaitu latihan Belajar Membaca berisi materi tentang mengikuti suara
yang ada di dalam aplikasi dengan cara merekam suara pengguna dan Pilihan Ganda berisi materi
tentang mengenali suara yang dicocokkan dengan teks.
Gambar
Animasi Menu Pilihan Ganda
Gambar 3.16. Rancangan Tampilan Menu Evaluasi
6. Rancangan Layar Tentang Penulis Rancangan layar ini berisi informasi mengenai
identitas pembuat aplikasi Makharijul Huruf dan software
yang digunakan dalam pembuatnya.
68
Judul Aplikasi Logo
UIN
Foto Pembuat
Identitas Pembuat Aplikasi dan Aplikasi
Software yang Digunakan dalam Aplikasi
Gambar 3.17. Rancangan Tampilan Menu Tentang Penulis
3.2.3. Pengumpulan Bahan material collecting
Bahan-bahan yang dibutuhkan untuk membuat aplikasi ini, baik berupa file-file suara, gambar, video dan animasi diperoleh
dari berbagai sumber, namun sebagian besar dibuat sendiri oleh penulis dengan menggunakan software yang berkaitan dengan
bahan-bahan tersebut.
3.2.3.1. File Gambar
File gambar yang ada di dalam aplikasi, yaitu gambar kepala yang telihat dari samping dengan format
.gif dan gambar Al-Qur’an yang terbuka dengan format
.jpg penulis memperolehnya dari internet, sedangkan
gambar huruf hijaiyah yang digunakan dalam halaman Opening dengan format .gif penulis memperolehnya dari
69
koleksi pribadi dan kemudian dimodifikasi dengan menggunakan software Adobe Photoshop CS2. Namun
ada beberapa file lain seperti tampilan halaman menu, tombol dan huruf hijaiyah penulis peroleh dengan
membuat sendiri
menggunakan software
Adobe Photoshop CS2
. File gambar yang ada dalam aplikasi yaitu gambar huruf hijaiyah, Al-Qur’an dan gambar
kepala yang terlihat dari samping. Gambar huruf hijaiyah dan Al-Qur’an digunakan dalam halaman menu Opening,
sedangkan gambar kepala yang terlihat dari samping digunakan dalam animasi mulut untuk menjelaskan
bagian dari tata letak makharijul huruf hijaiyah.
Gambar 3.18. Gambar Mulut Sebelum diedit
Gambar 3.19. Gambar Mulut Sesudah diedit 70
3.2.3.2. File Animasi
File animasi yang digunakan dalam aplikasi yaitu animasi huruf hijaiyah yang berjalan dari arah samping
kanan menuju ke arah kiri yang digunakan dalam halaman Opening, serta animasi mulut dan bibir dibuat dengan
menggunakan software Macromedia Flash MX 2004. Animasi mulut dan bibir yang dibuat, digunakan untuk
menjelaskan bagaimana cara melafalkan makharijul huruf hijaiyah
dengan baik dan benar.
Gambar 3.20. Animasi Mulut
71
Gambar 3.21. Animasi Bibir
Gambar 3.22. Animasi Huruf Hijaiyah
72
3.2.3.3. File Suara
File suara huruf hijaiyah dengan format suara .wav didapatkan dari rekaman seorang ustad yang dapat
mengucapkan makharijul huruf hijaiyah dengan baik dan benar yaitu Bapak Ghozali Nurhasan, SHI selaku ustad
yang memimpin pengajian Al-Qur’an di masjid Al-
Hidayah Perumahan Taman Pondok Cabe Pamulang. Dan file suara narasi didapat dari hasil rekaman suara penulis
sendiri dengan format suara .wav. File suara huruf hijaiyah digunakan dalam setiap bagian huruf hijaiyah dari aplikasi
makharijul huruf hijaiyah , dan file suara narasi digunakan
untuk menjelaskan tentang pengertian makharijul huruf hijaiyah
dan pembagian tata letaknya. Sedangkan file suara yang digunakan dalam halaman Opening, halaman Sifat
Huruf Hijaiyah, dan tombol dari setiap menu merupakan hasil dari file koleksi pribadi penulis dengan format suara
.mp3 dan .wav.
73
Gambar 3.23. Program Pengelolah Suara
3.2.3.4. File Video
File video digunakan untuk memberikan penjelasan dari animasi mulut masing-masing huruf hijaiyah. Dengan
adanya video ini, pengguna lebih memahami lagi dalam belajar makharijul huruf hijaiyah, file video dengan
format file .avi diperoleh dari hasil rekaman seorang ustad bernama Bapak Ghozali Nurhasan, SHI selaku ustad yang
memimpin pengajian Al-Qur’an di masjid Al-Hidayah Perumahan Taman Pondok Cabe Pamulang.
74
3.2.4. Pembuatan Aplikasi assembly
Setelah semua spesifikasi pengembangan dapat dipenuhi, maka selanjutnya adalah pengembangan aplikasi ke tahap
pembuatan dengan menggunakan perangkat keras hardware dan perangkat lunak software yang mendukung multimedia yang telah
disiapkan. Beberapa tahapan penting selama pengembangan aplikasi Makharijul Huruf Hijaiyah Berbasis Multimedia akan
dibahas di bawah ini.
3.2.4.1. Spesifikasi Perangkat Keras yang Digunakan
Spesifikasi perangkat keras yang digunakan dalam pembuatan aplikasi terlihat dalam tabel di bawah ini.
Tabel 3.1. Perangkat keras yang digunakan Nomer
Perangkat keras 1
Intel Pentium 4 3,00 Ghz 2
Hardisk 20 GB
3 Memory minimal 128 MB
4 Sound Card
5 Graphic Card
128 MB 6
Mouse 7
Keyboard 8
Active Speaker 9
Monitor 15 inchi 10
CD-RW
75
3.2.4.2. Spesifikasi
Perangkat Lunak
Pengembangan Multimedia
Perangkat lunak yang digunakan dalam pembuatan aplikasi Makharijul Huruf Hijaiyah terlihat dalam tabel
di bawah ini. Tabel 3.2. Perangkat lunak yang digunakan
Nomer Perangkat lunak
1 Macromedia Director MX 2004
2 Macromedia Flash MX 2004
3 Adobe Photoshop CS2
3.2.4.3. Proses Pembuatan Tampilan Halaman Menu dan Tombol Menu
Untuk langkah awal penulis mendesain tampilan halaman dari setiap halaman menu yaitu halaman Menu
Opening, halaman Menu Utama, halaman Menu Pengantar, halaman Menu Sifat Huruf Hijaiyah, halaman
Menu Makharijul Huruf, dan halaman Menu Evaluasi dengan menggunakan software Adobe Photoshop CS2
yaitu dengan cara membuat dokumen baru dengan pengaturan sebagai berikut :
76
• Width : 800 pixels
• Height : 600 pixels
• Resolution : 72 pixelsinch • Mode
: RGB Color • Contents
: White Setelah ukuran dokumen ditentukan, selanjutnya
adalah memberikan efek teks, warna, dan gambar dengan menggunakan menu Layer dan pilih Layer Style. Dalam
Layer Style ini penulis memilih dan menggunakan Style
yang ada, adapun Style yang digunakan adalah Drop Shadow
, Inner Shadow, Outer Glow, Satin, dan Gradient Overlay.
Setelah menggunakan Style yang ada, selanjutnya adalah menyimpan file tersebut dalam
bentuk gambar dengan format .jpg Untuk pembuatan tombol menu dan tombol huruf
hijaiyah dari masing-masing menu, pada dasarnya
langkah yang digunakan sama seperti membuat tampilan dari setiap halaman menu. Namun ada beberapa hal saja
yang berbeda yaitu pengaturan tinggi dan lebarnya dokumen, dan Style yang digunakan. Untuk tombol
menu, ukuran dokumennya adalah Width : 150, Height :
77
50. Sedangkan untuk Style yang digunakan adalah Inner Shadow
, Inner Glow, Bevel and Emboss, dan Color Overlay
. Untuk tombol huruf hijaiyah, ukuran dokumen yang digunakan adalah Width : 50, Height : 50.
Sedangkan untuk Style yang digunakan adalah Inner Shadow, Inner Glow, Bevel and Emboss,
dan Color Overlay.
Gambar 3.24. Pembuatan Tombol, dan Menu Dengan Photoshop CS2
78
3.2.4.4. Proses Pembuatan Animasi Huruf Hijaiyah, Animasi
Mulut dan Animasi Bibir
Dalam proses pembuatan animasi huruf hijaiyah, langkah awal adalah mengimport file gambar yang
diperlukan yaitu gambar huruf hijaiyah, al-Qur’an, dan judul aplikasi. Setelah itu
menentukan dimensi dokumennya yaitu widht = 800, height = 600, dan frame
rate = 20, kemudian menyusun file gambar yang telah
diimport sesuai dengan tampilan pada halaman Opening. Untuk menganimasikan huruf hijaiyah yang berjalan dari
arah kanan ke kiri, langkah awal adalah membuat huruf hijaiyah
tersebut dijadikan sebuah movie clip, kemudian setelah dijadikan movie clip, menganimasikannya dengan
menggunakan animasi Motion
Tween dan
menggerakkannya dari arah kanan ke kiri. Untuk membuat animasi mulut, import file gambar
kepala kemudian
buat sebuah lidah dengan
menggunakan Rectangle Tool, kemudian hasilnya dijadikan sebuah movie clip. Setelah itu buat beberapa
key frame dan masing-masing key frame memiliki posisi
gambar lidah yang berbeda. Sehinga terbentuk sebuah animasi yang menggambarkan posisi masing-masing
keluarnya huruf hijaiyah. Animasi bibir dibuat dengan
79
menggunakan Oval Tool, kemudian dimodifikasi hingga membentuk sebuah bibir. Setelah itu buat beberapa key
frame dan masing-masing key frame memiliki posisi
bibir yang berbeda. Sehinga terbentuk sebuah animasi yang menggambarkan posisi masing-masing keluarnya
huruf hijaiyah. Untuk memberikan suara pada animasi, klik dua kali pada tombol button yang telah dibuat
sebelumnya dan pilih down pada bagian frame.
3.2.4.5. Proses Pembuatan Aplikasi Makharijul Huruf
Hijaiyah Berbasis Multimedia
Setelah semua file yang dibutuhkan dalam Aplikasi Makharijul Huruf Hijaiyah
telah dibuat, langkah selanjunya adalah menggabungkan file-file tersebut
menjadi suatu kesatuan yang utuh dengan menggunakan software Macromedia Director MX 2004.
Dalam Macromedia Director MX 2004
, penulis membuat 5 file yang terpisah dengan tujuan agar file-file yang ada tidak
terlalu ramai dan mudah untuk diedit jika terjadi kesalahan. Kelima file tersebut yaitu :
80
1. File Menu Utama
Untuk membuat Menu Utama, pertama-tama adalah
menentukan ukuran stage , klik Stage dan perhatikan Panel Property Inspector, untuk mengatur luas pixels
movie dan warna latar yang digunakan yaitu 800 x 600 pixels,
warna latar hitam dan frame rate sebesar 25 fps. Setelah bidang kerja atau stage siap, langkah
berikutnya adalah memasukkan atau import data gambar yang telah dibuat di Photoshop CS2 untuk
background dan tombol, animasi yang telah dibuat di
Flash MX 2004 dengan cara mengklik menu File kemudian Import pada Macromedia Director MX
2004 . Data yang telah di import otomatis akan masuk
ke dalam Cast Member. Cast Member berfungsi untuk
menyimpan data yang akan dipakai pada pembuatan aplikasi ini. Halaman Menu Utama terdiri dari
background gambar menu utama.jpg, gambar menu
pengantar.jpg, gambar menu evaluasi.jpg, gambar menu makharijul huruf.jpg, gambar menu sifat huruf
hijaiyah.jpg, animasi huruf hijaiyah , tombol menu pengantar.gif, tombol menu sifat huruf hijaiyah.gif,
tombol menu makharijul huruf hijaiyah.gif, tombo l menu evaluasi.gif, tombol menu tentang penulis.gif,
81
tombol menu keluar.gif dan tombol huruf hijaiyah.gif dengan tampilan sebagai berikut :
Gambar 3.25. Tampilan Menu Utama
Langkah selanjutnya adalah menyusun data-data yang
telah di import seperti gambar di atas dengan cara drag
tekan dan tahan tombol mouse kiri gambar menu utama.jpg, animasi huruf hijaiyah.swf, dan tombol-
tombol menu dan tombol huruf hijaiyah.gif dari cast member ke Score.
82
Gambar 3.26. Proses Drag dari Cast Member ke Score
Setelah gambar menu utama, animasi huruf hijaiyah, dan tombol menu dan huruf hijaiyah tersusun seperti
pada halaman Menu Utama, selanjutnya adalah
menyusun halaman-halaman sub menu dengan cara yang sama seperti sebelumnya drag dari cast member
ke score. Susunan halaman sub menunya adalah menu Pengantar, menu Evaluasi, menu Makharijul Huruf,
dan sub menu Sifat Huruf Hijaiyah. Tombol-tombol dalam setiap menu mempunyai perintah sendiri-sendiri
83
untuk menuju ke halaman lain, untuk mencoba
menjalankan hasil pekerjaan aplikasi, klik play tanda panah segitiga di toolbar, maka akan terlihat halaman
menu utama tampil ke halaman menu lainnya secara terus menerus tanpa akhir. Untuk membuat tanda
berhenti perlu ditambah perintah atau script pada frame
di akhir menu utama yaitu dobel klik pada Script Channel misalnya frame ke 15 akan muncul Window
Script, setelah on exit frame isi dengan perintah go the frame yang artinya setelah melewati frame ini, maka
halaman menu
utama akan
berhenti. Untuk memberikan script pada tombol, klik kanan pada
tombol ayang akan diberi script, akan muncul menu
dan pilih script dan muncul Window Script, setelah on mouse up isi dengan perintah go 15 yang artinya jika
mouse ditekan, maka akan menuju ke frame 15, begitu
seterusnya untuk memberikan script pada tombol menu yang lainnya.
2. File Makharijul Huruf
Untuk membuat file makharijul huruf sama seperti dalam membuat file menu utama, namun ada hal yang
berbeda yaitu script pada tombol, karena file makharijul huruf terpisah dari file menu utama, maka
84
cara memanggil
file makharijul
huruf tidak
menggunakan script seperti pada menu utama yaitu
setelah on mouse up bukan di isi dengan go frame,tapi go movie ³makharijul huruf´ , maksud dari go movie
adalah tombol yang di klik akan memanggil file movie yang dimaksud.
3. File Belajar Membaca
Halaman belajar membaca ini merupakan halaman dimana pengguna dapat merekam suaranya ke dalam
aplikasi untuk membandingkan suara hasil rekaman dengan suara yang sudah ada dalam aplikasi. Dalam
proses pembuatan halaman ini, pada dasarnya sama seperti halaman Menu Utama dan Makharijul Huruf,
namun di dalam halaman ini banyak menggunakan script
untuk membangun proses rekaman. Script yang digunakan dalam halaman ini terdapat pada lampiran
source code . Untuk dapat melakukan rekaman,
pengguna user harus menggunakan microphone yang tersambung ke komputer, kemudian jalankan aplikasi
Makharijul Huruf Hijaiyah dan pilih Menu Evaluasi
dan Submenu Belajar Membaca. Setelah tampil halaman Submenu Belajar Membaca, maka pilih
tombol rekam baru. Setelah itu akan tampil halaman
85
untuk merekam suara yang terdiri dari empat tahap, tahap pertama, masukkan nama suara yang diinginkan
kemudian klik lanjut, tahap kedua, tentukan waktu rekaman dan penyimpanan file suara yaitu RAM.
Tahap ketiga, tampilan sound devices dan input source, tampilan ini akan diketahui secara otomatis oleh
program aplikasi. Setelah itu klik tombol lanjut dan tahap keempat akan tampil penentuan pengaturan suara
yang diinginkan yaitu sampling rate, sampling depth dan channel. Pada saat merekam data audio, pengguna
memilih sampling rate yaitu tingkat atau kualitas
perekaman data audio oleh komputer. Tiga jenis sampling rate
yang ada dalam perekam ini yaitu : 11025 Hz, 22050 Hz, dan 44100 Hz. Pada sampling
rate 11025 Hz, kualitas suaranya kira-kira setara
dengan lawan bicara ketika bicara di telepon. Pada 22050 Hz, setara dengan kualitas suara radio atau kaset
lagu. Pada 44100 Hz, setara dengan kualitas CD audio. Semakin tinggi sampling rate, semakin baik kualitas
suara tetapi juga semakin besar memori dan ruang harddisk
yang dibutuhkan juga kerja prosessor yang semakin intensif. Di bawah ini menunjukan kebutuhan
86
ruang harddisk untuk satu menit data audio pada berbagai sampling rate secara teoritis :
RATE MONO 16 BIT
STEREO 16 BIT
11025 Hz 1,3 MB
2,5 MB 22050 Hz
2,8 MB 5,0 MB
44100 Hz 5,0 MB
10,1 MB
Sample rate merupakan angka yang menunjukkan
berapa banyak sampel diambil per detiknya untuk merepresentasikan data analog dalam dunia digital.
Sample rate CD Audio adalah 44.100 Hz dan 16 bit.
Angka ini berarti setiap detiknya ada 44.100 sample yang akan diambil, dan masing-masing sample
memiliki kemampuan variasi sebesar 16 bit 65536 variasi. Dua gambar di bawah ini bisa memberikan
gambaran mengenai penggunaan sample rate rendah gambar atas dan tinggi gambar bawah. Pada sample
rate tinggi, ada banyak data garis pendukung yang
membentuk kurva analog. Teorinya, semakin banyak sampel pendukung, maka kemampuan data digita l
dalam mereprentasikan data analog juga akan semakin tinggi kurva akan memiliki bentuk yang lebih smooth.
Semakin sedikit sample rate, maka kurva cenderung
87
kurang smooth dan memiliki efek anak tangga staircase. Untuk lebih jelasnya lihat gambar di
bawah.
Gambar 1
Gambar 2
Keterangan : Gambar 1 : sample rate rendah
Gambar 2 : sample rate tinggi
Gambar 3.27. Perbandingan Sample rate
Setelah menentukan
sampling rate
nya, maka
menentukan juga sampling depth dan channel. Bit depth digunakan untuk mendefinisikan jumlah variasi
yang bisa digunakan untuk merepresentasikan suatu sampel data analog ke dalam digital domain. Sebagai
contoh, bit depth sebesar 16 bit sama dengan 2 pangkat 16 atau 65.536 variasi, sedangkan 24 bit sama dengan
16.777.216 variasi 2 pangkat 24. Semakin tinggi variasi yang tersedia, tentunya akan semakin baik pula
kemampuan suatu data digital dalam merepresentasikan data analog.
88
Semakin tinggi berarti semakin besar: Penggunaan bit depth dan sample rate yang tinggi akan membutuhkan kapasitas
penyimpanan yang semakin besar.
Untuk menganalogikan bit depth, perhatikanlah gambar dibawah ini. Tiga gambar berikut ini memiliki bit depth
berbeda, yaitu 8 bit, 16 bit, dan 32 bit. Seperti sudah dibahas, semakin tinggi bit depth, maka semakin tinggi
pula kemungkinan variasi dalam dunia digital.
8 bit 256 variasi: Dengan bit depth 8 bit, kemungkinan variasi yang dihasilkan terasa kurang banyak.
89
16 bit 65536 variasi: Dengan bit depth 16 bit, gradasi warna terasa jauh lebih halus. Hal serupa juga terjadi suara.
32 bit 4.294.967.296 variasi: Bit depth 32 bit memang menawarkan variasi sangat tinggi, namun keterbatasan indera
matatelinga dan alat monitorspeaker menjadi penghalang.
90
Gambar dengan bit depth 8 cenderung memiliki gradasi yang kasar karena hanya memiliki 256 variasi untuk
merepresentasikan corak warna. Dengan 16 bit, variasi warna menjadi lebih baik. Terakhir dengan 32 bit,
keterbatasan mata, monitor, dan mesin cetak bisa jadi membuat kita sulit membedakannya dengan gambar 16
bit. Dalam suara, keterbatasan telinga dan perangkat audio speaker, microphone, headphone, dan lainnya
juga akan menjadi penghalang. Untuk lebih jelas, bisa dilihat versi zoom inset dalam kotak merah.
Setelah itu klik tombol Rekam, maka proses merekam akan berjalan seperti digambarkan di bawah ini.
91
Gambar 3.28. Proses Merekam Suara
92
4. File Tentang Penulis
File ini berisi informasi pembuat aplikasi, proses pembuatan file ini sama seperti pembuatan file menu
utama.
5. File Opening
File ini merupakan file inti dari semua file, dimana halaman ini yang akan tampil lebih awal dalam
aplikasi. Pembuatan file ini sama seperti file-file yang lain, namun ada sedikit perbedaannya yaitu karena file
ini merupakan file inti, maka harus dijadikan .exe terlebih dahulu agar pengguna tidak perlu lagi
menginstal software Macromedia Director MX 2004,
cara menjadikan file ini .exe yaitu klik menu File kemudian pilih Publish Setting, maka akan muncul
Publish Setting maka pilih .exe dalam tampilan Publish Setting.
Untuk menggabungkan
5 file
tersebut penulis
menggunakan script yang dilakukan di Macromedia
Director MX 2004. Kemudian memberikan efek-efek
transisi pada setiap perpindahan dari halaman menu ke halaman menu yang lainnya, halaman Menu Utama
menggunakan transisi DMXT Pixelate, halaman Pengantar
93
menggunakan transisi DMXT Ripple Fade, halaman Makharijul Huruf
menggunakan transisi DMXT Pixelate, halaman Evaluasi menggunakan transisi DMXT Glass dan
halaman Belajar Membaca menggunakan transisi DMXT Laser Wipe Type 1
. Pada halaman menu Makharijul Huruf penulis meletakkan animasi mulut, animasi bibir dan
video yang telah dibuat di Macromedia Flash MX 2004, dengan adanya animasi, suara serta video ini pengguna
lebih memahami lagi bagaimana cara pengucapan huruf hijaiyah
dengan baik dan benar.
3.2.5. Tes Hasil Aplikasi testing
Pada tahap ini penulis melakukan pengujian terhadap aplikasi yang dibuat. Langkah awal pengujian dilakukan secara
mandiri, kemudian dilakukan pengujian pada komputer lain dengan tujuan untuk mengetahui apakah program aplikasi dapat
berjalan dengan baik meski dijalankan di komputer lain. Selanjutnya penulis melakukan tes kepada bapak DR. Eko
Syamsudin Hasrito, M.Sc. dan bapak Ir. Adil Siregar, selaku dosen Multimedia Fakultas Sains dan Teknologi UIN Syarif
Hidayatullah Jakarta yang merupakan orang-orang yang ahli dibidang Multimedia untuk memperoleh jaminan bahwa program
94
aplikasi terbebas dari kesalahan script. Selain itu tes juga dilakukan kepada Bapak Ghozali Nurhasan, SHI. selaku ustad
yang mengajar ngaji di masjid Al-Hidayah Pondok Cabe Pamulang yang merupakan orang yang paham dan mengerti
tentang makharijul huruf, hal ini dilakukan untuk memperoleh jaminan bahwa program terbebas dari kesalahan dari sisi suara
huruf Hijaiyah yang ada dalam aplikasi. Hasil yang diperoleh dari pengujian memperlihatkan bahwa
aplikasi memiliki beberapa kekurangan seperti : 1. Masih ada beberapa suara huruf Hijaiyah yang salah dalam
pengucapannya. 2. Dalam submenu Pilihan Ganda, contoh suara yang akan
dicocokkan dengan jawabannya terlalu panjang sehingga tidak sesuai dengan jawaban.
3. Perlu adanya materi tambahan yang menjelaskan tentang sifat-sifat huruf Hijaiyah.
Setelah kekurangan dapat diketahui, maka segera diperbaiki dan dilakukan pengujian terhadap program aplikasi kepada
narasumber yang sama. Dari pengujian kali ini ternyata Aplikasi Makharijul Huruf Hijaiyah
Berbasis Multimedia berjalan dengan baik dan terbebas dari kesalahan.
95
3.2.6. Distribusi implementation