APLIKASI MOBILE ILMU TAJWID BERBASIS...

158
APLIKASI MOBILE ILMU TAJWID BERBASIS MULTIMEDIA Oleh: Wahyu Al Baihaqi 104091002853 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011 M / 1432 H

Transcript of APLIKASI MOBILE ILMU TAJWID BERBASIS...

Page 1: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

APLIKASI MOBILE ILMU TAJWID

BERBASIS MULTIMEDIA

Oleh:

Wahyu Al Baihaqi

104091002853

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

Page 2: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

i

APLIKASI MOBILE ILMU TAJWID

BERBASIS MULTIMEDIA

Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

Wahyu Al Baihaqi

104091002853

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

Page 3: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xvi

DAFTAR GAMBAR

Gambar 2.1. Simbol State .................................................................................... 17

Gambar 2.2. Simbol Transisi State ...................................................................... 18

Gambar 2.3. Notasi State Transition Diagram ..................................................... 18

Gambar 2.4. Tahapan Pengembangan Multimedia .............................................. 19

Gambar 2.5. Area kerja Adobe Flash CS4 Professional ...................................... 26

Gambar 2.6. Tampilan Adobe Device Central CS4 ............................................ 29

Gambar 2.7. Area kerja Adobe Photoshop CS4 .................................................... 32

Gambar 2.8. Area kerja Nonosoft KHOT 3 ........................................................... 34

Gambar 3.1. Kerangka pikir pembuatan aplikasi .................................................. 50

Gambar 4.1. Storyboard Opening ......................................................................... 53

Gambar 4.2. Storyboard Intro ............................................................................... 53

Gambar 4.3. Storyboard Menu Utama .................................................................. 55

Gambar 4.4. Storyboard Huruf Hijaiyah .............................................................. 56

Gambar 4.5. Storyboard al-Nūn al-Sākinah dan Tanwin ..................................... 57

Gambar 4.6. Storyboard Iżhār .............................................................................. 59

Gambar 4.7. Storyboard Pengertian Iżhār ............................................................ 60

Gambar 4.8. Storyboard Huruf Iżhār .................................................................... 61

Gambar 4.9. Storyboard Contoh Iżhār ................................................................... 63

Gambar 4.10. Storyboard Tentang Aplikasi .......................................................... 64

Gambar 4.11. Storyboard Bantuan ....................................................................... 65

Gambar 4.12. Storyboard Keluar .......................................................................... 66

Gambar 4.13. Struktur Navigasi Menu Utama .................................................... 67

Gambar 4.14. Flowchart Menu Utama ................................................................. 68

Page 4: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xvii

Gambar 4.15. Flowchart al-Nūn al-Sākinah dan Tanwin ..................................... 69

Gambar 4.16. Flowchart al-Mīm al-Sākinah ........................................................ 70

Gambar 4.17. Flowchart Iżhār .............................................................................. 71

Gambar 4.18. Flowchart Idgām ............................................................................. 72

Gambar 4.19. Flowchart Iqlāb .............................................................................. 73

Gambar 4.20. Flowchart Ikhfā .............................................................................. 74

Gambar 4.21. Flowchart Iżhār Syafawi ................................................................ 75

Gambar 4.22. Flowchart Idgām Mimi .................................................................. 76

Gambar 4.23. Flowchart Ikhfā Syafawi ................................................................ 77

Gambar 4.24. Flowchart Menu Pilihan al-Nūn al-Sākinah, Tanwin,

dan al-Mīm al-Sākinah .......................................................................................... 78

Gambar 4.25. Flowchart Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā ...................... 79

Gambar 4.26. Flowchart Menu Pilihan Iżhār Syafawi, Idgām Mimi,

Ikhfā Syafawi .......................................................................................................... 80

Gambar 4.27. STD Menu Utama .......................................................................... 81

Gambar 4.28. STD al-Nūn al-Sākinah dan Tanwin .............................................. 82

Gambar 4.29. STD al-Mīm al-Sākinah ................................................................. 83

Gambar 4.30. STD Iżhār ....................................................................................... 84

Gambar 4.31 STD Idgām ...................................................................................... 85

Gambar 4.32. STD Iqlāb ....................................................................................... 86

Gambar 4.33. STD Ikhfā ....................................................................................... 87

Gambar 4.34. STD Iżhār Syafawi ......................................................................... 88

Gambar 4.35. STD Idgām Mimi ............................................................................ 89

Gambar 4.36. STD Ikhfā Syafawi ......................................................................... 90

Gambar 4.37. STD Menu Pilihan al-Nūn al-Sākinah dan Tanwin,

Page 5: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xviii

al-Mīm al-Sākinah ................................................................................................. 91

Gambar 4.38. STD Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā ............................... 92

Gambar 4.39. . STD Menu Pilihan Iżhār Syafawi, Idgām Mimi,

Ikhfā Syafawi ......................................................................................................... 93

Gambar 4.40. Tampilan Opening .......................................................................... 94

Gambar 4.41. Tampilan Intro ................................................................................ 95

Gambar 4.42. Tampilan Menu Utama................................................................... 96

Gambar 4.43. Tampilan Huruf Hijaiyah ............................................................... 97

Gambar 4.44. Tampilan al-Nūn al-Sākinah dan Tanwin ...................................... 98

Gambar 4.45. Tampilan Iżhār ............................................................................... 99

Gambar 4.46. Tampilan Pengertian Iżhār ............................................................. 99

Gambar 4.47. Tampilan Huruf Iżhār................................................................... 100

Gambar 4.48. Tampilan Contoh Iżhār ................................................................ 101

Gambar 4.49. Tampilan Tentang Aplikasi .......................................................... 102

Gambar 4.50. Tampilan Bantuan ........................................................................ 102

Gambar 4.51. Tampilan Keluar ........................................................................... 103

Gambar 4.52. Pembuatan Gambar Background Aplikasi menggunakan

Adobe Photoshop CS4 ......................................................................................... 107

Gambar 4.53. Pembuatan Tombol Navigasi ....................................................... 108

Gambar 4.54. Pembuatan Tombol Navigasi Menu Utama

dan Submenu 1 ...................................................................................................... 109

Gambar 4.55. Pembuatan Tombol Navigasi Submenu 2 .................................... 109

Gambar 4.56. Pembuatan Tampilan Opening ..................................................... 111

Gambar 4.57. Pembuatan Tampilan Halaman Menu Utama .............................. 112

Gambar 4.58. Pembuatan Tampilan Halaman Contoh........................................ 114

Page 6: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xix

Gambar 4.59. Pembuatan Teks Arab dan Ayat al-Qur’an ................................. 114

Gambar 4.60. Pengujian aplikasi pada Emulator Adobe Device Central CS4.... 115

Gambar 4.61. Handphone Nokia 5530 XpressMusic ......................................... 116

Gambar 4.62. File Aplikasi ................................................................................ 118

Gambar 4.63. Pengujian aplikasi pada perangkat handphone............................. 119

Page 7: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xx

DAFTAR LAMPIRAN

Lampiran I Surat-surat Penelitian .................................................................... 127

Lampiran II Kuisioner Evaluasi 1 ................................................................... 128

Lampiran III Kuisioner Evaluasi 2 ...................................................................... 129

Lampiran IV Hasil Kuisioner Evaluasi 1 ........................................................... 130

Lampiran V Hasil Kuisioner Evaluasi 2 . ............................................................ 132

Lampiran VI Testing . .......................................................................................... 134

Lampiran VII Source Code . ................................................................................ 137

Page 8: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

ii

APLIKASI MOBILE ILMU TAJWID

BERBASIS MULTIMEDIA

Skripsi

Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

Wahyu Al Baihaqi

104091002853

Menyetujui,

Pembimbing I

NIP. 19730810 200604 2 001

Viva Arifin, MMSI

Pembimbing II

NIP. 19720911 200212 1008

Amin Johari, MA

Mengetahui,

Ketua Program Studi Teknik Informatika

NIP. 19710522 200604 1 002

Yusuf Durrachman, M.Sc M.IT

Page 9: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

iii

PENGESAHAN UJIAN

Skripsi yang berjudul “Aplikasi Mobile Ilmu Tajwid Berbasis Multimedia”

disusun oleh Wahyu Al Baihaqi 104091002853, telah diuji dan dinyatakan lulus

dalam Sidang Munaqosyah Fakultas Sains dan Teknologi, Universitas Islam

Negeri Syarif Hidayatullah Jakarta pada Hari Kamis, 18 Agustus 2011. Skripsi ini

telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana Strata

Satu (S1) Program Studi Teknik Informatika.

Jakarta, Agustus 2011

Menyetujui,

Penguji I

DR. Agus Salim M. Si NIP. 19720816199903 1 003

Penguji II

Muhammad Tabah Rosyadi, MA

NIP. 19620714 198903 1 004

Pembimbing I

Viva Arifin, MMSI

NIP. 19730810 200604 2 001

Pembimbing II

Amin Johari, MA

NIP. 19720911 200212 1008

Mengetahui,

Dekan Fakultas Sains dan Teknologi

DR. Syopiansyah Jaya Putra, M.Sis

NIP. 19680117 200112 1001

Ketua Prodi Teknik Informatika

Yusuf Durrachman, M.Sc, MIT NIP. 19710522 200604 1 002

Page 10: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

iv

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR –

BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN

SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI

ATAU LEMBAGA MANAPUN.

Jakarta, Agustus 2011

Wahyu Al Baihaqi

104091002853

Page 11: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

v

ABSTRAK

WAHYU AL BAIHAQI, Aplikasi Mobile Ilmu Tajwid Berbasis Multimedia. Dibawah bimbingan VIVA ARIFIN dan AMIN JOHARI. Perkembangan teknologi menjadikan handphone tidak lagi berfungsi hanya sebagai sarana komunikasi, fiturnya semakin diperkaya, sehingga lebih fungsional. Salah satu perkembangan handphone yaitu adanya fitur flash lite yang dapat dijadikan media penyampaian informasi berbasis multimedia. Tujuan dari penulisan skripsi ini yaitu merancang aplikasi mobile ilmu tajwid untuk memudahkan para pengajar, pelajar tahsin, qari’ dan juga setiap orang yang ingin belajar tajwid untuk mendapatkan informasi dan panduan ilmu tajwid khususnya untuk hukum al-nūn al-sākinah, tanwin dan al-mīm al-sākinah. Dengan menggunakan dua metode, yaitu metode pengumpulan data yang meliputi studi pustaka, kuisioner dan metode pengembangan multimedia menurut Luther yang terdiri dari enam tahap, yaitu konsep, perancangan, pengumpulan bahan material, pembuatan, testing dan distribusi. Software yang digunakan dalam pembuatan aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4, Adobe Audition 3.0 dan Nonosoft KHOT 3. Output yang dihasilkan berupa aplikasi mobile ilmu tajwid dengan ukuran 3,30 MB yang menampilkan informasi panduan ilmu tajwid khususnya untuk hukum al-nūn al-sākinah, tanwin dan al-mīm al-sākinah. Kata Kunci: Ilmu Tajwid, Mobile Application, Hukum Al-nūn Al-Sākinah,

Tanwin, Hukum Al-Mīm Al-Sākinah, Flash Lite, Multimedia xx + 138 Halaman; 72 Gambar; 7 Tabel; 7 Lampiran Daftar Pustaka: 15 (1967-2010)

Page 12: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

vi

KATA PENGANTAR

Assalamu’alaikum wr.wb.

Alhamdulillahirabbil’alamiin, Segala puji dan syukur kehadirat Allah

SWT, atas segala karunia dan rahmat-Nya sehingga penulis dapat menyelesaikan

penyusunan skripsi dengan judul "Aplikasi Mobile Ilmu Tajwid Berbasis

Multimedia" dengan baik. Shalawat serta salam penulis sampaikan pada

junjungan dan suri teladan kita, Nabi Besar Muhammad Saw. beserta keluarga dan

para sahabatnya.

Skripsi ini dibuat sebagai salah satu syarat untuk mendapatkan gelar Strata

1 (S1) pada Program Studi Teknik Informatika Universitas Islam Negeri Syarif

Hidayatullah Jakarta. Selama penulisan skripsi ini, penulis mengalami hambatan

dan kesulitan yang datang silih berganti. Oleh karena itu, penulis mengucapkan

terima kasih yang sebesar-besarnya kepada semua pihak yang telah membantu

sehingga penulisan skipsi ini selesai, khususnya pada:

1. Bapak Prof. Dr. Komarudin Hidayat, selaku Rektor UIN Syarif

Hidayatullah Jakarta.

2. Bapak DR. Syopiansyah Jaya Putra, M.Sis, selaku Dekan Fakultas

Sains dan Teknologi UIN Syarif Hidayatullah Jakarta dan Bapak

Yusuf Durrachman, M.Sc, MIT selaku Ketua Program Studi Teknik

Informatika Fakultas Sains dan Teknologi UIN Syarif Hidayatullah

Jakarta.

Page 13: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

vii

3. Ibu Viva Arivin, MMSI dan Bapak Amin Johari MA, selaku

pembimbing I dan II yang telah membantu penulis dalam penyusunan

skripsi ini. Terima kasih atas kesediaan waktu, tenaga, dan pikiran

dalam memberikan arahan dan bimbingan kepada penulis sehingga

skripsi ini dapat diselesaikan.

4. Seluruh dosen Program Studi Teknik Informatika, atas ilmu yang

diajarkan dan diberikan selama masa perkuliahan penulis, serta para

staff akademik Program Studi Teknik Informatika yang telah

membantu penulis dalam pengurusan surat-surat yang diperlukan.

5. Ibu Dra. Halimah SM, M.Ag, selaku Dosen Praktikum Ibadah dan

Tilawah UIN Syarif Hidayatullah Jakarta yang telah mengijinkan

penulis untuk melakukan wawancara, sehingga mendapatkan

informasi yang diinginkan.

6. Bapak Kuswanto, selaku Koordinator Bidang Kajian Islam Yayasan

Subuh.net yang telah mengijinkan penulis melakukan penelitian, dan

para anggota yang banyak membantu selama penulis melakukan

penelitian.

7. Keluarga penulis, kedua orang tua tercinta, Ayahanda Bambang

Darusman dan Ibunda Anisatullaila, terima kasih telah mendoakan

penulis pagi, siang dan malam, memberi restu dan tak bosan-bosan

mengingatkan penulis untuk menyelesaikan skripsi. Penulis juga

berterima kasih kepada adik-adikku, Bagus dan Novi yang juga

mendoakan penulis.

Page 14: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

viii

Penulis menyadari bahwa selama melakukan penyusunan dan penulisan

skripsi ini masih banyak terdapat kekurangan dan kesalahan-kesalahan di

dalamnya. Oleh karena itu penulis meminta maaf yang sebesar-besarnya kepada

semua pihak, atas kekurangan dan kesalahan baik sengaja maupun tidak di

sengaja selama melakukan penyusunan skripsi ini.

Akhir kata, semoga apa yang telah penulis susun dalam skripsi ini dapat

memberikan manfaat bagi siapa saja yang membacanya dan semoga dapat

dikembangkan di kemudian hari.

Wassalamualaikum wr.wb.

Jakarta, Agustus 2011

Wahyu Al Baihaqi

Page 15: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

ix

LEMBAR PERSEMBAHAN

Skripsi ini penulis persembahkan kepada semua pihak yang telah

membantu penulis sehingga skripsi ini dapat diselesaikan, di antaranya adalah.

1. Keluarga penulis, kedua orang tua tercinta, Ayahanda Bambang

Darusman dan Ibunda Anisatullaila, terima kasih telah selalu

mendoakan penulis pagi, siang dan malam, memberi restu dan tak

bosan-bosan mengingatkan penulis untuk menyelesaikan skripsi.

Penulis juga berterima kasih kepada kedua adikku, Bagus dan Novi

yang juga mendoakan serta memberikan support kepada penulis.

2. Seluruh teman-teman TI B 2004 yang namanya tidak bisa disebutkan

satu persatu.

3. Serta semua pihak yang telah membantu penulis dalam menyelesaikan

penyusunan skripsi ini baik secara langsung maupun tidak langsung

yang tidak dapat penulis sebutkan satu persatu.

Page 16: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

x

DAFTAR ISI

Halaman Judul ..................................................................................................... i

Lembar Persetujuan Pembimbing .................................................................... ii

Lembar Pengesahan Ujian ................................................................................ iii

Lembar Pernyataan ........................................................................................... iv

Abstrak .................................................................................................................. v

Kata Pengantar .................................................................................................. vi

Lembar Persembahan . ........................................................................................ ix

Daftar Isi ............................................................................................................... x

Daftar Tabel ........................................................................................................ xv

Daftar Gambar ................................................................................................. xvi

Daftar Lampiran ................................................................................................ xx

