TUGAS AKHIR PEMBUATAN APLIKASI QUR AN MULTIMEDIA STUDI KASUS TAFSIR AL MIZAN KARYA S.M.H THABATHABA I. Disusun Oleh : BRYAN SETYA KUSUMA

perpustakaan.uns.ac.id

digilib.uns.ac.id

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 M adya 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

commiti to user


digilib.uns.ac.id

commitii to user


digilib.uns.ac.id

iii to user commit


digilib.uns.ac.id

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 la nguage, 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, XM L, Al Qur’an, Index.

iv to user commit


digilib.uns.ac.id

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 M atematika 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 M izan kedalam Bahasa Indonesia, yang sebelumnya disajikan dalam Bahasa Inggris. Aplikasi Qur’an M ultimedia 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. XM L merupakan sebuah bahasa yang dibangun denga n 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-a yat 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.

commitv to user


digilib.uns.ac.id

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

vi to user commit


digilib.uns.ac.id

HALAMAN PERSEMBAHAN “Tugas Akhir ini penulis persembahka n untuk semua orang yang tela h 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), W ahyonx (Wahyu), Asyhar, Agil, Sulis, Ave, Deka (Ardhito), Zusril, Risang, Deny, Angga, Danang, dan teman-teman lain yang belum disebutkan namanya.”

viito user commit


digilib.uns.ac.id

KATA PENGANTAR

Assalamualaikum Wr. Wb

Puji syukur serta ucapan terimakasih penulis panjatkan kehadirat Sang ADA atas limpahan karunia, taufiq serta hida yah-Nya sehingga penulis dapat menyelesaikan penulisan laporan tugas akhir dengan judul ” PEMBUATAN APLIKASI QUR’AN MULTIMEDIA STUDI KASUS TAFSIR AL M IZAN KARYA S.M.H THABATHABA’I ”. Penulis mengucapkan terima kasih kepada semua pihak yang tela h 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 da n Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta. 4. Bapak Didiek Sri W iyono, 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 M encari Ayat AlQur’an Berdasarkan Kata Dasar.

viiito user commit


digilib.uns.ac.id

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

ix to user commit


digilib.uns.ac.id

DAFTAR ISI

Halaman HALAM AN JUDUL............................................................................................. i HALAM AN PERSETUJUAN.............................................................................. ii HALAM AN PENGESAHAN............................................................................... iii ABSTRACT.......................................................................................................... iv ABSTRAK............................................................................................................ v MOTTO................................................................................................................. vi HALAM AN PERSEMBAHAN........................................................................... vii KATA PENGANTAR.......................................................................................... vii DAFTAR ISI......................................................................................................... x DAFTAR GAM BAR............................................................................................xii BAB

I

PENDAHULUAN

1.1 Latar Belakang Masalah..................................................................... 1 1.2 Perumusan Masalah............................................................................ 2 1.3 Batasan Masalah................................................................................. 2 1.4 Tujuan................................................................................................. 2 1.5 Manfaat.............................................................................................. 2 1.6 Metodologi Penulisan......................................................................... 3 1.7 Sistematika Penulisan......................................................................... 3 BAB

II

LANDASAN TEORI

2.1 Tafsir Al Qur’an................................................................................. 5 2.2 Indeks Al Qur’an................................................................................. 6 2.3 Pengertian Multimedia........................................................................ 7

commitx to user


digilib.uns.ac.id

2.1.1 Elemen M ultimedia ............................................................. 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 M enjalankan 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 IMPLEM ENTASI 4.1 Pembuatan Aplikasi……....................................................................33 4.1.1 Pembuatan Obyek dan Background....................................34 4.1.2 Pembuatan Intro…………………......................................35

xi to user commit


digilib.uns.ac.id

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 M enu 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

xiito user commit


digilib.uns.ac.id

DAFTAR GAMBAR

Halaman Gambar 2.1

Lim a 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

Pla yhead....................................................................................... 14

Gambar 2.8

Layer……….................................................................................14

Gambar 2.9

Scene…………............................................................................ 15

Gambar 2.10 Membuka Adobe Photoshop CS2................................................ 17 Gambar 2.11 Lembar Kerja Photoshop............................................................. 18 Gambar 2.12 Struktur Dokumen XM L ............................................................. 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

