BRYAN SETYA KUSUMA M3108084

commit to user

i TUGAS AKHIR

PEMBUATAN APLIKASI QUR’AN MULTIMEDIA STUDI KASUS TAFSIR AL MIZAN KARYA S.M.H THABATHABA’I

Diajukan Untuk Memenuhi Salah Satu S yarat Mencap ai Gelar Ahli M ad ya Program Diploma III Teknik Info rmatika

Disusu n Oleh :

BRYAN SETYA KUSUMA

NIM. M3108084

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

ABSTRACT

The Application Making of Multimedia Qur'an in Study Case of Al Mizan: Exegesis of Qur’an Masterpiece of S.M.H Thabathaba'i. Bryan Setya Kusuma NIM M3108084. Informatics Dip loma Program Mathematics and Natu ral Sciences Faculty. UNS.

The Applications of Multimedia Qur'an was developed as an alternative method of society to learn Qur'an. This was due to the information obtained is now only found in the thick books that psychologically redu ce the interest of the public to review and understand Qur'an. This application was designed to co mplete the information of the stud y of Tafsir Al Mizan (Al Mizan: An Exegesis of Qu r’an) into Indonesian la nguage, which was previously presented in English.

The Applications of Multimed ia Qu r'an was created using Adobe Flash, the ActionScript programming language and using a XML database. ActionScript was a collection o f sets of actions, functions, events and event handlers which allow it to make a Flash movie which was more complex and more interactive. XML was a language that was built b y using tags to store the information.

The Aplicatio ns of Mu ltimedia Qur'an mad e had two main menu s including the menu of the Qu r'an to display su rah and verses of Qur’an and the menu of the Qur'an Index to d isplay the topics of Qur’an which was grouped in alphabetical order.

commit to user

v ABSTRAK

Pembuatan Aplikasi Qur’an Multimedia Studi Kasus Tafsir Al Mizan Karya S.M.H Thabathaba’i. Bryan Setya Kusuma NIM M3108084. Program Diploma III Jurusan Teknik Info rmatika, Fakultas M atematika d an Ilmu Pengetahuan Alam.

Aplikasi Qur’an Mu ltimedia ini dikembangkan sebagai metode alternatif masyarakat dalam belajar Al Qur’an. Ini disebabkan informasi yang diperoleh sekarang hanya terd apat pada buku -buku tebal yang secara psikologis mengu rangi minat masyarakat u ntuk mengkaji d an memahami Al Qu r’an. Aplikasi ini dibuat untuk melengkapi informasi stu di tentang Tafsir Al M izan ked alam Bahasa Ind onesia, yang sebelumnya disajikan dalam Bahasa Inggris.

Aplikasi Qur’an M ultimedia ini dibuat menggu nakan Adobe Flash, dengan bahasa pemrograman Action Script dan menggunakan database XML. ActionScript adalah sekumpulan koleksi set dari action, function, event dan event handler yang memungkinkan u ntuk membuat Flash movie yang lebih komplek dan lebih interaktif. XM L merupakan sebuah bahasa yang dibangun d enga n menggunakan tag untuk menyimp an informasi.

Aplikasi Qur’an Multimedia yang telah dibuat memiliki dua menu utama. Yaitu menu al-Qur’an u ntuk menampilkan surat-surat dan ayat-a yat al-Qur’an dan menu Indeks al-Qur’an untu k menampilkan istilah-istilah dalam al-Qur’an yang dikelompokkan sesuai d engan ab jadnya.

MOTTO

commit to user

vii HALAMAN PERSEMBAHAN

“Tugas Akhir ini penulis persembahka n untuk semua orang yang tela h member semangat kepada penulis dalam menyelesaikan laporan Tugas Akhir ini, khusu sn ya kepada kedua orang tua penu lis yang sangat dicintai, Titus, Ferry, Azizah, Pak Didiek, Pak Taufiq, dan teman-teman TI.B 2008 : Sidig, Bang Cho lis, Ryan (Bhuled), Dito, Hanung, Kebo (Dhimas), Bocu n (Sep tian), Pakdhe (Toto), W ahyo nx (Wahyu), Asyhar, Agil, Sulis, Ave, Deka (Ardhito), Zusril, Risang, Deny, Angga, Danang, dan teman-teman lain yang belum disebu tkan naman ya.”

KATA PENGANTAR

Assalamualaikum Wr. Wb

Puji syukur serta ucapan terimakasih p enu lis panjatkan kehad irat Sang ADA atas limpahan karu nia, taufiq serta hida yah-Nya sehingga penulis d apat menyelesaikan penulisan laporan tu gas akhir d engan judul ” PEMBUATAN APLIKASI QUR’AN MULTIMEDIA STUDI KASUS TAFSIR AL M IZAN KARYA S .M.H THABATHABA’I ”.

Penulis mengucapkan terima kasih kep ada semua pihak yang tela h membantu dalam kegiatan Tu gas Akhir Ini. Ucapan terima kasih penulis dib erikan kepada :

1. Kepada Sang ADA yang menjadikan semua ini ada.

2. Kedua Orang Tua d an Saudara yang telah memberikan doa dan semu anya yang dibu tuhkan dalam kegiatan penulis.

3. Bapak Y.S. Palgunadi, M.Sc selaku Ketua Program Studi DIII Ilmu Komputer Fakultas Matematika da n Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

4. Bapak Didiek Sri W iyo no , S.T, M.T selaku dosen pembimb ing TA yang telah banyak memberikan pengarahan, dukungan moril dan saran.

5. S.M.H Thab athaba’i selaku pengarang buku Tafsir Al Mizan yang telah mengabdikan hidup dan ilmunya untuk menfasirkan Al Qur’an.

6. Azharuddin Sahil selaku pengarang bu ku Indeks Al Qu r’an Pand uan M encari Ayat AlQur’an Berdasarkan Kata Dasar.

commit to user

ix

7. Semu a Saudara di Teknik Informatika B 2008 yang telah membantu semangat serta masukan sehingga lapo ran ini d apat selesai dengan baik.

Semoga lapo ran ini b ermanfaat bagi penulis khususnya dan bagi p embaca umumnya.

Wassalamulaiku m Wr. Wb

Surakarta, Juni 2011

DAFTAR ISI

Halaman

HALAM AN JUDUL... i

HALAM AN PERSETUJUAN... ii

HALAM AN PENGESAHAN... iii

ABSTRACT... iv

ABSTRAK... v

MOTTO... vi

HALAM AN PERSEMBAHAN... vii

KATA PENGANTAR... vii

DAFTAR ISI... x

DAFTAR GAM BAR...xii

BAB I PENDAHULUAN 1.1 Latar Belakang Masalah... 1

1.2 Perumusan Masalah... 2

1.3 Batasan Masalah... 2

1.4 Tujuan... 2

1.5 Manfaat... 2

1.6 Metodologi Penulisan... 3

1.7 Sistematika Penulisan... 3

BAB II LANDASAN TEORI 2.1 Tafsir Al Qur’an... 5

commit to user

xi

2.1.1 Elemen M ultimedia... 8

2.2 Adobe Flash... 9

2.2.1 Kompo nen / Tools pada Flash...10

2.2.2 ActionScript... 15

2.3 Adobe Photoshop... 17

2.3.1 M enjalankan Adobe Photoshop... 17

2.3.3 Lembar Kerja Photoshop CS2 ... 18

2.4 XML ( eXtensible Markup Langu age) ... 20

2.4.1 Struktur Dokumen XML ... 20

2.4.2 Deklarasi Optional XML ... 24

BAB III PERANCANGAN 1.1 Bagan Perancangan Aplikasi... 25

1.2 Perancangan Konsep... 26

1.2.1 Rancangan Tampilan Awal... 26

1.2.2 Rancangan Tampilan Menu Al Qur’an... 27

1.2.3 Rancangan Tampilan Menu Tafsir…... 28

1.2.4 Rancangan Tampilan Menu Index…... 29

1.2.5 Rancangan Tampilan Menu Index Abjad... 30

1.3 Pengumpulan Data……… …… …… …… …...30

1.4 Kebutuhan Hardwa re dan Software...31

1.5 Pembuatan Aplikasi..… ……… …… …… …...32

BAB IV IMPLEM ENTASI 4.1 Pembuatan Aplikasi… …...33

4.1.1 Pembu atan Obyek dan Background ...34

4.1.3 Pembu atan Tombol Navigasi…… .. ...36

4.1.4 Pemrograman dengan Actionscript…… ...36

4.2. Hasil Tamp ilan Aplikasi...38

4.2.1 Tampilan Halaman Intro dan Menu Utama… …...38