BAB I PENDAHULUAN ..................................................................................... 1

1.1. Latar Belakang ................................................................................... 1

1.2. Perumusan Masalah ............................................................................ 4

1.3. Batasan Masalah ................................................................................. 4

1.4. Tujuan dan Manfaat Penulisan ........................................................... 5

1.4.1.Tujuan ........................................................................................ 5

1.4.2.Manfaat ..................................................................................... 5

1.5. Metodologi Penelitian ........................................................................ 6

1.5.1.Metodologi Pengumpulan Data ................................................ 7

1.5.1.1. Studi Kepustakaan ...................................................... 6

1.5.1.2. Kuisioner ..................................................................... 7

Page 17: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xi

1.5.2.Metodologi Pengembangan Multimedia ................................... 7

1.6. Sistematika Penulisan Skripsi ............................................................. 7

BAB II LANDASAN TEORI .............................................................................. 9

2.1. Mobile Application .............................................................................. 9

2.1.1. Handphone ............................................................................... 9

2.2. Multimedia .......................................................................................... 10

2.2.1. Definisi Multimedia ............................................................... 10

2.2.2. Elemen Multimedia .................................................................. 11

2.2.2.1. Teks ........................................................................... 11

2.2.2.2. Gambar ...................................................................... 11

2.2.2.3. Animasi ..................................................................... 12

2.2.2.4. Audio ......................................................................... 12

2.2.2.6. Video ......................................................................... 13

2.2.2.7. Interactive Link ......................................................... 13

2.3. Perancangan Sistem ........................................................................... 13

2.3.1. Storyboard .............................................................................. 13

2.3.2. Flowchart ............................................................................... 14

2.3.3. Desain Struktur Navigasi ....................................................... 15

2.3.4. State Transition Diagram ....................................................... 17

2.4. Metodologi Pengembangan Multimedia ........................................... 19

2.4.1. Konsep (Concept) ................................................................... 19

2.4.2. Perancangan (Design) ............................................................ 20

2.4.3. Pengumpulan Bahan Material (Material Collecting) ............. 21

2.4.4. Pembuatan (Assembly) ........................................................... 21

Page 18: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xii

2.4.5. Pengujian (Testing) ................................................................ 21

2.4.6. Distrbusi (Distribution) ........................................................... 22

2.5. Flash Lite ........................................................................................... 22

2.5.1. Sejarah .................................................................................... 22

2.5.2. Pembahasan Umum Flash Lite .............................................. 22

2.6. Adobe Flash CS4 Professional .......................................................... 24

2.7. Adobe Device Central CS4 ............................................................... 28

2.8. Adobe Photoshop CS4 ...................................................................... 31

2.9. Nonosoft KHOT 3 ............................................................................. 33

2.10. Literatur Sejenis .............................................................................. 35

BAB III METODOLOGI PENELITIAN ........................................................ 38

3.1. Metodologi Pengumpulan Data ........................................................ 38

3.1.1. Studi Kepustakaan .................................................................. 38

3.1.2. Wawancara ............................................................................. 38

3.2. Metodologi Pengembangan Multimedia ........................................... 39

3.2.1. Konsep (Concept) ................................................................... 39

3.2.2. Perancangan (Design) ............................................................ 39

3.2.3. Pengumpulan Bahan Material (Material Collecting) ............. 43

3.2.4. Pembuatan (Assembly) ........................................................... 47

3.2.5. Pengujian (Testing) ................................................................ 48

3.2.6. Distribusi (Distribution) ......................................................... 49

3.3. Kerangka Pikir ..................................................................................... 49

BAB IV HASIL DAN PEMBAHASAN ........................................................... 51

4.1. Metode Pengembangan Multimedia .................................................. 51

4.1.1. Konsep (Concept) ................................................................... 51

Page 19: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xiii

4.1.2. Perancangan (Design) ............................................................ 52

4.1.2.1. Perancangan Storyboard ........................................... 53

4.1.2.2. Perancangan Struktur Navigasi ................................. 67

4.1.2.3. Perancangan Flowchart ............................................. 68

4.1.2.4. Perancangan STD (State Transition Diagram) ......... 81

4.1.2.5. Perancangan Antarmuka Pemakai (Interface) ........... 94

4.1.3. Pengumpulan Bahan Material (Material Collecting) ........... 103

4.1.3.1. Gambar .................................................................... 104

4.1.3.2. Teks ......................................................................... 104

4.1.3.3. Animasi ................................................................... 104

4.1.3.4. Audio ....................................................................... 104

4.1.3.5. Kontrol Navigasi ..................................................... 105

4.1.4. Pembuatan (Assembly) ......................................................... 105

4.1.5. Pengujian (Testing) .............................................................. 115

4.1.6. Distribusi (Distribution) ....................................................... 119

4.1.6.1. Spesifikasi Hardware dan Software ........................ 119

4.1.6.2. Cara Menggunakan Program ................................... 121

BAB V KESIMPULAN DAN SARAN ........................................................... 123

5.1. Kesimpulan ...................................................................................... 123

5.2. Saran ................................................................................................ 123

DAFTAR PUSTAKA . ....................................................................................... 125

Page 20: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

xiv

DAFTAR TABEL

Tabel 2.1. Simbol-simbol flowchart .................................................................... 15

Tabel 3.1. Daftar Gambar ..................................................................................... 44

Tabel 3.2. Daftar Audio ........................................................................................ 45

Tabel 4.1. Spesifikasi hardware dan Software ................................................... 106

Tabel 4.2. Spesifikasi Handphone ...................................................................... 117

Tabel 4.3. Spesifikasi handphone yang disarankan ............................................ 120

Tabel 4.4. Spesifikasi komputer yang disarankan ............................................... 121

Page 21: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

1

BAB I

PENDAHULUAN

1.1. Latar Belakang

Penggunaan telepon selular atau yang lebih akrab dengan nama

ponsel, di era sekarang posisinya memang sudah tidak tergantikan. Selain

sebagai alat komunikasi dan penghubung antar individu, ponsel juga tidak

lebih sebagai alat untuk mempermudah serta mempernyaman kebutuhan

hidup, Ketika tidak terhubung dengan PC desktop dan ingin melakukan

sesuatu yang biasanya dilakukan dengan PC, semisal membaca email,

browsing, chatting, dan lain sebagainya, ponsel dapat dipergunakan

sebagai media penghubung. (Azis, 2009).

Munculnya teknologi komputer, elektronik dan komunikasi

menciptakan struktur multimedia yang baru untuk dekade yang akan

datang. Bersatunya teknologi multimedia dengan industri telekomunikasi

menjadikan telepon dan televisi dapat dikombinasikan, yang menghasilkan

peralatan komunikasi yang semakin kaya, sehingga mampu untuk

melakukan belanja di rumah, belajar jarak jauh, mendengarkan lagu,

nonton film, menabung, membayar telepon dan listrik dan berinteraksi

keseluruh dunia. (Suyanto, 2005)

Al-Qur’an adalah firman Allah yang maha suci dan agung, yang

menjadi pedoman hidup seluruh umat Islam. Membacanya bernilai ibadah

dan mengamalkannya merupakan kewajiban yang diperintahkan dalam

Page 22: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

2

agama. Seorang muslim harus mampu membaca al-Qur’an dengan benar

seperti yang dicontohkan Rasulullah SAW. (Syarbini & Mufidah, 2010)

Membaca al-Qur’an tidaklah sama dengan membaca bacaan yang

lain, ada aturan – aturan tertentu yang harus dilakukan. Hal yang paling

utama bahwa membaca al-Qur’an harus dengan tartīl. Tartīl mengandung

arti teratur, perlahan, membaguskan dan memperhatikan tajwidnya. Hal ini

tidak dapat dilakukan tanpa mengerti dan memahami kaidah baca al-

Qur’an seperti yang dipelajari dalam ilmu tajwid. (Al Mahfani, 2010)

Indonesia merupakan negara yang berpenduduk muslim terbesar di

dunia, tetapi masih banyak yang belum bisa membaca al-Qur’an dengan

baik dan benar. Data Balitbang Departemen Agama (Depag) tahun 2008-

2009 menunjukkan bahwa 50% sampai 70% masyarakat muslim Indonesia

masih dalam kondisi buta huruf al-Qur’an. (Syarbini & Mufidah, 2010)

Terdapat beberapa kendala dalam membaca al-Qur’an dengan

benar sesuai dengan hukum-hukum tajwid, seperti :

1. Sulitnya membedakan hukum al-nūn al-sākinah, tanwin dan al-mīm

al-sākinah.

2. Karena terlalu banyaknya hukum al-nūn al-sākinah, tanwīn dan al-

mīm al-sākinah di dalam al-Qur’an, sehingga sering terlewat.

3. al-Qur’an Tajwid yang berbentuk teks belum memberikan fasilitas

contoh cara membaca al-Qur’an yang benar sebagai panduan.

Page 23: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

3

4. Pada media tertentu, seperti program acara televisi, aplikasi CD

pembelajaran interaktif dan lembaga pengajian, interaksi dengan media

tersebut memiliki keterbatasan dalam hal waktu dan tempat.

5. al-Qur’an Digital yang ada belum memberikan fasilitas untuk

membedakan hukum al-nūn al-sākinah, tanwīn dan al-mīm al-sākinah.

Berdasarkan uraian tersebut maka diperlukan suatu solusi untuk

mengatasi masalah tersebut. Solusi yang ditawarkan oleh penulis adalah

dengan membuat aplikasi mobile atau mobile application berbasis

multimedia yang dijalankan pada perangkat handphone menggunakan

aplikasi flash lite yang akan mempermudah umat Islam untuk mengetahui

dan mempelajari ilmu tajwid, khususnya hukum al-nūn al-sākinah, tanwīn

dan al-mīm al-sākinah, dengan penyampaian yang lebih menarik dan cara

pengaksesan lebih cepat, praktis dan efisien.

Pengembangan aplikasi ini tidak terlepas dari sudah banyaknya

perangkat handphone yang mendukung aplikasi flash lite versi 2.0 dan

mendukung berbagai macam elemen multimedia, maka penulis ingin

mendalami teknologi aplikasi flash lite dengan mengembangkan aplikasi

ilmu tajwid tersebut.

Dari permasalahan di atas, maka penulis memilih judul :

”APLIKASI MOBILE ILMU TAJWID BERBASIS MULTIMEDIA”.

Page 24: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

4

1.2. Perumusan Masalah

Berdasarkan pada latar belakang yang dijelaskan dan sesuai tujuan

dari penulisan skripsi ini, maka pokok permasalahan yang dapat penulis

simpulkan adalah sebagai berikut:

1. Bagaimana membuat aplikasi mobile yang dapat menyajikan

penyampaian ilmu tajwid untuk hukum al-nūn al-sākinah, tanwīn dan

al-mīm al-sākinah berbasis multimedia.

2. Bagaimana menerapkan aplikasi tersebut pada perangkat handphone

yang mendukung aplikasi flash lite versi 2.0.

1.3. Batasan Masalah

Dengan luasnya cakupan pembahasan mengenai ilmu tajwid, maka

penulis membatasi ruang lingkup pembahasan agar penulisan skripsi dapat

terfokus kepada masalah yang ada. Ruang lingkup pembahasan adalah:

1. Penyajian Ilmu tajwid terbatas pada hukum al-nūn al-sākinah, tanwīn

dan al-mīm al-sākinah, hal ini bersumber pada buku karya Moh.

Wahyudi, Ilmu Tajwid Plus, Halim Jaya, Surabaya, 2008.

2. Tools atau software yang digunakan adalah Adobe Flash CS4, Adobe

Device Central CS4, Adobe Photoshop CS 4 Nonosoft KHOT 3, dan

Adobe Audition 3.0.

3. Jenis handphone yang digunakan dalam penerapan aplikasi ini adalah

Nokia tipe 5530 XpressMusic.

Page 25: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

5

4. Aplikasi diterapkan hanya pada handphone yang mendukung aplikasi

flash lite versi 2.0

5. Aplikasi ini digunakan sebagai panduan bagi para pengajar dan pelajar

tahsin, qari’ serta untuk umum yaitu orang yang ingin belajar tajwid.

1.4. Tujuan dan Manfaat Penulisan

1.4.1. Tujuan

Tujuan dari penulisan skripsi ini adalah untuk merancang

suatu mobile application yang berisi tentang ilmu tajwid untuk

hukum al-nūn al-sākinah, tanwīn dan al-mīm al-sākinah yang

berjalan pada aplikasi flash lite dalam perangkat handphone yang

menggunakan teknologi dan aplikasi multimedia.

1.4.2. Manfaat

Dengan melakukan penulisan skripsi ini, penulis

mendapatkan manfaat-manfaat, antara lain:

1. Bagi Penulis

a. Lebih paham secara detail pengetahuan tentang ilmu tajwid

dan hukumnya terutama untuk hukum al-nūn al-sākinah,

tanwīn dan al-mīm al-sākinah.

b. Penulis mampu menerapkan aplikasi mobile menggunakan

aplikasi flash lite ke dalam handphone untuk

menyampaikan ilmu tajwid untuk hukum al-nūn al-

sākinah, tanwīn dan al-mīm al-sākinah

Page 26: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

6

2. Bagi Pengguna

a. Dengan dirancangnya aplikasi ini, dapat memudahkan

pengguna dalam memperoleh ilmu tajwid mengenai hukum

al-nūn al-sākinah, tanwīn dan al-mīm al-sākinah

b. Membantu pengguna untuk mengetahui hukum dan tata

cara menggunakan ilmu tajwid untuk hukum al-nūn al-

sākinah, tanwīn dan al-mīm al-sākinah dalam membaca al-

Qur’an.

3. Bagi Universitas

a. Mengetahui kemampuan mahasiswa dalam menguasai

materi ilmu yang telah diperoleh di bangku kuliah.

b. Mengetahui kemampuan mahasiswa dalam menerapkan

ilmunya dan sebagai bahan evaluasi.

1.5. Metodologi Penelitian

Dalam penulisan skripsi ini penulis menggunakan dua metode

dalam perancangan aplikasi dan untuk mendapatkan data-data serta

informasi yang diperlukan, yaitu metode pengumpulan data dan metode

pengembangan multimedia.

1.5.1. Metodologi Pengumpulan Data:

1.5.1.1. Studi Kepustakaan

Metode pengumpulan kepustakaan atau studi

literatur dilakukan dengan cara membaca buku-buku yang

Page 27: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

7

berkaitan, sehingga dapat dijadikan acuan dalam

penulisan skripsi ini.

1.5.1.2. Kuisioner

Metode ini dilakukan dengan cara membagikan

kuisioner kepada pengguna untuk mengetahui sejauh

mana aplikasi yang di rancang dapat bermanfaat bagi para

pelajar tahsin ilmu tajwid terkait hukum-hukumnya.

1.5.2. Metodologi Pengembangan Multimedia:

Menurut Luther (1994) (dalam Ariesto Hadi Sutopo,

2003:32) metodologi pengembangan multimedia dilakukan melalui

6 tahapan, yaitu konsep (concept), desain atau perancangan

(design), pengumpulan bahan material (material collecting),

pembuatan (assemby), pengujian (testing), dan distribusi

(distribution).

1.6. Sistematik Penulisan

Untuk memudahkan penulis dalam menyusun skripsi ini,

pembahasan terbagi kedalam 5 (lima) bab yang diuraikan sebagai berikut:

Page 28: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

8

BAB I PENDAHULUAN

Bab ini berisi pembahasan mengenai uraian tentang Latar

Belakang, Rumusan Masalah, Batasan Masalah, Tujuan dan Manfaat

Penulisan, dan Sistematika penulisan.

BAB II LANDASAN TEORI

Bab ini berisi pembahasan tentang landasan teori, definisi dan

komponen pembangun yang ada dalam penyusunan skripsi ini, mulai dari

al-Qur’an, Ilmu Tajwid, Hukum al-Nūn al-Sākinah dan Tanwīn, Hukum

al-Mīm al-Sākinah, Multimedia, Adobe Flash CS4, Adobe Photoshop CS4,

Nonosoft KHOT 3, Adobe Device Central CS4, Adobe Audition 3.0.

BAB III METODE PENELITIAN

Bab ini berisi pembahasan mengenai metodologi yang penulis

gunakan dalam pengembangan aplikasi mobile application berbasis

multimedia berdasarkan metodologi pengembangan aplikasi multimedia.

BAB IV PERANCANGAN DAN PEMBUATAN APLIKASI

Bab ini berisi pembahasan perancangan dan proses pembuatan

aplikasi mobile application sebagai solusi berdasarkan permasalahan yang

ada.

BAB V KESIMPULAN DAN SARAN

Bab ini berisi mengenai kesimpulan dan saran yang penulis peroleh

