tugas akhir pembuatan aplikasi qur’an ......-qur’an untuk menampilkan surat surat dan ayat ayat...

perpustakaan.uns.ac.id digilib.uns.ac.id

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 Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika

Disusun Oleh :

BRYAN SETYA KUSUMA

NIM. M3108084

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

2012


commit to user ii


commit to user iii


commit to user iv

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 Diploma Program Mathematics and Natural

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 reduce the interest of the

public to review and understand Qur'an. This application was designed to

complete the information of the study of Tafsir Al Mizan (Al Mizan: An Exegesis

of Qur’an) into Indonesian language, which was previously presented in English.

The Applications of Multimedia Qur'an was created using Adobe Flash,

the ActionScript programming language and using a XML database. ActionScript

was a collection of 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 by using tags to store the information.

The Aplications of Multimedia Qur'an made had two main menus

including the menu of the Qur'an to display surah and verses of Qur’an and the

menu of the Qur'an Index to display the topics of Qur’an which was grouped in

alphabetical order.

Keywords: Multimedia, Adobe Flash, XML, Al Qur’an, Index.


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 Informatika, Fakultas Matematika dan Ilmu Pengetahuan

Alam.

Aplikasi Qur’an Multimedia ini dikembangkan sebagai metode alternatif

masyarakat dalam belajar Al Qur’an. Ini disebabkan informasi yang diperoleh

sekarang hanya terdapat pada buku-buku tebal yang secara psikologis mengurangi

minat masyarakat untuk mengkaji dan memahami Al Qur’an. Aplikasi ini dibuat

untuk melengkapi informasi studi tentang Tafsir Al Mizan kedalam Bahasa

Indonesia, yang sebelumnya disajikan dalam Bahasa Inggris.

Aplikasi Qur’an Multimedia ini dibuat menggunakan 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 untuk membuat Flash movie yang lebih komplek

dan lebih interaktif. XML merupakan sebuah bahasa yang dibangun dengan

menggunakan tag untuk menyimpan informasi.

Aplikasi Qur’an Multimedia yang telah dibuat memiliki dua menu utama.

Yaitu menu al-Qur’an untuk menampilkan surat-surat dan ayat-ayat al-Qur’an dan

menu Indeks al-Qur’an untuk menampilkan istilah-istilah dalam al-Qur’an yang

dikelompokkan sesuai dengan abjadnya.

Kata Kunci : Multimedia, Adobe Flash, XML, Al Qur’an, Indeks.


commit to user vi

MOTTO

Kekancan tanpo umpomo, seduluran tanpo rego (Teknik Informatika B ‘08).


commit to user vii

HALAMAN PERSEMBAHAN

“Tugas Akhir ini penulis persembahkan untuk semua orang yang telah

member semangat kepada penulis dalam menyelesaikan laporan Tugas Akhir ini,

khususnya kepada kedua orang tua penulis yang sangat dicintai, Titus, Ferry,

Azizah, Pak Didiek, Pak Taufiq, dan teman-teman TI.B 2008 : Sidig, Bang

Cholis, Ryan (Bhuled), Dito, Hanung, Kebo (Dhimas), Bocun (Septian), Pakdhe

(Toto), Wahyonx (Wahyu), Asyhar, Agil, Sulis, Ave, Deka (Ardhito), Zusril,

Risang, Deny, Angga, Danang, dan teman-teman lain yang belum disebutkan

namanya.”


commit to user viii

KATA PENGANTAR

Assalamualaikum Wr. Wb

Puji syukur serta ucapan terimakasih penulis panjatkan kehadirat Sang

ADA atas limpahan karunia, taufiq serta hidayah-Nya sehingga penulis dapat

menyelesaikan penulisan laporan tugas akhir dengan judul ” PEMBUATAN

APLIKASI QUR’AN MULTIMEDIA STUDI KASUS TAFSIR AL MIZAN

KARYA S.M.H THABATHABA’I ”.

Penulis mengucapkan terima kasih kepada semua pihak yang telah

membantu dalam kegiatan Tugas Akhir Ini. Ucapan terima kasih penulis

diberikan kepada :

1. Kepada Sang ADA yang menjadikan semua ini ada.

2. Kedua Orang Tua dan Saudara yang telah memberikan doa dan semuanya yang

dibutuhkan dalam kegiatan penulis.

3. Bapak Y.S. Palgunadi, M.Sc selaku Ketua Program Studi DIII Ilmu Komputer

Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret

Surakarta.

4. Bapak Didiek Sri Wiyono, S.T, M.T selaku dosen pembimbing TA yang telah

banyak memberikan pengarahan, dukungan moril dan saran.

5. S.M.H Thabathaba’i selaku pengarang buku Tafsir Al Mizan yang telah

mengabdikan hidup dan ilmunya untuk menfasirkan Al Qur’an.

6. Azharuddin Sahil selaku pengarang buku Indeks Al Qur’an Panduan Mencari

Ayat AlQur’an Berdasarkan Kata Dasar.


commit to user ix

7. Semua Saudara di Teknik Informatika B 2008 yang telah membantu semangat

serta masukan sehingga laporan ini dapat selesai dengan baik.

Semoga laporan ini bermanfaat bagi penulis khususnya dan bagi pembaca

umumnya.

Wassalamulaikum Wr. Wb

Surakarta, Juni 2011

Penulis


commit to user x

DAFTAR ISI

Halaman

HALAMAN JUDUL............................................................................................. i

HALAMAN PERSETUJUAN.............................................................................. ii

HALAMAN PENGESAHAN............................................................................... iii

ABSTRACT.......................................................................................................... iv

ABSTRAK............................................................................................................ v

MOTTO................................................................................................................. vi

HALAMAN PERSEMBAHAN........................................................................... vii

KATA PENGANTAR.......................................................................................... vii

DAFTAR ISI......................................................................................................... x

DAFTAR GAMBAR............................................................................................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

2.2 Indeks Al Qur’an................................................................................. 6

2.3 Pengertian Multimedia........................................................................ 7


commit to user xi

2.1.1 Elemen Multimedia ............................................................. 8

2.2 Adobe Flash........................................................................................ 9

2.2.1 Komponen / Tools pada Flash...............................................10

2.2.2 ActionScript......................................................................... 15

2.3 Adobe Photoshop............................................................................. 17

2.3.1 Menjalankan Adobe Photoshop.......................................... 17

2.3.3 Lembar Kerja Photoshop CS2............................................. 18

2.4 XML ( eXtensible Markup Language) ............................................. 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 Hardware dan Software...................................................31

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

BAB IV IMPLEMENTASI

4.1 Pembuatan Aplikasi……....................................................................33

4.1.1 Pembuatan Obyek dan Background....................................34

4.1.2 Pembuatan Intro…………………......................................35


commit to user xii

4.1.3 Pembuatan Tombol Navigasi…….. ....................................36

4.1.4 Pemrograman dengan Actionscript…….............................36

4.2. Hasil Tampilan Aplikasi...................................................................38

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

4.2.2 Tampilan Halaman Menu Al-Qur’an.................................39

4.2.3 Tampilan Halaman Tafsir...................................................40

4.2.4 Tampilan Halaman Indeks................................................41

4.2.5 Contoh Tampilan Halaman Indeks Abjad.........................42

BAB V PENUTUP

