tugas akhir pembuatan aplikasi qur’an ......-qur’an untuk menampilkan surat surat dan ayat ayat...
TRANSCRIPT
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
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user ii
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user iii
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user vi
MOTTO
Kekancan tanpo umpomo, seduluran tanpo rego (Teknik Informatika B ‘08).
perpustakaan.uns.ac.id digilib.uns.ac.id
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.”
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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 ”
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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).
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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).
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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>
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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>
]]>
perpustakaan.uns.ac.id digilib.uns.ac.id
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 (“…”).
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
28
3.2.2 Rancangan Tampilan Menu Tafsir
Dibawah ini merupakan rancangan tampilan daripada aksi ketika tombol
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
29
3.2.3 Rancangan Tampilan Menu Index
Dibawah ini merupakan rancangan tampilan daripada aksi ketika tombol
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
commit to user
30
3.2.4 Rancangan Tampilan Index Abjad
Dibawah ini merupakan rancangan tampilan daripada aksi ketika tombol
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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) .
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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 :
perpustakaan.uns.ac.id digilib.uns.ac.id
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.
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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
perpustakaan.uns.ac.id digilib.uns.ac.id
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