dari penulisan dan penyusunan skripsi ini.

Page 29: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

9

BAB II

LANDASAN TEORI

2.1. Mobile Application

Mobile Application adalah merupakan suatu aplikasi yang cara

mengaksesnya menggunakan perangkat bergerak (Mobile Device) seperti

Handphone, Smartphone, dan PDA Phone. (Suryana, 2008)

2.1.1. Handphone

Telepon seluler atau lebih dikenal dengan nama ponsel atau

handphone saat ini menjadi salah satu alat komunikasi populer.

karena perkembangan alat komunikasi yang satu ini belakangan

berubah secara seginifikan. ini dibuktikan dengan kemampuan

ponsel dijejali dengan berbagai macam software dan hardware

multimedia seperti kamera, pemutar musik, kemampuan

berselancar di internet dan lain-lain. (Rudi, 2009)

Perkembangan handphone atau ponsel telah memasuki

babak baru, yaitu babak multimedia. kemunculan babak baru yang

dipicu oleh luasnya perkembangan komputer dan perkembangan

teknologi internet menjadikan fitur ponsel tidak hanya sekedar

untuk SMS atau sebagai telepon. (Sugiarto, 2007)

Page 30: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

10

2.2. Multimedia

Istilah multimedia merupakan istilah yang diambil dari teater,

bukan komputer. Pertunjukan yang memanfaatkan lebih dari satu medium

seringkali disebut pertunjukan multimedia. Sistem multimedia dimulai

pada akhir 1980-an dan terus berkembang hingga saat ini (Suyanto, 2003).

2.2.1. Definisi Multimedia

1. Menurut McCormick (2003), multimedia secara umum

merupakan kombinasi tiga elemen, yaitu suara, gambar dan

teks.

2. Menurut Robin dan Linda (2003), multimedia merupakan alat

yang dapat menciptakan presentasi yang dinamis dan interaktif

yang mengkombinasikan teks, grafik, animasi, audio dan video.

3. Menurut Turban (2003), multimedia adalah kombinasi paling

sedikit dua media input atau output dari data, media input atau

output dari data, media ini dapat berupa audio (suara atau

musik), animasi, video, teks, grafik dan gambar.

4. Menurut Hoftstetter (2001), multimedia adalah pemanfaatan

komputer untuk membuat dan menggabungkan teks, grafik,

audio, video dan animasi dengan menggabungkan link dan tool

yang memungkinkan pemakai melakukan navigasi,

berinteraksi, berkreasi dan berkomunikasi.

Page 31: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

11

2.2.2. Elemen Multimedia

Untuk membuat aplikasi multimedia, diperlukan penggabungan

dari beberapa elemen, dimana setiap elemen memiliki peranan

masing-masing (Suyanto, 2003), yaitu:

2.2.2.1. Teks

Teks merupakan dasar dari pengolahan kata dan

informasi berbasis multimedia. Penggunaan teks dalam

multimedia sangat efektif untuk menyampaikan ide serta

memberikan panduan kepada pengguna. Teks dapat

membentuk kata, surat atau narasi dalam multimedia dan

merupakan bentuk data yang paling mudah disimpan dan

dikendalikan.

Teks dapat disajikan dalam berbagai bentuk font

maupun ukuran dan merupakan media yang paling umum

digunakan dalam penyajian informasi yang bertujuan untuk

memudahkan penyampaian informasi ke pengguna.

2.2.2.2. Gambar

Grafik atau gambar digunakan dalam presentasi atau

publikasi multimedia karena dapat menghasilkan

multimedia yang menarik dan dapat mengurangi

kebosanan dibandingkan dengan teks. (Suyanto, 2003)

Page 32: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

12

Gambar merupakan elemen multimedia yang

dipresentasikan dalam dua dimensi maupun tiga dimensi

sebagai media ilustrasi yang memperjelas penyampaian

informasi. Gambar yang digunakan dalam multimedia

dapat berupa gambar sintesis, artinya gambar yang dibuat

dengan program editor gambar seperti Adobe Photoshop,

dapat juga berupa gambar hasil scanning dari foto atau

lukisan tangan.

2.2.2.3. Animasi

Animasi berarti gerakan image atau video. Konsep

dari animasi menggambarkan sulitnya menyajikan

informasi dengan satu gambar, atau sekumpulan gambar.

(Sutopo, 2003)

2.2.2.4. Audio (suara/musik)

Didefinisikan sebagai sembarang bunyi dalam

bentuk digital seperti suara, musik, narasi dan sebagainya.

Dengan adanya audio (suara atau musik) suatu aplikasi

multimedia menjadi lebih menarik dan lebih interaktif.

Penyajian audio merupakan cara lain untuk

lebih memperjelas pengertian suatu informasi. Audio atau

suara dapat lebih menjelaskan karakteristik suatu gambar.

(Sutopo, 2003)

Page 33: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

13

2.2.2.5. Video

Menurut Agnew dan Kellerman (1996) definisi

video adalah sebagai media digital yang menunjukkan

susunan atau urutan gambar-gambar dan memberikan ilusi,

gambaran serta fantasi kepada gambar yang bergerak.

Video menyediakan satu kaedah penyaluran informasi yang

amat menarik dan live. Video merupakan sumber atau

media yang paling dinamik serta efektif dalam

menyampaikan suatu informasi.

2.2.2.6. Interactive Link

Interactive link merupakan sebagian dari

multimedia yang diperlukan untuk menggabungkan

beberapa elemen (objek) multimedia, sehingga menjadi

informasi yang terpadu, dimana pengguna dapat menekan

mouse atau objek pada layer seperti tombol atau teks dan

menyebabkan program melakukan perintah tertentu.

(Sutopo, 2003)

Dalam hal ini penulis menggunakan elemen multimedia

teks, gambar, animasi, audio dan interactive link.

2.3. Perancangan Sistem

2.3.1. Storyboard

Storyboard menurut (Luther 1994, dalam Sutopo, 2003)

merupakan deskripsi dari setiap scene yang secara jelas

Page 34: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

14

menggambarkan objek multimedia serta perilakunya yang

penjelasannya dapat menggunakan symbol maupun teks.

Storyboard merupakan serangkaian sketsa dibuat persegi

panjang yang menggambarkan suatu urutan (alur cerita) elemen-

elemen yang diusulkan untuk aplikasi multimedia (Suyanto, 2003).

Storyboard memiliki manfaat antara lain:

1. Merupakan visual test bagi pengembang atau pemilik

multimedia.

2. Pedoman dari aliran pekerjaan bagi staf pembuat multimedia.

3. Gambaran suatu multimedia yang akan diproduksi bagi

sponsor. (Nugroho, 2005)

2.3.2. Flowchart

Sistem flowchart menggambarkan tahapan proses dari suatu

sistem, termasuk sistem multimedia. Sedangkan program flowchart

menggambarkan urutan-urutan instruksi dari suatu program

komputer. (Suyanto, 2003)

Flowchart view digunakan untuk melengkapi storyboard

untuk multimedia non-linier (interaktif) dan multimedia yang

menggunakan banyak percabangan. Flowchart disebut juga

diagram tampilan yang digunakan pada multimedia interaktif untuk

menggambarkan alur dari suatu scene (tampilan) ke scene lainnya.

(Sutopo, 2003). Simbol-simbol dalam flowchart di antaranya :

Page 35: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

15

Tabel 2.1. Simbol-simbol flowchart

No. Simbol Fungsi

1. Menggambarkan proses atau

proses perhitungan

2. Sambungan pada halaman

yang sama

3 Sambungan pada halaman

yang berbeda

4

Arah data / arus data

5 Mulai (start) atau selesai

(stop)

6

Proses input atau output

7

Keputusan (Decision)

2.3.3. Desain Struktur Navigasi

Struktur navigasi merupakan rancangan alur program.

Dalam pengembangan aplikasi berbasis multimedia maupun

pengembangan web menurut Lowery (2001, dalam Sutopo, 2003:

Page 36: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

16

37), terdapat beberapa model navigasi dasar, di mana desainer

harus mengenal dengan baik karena setiap model memberikan

solusi untuk kebutuhan yang berbeda.

Secara umum terdapat 4 jenis model struktur navigasi

dalam pengembangan aplikasi berbasis multimedia, yaitu :

1. Linear navigation model

Merupakan model yang digunakan oleh sebagian

besar multimedia linier. Informasi diberikan secara

sekuensial dimulai dari satu halaman.

Linear navigation model banyak digunakan dan

berhasil dengan baik pada beberapa macam aplikasi seperti:

a. Presentasi.

b. Aplikasi computer based-training.

c. Aplikasi yang memerlukan informasi berurutan.

2. Hierarchical model

Model ini diadaptasi dari top-down design yang

memiliki konsep dimulai dari dari satu node yang menjadi

halaman utama dan dibuat beberapa cabang ke halaman-

halaman level 1, dari tiap halaman level 1 dikembangkan

menjadi beberapa cabang lagi.

3. Spoke-and-hub model

Model hub dinyatakan dengan halaman utama yang

mempunyai hubungan dengan setiap node, setiap node

Page 37: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

17

dapat berhubungan kembali ke halaman utama dan

memiliki struktur hyperlink yang fleksibel.

4. Full web model

Model ini memberikan kemampuan hyperlink yang

banyak yang digunakan untuk dapat mengakses semua

topik dengan cepat, namun memiliki kelemahan seperti user

akan kehilangan cara untuk kembali ke topik sebelumnya.

Dalam hal ini penulis menggunakan struktur navigasi

Hierarchical model untuk pembuatan aplikasi.

2.3.4. State Transition Diagram

State transition diagram (STD) menunjukkan bagaimana

sistem bertingkah laku sebagai akibat dari kejadian eksternal.

Untuk melakukannya, STD menunjukkan berbagai model tingkah

laku (disebut state) sistem dan cara di mana transisi dibuat dari

state satu ke state lainnya. STD berfungsi sebagai dasar bagi

pemodelan tingkah laku. (Pressman, 2002: 354)

Notasi State Transition Diagram :

1. State ialah kumpulan keadaan atau atribut yang mencirikan

seseorang atau suatu benda pada waktu tertentu, bentuk

keberadaan tertentu atau kondisi tertentu. State disimbolkan

dengan segi empat.

Gambar 2.1. Simbol State

Page 38: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

18

2. Transisi State atau perubahan state, disimbolkan dengan panah

berarah.

Gambar 2.2. Simbol Transisi State

3. Kondisi dan aksi. kondisi adalah kejadian yang menyebabkan

sebuah sistem menunjukkan beberapa bentuk perilaku yang

dapat diprediksi, sedangkan aksi didefinisikan proses yang

terjadi sebagai konsekuensi dari adanya transisi. Untuk

melengkapi STD dibutuhkan dua hal untuk mengubah keadaan.

Di bawah ini ilustrasi dari kondisi dan aksi yang ditampilkan di

sebelah anak panah yang menghubungkan dua keadaan.

Gambar 2.3. Notasi State Transition Diagram

(Sumber: Wisnu, 2002)

Page 39: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

19

2.4. Metodologi Pengembangan Multimedia

Metode penelitian yang digunakan dalam penulisan skripsi dan

pembuatan aplikasi ini adalah metode menurut Luther (1994, Sutopo:

2003), yaitu pengembangan multimedia dilakukan berdasarkan 6 tahap,

yaitu concept, design, material collecting, assembly, testing, dan

distribution.

Gambar 2.4. Tahapan Pengembangan Multimedia

(Sumber: Sutopo, 2003)

2.4.1. Konsep (Concept)

Tahap konsep (concept) yaitu menentukan tujuan, termasuk

identifikasi audiens, macam aplikasi (presentasi, interaktif, dan

lain-lain), tujuan aplikasi (informasi, hiburan, pelatihan, dan lain-

lain) dan spesifikasi umum.

Page 40: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

20

Pada tahap konsep ini yang penulis lakukan adalah:

1. Menentukan tujuan, untuk apa aplikasi

dikembangkan dan menentukan pengguna untuk

siapa saja aplikasi ini dapat digunakan.

2. Deskripsi konsep aplikasi yang akan dibuat dengan

menentukan jenis aplikasi dan spesifikasi umum

aplikasi (judul, audien dan lain-lain).

2.4.2. Perancangan (Design)

Maksud dari tahap perancangan (design) adalah membuat

spesifikasi secara rinci mengenai arsitektur proyek, gaya, dan

kebutuhan material untuk proyek. Spesifikasi dibuat cukup rinci

sehingga pada tahap berikutnya, yaitu tahap pengumpulan bahan

material (material collecting), pembuatan (assembly) tidak

diperlukan keputusan baru, tetapi menggunakan apa yang sudah

ditentukan pada tahap perancangan (design).

Spesifikasi yang akan dibuat disesuaikan berdasarkan pada:

1. Perancangan storyboard.

2. Desain struktur navigasi.

3. Perancangan diagram tampilan (flowchart).

4. Perancangan diagram transisi (state transition diagram).

5. Perancangan antar muka (interface).

Page 41: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

21

2.4.3. Pengumpulan Bahan Material (Material Collecting)

Pada tahap ini dilakukan pengumpulan bahan seperti clipart

image, animasi, audio, berikut pembuatan gambar grafik, foto,

audio, dan lain-lain yang diperlukan untuk tahap-tahap berikutnya.

Bahan material yang diperlukan dalam multimedia dapat diperoleh

dari berbagai sumber seperti buku, internet, koleksi pribadi

maupun dari bahan yang terdapat dari pihak tempat di mana

penelitian dilaksanakan.

2.4.4. Pembuatan (Assembly)

Tahap pembuatan (assembly) merupakan tahap di mana

seluruh objek multimedia dibuat. Pembuatan aplikasi berdasarkan

storyboard, flowchart, struktur navigasi atau diagram objek yang

berasal dari tahap perancangan (design). Pada tahap ini semua

objek atau elemen multimedia dibuat dan digabungkan menjadi

satu kesatuan aplikasi.

2.4.5. Pengujian (Testing)

Tahap pengujian (testing) dilakukan setelah tahap

pembuatan dan seluruh data telah dimasukkan. Tahap ini dilakukan

setelah tahap pembuatan (assembly) dengan menjalankan aplikasi

atau program dengan tujuan untuk melihat apakah ada kesalahan

atau tidak dan memastikan hasil pembuatan aplikasi multimedia

sesuai dengan yang direncanakan.

Page 42: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

22

2.4.6. Distribusi (Distribution)

Tahapan di mana hasil aplikasi multimedia disebarluaskan.

Tahap ini juga merupakan tahap dimana evaluasi dan implementasi

aplikasi multimedia dilakukan. Evaluasi dilakukan untuk

menentukan apakah sistem yang baru tersebut sesuai dengan tujuan

semula dan diputuskan apakah ada revisi atau modifikasi.

2.5. Flash Lite

2.5.1. Sejarah Flash Lite

Pada bulan februari 2003, Macromedia (sekarang Adobe)

mengumumkan peluncuran flash lite, sebuah flash berdasarkan

flash 4 scripting engine. Flash lite ditujukan untuk pasar

handphone yang cukup luas.(Siswoutomo, 2005).

Flash lite 1.0 diluncurkan pertama kali untuk handset 505i

NTT DoCoMo di Jepang dan memberikan kemudahan dalam

penempatan konten flash ke pasar ponsel untuk pertama kalinya.

Penerapan flash lite di jepang telah sukses dengan flash lite pre-

installed pada 25 model handset yang berbeda.(Wilson, 2005)

2.5.2. Pembahasan Umum Flash Lite

Flash lite merupakan versi ringan dari adobe flash player

(aplikasi perangkat lunak yang di-publish oleh Adobe Systems),

versi ini ditujukan untuk ponsel dan perangkat elektronik portabel

lainnya yang memungkinkan pengguna perangkat ini untuk melihat

Page 43: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

23

konten multimedia dan aplikasi yang dikembangkan dengandengan

menggunakan tool adobe flash yang sebelumnya hanya tersedia

pada komputer. (YongFei 2010)

Flash lite merupakan teknologi untuk mengembangkan

aplikasi yang berjalan di sistem operasi mobile yang

memungkinkan pengembangan aplikasi-aplikasi berbasis flash

yang unik, karena terdapat elemen-elemen multimedia di

dalamnya.

Dalam pengembangan aplikasi flash lite di perlukan tools

seperti:

1. Adobe Flash Professional.

2. Adobe Device Central

3. Action Script

aplikasi flash lite dapat dibagi menjadi tiga jenis, yaitu:

1. Standalone

Aplikasi standalone flash lite merupakan kategori

yang paling umum dari aplikasi flash lite. Aplikasi ini

tidak memerlukan hubungan ke jaringan. Contoh dari

jenis aplikasi ini adalah application dan games.

2. Browser