xiiito user commit


digilib.uns.ac.id

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

xivto user commit


digilib.uns.ac.id

BAB I PENDAHULUAN

1.1 Latar Belakang Di dalam dunia pendidikan di Indonesia terutama pendidikan a gam a 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 mena yangkan 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 mas yarakat 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-a yat pada tema tertentu. Dari uraian diatas maka penulis mencoba memecahkan permasalaha n diatas dengan membuat aplikasi berbasis multimedia. Dengan media ini, maka baik proses pengajaran dan pembelajaran diharapkan menjadi lebih m enarik. Da n berdasarkan hal tersebutlah, penulis mendapatkan ide untuk membuat ”

commit to user 1


digilib.uns.ac.id

2

Pembuatan Aplikasi Qur’an Multimedia Studi Kasus Tafsir Al M izan Kar ya S.M .H Thabathaba’i ” sebagai judul Tugas Akhir.

1.2 Perumusan Masalah Berdasarkan uraian di atas, maka rumusan masalah dari penulisa n ini adalah adalah bagaimana mendesain, membangun serta mengimplementa sikan suatu aplikasi berbasis multimedia seba gai media pembelajaran Al-Qur’an karya S.M .H Thabathaba’i.

1.3 Batasan Masalah Dengan

adanya

perumusan masalah

batasan masalahnya adalah

yang

telah

disebutkan, maka

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 menerapka n 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


digilib.uns.ac.id

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 pembelajara n 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


digilib.uns.ac.id

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 : IMPLEM ENTASI 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 disampaika n dalam menyempurnakan penulisan laporan yang telah dibuat.

commit to user


digilib.uns.ac.id

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, ketidakse nangan dan tindakan serupa lainnya. 3. Hal-hal yang bersangkutan dengan link perantara antara Alla h dan manusia, seperti Tirai, Tablet, Pena, Singgasana, Ketua, Gedung Dihuni, la ngit, bumi, para malaikat, para setan, jin dan lain-la in. 4. Rincian tentang manusia sebelum ia datang ke dunia ini. 5. Terkait kepada manusia dalam kehidupan ini, seperti sejarah umat manusia, pengetahuan tentang 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 5


digilib.uns.ac.id

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, kebajika n, kerendahan hati, kemurnia n 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 Allam ah 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 halama n tempat kata atau istilah yam g ditemukan, melainkan berarti daftar kata yang terdapat dalam Kitab Suci alQur’an, disertai kutipan naskah berupa penggalan ayat yang menga ndung 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


digilib.uns.ac.id

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

ke nyataanya 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 sekara ng 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. M isalnya 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 istila h 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 alatalat 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 ya ng 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 (M c Cormick, 1996).

commit to user


digilib.uns.ac.id

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 memungkinka n pemakai

melakukan

navigasi,

berkreasi,

berinteraksi

dan

berkomunikasi(Hofstetter,2001).

2.1.1

Elemen Multimedia Menurut Senn (1998), multimedia terbagi dalam beberapa eleme n

seperti yang terlihat gambar dibawah ini.

Teks

Audio

Image

Multimedia

Video

Anim ation

Gambar 2.1 Lima Elemen Multimedia Sumber : Senn, 1998

commit to user


digilib.uns.ac.id

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 ya ng dapat berwujud narasi, musik, efek suara atau penggabungan diantara ketiganya. 4. Video Video merupakan sajia n 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 Rea lity Dalam perkembangannya, komponen multimedia bertambah satu lagi yaitu virtual reality. Virtual Reality memungkinkan terjadinya hubungan timbal balik antar-user dengan aplikasi multim edia secara nyata. Contohya seperti Microsoft Surface atau Eye Toy PS 2.

2.3 Adobe Flash Perangkat lunak adobe flash yang selanjutnya disebut Flash, dulunya “M acromedia 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


digilib.uns.ac.id

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 stream ing 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 Pla yer yang dapat ditanam pada browser, telepon seluler atau software lain. Format file Flash adalah SWF, biasanya disebut “ShockWave Flash” movie. “Flash M ovie” atau “Flash Game”, bia sanya file berekstensi swf dapat dijalanka n melalui web, secara stand alone pada Flash Player atau dijalankan di windows secara langsung 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