4.2.2 Tampilan Halaman M enu Al-Qur’an...39

4.2.3 Tampilan Halaman Tafsir...40

4.2.4 Tampilan Halaman Indeks...41

4.2.5 Co ntoh Tampilan Halaman Indeks Abjad...42

BAB V PENUTUP 5.1 Kesimpulan...4 3 5.2 Saran...43

commit to user

xiii DAFTAR GAMBAR

Halaman

Gambar 2.1 Lim a Elemen Multimed ia...8

Gambar 2.2 Tools pad a Flash…… …...11

Gambar 2.3 Stage pada Flash...12

Gambar 2.4 Property Inspector...12

Gambar 2.5 Panel...12

Gambar 2.6 Timeline…… …… …... 13

Gambar 2.7 Pla yhead ... 14

Gambar 2.8 Layer…… …...14

Gambar 2.9 Scene…… …… ... 15

Gambar 2.10 Membuka Adobe Photoshop CS2... 17

Gambar 2.11 Lembar Kerja Photoshop... 18

Gambar 2.12 Struktu r Dokumen XM L ... 21

Gambar 2.13 Contoh Struktur Dokumen XML... 22

Gambar 3.1 Bagan Perancangan Ap likasi....…... 24

Gambar 3.2 Rancangan Tampilan Awal…… …… …… …… ... 25

Gambar 3.3 Rancangan Tampilan Menu Al Qur’an…… … ... 26

Gambar 3.4 Rancangan Tampilan Menu Tafsir... 27

Gambar 3.5 Rancangan Tampilan Menu Index... 28

Gambar 3.6 Rancangan Tampilan Index Abjad... 29

Gambar 4.1 Tamp ilan P embuatan Objek dan Backgrou nd... 33

Gambar 4.2 Tamp ilan P embuatan Intro... 34

Gambar 4.4 Tamp ilan Halaman Intro d an Menu Utama... 37

Gambar 4.5 Tamp ilan Halaman Menu Al-Qur’an... 38

Gambar 4.6 Tamp ilan Halaman Tafsir…... 39

Gambar 4.7 Tamp ilan Halaman Ind eks... 40

commit to user

1 BAB I PENDAHULUAN

1.1Latar Belakang

Di dalam dunia p end idikan di Indonesia terutama pendidikan a gam a khusu sn ya pemb elajaran Kitab al-Qur’an sangatlah penting bagi umat islam. Setiap muslim tentu menyadari, bahwa al-Qur’an meru pakan sebu ah kitab su ci yang berisi tentang ajaran-ajaran dan pedoman bagi selu ruh umat manusia p ada umunya dan khususnya bagi umat Islam.

Dalam usaha menggalakkan studi mengenal al-Quran, metode penunjang pembelajaran terus dikembangkan. Conto hn ya yaitu d engan mena yangkan pembelajaran al-Qur’an pada layar kaca atau televisi. Dalam praktiknya, p roses pembelajaran melalui metode ini keban yakan lebih bersifat satu arah saja dan terbatas dengan waktu penayangann ya. Sela in metode tersebut, metode lain yang paling sering d ilakukan adalah dengan menerbitkan buku-buku teb al pembelajaran al-Qur’an. Tidak jau h bed a dengan meto de sebelumnya, meto de ini masih terasa sulit untuk mengurangi banyaknya masyarakat khususnya u mat islam send iri yang kurang b erminat dalam mempelajari al-Qur’an. Karena secara psikologis metod e penyamp aian dalam bentuk buku-buku tebal akan mengurangi daya tarik masyarakat untu k belajar.

Dari permasalahan itulah perlu ad anya su atu metode alternatif, sistem atau cara yang menarik mas yarakat untuk mengetahu i, mempelajari, dan memaknai arti ayat-ayat al-Qur’an. Salah satun ya dengan adan ya aplikasi berb asis multimed ia yang dapat mengembalikan mo tivasi masyarakat dalam mempelajari tafsir-tafsir al-Qur’an. Yang mana aplikasi terseb ut memu at indeks dari al-Qur’an, ayat-ayat yang terkandung d ari tiap -tiap tema dan penjelasan dari ayat-a yat pada tema tertentu . Dari uraian diatas maka penu lis mencoba memecahkan permasalaha n diatas dengan membu at aplikasi berbasis multimedia. Dengan media ini, maka baik pro ses pengajaran dan pembelajaran diharapkan menjad i lebih m enarik. Da n berdasarkan hal terseb utlah, p enu lis mendap atkan id e untuk membu at ”

2

Pembuatan Aplikasi Qur’an Mu ltimedia Stud i Kasus Tafsir Al M izan Kar ya S.M .H Thab athaba’i ” sebagai judul Tugas Akhir.

1.2Perumusan Masalah

Berdasarkan uraian di atas, maka ru musan masalah dari penu lisa n ini ad alah adalah bagaimana mend esain, membangu n serta mengimplementa sikan suatu aplikasi berb asis multimedia seba gai media pembelajaran Al-Qur’an karya S.M .H Thab athaba’i.

1.3Batasan Masalah

Dengan ad anya p eru musan masalah yang telah d isebutkan, maka batasan masalahn ya adalah p embu atan aplikasi b erbasis multimedia sebagai media p embelajaran al-Qur’an karya S.M.H Thabathab a’i yang mencakup tafsir dan indeks al-Qur’an.

1.4Tujuan

Adapu n tujuan dari penyu sunan tugas akhir ini adalah memb uat aplikasi berbasis multimedia yang menarik bagi masyarakat untu k mempelajari kitab suci Al-Qur’an karya S.M.H Thabathaba’i yang mencakup tafsir dan indeks al-Qur’an.

. 1.5Manfaat :

Adapu n manfaat d ari penyu su nan tugas akhir ini, yaitu bagi : a. Penulis :

Penyusu nan Tugas Akhir ini merupakan wadah penulis untuk menerapka n ilmu- ilmu yang telah penulis peroleh selama proses belajar di bangku kuliah, serta sebagai portofolio penu lis yang dapat d ijadikan referensi ketika mencari pekerjaan di kemudian hari.

commit to user

b. Pengguna :

Produ k Tugas Akhir yang dihasilkan diharapkan dap at memotivasi memud ahkan masyarakat dalam mempelajari dan memahami Al-Qur’an. Selain itu ju ga dapat dijadikan sebagai media pengajar dalam proses pembelajara n di lingkungan p end idikan.

1.6Metodologi Penelitian

Metodologi penelitian yang digunakan dalam penyusunan tu gas akhir ini dib agi menjadi beberapa tahap an. Tahapan-tahapan tersebut adalah sebagai beriku t:

a. Studi Pustaka

Metod e pengumpulan d ata dengan membaca buku-buku atau literatur yang ada hubungannya dengan permasalahan yang dijadikan ob yek tugas akhir.

b. Tahap Implementasi Sistem.

Pada tahap ini dimulai setelah tahap perancangan konsep dilakukan. Pada tahap ini dilakukan p embuatan program d an p embuatan antar muka sistem.

c. Tahap Pembuatan Laporan

Tahap ini dimulai sejalan dengan p embuatan aplikasi.

1.7Sistematikan Penulisan

BAB I : PENDAHULUAN

Pada Bab I mengu raikan mengenai latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, manfaat, metodo logi, sistematika p enulisan.

BAB II : LANDASAN TEORI

Pada Bab II akan menjelaskan tentang landasan b agaimana dasar dari pro gram ini secara keseluruhan mulai d ari proses pembuatan desain hingga proses pembuatan program action script sehingga bisa menghasilkan tutorial interaktif yang baik dan mudah diikuti.

4

BAB III : P ERANCANGAN

Pada Bab III d ijelaskan mengenai perencanaan program mulai dari membu at perancangan konsep dan perancangan desain ap likasiagar bisa menjadi aplikasi pembelajaran interaktif.

BAB IV : IMPLEM ENTASI

Pada Bab IV akan menyajikan data-data pembuatan sekaligu s penjelasan dari program ap likasi yang telah dibuat berupa tampilan program.

BAB V : P ENUTUP

Pada Bab V membahas tentang kesimpulan dan saran-saran yang disampaika n dalam menyempurnakan p enulisan lap oran yang telah dibuat.

commit to user

5 BAB II LANDASAN TEORI

2.1Tafsir Al Qur’an

