APLIKASI MOBILE ILMU TAJWID BERBASIS MULTIMEDIA

Transkripsi

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

2 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 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011 M / 1432 H i

3 DAFTAR GAMBAR Gambar 2.1. Simbol State Gambar 2.2. Simbol Transisi State Gambar 2.3. Notasi State Transition Diagram Gambar 2.4. Tahapan Pengembangan Multimedia Gambar 2.5. Area kerja Adobe Flash CS4 Professional Gambar 2.6. Tampilan Adobe Device Central CS Gambar 2.7. Area kerja Adobe Photoshop CS Gambar 2.8. Area kerja Nonosoft KHOT Gambar 3.1. Kerangka pikir pembuatan aplikasi Gambar 4.1. Storyboard Opening Gambar 4.2. Storyboard Intro Gambar 4.3. Storyboard Menu Utama Gambar 4.4. Storyboard Huruf Hijaiyah Gambar 4.5. Storyboard al-nūn al-sākinah dan Tanwin Gambar 4.6. Storyboard Iżhār Gambar 4.7. Storyboard Pengertian Iżhār Gambar 4.8. Storyboard Huruf Iżhār Gambar 4.9. Storyboard Contoh Iżhār Gambar Storyboard Tentang Aplikasi Gambar Storyboard Bantuan Gambar Storyboard Keluar Gambar Struktur Navigasi Menu Utama Gambar Flowchart Menu Utama xvi

4 Gambar Flowchart al-nūn al-sākinah dan Tanwin Gambar Flowchart al-mīm al-sākinah Gambar Flowchart Iżhār Gambar Flowchart Idgām Gambar Flowchart Iqlāb Gambar Flowchart Ikhfā Gambar Flowchart Iżhār Syafawi Gambar Flowchart Idgām Mimi Gambar Flowchart Ikhfā Syafawi Gambar Flowchart Menu Pilihan al-nūn al-sākinah, Tanwin, dan al-mīm al-sākinah Gambar Flowchart Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā Gambar Flowchart Menu Pilihan Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi Gambar STD Menu Utama Gambar STD al-nūn al-sākinah dan Tanwin Gambar STD al-mīm al-sākinah Gambar STD Iżhār Gambar 4.31 STD Idgām Gambar STD Iqlāb Gambar STD Ikhfā Gambar STD Iżhār Syafawi Gambar STD Idgām Mimi Gambar STD Ikhfā Syafawi Gambar STD Menu Pilihan al-nūn al-sākinah dan Tanwin, xvii

5 al-mīm al-sākinah Gambar STD Menu Pilihan Iżhār, Idgām, Iqlāb, Ikhfā Gambar STD Menu Pilihan Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi Gambar Tampilan Opening Gambar Tampilan Intro Gambar Tampilan Menu Utama Gambar Tampilan Huruf Hijaiyah Gambar Tampilan al-nūn al-sākinah dan Tanwin Gambar Tampilan Iżhār Gambar Tampilan Pengertian Iżhār Gambar Tampilan Huruf Iżhār Gambar Tampilan Contoh Iżhār Gambar Tampilan Tentang Aplikasi Gambar Tampilan Bantuan Gambar Tampilan Keluar Gambar Pembuatan Gambar Background Aplikasi menggunakan Adobe Photoshop CS Gambar Pembuatan Tombol Navigasi Gambar Pembuatan Tombol Navigasi Menu Utama dan Submenu Gambar Pembuatan Tombol Navigasi Submenu Gambar Pembuatan Tampilan Opening Gambar Pembuatan Tampilan Halaman Menu Utama Gambar Pembuatan Tampilan Halaman Contoh xviii

6 Gambar Pembuatan Teks Arab dan Ayat al-qur an Gambar Pengujian aplikasi pada Emulator Adobe Device Central CS Gambar Handphone Nokia 5530 XpressMusic Gambar File Aplikasi Gambar Pengujian aplikasi pada perangkat handphone xix

7 DAFTAR LAMPIRAN Lampiran I Surat-surat Penelitian Lampiran II Kuisioner Evaluasi Lampiran III Kuisioner Evaluasi Lampiran IV Hasil Kuisioner Evaluasi Lampiran V Hasil Kuisioner Evaluasi Lampiran VI Testing Lampiran VII Source Code xx