digilib.uns.ac.id

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 sejumla h 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 sta ge dapat diubah dengan mengubah

commit to user


digilib.uns.ac.id

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 menampilkan informasi dari suatu object yang kita kehendaki, seperti warna, frame, dan lain-la in.

Gambar 2.5 Panel

commit to user

panel simbol,


digilib.uns.ac.id

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

playhead. Timeline berfungsi untuk mengatur waktu

la yer, suatu

frame

dan

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 Pla yhead 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 playhead yang menunjukkan posisi frame.

commit to user


digilib.uns.ac.id

14

Gambar 2.7 Playhead

7. Layer Layer digunakan untuk menempatkan object yang berbeda-beda seperti kertas transparan, dimana beberapa la yer bersama-sama merupakan suatu gambar yang lengkap. Object tidak hanya gambar anima si saja, melainkan dapat berupa gambar latar belakang,

teks, movie dan suara. Setiap object berada pada layer

tersendiri yang independen. Macam-macam layer dapat dilihat 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 W indow ——> Scene.

commit to user


digilib.uns.ac.id

15

Gambar 2.9 Scene

2.4.2 ActionScript Seperti yang diterangkan sebelumnya bahwa Flash mempunyai bahasa skrip yang diberi nama ActionScript. ActionScript adalah menunjukka n 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 ke salah satu style programming ke ECMAScript 4, merupakan basisnya JavaScript. Sebuah Flash movie bisa terdiri dari beberapa scenes. Masing-masing scene mempunyai sebuah timeline. M asing-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 berulangulang. 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


digilib.uns.ac.id

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


digilib.uns.ac.id

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 banya k 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


digilib.uns.ac.id

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 : digunakan 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 la yar penuh.

6.

Close : digunakan untuk menutup jendela aplikasi yang sedang aktif.

commit to user


digilib.uns.ac.id

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 sala h 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 ana k 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, la kukan langkah berikut untuk mengaktifkan Option Bar : Klik menu Window => Option atau dengan tombol Alt+W, maka pada bagian bawah menu bar aka n 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 ke hendaki, 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


digilib.uns.ac.id

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 XM L sangat popular. Format penyimpanan data XM L 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 kaita n dengan bahasa pemrograman, kata “extensible” berarti pengembang dapat mengembangkan kemampuannya. Informasi dalam XM L 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 XM L tidak ada struktur informasi yang disampaikan sperti pada HTML sehingga untuk m enampilkan 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 XM L adalah case sensitive.

Berikut contoh sebuah elemen : Some Text

commit to user


digilib.uns.ac.id

21

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

Sebuah elemen kosong dituliskan dengan : atau

Ketika elemen berisi elemen yang lain, elemen yang diisi disebut parent dan elemen didalamnya disebut child.

text being markup

Elemen pertama pada dokumen XM L 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 XM L

commit to user


digilib.uns.ac.id

22

Atau contoh lain dapat dilihat pada model berikut : Image1.jpg

child

child

child

Image2.jpg child

child

Image3.jpg child

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. text being markup

3. Text Text menggambarkan isi informasi di antara tag pembuka dan tag penutup elemen. Dalam kasus ini “Michael” disimpan di antara tag dan . Skrip selengkapnya adalah sebagai berikut : Michael

commit to user


digilib.uns.ac.id

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 HTM l,, yatiu dimulai dengan karakter “”.

Contoh comment di dalam XM L.

Comment juga sangat berguna sebagai cara untuk meninggalkan pesan pengguna lain sebuah dokumen XML tanpa mem pengaruhi bagaimana dokumen tersebut diproses. Semua software memproses selalu mengabaikan comment dalam dokumen XM L.

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 . Contoh CDATA adalah sebagai berikut. ]]>

commit to user


digilib.uns.ac.id

24

2.5.2

Deklarasi Optional XML

1. Deklarasi XML Sebuah dokumen XM L biasanya dimulai dari XML declaration , meskipun itu bersifat optional. Deklarasi XM L berada pada baris pertama dokumen XM L. Contoh deklarasi XM L adalah sebagai berikut : Deklarasi XM L 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 XM L. 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.