At-Tafsir (tafsir), yaitu, menjelaskan arti dari ayat Al-Qur'an, menjelaskan impor dan mencari tahu maknanya, ad alah salah satu kegiatan akad emik yang paling awal d alam Islam (Thabathaba’i, 1998). Penafsiran Al-Qur'an dimulai dengan wahyu, sebagaimana jelas dari kata-kata Allah: Bahkan sebagaimana Kami telah mengu tus seo rang Rasul d i antara kamu dari antara kamu yang mengucapkan kepad a And a komunikasi kami dan menyucikan Anda dan mengajarkan Anda Kitab dan kebijaksanaan dan mengajarkan And a b ahwa yang Anda tidak tahu (QS Al Baqarah :151).

Secara garis besar berdasarkan metod e metode yang telah ada, pelajaran yang jelas dari al-Qur’an adalah seb agai berikut :

1. Hal-hal mengenai nama Allah, dan atribut-Nya, seperti hidup-Nya, Pengetahuan, Kekuatan, Penglihatan Pendengaran, dan Kesatuan dll. Seperti untuk PersoNya Allah, Anda akan menemukan bahwa Al-Qur'an percaya bahwa Dia tid ak membutu hkan penggambaran.

2. Hal-hal mengenai tindakan ilahi, seperti pencip taan, ketertiban, akan, ingin, p anduan, menyesatkan, kepu tusan, mengu kur, paksaan, delegasi (Power), kesenangan, ketidakse nangan d an tind akan serup a lainnya. 3. Hal-hal yang bersangkutan dengan link perantara antara Alla h dan manusia, sep erti Tirai, Tablet, Pena, Singgasana, Ketua, Gedu ng Dihuni, la ngit, bumi, para malaikat, para setan, jin dan lain-la in.

4. Rincian tentang manusia sebelum ia datang ke dunia ini.

5. Terkait kepada manusia dalam kehidupan ini, seperti sejarah umat manusia, pengetahuan tentang dirin ya sendiri, fo ndasi masyarakat, kenabian dan kerasulan, wahyu, inspirasi, bu ku dan agama dan hu kum penting. Status tinggi dari nab i, bersinar melalui kisah-kisah mereka, berada di bawah pos ini.

6

6. Pengetahuan tentang manusia setelah ia berangkat d ari du nia ini, yaitu, al-Barzakh.

7. Hal-hal tentang karakter manusia. Di bawah judul ini datang berbagai tahap melalui mana teman-teman Allah lu lus dalam perjalanan spiritual mereka, seperti penyerahan, iman, kebajika n, kerendahan hati, kemurnia n niat dan kebajikan lainnya.

Sebagai akib at langsung dari meto de ini, kita tidak p ernah merasa ad a kebutuhan untuk menafsirkan suatu ayat terhad ap makna yang tampak jelas. Seperti yang telah kita katakan sebelumnya, ini jenis p enafsiran adalah misinterpretasi fakta. Adapun bahwa "interpretasi" yang Qur'an telah disebutkan dalam berbagai ayat, itu bukan tip e "makna", itu adalah sesuatu yang lain.

Pada penyu sunan program aplikasi tafsir ini diambil dari bu ku Tafsir Al Mizan karya Allam ah S.M .H Thabathaba’i untuk data tafsir tiap surat dalam Al Qur’an.

2.2Indeks Al-Qur’an

Pada umumnya kata ind eks berarti sederetan kata atau istilah penting yang disusun secara alfabetis pada akhir seb uah bu ku, yang memb erikan informasi mengenai halaman tempat kata atau istilah itu ditemukan.

Akan tetapi ind eks juga dap at berarti sedikit lain, terutama jika dihubungkan dengan Kitab Su ci seperti Indeks al-Qur’an. Tidak sekedar daftar kata yang memuat informasi mengenai halama n tempat kata atau istilah yam g ditemukan, melainkan berarti d aftar kata yang terdapat dalam Kitab Suci al-Qur’an, disertai kutipan naskah berupa p enggalan ayat yang me nga ndung kata itu, dan dilengkapi dengan keterangan no mor surat atau nomor ayatnya.

Ind eks dalam pengertian diatas tentu saja belum terdapat dalam Kamus Besar Bahasa Indonesia (KBBI), namun dapat dipertimbangkan u ntuk menjad i salah satu muatan makna kata dalam lema (entri) “indeks”. Dalam bahasa Ind onesia, istilah lain untuk indeks yang di maksudkan diatas disebut juga dengan “konkordansi”. Namun karena bahasa itu bersifat arbitrer(manasuka), maka

commit to user

dengan sedikit mengutak atik dunia semantik, pengertian indeks pu n – sejauh menyangkut Kitab Suci al-Qur’an – dapat meluas lagi, b ukan han ya sekedr konkordansi, karena ke nyataanya sekarang berkembang ind eks jenis lain yang tid ak dap at dikelompo kkan dengan p engertian indeks atau konkordansi termaksu d, d an untuk memudahkan pembatasan, kita sebut saja “klasifikasi”.vdengan kata lain, dalam masyarakat kita sekara ng berkembang du a macam indeks al-Qur’an, yang satu dapat disebut “konkordansi” d an yang lainnya populer dengan nama “ klasifikasi”. Perbedaan antara keduanya terletak d ari cara penggarapan dan model penggolongannya saja (Sahil, 1998).

Penyusu nan indeks pada ap likasi disusun secara alfabetis. Dimulai dari ab jad A sampai dengan abjad terakhir. M isalnya pada abjad A, akan b erisi susunan istilah yang dimulai dengan huruf A, yang terdapat di dalam setiap ayat – ayat al-Qur’an.

2.3 Pengertian Multimedia

Multimed ia memiliki pengertian. Dean (1996) menyatakan bahwa istila h mu ltimedia berasal d ari teater, yaitu pertunjukan yang memanfaatkan leb ih dari satu med ium di p anggung yang mencaku p monitor video, synthesized band, dan karya seni manusia sebagai bagian dari pertunjukan. Namun berbeda dengan pengertian multimedia seb elumnya (multi-med ia), istilah multimedia dalam hal ini berarti suatu sistem yang terdiri d ari perangkat keras, perangkat lunak dan alat-alat lain seperti televisi, monitor vodeo dan sistemv piringan optik atau stereo yang dimaksudkan u ntuk dapat menghasilkan sajian audio visual penuh (McLeod, 1996). Pengetian kedua mensyaratkan adanya sinkro nisasi beberapa media tasi dengan bantuan komputer, membed akannya dengan pengertian multimed ia yang pertama yang memanfaatkan b erbagai media ya ng terpisah dan berdiri sendiri (Fatah dan P eurwanto, 2010).

Beb erapa pakar mengartikan multimedia sebagai b eriku t :

1. Multimed ia secara umum merupakan ko mb inasi 3 elemen, yaitu su ara, gambar dan teks (M c Cormick, 1996).

8

2. Multimed ia adalah kombinasi dari paling sedikit 2 media input atau output dari data. Med ia ini dapat audio (musik), animasi, video, teks, grafik, dan gambar (Turban,dkk.,2002).

3. Multimed ia merup akan alat yang dapat menciptakan p resentasi dinamis dan interaktif yang mengombinasikan teks, grafik, animasi, audio, dan gambar video (Robin d an Linda, 2001).

4. Multimed ia adalah pemanfaatan kompu ter u ntuk membuat dan menggab ungkan teks teks, grafik, aud io, gambar bergerak (video dan animasi) dengan menggab ungkan link dan tool yang memungkinka n pemakai melakukan navigasi, b erkreasi, berinteraksi dan berkomunikasi(Hofstetter,2001).

2.1.1 Elemen Multimedia

Menurut Senn (1998), mu ltimedia terbagi dalam beberapa eleme n sep erti yang terlihat gambar d ibawah ini.

Gambar 2.1 Lima Elemen Multimedia Sumb er : Senn, 1998

Multimedia

Audio Image

Video Anim ation

commit to user

1. Text

Bentu k data multimedia yang paling mudah disimpan dan dikendalikan ad alah text (teks). Teks dapat membentuk kata, surat atau narasi dalam mu ltimedia yang men yajikan bahasa. Kebu tuhan teks bergantu ng pad a penggunaan ap likasi multimedia.

2. Image

Image (grafik) merupakan sebuah hasil dari p engambilan citra yang dap at melalui alat penangkap citra, seperti kamera dan scanner, yang hasilnya sering d isebut d engan gambar. Gambar bisa berwujud sebu ah ikon, foto ataupu n simbol.

3. Audio

Audio (suara) adalah ko mponen multimedia ya ng d apat berwujud narasi, mu sik, efek suara atau penggabungan diantara ketiganya.

4. Video

Video merupakan sajia n gambar dan suara yang d itangkap o leh sebuah kamera, yang kemudian disusun dalam urutan frame untuk dib aca dalam satu an detik.

5. Animation