8 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 Menyetujui, Pembimbing I Pembimbing II Viva Arifin, MMSI NIP Amin Johari, MA NIP Mengetahui, Ketua Program Studi Teknik Informatika Yusuf Durrachman, M.Sc M.IT NIP ii

9 PENGESAHAN UJIAN Skripsi yang berjudul Aplikasi Mobile Ilmu Tajwid Berbasis Multimedia disusun oleh Wahyu Al Baihaqi , telah diuji dan dinyatakan lulus dalam Sidang Munaqosyah Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta pada Hari Kamis, 18 Agustus Skripsi ini telah diterima sebagai salah satu syarat untuk memperoleh gelar Sarjana Strata Satu (S1) Program Studi Teknik Informatika. Jakarta, Agustus 2011 Penguji I Menyetujui, Penguji II DR. Agus Salim M. Si NIP Muhammad Tabah Rosyadi, MA NIP Pembimbing I Pembimbing II Viva Arifin, MMSI NIP Amin Johari, MA NIP Dekan Fakultas Sains dan Teknologi Mengetahui, Ketua Prodi Teknik Informatika DR. Syopiansyah Jaya Putra, M.Sis NIP Yusuf Durrachman, M.Sc, MIT NIP iii

10 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 iv

11 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 almī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 Halaman; 72 Gambar; 7 Tabel; 7 Lampiran Daftar Pustaka: 15 ( ) v

12 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. vi

13 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. vii

14 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 viii

15 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. ix

16 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 Latar Belakang Perumusan Masalah Batasan Masalah Tujuan dan Manfaat Penulisan Tujuan Manfaat Metodologi Penelitian Metodologi Pengumpulan Data Studi Kepustakaan Kuisioner... 7 x

17 1.5.2.Metodologi Pengembangan Multimedia Sistematika Penulisan Skripsi... 7 BAB II LANDASAN TEORI Mobile Application Handphone Multimedia Definisi Multimedia Elemen Multimedia Teks Gambar Animasi Audio Video Interactive Link Perancangan Sistem Storyboard Flowchart Desain Struktur Navigasi State Transition Diagram Metodologi Pengembangan Multimedia Konsep (Concept) Perancangan (Design) Pengumpulan Bahan Material (Material Collecting) Pembuatan (Assembly) xi

18 Pengujian (Testing) Distrbusi (Distribution) Flash Lite Sejarah Pembahasan Umum Flash Lite Adobe Flash CS4 Professional Adobe Device Central CS Adobe Photoshop CS Nonosoft KHOT Literatur Sejenis BAB III METODOLOGI PENELITIAN Metodologi Pengumpulan Data Studi Kepustakaan Wawancara Metodologi Pengembangan Multimedia Konsep (Concept) Perancangan (Design) Pengumpulan Bahan Material (Material Collecting) Pembuatan (Assembly) Pengujian (Testing) Distribusi (Distribution) Kerangka Pikir BAB IV HASIL DAN PEMBAHASAN Metode Pengembangan Multimedia Konsep (Concept) xii

19 Perancangan (Design) Perancangan Storyboard Perancangan Struktur Navigasi Perancangan Flowchart Perancangan STD (State Transition Diagram) Perancangan Antarmuka Pemakai (Interface) Pengumpulan Bahan Material (Material Collecting) Gambar Teks Animasi Audio Kontrol Navigasi Pembuatan (Assembly) Pengujian (Testing) Distribusi (Distribution) Spesifikasi Hardware dan Software Cara Menggunakan Program BAB V KESIMPULAN DAN SARAN Kesimpulan Saran DAFTAR PUSTAKA xiii

20 DAFTAR TABEL Tabel 2.1. Simbol-simbol flowchart Tabel 3.1. Daftar Gambar Tabel 3.2. Daftar Audio Tabel 4.1. Spesifikasi hardware dan Software Tabel 4.2. Spesifikasi Handphone Tabel 4.3. Spesifikasi handphone yang disarankan Tabel 4.4. Spesifikasi komputer yang disarankan xiv

21 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 , 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

22 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 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 almī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.

23 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.