5.1 Kesimpulan.........................................................................................43

5.2 Saran...................................................................................................43

DAFTAR PUSTAKA...........................................................................................44


commit to user xiii

DAFTAR GAMBAR

Halaman

Gambar 2.1 Lima Elemen Multimedia..............................................................8

Gambar 2.2 Tools pada 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 Playhead....................................................................................... 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 Struktur Dokumen XML ............................................................. 21

Gambar 2.13 Contoh Struktur Dokumen XML................................................. 22

Gambar 3.1 Bagan Perancangan Aplikasi....…............................................... 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 Tampilan Pembuatan Objek dan Background............................ 33

Gambar 4.2 Tampilan Pembuatan Intro......................................................... 34

Gambar 4.3 Pembuatan Tombol Navigasi..................................................... 35


commit to user xiv

Gambar 4.4 Tampilan Halaman Intro dan Menu Utama................................ 37

Gambar 4.5 Tampilan Halaman Menu Al-Qur’an......................................... 38

Gambar 4.6 Tampilan Halaman Tafsir…....................................................... 39

Gambar 4.7 Tampilan Halaman Indeks.......................................................... 40

Gambar 4.8 Contoh Tampilan Halaman Indeks Abjad................................... 41


commit to user

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Di dalam dunia pendidikan di Indonesia terutama pendidikan agama

khususnya pembelajaran Kitab al-Qur’an sangatlah penting bagi umat islam.

Setiap muslim tentu menyadari, bahwa al-Qur’an merupakan sebuah kitab suci

yang berisi tentang ajaran-ajaran dan pedoman bagi seluruh umat manusia pada

umunya dan khususnya bagi umat Islam.

Dalam usaha menggalakkan studi mengenal al-Quran, metode penunjang

pembelajaran terus dikembangkan. Contohnya yaitu dengan menayangkan

pembelajaran al-Qur’an pada layar kaca atau televisi. Dalam praktiknya, proses

pembelajaran melalui metode ini kebanyakan lebih bersifat satu arah saja dan

terbatas dengan waktu penayangannya. Sela in metode tersebut, metode lain yang

paling sering dilakukan adalah dengan menerbitkan buku-buku tebal pembelajaran

al-Qur’an. Tidak jauh beda dengan metode sebelumnya, metode ini masih terasa

sulit untuk mengurangi banyaknya masyarakat khususnya umat islam sendiri yang

kurang berminat dalam mempelajari al-Qur’an. Karena secara psikologis metode

penyampaian dalam bentuk buku-buku tebal akan mengurangi daya tarik

masyarakat untuk belajar.

Dari permasalahan itulah perlu adanya suatu metode alternatif, sistem atau

cara yang menarik masyarakat untuk mengetahui, mempelajari, dan memaknai arti

ayat-ayat al-Qur’an. Salah satunya dengan adanya aplikasi berbasis multimedia

yang dapat mengembalikan motivasi masyarakat dalam mempelajari tafsir-tafsir

al-Qur’an. Yang mana aplikasi tersebut memuat indeks dari al-Qur’an, ayat-ayat

yang terkandung dari tiap-tiap tema dan penjelasan dari ayat-ayat pada tema

tertentu. Dari uraian diatas maka penulis mencoba memecahkan permasalahan

diatas dengan membuat aplikasi berbasis multimedia. Dengan media ini, maka

baik proses pengajaran dan pembelajaran diharapkan menjadi lebih menarik. Dan

berdasarkan hal tersebutlah, penulis mendapatkan ide untuk membuat ”


commit to user

2

Pembuatan Aplikasi Qur’an Multimedia Studi Kasus Tafsir Al Mizan Karya

S.M.H Thabathaba’i ” sebagai judul Tugas Akhir.

1.2 Perumusan Masalah

Berdasarkan uraian di atas, maka rumusan masalah dari penulisan ini

adalah adalah bagaimana mendesain, membangun serta mengimplementasikan

suatu aplikasi berbasis multimedia sebagai media pembelajaran Al-Qur’an karya

S.M.H Thabathaba’i.

1.3 Batasan Masalah

Dengan adanya perumusan masalah yang telah disebutkan, maka

batasan masalahnya adalah pembuatan aplikasi berbasis multimedia sebagai

media pembelajaran al-Qur’an karya S.M.H Thabathaba’i yang mencakup tafsir

dan indeks al-Qur’an.

1.4 Tujuan

Adapun tujuan dari penyusunan tugas akhir ini adalah membuat aplikasi

berbasis multimedia yang menarik bagi masyarakat untuk mempelajari kitab suci

Al-Qur’an karya S.M.H Thabathaba’i yang mencakup tafsir dan indeks al-

Qur’an.

.

1.5 Manfaat :

Adapun manfaat dari penyusunan tugas akhir ini, yaitu bagi :

a. Penulis :

Penyusunan Tugas Akhir ini merupakan wadah penulis untuk menerapkan

ilmu- ilmu yang telah penulis peroleh selama proses belajar di bangku kuliah,

serta sebagai portofolio penulis yang dapat dijadikan referensi ketika mencari

pekerjaan di kemudian hari.


commit to user

3

b. Pengguna :

Produk Tugas Akhir yang dihasilkan diharapkan dapat memotivasi

memudahkan masyarakat dalam mempelajari dan memahami Al-Qur’an. Selain

itu juga dapat dijadikan sebagai media pengajar dalam proses pembelajaran di

lingkungan pendidikan.

1.6 Metodologi Penelitian

Metodologi penelitian yang digunakan dalam penyusunan tugas akhir ini

dibagi menjadi beberapa tahapan. Tahapan-tahapan tersebut adalah sebagai

berikut:

a. Studi Pustaka

Metode pengumpulan data dengan membaca buku-buku atau literatur yang ada

hubungannya dengan permasalahan yang dijadikan obyek tugas akhir.

b. Tahap Implementasi Sistem.

Pada tahap ini dimulai setelah tahap perancangan konsep dilakukan. Pada tahap

ini dilakukan pembuatan program dan pembuatan antar muka sistem.

c. Tahap Pembuatan Laporan

Tahap ini dimulai sejalan dengan pembuatan aplikasi.

1.7 Sistematikan Penulisan

BAB I : PENDAHULUAN

Pada Bab I menguraikan mengenai latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, manfaat, metodologi, sistematika penulisan.

BAB II : LANDASAN TEORI

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


commit to user

4

BAB III : PERANCANGAN

Pada Bab III dijelaskan mengenai perencanaan program mulai dari membuat perancangan konsep dan perancangan desain aplikasiagar bisa menjadi aplikasi pembelajaran interaktif.

BAB IV : IMPLEMENTASI

Pada Bab IV akan menyajikan data-data pembuatan sekaligus penjelasan dari program aplikasi yang telah dibuat berupa tampilan program.

BAB V : PENUTUP

Pada Bab V membahas tentang kesimpulan dan saran-saran yang disampaikan dalam menyempurnakan penulisan laporan yang telah dibuat.


commit to user

5

BAB II

LANDASAN TEORI

2.1 Tafsir Al Qur’an

At-Tafsir (tafsir), yaitu, menjelaskan arti dari ayat Al-Qur'an, menjelaskan

impor dan mencari tahu maknanya, adalah salah satu kegiatan akademik yang

paling awal dalam Islam (Thabathaba’i, 1998). Penafsiran Al-Qur'an dimulai