Animation (animasi) merupakan penggunaan komputer untuk menciptakan gerak p ada layar.

6. Virtual Rea lity

Dalam perkembangannya, komponen mu ltimedia b ertambah satu lagi yaitu virtual reality. Virtual Reality memungkinkan terjadinya hubungan timbal balik antar-user dengan ap likasi multim edia secara nyata.

Contohya seperti Microsoft Surface atau Eye Toy PS 2.

2.3Adobe Flash

Perangkat lu nak ad ob e flash yang selanjutn ya disebut Flash, dulu nya “M acromedia Flash”, merupakan software multimed ia unggu lan yang dulunya dikembangkan oleh Macromed ia, tetapi sekarang dikembangkan dan did istrib usikan o leh Adobe System. Sejak tahun 1996, flash menjadi metod e

10

popular untuk menamb ahkan animasi dan interaktif website. Flash biasanya digunakan u ntuk membuat animasi, hiburan dan berbagai kompo nen web, diintegrasikan d engan video dalam halaman web sehingga menjadi ap ikasimultimedia yang kaya (Rich Intrernet Application. (Sunyoto, 2010).

Flash tidak hanya digunakan untuk aplikasi Web, tetapi juga digunakan untuk memb angu n aplikasi desktop karena aplikasi Flash selain dikompilasi menjadi format.swf, Flash juga dikompilasi menjad i fo rmat .exe.

Flash dap at digunakan untuk memanipulasi vector dan citra raster, dan mendukung bid irectional stream ing audio dan vid eo. Flash juga berisi skrip yang dib erinama “ActionScript”. Beberapa produk software, system dan device dapat membu at dan menampilkan isi Flash. Flash dijalankan d engan Adobe Flash Pla yer yang dapat ditanam p ad a bro wser, telepon seluler atau software lain.

Format file Flash ad alah SWF, b iasanya disebut “ShockWave Flash”

movie. “Flash M ovie” atau “Flash Game”, bia sanya file berekstensi swf dapat dijalanka n melalui web, secara stand alone pada Flash Player atau dijalankan di windows secara langsung d engan membu atnya dalam format ekstensi .exe.

2.4.1 Komponen / Tools pada Adobe Flash

Sebelum mulai mempelajari Flash, perlu diketahui beberapa istilah yang digunakan dalam Flash, serta bagaimana aturan menggunakann ya. Toolbo x berisi alat-alat kerja dengan icon u ntuk masing-masing fungsi. Toolbox terdiri dari empat b agian, yaitu tools, view, color dan options.

TOOLS b erisi fungsi-fungsi untu k menggambar, memilih, membuat teks, mewarnai, menghapus, dan membuat path. Tools terd iri dari b eberapa icon untuk menggamb ar, yaitu :

1. Pencil Tool - untuk menggambar garis sep erti menggunakan pensil 2. Line Tool - untu k menggambar garis lurus

3. Oval Tool - untu k menggambar lingkaran dan elips 4. Rectangle Tool - untuk menggamb ar ko tak

5. Brush Tool - untuk menggamb ar menggunakan brush

commit to user

Lengku ng

VIEW b erisi fungsi-fungsi untu k mewarnai.

1. Zoom Tool - untuk memperb esar dan memperkecil gamb ar 2. Hand Too l - untu k menggeser gambar

COLORS berisi fungsi-fungsi untuk menampilkan gambar.

1. Stroke Colo r - untuk menentukan warna outline p ada gambar 2. Fill Color - untuk mewarnai gambar

OPTIONS berisi pilihan lain untuk membuat variasi pada fungsi-fungsi tools d an view. Bila Eraser tool diklik, akan mu ncu l Eraser mode, Faucet dan Eraser hape, dengan ban yak pilihan.

Gambar 2.2 Tools pada F lash

1. Stage

Seperti film, Flash movie mempunyai panjang yang terdiri dari sejumla h frame. Stage merupakan b idang yang berwarna putih, dimana semu a ob ject sep erti gambar, teks dan foto ditempatkan dan d iatur di d alamnya. Memperbesar dan memperkecil stage Tamp ilan sta ge dapat diubah dengan mengu bah

12

magnification level atau mengubah ukuran stage dengan view command.

Gambar 2.3 Stage p ada Flash

2. Property Inspector

Properti berfu ngsi untuk menampilkan serta mengubah info rmasi object yang berada d i stage, seperti mengatur character, alignment, d an lain-lain.

Gambar 2.4 Property Inspector

3. Panel

Terdapat beberapa macam panel dalam Flash, dan setiap panel menampilkan informasi dari suatu object yang kita kehendaki, sep erti simb ol, warna, frame, dan lain-la in.

commit to user

4. Timeline

Timeline digunakan untu k mengatur semua jalan cerita, di mana actor ditampilkan dan menghilang. Suatu object yang mu ncul diatur dalam Timeline tersebut. Kompo nen utama dalam Timeline adalah la yer, frame dan playhead. Timeline berfu ngsi untuk mengatu r waktu suatu movie dan memunculkan ob jek tertentu. Penempatan efek suara dan musik latar belakang juga diatur dalam Timeline.

Gambar 2.6 Timeline

5. Frame

Frame adalah gamb ar yang membentuk suatu gerakan bila frame terseb ut ditampilkan satu demi satu berurutan. Frame merupakan konsep animasi yang dibuat secara manual maupun dengan alat bantu komputer.Untuk membu at mo vie menyajikan su atu action pada saat p layhead mencapai frame tertentu pad a Timeline. Gambar memperlihatkan actio n yang berada pada frame 5.

6. Playhead

Pla yhead dengan garis merah vertikal, menunjukkan posisi frame berad a pada su atu saat. Bila posisi playhead tersebut berubah, maka gambar yang ad a d i stage juga berub ah. Pada Gamb ar 5 dapat dilihat posisi p layhead yang menunjukkan posisi frame.

14

Gambar 2.7 Playhead

7. Layer

Layer digunakan untuk menempatkan object yang berb ed a-beda seperti kertas transparan, dimana beberapa la yer bersama-sama merupakan suatu gambar yang lengkap. Ob ject tidak hanya gambar anima si saja, melainkan d apat berupa gambar latar belakang, teks, movie dan su ara. Setiap object berad a pada layer tersendiri yang indep enden. Macam-macam layer dapat d ilihat pada gambar berikut.

Gambar 2.8 Layer

8. Scene

Pada pembuatan film yang mempunyai jalan cerita cukup panjang, u ntuk memud ahkan p engembu atannya, maka dibagi-bagi menjadi b eberapa tema yang din yatakan dalam scene. Seperti halnya p embuatan film yang terdiri dari banyak scene, animasi juga dibuat d engan konsep yang sama, untuk memud ahkan dalam mengatur mo vie. Nama scene dapat d iubah dengan mengklik d ua kali pada nama scene tersebut, kemudian diketik nama yang dikehendaki. Untuk menampilkan panel Scene seperti Gambar p ilih menu W indow —— > Scene.

commit to user

Gambar 2.9 Scene

2.4.2 ActionScript

Seperti yang diterangkan sebelumnya bahwa Flash mempunyai bahasa skrip yang diberi nama Actio nScript. ActionScrip t adalah menunjukka n koleksi set dari action, function, even t dan event handler yang memungkinkan dikembangkan oleh developer untu membu at Flash movie yang lebih komplek dan lebih interaktif. ActionScript mengalami evo lusi kearah stand ar bahasa pemrograman, yaitu versi 1, versi 2, dan versi 3. (Sunyoto, 2010)

ActionScript menunjuk ke salah satu style programming ke ECMAScript 4, merupakan basisnya JavaScrip t.

Sebuah Flash movie bisa terdiri dari beberapa scenes. Masing-masing

scene mempunyai sebu ah timeline. M asing-masing timeline dimulai dari frame 1 dan seterusn ya. Sebuah normal state sebuah Flash movie bersifat dapat berpindah dari scene 1, fra me 1 dan berakhir pada scene 1 dan scene 2 d an seterusnya. Kita dapat mengeset movie berjalaln dari awal samp ai akhir frame dan akhir d i semu a

scene, serrta menghentikannay. Kita dapat mengeset movie terseb ut berulang-ulang.

Tujuan ActionScript adalah mengubah kebiasaan linier tersebut. Sebuah ActionScript d apat menghentikan sebuha movie di frame tertentu, dan berulang ke frame sebelumnya, atau frame mana yang ditampilkan trergantung masu kan yang diberikan user. ActionScript dapat digu nakan untuk membuat sebuah movie

16

Akan tetapi, tidak semua Flash moviememerlukan ActionScript. Berikut fungsi d asar yang dapat dilakukan oleh ActionScrip t.

1. Animation

Tidak memerlukan Actio nScript jika hanya membuat animasi sederhana. Tetapi script dapat memb atu membuat animasi yang ko mplek. Sebagai contoh, seb uah bola dap at memantul pada layer disekeliling layer yang mengabaikan prinsip fisika. Tetapi jika bola itu memantul ke tanah , maka akan memerlukan prinsip gravitasi. Tanpa ActionScript, kita akan membuat animasi tersebut seb anyak ratusan frame. Namun, d engan ActionScript dapat d ilakukan hanya dengan satu frame.

2. Navigation

Secara d efault dapat bergerak kedepan satu demi satu frame samp ai selesai. Dengan Actio nScript, kita dapat membuat menu u ntuk berhnti di sembarang frame dan meneruskan ke fra me sesuai pilihan dari user.

3. User Input

Kita dapat memberikan konfirmais (pertanyaan) ke user u ntuk meminta masukan dan mengirimkan informasi tersebut ke server. Sebuah Flash movie

dengan beb erap a ActionScript dapat digunakan untuk membangun aplikasi web . 4. Memperoleh Data

Sebuah Actio nScript dapat berinteraksi d engan server. Kita d apat mengupdate informasi d an menampilkannya ke user.

5. Calculation

ActionScript dapat melakukan kalku lasi, misalnya dapat diterapkan pad a ap likasi shopping chart.

6. Graphic

ActionScript dapat mengu bah sebuah uku ran graphic, sudut rotasi, warna

movie clip dalam movie, serta dapat menduplikasikan dan menghapus item dari

screen.

7. Environment.

commit to user

8. Music

Memutar musik dengan ActionScrip t adlah sebuah alternative yang b agus. ActionScript dapat mengontrol dapat balan ce dan volu me. Kita dap at menghasilkan inovasi yang b aru dengan cara menggabungkan kemamp uan programming ActionScript dan imaginasi yang kuat.

2.4Adobe Photoshop

Para web design mau pu n graphic d esig n cenderung leb ih ban ya k menggunakan pro gram Adobe Photo shop u ntuk membantu pekerjaan d i bidang masing-masing karena mud ah d igunakan, memiliki warna cerah, mendukung plu g-in d ari pihak ketiga, dan hasil output yang fantastik.

2.5.1 Menjalankan Adobe Photoshop

Untuk menjalankan Photoshop CS2, lakukan langkah-langkah beriku t ini :

1. Klik tombol Start -> All Programs -> Adobe Photoshop CS2. Selain cara ini anda d apat menjalankan Photoshop melalui desktop dengan memilih iconPhotoshop yang anda buat/ persiapkan sebelumnya.

18

2. Tunggu beberapa saat hingga tamp il lembar kerja Pho toshop CS2.

Gambar 2.11 Lembar Kerja Photo shop

2.5.2 Lembar Kerja Photoshop CS2

Jika and a p endatang baru yang ingin belajar dan menekuni bid ang grafis dan akan menggu nakan Pho toshop, maka sebaiknya anda lebih familiar d engan lembar kerja yang disuguhkan Adobe pho toshop cs2 .

Lembar kerja Photoshop d ilengkapi dengan beberapa komponen seb agai berikut :

1. Title Bar

1. Restore : d igunakan untuk mengembalikan uku ran jend ela aplikasi ke bentu k semula (sebelum d irubah ukurannya).

2. Mo ve : digu nakan untuk memindah jendela aplikasi.

3. Size : digunakan u ntuk merubah ukuran jendela aplikasi.

4. Minimize : digunakan untuk meru bah uku ran jendela aplikasi menjadi uku ran terkecil yang diletakkan dibaris taskbar.

5. Ma ximize : digunakan untuk merubah ukuran jendela aplikasi menjadi satu la yar penuh.

commit to user

2. Menu Bar

Yaitu sederetan menu yang dipersiapkan untuk membantu dalam proses pembuatan/ pada saat melakukan editing pada gambar. Dari masing-masing menu pada menu bar d ib erikan nama yang berlainan u ntuk membed akan fungsi dan kegu naan secara spesifik pad a menu tersebut.Untu k mengaktifkan menu sala h satu menu tersebut dapat dilaku kan dengan salah satu cara dibawah ini :

1. Klik pada menu yang akan anda aktifkan, selanjutnya klik pada sub menu yang ingin anda gunakan.

2. Gunakan tombol Alt+hu ruf yang digaris bawahi pada menu . Misalnya alt+L untuk mengaktifkan menu Layer untuk selanjutn ya gunakan ana k panah kiri (

berikutnya. 3. Options Bar

Options bar adlah pilihan tombol yang ditampilkan untuk melengkapi pilihan pad a toolbox, jika pada computer yang and a gunakan b elum diaktifkan, la kukan langkah berikut untuk mengaktifkan Optio n Bar : Klik menu Windo w => Option atau dengan tombo l Alt+W, maka p ada bagian bawah menu bar aka n tampil sebuah tombol optio ns.

4. Toolbox

Saat pertama anda menjalankan Photoshop, toolbox akan diletakkan dib agian sebelah kiri layar. Toolbox ad alah to mbol yang digunakan untuk membu at dan melakukan editing gambar. Untuk memilih toolbox dengan cara melakukan klik pada tombol yang anda ke hendaki, bagian yang dilengkap i dengan anak panah dibagian kanan b awah pada tombol, tand a tersebut menunjukkan tombol tersebut masih men yimp an to mbol lain yang tersembu nyi. Masing-masing tombol dalam toolbox mempunyai nama, untuk menamp ilkan nama toolbox yaitu dengan cara menempatkan pointer mouse di atas tombol tersebut, maka akan tampil tool tip yang menampilkan nama tombol d an p erintah shortcut yang berguna u ntu k menggunakan tombol tersebut secara cepat.

20

5. Palettes

Palettes memb antu anda untuk melakukan monitoring dan memperb aiki gambar. Dalam keadaan default palette akan ditempatkan secara bersamaan dalam satu group.

2.5XML ( eXtensible Markup Language)

Saat ini XM L sangat popu lar. Format penyimpanan data XM L membuat platform ini independen dan bermacam aplikasi dapat mempro sesn ya dengan mudah, tid ak terkecuali Adobe Flash yang juga dap at bekerja dengan file XML. (Sunyoto , 2010).

XML kepanjangan dari “eXtensib le Markup Language”. Dalam kaita n dengan bahasa pemrograman, kata “extensible” berarti pengembang d apat mengembangkan kemamp uannya. Informasi dalam XM L disimp an didalam tag. Markup berarti sebuah bahasa yang d ibangun dengan menggu nakan tag u ntuk mengelilinginya atau markup text.

Pada HTML, tag did efinisikan dan diterjamhkan oleh b rowser. Tag akan mengatakn pada browser untuk memformat objek seperti text, imag e dan form.

Pada XM L tidak ada struktur informasi yang disampaikan sperti pad a HTML sehingga untuk m enampilkan info rmasi diperlukan parser untuk menerjemahkna antara data dan tag.

2.5.1 Struktur Dokumen XML

Dokumen XML berisi informasi dan markup yang dibagi menjadi beberapa bagian yang penting, yaitu :

1. Elemen

Masing-masing dokumen XML berisi satu atau leb ih elemen. Elemen mengenalkan dan menandakan isi. Elemen mendominasi d idalam do kumen XML. Beberap a o rang menyebut elemen dengan nodes. Atu ran penulisan XM L adalah

ca se sen sitive.

Berikut contoh sebuah elemen : <tag>Some Text</tag>

commit to user

Elemen diatas berisi du a tag dan beberapa text. Elemen dapat b erisi elemen yang lain. Elemen d apat juga b erisi “kosong” (tidak berisi text), seperti HTM L-XML dimulai dengan tag pembuka dan penutup.

Sebuah elemen kosong dituliskan dengan : <tagname></ tagname > atau <tagname/>

Ketika elemen berisi elemen yang lain, elemen yang diisi disebut parent

dan elemen d idalamnya disebu t child.

<tagname>

<childTag>text being markup</ childTag> </ tagname >

Elemen pertama pada dokumen XM L disebu t root element atau document root atau roo t node. Roo t elemen beisi elemen yang lain. Struktur dokumen XML dapat dilihat pada ilustrasi berikut.

Root node

ChildNodes

Sibling nodes

22

Atau contoh lain dapat dilihat pada model berikut :

Gambar 2.13 Contoh Struktur Dokumen XML

2. Atribut

Atribut berfungsi sebagai tambahan info rmasi tentang sebuah elemen. Atribut disimpan dengan tag pembuka sebuah elemen setelah nama elemen. Atribut menguraikan antara nama dan nilainya dan setiap atribut haru s berisi keduanya, yaitu nama dan nilai.

<tagname attributeName=”attributeValue”> <childTag>text being markup</ childTag> </ tagname >

3. Text

Text menggambarkan isi informasi di antara tag pembuka dan tag penutup elemen. Dalam kasus ini “Michael” d isimpan d i antara tag <fullName> dan </fullName>. Skrip selengkapnya adalah sebagai berikut :

<fullName> Michael </fullName> child child <gallery> <image> <image> <image> Image1.jpg Image2.jpg Image3.jpg child child child child

commit to user

Text di antara tag pembuka dan penututp adalah sebuah elemen akan dip roses dalam pengolahan XML sehingga sp ecial karakter, sperti “<” dan “>” diganti entiti &lt; dan &gt;.

4. Comment

Comment dalam XML sama d engan co mment pada HTM l,, yatiu dimulai d engan karakter “<!—“ dan diakhiri dengan “-->”.

Contoh comment di dalam XM L.

<!—here is a commented line -->

Comment juga sangat b erguna sebagai cara untuk meninggalkan p esan pengguna lain sebuah dokumen XML tanpa mem pengaruhi bagaimana doku men tersebut diproses. Semu a software memproses selalu mengab aikan comment

dalam dokumen XM L.

5. CDATA

CDATA terdiri dari data karakter. Didalam CDATA block text tidak dip roses. Sebagai contoh, kita dapat menggunakan CDATA untu k informasi berisi karakter <, > atau &.

CDATA dimulai dengan <![ CDATA dan diakhiri dengan ]>. Contoh CDATA ad alah sebagai beriku t.

<! CDATA[ 3<5

Or 2> ]]>

24

2.5.2 Deklarasi Optional XML 1. Deklarasi XML

Sebuah dokumen XM L biasanya dimulai dari XML declaration, meskip un itu bersifat o ptional. Deklarasi XM L b erada pada baris pertama doku men XM L. Contoh deklarasi XM L adalah seb agai berikut :

<?xml version=”1.0”?>

Deklarasi XM L berisi versi XML. Dalam co ntoh diatas ad alah versi 1.0, merupakan versi terakhir pada waktu buku ini ditulis adalah versi 1.1.

2. Documrnt Type Definitions (DTD)

Documrnt Type Definitions (DTDs) dan d eklarasi DOCTYPE merupakan pasangan jika dideklarasikan p ada XM L.

Sebuah DTD menyediakan informasi tentang elemen mana yang legal dalam seb uah dokumen XML dan memeb eri tahu elemen mana yang wajib dan mana yang optional. Dengan kata lain, DTDmenyediakan validasi aturan dokumen XML. DTD dapat d ilihat pada co ntoh beriku t.

<?xml version=”1.0”?>

<!DOCTYPE phonebook SYSTEM “phonebook.dtd”>

3. XML Well Formed

Penulisan do ku men XM L harus memenuhi aturan, atau dengan kata lain haru s

well formed.

Pada XHTM L menyed iakan aturan standar untuk menuliskan tag. Kita haru s menuliskan <ul> <li> </li> </ul> untu k membuat list. Sebuah XML dikatakn well form jika memenuhi kriteria :

1. Dokumen berisi satu atau leb ih elemen.

2. Dokumen berisi sin gle root elemen, yang mana verisi beb erapa elemen di dalamnya.

3. Tiap elemen harus ditutup.

4. Tag pembukak dan penutup harus sama (ca se sensitive).

commit to user

25 BAB III PERANCANGAN

3.1 Bagan Perancangan Aplikasi

Adapu n bagan perancangan dalam p embuatan aplikasi ini, sep erti ditunjukkan dalam Gambar 3.1 dibawah ini.

Gambar 3.1 Bagan Perancangan Aplikasi

Keterangan :

1. Perancangan Konsep

Langkah awal yang dilakukan d alam pembuatan aplikasi ini yaitu dengan merancang konsep , bagaimana menyusu n aplikasi agar aplikasi nantinya lebih menarik pengguna aplikasi ini. Perancangan ini meliputi pembuatan desain tampilan.

2. Pengumpulan Data

Yaitu mengumpulkan data yang dip erlukan untu k melengkapi aplikasi. 3. Persiapan Hardware dan Software

Memp ersiapkan hardware maupun software yang akan digu nakan sebagai sarana dalam proses pembuatan aplikasi.

Perancangan Konsep

Pengumpulan Data

Persiapan Hardware

dan Software

26

4. Pembuatan Aplikasi

Membuat aplikasi dan mengintegrasikan semua elemen– elemen yang dibutuhkan sep erti gambar, teks, maupun suara sehingga menghasilka n ap likasi mu ltimedia yang baik dan mudah dip ahami.

3.2 Perancangan Konsep

Dari hasil perancangan aplikasi ini d apat diketahu i ap likasi terdiri dari bagan-bagan sep erti dibawah ini.

3.2.1 Rancangan Tampilan Awal

Gambar 3.2 Rancangan Tampilan Awal

Keterangan :

Halaman awal merup akan halaman utama ketika menjalankan ap likasi ini. Dari aplikasi d i atas terdapat dua tombol yaitu Qur’an dan Index. Tombol Al Qur’an a kan mengarahkan aplikasi ke menu Qur’an. Sedangkan To mbol Index akan mengarahkan aplikasi ke menu indeks istilah di dalam AlQu r’an.

Al Qur’an

Index Al Qur’an

commit to user

3.2.1 Rancangan Tampilan Menu Al Qur’an

Dibawah ini merupakan rancangan tampilan darip ad a aksi ketika tombol Qur’an pada tampilan menu u tama d i klik.

Gambar 3.3 Rancanga n Tampilan Menu Al Qur’an Keterangan :

1. Merup akan combobox yang berisi surat-surat Al Qur’an. 2. Merup akan combobox yang berisi ayat-a yat Al Qur’an.

3. Merup akan combobox yang digunakan untu k mengubah arti dari ayat Al-Qur’an b erbahasa Indonesia maupun Inggris.

4. Merup akan tombo l untu k menafsirkan Al Qur’an.

5. Merup akan area untuk menampilkan a yat-a yat b eserta arti dari Al Qur’an. 6. Merup akan tombo l untuk kemb ali ke menu utama.

7. Merup akan tombol untuk mendengarkan mau pu n menghentikan murotal surat dari Al Qur’an.

28

3.2.2 Rancangan Tampilan Menu Tafsir

Dibawah ini merup akan rancangan tampilan daripada aksi ketika to mbol Tafsir pada tampilan menu Qur’an di klik.

Gambar 3.4 Rancangan Tampilan Menu Tafsir Keterangan :

Dari gambar 3.4 d iatas, terdapat 3 menu yaitu co mbobox Surat , co mbobox

IND/ENG, dan to mbol Back ke M enu Qur’an. Sama halnya dengan seb elumnya tombol IND/ENG berguna u ntuk mengko nversi tafsir yang ditampilkan pada text

area diatas berbahasa Indonesia maupun Inggris. Sed angkan to mbol Back

commit to user

3.2.3 Rancangan Tampilan Menu Index

Dibawah ini merup akan rancangan tampilan daripada aksi ketika to mbol Ind ex pad a tampilan menu utama di klik.

Gambar 3.5 Rancangan Tampilan Menu Index Keterangan :

Dari gambar rancangan diatas, terdap at sekumpulan abjad yang merupakan tombol di tiap -tiap abjad . Tombol abjad tersebut bermaksud u ntuk mengelompokkan istilah-istilah dalam al-Qur’an yang sesuai dengan abjadnya. Tombol back digunaka n untuk kemb ali ke menu utama.

30

3.2.4 Rancangan Tampilan Index Abjad

Dibawah ini merup akan rancangan tampilan daripada aksi ketika to mbol Abjad pada tampilan Index di klik.

Gambar 3.6 Rancangan Tampilan Ind ex Abjad Keterangan :

Gambar di atas menunjukkan tampilan ketika salah satu abjad d iatas di klik. Ketika tombo l abjad diklik. Maka akan tersedia b eberapa combobo x.

Combobox tersebut berisi tema-tema dan Q.S. al-Quran yang terkandung sesuai dengan abjad yang dipilih.

3.3 Pengumpulan Data

Setelah pembuatan perancangana konsep, maka selanjutnya adalah pengumpulan data. Pada hasil perancangan d iatas maka kebutuhan data yang dip erlukan diantaranya : desain imag e, isi daripada konten aplikasi. Desain image

berguna untuk sebuah desain yang dap at dijad ikan latar belakang d ari ap likasi, menjadi sebuah to mbol yang di konversi ke bentuk button terlebih d ahu lu. Sedangkan untuk pengisian aplikasi yang berupa surat, ayat, arti ayat, murotal al-Qur’an dan tafsir d iamb il dari buku Tafsir Al Mizan karya Sayid Husain Thabathaba’i, yang telah diterjem ahkan oleh Ilyas Hasan d an dari situs Al Mizan

commit to user

al-Qur’an seperti istilah-istilah yang terdap at pad a tiap ayat d alam al-Qur’an diambil dari buku Ind eks al-Qur’an P anduan Mencari Ayat AlQur’an Berdasarkan Kata Dasar karya Azharuddin S ahil.

3.4 Kebutuhan Hardware dan Software

Adapu n alat yang d igunakan dalam p embu atan program tu gas akhir ini, dib agi menjadi 2 yaitu Hardware dan Software. Alat yang digunakan sebagai berikut .

1. Hardwa re

a. Seperangkat komputer dengan sp esifikasi :

Processor :Intel® Core™ i7 CPU 870 @ 2,93 GHZ Memory : 4 GB

Resolu si : 800 x600 Hardisk : 500 GB

OS : Windo ws 7 Ho me Premium 64 bit (6,1 build 7601) b. CD Blank

c. Speaker

2. Software

a. Adobe Flash Cs3

Merupakan software utama d alam pembu atan aplika si ini. Software

ini dapat menmpilkan gabungan antara grafik, suara, teks, animasi yang akan yang disimpan menjadi *.fla dan dap at di ko nversi menjadi *.swf atau *.exe.

b. Adobe Photoshop Cs2

Merupakan softwa re yang digu nakan untuk me ngolah gamabar yang dib utuhkan dalam aplikasi ini.

c. Flash Pla yer

Software yang berguna u ntuk memainkan hasil dari pembuatan aplikasi ini.

d. Nero Burning Room

32

3.5Pembuatan Aplikasi

Proses pembuatan aplikasi menggunakan software Adobe Flash. Pembuatan aplikasi terdiri dari pembuatan latar belakang, tombol-tombol dan animasi. Pembuatan latar belakang sebagaian besar dikerjakan menggunakan Adobe Photo shop. Pro ses p embuatan menggunakan beberapa images yang kemudian digabung agar imag e tersebut lebih menarik. Sedangkan objek tambahan seperti judul ataupu n header dan footer menggunakan tools yang tersed ia pada Adobe F lash.

Dalam proses pembuatan button menggunakan images yang juga dibuat menggunakan Ad ob e Photoshop. untuk menjadikan sebu ah button, image yang digunakan diu bah kedalam bentu k button dengan cara klik kanan image > convert to symbol. Atau terlebih dahulu membu at symbo l dengan cara ctrl+F8 kemudian memilih tipe ke b entuk button. Kemudian meletakkan ima ge yang diinginkan kedalam symb ol tersebut.

Proses pembuatan animasi d apat menggunakan ActionScript. Akan tetapi untuk membuat animasi sederhana tidak memerlukan adanya Actio nScript. Animasi pada aplikasi ini d iletakkan pad a tamp ila n ap likasi , tombol-tombo l navigasi, maupun p ad a p erubahan dari interface aplika si 1 ke interface aplikasi yang lain.

commit to user

33 BAB IV IMPLEMENTASI

4.1 Pembuatan Aplikasi

Aplikasi multimedia ini merupakan aplikasi yang telah di buat semenarik mu ngkin gu na mengurangi tingkat kejenu han masyarakat dalam mengkaji dan memahami Al-Qur’an, sehingga masyarakat lebih tertarik dalam proses belajar.

Secara garis besar pembuatan ap likasi ini terdiri dari 2 menu utama yaitu menu Al-Qur’an d an menu Ind eks Al Qur’an. Pada menu Al-Qur’an informasi yang di sajikan mirip dengan kitab Al-Qur’an. Yaitu d i menu ini terd apat fasilitas yang digu nakan untuk memilih surat-surat Al-Qur’an. Ketika memilih su rat tertentu secara otomatis akan ditampilkan seju mlah ayat-ayat beserta artinya yang terkandung di dalam surat sesuai dengan su rat yang dipilih. Selain itu, juga terdapat menu untuk mengetahu i tafsir dari su rat Al-Qur’an yang d ipilih. Agar ap likasi ini lebih menarik dan tidak membosankan, di d alam menu Al-Qur’an ini juga diberi menu tambahan untu k mendengarkan murotal dari surat-surat Al-Qur’an.

Selain menu Al-Qur’an juga terdapat menu Indeks Al Qu r’an. Menu ini menyajikan beberapa sub-sub menu. Ketika menu ini dipilih, maka aplikasi aka n menampilkan abjad-abjad dimulai dari A samp ai dengan Z. Abjad -abjad ini merupakan suatu tombo l yang bermaksud u ntuk memudahkan pengguna ketika memilih kategori tema yang d iinginkan. Jad i, ketika salah satu abjad d ipilih, maka tema-tema yang akan ditampilkan akan muncu l sesu ai dengan kata dasar yang berawalan abjad yang dipilih. Tema yang ditampilkan merupakan suatu link. Ketika tema-tema yang berbentuk link tersebut dipilih, maka akan ditampilkan beberapa ayat-ayat su rat Al-Qur’an yang mengandung tema tersebut. Ayat-ayat tersebut juga berbentuk link. Hal ini bertujuan agar pengguna tidak harus kembali ke menu utama dan memilih menu Al-Qur’an untuk melihat ayat-a yat yang mengand ung tema yang telah dipilih o leh pengguna tersebut.

34

4.1.1 Pembuatan Obyek dan Background

Pada pembuatan ob yek b ackground, secara garis besar di gambar d engan menggunakan tools pada adobe flash d an p hotoshop. Pada tools pho toshop ob yek background menggu nakan beb erap a image yang d igabung menjadi satu. Untu k teknik penghalusan dari beberapa image yang digabung, tool yang dimanfaatka n pada Photoshop adalah Brush Tool. Dengan menggunakan Brush Too l ini image

yang berada diatas ima ge yang berfungsi sebagai background akan terlihat menyatu.

Setelah penggabungan ima ge seb agai b ackg round selesai dibuat, maka

image tersebut di masukkan ke panel library Adobe Flash. Image tersebut dapat diubah menjadi Gra ph ic ataupun MovieClip. Hal ini u ntuk memudahkan dalam penggunaan image b erulang kali d engan han ya mendrag image dari p anel library

ke stag e. Untuk penambahan teks pad a background, tool yang d igunakan yaitu

Text Tool yang dapat diambil dari panel Tool.

commit to user

4.1.2 Pembuatan Intro

Pada pembuatan intro ini, setiap obyek yang akan ditamp ilkan pada menu awal diletakkan pad a la yer-la yer yang b erbeda. Hal ini bertu juan u ntuk memud ahkan pro ses pembuatan dan mengurangi tingkat keru wetan dalam p roses pembuatan. Dalam pro ses p embu atan animasi, la ngkah pertama ad alah membuat objek bertipe Mo vieClip. Pada objek tersebut dibuat animasi dari frame awal berjalan hingga ke fra me yang diinginkan untu k berhenti. Untuk objek yang digunakan sebagai animasi, diambil dari imag e yang telah dibuat dari Adobe Photo shop. Kemud ian untu k menggabungkan setiap la yer yang berisi objek-objek diatas seperti button, graphic maupun movie clip agar menjadi intro yang menarik,

ad alah d engan meletakkan beberapa objek-objek yang d iinginkan pada frame

tertentu lalu mengatu rny sesuai dengan urutan munculnya objek yangdiinginkan pada setiap frame terebut.

36

4.1.3 Pembuatan Tombol Navigasi

Proses pembu atan tombol navigasi ini d apat dilakukan dengan cara membu at objek button yang berasal dari objek yang dapat d ibu at dari rectang le too l. Kemudian di ko nversi ke tipe Bu tton. Tombol ini pada akhirnya akan memud ahkan user ketika ingin ,meggumalan aplikasi mengoperasi.

Gambar 4.3 Pembuatan To mbol Navigasi

4.1.4 Pemrograman dengan Actionscript

ActionScript merup aka n action, function, event dan event handler yang memungkinkan Flash movie menjadi lebih komplek dan lebih interaktif. Dib awah ini merupakan beberapa ActionScript yang d igunakan dalam aplikasi multimedia ini adalah sebaga i beriku t :

commit to user

1. Action script pad a awal frame

fscommand("fullscreen", "true");

Penje lasan :

Script di atas merupakan script yang bertujuan untuk menamp ilkan tampilan ap likasi secara penuh (fullscreen). Parameter yang digunakan pad a perintah fullscreen di atas ad a du a yaitu fullscreen dan true. Yang b erarti perinta h

fullscreen akan dijalankan karena perintah tersebut bernilai tru e.

2. . Actionscript pada tombol untu k me-lo ad movie

on (release) {

loadMovie (“menu.swf”, movieClip_instance); }

Penje lasan :

Maksud dari script di atas ad alah ketika tombol d i klik maka secara oto matis akan memanggil file “menu .swf”. movieClip_instance dib elakang koma menunjukkan nama instance dari movie clip yang berarti file akan dimuat / ditampu ng dalam sebuah movie clip tersebut.

38

4.2 Hasil Tampilan Aplikasi

4.2.1 Tampilan Halaman Intro dan Menu Utama

Halaman ini merup akan halaman utama ketika aplikasi dijalankan. Pad a halaman ini berisi judul dari stud i kasus ap likasi yang dibuat, selain itu juga terdapat 2 button yang yang merupakan button utama dari aplikasi ini yaitu button

Al-Qur’an d an Ind eks Al Qur’an. Pad a button Al-Qur’an akan d itamp ilkan sub-submenu yang dapat memilih surat dan ayat la yaknya p ada kitab suci Al-Qur’an. Sedangkan pada button Indeks Al Qur’an akan menampilkan menu u ntuk memilih tema dan menunju kkan beberapa ayat yang berkenaan dengan tema yang telah dip ilih.

commit to user

4.2.2 Tampilan Halaman Menu Al-Qur’an

Tamp ilan halaman ini terdiri dari b eberapa komponen sebagai sub-submenu . Terdapat pilihan 8 sub-submenu yang ada pada tampilan halaman ini. Yaitu 3 combobox, sp eaker, tombo l tafsir, tombo l back, serta tombo l play & sto p. M enu

co mbobox pertama berisi seju mlah su rat-surat pada Al-Qur’an yang berfungsi untuk dap at memilih surat-surat . Menu co mbobox kedua berisi sejumlah ayat-ayat pada Al-Qur’an yang sesuai denga n item yang dipilih p ada combobox pertama. Pada tampilan ini juga disediakan sub menu untuk mendengarkan lafadz dari surat Al-Qur’an yaitu p ad a tombol speaker atau play. Setiap pemilihan surat dan ayat pada combobox, maka secara o tomatis ayat beserta terjemahannya akan mu ncu l pada area yang berada di tengah tampilan. Terjemahan yang ditampilkan dapat dirubah kebahasa Indo nesia maupun Bahasa Inggris d engan menggu nakan

co mbobox Translate. Selain itu ju ga terdapat menu untuk melihat tafsir dari su rat yang diinginkan dengan menekan tombo l tafsir.

40

4.2.3 Tampilan Halaman Tafsir

Tamp ilan ini merup akan tampilan dari aksi tombol tafsir pada menu seb elumnya yaitu Al-Qur’an. Pada tampilan ini, akan d itamp ilkan satu area text yang digunakan untuk menampilkan tafsir Al-Qur’an yang dip ilih.

commit to user

4.2.4 Tampilan Halaman Indeks

Tamp ilan dibawah ini meru pakan tampilan menu utama ked ua, yaitu Ind eks Al Qur’an. Pada menu ini akan ditampilkan sejumlah sub menu yang berupa abjad d ari A sampai dengan Z. Submenu ini bertuju an untu k memudahkan user ketika memilih tema yang diinginkan. Setiap sub menu ab jad mempunyai beberapa tema yang setiap tema memiliki penggalan ayat-ayat yang mengandung tema yang disediakan pad a submenu tersebut.

42

4.2.5 Contoh Tampilan Halaman Indeks Abjad

Dibawah ini merup akan contoh tampilan d ari Ind eks Al Qur’an berabjad A. Pada abjad A ditampilkan beb erapa conto h tema-tema yang telah d isediakan. Hal ini juga b erlaku pad a semua ab jad . Setiap tema yang dipilih akan menampilkan surat beserta ayat yang mengandu ng tema yang dipilih. Pad a tampilan dibawah ini ju ga dilengkapi denga n tombo l back yang dapat digunaka n user ketika ingin mengganti Indeks Al Qur’an.

1. Action script pad a awal frame

fscommand("fullscreen", "true");

Penje lasan :

Script di atas merupakan script yang bertujuan untuk menamp ilkan

tampilan ap likasi secara penuh (fullscreen). Parameter yang digunakan pad a perintah fullscreen di atas ad a du a yaitu fullscreen dan true. Yang b erarti perinta h

fullscreen akan dijalankan karena perintah tersebut bernilai tru e.

2. . Actionscript pada tombol untu k me-lo ad movie

on (release) {

loadMovie (“menu.swf”, movieClip_instance); }

Penje lasan :

Maksud dari script di atas ad alah ketika tombol d i klik maka secara oto matis akan memanggil file “menu .swf”. movieClip_instance dib elakang koma menunjukkan nama instance dari movie clip yang berarti file akan dimuat / ditampu ng dalam sebuah movie clip tersebut.

4.2 Hasil Tampilan Aplikasi

4.2.1 Tampilan Halaman Intro dan Menu Utama

Halaman ini merup akan halaman utama ketika aplikasi dijalankan. Pad a halaman ini berisi judul dari stud i kasus ap likasi yang dibuat, selain itu juga terdapat 2 button yang yang merupakan button utama dari aplikasi ini yaitu button

Al-Qur’an d an Ind eks Al Qur’an. Pad a button Al-Qur’an akan d itamp ilkan sub-submenu yang dapat memilih surat dan ayat la yaknya p ada kitab suci Al-Qur’an. Sedangkan pada button Indeks Al Qur’an akan menampilkan menu u ntuk memilih tema dan menunju kkan beberapa ayat yang berkenaan dengan tema yang telah dip ilih.

4.2.2 Tampilan Halaman Menu Al-Qur’an

Tamp ilan halaman ini terdiri dari b eberapa komponen sebagai sub-submenu . Terdapat pilihan 8 sub-submenu yang ada pada tampilan halaman ini. Yaitu

3 combobox, sp eaker, tombo l tafsir, tombo l back, serta tombo l play & sto p. M enu

co mbobox pertama berisi seju mlah su rat-surat pada Al-Qur’an yang berfungsi

untuk dap at memilih surat-surat . Menu co mbobox kedua berisi sejumlah ayat-ayat pada Al-Qur’an yang sesuai denga n item yang dipilih p ada combobox pertama. Pada tampilan ini juga disediakan sub menu untuk mendengarkan lafadz dari surat Al-Qur’an yaitu p ad a tombol speaker atau play. Setiap pemilihan surat dan ayat pada combobox, maka secara o tomatis ayat beserta terjemahannya akan mu ncu l pada area yang berada di tengah tampilan. Terjemahan yang ditampilkan dapat dirubah kebahasa Indo nesia maupun Bahasa Inggris d engan menggu nakan

co mbobox Translate. Selain itu ju ga terdapat menu untuk melihat tafsir dari su rat

4.2.3 Tampilan Halaman Tafsir

Tamp ilan ini merup akan tampilan dari aksi tombol tafsir pada menu seb elumnya yaitu Al-Qur’an. Pada tampilan ini, akan d itamp ilkan satu area text yang digunakan untuk menampilkan tafsir Al-Qur’an yang dip ilih.

4.2.4 Tampilan Halaman Indeks

Tamp ilan dibawah ini meru pakan tampilan menu utama ked ua, yaitu Ind eks Al Qur’an. Pada menu ini akan ditampilkan sejumlah sub menu yang berupa abjad d ari A sampai dengan Z. Submenu ini bertuju an untu k memudahkan user ketika memilih tema yang diinginkan. Setiap sub menu ab jad mempunyai beberapa tema yang setiap tema memiliki penggalan ayat-ayat yang mengandung tema yang disediakan pad a submenu tersebut.

4.2.5 Contoh Tampilan Halaman Indeks Abjad

Dibawah ini merup akan contoh tampilan d ari Ind eks Al Qur’an berabjad A. Pada abjad A ditampilkan beb erapa conto h tema-tema yang telah d isediakan. Hal ini juga b erlaku pad a semua ab jad . Setiap tema yang dipilih akan menampilkan surat beserta ayat yang mengandu ng tema yang dipilih. Pad a tampilan dibawah ini ju ga dilengkapi denga n tombo l back yang dapat digunaka n user ketika ingin mengganti Indeks Al Qur’an.