24 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 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, Tools atau software yang digunakan adalah Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS 4 Nonosoft KHOT 3, dan Adobe Audition Jenis handphone yang digunakan dalam penerapan aplikasi ini adalah Nokia tipe 5530 XpressMusic.

25 5 4. Aplikasi diterapkan hanya pada handphone yang mendukung aplikasi flash lite versi Aplikasi ini digunakan sebagai panduan bagi para pengajar dan pelajar tahsin, qari serta untuk umum yaitu orang yang ingin belajar tajwid Tujuan dan Manfaat Penulisan 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 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 alsākinah, tanwīn dan al-mīm al-sākinah

26 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 alsā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 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 Metodologi Pengumpulan Data: Studi Kepustakaan Metode pengumpulan kepustakaan atau studi literatur dilakukan dengan cara membaca buku-buku yang

27 7 berkaitan, sehingga dapat dijadikan acuan dalam penulisan skripsi ini 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 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) Sistematik Penulisan Untuk memudahkan penulis dalam menyusun skripsi ini, pembahasan terbagi kedalam 5 (lima) bab yang diuraikan sebagai berikut:

28 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.

29 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) 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)

30 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) 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.

31 Elemen Multimedia Untuk membuat aplikasi multimedia, diperlukan penggabungan dari beberapa elemen, dimana setiap elemen memiliki peranan masing-masing (Suyanto, 2003), yaitu: 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 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)

32 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 Animasi Animasi berarti gerakan image atau video. Konsep dari animasi menggambarkan sulitnya menyajikan informasi dengan satu gambar, atau sekumpulan gambar. (Sutopo, 2003) 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)

33 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 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 Perancangan Sistem Storyboard Storyboard menurut (Luther 1994, dalam Sutopo, 2003) merupakan deskripsi dari setiap scene yang secara jelas

34 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) elemenelemen 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) 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 :

35 15 Tabel 2.1. Simbol-simbol flowchart No. Simbol Fungsi Menggambarkan proses atau proses perhitungan Sambungan pada halaman yang sama Sambungan pada halaman yang berbeda 4 Arah data / arus data 5 Mulai (start) atau selesai (stop) 6 Proses input atau output 7 Keputusan (Decision) Desain Struktur Navigasi Struktur navigasi merupakan rancangan alur program. Dalam pengembangan aplikasi berbasis multimedia maupun pengembangan web menurut Lowery (2001, dalam Sutopo, 2003:

36 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 halamanhalaman 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

37 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 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

38 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)

39 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) Konsep (Concept) Tahap konsep (concept) yaitu menentukan tujuan, termasuk identifikasi audiens, macam aplikasi (presentasi, interaktif, dan lain-lain), tujuan aplikasi (informasi, hiburan, pelatihan, dan lainlain) dan spesifikasi umum.

40 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) 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).

41 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 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 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.

42 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 Flash Lite 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 preinstalled pada 25 model handset yang berbeda.(wilson, 2005) 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

43 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.

44 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)

45 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.

46 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

47 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:

48 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 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,

49 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 perintahperintah standar windows lainnya.

50 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.

51 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 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)

52 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.

53 33 5. Toolbox : Berisi semua tool yang digunakan dalam Adobe Photoshop CS 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 fontfont pendukungnya pada komputer user. (Setiawan, 2010)

54 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.

55 Literatur Sejenis Judul : Aplikasi Al-Qur an Tajwid Berbasis Multimedia Untuk Jenis Literatur : Skripsi Membedakan 5 Hukum Nun Mati Dan Tanwin Penulis : Indra Mastutik Tahun : 2007 No. Hal-hal yang diperbandingkan 1. Tools 2. Penerapan Aplikasi 3. Hukum Tajwid 4. Hasil Penulis Sebelumnya Penulis Sekarang Menggunakan Menggunakan Macromedia Director MX, Adobe Flash CS4, Macromedia Flash MX, Adobe Device Central CS4, Macromedia Fireworks MX, Adobe Photoshop CS4, Adobe Photoshop 7.0 Adobe Audition 3.0 Nonosoft KHOT 3 CD interaktif pada Perangkat handphone komputer dengan Flash Lite v. 2.0 Hukum nun mati dan tanwin Hukum nun mati dan tanwin Hukum mim mati User dapat membedakan User dapat membedakan hukum nun mati dan tanwin hukum nun mati dan tanwin dengan kode warna dengan ditambah mim mati dengan media CD yang harus contoh suara dari qari dan menggunakan CD player juga contoh ayat yang diberi untuk menjalankannya tanda warna pada bagian yang terdapat hukum tajwidnya dengan media handphone yang praktis dan bisa dibawa kemana - mana