dengan wahyu, sebagaimana jelas dari kata-kata Allah: Bahkan sebagaimana

Kami telah mengutus seorang Rasul di antara kamu dari antara kamu yang

mengucapkan kepada Anda komunikasi kami dan menyucikan Anda dan

mengajarkan Anda Kitab dan kebijaksanaan dan mengajarkan Anda bahwa yang

Anda tidak tahu (QS Al Baqarah :151).

Secara garis besar berdasarkan metode metode yang telah ada, pelajaran

yang jelas dari al-Qur’an adalah sebagai 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 tidak membutuhkan penggambaran.

2. Hal-hal mengenai tindakan ilahi, seperti penciptaan, ketertiban, akan,

ingin, panduan, menyesatkan, keputusan, mengukur, paksaan, delegasi

(Power), kesenangan, ketidaksenangan dan tindakan serupa lainnya.

3. Hal-hal yang bersangkutan dengan link perantara antara Allah dan

manusia, seperti Tirai, Tablet, Pena, Singgasana, Ketua, Gedung Dihuni,

langit, 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 dirinya sendiri, fondasi masyarakat,

kenabian dan kerasulan, wahyu, inspirasi, buku dan agama dan hukum

penting. Status tinggi dari nabi, bersinar melalui kisah-kisah mereka,

berada di bawah pos ini.


commit to user

6

6. Pengetahuan tentang manusia setelah ia berangkat dari dunia ini, yaitu,

al-Barzakh.

7. Hal-hal tentang karakter manusia. Di bawah judul ini datang berbagai

tahap melalui mana teman-teman Allah lulus dalam perjalanan spiritual

mereka, seperti penyerahan, iman, kebajikan, kerendahan hati, kemurnian

niat dan kebajikan lainnya.

Sebagai akibat langsung dari metode ini, kita tidak pernah merasa ada

kebutuhan untuk menafsirkan suatu ayat terhadap makna yang tampak jelas.

Seperti yang telah kita katakan sebelumnya, ini jenis penafsiran adalah

misinterpretasi fakta. Adapun bahwa "interpretasi" yang Qur'an telah disebutkan

dalam berbagai ayat, itu bukan tipe "makna", itu adalah sesuatu yang lain.

Pada penyusunan program aplikasi tafsir ini diambil dari buku Tafsir Al

Mizan karya Allamah S.M.H Thabathaba’i untuk data tafsir tiap surat dalam Al

Qur’an.

2.2 Indeks Al-Qur’an

Pada umumnya kata indeks berarti sederetan kata atau istilah penting yang

disusun secara alfabetis pada akhir sebuah buku, yang memberikan informasi

mengenai halaman tempat kata atau istilah itu ditemukan.

Akan tetapi indeks juga dapat berarti sedikit lain, terutama jika

dihubungkan dengan Kitab Suci seperti Indeks al-Qur’an. Tidak sekedar daftar

kata yang memuat informasi mengenai halaman tempat kata atau istilah yamg

ditemukan, melainkan berarti daftar kata yang terdapat dalam Kitab Suci al-

Qur’an, disertai kutipan naskah berupa penggalan ayat yang mengandung kata itu,

dan dilengkapi dengan keterangan nomor surat atau nomor ayatnya.

Indeks dalam pengertian diatas tentu saja belum terdapat dalam Kamus

Besar Bahasa Indonesia (KBBI), namun dapat dipertimbangkan untuk menjadi

salah satu muatan makna kata dalam lema (entri) “indeks”. Dalam bahasa

Indonesia, istilah lain untuk indeks yang di maksudkan diatas disebut juga dengan

“konkordansi”. Namun karena bahasa itu bersifat arbitrer(manasuka), maka


commit to user

7

dengan sedikit mengutak atik dunia semantik, pengertian indeks pun – sejauh

menyangkut Kitab Suci al-Qur’an – dapat meluas lagi, bukan hanya sekedr

konkordansi, karena kenyataanya sekarang berkembang indeks jenis lain yang

tidak dapat dikelompokkan dengan pengertian indeks atau konkordansi

termaksud, dan untuk memudahkan pembatasan, kita sebut saja

“klasifikasi”.vdengan kata lain, dalam masyarakat kita sekarang berkembang dua

macam indeks al-Qur’an, yang satu dapat disebut “konkordansi” dan yang lainnya

populer dengan nama “klasifikasi”. Perbedaan antara keduanya terletak dari cara

penggarapan dan model penggolongannya saja (Sahil, 1998).

Penyusunan indeks pada aplikasi disusun secara alfabetis. Dimulai dari

abjad A sampai dengan abjad terakhir. Misalnya pada abjad A, akan berisi

susunan istilah yang dimulai dengan huruf A, yang terdapat di dalam setiap ayat –

ayat al-Qur’an.

2.3 Pengertian Multimedia

Multimedia memiliki pengertian. Dean (1996) menyatakan bahwa istilah

multimedia berasal dari teater, yaitu pertunjukan yang memanfaatkan lebih dari

satu medium di panggung yang mencakup monitor video, synthesized band, dan

karya seni manusia sebagai bagian dari pertunjukan. Namun berbeda dengan

pengertian multimedia sebelumnya (multi-media), istilah multimedia dalam hal ini

berarti suatu sistem yang terdiri dari perangkat keras, perangkat lunak dan alat-

alat lain seperti televisi, monitor vodeo dan sistemv piringan optik atau stereo

yang dimaksudkan untuk dapat menghasilkan sajian audio visual penuh (McLeod,

1996). Pengetian kedua mensyaratkan adanya sinkronisasi beberapa media tasi

dengan bantuan komputer, membedakannya dengan pengertian multimedia yang

pertama yang memanfaatkan berbagai media yang terpisah dan berdiri sendiri

(Fatah dan Peurwanto, 2010).

Beberapa pakar mengartikan multimedia sebagai berikut :

1. Multimedia secara umum merupakan kombinasi 3 elemen, yaitu suara,

gambar dan teks (Mc Cormick, 1996).


commit to user

8

2. Multimedia adalah kombinasi dari paling sedikit 2 media input atau output

dari data. Media ini dapat audio (musik), animasi, video, teks, grafik, dan

gambar (Turban,dkk.,2002).

3. Multimedia merupakan alat yang dapat menciptakan presentasi dinamis

dan interaktif yang mengombinasikan teks, grafik, animasi, audio, dan

gambar video (Robin dan Linda, 2001).

4. Multimedia adalah pemanfaatan komputer untuk membuat dan

menggabungkan teks teks, grafik, audio, gambar bergerak (video dan

animasi) dengan menggabungkan link dan tool yang memungkinkan

pemakai melakukan navigasi, berkreasi, berinteraksi dan

berkomunikasi(Hofstetter,2001).

2.1.1 Elemen Multimedia

Menurut Senn (1998), multimedia terbagi dalam beberapa elemen

seperti yang terlihat gambar dibawah ini.

Gambar 2.1 Lima Elemen Multimedia

Sumber : Senn, 1998

Multimedia Audio Image

Video Anim ation

Teks


commit to user

9

1. Text

Bentuk data multimedia yang paling mudah disimpan dan dikendalikan

adalah text (teks). Teks dapat membentuk kata, surat atau narasi dalam