Konten flash lite juga dapat dimasukkan dalam

halaman web sehingga konten flash lite ditampilkan pada

situs mobile.

Page 44: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

24

3. Screensaver

Merupakan file SWF yang di dalamnya tidak

terdapat interaksi oleh pengguna. tidak semua perangkat

dengan flash lite mendukung screensaver, sehingga

pengembang harus memastikan sasaran perangkat yang

bisa menjalankannya.

Perangkat (device) yang mendukung untuk jenis

aplikasi tergantung pada platform perangkat dan

kemampuan dari flash lite player yang diinstal pada

perangkat. (Flash Lite Developer's Library 1.6, 2010)

2.6. Adobe Flash CS4 Professional

Adobe Flash CS4 Professional adalah aplikasi perangkat lunak

utama yang digunakan untuk membuat dan menyampaikan konten

interaktif. Adobe Flash CS4 Profesional adalah program yang sangat

handal dan paling maju dalam lingkungan authoring untuk membuat

konten interaktif untuk digital, web, dan mobile platform.

Flash dirancang dan dikembangkan untuk membuat presentasi,

aplikasi dan beberapa karya multimedia interaktif. Pekerjaan yang dapat

dilakukan oleh flash meliputi animasi, video, presentasi, dan aplikasi

lainnya. Secara umum, semua hasil pekerjaan menggunakan flash disebut

aplikasi. Aplikasi dalam flash dapat menggunakan elemen-elemen seperti,

gambar atau foto, suara, video, dan efek spesial. (Thabrani, 2006)

Page 45: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

25

Secara umum, semua aplikasi flash baik animasi maupun interaktif

dibuat mengikuti tahap-tahap berikut:

1. Menentukan jenis aplikasi yang akan dibuat. menurut jenisnya,

ada 3 macam aplikasi flash, yaitu:

a. Animasi, biasanya berupa film kartun singkat, animasi logo,

dan sebagainya

b. Interaktif, banyak digunakan untuk pembuatan formulir atau

polling online di internet

c. Gabungan animasi dan interaktif, paling sering ditemukan

berupa permainan flash.

Berdasarkan file, flash CS4 professional dapat membuat

beberapa aplikasi yaitu, file flash dan file flash mobile, yaitu

file yang ditujukan untuk aplikasi pada telepon seluler tipe

dan merek tertentu, yang tersedia pada Adobe Device

Central

2. Membuat atau menambahkan unsur-unsur media, bisa berupa

gambar, video, suara, atau teks.

3. Menyusun unsur-unsur media yang telah dibuat atau

ditambahkan.

4. Memberi efek khusus.

5. Menambahkan actionscript

6. Menguji aplikasi

7. Mempublikasikan hasil akhir aplikasi.

Page 46: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

26

Gambar 2.5. Area kerja Adobe Flash CS4 Professional

1. Menu, sekumpulan perintah untuk mengatur objek atau animasi

dan berisi kontrol untuk berbagai fungsi seperti membuat,

membuka, dan menyimpan file, copy, paste dan lain-lain.

2. Stages, merupakan lembar kerja berupa area persegi empat

yang digunakan untuk mendesain, membuat, membentuk, dan

menempatkan atau menganimasikan objek seperti gambar, teks,

dan foto.

3. Panel tools atau toolbox, berisi koleksi tombol-tombol perintah

untuk membuat atau menggambar, memilih dan

memformat objek. Panel tools juga berisi fungsi-fungsi

Page 47: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

27

untuk membuat tulisan, mewarnai, menghapus, dan membuat

path pada stage dan timeline.

4. Panel properties, untuk memformat atau mengatur properti

pada stage, seperti ukuran stage, warna dasar stage dan

framerate dengan satuan FPS (frame per second). Panel

properties juga memberikan informasi seperti versi flash

player, script yang sedang digunakan.

5. Timeline merupakan bagian dalam flash yang berfungsi untuk

membuat dan mengontrol objek dan animasi, terdiri dari

layer, frame dan playhead. Timeline mengatur objek yang

muncul dan berfungsi untuk mengatur waktu suatu movie

dan memunculkan objek tertentu serta penempatan efek suara

dan musik latar belakang.

6. Layer digunakan untuk menempatkan objek berbeda-beda.

Layer digambarkan seperti tumpukan lembaran yang transparan

yang berguna untuk pengaturan kerja, animasi dan elemen

lainnya dan memudahkan dalam meng-edit suatu objek tanpa

mempengaruhi objek lain yang berada pada layer lain.

7. Frame adalah gambar yang membentuk suatu gerakan bila

frame tersebut ditampilkan satu demi satu secara berurutan

untuk mengatur pembuatan animasi. Berikut istilah-istilah pada

frame:

Page 48: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

28

a. Keyframe, merupakan suatu tanda yang digunakan untuk

membatasi suatu gerakan animasi, ditandai dengan titik

hitam tebal pada frame.

b. Blank Keyframe, merupakan keyframe yang tidak terdapat

8. Playhead , merupakan garis merah vertikal yang menunjukkan

posisi frame pada suatu saat.

9. Frame rate adalah Jumlah bingkai gambar atau frame yang

ditunjukkan setiap detik dalam membuat gambar bergerak,

diwujudkan dalam satuan fps (frames per second), makin tinggi

angka fps-nya, semakin mulus pergerakan gambar.

2.7. Adobe Devive Central CS4

Adobe Device Central CS4 adalah perangkat lunak yang berfungsi

sebagai emulator yang memungkinkan pengembang untuk menguji konten

flash berdasarkan profil menggunakan berbagai perangkat. Device central

memudahkan pengembang untuk mengetahui perangkat mana saja yang

dapat menjalankan aplikasi, sehingga pengembang dapat melihat

bagaimana tampilan aplikasi yang akan terlihat oleh pengguna. (Global

Web Site, 2009)

Device central memiliki pengaturan-pengaturan untuk menguji

aplikasi, seperti kondisi pencahayaan, kekuatan jaringan atau sinyal, dan

memori yang tersedia. Device central juga berguna dalam tugas-tugas

meliputi desain dan proses pengembangan, termasuk perencanaan, ide,

Page 49: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

29

pengetesan, dokumentasi dan presentasi. (Adobe Systems Incorporated,

2008)

Device central juga menyediakan pengembang konten mobile dan

penguji dengan cara membuat dan mem-preview konten mobile pada

berbagai macam perangkat (devices). Device central menampilkan

antarmuka realistis dari berbagai perangkat mobile yang menunjukkan:

1. Seperti apa perangkat tersebut.

2. Bagaimana tampilan konten aplikasi pada perangkat tersebut.

(Adobe Systems Incorporated, 2008)

Gambar 2.6. Tampilan Adobe Device Central CS4

1. Menu: berisi kontrol untuk berbagai fungsi perintah seperti

membuat, membuka, menyimpan file, meng-edit, dan perintah-

perintah standar windows lainnya.

Page 50: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

30

2. Device sets: digunakan untuk membuat suatu perangkat

(device) dengan pengaturan tertentu untuk menguji konten

aplikasi.

3. Device profiles : merupakan salah satu bagian utama dari

device central, yang digunakan untuk melihat dan mengatur

informasi perangkat (devices).

Device profiles memberikan informasi mengenai perangkat

termasuk media dan jenis konten yang didukung, yaitu konten

yang dapat digunakan pada masing-masing perangkat seperti

screen saver, wallpaper, dan stand-alone.

4. Emulator : merupakan salah satu bagian utama dari device

central untuk melihat tampilan aplikasi pada perangkat virtual

yang telah dipilih dari device library. Dalam modus ini, device

central bisa digunakan sebagai aplikasi stand-alone untuk

melihat konten seperti multimedia player dan melakukan

interaksi seperti pada perangkat yang sebenarnya.

Emulator memiliki panel-panel yang menampilkan informasi

yang dibutuhkan dalam pembuatan aplikasi, antara lain:

a. Display: fasilitas yang terdapat pada emulator yang

berfungsi sebagai simulasi tampilan yang dapat diatur

untuk dapat melihat bagaimana tampilan aplikasi pada

lingkungan tertentu.

Page 51: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

31

b. File info : memberikan informasi tentang nama, ukuran,

versi flash dan dimensi dari suatu file.

c. Content type : memberikan informasi tipe konten aplikasi

yang sedang dijalankan pada emulator.

d. Memory : panel ini memberikan informasi ukuran memori

yang terpakai saat aplikasi dijalankan.

5. Online library: menampilkan semua perangkat yang tersedia

untuk di-download ke dalam local library.

6. Local library : menampilkan perangkat umum flash lite dan

juga menampilkan perangkat mobile yang telah di-download ke

dalam device central dari online library.

2.8. Adobe Photoshop CS4

Adobe Photoshop adalah program pengolah gambar yang

penggunanya sangat luas. Mulai dari membuat gambar animasi, merancang

halaman web, desain grafis (graphic design), persiapan presentasi, editing

foto atau penyuntingan foto. Adobe Photoshop mampu menghasilkan

gambar dengan kualitas tertinggi untuk cetakan web atau yang lainnya.

(Riyanto, 2006)

Page 52: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

32

Gambar 2.7. Area kerja Adobe Photoshop CS4

1. Menu Bar : Berisi semua menu yang disusun berdasarkan

kesamaan tipe, misalnya, semua menu yang berkaitan

dengan layer berada didalam menu layer, yang berkaitan

dengan efek berada dalam menu filter, dan lain-lain.

2. Option Bar : Berisi pilihan tambahan yang berubah sesuai

dengan tool (alat) yang digunakan.

3. Pallete Well : Berisi kumpulan pallete-pallete yang disusun

secara berurutan untuk memudahkan dalam mengakses

pallete yang bersangkutan.

4. Kanvas : Tempat untuk membuat dan mengedit

(mendesain) gambar/foto.

Page 53: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

33

5. Toolbox : Berisi semua tool yang digunakan dalam Adobe

Photoshop CS4

2.9. Nonosoft KHOT 3

Nonosoft KHOT merupakan editor teks Arab yang mempunyai

system penulisan berbeda (tidak kompatibel) dengan sistem Arabic bawaan

Windows, sehingga dokumen yang huruf-huruf Arabnya diketik dengan

menggunakan Nonosoft KHOT tidak bisa diedit oleh editor Arabic semacam

Office Arabic ataupun semua editor yang menggunakan system Unicode

dalam penulisan Arabicnya, begitu pula sebaliknya.

Dengan demikian Nonosoft KHOT tidak memiliki kemampuan

seperti editor yang menggunakan sistem Arabic Unicode, dimana dalam

perubahan bentuk huruf dan format paragraf sepenuhnya diatur oleh

lingkungan Windows. Selain itu sifat tulisan Arabnya tidak universal,

misalnya tidak bisa langsung digunakan pada penulisan huruf arab di

Website atau semua aplikasi online tanpa menyertakan / menginstal font-

font pendukungnya pada komputer user. (Setiawan, 2010)

Page 54: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

34

Gambar 2.8. Area kerja Nonosoft KHOT 3

1. Menu, digunakan untuk pengoperasian dokumen Nonosoft

KHOT (membuat, membuka dan menyimpan) pada media

penyimpanan disk, selain itu juga terdapat pilihan pengaturan

halaman, cetak dokumen dan yang lainnya.

2. Tool, merupakan kumpulan icon yang berfungsi sebagai

shortcut dari perintah-perintah pada program Nonosoft KHOT,

seperti member warna pada teks, merubah jenis huruf, merubah

bahasa penulisan dan lainnya.

3. Status Bar, menyediakan informasi baris dan kolom (dari

sebelah kiri), kondisi penulisan apakah dalam mode Auto

Replace ataukah Manual dan juga kondisi ON – OFF tombol

Caps Lock.

Page 55: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

35

2.10. Literatur Sejenis

Judul : Aplikasi Al-Qur’an Tajwid Berbasis Multimedia Untuk

Membedakan 5 Hukum Nun Mati Dan Tanwin

Jenis Literatur : Skripsi

Penulis : Indra Mastutik

Tahun : 2007

No

.

Hal-hal yang

diperbandingkan Penulis Sebelumnya Penulis Sekarang

1. Tools

Menggunakan

Macromedia Director MX,

Macromedia Flash MX,

Macromedia Fireworks MX,

Adobe Photoshop 7.0

Menggunakan

Adobe Flash CS4,

Adobe Device Central CS4,

Adobe Photoshop CS4,

Adobe Audition 3.0

Nonosoft KHOT 3

2. Penerapan Aplikasi CD interaktif pada

komputer

Perangkat handphone

dengan Flash Lite v. 2.0

3. Hukum Tajwid Hukum nun mati dan tanwin Hukum nun mati dan tanwin

Hukum mim mati

4. Hasil

User dapat membedakan

hukum nun mati dan tanwin

dengan kode warna dengan

media CD yang harus

menggunakan CD player

untuk menjalankannya

User dapat membedakan

hukum nun mati dan tanwin

ditambah mim mati dengan

contoh suara dari qari’ dan

juga contoh ayat yang diberi

tanda warna pada bagian

yang terdapat hukum

tajwidnya dengan media

handphone yang praktis dan

bisa dibawa kemana - mana

Page 56: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

36

Judul : Aplikasi Pembelajaran Tajwid

Jenis Literatur : Skripsi

Penulis : Tri Ismiyani

Tahun : 2009

No

.

Hal-hal yang

diperbandingkan Penulis Sebelumnya Penulis Sekarang

1. Tools

Menggunakan,

Macromedia Flash MX,

Adobe Photoshop CS

Menggunakan

Adobe Flash CS4,

Adobe Device Central CS4,

Adobe Photoshop CS4,

Adobe Audition 3.0

Nonosoft KHOT 3

2. Penerapan Aplikasi CD interaktif pada

komputer

Perangkat handphone

dengan Flash Lite v. 2.0

3. Hukum Tajwid Hukum Nun mati dan

tanwin

Hukum nun mati dan tanwin

Hukum mim mati

4. Hasil

User dapat mempelajari

hukum tajwid dengan

media CD yang harus

menggunakan CD

player untuk

menjalankannya

User dapat mempelajari

hukum tajwid dengan media

handphone yang praktis dan

bisa dibawa kemana - mana

Page 57: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

37

Judul : Belajar Mudah Membaca al-Qur’an

Jenis Literatur : Free Stand Alone Aplication

Penulis : Anonym

Tahun : 2008

No

.

Hal-hal yang

diperbandingkan Penulis Sebelumnya Penulis Sekarang

1. Tools

Menggunakan

Macromedia Flash

Menggunakan

Adobe Flash CS4,

Adobe Device Central CS4,

Adobe Photoshop CS4,

Adobe Audition 3.0

Nonosoft KHOT 3

2. Penerapan Aplikasi Aplikasi stand alone

pada komputer

Perangkat handphone

dengan Flash Lite v. 2.0

3. Hukum Tajwid Hukum Nun Sakinah

dan Tanwin

Hukum nun mati dan tanwin

Hukum mim mati

4. Hasil

User dapat mempelajari

hukum tajwid untuk

membaca al-Qur’an

dengan aplikasi stand

alone yang harus

menggunakan flash

player pada komputer

untuk menjalankannya

User dapat mempelajari

hukum tajwid untuk

membaca al-Qur’an dengan

media handphone yang

praktis dan bisa dibawa

kemana - mana

Page 58: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

38

BAB III

METODOLOGI PENELITIAN

Pada bab ini akan diuraikan tentang tentang metode yang digunakan

penulis dalam penyusunan skripsi.

3.1. Metode Pengumpulan Data

Untuk mendapatkan data serta informasi yang diperlukan, penulis

menggunakan dua metode pengumpulan data untuk mendapatkan

informasi dan kebenaran materi uraian pembahasan.

Metode pengumpulan data yang digunakan dalam pembahasan

skripsi ini sebagai berikut :

3.1.1. Studi Kepustakaan

Metode pengumpulan data dengan studi kepustakaan atau

studi literatur ini dilakukan dengan cara membaca buku karya

Moh. Wahyudi, Ilmu Tajwid Plus, Halim Jaya, Surabaya, 2008,

yang merupakan buku terkait dengan pembelajaran al-Qur’an

dan tajwid, sehingga dapat dijadikan suatu acuan dalam

penulisan skripsi ini.

3.1.2. Kuisioner

Penulis menyebarkan kuisioner kepada 10 pengguna (user).

Kuisioner ini bertujuan untuk mengetahui sejauh mana aplikasi

yang dibuat dapat bermanfaat dan memudahkan para pengguna

yang diantaranya adalah pelajar tahsin dalam mempelajari ilmu

Page 59: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

39

tajwid dan untuk mengetahui apakah aplikasi mobile yang telah

dibuat menarik dan mudah digunakan. Hasil Kuisioner dapat

dilihat pada lampiran IV dan V, halaman 130 dan 132.

3.2. Metode Pengembangan Multimedia

3.2.1. Konsep (Concept)

Tahap konsep (concept) yaitu tahap dimana penulis

menentukan tujuan dari pembuatan aplikasi, termasuk

identifikasi pengguna, macam aplikasi (informasi, media

pembelajaran, hiburan, pelatihan dan lain-lain).

Pada tahap konsep ini, yang penulis lakukan adalah :

1. Menentukan tujuan aplikasi, yaitu sebagai panduan dengan

bentuk mobile application yang memudahkan para pengajar

dan pelajar tahsin, qari’ serta masyarakat umum dalam

belajar dan memahami tajwid.

2. Deskripsi aplikasi, yaitu dengan judul Mobile Application

Ilmu Tajwid, bentuk aplikasi berupa mobile application

dengan audiens Yayasan Subuh.net, dan aplikasi ini dapat

dijalankan pada handphone yang mendukung aplikasi flash

lite versi 2.0.

3.2.2. Perancangan (Design)

Pada tahap ini penulis membuat spesifikasi secara rinci

mengenai arsitektur aplikasi, serta gaya dan kebutuhan material

Page 60: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

40

yang digunakan untuk aplikasi. Spesifikasi yang akan dibuat

berdasarkan pada :

1. Perancangan Storyboard

Storyboard pada aplikasi sebenarnya berjumlah 44

storyboard, tetapi sebagian besar storyboard pada dasarnya

memiliki tampilan yang sama, maka yang diberikan sebagai

contoh sebanyak 12 storyboard, yaitu :

1) Storyboard Opening (Gambar 4.1)