56 36 Judul : Aplikasi Pembelajaran Tajwid Jenis Literatur : Skripsi Penulis : Tri Ismiyani Tahun : 2009 No. Hal-hal yang diperbandingkan 1. Tools 2. Penerapan Aplikasi 3. Hukum Tajwid 4. Hasil Penulis Sebelumnya Menggunakan, Macromedia Flash MX, Adobe Photoshop CS CD interaktif pada komputer Hukum Nun mati dan tanwin User dapat mempelajari hukum tajwid dengan media CD yang harus menggunakan CD player untuk menjalankannya Penulis Sekarang Menggunakan Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4, Adobe Audition 3.0 Nonosoft KHOT 3 Perangkat handphone dengan Flash Lite v. 2.0 Hukum nun mati dan tanwin Hukum mim mati User dapat mempelajari hukum tajwid dengan media handphone yang praktis dan bisa dibawa kemana - mana

57 37 Judul : Belajar Mudah Membaca al-qur an Jenis Literatur : Free Stand Alone Aplication Penulis : Anonym Tahun : 2008 No. Hal-hal yang diperbandingkan 1. Tools 2. Penerapan Aplikasi 3. Hukum Tajwid 4. Hasil Penulis Sebelumnya Menggunakan Macromedia Flash Aplikasi stand alone pada komputer Hukum Nun Sakinah dan Tanwin User dapat mempelajari hukum tajwid untuk membaca al-qur an dengan aplikasi stand alone yang harus menggunakan flash player pada komputer untuk menjalankannya Penulis Sekarang Menggunakan Adobe Flash CS4, Adobe Device Central CS4, Adobe Photoshop CS4, Adobe Audition 3.0 Nonosoft KHOT 3 Perangkat handphone dengan Flash Lite v. 2.0 Hukum nun mati dan tanwin Hukum mim mati User dapat mempelajari hukum tajwid untuk membaca al-qur an dengan media handphone yang praktis dan bisa dibawa kemana - mana

58 38 BAB III METODOLOGI PENELITIAN Pada bab ini akan diuraikan tentang tentang metode yang digunakan penulis dalam penyusunan skripsi 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 : 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 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

59 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 Metode Pengembangan Multimedia 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 Perancangan (Design) Pada tahap ini penulis membuat spesifikasi secara rinci mengenai arsitektur aplikasi, serta gaya dan kebutuhan material

60 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

61 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 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

62 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 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

63 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 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.

64 44 Tabel 3.1. Daftar Gambar bg_contoh_idgam.jpg bg_cth_idgam_bilaghunnah.jpg background_contoh_ikhfa.jpg bg_contoh_izhhar.jpg background_huruf_ikhfa.jpg background_huruf_izhhar.jpg bg_idgam_bilaghunnah.jpg background_menu_utama.jpg bg_menu_utama_ikhfa.jpg bg_menu_utama_izhhar.jpg bg_menu_utama_nun.jpg bg_pengertian_idgam.jpg bg_pengertian_iqlab.jpg bg_contoh_ikhfa_syafawi.jpg bg_huruf_idgam_bighunnah.jpg bg_huruf_idgam_mimi.jpg bg_huruf_izhhar_syafawi.jpg bg_mc_keluar_small_half_v2.jpg bg_menu_utama_izhhar_syafawi.jpg bg_pengertian_ikhfa_syafawi.jpg bg_tentang_aplikasi.jpg bg_cth_idgam_bighunnah.jpg bg_contoh_idgam_mimi.jpg background_contoh_iqlab.jpg bg_huruf_hijaiyah.jpg background_huruf_iqlab.jpg bg_idgam_bighunnah.jpg background_opening_v2.jpg bg_menu_utama_idgam.jpg bg_menu_utama_iqlab.jpg bg_menu_utama_mim.jpg bg_pembagian_idgam.jpg bg_pengertian_ikhfa.jpg bg_pengertian_izhhar.jpg bg_contoh_izhhar_syafawi.jpg bg_huruf_idgam_bilaghunnah.jpg bg_huruf_ikhfa_syafawi.jpg bg_idgam_mimi.jpg bg_menu_utama_ikhfa_syafawi.jpg bg_pengertian_idgam_mimi.jpg bg_pengertian_izhhar_syafawi.jpg button.png

