12. Tampilan Keluar Tampilan Keluar ini muncul ketika tombol
Keluar di tekan, tampilan Keluar ini berisikan pesan untuk meyakinkan pengguna apakah memang mau keluar dan
menutup aplikasi atau tidak.
Gambar 4.51. Tampilan Keluar
4.1.3. Pengumpulan Bahan Material Material Collecting
Bahan-bahan yang diperlukan untuk membangun aplikasi ini, baik berupa file gambar, teks, animasi, audio dan kontrol navigasi
diperoleh dari berbagai sumber, tetapi sebagian besar bahan dibuat sendiri menggunakan software image editing dan programming, text
editing serta audio editing.
4.1.3.1. Gambar
File gambar untuk background penulis ambil dari internet yang kemudian diolah menggunakan aplikasi Adobe
Photoshop CS4, dengan menambahkan beberapa efek dan gambar lain di dalamnya.
4.1.3.2. Teks
File teks untuk isi materi tajwid dipeoleh dari beberapa buku pembahasan al-Qur’an dan tajwid, sedangkan untuk teks
tulisan arab dan ayat-ayatnya dibuat sendiri oleh penulis dengan menggunakan aplikasi Nonosoft KHOT 3, dengan
melihat dan mencontoh ayat-ayat yang ada di dalam al-Qur’an dan buku pembahasan tajwid.
4.1.3.3. Animasi
Animasi yang ada pada aplikasi ini hanya berupa animasi teks yang diolah menggunakan aplikasi Adobe Flash
CS4 untuk menganimasikannya.
4.1.3.4. Audio
File suara pada aplikasi ini penulis peroleh dari koleksi pribadi, berupa CD Murottal al-Qur’an oleh Syech Sa’ad Al
Ghomidy, baik suara pengucapan Basmallah pada intro maupun pengucapan contoh-contoh ayat untuk hukum-hukum
tajwid yang diolah menggunakan aplikasi Adobe Audition 3.0.
4.1.3.5. Kontrol Navigasi
Kontrol navigasi pada aplikasi ini berupa tombol- tombol button yang didalamnya terdapat link-link yang
menghubungkan antara halaman yang satu ke halaman yang lainnya, tombol navigasi tersebut penulis buat sendiri dengan
menggunakan aplikasi Adobe Photoshop CS4 dan Adobe Flash CS4.
4.1.4. Pembuatan Assembly
Pada tahap pembuatan assembly ini semua bahan-bahan berupa elemen-elemen multimedia dikumpulkan dan diintegrasikan
menjadi satu menggunakan aplikasi Adobe Flash CS4. Pada aplikasi Adobe Flash CS4 dilakukan pengkodean dengan bahasa pemrograman
flash yaitu berupa actionscript 2.0 dengan acuan pemrograman untuk flash lite 2.0, yang pada akhirnya akan menghasilkan aplikasi dalam
bentuk file berformat SWF Movie .swf atau file yang dapat dijalankan menggunakan flash lite player. Aplikasi ini menggunakan layar dengan
ukuran 640x360 pixel dengan tampilan fullscreen. Dalam pembuatan aplikasi Mobile Tajwid ini, menggunakan
perangkat keras hardware dan perangkat lunak software dengan spesifikasi sebagai berikut,
Tabel 4.1. Spesifikasi hardware dan Software
Spesifikasi Keterangan
Processor AMD Athlon 64 X2 2.0 GHz
Memory RAM 2 GB
Harddisk 512 GB
VGA 1 GB
Sistem Operasi OS Windows XP SP3
Software 1. Adobe Flash CS4
2. Adobe Photoshop CS4 3. Adobe Audition 3.0
4. Adobe Device Central CS4 5. Nonosoft KHOT 3
Monitor 17” Wide Screen, 1440x900 pixel
Media Koneksi Bluetooth Device
Perangkat Lainnya 1. Keyboard
2. Mouse 3. Sound Card
4. Active Speaker
Setelah semua spesifikasi perangkat keras hardware dan perangkat lunak software dipenuhi, maka tahap selanjutnya adalah
tahap pembuatan aplikasi dengan menggunakan perangkat lunak software yang telah disiapkan. Beberapa tahapan penting dalam
pembuatan aplikasi Mobile Tajwid ini akan dibahas sebagai berikut. Langkah awal yang penulis lakukan adalah membuat gambar untuk
background aplikasi, yang selanjutnya diteruskan dengan pembuatan gambar-gambar yang lain menggunakan aplikasi Adobe Photoshop CS4.
Gambar 4.52. Pembuatan Gambar Background Aplikasi menggunakan Adobe Photoshop CS4
Setelah gambar background telah selesai dibuat sesuai keinginan, dan di save dengan format .jpg, maka langkah selanjutnya
yang penulis lakukan adalah dengan membuat gambar untuk tombol-
tombol navigasi, seperti tombol-tombol pada Menu Utama, tombol- tombol submenu 1, submenu 2, tombol Kembali, tombol Pilihan dan
tombol-tombol yang ada di dalam menu Pilihan, semua tombol dibuat oleh penulis dengan menggunakan aplikasi Adobe Photoshop CS4, yang
kemudian di save dengan format .png dan selanjutnya dianimasikan dengan menggunakan apliksi Adobe Flash CS4
Gambar 4.53. Pembuatan Tombol Navigasi
Gambar 4.54. Pembuatan Tombol Navigasi Menu Utama dan Submenu 1
Gambar 4.55. Pembuatan Tombol Navigasi Submenu 2
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,
Gambar 4.56. Pembuatan Tampilan Opening
Selanjutnya penulis masuk ke tahap pembuatan tampilan halaman Menu Utama, untuk pembuatan tampilan halaman Menu
Utama, Menu al- Nūn al-Sākinah dan Tanwin, al-Mīm al-Sākinah,huruf
Iżhār, Idgām, Iqlāb, Ikhfā serta menu huruf Iżhār Syafawi, Idgām Mimi, Ikhfā Syafawi, secara garis besar pembuatannnya sama, yang sedikit
membedakan adalah ukuran tombol yang ada teks arabnya lebih kecil daripada tombol Menu Utama, untuk menambahkan teks arab pada
halaman ini, penulis menggunakan aplikasi Nonosoft KHOT 3, dengan cara mengcopy hasil dari ketikan pada aplikasi Nonosoft KHOT 3 ke
halaman Menu Utama yang dibuat pada aplikasi Adobe Flash CS4 pada tahap ini penulis juga memberikan actionscript yang ditempatkan di
setiap frame pada tombol-tombol untuk menuju ke menu berikutnya apabila tombol tersebut di tekan dan actionscript untuk menampilakan
movie clip
Gambar 4.57. Pembuatan Tampilan Halaman Menu Utama
Pada halaman Menu Utama ini terdapat beberapa movie clip untuk menampilkan menu ketika tombol Pilihan di tekan, movie clip
untuk menampilkan halaman Tentang Aplikasi ketika tombol Tentang Aplikasi ditekan serta movie clip tampilan keluar ketika tombol Keluar
ditekan, pada halaman menu-menu yang lainnya juga terdapat movie clip yang sama.
Selanjutnya penulis membuat tampilan halaman untuk contoh dari hukum-hukum al-
Nūn al-Sākinah dan Tanwin, serta al-Mīm al-
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.
Gambar 4.58. Pembuatan Tampilan Halaman Contoh
Gambar 4.59. Pembuatan Teks Arab dan Ayat al-Qur’an
4.1.5. Pengujian Testing