2) Storyboard Intro (Gambar 4.2)

3) Storyboard Menu Utama (Gambar 4.3)

4) Storyboard Huruf Hijaiyah (Gambar 4.4)

5) Storyboard al-Nūn al-Sākinah dan Tanwīn (Gambar 4.5)

6) Storyboard Iżhār (Gambar 4.6)

7) Storyboard Pengertian Iżhār (Gambar 4.7)

8) Storyboard Huruf Iżhār (Gambar 4.8)

9) Storyboard Contoh Iżhār (Gambar 4.9)

10) Storyboard Tentang Aplikasi (Gambar 4.10)

11) Storyboard Bantuan (Gambar 4.11)

12) Storyboard Keluar (Gambar 4.12)

Lengkapnya dapat dilihat pada subbab 4.1.2.1

Page 61: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

41

2. Desain Struktur Navigasi

Aplikasi ini hanya memiliki satu desain struktur

navigasi, hierarchical model, yaitu struktur navigasi Menu

Utama, selengkapnya dapat dilihat pada subbab 4.1.2.2

3. Perancangan Bagan Alur (Flowchart)

Pada aplikasi ini terdapat 13 bagan alur (flowchart),

yaitu :

1) Flowchart Menu Utama

2) Flowchart al-Nūn al-Sākinah dan Tanwin

3) Flowchart al-Mīm al-Sākinah

4) Flowchart Iżhār

5) Flowchart Idgām

6) Flowchart Iqlāb

7) Flowchart Ikhfā

8) Flowchart Iżhār Syafawi

9) Flowchart Idgām Mimi

10) Flowchart Ikhfā Syafawi

11) Flowchart Menu Pilihan al-Nūn al-Sākinah dan Tanwīn,

al-Mīm al-Sākinah

12) Flowchart Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā

13) Flowchart Menu Pilihan Iżhār Syafawi, Idgām Mīmi,

Ikhfā Syafawi

Selengkapnya dapat dilihat pada subbab 4.1.2.3

Page 62: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

42

4. Perancangan Diagram Transisi (State Transition Diagram)

Pada aplikasi ini terdapat 13 state transition

diagram (STD), yaitu :

1) STD Menu Utama

2) STD al-Nūn al-Sākinah dan Tanwīn

3) STD al-Mīm al-Sākinah

4) STD Iżhār

5) STD Idgām

6) STD Iqlāb

7) STD Ikhfā

8) STD Iżhār Syafawi

9) STD Idgām Mīmi

10) STD Ikhfā Syafawi

11) STD Menu Pilihan al-Nūn al-Sākinah dan Tanwīn, al-

Mīm al-Sākinah

12) STD Menu pilihan Iżhār, Idgām, Iqlāb, Ikhfā

13) STD Menu Pilihan Iżhār Syafawi, Idgām Mīmi, Ikhfā

Syafawi

Selangkapnya dapat dilihat pada subbab 4.1.2.4

5. Perancangan Antar Muka (Interface)

Antar muka (interface) pada aplikasi sebenarnya

berjumlah 44 antar muka (interface), tetapi sebagian besar

antar muka (interface) pada dasarnya memiliki tampilan

Page 63: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

43

yang sama, maka yang diberikan sebagai contoh sebanyak

12 antar muka (interface), yaitu :

1) Interface Opening

2) Interface Intro

3) Interface Menu Utama

4) Interface Huruf Hijaiyah

5) Interface al-Nūn al-Sākinah dan Tanwīn

6) Interface Iżhār

7) Interface Pengertian Iżhār

8) Interface Huruf Iżhār

9) Interface Contoh Iżhār

10) Interface Tentang Aplikasi

11) Interface Bantuan

12) Interface Keluar

Selengkapnya dapat dilihat pada subbab 4.1.2.4

3.2.3. Pengumpulan Bahan Material (Material Collecting)

Pada tahap ini penulis melakukan pengumpulan, pembuatan

dan pengeditan data berupa gambar, animasi, audio dan data

yang berhubungan dengan al-Qur’an dan ilmu tajwid.

Pada pembuatan aplikasi terdapat 52 gambar yang berformat

*.JPG dan *.PNG.

Page 64: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

44

Tabel 3.1. Daftar Gambar

bg_contoh_idgam.jpg bg_cth_idgam_bighunnah.jpg

bg_cth_idgam_bilaghunnah.jpg bg_contoh_idgam_mimi.jpg

background_contoh_ikhfa.jpg background_contoh_iqlab.jpg

bg_contoh_izhhar.jpg bg_huruf_hijaiyah.jpg

background_huruf_ikhfa.jpg background_huruf_iqlab.jpg

background_huruf_izhhar.jpg bg_idgam_bighunnah.jpg

bg_idgam_bilaghunnah.jpg background_opening_v2.jpg

background_menu_utama.jpg bg_menu_utama_idgam.jpg

bg_menu_utama_ikhfa.jpg bg_menu_utama_iqlab.jpg

bg_menu_utama_izhhar.jpg bg_menu_utama_mim.jpg

bg_menu_utama_nun.jpg bg_pembagian_idgam.jpg

bg_pengertian_idgam.jpg bg_pengertian_ikhfa.jpg

bg_pengertian_iqlab.jpg bg_pengertian_izhhar.jpg

bg_contoh_ikhfa_syafawi.jpg bg_contoh_izhhar_syafawi.jpg

bg_huruf_idgam_bighunnah.jpg bg_huruf_idgam_bilaghunnah.jpg

bg_huruf_idgam_mimi.jpg bg_huruf_ikhfa_syafawi.jpg

bg_huruf_izhhar_syafawi.jpg bg_idgam_mimi.jpg

bg_mc_keluar_small_half_v2.jpg bg_menu_utama_ikhfa_syafawi.jpg

bg_menu_utama_izhhar_syafawi.jpg bg_pengertian_idgam_mimi.jpg

bg_pengertian_ikhfa_syafawi.jpg bg_pengertian_izhhar_syafawi.jpg

bg_tentang_aplikasi.jpg button.png

Page 65: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

45

button_hover.png button_submenu2.png

button_submenu2_hover2.png button_submenu3.png

button_submenu3_hover.png button_submenu3_hover_v2.png

button_submenu3_v2.png logo_subuhnet.png

bg_intro.jpg bg_bantuan.jpg

Pada pembuatan aplikasi ini terdapat 60 audio yang berformat

*.MP3

Tabel 3.2. Daftar Audio

Bismillah.mp3 'Abasa_2.mp3

'Abasa_17.mp3 al-Balad_15.mp3

al-Fajr_21.mp3 al-Fajr_22.mp3

al-Gasyiyah_6.mp3 al-Gasyiyah_12.mp3

al-Infitar_19.mp3 al-Insan_26.mp3

al-Kahf_74.mp3 al-Lail_3.mp3

al-Lail_14.mp3 al-Ma'un_5.mp3

al-Mulk_27.mp3 al-Mutaffifin_31.mp3

an-Naba'_14.mp3 an-Naba'_18.mp3

an-Naba'_40.mp3 an-Naba'_40_dzo.mp3

an-Naba'_40_ta.mp3 an-Najm_22.mp3

an-Nazi'at_12.mp3 an-Nazi'at_37.mp3

al-Insyiqaq_1.mp3 an-Nazi'at_43.mp3

asy-Syams_9.mp3 asy-Syams_10.mp3

at-Takwir_28.mp3 at-Tariq_13.mp3

Page 66: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

46

az-Zukhruf_17.mp3 al-Humazah_4.mp3

'Abasa_13.mp3 'Abasa_37.mp3

al-Buruj_20.mp3 al-Gasyiyah_8.mp3

al-Insyiqaq_14.mp3 al-Mutaffifin_15.mp3

an-Naba'_13.mp3 an-Naba'_30.mp3

an-Naziat_33.mp3 an-Nazi'at_36.mp3

at-Takwir_25.mp3 at-Tariq_6.mp3

'Abasa_18.mp3 'Abasa_18_kho.mp3

al-Bayyinah_8.mp3 al-Haqqah_36.mp3

al-Insyiqaq_25.mp3 al-Kausar_2.mp3

al-Mutaffifin_5.mp3 al-Qadr_5.mp3

an-Naba'_29.mp3 an-Naba'_36_izhhar.mp3

an-Nazi'at_33.mp3 at-Takwir_27.mp3

al-Adiyat_11.mp3 al-Humazah_8.mp3

al-Bayyinah_8_izhhar_syafawi.mp3 an-Naba'_3.mp3

Pada aplikasi ini terdapat 1 animasi, yaitu “tap screen untuk

masuk”.

Bahan-bahan yang digunakan untuk kebutuhan aplikasi,

diperoleh melalui membuat sendiri dengan menggunakan

beberapa program, seperti, Adobe Flash CS4, Adobe Photoshop

CS4, Adobe Audition 3.0, Nonosoft KHOT 3, namun ada

beberapa bahan yang diperoleh melalui internet dan buku-buku

yang terkait dengan al-Qur’an dan tajwid yang kemudian diolah

Page 67: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

47

menggunakan program yang telah disebutkan sebelumnya,

untuk buku-buku yang penulis gunakan, secara lengkap dapat

dilihat pada daftar pustaka.

3.2.4. Pembuatan (Assembly)

Tahap pembuatan (assembly) merupakan tahap dimana

seluruh obyek multimedia akan dibuat. Pembuatan aplikasi

berdasarkan storyboard, flowchart, struktur navigasi, state

transition diagram dan perancangan antarmuka. Pada tahap ini

software yang akan digunakan untuk membangun aplikasi

adalah Adobe Flash CS4, Adobe Photoshop CS4, Nonosoft

KHOT 3 dan Adobe Audition 3.0.

Pada Adobe Flash CS4 penulis menggunkan fitur yang

terdapat didalamnya yaitu, layer, frame, keyframe, actionscript,

blank keyframe, dan juga beberapa menu seperti open file, save,

import, dan test movie. Pada Adobe Photoshop CS4, penulis

menggunakan fitur layer, text tools, dan effect, Pada Nonosoft

KHOT 3, penulis menggunakan fitur text tools, untuk membuat

tulisan arab. Pada Adobe Audition 3.0, penulis menggunakan

fitur selecting, cutting, deleting dan converting audio.

Spesifikasi minimum dalam pembuatan aplikasi ini adalah,

menggunakan software Adobe Flash CS3, Adobe Device

Central CS3, Adobe Photoshop 7, dan Adobe Audition 1.5.

Page 68: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

48

Perangkat handphone yang dapat digunakan untuk

menjalankan aplikasi ini harus memiliki spesifikasi minimal

seperti :

Spesifikasi Keterangan

Layar 360x640 pixel

OS Symbian Versi 60

Flash Lite Versi Flash Lite 2.0

Memori Kosong 5 Megabyte

Memory Internal 64 RAM

3.2.5. Pengujian (Testing)

Tahap pengujian ini dilakukan setelah selesai tahap

pembuatan dan seluruh data telah dimasukkan. Pada tahap ini

penulis melakukan pengujian kepada ibu Dra. Halimah SM,

MAg. selaku dosen Praktikum Ibadah dan Tilawah Fakultas

Dakwah dan Ushuluddin UIN Syarif Hidayatullah Jakarta, dan

juga kepada bapak Kuswanto, selaku Koordinator Bidang

Kajian Islam Yayasan Subuh.net.

Penulis melakukan pengujian dengan dua tahap, tahap

pertama dilakukan pada lingkungan emulator dan tahap kedua

diterapkan pada perangkat (device) sebenarnya, yaitu pada

handphone. Cara pengujian pada lingkungan emulator

menggunakan software Adobe Device Central CS4, yang dapat

menampilkan bentuk handphone sebenarnya beserta

Page 69: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

49

spesifikasinya dengan membuka file hasil dari test movie pada

Adobe Flash CS4, untuk melihat apakah aplikasi sudah berjalan

dengan benar.

Pengujian pada handphone penulis lakukan dengan cara

mentransfer file aplikasi dari komputer ke handphone dan

menjalankannya, dapat dilihat pada subbab 4.1.5

3.2.6. Distribusi (Distribution)

Pada tahap distribusi ini dilakukan implementasi serta

evaluasi terhadap aplikasi multimedia. Dalam hal ini penulis

melakukan distribusi kepada Yayasan Subuh.net, adapun pihak

Yayasan yang selanjutnya berwenang untuk meneruskan kepada

para pengajar dan pelajar tahsin, qari’ dan juga masyarakat

umum.

3.3. Kerangka Pikir

Kerangka pikir dalam pembuatan aplikasi ini digambarkan pada diagram

berikut ini,

Page 70: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

50

Media Pembelajaran Ilmu Tajwid

Permasalahan

Sulit membedakan hukum-hukum al-nūn al-sākinah,

tanwin dan al-mīm al-sākinah

Sulit mengetahui cara membaca ayat yang didalamnya terdapat

hukum tajwid

Adanya keterbatasan waktu, tempat dan

tidak paraktis

Solusi

Media pembelajaran interaktif dengan

memberikan warna pada ayat yang terdapat hukum

tajwid

Media pembelajaran interaktif dengan memberi

contoh cara membaca ayat yang didalamnya terdapat hukum tajwid

dengan suara

Media pembelajaran interaktif dlm bentuk CD

(Comppact Disk), website, dan perangkat gadged

Kekurangan

Aplikasi pembelajaran yang ada, masing-masing memiliki kelebihan dan kekurangan, terutama adanya

keternatasan waktu dan tempat

Solusi

Menggabungkan teknik dari masing-masing media pembelajaran yang telah ada

1. Adanya media pembelajaran yang praktis dengan fitur yang lengkap

2. Bisa dibawa kemana-mana (mobile)3. Hanya menggunakan satu perangkat

4. Tanpa terbatas waktu dan tempat

Hasil

Aplikasi Mobile

Gambar 3.1. Kerangka pikir pembuatan aplikasi

Page 71: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

51

BAB IV

HASIL DAN PEMBAHASAN

4.1. Metode Pengembangan Multimedia

4.1.1. Konsep (Concept)

Aplikasi mobile tajwid berbasis multimedia ini berbentuk aplikasi

mobile yang akan digunakan sebagai salah satu panduan agar para

pengajar dan pelajar tahsin serta para qari’ dan juga masyarakat luas,

khususnya umat Islam lebih mudah dalam menentukan dan mempelajari

hukum tajwid, khusunya untuk hukum al-Nūn al-Sākinah dan tanwin

beserta hukum al-Mīm al-Sākinah yang jumlahnya cukup banyak dalam

setiap ayat al-Qur’an.

Aplikasi ini juga disertai dengan panduan suara dari seorang

qari’, dan juga memberikan tanda warna pada bagian yang terdapat

hukum tajwid pada contoh ayat-ayatnya, hal ini akan membuat orang

yang ingin mempelajari tajwid lebih terfokus untuk menerapkan hukum

bacaan tersebut, sehingga dapat langsung menerapkannya dalam

membaca al-Qur’an secara benar sesuai ilmu tajwid.

Deskripsi konsep aplikasi adalah sebagai berikut :

Judul

: Aplikasi Mobile Ilmu Tajwid Berbasis

Multimedia

Page 72: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

52