65 45 button_hover.png button_submenu2_hover2.png button_submenu3_hover.png button_submenu3_v2.png bg_intro.jpg button_submenu2.png button_submenu3.png button_submenu3_hover_v2.png logo_subuhnet.png bg_bantuan.jpg Pada pembuatan aplikasi ini terdapat 60 audio yang berformat *.MP3 Tabel 3.2. Daftar Audio Bismillah.mp3 'Abasa_17.mp3 al-fajr_21.mp3 al-gasyiyah_6.mp3 al-infitar_19.mp3 al-kahf_74.mp3 al-lail_14.mp3 al-mulk_27.mp3 an-naba'_14.mp3 an-naba'_40.mp3 an-naba'_40_ta.mp3 an-nazi'at_12.mp3 al-insyiqaq_1.mp3 asy-syams_9.mp3 at-takwir_28.mp3 'Abasa_2.mp3 al-balad_15.mp3 al-fajr_22.mp3 al-gasyiyah_12.mp3 al-insan_26.mp3 al-lail_3.mp3 al-ma'un_5.mp3 al-mutaffifin_31.mp3 an-naba'_18.mp3 an-naba'_40_dzo.mp3 an-najm_22.mp3 an-nazi'at_37.mp3 an-nazi'at_43.mp3 asy-syams_10.mp3 at-tariq_13.mp3

66 46 az-zukhruf_17.mp3 'Abasa_13.mp3 al-buruj_20.mp3 al-insyiqaq_14.mp3 an-naba'_13.mp3 an-naziat_33.mp3 at-takwir_25.mp3 'Abasa_18.mp3 al-bayyinah_8.mp3 al-insyiqaq_25.mp3 al-mutaffifin_5.mp3 an-naba'_29.mp3 an-nazi'at_33.mp3 al-adiyat_11.mp3 al-bayyinah_8_izhhar_syafawi.mp3 al-humazah_4.mp3 'Abasa_37.mp3 al-gasyiyah_8.mp3 al-mutaffifin_15.mp3 an-naba'_30.mp3 an-nazi'at_36.mp3 at-tariq_6.mp3 'Abasa_18_kho.mp3 al-haqqah_36.mp3 al-kausar_2.mp3 al-qadr_5.mp3 an-naba'_36_izhhar.mp3 at-takwir_27.mp3 al-humazah_8.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

67 47 menggunakan program yang telah disebutkan sebelumnya, untuk buku-buku yang penulis gunakan, secara lengkap dapat dilihat pada daftar pustaka 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.

68 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 Memory Internal 5 Megabyte 64 RAM 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

69 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 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 Kerangka Pikir Kerangka pikir dalam pembuatan aplikasi ini digambarkan pada diagram berikut ini,

70 50 Media Pembelajaran Ilmu Tajwid Sulit mengetahui cara membaca ayat yang didalamnya terdapat hukum tajwid Permasalahan Sulit membedakan hukumhukum al-nūn al-sākinah, tanwin dan al-mīm alsākinah Adanya keterbatasan waktu, tempat dan tidak paraktis Media pembelajaran interaktif dengan memberi contoh cara membaca ayat yang didalamnya terdapat hukum tajwid dengan suara Solusi Media pembelajaran interaktif dengan memberikan warna pada ayat yang terdapat hukum tajwid 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 Hasil 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 Aplikasi Mobile Gambar 3.1. Kerangka pikir pembuatan aplikasi

71 51 BAB IV HASIL DAN PEMBAHASAN 4.1. Metode Pengembangan Multimedia 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

72 52 Audiens : Yayasan Subuh.net, umum yaitu para pengajar, pelajar tahsin, qari dan orang yang ingin belajar tajwid Bentuk Aplikasi Gambar : Mobile Application : 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 Perancangan (Design) Tahap ini merupakan tahap perancangan aplikasi, dimana perancangan tersebut berupa perancangan storyboard, perancangan flowchart, perancangan struktur navigasi, perancangan diagram transisi