multimedia yang menyajikan bahasa. Kebutuhan teks bergantung pada

penggunaan aplikasi multimedia.

2. Image

Image (grafik) merupakan sebuah hasil dari pengambilan citra yang dapat

melalui alat penangkap citra, seperti kamera dan scanner, yang hasilnya

sering disebut dengan gambar. Gambar bisa berwujud sebuah ikon, foto

ataupun simbol.

3. Audio

Audio (suara) adalah komponen multimedia yang dapat berwujud narasi,

musik, efek suara atau penggabungan diantara ketiganya.

4. Video

Video merupakan sajian gambar dan suara yang ditangkap oleh sebuah

kamera, yang kemudian disusun dalam urutan frame untuk dibaca dalam

satuan detik.

5. Animation

Animation (animasi) merupakan penggunaan komputer untuk menciptakan

gerak pada layar.

6. Virtual Reality

Dalam perkembangannya, komponen multimedia bertambah satu lagi

yaitu virtual reality. Virtual Reality memungkinkan terjadinya hubungan

timbal balik antar-user dengan aplikasi multimedia secara nyata.

Contohya seperti Microsoft Surface atau Eye Toy PS 2.

2.3 Adobe Flash

Perangkat lunak adobe flash yang selanjutnya disebut Flash, dulunya

“Macromedia Flash”, merupakan software multimedia unggulan yang dulunya

dikembangkan oleh Macromedia, tetapi sekarang dikembangkan dan

didistribusikan oleh Adobe System. Sejak tahun 1996, flash menjadi metode


commit to user

10

popular untuk menambahkan animasi dan interaktif website. Flash biasanya

digunakan untuk membuat animasi, hiburan dan berbagai komponen web,

diintegrasikan dengan video dalam halaman web sehingga menjadi