Audiens : Yayasan Subuh.net, umum yaitu para pengajar,

pelajar tahsin, qari’ dan orang yang ingin belajar

tajwid

Bentuk Aplikasi : Mobile Application

Gambar : Menggunakan file berformat JPEG dan PNG

yang dibuat dan di edit menggunakan software

Adobe Photoshop CS4

Audio : Suara Murottal al-Qur’an Syech Sa’ad Al

Ghomidy, yang berformat MP3 yang di edit

dengan menggunakan software Adobe Audition

3.0

Animasi : Animasi teks, tombol dan gambar di buat sendiri

dengan menggunakan software Adobe Flash CS4

Interaktif : Menggunakan link, baik berupa tombol, gambar,

maupun teks yang memungkinkan pengguna

menuju halaman yang diinginkan

4.1.2. Perancangan (Design)

Tahap ini merupakan tahap perancangan aplikasi, dimana

perancangan tersebut berupa perancangan storyboard, perancangan

flowchart, perancangan struktur navigasi, perancangan diagram transisi

Page 73: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

53

atau STD (State Transition Diagram), dan perancangan antarmuka

pengguna (user interface).

4.1.2.1. Perancangan Storyboard

Storyboard merupakan deskripsi dari tiap scene

(tampilan), dengan mencantumkan semua obyek multimedia

dan link ke scene lain (Suyanto : 2003)

Adapun rancangan storyboard untuk tampilan aplikasi

mobile tajwid berbasis multimedia ini adalah :

Storyboard Opening

Modul : 1

Halaman : Opening

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : opening

Gambar :

background_opening_v2.jpg,

logo_suguhnet.png

Animasi : Teks

Audio : -

Page 74: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

54

Navigasi

Tap Screen/Enter : Masuk ke Intro

Notes : Halaman Opening merupakan halaman pembuka, pada

halaman ini terdapat satu tombol untuk masuk ke halaman

Intro

Gambar 4.1. Storyboard Opening

Storyboard Intro

Modul : 2

Halaman : Intro

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : intro

Gambar : bg_intro.jpg

Animasi : -

Audio : bismillah.mp3

Navigasi

-

Notes : Halaman Intro merupakan halaman pembuka kedua setelah halaman

Page 75: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

55

Opening

Gambar 4.2. Storyboard Intro

Storyboard Menu Utama

Modul : 3

Halaman : Menu Utama

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : menu_utama

Gambar :

background_menu_utama.jpg,

button_submenu2.png, button.png

Animasi : -

Audio : -

Navigasi

Huruf Hijaiyah : Untuk menuju halaman menu Huruf Hijaiyah

al-Nūn al-Sākinah

dan Tanwin : Untuk menuju halaman menu al-Nūn al-Sākinah dan

Tanwin

Page 76: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

56

al-Mīm al-Sākinah : Untuk menuju halaman menu al-Mīm al-Sākinah

Pilihan : Untuk menampilkan menu Pilihan

Kembali : Untuk kembali menuju halaman Intro

Notes : Halaman Menu Utama merupakan halaman pertama

dari aplikasi ini, dimana pada halaman ini terdapat 3

tombol untuk menuju ke menu berikutnya, 1 tombol

untuk kembali ke halaman intro dan 1 tombol lagi

untuk menampilkan menu Pilihan yaitu, “Bantuan”,

“Tentang Aplikasi”, dan “Keluar”

Gambar 4.3. Storyboard Menu Utama

Storyboard Huruf Hijaiyah

Modul : 4

Halaman : Huruf Hijaiyah

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 2

Scene : huruf_hijaiyah

Gambar : bg_huruf_hijaiyah.jpg,

button_submenu2.png, button.png

Animasi : -

Page 77: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

57

Audio : -

Navigasi

Pilihan : Untuk menampilkan menu PIlihan

Lanjut : Untuk menuju halaman Huruf Hijaiyah selanjutnya

Notes : Pada halaman ini terdapat huruf-huruf hijaiyah berupa teks arab, dan

terdapat 2 tombol, 1 tombol untuk melanjutkan ke halaman Huruf

Hijaiyah berikutnya dan 1 tombol lagi untuk menampilkan menu

Pilihan yaitu, “Menu Utama”, “Bantuan”, “Tentang Aplikasi”, dan

“Keluar”

Gambar 4.4. Storyboard Huruf Hijaiyah

Storyboard al-Nūn al-Sākinah dan Tanwin

Modul : 5

Halaman : al-Nūn al-Sākinah dan

Tanwin

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : menu_utama_nun

Gambar :

Page 78: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

58

bg_menu_utama_nun.jpg,

button_submenu2.png, button.png

Animasi : -

Audio : -

Navigasi

Iżhār : Untuk menuju halaman Iżhār

Idgām : Untuk menuju halaman Idgām

Iqlāb : Untuk menuju halaman Iqlāb

Ikhfā : Untuk menuju halaman Ikhfā

Pilihan : Untuk menampilkan menu Pilihan

Kembali : Untuk kembali menuju halaman Menu Utama

Notes : Pada halaman ini terdapat 4 tombol untuk menuju menu

berikutnya,yaitu halaman Iżhār, Idgām, Iqlāb, Ikhfā , 1 tombol untuk

kembali ke Menu Utama dan 1 tombol untuk menampilkan menu

Pilihan, yaitu, “Menu Utama”, “Bantuan”, “Tentang Aplikasi”, dan

“Keluar”

Gambar 4.5. Storyboard al-Nūn al-Sākinah dan Tanwin

Page 79: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

59

Storyboard Iżhār

Modul : 6

Halaman : Iżhār

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 9

Scene : izhhar

Gambar :

bg_menu_utama_izhhar.jpg,

button_submenu2.png, button.png,

button_submenu3.png

Animasi : -

Audio : -

Navigasi

Pengertian Iżhār : Untuk menuju halaman Pengertian Iżhār

Huruf & Contoh Iżhār : Untuk menuju halaman Huruf Iżhār

Pilihan : Untuk menampilkan menu Pilihan

Kembali : Untuk kembali menuju halaman al-Nūn al-Sākinah

dan Tanwin

Notes : Pada halaman ini terdapat 2 tombol untuk masuk ke

Page 80: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

60

halaman berikutnya, yaitu, halaman Pengertian Iżhār

dan halaman Huruf Iżhār, 1 tombol untuk kembali ke

halaman al-Nūn al-Sākinah dan Tanwin dan 1 tombol

untuk menampilkan menu Pilihan, yaitu “al-Nūn al-

Sākinah dan Tanwin”, “Menu Utama”, “Bantuan”,

“Tentang Aplikasi”, dan “Keluar”.

Gambar 4.6. Storyboard Iżhār

Storyboard Pengertian Iżhār

Modul : 7

Halaman : Iżhār

Nama File : mobile_tajwid.fla

Frame No. : 2 dari 9

Scene : izhhar

Gambar :

bg_pengertian_izhhar.jpg, button.png

Animasi : -

Audio : -

Page 81: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

61

Navigasi

Pilihan : Untuk menampilkan menu Pilihan

Kembali : Untuk kembali menuju halaman Iżhār

Notes : Pada halaman ini terdapat definisi Iżhār dan terdapat 2 tombol, 1

tombol untuk kembali ke halaman Iżhār dan 1 tombol untuk

menampilkan menu Pilihan, yaitu “al-Nūn al-Sākinah dan Tanwin”,

“Menu Utama”, “Bantuan”, “Tentang Aplikasi”, dan “Keluar”.

Gambar 4.7. Storyboard Pengertian Iżhār

Storyboard Huruf Iżhār

Modul : 8

Halaman : Iżhār

Nama File : mobile_tajwid.fla

Frame No. : 3 dari 9

Scene : izhhar

Gambar :

background_huruf_izhhar.jpg, button.png

button_submenu2.png

Animasi : -

Page 82: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

62

Audio : -

Navigasi

Huruf Iżhār : Untuk menuju halaman Contoh Iżhār

Pilihan : Untuk menampilkan menu Pilihan

Kembali : Untuk kembali menuju halaman Iżhār

Notes : Pada halaman ini terdapat huruf-huruf iżhār yang merupakan tombol

untuk menuju halaman Contoh Iżhār dan terdapat 2 tombol, 1 tombol

untuk kembali ke halaman Iżhār dan 1 tombol untuk menampilkan

menu Pilihan, yaitu “al-Nūn al-Sākinah dan Tanwin”, “Menu

Utama”, “Bantuan”, “Tentang Aplikasi”, dan “Keluar”.

Gambar 4.8. Storyboard Huruf Iżhār

Page 83: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

63

Storyboard Contoh Iżhār

Modul : 9

Halaman : Iżhār

Nama File : mobile_tajwid.fla

Frame No. : 4 dari 9

Scene : izhhar

Gambar : bg_contoh_izhhar.jpg,

button.png,

button_submenu2.png

Animasi : -

Audio : -

Navigasi

Baca : Untuk memainkan suara bacaan contoh ayat

Pilihan : Untuk menampilkan menu Pilihan

Kembali : Untuk kembali menuju halaman Huruf Iżhār

Notes : Pada halaman ini terdapat ayat-ayat contoh iżhār dan terdapat 1

tombol Baca untuk setiap ayat yang berfungsi untuk memainkan

suara bacaan contoh ayat dan terdapat 2 tombol, 1 tombol untuk

kembali ke halaman Huruf Iżhār dan 1 tombol untuk menampilkan

Page 84: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

64

menu Pilihan, yaitu “al-Nūn al-Sākinah dan Tanwin”, “Menu

Utama”, “Bantuan”, “Tentang Aplikasi”, dan “Keluar”.

Gambar 4.9. Storyboard Contoh Iżhār

Storyboard Tentang Aplikasi

Modul : 10

Halaman : Tentang Aplikasi

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : -

Gambar : bg_tentang_aplikasi.jpg,

button.png,

Animasi : -

Audio : -

Navigasi

Tutup : Untuk menutup halaman Tentang Aplikasi

Notes : Pada halaman ini terdapat keterangan judul aplikasi, versi aplikasi,

nama pembuat, nama qari’, tools-tools yang digunakan dan terdapat 1

Page 85: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

65

tombol untuk menutup halaman Tentang Aplikasi.

Gambar 4.10. Storyboard Tentang Aplikasi

Storyboard Bantuan

Modul : 11

Halaman : Bantuan

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : -

Gambar : bg_bantuan.jpg,

button.png,

Animasi : -

Audio : -

Navigasi

Tutup : Untuk menutup halaman Tentang Aplikasi

Notes : Pada halaman ini terdapat panduan untuk menjalankan aplikasi dan

terdapat 1 tombol untuk menutup halaman Bantuan.

Gambar 4.11. Storyboard Bantuan

Page 86: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

66

Storyboard Keluar

Modul : 12

Halaman : Keluar

Nama File : mobile_tajwid.fla

Frame No. : 1 dari 1

Scene : -

Gambar :

bg_mc_keluar_small_half_v2.jpg,

button.png,

Animasi : -

Audio : -

Navigasi

Ya : Untuk menutup dan keluar dari aplikasi

Tidak : Untuk tetap menjalankan aplikasi

Notes : Pada halaman ini terdapat sebuah pertanyaan untuk menentukan

pilihan, dan terdapat 2 tombol, yaitu “Ya” dan “Tidak”

Gambar 4.12. Storyboard Keluar

Page 87: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

67

4.1.2.2. Perancangan Struktur Navigasi

Gambar 4.13. Struktur Navigasi Menu Utama

Page 88: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

68

4.1.2.3. Perancangan Flowchart

Gambar 4.14. Flowchart Menu Utama

Page 89: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

69

Gambar 4.15. Flowchart al-Nūn al-Sākinah dan Tanwin

Page 90: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

70

Gambar 4.16. Flowchart al-Mīm al-Sākinah

Page 91: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

71

Gambar 4.17. Flowchart Iżhār

Page 92: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

72

Gambar 4.18. Flowchart Idgām

Page 93: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

73

Gambar 4.19. Flowchart Iqlāb

Page 94: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

74

Gambar 4.20. Flowchart Ikhfā

Page 95: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

75

Gambar 4.21. Flowchart Iżhār Syafawi

Page 96: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

76

Gambar 4.22. Flowchart Idgām Mimi

Page 97: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

77

Gambar 4.23. Flowchart Ikhfā Syafawi

Page 98: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

78

Gambar 4.24. Flowchart Menu Pilihan al-Nūn al-Sākinah, Tanwin,

dan al-Mīm al-Sākinah

Page 99: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

79

Gambar 4.25. Flowchart Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā

Page 100: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

80

Gambar 4.26. Flowchart Menu Pilihan Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi

Page 101: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

81

4.1.2.4. Perancangan STD (State Transition Diagram)

Gambar 4.27. STD Menu Utama

Page 102: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

82

Gambar 4.28. STD al-Nūn al-Sākinah dan Tanwin

Page 103: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

83

Gambar 4.29. STD al-Mīm al-Sākinah

Page 104: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

84

Gambar 4.30. STD Iżhār

Page 105: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

85

Gambar 4.31. STD Idgām

Page 106: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

86

Gambar 4.32. STD Iqlāb

Page 107: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

87

Gambar 4.33. STD Ikhfā

Page 108: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

88

Gambar 4.34. STD Iżhār Syafawi

Page 109: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

89

Gambar 4.35. STD Idgām Mimi

Page 110: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

90

Gambar 4.36. STD Ikhfā Syafawi

Page 111: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

91

Gambar 4.37. STD Menu Pilihan al-Nūn al-Sākinah dan Tanwin, al-Mīm al-Sākinah

Page 112: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

92

Gambar 4.38. STD Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā

Page 113: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

93

Gambar 4.39. STD Menu Pilihan Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi

Page 114: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

94

4.1.2.5. Perancangan Antarmuka (Interface)

Rancangan antarmuka yang ditampilkan pada aplikasi

Mobile Tajwid berbasis multimedia ini disesuaikan dengan

kebutuhan dan pengetahuan pengguna, tujuannya agar dapat

memudahkan pengguna untuk mendapatkan panduan dan juga

informasi yang dibutuhkan.

Pada aplikasi Mobile Tajwid berbasis multimedia ini

secara umum terdapat 12 tampilan, yaitu :

1. Tampilan Opening

Tampilan Opening merupakan tampilan awal

ketika aplikasi pertama kali dijalankan, pada tampilan ini

terdapat animasi teks yang berisi perintah untuk menekan

atau menyentuh layar agar dapat masuk ke tampilan

selanjutnya yaitu tampilan Intro.

Gambar 4.40. Tampilan Opening

Page 115: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

95

2. Tampilan Intro

Tampilan Intro merupakan tampilan yang

muncul setelah tampilan Opening, setelah menekan atau

menyentuh layar, pada tampilan ini terdapat potongan ayat

dari surat Al-Muzzammil ayat 4 dan terdapat suara

pengucapan Basmallah.

Gambar 4.41. Tampilan Intro

3. Tampilan Menu Utama

Tampilan Menu Utama ini merupakan tampilan

yang paling utama dari aplikasi Mobile Tajwid, pada

tampilan ini terdapat beberapa tombol navigasi yang

menghubungkan ke tampilan menu berikutnya, yaitu ke

tampilan menu Huruf Hijaiyah, al-Nūn al-Sākinah dan

Tanwin, serta tampilan menu al-Mīm al-Sākinah, pada

Page 116: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

96

tampilan ini juga terdapat tombol navigasi untuk kembali

ke tampilan sebelumnya, yaitu tampilan Intro dan juga

tombol Pilihan yang didalamnya terdapat beberapa tombol

lagi, seperti tombol Bantuan, Tentang Aplikasi, dan tombol

Keluar untuk keluar dari aplikasi.

Gambar 4.42. Tampilan Menu Utama

4. Tampilan Huruf Hijaiyah

Pada tampilan Huruf Hijaiyah ini berisi

informasi mengenai huruf-huruf hijaiyah yang terdapat

dalam al-Qur’an, dan juga terdapat 2 tombol navigasi yaitu,

tombol Kembali, untuk kembali ke tampilan Menu Utama,

dan tombol Pilihan, yang terdiri dari beberapa tombol

navigasi di dalamnya seperti, tombol Menu Utama,

Page 117: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

97

Bantuan, Tentang Aplikasi dan tombol Keluar untuk keluar

dari aplikasi

Gambar 4.43. Tampilan Huruf Hijaiyah

5. Tampilan al-Nūn al-Sākinah dan Tanwin

Pada tampilan al-Nūn al-Sākinah dan Tanwin

ini terdapat tombol-tombol untuk menuju ke tampilan

hukum-hukum al-Nūn al-Sākinah dan Tanwin, yaitu

tombol Iżhār, Idgām, Iqlāb, dan Ikhfā, serta terdapat juga