73 53 atau STD (State Transition Diagram), dan perancangan antarmuka pengguna (user interface) 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 : Modul : 1 Storyboard Opening Halaman Nama File : Opening : mobile_tajwid.fla Frame No. : 1 dari 1 Scene : opening Gambar : background_opening_v2.jpg, logo_suguhnet.png Animasi : Teks Audio : -

74 54 Navigasi Tap Screen/Enter Notes : Masuk ke Intro : 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 Nama File : Intro : mobile_tajwid.fla Frame No. : 1 dari 1 Scene Gambar : intro : bg_intro.jpg Animasi : - Audio : bismillah.mp3 Navigasi - Notes : Halaman Intro merupakan halaman pembuka kedua setelah halaman

75 55 Opening Gambar 4.2. Storyboard Intro Storyboard Menu Utama Modul : 3 Halaman Nama File : Menu Utama : 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

76 56 al-mīm al-sākinah Pilihan Kembali Notes : Untuk menuju halaman menu al-mīm al-sākinah : Untuk menampilkan menu Pilihan : Untuk kembali menuju halaman Intro : 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 Nama File : Huruf Hijaiyah : mobile_tajwid.fla Frame No. : 1 dari 2 Scene Gambar : huruf_hijaiyah : bg_huruf_hijaiyah.jpg, button_submenu2.png, button.png Animasi : -

77 57 Audio : - Navigasi Pilihan Lanjut Notes : Untuk menampilkan menu PIlihan : Untuk menuju halaman Huruf Hijaiyah selanjutnya : 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 Modul : 5 Storyboard al-nūn al-sākinah dan Tanwin Halaman : al-nūn al-sākinah dan Tanwin Nama File : mobile_tajwid.fla Frame No. : 1 dari 1 Scene : menu_utama_nun Gambar :

78 58 bg_menu_utama_nun.jpg, button_submenu2.png, button.png Animasi : - Audio : - Navigasi Iżhār Idgām Iqlāb Ikhfā Pilihan Kembali Notes : Untuk menuju halaman Iżhār : Untuk menuju halaman Idgām : Untuk menuju halaman Iqlāb : Untuk menuju halaman Ikhfā : Untuk menampilkan menu Pilihan : Untuk kembali menuju halaman Menu Utama : 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

79 59 Storyboard Iżhār Modul : 6 Halaman Nama File : Iżhār : 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 Huruf & Contoh Iżhār Pilihan Kembali : Untuk menuju halaman Pengertian Iżhār : Untuk menuju halaman Huruf Iżhār : Untuk menampilkan menu Pilihan : Untuk kembali menuju halaman al-nūn al-sākinah dan Tanwin Notes : Pada halaman ini terdapat 2 tombol untuk masuk ke

80 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 Nama File : Iżhār : mobile_tajwid.fla Frame No. : 2 dari 9 Scene : izhhar Gambar : bg_pengertian_izhhar.jpg, button.png Animasi : - Audio : -

81 61 Navigasi Pilihan Kembali : Untuk menampilkan menu Pilihan : 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 Modul : 8 Storyboard Huruf Iżhār Halaman Nama File : Iżhār : mobile_tajwid.fla Frame No. : 3 dari 9 Scene : izhhar Gambar : background_huruf_izhhar.jpg, button.png button_submenu2.png Animasi : -

82 62 Audio : - Navigasi Huruf Iżhār Pilihan Kembali Notes : Untuk menuju halaman Contoh Iżhār : Untuk menampilkan menu Pilihan : Untuk kembali menuju halaman Iżhār : 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

83 63 Storyboard Contoh Iżhār Modul : 9 Halaman Nama File : Iżhār : mobile_tajwid.fla Frame No. : 4 dari 9 Scene Gambar : izhhar : bg_contoh_izhhar.jpg, button.png, button_submenu2.png Animasi : - Audio : - Navigasi Baca Pilihan Kembali : Untuk memainkan suara bacaan contoh ayat : Untuk menampilkan menu Pilihan : 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