apikasimultimedia yang kaya (Rich Intrernet Application. (Sunyoto, 2010).

Flash tidak hanya digunakan untuk aplikasi Web, tetapi juga digunakan

untuk membangun aplikasi desktop karena aplikasi Flash selain dikompilasi

menjadi format.swf, Flash juga dikompilasi menjadi format .exe.

Flash dapat digunakan untuk memanipulasi vector dan citra raster, dan

mendukung bidirectional streaming audio dan video. Flash juga berisi skrip yang

diberinama “ActionScript”. Beberapa produk software, system dan device dapat

membuat dan menampilkan isi Flash. Flash dijalankan dengan Adobe Flash

Player yang dapat ditanam pada browser, telepon seluler atau software lain.

Format file Flash adalah SWF, biasanya disebut “ShockWave Flash”

movie. “Flash Movie” atau “Flash Game”, biasanya file berekstensi swf dapat

dijalankan melalui web, secara stand alone pada Flash Player atau dijalankan di

windows secara langsung dengan membuatnya 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 menggunakannya. Toolbox

berisi alat-alat kerja dengan icon untuk masing-masing fungsi. Toolbox terdiri

dari empat bagian, yaitu tools, view, color dan options.

TOOLS berisi fungsi-fungsi untuk menggambar, memilih, membuat

teks, mewarnai, menghapus, dan membuat path. Tools terdiri dari beberapa icon

untuk menggambar, yaitu:

1. Pencil Tool - untuk menggambar garis seperti menggunakan pensil

2. Line Tool - untuk menggambar garis lurus

3. Oval Tool - untuk menggambar lingkaran dan elips

4. Rectangle Tool - untuk menggambar kotak

5. Brush Tool - untuk menggambar menggunakan brush

6. Pen Tool - untuk menggambar path seperti garis lurus dan garis


commit to user

11

Lengkung

VIEW berisi fungsi-fungsi untuk mewarnai.

1. Zoom Tool - untuk memperbesar dan memperkecil gambar

2. Hand Tool - untuk menggeser gambar

COLORS berisi fungsi-fungsi untuk menampilkan gambar.

1. Stroke Color - untuk menentukan warna outline pada gambar

2. Fill Color - untuk mewarnai gambar

OPTIONS berisi pilihan lain untuk membuat variasi pada fungsi-fungsi tools dan

view. Bila Eraser tool diklik, akan muncul Eraser mode, Faucet dan Eraser hape,

dengan banyak pilihan.

Gambar 2.2 Tools pada Flash

1. Stage

Seperti film, Flash movie mempunyai panjang yang terdiri dari sejumlah

frame. Stage merupakan bidang yang berwarna putih, dimana semua object

seperti gambar, teks dan foto ditempatkan dan diatur di dalamnya. Memperbesar

dan memperkecil stage Tampilan stage dapat diubah dengan mengubah


commit to user

12

magnification level atau mengubah ukuran stage dengan view command.

Gambar 2.3 Stage pada Flash

2. Property Inspector

Properti berfungsi untuk menampilkan serta mengubah informasi object

yang berada di stage, seperti mengatur character, alignment, dan 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, seperti simbol,

warna, frame, dan lain-la in.

Gambar 2.5 Panel


commit to user

13

4. Timeline

Timeline digunakan untuk mengatur semua jalan cerita, di mana actor

ditampilkan dan menghilang. Suatu object yang muncul diatur dalam Timeline

tersebut. Komponen utama dalam Timeline adalah layer, frame dan

playhead. Timeline berfungsi untuk mengatur waktu suatu movie dan

memunculkan objek tertentu. Penempatan efek suara dan musik latar belakang

juga diatur dalam Timeline.

Gambar 2.6 Timeline

5. Frame

Frame adalah gambar yang membentuk suatu gerakan bila frame tersebut

ditampilkan satu demi satu berurutan. Frame merupakan konsep animasi yang

dibuat secara manual maupun dengan alat bantu komputer.Untuk membuat

movie menyajikan suatu action pada saat playhead mencapai frame tertentu pada

Timeline. Gambar memperlihatkan action yang berada pada frame 5.

6. Playhead

Playhead dengan garis merah vertikal, menunjukkan posisi frame berada

pada suatu saat. Bila posisi playhead tersebut berubah, maka gambar yang

ada di stage juga berubah. Pada Gambar 5 dapat dilihat posisi p layhead

yang menunjukkan posisi frame.


commit to user

14

Gambar 2.7 Playhead

7. Layer

Layer digunakan untuk menempatkan object yang berbeda-beda seperti

kertas transparan, dimana beberapa layer bersama-sama merupakan suatu gambar

yang lengkap. Object tidak hanya gambar animasi saja, melainkan dapat berupa

gambar latar belakang, teks, movie dan suara. Setiap object berada pada layer

tersendiri yang independen. Macam-macam layer dapat d ilihat pada gambar

berikut.

Gambar 2.8 Layer

8. Scene

Pada pembuatan film yang mempunyai jalan cerita cukup panjang, untuk

memudahkan pengembuatannya, maka dibagi-bagi menjadi beberapa tema yang

dinyatakan dalam scene. Seperti halnya pembuatan film yang terdiri dari banyak

scene, animasi juga dibuat dengan konsep yang sama, untuk memudahkan dalam

mengatur movie. Nama scene dapat diubah dengan mengklik dua kali pada nama

scene tersebut, kemudian diketik nama yang dikehendaki. Untuk menampilkan

panel Scene seperti Gambar pilih menu Window ——> Scene.


commit to user

15

Gambar 2.9 Scene

2.4.2 ActionScript

Seperti yang diterangkan sebelumnya bahwa Flash mempunyai bahasa

skrip yang diberi nama ActionScript. ActionScript adalah menunjukkan koleksi

set dari action, function, event dan event handler yang memungkinkan

dikembangkan oleh developer untu membuat Flash movie yang lebih komplek dan

lebih interaktif. ActionScript mengalami evolusi kearah standar bahasa

pemrograman, yaitu versi 1, versi 2, dan versi 3. (Sunyoto, 2010)

ActionScript menunjuk kesalah satu style programming ke ECMAScript 4,

merupakan basisnya JavaScript.

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

scene mempunyai sebuah timeline. Masing-masing timeline dimulai dari frame 1

dan seterusnya. Sebuah normal state sebuah Flash movie bersifat dapat berpindah

dari scene 1, frame 1 dan berakhir pada scene 1 dan scene 2 dan seterusnya. Kita

dapat mengeset movie berjalaln dari awal sampai akhir frame dan akhir di semua

scene, serrta menghentikannay. Kita dapat mengeset movie tersebut berulang-

ulang.

Tujuan ActionScript adalah mengubah kebiasaan linier tersebut. Sebuah

ActionScript dapat menghentikan sebuha movie di frame tertentu, dan berulang

ke frame sebelumnya, atau frame mana yang ditampilkan trergantung masukan

yang diberikan user. ActionScript dapat digunakan untuk membuat sebuah movie

komplek, bukan berbentuk linier(standar). (Sunyoto, 2010).


commit to user

16

Akan tetapi, tidak semua Flash moviememerlukan ActionScript. Berikut

fungsi dasar yang dapat dilakukan oleh ActionScript.

1. Animation

Tidak memerlukan ActionScript jika hanya membuat animasi sederhana.

Tetapi script dapat membatu membuat animasi yang komplek. Sebagai contoh,

sebuah bola dapat 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

sebanyak ratusan frame. Namun, dengan ActionScript dapat dilakukan hanya

dengan satu frame.

2. Navigation

Secara default dapat bergerak kedepan satu demi satu frame sampai

selesai. Dengan ActionScript, kita dapat membuat menu untuk berhnti di

sembarang frame dan meneruskan ke frame sesuai pilihan dari user.

3. User Input

Kita dapat memberikan konfirmais (pertanyaan) ke user untuk meminta

masukan dan mengirimkan informasi tersebut ke server. Sebuah Flash movie

dengan beberapa ActionScript dapat digunakan untuk membangun aplikasi web.

4. Memperoleh Data

Sebuah ActionScript dapat berinteraksi dengan server. Kita dapat

mengupdate informasi dan menampilkannya ke user.

5. Calculation

ActionScript dapat melakukan kalkulasi, misalnya dapat diterapkan pada

aplikasi shopping chart.

6. Graphic

ActionScript dapat mengubah sebuah ukuran graphic, sudut rotasi, warna

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

screen .

7. Environment.

ActionScript dapat mengambil nilai dari system yang digunakan oleh user.


commit to user

17

8. Music

Memutar musik dengan ActionScript adlah sebuah alternative yang bagus.

ActionScript dapat mengontrol dapat balance dan volume. Kita dapat

menghasilkan inovasi yang baru dengan cara menggabungkan kemampuan

programming ActionScript dan imaginasi yang kuat.

2.4 Adobe Photoshop

Para web design maupun graphic design cenderung lebih banyak

menggunakan program Adobe Photoshop untuk membantu pekerjaan di bidang

masing-masing karena mudah digunakan, memiliki warna cerah, mendukung

plug-in dari pihak ketiga, dan hasil output yang fantastik.

2.5.1 Menjalankan Adobe Photoshop

Untuk menjalankan Photoshop CS2, lakukan langkah-langkah berikut ini :

1. Klik tombol Start -> All Programs -> Adobe Photoshop CS2. Selain

cara ini anda dapat menjalankan Photoshop melalui desktop dengan

memilih iconPhotoshop yang anda buat/ persiapkan sebelumnya.

Gambar 2.10 Membuka Adobe Photoshop CS2


commit to user

18

2. Tunggu beberapa saat hingga tampil lembar kerja Photoshop CS2.

Gambar 2.11 Lembar Kerja Photoshop

2.5.2 Lembar Kerja Photoshop CS2

Jika anda pendatang baru yang ingin belajar dan menekuni bidang grafis

dan akan menggunakan Photoshop, maka sebaiknya anda lebih familiar dengan

lembar kerja yang disuguhkan Adobe photoshop cs2.

Lembar kerja Photoshop dilengkapi dengan beberapa komponen sebagai

berikut :

1. Title Bar

1. Restore : d igunakan untuk mengembalikan ukuran jendela aplikasi

ke bentuk semula (sebelum dirubah ukurannya).

2. Move : digunakan untuk memindah jendela aplikasi.

3. Size : digunakan untuk merubah ukuran jendela aplikasi.

4. Minimize : digunakan untuk merubah ukuran jendela aplikasi

menjadi ukuran terkecil yang diletakkan dibaris taskbar.

5. Maximize : digunakan untuk merubah ukuran jendela aplikasi

menjadi satu layar penuh.

6. Close : digunakan untuk menutup jendela aplikasi yang sedang aktif.


commit to user

19

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 diberikan nama yang berlainan untuk membedakan fungsi dan

kegunaan secara spesifik pada menu tersebut.Untuk mengaktifkan menu salah

satu menu tersebut dapat dilakukan 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+huruf yang digaris bawahi pada menu. Misalnya

alt+L untuk mengaktifkan menu Layer untuk selanjutnya gunakan anak

panah kiri (

berikutnya.

3. Options Bar

Options bar adlah pilihan tombol yang ditampilkan untuk melengkapi

pilihan pada toolbox, jika pada computer yang anda gunakan belum diaktifkan,

lakukan langkah berikut untuk mengaktifkan Option Bar : Klik menu Window =>

Option atau dengan tombol Alt+W, maka pada bagian bawah menu bar akan

tampil sebuah tombol options.

4. Toolbox

Saat pertama anda menjalankan Photoshop, toolbox akan diletakkan

dibagian sebelah kiri layar. Toolbox adalah tombol yang digunakan untuk

membuat dan melakukan editing gambar. Untuk memilih toolbox dengan cara

melakukan klik pada tombol yang anda kehendaki, bagian yang dilengkapi dengan

anak panah dibagian kanan bawah pada tombol, tanda tersebut menunjukkan

tombol tersebut masih menyimpan tombol lain yang tersembunyi. Masing-masing

tombol dalam toolbox mempunyai nama, untuk menampilkan nama toolbox yaitu

dengan cara menempatkan pointer mouse di atas tombol tersebut, maka akan

tampil tool tip yang menampilkan nama tombol dan perintah shortcut yang

berguna untuk menggunakan tombol tersebut secara cepat.


commit to user

20

5. Palettes

Palettes membantu anda untuk melakukan monitoring dan memperbaiki

gambar. Dalam keadaan default palette akan ditempatkan secara bersamaan dalam

satu group.

2.5 XML ( eXtensible Markup Language)

Saat ini XML sangat popular. Format penyimpanan data XML membuat

platform ini independen dan bermacam aplikasi dapat memprosesnya dengan

mudah, tidak terkecuali Adobe Flash yang juga dapat bekerja dengan file XML.

(Sunyoto, 2010).

XML kepanjangan dari “eXtensible Markup Language”. Dalam kaitan

dengan bahasa pemrograman, kata “extensible” berarti pengembang dapat

mengembangkan kemampuannya. Informasi dalam XML disimpan didalam tag.

Markup berarti sebuah bahasa yang dibangun dengan menggunakan tag untuk

mengelilinginya atau markup text.

Pada HTML, tag didefinisikan dan diterjamhkan oleh browser. Tag akan

mengatakn pada browser untuk memformat objek seperti text, image dan form.

Pada XML tidak ada struktur informasi yang disampaikan sperti pada HTML

sehingga untuk menampilkan informasi 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 lebih elemen. Elemen

mengenalkan dan menandakan isi. Elemen mendominasi didalam dokumen XML.

Beberapa orang menyebut elemen dengan nodes. Aturan penulisan XML adalah

case sensitive.

Berikut contoh sebuah elemen :

<tag>Some Text</tag>


commit to user

21

Elemen diatas berisi dua tag dan beberapa text. Elemen dapat berisi

elemen yang lain. Elemen dapat juga berisi “kosong” (tidak berisi text), seperti

HTML-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 didalamnya disebut child.

<tagname>

<childTag>text being markup</ childTag>

</ tagname >

Elemen pertama pada dokumen XML disebut root element atau document

root atau root node. Root elemen beisi elemen yang lain. Struktur dokumen XML

dapat dilihat pada ilustrasi berikut.

Root node

ChildNodes

Sibling nodes

Gambar 2.12 Struktur Dokumen XML


commit to user

22

Atau contoh lain dapat dilihat pada model berikut :

Gambar 2.13 Contoh Struktur Dokumen XML

2. Atribut

Atribut berfungsi sebagai tambahan informasi tentang sebuah elemen.

Atribut disimpan dengan tag pembuka sebuah elemen setelah nama elemen.

Atribut menguraikan antara nama dan nilainya dan setiap atribut harus 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” disimpan di 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

23

Text di antara tag pembuka dan penututp adalah sebuah elemen akan diproses

dalam pengolahan XML sehingga special karakter, sperti “<” dan “>” diganti

entiti < dan >.

4. Comment

Comment dalam XML sama dengan comment pada HTMl,, yatiu dimulai dengan

karakter “<!—“ dan diakhiri dengan “-->”.

Contoh comment di dalam XML.

<!—here is a commented line -->

Comment juga sangat berguna sebagai cara untuk meninggalkan pesan

pengguna lain sebuah dokumen XML tanpa mempengaruhi bagaimana dokumen

tersebut diproses. Semua software memproses selalu mengabaikan comment

dalam dokumen XML.

5. CDATA

CDATA terdiri dari data karakter. Didalam CDATA block text tidak

diproses. Sebagai contoh, kita dapat menggunakan CDATA untuk informasi berisi

karakter <, > atau &.

CDATA dimulai dengan <![ CDATA dan diakhiri dengan ]>. Contoh CDATA

adalah sebagai berikut.

<! CDATA[

3<5

Or

2>

]]>


commit to user

24

2.5.2 Deklarasi Optional XML

1. Deklarasi XML

Sebuah dokumen XML biasanya dimulai dari XML declaration , meskipun

itu bersifat optional. Deklarasi XML berada pada baris pertama dokumen XML.

Contoh deklarasi XML adalah sebagai berikut :

<?xml version=”1.0”?>

Deklarasi XML berisi versi XML. Dalam contoh diatas adalah 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 deklarasi DOCTYPE merupakan

pasangan jika dideklarasikan pada XML.

Sebuah DTD menyediakan informasi tentang elemen mana yang legal dalam

sebuah dokumen XML dan memeberi tahu elemen mana yang wajib dan mana

yang optional. Dengan kata lain, DTDmenyediakan validasi aturan dokumen

XML. DTD dapat dilihat pada contoh berikut.

<?xml version=”1.0”?>

<!DOCTYPE phonebook SYSTEM “phonebook.dtd”>

3. XML Well Formed

Penulisan dokumen XML harus memenuhi aturan, atau dengan kata lain harus

well formed.

Pada XHTML menyediakan aturan standar untuk menuliskan tag. Kita harus

menuliskan <ul> <li> </li> </ul> untuk membuat list. Sebuah XML

dikatakn well form jika memenuhi kriteria :

1. Dokumen berisi satu atau lebih elemen.

2. Dokumen berisi single root elemen, yang mana verisi beberapa elemen di

dalamnya.

3. Tiap elemen harus ditutup.

4. Tag pembukak dan penutup harus sama (case sensitive).

5. Nilai atribut berada di dalam tanda petik (“…”).


commit to user

25

BAB III

PERANCANGAN

3.1 Bagan Perancangan Aplikasi

Adapun bagan perancangan dalam pembuatan aplikasi ini, seperti

ditunjukkan dalam Gambar 3.1 dibawah ini.

Gambar 3.1 Bagan Perancangan Aplikasi

Keterangan :

1. Perancangan Konsep

Langkah awal yang dilakukan dalam pembuatan aplikasi ini yaitu dengan

merancang konsep, bagaimana menyusun aplikasi agar aplikasi nantinya

lebih menarik pengguna aplikasi ini. Perancangan ini meliputi pembuatan

desain tampilan.

2. Pengumpulan Data

Yaitu mengumpulkan data yang diperlukan untuk melengkapi aplikasi.

3. Persiapan Hardware dan Software

Mempersiapkan hardware maupun software yang akan digunakan sebagai

sarana dalam proses pembuatan aplikasi.

Perancangan Konsep

Pengumpulan Data

Persiapan Hardware dan Software

Pembuatan Aplikasi


commit to user

26

4. Pembuatan Aplikasi

Membuat aplikasi dan mengintegrasikan semua elemen–elemen yang

dibutuhkan seperti gambar, teks, maupun suara sehingga menghasilkan

aplikasi multimedia yang baik dan mudah dipahami.

3.2 Perancangan Konsep

Dari hasil perancangan aplikasi ini dapat diketahui aplikasi terdiri dari

bagan-bagan seperti dibawah ini.

3.2.1 Rancangan Tampilan Awal

Gambar 3.2 Rancangan Tampilan Awal

Keterangan :

Halaman awal merupakan halaman utama ketika menjalankan aplikasi ini.

Dari aplikasi di atas terdapat dua tombol yaitu Qur’an dan Index. Tombol Al

Qur’an akan mengarahkan aplikasi ke menu Qur’an. Sedangkan Tombol Index

akan mengarahkan aplikasi ke menu indeks istilah di dalam AlQur’an.

Al Qur’an

Index Al Qur’an


commit to user

27

3.2.1 Rancangan Tampilan Menu Al Qur’an

Dibawah ini merupakan rancangan tampilan daripada aksi ketika tombol

Qur’an pada tampilan menu utama di klik.

Gambar 3.3 Rancangan Tampilan Menu Al Qur’an

Keterangan :

1. Merupakan combobox yang berisi surat-surat Al Qur’an.

2. Merupakan combobox yang berisi ayat-ayat Al Qur’an.

3. Merupakan combobox yang digunakan untuk mengubah arti dari ayat Al-

Qur’an berbahasa Indonesia maupun Inggris.

4. Merupakan tombol untuk menafsirkan Al Qur’an.

5. Merupakan area untuk menampilkan ayat-ayat beserta arti dari Al Qur’an.

6. Merupakan tombol untuk kembali ke menu utama.

7. Merupakan tombol untuk mendengarkan maupun menghentikan murotal

surat dari Al Qur’an.


commit to user

28

3.2.2 Rancangan Tampilan Menu Tafsir


Tafsir pada tampilan menu Qur’an di klik.

Gambar 3.4 Rancangan Tampilan Menu Tafsir

Keterangan :

Dari gambar 3.4 diatas, terdapat 3 menu yaitu combobox Surat , combobox

IND/ENG, dan tombol Back ke Menu Qur’an. Sama halnya dengan sebelumnya

tombol IND/ENG berguna untuk mengkonversi tafsir yang ditampilkan pada text

area diatas berbahasa Indonesia maupun Inggris. Sedangkan tombol Back

digunakan untuk menuju ke tampilan sebelumnya yaitu ke tampilan Qur’an.


commit to user

29

3.2.3 Rancangan Tampilan Menu Index


Index pada tampilan menu utama di klik.

Gambar 3.5 Rancangan Tampilan Menu Index

Keterangan :

Dari gambar rancangan diatas, terdapat sekumpulan abjad yang merupakan

tombol di tiap-tiap abjad. Tombol abjad tersebut bermaksud untuk

mengelompokkan istilah-istilah dalam al-Qur’an yang sesuai dengan abjadnya.

Tombol back digunakan untuk kembali ke menu utama.


commit to user

30

3.2.4 Rancangan Tampilan Index Abjad


Abjad pada tampilan Index di klik.

Gambar 3.6 Rancangan Tampilan Index Abjad

Keterangan :

Gambar di atas menunjukkan tampilan ketika salah satu abjad diatas di

klik. Ketika tombol abjad diklik. Maka akan tersedia beberapa combobox.

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 diatas maka kebutuhan data yang

diperlukan diantaranya : desain image, isi daripada konten aplikasi. Desain image

berguna untuk sebuah desain yang dapat dijadikan latar belakang dari aplikasi,

menjadi sebuah tombol yang di konversi ke bentuk button terlebih dahulu.

Sedangkan untuk pengisian aplikasi yang berupa surat, ayat, arti ayat, murotal al-

Qur’an dan tafsir d iambil dari buku Tafsir Al Mizan karya Sayid Husain

Thabathaba’i, yang telah diterjemahkan oleh Ilyas Hasan dan dari situs Al Mizan

(www.shiasource/al mizan/). Sedangkan data-data yang diperlukan pada indeks


commit to user

31

al-Qur’an seperti istilah-istilah yang terdapat pada tiap ayat dalam al-Qur’an

diambil dari buku Indeks al-Qur’an Panduan Mencari Ayat AlQur’an Berdasarkan

Kata Dasar karya Azharuddin Sahil.

3.4 Kebutuhan Hardware dan Software

Adapun alat yang digunakan dalam pembuatan program tugas akhir ini,

dibagi menjadi 2 yaitu Hardware dan Software. Alat yang digunakan sebagai

berikut .

1. Hardware

a. Seperangkat komputer dengan spesifikasi :

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

Memory : 4 GB

Resolusi : 800x600

Hardisk : 500 GB

OS : Windows 7 Home Premium 64 bit (6,1 build 7601)

b. CD Blank

c. Speaker

2. Software

a. Adobe Flash Cs3

Merupakan software utama dalam pembuatan aplikasi ini. Software

ini dapat menmpilkan gabungan antara grafik, suara, teks, animasi

yang akan yang disimpan menjadi *.fla dan dapat di konversi

menjadi *.swf atau *.exe.

b. Adobe Photoshop Cs2

Merupakan software yang digunakan untuk mengolah gamabar

yang dibutuhkan dalam aplikasi ini.

c. Flash Player

Software yang berguna untuk memainkan hasil dari pembuatan

aplikasi ini.

d. Nero Burning Room

Digunakan untuk memasukkan aplikasi ke CD (Compact Disk) .


commit to user

32

3.5 Pembuatan 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 Photoshop. Proses pembuatan menggunakan beberapa images yang

kemudian digabung agar image tersebut lebih menarik. Sedangkan objek

tambahan seperti judul ataupun header dan footer menggunakan tools yang

tersedia pada Adobe Flash.

Dalam proses pembuatan button menggunakan images yang juga dibuat

menggunakan Adobe Photoshop. untuk menjadikan sebuah button, image yang

digunakan diubah kedalam bentuk button dengan cara klik kanan image > convert

to symbol. Atau terlebih dahulu membuat symbol dengan cara ctrl+F8 kemudian

memilih tipe ke bentuk button. Kemudian meletakkan image yang diinginkan

kedalam symbol tersebut.

Proses pembuatan animasi dapat menggunakan ActionScript. Akan tetapi

untuk membuat animasi sederhana tidak memerlukan adanya ActionScript.

Animasi pada aplikasi ini diletakkan pada tampilan aplikasi , tombol-tombol

navigasi, maupun pada perubahan dari interface aplikasi 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

mungkin guna mengurangi tingkat kejenuhan masyarakat dalam mengkaji dan

memahami Al-Qur’an, sehingga masyarakat lebih tertarik dalam proses belajar.

Secara garis besar pembuatan aplikasi ini terdiri dari 2 menu utama yaitu

menu Al-Qur’an dan menu Indeks Al Qur’an. Pada menu Al-Qur’an informasi

yang di sajikan mirip dengan kitab Al-Qur’an. Yaitu di menu ini terdapat fasilitas

yang digunakan untuk memilih surat-surat Al-Qur’an. Ketika memilih surat

tertentu secara otomatis akan ditampilkan sejumlah ayat-ayat beserta artinya yang

terkandung di dalam surat sesuai dengan surat yang dipilih. Selain itu, juga

terdapat menu untuk mengetahui tafsir dari surat Al-Qur’an yang dipilih. Agar

aplikasi ini lebih menarik dan tidak membosankan, di dalam menu Al-Qur’an ini

juga diberi menu tambahan untuk mendengarkan murotal dari surat-surat Al-

Qur’an.

Selain menu Al-Qur’an juga terdapat menu Indeks Al Qur’an. Menu ini

menyajikan beberapa sub-sub menu. Ketika menu ini dipilih, maka aplikasi akan

menampilkan abjad-abjad dimulai dari A sampai dengan Z. Abjad-abjad ini

merupakan suatu tombol yang bermaksud untuk memudahkan pengguna ketika

memilih kategori tema yang diinginkan. Jadi, ketika salah satu abjad dipilih, maka

tema-tema yang akan ditampilkan akan muncul sesuai 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 surat 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-ayat yang

mengandung tema yang telah dipilih oleh pengguna tersebut.


commit to user

34

4.1.1 Pembuatan Obyek dan Background

Pada pembuatan obyek background, secara garis besar di gambar dengan

menggunakan tools pada adobe flash dan photoshop. Pada tools photoshop obyek

background menggunakan beberapa image yang digabung menjadi satu. Untuk

teknik penghalusan dari beberapa image yang digabung, tool yang dimanfaatkan

pada Photoshop adalah Brush Tool. Dengan menggunakan Brush Tool ini image

yang berada diatas image yang berfungsi sebagai background akan terlihat

menyatu.

Setelah penggabungan image sebagai background selesai dibuat, maka

image tersebut di masukkan ke panel library Adobe Flash. Image tersebut dapat

diubah menjadi Graphic ataupun MovieClip. Hal ini untuk memudahkan dalam

penggunaan image berulang kali dengan hanya mendrag image dari panel library

ke stage. Untuk penambahan teks pada background, tool yang digunakan yaitu

Text Tool yang dapat diambil dari panel Tool.

Gambar 4.1 Tampilan Pembuatan Objek dan Background


commit to user

35

4.1.2 Pembuatan Intro

Pada pembuatan intro ini, setiap obyek yang akan ditampilkan pada menu

awal diletakkan pada layer-layer yang berbeda. Hal ini bertujuan untuk

memudahkan proses pembuatan dan mengurangi tingkat keruwetan dalam proses

pembuatan. Dalam proses pembuatan animasi, langkah pertama adalah membuat

objek bertipe MovieClip. Pada objek tersebut dibuat animasi dari frame awal

berjalan hingga ke frame yang diinginkan untuk berhenti. Untuk objek yang

digunakan sebagai animasi, diambil dari image yang telah dibuat dari Adobe

Photoshop. Kemudian untuk menggabungkan setiap layer yang berisi objek-objek

diatas seperti button, graphic maupun movie clip agar menjadi intro yang menarik,

adalah dengan meletakkan beberapa objek-objek yang diinginkan pada frame

tertentu lalu mengaturny sesuai dengan urutan munculnya objek yang diinginkan

pada setiap frame terebut.

Gambar 4.2 Tampilan Pembuatan Intro


commit to user

36

4.1.3 Pembuatan Tombol Navigasi

Proses pembuatan tombol navigasi ini dapat dilakukan dengan cara

membuat objek button yang berasal dari objek yang dapat dibuat dari rectangle

tool. Kemudian di konversi ke tipe Button. Tombol ini pada akhirnya akan

memudahkan user ketika ingin ,meggumalan aplikasi mengoperasi.

Gambar 4.3 Pembuatan Tombol Navigasi

4.1.4 Pemrograman dengan Actionscript

ActionScript merupakan action, function, event dan event handler yang

memungkinkan Flash movie menjadi lebih komplek dan lebih interaktif. Dibawah

ini merupakan beberapa ActionScript yang digunakan dalam aplikasi multimedia

ini adalah sebagai berikut :


commit to user

37

1. Actionscript pada awal frame

fscommand("fullscreen", "true");

Penje lasan :

Script di atas merupakan script yang bertujuan untuk menampilkan

tampilan aplikasi secara penuh (fullscreen). Parameter yang digunakan pada

perintah fullscreen di atas ada dua yaitu fullscreen dan true. Yang berarti perintah

fullscreen akan dijalankan karena perintah tersebut bernilai true.

2. . Actionscript pada tombol untuk me-load movie

on (release) {

loadMovie (“menu.swf”, movieClip_instance);

}

Penje lasan :

Maksud dari script di atas adalah ketika tombol di klik maka secara

otomatis akan memanggil file “menu.swf”. movieClip_instance dibelakang

koma menunjukkan nama instance dari movie clip yang berarti file akan dimuat /

ditampung dalam sebuah movie clip tersebut.


commit to user

38

4.2 Hasil Tampilan Aplikasi

4.2.1 Tampilan Halaman Intro dan Menu Utama

Halaman ini merupakan halaman utama ketika aplikasi dijalankan. Pada

halaman ini berisi judul dari studi kasus aplikasi yang dibuat, selain itu juga

terdapat 2 button yang yang merupakan button utama dari aplikasi ini yaitu button

Al-Qur’an dan Indeks Al Qur’an. Pada button Al-Qur’an akan ditampilkan sub-

submenu yang dapat memilih surat dan ayat layaknya pada kitab suci Al-Qur’an.

Sedangkan pada button Indeks Al Qur’an akan menampilkan menu untuk memilih

tema dan menunjukkan beberapa ayat yang berkenaan dengan tema yang telah

dipilih.

Gambar 4.4 Tampilan Halaman Intro dan Menu Utama


commit to user

39

4.2.2 Tampilan Halaman Menu Al-Qur’an

Tampilan halaman ini terdiri dari beberapa komponen sebagai sub-

submenu. Terdapat pilihan 8 submenu yang ada pada tampilan halaman ini. Yaitu

3 combobox, speaker, tombol tafsir, tombol back, serta tombol play & stop. Menu

combobox pertama berisi sejumlah surat-surat pada Al-Qur’an yang berfungsi

untuk dapat memilih surat-surat . Menu combobox kedua berisi sejumlah ayat-ayat

pada Al-Qur’an yang sesuai dengan item yang dipilih pada combobox pertama.

Pada tampilan ini juga disediakan submenu untuk mendengarkan lafadz dari surat

Al-Qur’an yaitu pada tombol speaker atau play. Setiap pemilihan surat dan ayat

pada combobox, maka secara otomatis ayat beserta terjemahannya akan muncul

pada area yang berada di tengah tampilan. Terjemahan yang ditampilkan dapat

dirubah kebahasa Indonesia maupun Bahasa Inggris dengan menggunakan

combobox Translate. Selain itu juga terdapat menu untuk melihat tafsir dari surat

yang diinginkan dengan menekan tombol tafsir.

Gambar 4.5 Tampilan Halaman Menu Al-Qur’an


commit to user

40

4.2.3 Tampilan Halaman Tafsir

Tampilan ini merupakan tampilan dari aksi tombol tafsir pada menu

sebelumnya yaitu Al-Qur’an. Pada tampilan ini, akan ditampilkan satu area text

yang digunakan untuk menampilkan tafsir Al-Qur’an yang dipilih.

Gambar 4.6 Tampilan Halaman Tafsir


commit to user

41

4.2.4 Tampilan Halaman Indeks

Tampilan dibawah ini merupakan tampilan menu utama kedua, yaitu

Indeks Al Qur’an. Pada menu ini akan ditampilkan sejumlah submenu yang

berupa abjad dari A sampai dengan Z. Submenu ini bertujuan untuk memudahkan

user ketika memilih tema yang diinginkan. Setiap submenu abjad mempunyai

beberapa tema yang setiap tema memiliki penggalan ayat-ayat yang mengandung

tema yang disediakan pada submenu tersebut.

Gambar 4.7 Tampilan Halaman Indeks


commit to user

42

4.2.5 Contoh Tampilan Halaman Indeks Abjad

Dibawah ini merupakan contoh tampilan dari Indeks Al Qur’an berabjad

A. Pada abjad A ditampilkan beberapa contoh tema-tema yang telah disediakan.

Hal ini juga berlaku pada semua abjad. Setiap tema yang dipilih akan

menampilkan surat beserta ayat yang mengandung tema yang dipilih. Pada

tampilan dibawah ini juga dilengkapi dengan tombol back yang dapat digunakan

user ketika ingin mengganti Indeks Al Qur’an.

Gambar 4.8 Contoh Tampilan Halaman Tema Abjad

tugas akhir pembuatan aplikasi qur’an ......-qur’an untuk menampilkan surat surat dan ayat ayat...

Documents