3. XML Well Formed Penulisan dokumen XM L harus memenuhi aturan, atau dengan kata lain harus well formed. Pada XHTM L menyediakan aturan standar untuk menuliskan tag. Kita harus menuliskan

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

commit to user

tanda

petik

(“…”).


digilib.uns.ac.id

BAB III PERANCANGAN

3.1 Bagan Perancangan Aplikasi Adapun bagan perancangan dalam pembuatan aplikasi ini, seperti ditunjukkan dalam Gambar 3.1 dibawah ini.

Perancangan Konsep

Pengumpulan Data

Persiapan Hardware dan Software

Pembuatan Aplikasi 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.

commit to user 25


digilib.uns.ac.id

26

4. Pembuatan Aplikasi Membuat aplikasi dan mengintegrasikan semua elemen–elemen yang dibutuhkan seperti gambar, teks, maupun suara sehingga menghasilka n 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

Al Qur’an Index Al Qur’an

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 a kan mengarahkan aplikasi ke menu Qur’an. Sedangkan Tombol Index akan mengarahkan aplikasi ke menu indeks istilah di dalam AlQur’an.

commit to user


digilib.uns.ac.id

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 Rancanga n Tampilan Menu Al Qur’an Keterangan : 1. Merupakan combobox yang berisi surat-surat Al Qur’an. 2. Merupakan combobox yang berisi ayat-a yat Al Qur’an. 3. Merupakan combobox yang digunakan untuk mengubah arti dari ayat AlQur’an berbahasa Indonesia maupun Inggris. 4. Merupakan tombol untuk menafsirkan Al Qur’an. 5. Merupakan area untuk menampilkan a yat-a yat 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


digilib.uns.ac.id

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 M enu 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


digilib.uns.ac.id

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 digunaka n untuk kembali ke menu utama.

commit to user


digilib.uns.ac.id

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 alQur’an dan tafsir diambil dari buku Tafsir Al Mizan karya Sayid Husain Thabathaba’i, yang telah diterjem ahkan oleh Ilyas Hasan dan dari situs Al Mizan (www.shiasource/al mizan/). Sedangkan data-data yang diperlukan pada indeks

commit to user


digilib.uns.ac.id

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 aplika si 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 me ngolah gamabar yang dibutuhkan dalam aplikasi ini. c. Flash Pla yer 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


digilib.uns.ac.id

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 tampila n aplikasi , tombol-tombol navigasi, maupun pada perubahan dari interface aplika si 1 ke interface aplikasi yang lain.

commit to user


digilib.uns.ac.id

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 AlQur’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 aka n 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-a yat yang mengandung tema yang telah dipilih oleh pengguna tersebut.

commit to user 33


digilib.uns.ac.id

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 dimanfaatka n 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


digilib.uns.ac.id

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, la ngkah 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


digilib.uns.ac.id

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 merupaka n 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 sebaga i berikut :

commit to user


digilib.uns.ac.id

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 perinta h 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


digilib.uns.ac.id

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 subsubmenu yang dapat memilih surat dan ayat la yaknya 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 M enu Utama

commit to user


digilib.uns.ac.id

39

4.2.2 Tampilan Halaman Menu Al-Qur’an Tampilan halaman ini terdiri dari beberapa komponen sebagai subsubmenu. Terdapat pilihan 8 submenu yang ada pada tampilan halaman ini. Yaitu 3 combobox, speaker, tombol tafsir, tombol back, serta tombol play & stop. M enu 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 denga n 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


digilib.uns.ac.id

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


digilib.uns.ac.id

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


digilib.uns.ac.id

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 denga n tombol back yang dapat digunaka n user ketika ingin mengganti Indeks Al Qur’an.

Gambar 4.8 Contoh Tampilan Halaman Tema Abjad

commit to user

TUGAS AKHIR PEMBUATAN APLIKASI QUR AN MULTIMEDIA STUDI KASUS TAFSIR AL MIZAN KARYA S.M.H THABATHABA I. Disusun Oleh : BRYAN SETYA KUSUMA

Recommend Documents