84 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 Modul : 10 Storyboard Tentang Aplikasi Halaman Nama File : Tentang Aplikasi : mobile_tajwid.fla Frame No. : 1 dari 1 Scene : - Gambar : bg_tentang_aplikasi.jpg, Animasi : - Audio : - button.png, Navigasi Tutup Notes : Untuk menutup halaman Tentang Aplikasi : Pada halaman ini terdapat keterangan judul aplikasi, versi aplikasi, nama pembuat, nama qari, tools-tools yang digunakan dan terdapat 1

85 65 tombol untuk menutup halaman Tentang Aplikasi. Gambar Storyboard Tentang Aplikasi Modul : 11 Storyboard Bantuan Halaman Nama File : Bantuan : mobile_tajwid.fla Frame No. : 1 dari 1 Scene : - Gambar : bg_bantuan.jpg, Animasi : - Audio : - button.png, Navigasi Tutup Notes : Untuk menutup halaman Tentang Aplikasi : Pada halaman ini terdapat panduan untuk menjalankan aplikasi dan terdapat 1 tombol untuk menutup halaman Bantuan. Gambar Storyboard Bantuan

86 66 Storyboard Keluar Modul : 12 Halaman Nama File : Keluar : mobile_tajwid.fla Frame No. : 1 dari 1 Scene : - Gambar : bg_mc_keluar_small_half_v2.jpg, button.png, Animasi : - Audio : - Navigasi Ya Tidak Notes : Untuk menutup dan keluar dari aplikasi : Untuk tetap menjalankan aplikasi : Pada halaman ini terdapat sebuah pertanyaan untuk menentukan pilihan, dan terdapat 2 tombol, yaitu Ya dan Tidak Gambar Storyboard Keluar

87 Perancangan Struktur Navigasi Gambar Struktur Navigasi Menu Utama

88 Perancangan Flowchart Gambar Flowchart Menu Utama

89 Gambar Flowchart al-nūn al-sākinah dan Tanwin 69

90 Gambar Flowchart al-mīm al-sākinah 70

91 Gambar Flowchart Iżhār 71

92 Gambar Flowchart Idgām 72

93 Gambar Flowchart Iqlāb 73

94 Gambar Flowchart Ikhfā 74

95 Gambar Flowchart Iżhār Syafawi 75

96 Gambar Flowchart Idgām Mimi 76

97 Gambar Flowchart Ikhfā Syafawi 77

98 78 Gambar Flowchart Menu Pilihan al-nūn al-sākinah, Tanwin, dan al-mīm al-sākinah

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

100 Gambar Flowchart Menu Pilihan Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi 80

101 Perancangan STD (State Transition Diagram) Gambar STD Menu Utama

102 Gambar STD al-nūn al-sākinah dan Tanwin 82

103 Gambar STD al-mīm al-sākinah 83

104 Gambar STD Iżhār 84

105 Gambar STD Idgām 85

106 Gambar STD Iqlāb 86

107 Gambar STD Ikhfā 87

108 Gambar STD Iżhār Syafawi 88

109 Gambar STD Idgām Mimi 89

110 Gambar STD Ikhfā Syafawi 90

111 Gambar STD Menu Pilihan al-nūn al-sākinah dan Tanwin, al-mīm al-sākinah 91

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

113 Gambar STD Menu Pilihan Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi 93

114 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 Tampilan Opening

115 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 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

116 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 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,

117 97 Bantuan, Tentang Aplikasi dan tombol Keluar untuk keluar dari aplikasi Gambar 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.

118 98 Gambar 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.

119 99 Gambar 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 Tampilan Pengertian Iżhār

120 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 Tampilan Huruf Iżhār 9. Tampilan Contoh Iżhār Pada tampilan Contoh Iżhār ini terdapat contohcontoh ayat yang didalamnya terdapat hukum Iżhār yang diberi tanda warna kuning pada huruf yang dimaksud dan

121 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 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.

122 102 Gambar Tampilan Tentang Aplikasi 11. Tampilan Bantuan Pada tampilan Bantuan ini terdapat informasi panduan untuk menggunakan aplikasi seperti penggunaan tombol navigasi dan yang lainnya. Gambar Tampilan Bantuan

123 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 Tampilan Keluar 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.