tombol untuk kembali ke Menu Utama dan tombol Pilihan

yang sama dengan Menu Utama.

Page 118: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

98

Gambar 4.44. Tampilan al-Nūn al-Sākinah dan Tanwin

6. Tampilan Iżhār

Pada tampilan Iżhār ini terdapat beberapa

tombol navigasi untuk menuju ke tampilan berikutnya yang

masih berhubungan dengan Iżhār, seperti Pengertian Iżhār

serta Huruf dan Contoh Iżhār pada tampilan ini juga

terdapat tombol untuk kembali ke tampilan al-Nūn al-

Sākinah dan Tanwin dan tombol Pilihan yang didalamnya

terdapat beberapa tombol yang sedikit berbeda dari tombol

Pilihan pada tampilan sebelumnya, yaitu, Tombol al-Nūn

al-Sākinah dan Tanwin,yang berfungsi untuk kembali ke

tampilan al-Nūn al-Sākinah dan Tanwin.

Page 119: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

99

Gambar 4.45. Tampilan Iżhār

7. Tampilan Pengertian Iżhār

Pada tampilan Pengertian Iżhār terdapat

informasi mengenai definisi Iżhār dan juga terdapt tombol

untuk kembali ke tampilan Iżhār dan tambol Pilihan yang

sama dengan tombol Pilihan pada tampilan Iżhār.

Gambar 4.46. Tampilan Pengertian Iżhār

Page 120: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

100

8. Tampilan Huruf Iżhār

Pada tampilan Huruf Iżhār ini berisikan

informasi huruf-huruf Iżhār yang juga merupakan tombol

navigasi menuju ke tampilan Contoh Iżhār, dengan

menekan atau menyentuh salah satu huruf yang diinginkan

untuk menampilkan contohnya, pada tampilan ini juga

terdapat tombol untuk kembali ke tampilan Iżhār dan

tombol pilihan yang sama dengan tombol pilihan pada

tampilan Iżhār.

Gambar 4.47. Tampilan Huruf Iżhār

9. Tampilan Contoh Iżhār

Pada tampilan Contoh Iżhār ini terdapat contoh-

contoh ayat yang didalamnya terdapat hukum Iżhār yang

diberi tanda warna kuning pada huruf yang dimaksud dan

Page 121: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

101

juga terdapat tombol Baca yang berfungsi untuk

mengeluarkan suara cara membaca ayat tersebut, pada

tampilan contoh Iżhār ini juga terdapat tombol untuk

kembali ke tampilan Huruf Iżhār untuk memilih huruf yang

lain yang akan ditampilkan contohnya, dan juga tombol

pilihan yang sama dengan tombol Pilihan pada tampilan

Iżhār.

Gambar 4.48. Tampilan Contoh Iżhār

10. Tampilan Tentang Aplikasi

Tampilan Tentang Aplikasi ini berisikan

informasi mengenai judul aplikasi, versi aplikasi, pembuat

aplikasi, qari’, dan tools-tools yang digunakan dalam

pembuatan aplikasi, pada tampilan ini juga terdapat tombol

Tutup untuk menutup Tampilan Tentang Aplikasi.

Page 122: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

102

Gambar 4.49. Tampilan Tentang Aplikasi

11. Tampilan Bantuan

Pada tampilan Bantuan ini terdapat informasi

panduan untuk menggunakan aplikasi seperti penggunaan

tombol navigasi dan yang lainnya.

Gambar 4.50. Tampilan Bantuan

Page 123: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

103

12. Tampilan Keluar

Tampilan Keluar ini muncul ketika tombol

Keluar di tekan, tampilan Keluar ini berisikan pesan untuk

meyakinkan pengguna apakah memang mau keluar dan

menutup aplikasi atau tidak.

Gambar 4.51. Tampilan Keluar

4.1.3. Pengumpulan Bahan Material (Material Collecting)

Bahan-bahan yang diperlukan untuk membangun aplikasi ini,

baik berupa file gambar, teks, animasi, audio dan kontrol navigasi

diperoleh dari berbagai sumber, tetapi sebagian besar bahan dibuat

sendiri menggunakan software image editing dan programming, text

editing serta audio editing.

Page 124: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

104

4.1.3.1. Gambar

File gambar untuk background penulis ambil dari

internet yang kemudian diolah menggunakan aplikasi Adobe

Photoshop CS4, dengan menambahkan beberapa efek dan

gambar lain di dalamnya.

4.1.3.2. Teks

File teks untuk isi materi tajwid dipeoleh dari beberapa

buku pembahasan al-Qur’an dan tajwid, sedangkan untuk teks

tulisan arab dan ayat-ayatnya dibuat sendiri oleh penulis

dengan menggunakan aplikasi Nonosoft KHOT 3, dengan

melihat dan mencontoh ayat-ayat yang ada di dalam al-Qur’an

dan buku pembahasan tajwid.

4.1.3.3. Animasi

Animasi yang ada pada aplikasi ini hanya berupa

animasi teks yang diolah menggunakan aplikasi Adobe Flash

CS4 untuk menganimasikannya.

4.1.3.4. Audio

File suara pada aplikasi ini penulis peroleh dari koleksi

pribadi, berupa CD Murottal al-Qur’an oleh Syech Sa’ad Al

Ghomidy, baik suara pengucapan Basmallah pada intro

maupun pengucapan contoh-contoh ayat untuk hukum-hukum

tajwid yang diolah menggunakan aplikasi Adobe Audition 3.0.

Page 125: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

105

4.1.3.5. Kontrol Navigasi

Kontrol navigasi pada aplikasi ini berupa tombol-

tombol (button) yang didalamnya terdapat link-link yang

menghubungkan antara halaman yang satu ke halaman yang

lainnya, tombol navigasi tersebut penulis buat sendiri dengan

menggunakan aplikasi Adobe Photoshop CS4 dan Adobe Flash

CS4.

4.1.4. Pembuatan (Assembly)

Pada tahap pembuatan (assembly) ini semua bahan-bahan

berupa elemen-elemen multimedia dikumpulkan dan diintegrasikan

menjadi satu menggunakan aplikasi Adobe Flash CS4. Pada aplikasi

Adobe Flash CS4 dilakukan pengkodean dengan bahasa pemrograman

flash yaitu berupa actionscript 2.0 dengan acuan pemrograman untuk

flash lite 2.0, yang pada akhirnya akan menghasilkan aplikasi dalam

bentuk file berformat SWF Movie (.swf) atau file yang dapat dijalankan

menggunakan flash lite player. Aplikasi ini menggunakan layar dengan

ukuran 640x360 pixel dengan tampilan fullscreen.

Dalam pembuatan aplikasi Mobile Tajwid ini, menggunakan

perangkat keras (hardware) dan perangkat lunak (software) dengan

spesifikasi sebagai berikut,

Page 126: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

106

Tabel 4.1. Spesifikasi hardware dan Software

Spesifikasi Keterangan

Processor AMD Athlon 64 X2 2.0 GHz

Memory RAM 2 GB

Harddisk 512 GB

VGA 1 GB

Sistem Operasi / OS Windows XP SP3

Software 1. Adobe Flash CS4

2. Adobe Photoshop CS4

3. Adobe Audition 3.0

4. Adobe Device Central CS4

5. Nonosoft KHOT 3

Monitor 17” Wide Screen, 1440x900 pixel

Media Koneksi Bluetooth Device

Perangkat Lainnya 1. Keyboard

2. Mouse

3. Sound Card

4. Active Speaker

Page 127: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

107

Setelah semua spesifikasi perangkat keras (hardware) dan

perangkat lunak (software) dipenuhi, maka tahap selanjutnya adalah

tahap pembuatan aplikasi dengan menggunakan perangkat lunak

(software) yang telah disiapkan. Beberapa tahapan penting dalam

pembuatan aplikasi Mobile Tajwid ini akan dibahas sebagai berikut.

Langkah awal yang penulis lakukan adalah membuat gambar untuk

background aplikasi, yang selanjutnya diteruskan dengan pembuatan

gambar-gambar yang lain menggunakan aplikasi Adobe Photoshop CS4.

Gambar 4.52. Pembuatan Gambar Background Aplikasi menggunakan

Adobe Photoshop CS4

Setelah gambar background telah selesai dibuat sesuai

keinginan, dan di save dengan format *.jpg, maka langkah selanjutnya

yang penulis lakukan adalah dengan membuat gambar untuk tombol-

Page 128: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

108

tombol navigasi, seperti tombol-tombol pada Menu Utama, tombol-

tombol submenu 1, submenu 2, tombol Kembali, tombol Pilihan dan

tombol-tombol yang ada di dalam menu Pilihan, semua tombol dibuat

oleh penulis dengan menggunakan aplikasi Adobe Photoshop CS4, yang

kemudian di save dengan format *.png dan selanjutnya dianimasikan

dengan menggunakan apliksi Adobe Flash CS4

Gambar 4.53. Pembuatan Tombol Navigasi

Page 129: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

109

Gambar 4.54. Pembuatan Tombol Navigasi Menu Utama dan Submenu 1

Gambar 4.55. Pembuatan Tombol Navigasi Submenu 2

Page 130: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

110

Langkah berikutnya yang penulis lakukan adalah bekerja

dengan menggunakan aplikasi Adobe Flash CS4 untuk membuat

tampilan dan halaman-halaman menu aplikasi mulai dari tampilan

opening, intro, halaman Menu Utama dan halaman-halaman menu

lainnya serta menambahkan elemen-elemen pendukung seperti,

menambahkan teks arab, ayat-ayat al-Qur’an, audio, serta memasukkan

actionscript.

Pembuatan tampilan Opening dan tampilan Intro kurang lebih

sama, yang berbeda hanya pada content dan tata letaknya, pada tampilan

halaman Opening ini penulis memasukkan content berupa teks untuk

judul aplikasi, teks berupa perintah yang dianimasikan dengan salah satu

teknik animasi tweened yaitu animasi alpha serta gambar untuk

background dan gambar logo, penulis juga memberikan actionscript

yang ditempatkan pada frame agar ketika aplikasi dijalankan dan

pengguna menekan atau menyentuh layar, aplikasi secara otomatis

langsung berpindah ke tampilan Intro, yang selanjutnya langsung masuk

ke halaman Menu Utama,

Page 131: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

111

Gambar 4.56. Pembuatan Tampilan Opening

Selanjutnya penulis masuk ke tahap pembuatan tampilan

halaman Menu Utama, untuk pembuatan tampilan halaman Menu

Utama, Menu al-Nūn al-Sākinah dan Tanwin, al-Mīm al-Sākinah,huruf

Iżhār, Idgām, Iqlāb, Ikhfā serta menu huruf Iżhār Syafawi, Idgām Mimi,

Ikhfā Syafawi, secara garis besar pembuatannnya sama, yang sedikit

membedakan adalah ukuran tombol yang ada teks arabnya lebih kecil

daripada tombol Menu Utama, untuk menambahkan teks arab pada

halaman ini, penulis menggunakan aplikasi Nonosoft KHOT 3, dengan

cara mengcopy hasil dari ketikan pada aplikasi Nonosoft KHOT 3 ke

halaman Menu Utama yang dibuat pada aplikasi Adobe Flash CS4 pada

tahap ini penulis juga memberikan actionscript yang ditempatkan di

Page 132: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

112

setiap frame pada tombol-tombol untuk menuju ke menu berikutnya

apabila tombol tersebut di tekan dan actionscript untuk menampilakan

movie clip

Gambar 4.57. Pembuatan Tampilan Halaman Menu Utama

Pada halaman Menu Utama ini terdapat beberapa movie clip

untuk menampilkan menu ketika tombol Pilihan di tekan, movie clip

untuk menampilkan halaman Tentang Aplikasi ketika tombol Tentang

Aplikasi ditekan serta movie clip tampilan keluar ketika tombol Keluar

ditekan, pada halaman menu-menu yang lainnya juga terdapat movie clip

yang sama.

Selanjutnya penulis membuat tampilan halaman untuk contoh

dari hukum-hukum al-Nūn al-Sākinah dan Tanwin, serta al-Mīm al-

Page 133: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

113

Sākinah, seperti, tampilan halaman contoh Iżhār, Idgām, Iqlāb, Ikhfā dan

tampilan halaman contoh Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi,

untuk pembuatan tampilan halaman contoh dari hukum-hukum al-Nūn

al-Sākinah dan Tanwin, serta al-Mīm al-Sākinah ini semua tahap dan

prosesnya secara garis besar sama, pada tahap ini penulis memasukkan

beberapa file audio Murottal al-Qur’an oleh Syech Sa’ad Al Ghomidy

yang berformat *.mp3 ke setiap tombol Baca yang berbeda-beda, penulis

juga memasukkan beberapa ayat-ayat al-Qur’an yang sebagian besar

diambil dari juz 30, dengan cara mengetiknya terlebih dahulu pada

aplikasi Nonosoft KHOT 3 lalu mengcopy kasil ketikan tersebut ke

halaman contoh dari hukum-hukum al-Nūn al-Sākinah dan Tanwin, serta

al-Mīm al-Sākinah yang dibuat pada aplikasi Adobe Flash CS4.

Penulis juga memasukkan actionscript pada setiap frame

tombol terutama tombol Baca yang berfungsi untuk memainkan suara

ketika tombol tersebut di tekan dan suara yang keluar sesuai dengan

contoh ayat yang ditampilkan pada setiap hukum-hukum al-Nūn al-

Sākinah dan Tanwin, serta al-Mīm al-Sākinah.

Page 134: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

114

Gambar 4.58. Pembuatan Tampilan Halaman Contoh

Gambar 4.59. Pembuatan Teks Arab dan Ayat al-Qur’an

Page 135: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

115

4.1.5. Pengujian (Testing)

1. Pengujian oleh penulis pada emulator

Setelah aplikasi selesai dibuat, pada tahap ini penulis

melakukan pengujian (testing) aplikasi, pengujian ini dilakukan

bertujuan untuk memastikan bahwa hasil pembuatan aplikasi sesuai

dengan yang direncanakan dan diharapkan serta dapat berjalan

dengan baik.

Sebelum melakukan pengujian pada perangkat sebenarnya

yaitu handphone, penulis terlebih dahulu melakukan pengujian pada

emulator Adobe Device Central CS4.

Gambar 4.60. Pengujian aplikasi pada Emulator Adobe Device

Central CS4

Page 136: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

116

2. Pengujian oleh penulis pada Handphone

Pada tahap ini penulis melakukan pengujian pada perangkat

sebenarnya yaitu pada handphone untuk memastikan apakah aplikasi

yang dibuat dapat berjalan dengan baik seperti pada emulator.

Dalam pengujian aplikasi penulis menggunakan handphone

Nokia 5530 XpressMusic. Handphone ini telah memenuhi kebutuhan

spesifikasi minimal untuk menjalankan aplikasi yang dibuat

Gambar 4.61. Handphone Nokia 5530 XpressMusic

(Sumber : Snapshot Adobe Device Central CS4)

Page 137: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

117

Tabel 4.2. Spesifikasi Handphone

Spesifikasi Keterangan

Layar TFT Resistive Touchscreen

16 Juta Warna

360x640 pixels 2.9”

Jaringan GSM 850 / 900 / 1800 / 1900,

EDGE, GPRS

OS Symbian v9.4 S60 5th Edition

CPU 434 Mhz ARM 11 Processor

Koneksivitas Bluetooth, Micro USB

Versi Flash Lite Flash Lite 3.0

Memory Eksternal 4 GB

Memory Internal 70 MB, 128 SDRAM

Page 138: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

118

Tahapan untuk menjalankan aplikasi pada perangkat

handphone adalah sebagai berikut,

a. Aplikasi yang telah diuji dan dijalankan pada emulator

menghasilkan sebuah file berformat *.swf, file inilah yang di

transfer ke dalam perangkat handphone

Gambar 4.62. File Aplikasi

b. File aplikasi ditransfer dari komputer ke perangkat handphone

dengan menggunakan media Bluetooth atau dengan

menggunakan microUSB

c. Penulis menjalankan aplikasi pada perangkat handphone tanpa

melakukan proses instalasi terlebih dahulu, karena aplikasi yang

dibuat bersifat standalone

Page 139: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

119

Gambar 4.63. Pengujian aplikasi pada perangkat handphone

Hasil dari pengujian aplikasi dengan menggunakan

perangkat handphone, memperlihatkan bahwa aplikasi ini

dapat berjalan dengan baik sesuai dengan pengujian yang

dilakukan pada emulator Adobe Device Central CS4

4.1.6. Distribusi (Distribution)

Aplikasi yang telah melalui tahap pengujian (testing) pada

emulator dan pada perangkat handphone, selanjutnya dikemas dalam

bentuk CD (Compact Disk), CD tersebut diberikan kepada pihak