124 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 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 Animasi Animasi yang ada pada aplikasi ini hanya berupa animasi teks yang diolah menggunakan aplikasi Adobe Flash CS4 untuk menganimasikannya 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.

125 Kontrol Navigasi Kontrol navigasi pada aplikasi ini berupa tomboltombol (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 CS 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,

126 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 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

127 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 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-

128 108 tombol navigasi, seperti tombol-tombol pada Menu Utama, tomboltombol 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 Pembuatan Tombol Navigasi

129 109 Gambar Pembuatan Tombol Navigasi Menu Utama dan Submenu 1 Gambar Pembuatan Tombol Navigasi Submenu 2

130 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,

131 111 Gambar 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

132 112 setiap frame pada tombol-tombol untuk menuju ke menu berikutnya apabila tombol tersebut di tekan dan actionscript untuk menampilakan movie clip Gambar 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-

133 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.

134 114 Gambar Pembuatan Tampilan Halaman Contoh Gambar Pembuatan Teks Arab dan Ayat al-qur an

135 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 Pengujian aplikasi pada Emulator Adobe Device Central CS4

136 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 Handphone Nokia 5530 XpressMusic (Sumber : Snapshot Adobe Device Central CS4)

137 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 5 th 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

138 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 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

139 119 Gambar 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 CS 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 Spesifikasi Hardware dan Software Aplikasi Mobile Tajwid ini dapat berjalan dengan baik apabila spesifikasi perangkat keras (hardware) dan perangkat

140 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 5 th 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,

141 121 Tabel 4.4. Spesifikasi komputer yang disarankan Spesifikasi Keterangan OS Windows XP Processor Intel Pentium GHz VGA 64 MB Memori RAM 256 MB Monitor x768 pixels Perangkat lainnya 1. Keyboard 2. Mouse 3. Sound Card 4. Active Speaker 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

142 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.

143 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 alsākinah, tanwīn dan al-mīm al-sākinah. 2. Penggunaan flash lite menjadikan aplikasi mobile berbasis multimedia ini lebih menarik dan interaktif 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.

144 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

145 125 Daftar Pustaka Al Mahfani M. K Juz Ama Tajwid Berwarna & Terjemahannya. Jakarta: PT WahyuMedia. Fanani, A.Z 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 Metode Al-Bana; Belajar Membaca Al- Qur an Secara Mandiri. Jakarta: Bana Publishing. Global Web Site Introduction to Flash Lite E-learning. nokia.com/info/sw.nokia.com/id/184088f1-358d-4b5b-ba4db1262ae32f9f/ Introduction_to_Flash_Lite_E-learning.html#). 21 Februari 2010, WIB. Madcoms Panduan Lengkap Adobe Flash CS4 Professional. Yogyakarta: Andi. Mussahada M. H. & Rohanto U Membuat Company Profile dengan Adobe Flash. Yogyakarta: Skripta Media Creative. Rauf, A. A. A Pedoman Dauroh Al-Qur an. Jakarta: Markaz Al-Qur an. Sidik Trik Tersembunyi Flash Lite. Yogyakarta: Andi. Sjafi.i A. M Pelajaran Tajwid. Semarang: MG. Semarang Sutopo. A.H Multimedia Interaktif dengan Flash. Yogyakarta: Graha Ilmu.

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

147 Lampiran I Surat-surat Penelitian 127

148 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

149 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

150 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 % 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 % 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 %

151 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 % Jumlah % 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 % Tidak 0 0 % Jumlah %

152 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 % Tidak 0 0 % Jumlah % 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 % Tidak 0 0 % Jumlah % 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.

153 133 Lampiran V Hasil Kuisioner Evaluasi 2 Jawaban Jumlah Presentase (%) Ya 9 90 % Tidak 1 10 % Jumlah % 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 % Tidak 0 10 % Jumlah % 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 % Tidak 0 10 % Jumlah %

154 Lampiran VI Testing 134

155 Lampiran VI Testing 135

156 Lampiran VI Testing 136

157 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_tentan g_aplikasi"); } btn_mc_pilihanmenu3_mutama.onrelease = function() { gotoandstop(1); _root.mc_kotak_dialog_keluar_mutama.gotoandplay("frame1_mc_kot ak_dialog_keluar");

158 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();