Yayasan Subuh.net, untuk digunakan sebagai sarana dalam

pendistribusian aplikasi ini.

4.1.6.1. Spesifikasi Hardware dan Software

Aplikasi Mobile Tajwid ini dapat berjalan dengan baik

apabila spesifikasi perangkat keras (hardware) dan perangkat

Page 140: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

120

lunak (software) sesuai dengan yang penulis sarankan, antara

lain,

1. Perangkat Handphone

Spesifikasi yang disarankan untuk perangkat handphone

adalah sebagai berikut,

Tabel 4.3. Spesifikasi handphone yang disarankan

Spesifikasi Keterangan

Layar 640x360 pixels

OS Symbian v9.4 S60 5th

Edition

Versi Flash Lite Flash Lite 3.0

Memori Kosong 5 MB

Memori 128 SDRAM

2. Komputer

Untuk menjalankan CD yang berisi file aplikasi pada

komputer, penulis sarankan untuk menggunakan perangkat

komputer dengan spesifikasi sebagai berikut,

Page 141: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

121

Tabel 4.4. Spesifikasi komputer yang disarankan

Spesifikasi Keterangan

OS Windows XP

Processor Intel Pentium 4 1.5 GHz

VGA 64 MB

Memori RAM 256 MB

Monitor 15” 1024x768 pixels

Perangkat lainnya 1. Keyboard

2. Mouse

3. Sound Card

4. Active Speaker

4.1.6.2. Cara Menggunakan Program

Setelah melakukan transfer file aplikasi dari komputer

ke perangkat handphone dengan menggunakan media koneksi

yang tersedia, maka cara menggunakan mobile application

ilmu tajwid atau mobile tajwid ini pada perangkat handphone

adalah dengan cara pengguna dapat membuka dan menjalan

Page 142: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

122

file aplikasi langsung pada perangkat handphone tanpa

melakukan proses instalasi, karena aplikasi ini bersifat

standalone, ketika pertama kali dijalankan maka pengguna

akan dihadapkan pada tampilan Opening, dimana pada

tampilan Opening ini pengguna diminta untuk menekan atau

menyentuh layar handphone untuk masuk ke tampilan Intro

dan selanjutnya akan masuk ke Menu Utama, pada halaman

inilah pengguna dapat memilih menu dan masuk ke submenu

dengan tombol navigasi yang ada.

Page 143: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

123

BAB V

KESIMPULAN DAN SARAN

5.1. Kesimpulan

Hasil dari pembuatan skripsi ini, penulis mendapatkan beberapa

kesimpulan, yaitu:

1. Pembuatan aplikasi mobile ilmu tajwid menghasilkan aplikasi mobile

yang dapat memberikan panduan untuk mempelajari hukum al-nūn al-

sākinah, tanwīn dan al-mīm al-sākinah.

2. Penggunaan flash lite menjadikan aplikasi mobile berbasis multimedia

ini lebih menarik dan interaktif.

5.2. Saran

Aplikasi mobile ilmu tajwid ini masih sangat bisa dikembangkan,

oleh sebab itu penulis mencoba memberikan saran bagi yang ingin

mengembangkan aplikasi ini, yaitu.

1. Aplikasi mobile ilmu tajwid dapat terkoneksi dengan internet sehingga

data maupun materi ilmu tajwid dapat di update secara online

2. Adanya penerapan sistem kode warna yang lebih berfariasi

3. Penggunaan multi bahasa pada aplikasi ini akan memberikan manfaat

kepada pengguna (user) yang lebih luas dibanding menggunakan satu

bahasa.

Page 144: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

124

4. Aplikasi tidak hanya mengkaji hukum-hukum al-nūn al-sākinah,

tanwin dan al-mīm al-sākinah, tetapi membahas keseluruhan ilmu

tajwid

5. Aplikasi mobile ilmu tajwid tidak hanya dapat berjalan pada

handphone dengan layar sentuh (touch screen) tetapi dapat juga

dijalankan pada handphone yang memiliki keypad.

6. Aplikasi mobile ilmu tajwid ini perlu diterapkan di masyarakat agar

umat islam dapat mempelajari hukum-hukum al-nūn al-sākinah,

tanwīn dan al-mīm al-sākinah tanpa harus terbatas tempat dan waktu

Page 145: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

125

Daftar Pustaka Al Mahfani M. K. 2010. Juz ‘Ama Tajwid Berwarna & Terjemahannya. Jakarta: PT WahyuMedia. Fanani, A.Z. 2007. Bermain Logika ActionScript. Macromedia Flash Pro 8. Jakarta: PT Elex Media Komputindo. Fanani A. Z. & Syarif A. M. 2010, Mudah Membuat Mobile Application dengan Flash Lite 3.0. Yogyakarta: Andi. Fathin, A. A. & Tim Al-Bana 2009. Metode Al-Bana; Belajar Membaca Al- Qur’an Secara Mandiri. Jakarta: Bana Publishing. Global Web Site. 2009. Introduction to Flash Lite E-learning. http://www.forum. nokia.com/info/sw.nokia.com/id/184088f1-358d-4b5b-ba4d- b1262ae32f9f/ Introduction_to_Flash_Lite_E-learning.html#). 21 Februari 2010, 09.30 WIB. Madcoms. 2009. Panduan Lengkap Adobe Flash CS4 Professional. Yogyakarta: Andi. Mussahada M. H. & Rohanto U. 2010. Membuat Company Profile dengan Adobe Flash. Yogyakarta: Skripta Media Creative. Rauf, A. A. A. 2008. Pedoman Dauroh Al-Qur’an. Jakarta: Markaz Al-Qur’an. Sidik. 2010. 14 Trik Tersembunyi Flash Lite. Yogyakarta: Andi. Sjafi.i A. M. 1967. Pelajaran Tajwid. Semarang: MG. Semarang Sutopo. A.H. 2003. Multimedia Interaktif dengan Flash. Yogyakarta: Graha Ilmu.

Page 146: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

126

Suyanto, M. 2003. Multimedia Alat untuk Meningkatkan Keunggulan Bersaing. Yogyakarta: Andi. Syarbini, A & Mufidah, A. 2010. 5 Langkah Lancar Membaca Al-Qur’an. Bandung: Ruang Kata. Wahana Komputer. 2010. Adobe Flash CS4 untuk Pembuatan Animasi Interaktif. Yogyakarta: Andi. Wahyudi, M. 2008. Ilmu Tajwid Plus. Surabaya: Halim Jaya

Page 147: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

127 Lampiran I – Surat-surat Penelitian

Page 148: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

128

Lampiran II – Kuisioner Evaluasi 1

Nama : ______________________________

Tanggal : ______________________________

1. Apakah anda tahu hukum mempelajari ilmu tajwid ?

a. Ya

b. TIdak

2. Apakah anda tahu hukum-hukum dalam ilmu tajwid ?

a. Ya

b. Tidak

3. Apakah anda dapat membedakan hukum-hukum nūn mati, tanwīn dan mīm mati ?

a. Ya

b. Tidak

4. Apakah media pembelajaran ilmu tajwid yang ada sekarang dapat dijadikan suatu solusi

praktis dan mobile (dapat dengan mudah dibawa kemana-mana) ?

a. Ya

b. Tidak

5. Apakah perlu dibuatnya suatu aplikasi mobile yang dapat diakses dengan mengunakan

handphone sebagai panduan untuk mempelajari ilmu tajwid ?

a. Ya

b. Tidak

Page 149: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

129

Lampiran III – Kuisioner Evaluasi 2

Nama : ______________________________

Tanggal : ______________________________

1. Apakah aplikasi mobile tajwid ini dapat memberikan pengetahuan kepada anda mengenai

hukum-hukum dalam ilmu tajwid ?

a. Ya

b. Tidak

2. Apakah aplikasi mobile tajwid ini dapat memberikan anda panduan untuk membedakan

hukum nūn mati, tanwīn dan mīm mati ?

a. Ya

b. Tidak

3. Apakah icon serta navigasi pada aplikasi mobile tajwid ini dapat digunakan dan dipahami

dengan mudah ?

a. Ya

b. Tidak

4. Apakah tampilan serta fasilitas pada aplikasi mobile tajwid ini cukup menarik ?

a. Ya

b. Tidak

5. Apakah aplikasi mobile tajwid ini dapat dijadikan suatu solusi praktis dan mobile untuk

mempelajari hukum-hukum tajwid terutama hukum nūn mati, tanwīn dan mīm mati ?

a. Ya

b. Tidak

Page 150: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

130

Lampiran IV – Hasil Kuisioner Evaluasi 1

1. Apakah anda tahu hukum mempelajari ilmu tajwid ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah sebelum dibuatnya aplikasi mobile

tajwid ini para penguna mengetahui hukum mempelajari ilmu tajwid. Hasilnya adalah,

sebagian besar pengguna tidak mengetahui hukum mempelajari ilmu tajwid.

Jawaban Jumlah Presentase (%) Ya 1 10 %

Tidak 9 90 % Jumlah 10 100%

2. Apakah anda tahu hukum-hukum dalam ilmu tajwid ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah sebelum dibuatnya aplikasi mobile

tajwid ini para pengguna mengetahui hukum-hukum tajwid yang ada dalam ilmu tajwid.

Hasilnya adalah, sebagian besar pengguna tidak mengetahui hukum-hukum tajwid.

Jawaban Jumlah Presentase (%) Ya 4 40 %

Tidak 6 60 % Jumlah 10 100%

3. Apakah anda dapat membedakan hukum-hukum nūn mati, tanwīn dan mīm mati ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah sebelum dibuatnya aplikasi mobile

tajwid ini, para pengguna dapat membedakan hukum-hukum nūn mati, tanwīn dan mīm

mati. Hasilnya adalah, sebagian besar pengguna tidak dapat membedakan hukum nūn

mati, tanwīn dan mīm mati

Jawaban Jumlah Presentase (%) Ya 2 20 %

Tidak 8 80 % Jumlah 10 100%

Page 151: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

131

Lampiran IV – Hasil Kuisioner Evaluasi 1

4. Apakah media pembelajaran ilmu tajwid yang ada sekarang dapat dijadikan suatu

solusi praktis dan mobile (dapat dengan mudah dibawa kemana-mana) ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah sebelum dibuatnya aplikasi mobile

tajwid ini, media pembelajaran yang digunakan oleh pengguna sekarang, dapat dijadikan

suatu solusi praktis dan mobile. Hasilnya adalah, media pembelajaran yang ada sekarang

belum dapat dijadikan sebagai suatu solusi praktis dan mobile

Jawaban Jumlah Presentase (%) Ya 0 0 %

Tidak 10 100 % Jumlah 10 100%

5. Apakah perlu dibuatnya suatu aplikasi mobile yang dapat diakses dengan

mengunakan handphone sebagai panduan untuk mempelajari ilmu tajwid ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah sebelum dibuatnya aplikasi mobile

tajwid ini para pengguna menginginkan suatu aplikasi mobile sebagai panduan untuk

mempelajari ilmu tajwid yang dapat di akses melalui handphone. Hasilnya adalah,

seluruh pengguna menjawab “Ya”, yang artinya mereka sangat menginginkan suatu

aplikasi mobile untuk mempelajari ilmu tajwid.

Jawaban Jumlah Presentase (%) Ya 10 100 %

Tidak 0 0 % Jumlah 10 100%

Page 152: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

132

Lampiran V – Hasil Kuisioner Evaluasi 2

1. Apakah aplikasi mobile tajwid ini dapat memberikan pengetahuan kepada anda

mengenai hukum-hukum dalam ilmu tajwid ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah aplikasi mobile tajwid ini dapat

memberikan pengetahuan mengenai hukum-hukum dalam ilmu tajwid kepada pengguna.

Hasilnya adalah seluruh pengguna menjawab “Ya” yang artinya aplikasi mobile tajwid

dapat memberikan pengetahuan kepada pengguna.

Jawaban Jumlah Presentase (%) Ya 10 100 %

Tidak 0 0 % Jumlah 10 100%

2. Apakah aplikasi mobile tajwid ini dapat memberikan anda panduan untuk

membedakan hukum nūn mati, tanwīn dan mīm mati ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah aplikasi mobile tajwid ini dapat

memberikan panduan untuk membedakan hukum nūn mati, tanwīn dan mīm mati kepada

pengguna. Hasilnya adalah aplikasi mobile tajwid dapat memberikan panduan kepada

pengguna untuk membedakan hukum nūn mati, tanwīn dan mīm mati

Jawaban Jumlah Presentase (%) Ya 10 100 %

Tidak 0 0 % Jumlah 10 100%

3. Apakah icon serta navigasi pada aplikasi mobile tajwid ini dapat digunakan dan

dipahami dengan mudah ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah icon serta navigasi pada aplikasi

mobile tajwid ini dapat digunakan dan dipahami dengan mudah oleh pengguna. Hasilnya

adalah sebagian besar pengguna dapat menggunakan dan memahami dengan mudah icon

dan navigasi pada apliksi mobile tajwid.

Page 153: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

133

Lampiran V – Hasil Kuisioner Evaluasi 2

Jawaban Jumlah Presentase (%) Ya 9 90 %

Tidak 1 10 % Jumlah 10 100%

4. Apakah tampilan serta fasilitas pada aplikasi mobile tajwid ini cukup menarik ?

Pertanyaan ini dimaksudkan untuk mengetahui ketertarikan pengguna terhadap aplikasi

mobile tajwid. Hasilnya adalah seluruh pengguna menjawab “Ya” yang artinya mereka

sangat tertarik terhadap tampilan dan fasilitas yang ada pada mobile tajwid.

Jawaban Jumlah Presentase (%) Ya 10 100 %

Tidak 0 10 % Jumlah 10 100%

5. Apakah aplikasi mobile tajwid ini dapat dijadikan suatu solusi praktis untuk

mempelajari hukum-hukum tajwid terutama hukum nūn mati, tanwīn dan mīm

mati ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah aplikasi mobile tajwid dapat

dijadikan suatu solusi praktis dan mobile untuk mempelajari hukum-hukum tajwid

terutama hukum nūn mati, tanwīn dan mīm mati. Hasilnya adalah seluruh pengguna

menjawab “Ya” yang artinya aplikasi mobile tajwid ini dapat dijadikan suatu solusi

praktis dan mobile.

Jawaban Jumlah Presentase (%) Ya 10 100 %

Tidak 0 10 % Jumlah 10 100%

Page 154: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

134 Lampiran VI – Testing

Page 155: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

135 Lampiran VI – Testing

Page 156: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

136 Lampiran VI – Testing

Page 157: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

137

Lampiran VII – Source Code

Source Code Menu Utama

stop(); btn_kembali_mutama.onRelease = function() { gotoAndPlay("intro", 1); } btn_nun_menu_utama.onRelease = function() { gotoAndStop("menu_utama_nun", 1); } btn_mim_menu_utama.onRelease = function() { gotoAndStop("menu_utama_mim", 1); } btn_huruf_hijaiyah_mutama.onRelease = function() { gotoAndStop("huruf_hijaiyah", 1); }

Source Code Menu Pilihan Menu Utama

stop(); btn_mc_full_onstage_mutama.onRelease = function() { play(); } btn_mc_pilihanmenu1_mutama.onRelease = function() { gotoAndStop(1); _root.mc_bantuan_mutama.gotoAndPlay("frame1_mc_bantuan"); } btn_mc_pilihanmenu2_mutama.onRelease = function() { gotoAndStop(1); _root.mc_tentang_aplikasi_mutama.gotoAndPlay("frame1_mc_tentang_aplikasi"); } btn_mc_pilihanmenu3_mutama.onRelease = function() { gotoAndStop(1); _root.mc_kotak_dialog_keluar_mutama.gotoAndPlay("frame1_mc_kotak_dialog_keluar");

Page 158: APLIKASI MOBILE ILMU TAJWID BERBASIS …repository.uinjkt.ac.id/dspace/bitstream/123456789/1506/1...aplikasi ini yaitu Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4,

138

}

Source Code Iqlab

stop(); btn_pengertian_iqlab.onRelease = function() { gotoAndStop(2); } btn_huruf_iqlab.onRelease = function() { gotoAndStop(3); } btn_kembali_mutama_iqlab.onRelease = function() { gotoAndStop("menu_utama_nun", 1); } btn_kembali_pengertian_iqlab.onRelease = function() { gotoAndStop(1); } btn_kembali_huruf_iqlab.onRelease = function() { gotoAndStop(1); } btn_ba_huruf_iqlab.onRelease = function() { gotoAndStop(4); } btn_kembali_cth_iqlab.onRelease = function() { stopAllSounds(); gotoAndStop(3); }

Source Tombol Baca Contoh Iqlab

stopAllSounds(); nextFrame();