FAJAR AGUNG NURDIANSYAH 11152948 SKRIPSI ANIMASI INTERAKTIF PENGENALAN GERAKAN TATA CARA BERWUDHU DAN SHALAT

(1)

i

ANIMASI INTERAKTIF PENGENALAN GERAKAN TATA CARA BERWUDHU DAN SHALAT

SKRIPSI

Diajukan untuk memenuhi salah satu syarat kelulusan Program Sarjana

FAJAR AGUNG NURDIANSYAH 11152948

Program Studi Sistem Informasi STMIK NUSA MANDIRI

JAKARTA 2019

(2)

ii

PERSEMBAHAN

Bismillahirrahmanirrahim

Alhamdulillah, Segala puji dan syukur penulis panjatkan kehadirat Allah Subhanallahu wa’taalla atas segala karunia dan hidayah-Nya, shalawat serta salam semoga tercurah kepada Nabi Besar Muhammad SAW. Dengan mengucap puji dan syukur kepada Allah SWT, skripsi ini saya persembahkan untuk:

1. Bapak Dede Suparman dan mama Puji Etik Nuryanti, yang telah susah payah membesarkan, mendidik, mendukung, serta memberikan do’a terbaiknya bagi penulis.

2. Kedua Adik ku, saudara, sahabat, serta teman seperjuangan yang telah memberikan semangat serta do’a terbaik mereka.

Tak ada kebaikan yang tak dibalas dengan kebaikan, semoga Allah menjaga kita semua dan mempertemukan kita pada surga-Nya kelak, Insya Allah. May allah bless

you all ☺

(3)

iii

SURAT PERNYATAAN KEASLIAN SKRIPSI

(4)

iv

(5)

v

PERSETUJUAN DAN PENGESAHAN SKRIPSI

(6)

vi

LEMBAR PANDUAN PENGGUNAAN HAK CIPTA

Skripsi sarjana yang berjudul “Animasi Interaktif Pengenalan Gerakan Tata Cara Berwudhu dan Shalat” adalah hasil karya tulis asli FAJAR AGUNG NURDIANSYAH dan bukan hasil terbitan sehingga peredaran karya tulis hanya berlaku dilingkungan akademik saja, serta memiliki hak cipta. Oleh karena itu, dilarang keras untuk menggandakan baik sebagian maupun seluruhnya karya tulis ini, tanpa seizin penulis.

Referensi kepustakaan diperkenankan untuk dicatat tetapi pengutipan atau peringkasan isi tulisan hanya dapat dilakukan dengan seizin penulis dan disertai ketentuan pengutipan secara ilmiah dengan menyebutkan sumbernya.

Untuk keperluan perizinan pada pemilik dapat menghubungi informasi yang tertera di bawah ini:

Nama : FAJAR AGUNG NURDIANSYAH

Alamat : Gg. Kenanga Baru RT.01 / 19 No.69 Depok Timur 16417 No. Telp : 089631756756

E-mail : [email protected]

(7)

vii

KATA PENGANTAR

Alhamdulillah, dengan mengucapkan puji syukur kehadirat Allah SWT, yang telah melimpahkan rahmat dan karunia-Nya, sehingga pada akhirnya penulis dapat menyelesaikan tugas ini dengan baik. Dimana Skripsi ini penulis sajikan dalam bentuk buku yang sederhana. Adapun judul Skripsi yang penulis ambil sebagai berikut,

“

Animasi Interaktif Pengenalan Gerakan Tata Cara Berwudhu dan Shalat

”.

Tujuan penulisan Skripsi ini dibuat sebagai salah satu syarat kelulusan Program Sarjana STMIK Nusa Mandiri. Sebagai bahan penulisan diambil berdasarkan hasil penelitian (eksperimen), observasi dan beberapa sumber literatur yang mendukung penulisan ini. Penulis menyadari bahwa tanpa bimbingan dan dorongan dari semua pihak, maka penulisan Skripsi ini tidak akan lancar. Oleh karena itu pada kesempatan ini, izinkanlah penulis menyampaikan ucapan terima kasih kepada:

1. Ketua dan Wakil Ketua STMIK Nusa Mandiri

2. Ketua Program Studi Sistem Informasi STMIK Nusa Mandiri.

3. Ibu Linda Sari Dewi, selaku Dosen Pembimbing I Skripsi.

4. Orang tua dan keluarga besar tercinta yang telah memberikan dukungan moral maupun spritual.

5. Sahabat whatsapp grup “skripsi sudah sampai mana?” yang selalu mendukung, menghibur, membantu dan memberikan informasi penting

6. Dan juga rekan-rekan mahasiswa kelas SI-7AA.

Serta semua pihak yang terlalu banyak untuk disebut satu persatu sehingga terwujudnya penulisan ini, penulis menyadari bahwa penulisan skripsi ini masih jauh

(8)

viii

sekali dari sempurna, untuk itu dalam penulisan mohon kritik dan saran yang bersifat membangun demi kesempurnaan penulisan dimasa yang akan datang.

Akhir kata semoga skripsi ini dapat berguna bagi penulis khususnya dan bagi para pembaca yang berminat pada umumnya.

Jakarta, 5 Agustus 2019 Penulis

Fajar Agung Nurdiansyah

(9)

ix

ABSTRAKSI

FAJAR AGUNG NURDIANSYAH (11152948), Animasi Interaktif Pengenalan Gerakan Tata Cara Berwudhu dan Shalat

Shalat bukanlah hal yang baru dalam sejarah islam, bahkan ibadah ini sudah ada semenjak zaman Jahiliah. Kata “shalat” atau “shalawat” mengandung arti do’a, maksudnya Allah SWT memerintahkan hamba-Nya untuk berdoa kepada Rasulullah SAW. Umat muslim wajib melaksanakan ibadah shalat wajib lima waktu, hukum shalat wajib lima waktu adalah fardu ‘ain yang artinya jika tidak dikerjakan maka dia akan mendapatkan dosa, jika dia mengerjakannya dia akan mendapatkan pahala, shalat juga diisyaratkan sebagai tiang agama Islam, yang mana jika dia meninggalkan shalat dia seperti merobohkan agamanya sendiri, tentu ini menjadi perhatian bagi orang tua untuk mengenalkan tata cara shalat sejak anak-anak, supaya jika kelak anak sudah mencapai usia baligh anak biasa mengerjakan shalat wajib lima waktu tepat waktu.

Media pembelajaran mengenai tata cara shalat beserta wudhu saat ini banyak ditemui dipasaran, seperti buku. Namun pada buku penyampaian gerakan shalat dan wudhu hanya berupa teks atau gambar diam saja Selain buku, media pembelajaran lain seperti audio tape recorder dan CD interaktif. Keduanya sudah berbasis multimedia, namun masing-masing media pembelajaran tersebut masih memiliki kekurangan. Maka dari itu dibuatlah aplikasi untuk menyelesaikan permasalahan diatas dengan memanfaatkan teknologi komputer yang akan digunakan untuk membuat suatu metode pembelajaran yang menarik serta interaktif untuk anak-anak dalam belajar tata cara wudhu dan shalat pada anak-anak

Kata kunci : Gerakan Tata Cara Berwudhu dan Shalat, Animasi Interaktif, Adobe Flash.

(10)

x

ABSTRACT

Fajar Agung Nurdiansyah (11152948) Interactive Animation for Introduction to Movement for Ablution and Prayer

Prayers are not new in the history of Islam, even this worship has existed since the time of Jahiliah. The word "salat" or "shalawat" implies prayer, meaning that Allah Almighty commands His servants to pray to Rasulullah SAW. Muslims are obliged to carry out the five daily obligatory prayers, the five daily obligatory prayers law is fard 'ain which means that if it is not done then he will get sin, if he does it he will get the reward, prayer is also implied as a pillar of Islam, which if he leaving her prayers is like breaking down her own religion, of course this is a concern for parents to introduce the procedures for prayer since children, so that if one day the child has reached the age of Baligh ordinary children do the obligatory prayers five times on time. Learning media about the procedures for prayer and ablution are now widely found in the market, such as books. But in the book delivery of prayer and ablution movements only in the form of text or still images In addition to books, other learning media such as audio tape recorders and interactive CDs. Both are already multimedia based, but each of these learning media still has shortcomings. Therefore an application is made to solve the above problems by utilizing computer technology that will be used to create an interesting and interactive learning method for children in learning the procedures for ablution and prayer in children

Keywords: Ablution and Prayer Procedures, Interactive Animation, Adobe Flash.

(11)

x

(12)

xi

(13)

xii

DAFTAR SIMBOL

TERMINAL

Digunakan untuk menggambarkan awal dan akhir suatu kegiatan.

DECISION

Digunakan untuk menggambarkan proses pengujian suatu kondisi yang ada.

PREPARATION

Digunakan untuk menggambarkan persiapan awal dari proses yang akan dilakukan.

FLOWLINE

Digunakan untuk menggambarkan hubungan proses dari satu proses ke proses lainnya.

INPUT / OUTPUT

Digunakan untuk menggambarkan proses memasukan data yang berupa pembacaan data dan sekaligus proses keluaran yang berupa pencetaka data.

(14)

xiii SUBROUTINE

Digunakan untuk menggambarkan proses pemanggilan sub program dari main program.

PAGE CONNECTOR

Digunakan untuk menghubungkan alur proses kedalam satu halaman atau halaman yang sama.

CONNECTOR

Digunakan untuk menghubungkan alur proses dalam halaman yang berbeda atau ke halaman berikutnya.

PROCESS

Digunakan untuk menggambarkan suatu pengolahan yang dilakukan oleh computer.

(15)

xiv

DAFTAR GAMBAR

Gambar III.1. User Interface Menu Opening ... 38

Gambar III.2. User Interface Menu Utama ... 38

Gambar III.3. User Interface Menu Gerakan Wudhu ... 39

Gambar III.4. User Interface Menu Niat Wudhu ... 39

Gambar III.5. User Interface Menu Gerakan Wudhu ... 39

Gambar III.6. User Interface Menu Pilihan Sholat ... 39

Gambar III.7. User Interface Niat dan Gerakan Sholat ... 40

Gambar III.8. User Interface Menu Opening Quiz ... 40

Gambar III.9. User Interface Soal Quiz ... 40

Gambar III.10. User Interface Hasil Quiz ... 40

Gambar III.11. State Transition Diagram Menu Opening dan Utama ... 41

Gambar III.12. State Transition Diagram Gerakan Wudhu ... 41

Gambar III.13. State Transition Diagram Gerakan Sholat ... 42

Gambar III.14. State Transition Diagram Menu Kuis... 42

Gambar III.15. Bagan Alir Menu Utama ... 43

Gambar III.16. Grafik Alir Menu Utama ... 44

Gambar III.17. Bagan Alir Menu Gerakan Wudhu ... 46

Gambar III.18. Grafik Alir Menu Gerakan Wudhu ... 46

Gambar III.19. Bagan Alir Menu Gerakan Sholat ... 48

Gambar III.20. Grafik Alir Menu Gerakan Sholat... 49

Gambar III.21. Bagan Alir Menu Kuis ... 51

Gambar III.22. Grafik Alir Menu Kuis ... 52

(16)

xv

DAFTAR TABEL

Tabel II.1. Storyboard Menu Opening ... 33

Tabel III.2. Storyboard Menu Utama ... 34

Tabel III.3. Storyboard Menu Gerakan Wudhu ... 34

Tabel III.4. Storyboard Niat Wudhu ... 35

Tabel III.5. Storyboard Gerakan Wudhu ... 35

Tabel III.6. Storyboard Pilihan Sholat ... 36

Tabel III.7. Storyboard Niat dan Gerakan Sholat ... 36

Tabel III.8. Storyboard Menu Opening Quiz ... 37

Tabel III.9. Storyboard Tampilan Soal Quiz ... 37

Tabel III.10. Storyboard Hasil Quiz ... 38

Tabel III.11. Black Box Menu Utama ... 55

Tabel III.12. Black Box Menu Gerakan Wudhu ... 56

Tabel III.13. Black Box Menu Gerakan Sholat ... 57

Tabel III.14. Black Box Menu Kuis ... 58

Tabel III.15. Kebutuhan Hardware dan Software ... 60

Tabel III.16. Kuisioner Pengenalan Transportasi dan Rambu Lalu Lintas ... 62

(17)

xvi

DAFTAR LAMPIRAN

A.1. Lampiran Lembar Daftar Riwayat Hidup A.2. Lampiran Lembar Konsultasi Bimbingan A.3. Lampiran Kuisioner Uji Coba Animasi Interaktif

(18)

17

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Shalat bukanlah hal yang baru dalam sejarah islam, bahkan ibadah ini sudah ada semenjak zaman Jahiliah. Kata “shalat” atau “shalawat” mengandung arti do’a, maksudnya Allah SWT memerintahkan hamba-Nya untuk berdoa kepada Rasulullah SAW. Umat muslim wajib melaksanakan ibadah shalat wajib lima waktu, hukum shalat wajib lima waktu adalah fardu ‘ain yang artinya jika tidak dikerjakan maka dia akan mendapatkan dosa, jika dia mengerjakannya dia akan mendapatkan pahala, shalat juga diisyaratkan sebagai tiang agama Islam, yang mana jika dia meninggalkan shalat dia seperti merobohkan agamanya sendiri, tentu ini menjadi perhatian bagi orang tua untuk mengenalkan tata cara shalat sejak anak- anak, supaya jika kelak anak sudah mencapai usia baligh anak biasa mengerjakan shalat wajib lima waktu tepat waktu.

Wudhu yang artinya bersuci adalah salah satu syarat wajib dalam mengerjakan shalat wajib lima waktu, maka dari itu wudhu dengan shalat itu seperti mata uang koin yang mana satu sama lain tidak bisa dipisahkan. Jika tidak ada wudhu tidak akan terlaksananya shalat.

Menurut (Fadzilatunnisa & Tresnawati, 2015) Media pembelajaran mengenai tata cara shalat beserta wudhu saat ini banyak ditemui dipasaran, seperti buku.

Namun pada buku penyampaian gerakan shalat dan wudhu hanya berupa teks atau gambar diam saja Selain buku, media pembelajaran lain seperti audio tape recorder dan CD interaktif. Keduanya sudah berbasis multimedia, namun masing-masing

(19)

18

media pembelajaran tersebut masih memiliki kekurangan. Dalam audio tape recorder pengguna hanya dapat mendengarkan suara saja selain itu juga dibutuhkan tape sebagai alat pemutarnya. Begitu juga dengan CD interaktif yang juga membutuhkan komputer sebagai media interaksi.

Menurut (Mahardika & Destiana, 2014) bahwa Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat bernavigasi, berinteraksi, berkarya dan berkomunikasi.

Animasi (Rahayu & Denenty, 2017) secara umum merupakan suatu kegiatan menghidupkan, menggerakan benda mati. Suatu benda mati diberi dorongan, kekuatan, semangat, dan emosi untuk menjadi hidup atau hanya berkesan hidup.

Reiber dalam buku Munir menjelaskan bahwa Animasi berasal dari bahasa latin

”anima” yang berarti jiwa, hidup, semangat. Selain itu kata animasi juga berasal dari kata animation yang berasal dari kata dasar to anime di dalam kamus bahasa Indonesia-Inggris berarti menghidupkan.

Oleh karena itu, penulis tertarik menyelesaikan permasalahan diatas dengan memanfaatkan teknologi komputer yang akan digunakan untuk membuat suatu metode pembelajaran yang menarik serta interaktif untuk anak-anak dalam belajar tata cara wudhu dan shalat pada anak-anak, dimana animasi ini akan dapat dipergunakan sebagai sarana yang lebih diminati dan dipahami. Dengan demikian dibuatlah judul penulisan skripsi ini, yaitu : “ANIMASI INTERAKTIF PENGENALAN GERAKAN TATA CARA BERWUDHU DAN SHALAT

(20)

19

1.2. Identifikasi Permasalahan

Berdasarkan uraian latar belakang diatas, maka ada beberapa permasalahan yang dapat diidentifikasi, yaitu :

1. Tidak tersedianya media pembelajaran interaktif yang membantu guru atau orang tua dalam memberikan materi pembelajaran tata cara wudhu dan shalat untuk anak-anak.

2. Dibutuhan media atau sarana yang tepat dapat digunakan sebagai sarana pembelajaran mengenal gerakan berwudhu dan sholat.

2.1. Perumusan Masalah

Perancangan animasi interaktif tata cara berwudhu dan shalat berbasis android, diharapkan dapat memberikan manfaat berupa informasi mengenai tata cara berwudhu dan praktik sholat melalui media visual yang interaktif dengan tampilan yang sangat menarik dan mudah dipahami untuk anak yang memenuhi aspek functionality, efficiency, usability, dan portability.

2.2. Maksud dan Tujuan

Maksud dari penyusunan skripsi ini antara lain :

1. Memperkenalkan gerakan berwudhu dan sholat serta doa-doa dan niat.

2. Mempermudah dan meningkatkan minat belajar mengajar pada anak dan orang tua dalam pengenalan gerakan sholat dan wudhu.

Sedangkan tujuan dari penyusunan skripsi ini ialah, sebagai salah satu syarat kelulusan pada program Strata Satu (S1) program studi sistem informasi di STMIK Nusa Mandiri Jakarta.

(21)

2.3. Metode Penelitian

Penelitian memegang peran penting dalam memberikan pondasi atau landasan terhadap tindak dan keputusan dalam membangun suatu bidang. Metode penelitian yang dipilih harus berhubungan erat dengan prosedur yang ada, alat dan desain penelitian yang digunakan.

2.3.1. Teknik Pengumpulan data

Dalam pengumpulan data penulis menggunakan tiga teknik pengumpulan data.Adapun teknik pengumpulan data tersebut sebagai berikut :

a. Observasi

Metode observasi adalah metode yang langsung turun kelapangan atau ikut serta dalam melaksanakan setiap observasi dan meneliti apa yang menjadi permasalahan.

b. Studi Pustaka

Metode ini dilakukan dengan mengumpulkan atau informasi dari berbagai literatur baik buku maupun literatur dari internet

2.3.2. Model Pengembangan Sistem

Dalam pengembangan Sistem penulisan skripsi ini, penulis melakukan beberapa tahapan, yaitu :

a. Analisa Kebutuhan Software

Analisa Kebutuhan Software proses pengumpulan kebutuhan dilakukan secara intensif untuk menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat lunak seperti apa yang dibutuhkan oleh user. Dalam

(22)

pengembangannya terdapat spesifikasi software dimana pengguna memiliki kebutuhan menu yang berbeda, berikut adalah kebutuhan software:

1. Diperlukan aplikasi yang berbasis animasi interaktif dalam proses pembelajaran pengenalan gerakan berwudhu dan shalat.

2. Diperlukan gambar dan animasi sebagai ilustrasi materi yang disampaikan agar materi yang disampaikan lebih mudah diingat.

3. Diperlukan latihan soal untuk anak dalam pembelajaran pengenalan gerakan berwudhu dan shalat agar dalam proses belajar anak tidak merasa bosan b. Desain

Tahap ini merubah kebutuhan perangkat lunak dari tahap analisis kebutuhan ke representasi desain agar diimplementasikan menjadi program pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada tahap ini juga perlu didokumentasikan. Dalam hal ini penulis menggunakan storyboard dan State Transition Diagram

c. Code Generation

Tahap Code Generation merupakan tahap pengkodean dari desain yang telah penulis buat kedalam suatu bahasa pemrograman. Bahasa pemrograman yang digunakan dalam aplikasi ini menggunakan Action Script 3.0 atau biasa disebut AIR for ANDROID yang terdapat dalam Adobe Flash CS 6.0

d. Testing

Mendeskripsikan proses pengujian yang akan dilakukan dengan menggunakan black box testing dan white box testing.

e. Support

Mendefinisikan upaya-upaya pengembangan terhadap sistem yang sedang dibuat dalam menghadapi mengantisipasi perkembangan maupun perubahan

(23)

sistem bersangkutan terkait dengan hardware dan software yang akan digunakan. Untuk mensupport pembuatan halaman animasi ini penulis menggunakan Adobe Audition CS 6.0, Adobe Photoshop CS 6.0 dan Adobe Flash CS 6.0 untuk pembuatan halaman animasi.

2.4. Ruang lingkup

Berdasarkan permasalahan yang ada penulisan skripsi ini . Ruang lingkup yang akan dibahas dalam skripsi ini terdiri dari materi cara gerakan berwudhu, shalat, doa dan niat serta kuis, dimana pada bagian materi akan membahas tentang pengenalan gerakan tata cara berwudhu dan gerakan shalat. Dibagian kuis terdapat soal latihan evaluasi yang diambil dari pembahasan materi, semua itu akan ditampilkan semenarik mungkin dalam bentuk animasi sehingga masyarakat luas khususnya anak-anak akan lebih menikmati dan memahaminya.

(24)

BAB II

LANDASAN TEORI

2.1. Tinjauan Pustaka

Dalam bab ini akan dijelaskan tentang uraian singkat hasil-hasil penelitian atau analisis terdahulu yang ada hubungannya dengan permasalahan yang akan ditinjau dalam skripsi.

Dari tinjauan yang ada diperoleh beberapa landasan yang menjadi pendukung dalam pembuatan animasi interaktif belajar tata cara wudhu dan shalat wajib adalah:

A. Pengertian Multimedia

Menurut (Christian, Ariani, & Rizal, 2014) Multimedia adalah media yang menggabungkan dua unsur atau lebih media yang terdiri atas teks, grafik, audio, gambar bergerak (video dan animasi) secara terintegrasi.Multimedia terbagi menjadi dua kategori, yaitu multimedia linier dan multimedia interaktif.Multimedia linier adalah suatu multimedia yang tidak dilengkapi dengan alat pengontrol apapun yang dapat dioperasikan oleh pengguna. Multimedia ini berjalan sekuensial (berurutan), contohnya: televisi dan film. Multimedia interaktif adalah suatu multimedia yang dilengkapi dengan alat pengontrol yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa yang dikehendaki untuk proses selanjutnya..

B. Animasi

Menurut (Fitria, Dinar , Septiana, 2016) Animasi adalah usaha untuk membuat presentasi statis menjadi hidup. Saat ini banyak sekali program-program yang dirancang khusus sebagai pembuat animasi atau games, dan diantara beberapa program tersebut salah satunya adalah Adobe Flash Profesional CS6. Sebenarnya program ini bukan untuk pembuatan sebuah animasi ataupun games, namun seiring

(25)

dengan perkembangannya teknologi dari kemudahan penggunaan, kelengkapan listing program sehingga program ini tidak kalah jika dibandingkan program-program pembuat animasi atau games lainnya.

C. Adobe Photosop CS6

Adobe photoshop adalah perangkat lunak Adobe Photoshop atau biasa disebut photoshop adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto / gambar dan pembuatan efek . Adobe Photoshop CS6 menyediakan tool – tool yang mendukung pembuatan dan manipulasi gambar yang digunakan dalam background desain. Banyak kemudahan dan keuntungan dalam mendesain background (Setiadi, Nugroho, Muklish, Aulia, & Handoko, 2019).

D. Adobe Audition CS6

Adobe Audition adalah perangkat lunak multitrack digital audio recording, editor dan mixer yang berfungsi untuk merekam audio. memotong / mencampur audio dan memberikan tambahan efek . Adobe Audition biasanya digunakan oleh musician recording atau produser. Adobe Audition juga mempunyai dua lingkungan yaitu Edit View and Multitrack View (Setiadi et al., 2019).

E. Adobe Flash CS6

Menurut (Sirumapea, Budiman, & Fadil, 2018) Adobe Flash CS6 merupakan salah satu aplikasi untuk membuat gambar vector ataupun animasi yang sangat dikenal untuk membuat presentasi berbasis multimedia. Output yang dihasilkan dari perangkat lunak ini berekstension .swf dan dapat diputar dipenjelajah web yang telah dipasang Adobe Flash Player. Flash menggunakan bahasa pemrograman bernama ActionScript.

Action Script dibutuhkan untuk memberi efek gerak pada animasi.

F. Android

(26)

Android adalah sistem operasi untuk telepon seluler yang berbasis Linux. Android menyediakan platform terbuka bagi para pengembang untuk menciptakan aplikasi mereka sendiri untuk digunakan oleh bermacam peranti bergerak (Wardan &

Kurniadi, 2017).

Android adalah sistem operasi untuk perangkat berbasis Linux yang mencakup sistem operasi, middleware dan aplikasi. Android menyediakan platform terbuka bagi para pengembang untuk menciptakan aplikasi mereka sendiri digunakan oleh bermacam perangkat mobile (Amrulloh & Mulyoto, 2016).

G. Storyboard

Dalam pembuatan storyboard, sang penulis menggambarkan sketsa dari program yang akan dibuat, penggambaran ini tidak menuntut sang penulis menggambarkan secara bagus, tapi lebih diutamakan dimengerti bagi pihak lain.

Menurut (Utomo, Herlawati, & Sihombing, 2015) Storyboard merupakan pengorganisasi grafik, contohnya adalah sederetan ilustrasi atau gambar yang ditampilkan berurutan untuk keperluan visualisasi awal dari suatu file, animasi atau urutan media interaktif, termasuk interaktivitas di web.

H. Pengertian Shalat dan Wudhu

Menurut (Syafril, 2018) Shalat adalah tiang agama, rukun islam kedua, dan bukti iman-takwa kita kepada Allah Taala. Sebagai amal pertama yang dimintai pertanggungjawabannya kelak di akhirat, salat harus betul-betul kita jaga kesempurnaannya. Sudah tepatkah waktunya, tempatnya, bacaannya, gerakannya, apa saja yang wajib, apa saja yang sunah, dan apa saja yang bisa membatalkannya.

Wudhu adalah salah satu cara menyucikan anggota tubuh dengan air. Wudhu wajib dilakukan seorang muslim yang akan melaksanakan salat, baik salat wajib maupun salat sunah

(27)

H. Pengujian White Box

Menurut (Utomo et al., 2015) White box testing (pengujian kotak putih) yaitu menguji perangkat lunak dari segi desain dan kode program apakah mampu menghasilkan fungsi-fungsi, masukan, dan keluaran yang sesuai dengan spesifikasi kebutuhan. Pengujian kotak putih dilakukan dengan memeriksa lojik dari kode program. Pembuatan kasus uji bisa mengikuti standar pengujian dari standar pemograman yang seharusnya.

I. Pengujian Black box

Menurut (Utomo et al., 2015) Pengujian black box berfokus pada persyaratan fungsionalitas perangkat lunak. Dengan demikian, pengujian black box memungkinkan perekayasa perangkat lunak mendapatkan serangkaian kondisi input yang sepenuhnya menggunakan semua persyaratan fungsionalitas untuk suatu program. Pengujian black box berusaha menemukan kesalahan dalam kategori sebagai berikut:

a. Fungsi-fungsi yang tidak benar atau hilang.

b. Kesalahan interface.

c. Kesalahan dalam struktur data atau akses database eksternal.

d. Kesalahan kinerja.

e. Inisialisasi dan kesalahan terminasi.

J. User Interface

Antarmuka pengguna (user) merupakan bagian dimana terjadi komunikasi antar pengguna dengan sistem. Antarmuka dirancang semudah mungkin agar pengguna dapat dengan mudah menggunakan program sekalipun itu baru pertama kalinya menggunakan program. Antarmuka juga hendaknya dibuat semenarik mungkin

(28)

sehingga pengguna merasa tertarik dan tidak mudah bosan dalam menggunakan program tersebut (Merlina & Informasi, 2016)

User interface atau antarmuka pengguna adalah suatu mekanisme komunikasi antara pengguna dengan aplikasi kompuer. Oleh karena itu, antarmuka pengguna dibuat semenarik mungkin agar pengguna dapat menikmati dan tidak merasa jenuh dan bosan dengan tampilan yang ada di dalam sebuah aplikasi tersebut (Utomo et al., 2015)

K. State Transition Diagram

Menurut (Wijayanto, 2014) State machine diagram disebut diagram mesin status digunakan untuk menggambarkan perubahan status atau transisi status dari sebuat mesin atau sistem. Perubahan tersebut digambarkan dalam sebuah graf berarah. State mecine diagram merupakan perkembangan dari diagram finite state automata dengan penambahan beberapa fitur dan konsep baru.

2.2. Penelitian Terkait

Menurut (Julfaisal, 2018) Shalat merupakan ibadah istimewa yang di syariatkan untuk umat islam. Istimewa Karena perintah shalat diterima langsung oleh nabi Muhammad dari Allah Azza wa jalla. Istimewa karena shalat merupakan media komunikasi yang canggih bagi seorang hamba kepada Allah, dengan shalat ia bisa menundukan jiwa dan raganya di hadapan Allah yang maha perkasa. Dengan shalat ia dapat merasakan betapa keagungan dan kekuasaan-nya meliputi segala ciptaan-nya.

Shalat ini sendiri bisa dibagi menjadi 4 menurut mazhab diantaranya yaitu:

Menurut Mazhab Hanafi, Mazhab Maliki, Mazhab Syafi’I dan Mazhab Hambali Namunt pada umumnya dapat di bagi menjadi dua yaitu : shalat wajib dan shalat sunnah.

(29)

Dengan segala kesibukan yang semakin banyak, menjadikan sebagian umat muslim kurang memiliki banyak waktu untuk membaca buku atau belajar ilmu agama, terutama ilmu tentang wudhu dan shalat, sehingga masih banyak umat muslim yang belum mengetahui tata cara wudhu dan shalat yang sesuai dengan Al-Qur’an dan As- Sunnah (Wahyudin & Rahim, n.d.).

Namun dengan memanfaatkan ponsel android tentu akan memudahkan kita untuk bisa terus belajar dan membaca tanpa harus membawa buku .

Rasulullah memerintahkan dalam hadist riwayat Abu Daud “Perintahkan anak- anak kalian untuk melakukan shalat saat usia mereka tujuh tahun, dan pukullah mereka saat usia sepuluh tahun. Dan pisahkan tempat tidur mereka” Dalam hadist tersebut jelas dikatakan bahwa perintah shalat untuk anak adalah ketika anak berusia 7 tahun, dan pukullah ketika anak tidak mengerjakan shalat di usia 10 tahun, maksud pukulan disini bukanlah pukulan yang menyakitkan dan memberi mudharat kepada anak Namun terkadang orang tua lupa mengajarkan shalat kepada anaknya yang diakibatkan oleh kesibukannya ditempat kerja, sehingga tidak memiliki waktu yang cukup untuk mengajarkan shalat kepada anak. Jika dengan membaca buku tata cara shalat, anak akan bosan dan tidak mau mempelajarinya karena otak anak lebih cenderung menerima informasi berupa gambar atau video dari pada berupa teks (Andriansyah & Bayzuri, 2018).

Dengan adanya smartphone, media pembelajaran shalat dapat disajikan dengan konten video, animasi, atau gambar yang dilengkapi dengan audio sehingga menarik bagi anak ketika mempelajari tata cara shalat baik shalat fardhu lima waktu maupun shalat sunah.

(30)

29

BAB III

PERANCANGAN DAN PEMBAHASAN

3.1. Analisa Kebutuhan

Analisa kebutuhan dalam membangun media pembelajaran animasi interaktif ini diantaranya adalah :

1. Analisa Kebutuhan Hardware

Analisa kebutuhan perangkat keras atau Hardware yaitu perangkat keras pada sistem komputer. Berikut perincian spesifikasi yang digunakan untuk membangun program ini :

a. Processor Core Intel Celeron N4000 dual-core b. Random Access Memory (RAM) 4GB

c. Resolusi monitor yang digunakan 1366x768 pixel d. Kapasitas Hard disk 500GB

e. Keyboard dan mouse standard f. Microphone

g. Kabel data h. Speaker

(31)

30

2. Perangkat Lunak

Perangkat lunak yang digunakan untuk membangun program media pembelajaran animasi interaktif ini menggunakan :

a. Sistem operasi menggunakan OS Microsoft Windows 10 Pro 64-bit

b. Adobe Flash CS6 sebagai software utama dalam membangun program media pembelajaran ini.

c. Adobe Photoshop CS6 digunakan untuk mengedit gambar yang dibutuhkan sebagai background dan gambar yang dibutuhkan program.

d. Adobe Audition CS6 digunakan untuk mengedit suara yang dibutuhkan oleh aplikasi animasi interaktif.

3.2. Desain

Perancangan (design) adalah membuat spesifikasi secara rinci mengenai arsitektur proyek, gaya, dan kebutuhan material untuk proyek. Spesifikasi yang akan dibuat berdasarkan perancangan Storyboard, desain struktur navigasi, perancangan bagan alir, perancangan diagram transisi, dan perancangan interface.

3.2.1. Karakteristik Software

Dalam merancang sistem yang dalam hal ini berupa animasi interaktif, harus berpedoman pada karakteristik dan umur yang terdapat pada animasi interaktif yaitu : 1. Format

Animasi interaktif pembelajaran pengenalan tata cara gerakan berwudhu dan shalat berbasis android ini merupakan media pengenalan berbagai gerakan berwudhu dan shalat yang dibuat terdiri dari 3 menu utama, yaitu belajar gerakan wudhu dan sholat, serta Quiz. Yang pertama didalam menu belajar wudhu terdapat

(32)

31

niat dan gerakan-gerakan berwudhu dari awal hingga akhir. Yang kedua belajar sholat terdapat 2 opsi yaitu pengenalan niat sholat 5 waktu dan gerakan sholat yang didalamnya terdapat urutan gerakan-gerakan sholat dari awal hingga akhir.

Sedangkan dimenu Quiz terdapat menu yaitu 5 soal quiz dan program telah diformat, sehingga user hanya tinggal men-klik untuk menjalankan animasi interaktif di android.

2. Rules

Pada animasi interaktif ini terdapat pengenalan tata cara gerakan berwudhu dan shalat. Quiz yang berisikan soal pilihan ganda mengenai pengenalan tata cara gerakan berwudhu dan shalat.

3. Policy

Ketika user dapat menjawab 5 soal benar maka user dinyatakan “Berhasil” , tetapi apabila user belum menyelesaikan 5 soal tersebut maka user dinyatakan Gagal.

4. Scenario

Pertama kali user memilih menu “Gerakan Wudhu” atau “Gerakan Sholat” pada layar interface, yang didalamnya berisikan materi berupa tata cara gerakan berwudhu dan sholat serta penjelasannya. Setelah itu terdapat menu soal quiz, dimana user diminta menjawab soal-soal quiz pilihan ganda. Semua proses mulai dari pengenalan, belajar, quiz disertai gambar dan suara musik, supaya anak-anak dengan mudah mengenal dan memahami dengan penjelasan yang ditampilkan.

5. Events/Challenge

Pada menu quiz user ditantang untuk menjawab 5 soal. Soal yang diberikan diambil dari materi animasi interaktif pengenalan tata cara gerakan berwudhu dan shalat. Jika user dapat menjawab 5 soal yang disediakan maka user dinyatakan

(33)

32

Berhasil. Tantangan ini diberikan supaya user dapat mengasah daya ingat, sambil bermain dan tujuan pembelajarannya pun tercapai.

6. Roles

User harus dapat menjawab pertanyaan dengan benar agar mendapatkan nilai setinggi mungkin, Apabila user mendapatkan nilai rendah maka harus belajar lagi untuk dapat memahami materi yang disediakan.

7. Decisions

Keputusan yang dapat dibuat pemain adalah dengan menjawab soal-soal quiz dengan jawaban yang benar.

8. Score model

Dalam hal ini, menu quiz hanya menentukan berapa banyak jumlah soal yang dapat dijawab, jika lebih dari setengah jumlahnya maka user akan dikategorikan

“Berhasil” tetapi jika kurang user dikategorikan “Gagal” dan dapat mengulang menjawab soal quiz pada pertanyaan yang sama.

9. Indicators

Indicators yang digunakan berupa nomor (1-5) yang berfungsi untuk mengkategorikan soal yang akan ditampilkan.

10. Symbols

Pada aplikasi ini terdapat banyak sekali simbol berupa tombol yang dapat diklik yang mempunyai fungsi masing-masing dan sebagai penunjuk ke state berikutnya atau state sebelumnya digunakan simbol tanda panah.

3.2.2. Perancangan StoryBoard

Storyboard merupakan konsep komunikasi dan ungkapan kreatif, teknik dan media yang berisi pembahasan mengenai alur cerita dan gagasan secara visual,

(34)

33

termasuk audio dengan mengolah elemen desain grafis berupa bentuk, gambar, huruf dan warna serta tata letaknya tentang aplikasi yang akan ditampilkan.

.Berikut ini adalah gambaran storyboard dari aplikasi animasi interaktif pengenalan tata cara gerakan berwudhu dan sholat yang dijelaskan pada tabel dibawah ini:

1. Storyboard Menu Opening

Tabel III.1.

Storyboard Menu Opening

Visual Sketsa Audio

Pada saat program di jalankan, akan tampil halaman opening yang terdapat gambar animasi, judul program, dan tombol mulai

happines

(35)

34

2. Storyboard Menu Utama

Tabel III.2 Storyboard Menu Utama

3. Storyboard Menu Gerakan Wudhu

Tabel III.3.

Storyboard Menu Gerakan Wudhu

Visual Sketsa Audio

Pada frame menu utama, terdapat tombol pilihan yaitu, tombol gerakan wudhu, tombol gerakan sholat, dan tombol quiz

happines

Visual Sketsa Audio

Pada frame menu Gerakan wudhu, terdapat tombol pilihan yaitu, tombol niat wudhu, dan tombol gerakan wudhu

happines

(36)

35

4. Storyboard Niat Wudhu

Tabel III.4.

Storyboard Niat Wudhu

Visual Sketsa Audio

Dalam frame ini berisikan niat, dan doa setelah wudhu

happines

5. Storyboard Gerakan Wudhu

Tabel III.5.

Storyboard Gerakan Wudhu

Visual Sketsa Audio

Dalam frame ini berisikan tata cara gerakan, dan doa berwudhu

happines

(37)

36

6.

Storyboard Menu Pilihan Sholat

Tabel III.6.

Storyboard Pilihan Sholat

Visual Sketsa Audio

Pada frame ini berisikan beberapa pilihan tombol sholat 5 waktu

happines

7. Storyboard Niat dan Gerakan Sholat

Tabel III.7.

Storyboard Niat dan Gerakan Sholat

Visual Sketsa Audio

Dalam frame ini berisikan Niat dan Gerakan sholat wajib

happines

(38)

37

8. Storyboard Menu Opening Quiz

Gambar III.8.

Storyboard Menu Opening Quiz

Visual Sketsa Audio

Dalam frame ini berisikan opening

sebelum masuk ke dalam soal quiz

happines

9.

Storyboard Soal Quiz

Tabel III.9.

Storyboard Tampilan Soal Quiz

Visual Sketsa Audio

Dalam frame ini berisikan soal pilihan ganda

happines

(39)

38

10.

Storyboard Hasil Quiz

Tabel III.10.

Storyboard Tampilan Hasil Quiz

Visual Sketsa Audio

Dalam frame ini berisikan soal pilihan ganda

happines

3.2.3. User Interface

1. User Interface Menu Opening

Gambar III.1.

User Interface Menu Opening 2. User Interface Menu Utama

Gambar III.2

User Interface Menu Utama

(40)

39

3. User Interface Menu Gerakan Wudhu

Gambar III.3.

User Interface Menu Gerakan Wudhu 4. User Interface Menu Niat Wudhu

Gambar III.4.

User Interface Menu Niat Wudhu 5. User Interface Menu Gerakan Wudhu

Gambar III.5.

User Interface Menu Gerakan Wudhu 6. User Interface Menu Pilihan Sholat

Gambar III.6.

User Interface Menu Pilihan Sholat

(41)

40

7. User Interface Niat dan Gerakan Sholat

Gambar III.7.

User Interface Niat dan Gerakan Sholat 8. User Interface Menu Opening Quiz

Gambar III.8.

User Interface Menu Opening Quiz 9. User Interface Soal Quiz

Gambar III.9.

User Interface Soal Quiz

10. User Interface Hasil Quiz

Gambar III.10.

User Interface Hasil Quiz

(42)

41

3.2.4. State Transition Diagram

State Transition Diagram adalah suatu pemodelan peralatan (modeling tool) yang menggambarkan sifat ketergantungan terhadap suatu sifat waktu nyata (real time system), dan tampilan tatap muka (interface) pada sistem aktif (online system).

Pemodelan ini juga penulis gunakan dalam menjelaskan alur-alur dari aplikasi yang penulis rancang.

1. Scene Opening dan Menu Utama

Gambar III.11.

State Transition Diagram Opening & Menu Utama 2. Scene Gerakan Wudhu

Gambar III.12.

State Transition Diagram Gerakan Wudhu

3. Scene Gerakan Sholat

(43)

42

Gambar III.13.

State Transition Diagram Gerakan Sholat 4. Scene Soal Quiz

Gambar III.14.

State Transition Diagram Menu Quiz

3.3. Code Generation 3.3.1. Testing

Aplikasi game yang telah dibuat, selanjutnya diuji setidaknya satu kali melalui teknik pengujian perangkat lunak yang meliputi pengujian white box dan black box.

a. Pengujian White Box

Metode pengujian White Box menggunakan struktur kontrol desain prosedural (structural testing) untuk memperoleh test case. Pengujian dilakukan untuk memastikan bahwa semua statement pada program telah dieksekusi paling tidak satu kali. Kompleksitas siklomatis (pengukuran kuantitatif terhadap kompleksitas logis suatu program) dari grafik alir dapat diperoleh dengan perhitungan:

E = Jumlah edge grafik alir yang ditandakan dengan gambar panah V(G)= E – N + 2

(44)

43

N= jumlah simpul grafik alir yang ditandakan dengan gambar lingkaran

Pada setiap menu akan dibahas mengenai prinsip kerjanya, sehingga user akan lebih mudah untuk mengetahui alur secara mendasar dan membantu didalam pengembangan program dikemudian hari.

1. Pengujian White Box Menu Utama

Gambar III.15.

Bagan Alir Menu Utama Berikut grafik alir yang penulis buat :

(45)

44

Gambar III.16.

Grafik Alir Menu Utama Sehingga kompleksitas siklomatisnya V(G)=11-9+2=4

Basis set yang dihasilkan dari jalur independent secara linier, yaitu :

=1+2+3+7+2+3+4+5+6

=1+2+3+4+8+2+3+4+5+6

=1+2+3+4+5+9+2+3+4+5+6

=1+2+3+4+5+6

Ketika aplikasi dijalankan, maka terlihat bahwa salah satu basis set yang dihasilkan adalah 1+2+3+4+5+6 dan terlihat bahwa simpul telah dieksekusi satu kali.

Berdasarkan pengamatan ketentuan tersebut dari segi kelayakan software, sistem ini telah memenuhi syarat.

Pengujian basic path menggunakan grafik alir seperti dijelaskan pada gambar dibawah ini:

masuk.addEventListener(MouseEvent.CLICK, masukmenu);

function masukmenu(event:MouseEvent):void{

gotoAndStop("menu");

1

(46)

45

}

stop();

var suara:Sound;

var suara_c:SoundChannel = new SoundChannel();

suara_c.stop();

suara = new menu_utama();

suara_c = suara.play(0,1);

gerakanwudhu.addEventListener(MouseEvent.CLICK, masukwudhu);

function masukwudhu(event:MouseEvent):void{

gotoAndStop("wudhu");

}

gerakansholat.addEventListener(MouseEvent.CLICK, masuksholat);

function masuksholat(event:MouseEvent):void{

gotoAndStop("sholat");

}

quiz.addEventListener(MouseEvent.CLICK, masukquiz);

function masukquiz(event:MouseEvent):void{

gotoAndStop("quiz");

}

quit_next.addEventListener(MouseEvent.CLICK, quit3);

function quit1(event:MouseEvent):void{

NativeApplication.nativeApplication.exit(0);

}

gotoAndStop(1);

}

gotoAndStop(2);

}

2. Pengujian White Box Menu Gerakan wudhu

3

4

5

6 7 2

8

9

(47)

46

Gambar III.17.

Bagan Alir Menu Gerakan Wudhu Berikut grafik alir yang penulis buat :

Gambar III.18.

Grafik Alir Menu Gerakan Wudhu Sehingga kompleksitas siklomatisnya V(G)=8-7+2=3

(48)

47

=1+2+3+6+2+3+4+5

=1+2+3+4+7+2+3+4+5

=1+2+3+4+5

Ketika aplikasi dijalankan, maka terlihat bahwa salah satu basis set yang dihasilkan adalah 1+2+3+4+7+2+3+4+5 dan terlihat bahwa simpul telah dieksekusi satu kali.

}

suara_n.stop();

suaran = new pilihmateri();

suara_n = suaran.play(0,1);

niatwudhu.addEventListener(MouseEvent.CLICK, niatw);

function niatw(event:MouseEvent):void{

gotoAndStop("niatwudhu");

}

g_wudhu.addEventListener(MouseEvent.CLICK, gw);

function gw(event:MouseEvent):void{

gotoAndStop("gerakwudhu");

}

gotoAndStop(1);

}

gotoAndStop(2);

}

3. Pengujian White Box Menu Gerakan Sholat

1

3

4

2

6

7

5

(49)

48

Gambar III.19.

Bagan Alir Menu Gerakan Sholat Berikut grafik alir yang penulis buat :

(50)

49

Gambar III.20.

Grafik Alir Menu Gerakan Sholat Sehingga kompleksitas siklomatisnya V(G)=17-13+2=6

=1+2+3+9+2+3+4+5+6+7+8

=1+2+3+4+10+2+3+4+5+6+7+8

=1+2+3+4+5+11+2+3+4+5+6+7+8

=1+2+3+4+5+6+12+2+3+4+5+6+7+8

=1+2+3+4+5+6+7+13+2+3+4+5+6+7+8

=1+2+3+4+5+6+7+8

Ketika aplikasi dijalankan, maka terlihat bahwa salah satu basis set yang dihasilkan adalah 1+2+3+4+5+6+7+8 dan terlihat bahwa simpul telah dieksekusi satu kali.

}

1

(51)

50

suara_c.stop();

suara = new pilihmateri();

suara_c = suara.play(0,1);

subuhbutton.addEventListener(MouseEvent.CLICK, subuhh);

function subuhh(event:MouseEvent):void{

gotoAndStop("subuh");

}

dzuhurbutton.addEventListener(MouseEvent.CLICK, dzuhurr);

function dzuhurr(event:MouseEvent):void{

gotoAndStop("dzuhur");

}

asharbutton.addEventListener(MouseEvent.CLICK, asharr);

function asharr(event:MouseEvent):void{

gotoAndStop("ashar");

}

maghribbutton.addEventListener(MouseEvent.CLICK, maghribb);

function maghribb(event:MouseEvent):void{

gotoAndStop("maghrib");

}

isyabutton.addEventListener(MouseEvent.CLICK, isyaa);

function isyaa(event:MouseEvent):void{

gotoAndStop("isya");

}

gotoAndStop(1);

}

gotoAndStop(2);

}

4. Pengujian White Box Menu Kuis

3

4

5

9 2

10

11

6 ¹²

7 13

8

(52)

51

Gambar III.21.

Bagan Alir Menu Kuis Berikut grafik alir yang penulis buat :

(53)

52

Gambar III.22.

Grafik Alir Menu Kuis Sehingga kompleksitas siklomatisnya V(G)=8-7+2=3

=1+2+3+4+3+4+5+6+7

=1+2+3+4+5+6+3+4+5+6+7

=1+2+3+4+5+6+7

Ketika aplikasi dijalankan, maka terlihat bahwa salah satu basis set yang dihasilkan adalah 1+2+3+4+5+6+7 dan terlihat bahwa simpul telah dieksekusi satu kali.

}

mulaikuis.addEventListener(MouseEvent.CLICK, ke_kuis);

function ke_kuis (event:MouseEvent):void{

nextFrame();

}

mulai_soal();

cek_a.visible=false;

cek_b.visible=false;

cek_c.visible=false;

a.visible=true;

1

3

2

4

(54)

53

b.visible=true;

c.visible=true;

selanjutnya.addEventListener(MouseEvent.CLICK, soal_selanjutnya);

a.addEventListener(MouseEvent.CLICK, ke_a);

b.addEventListener(MouseEvent.CLICK, ke_b);

c.addEventListener(MouseEvent.CLICK, ke_c);

function soal_selanjutnya(event:MouseEvent):void {

waktuKuis.stop();

nextFrame();

}

function ke_a(event:MouseEvent):void {

cek_a.visible=true;

selanjutnya.visible=true;

poin+=1;

a.visible=false;

b.visible=false;

c.visible=false;

}

function ke_b(event:MouseEvent):void {

cek_b.visible=true;

a.visible=false;

b.visible=false;

c.visible=false;

}

function ke_c(event:MouseEvent):void {

cek_c.visible=true;

a.visible=false;

b.visible=false;

c.visible=false;

}

var nilai:Number;

nilai=poin*20;

if (nilai <= 50){

gotoAndStop("hasilskor111");

}

else if (nilai == 60){

5

(55)

54

}

nilaikamu1.text=nilai.toString();

ulangi.addEventListener(MouseEvent.CLICK, ulang_kuis);

function ulang_kuis (event:MouseEvent):void{

gotoAndStop(1);

}

gotoAndStop(1);

}

gotoAndStop(2);

}

b. Pengertian Black Box

Pengujian ini dilakukan untuk memastikan bahwa suatu masukan akan menjalankan proses yang tepat dan menghasilkan output yang sesuai dengan rancangan.

6

7

(56)

55

Tabel III.11.

Black Box Menu utama INPUT/

EVENT

PROSES OUTPUT/

NEXT STAGE

HASIL PENGUJIAN Tombol

masuk

masuk.addEventListener(MouseEvent.

CLICK, masukmenu);

function

masukmenu(event:MouseEvent):void{

MovieClip(root).gotoAndStop(

"menu_utama");

}

Menampilkan menu utama

Sesuai

Tombol Gerakan Wudhu

g_wudhu.addEventListener(MouseEv ent.CLICK, gw);

}

Menampilkan Menu

Gerakan Wudhu

Sesuai

Tombol Gerakan Sholat

gerakansholat.addEventListener(Mous eEvent.CLICK, masuksholat);

function

masuksholat(event:MouseEvent):void {

gotoAndStop("sholat");

}

Menampilkan menu

Gerakan sholat

Sesuai

Tombol Quiz

quiz.addEventListener(MouseEvent.C LICK, masukquiz);

function

masukquiz(event:MouseEvent):void{

gotoAndStop("quiz");

}

Menampilkan menu quiz

Sesuai

Tombol Musik

var myMusic = new music_bg();

var volumesuara = new SoundTransform(0.7, 0);

var channell = myMusic.play(0, 9999, volumesuara);

stopButton.addEventListener(MouseE vent.CLICK, onStopClick);

function

onStopClick(event:MouseEvent):void {

channell.stop();

gotoAndStop(2);

}

Mematikan musik

Sesuai

(57)

56

Tombol Musik Mati

startButton.addEventListener(MouseE vent.CLICK, onStartClick);

function

onStartClick(event:MouseEvent):void {

gotoAndStop(1);

}

Menyalakan musik

Sesuai

Tombol Keluar

quit_next.addEventListener(MouseEv ent.CLICK, quit3);

function

quit1(event:MouseEvent):void{

NativeApplication.nativeAppli cation.exit(0);

} function

gotoAndStop(1);

} function

gotoAndStop(2);

}

Menampilkan tombol keluar

Sesuai

Tabel III.12.

Black Box Menu Gerakan wudhu INPUT/

EVENT

NEXT STAGE

niat wudhu

niatwudhu.addEventListener(MouseE vent.CLICK, niatw);

function

niatw(event:MouseEvent):void{

gotoAndStop("niatwudhu");

}

Menampilkan tombol niat wudhu

Sesuai

(58)

57

Tombol Gerakan Wudhu

g_wudhu.addEventListener(MouseEve nt.CLICK, gw);

}

Menampilkan Menu

Gerakan Wudhu

Sesuai

Tombol Home

home.addEventListener(MouseEvent.

CLICK, kemenuutama);

function

kemenuutama(event:MouseEvent):voi d{

}

Menampilkan tombol ke menu utama

Sesuai

Tabel III.13.

Black Box Menu Gerakan sholat

INPUT/

EVENT

NEXT STAGE

HASIL PENGUJIAN Tombol su

buh

subuhbutton.addEventListener(Mouse Event.CLICK, subuhh);

function

subuhh(event:MouseEvent):void{

gotoAndStop("subuh");

}

Menampilkan Gerakan sholat subuh

Sesuai

Tombol dzuhur

dzuhurbutton.addEventListener(Mous eEvent.CLICK, dzuhurr);

function

dzuhurr(event:MouseEvent):void{

gotoAndStop("dzuhur");

}

Menampilkan Gerakan sholat dzuhur

Sesuai

Tombol ashar

asharbutton.addEventListener(Mouse Event.CLICK, asharr);

function

asharr(event:MouseEvent):void{

gotoAndStop("ashar");

}

Menampilkan Gerakan sholat ashar

Sesuai

Tombol maghrib

maghribbutton.addEventListener(Mou seEvent.CLICK, maghribb);

function

maghribb(event:MouseEvent):void{

gotoAndStop("maghrib");

}

Menampilkan Gerakan sholat maghrib

Sesuai

(59)

58

Tombol isya

isyabutton.addEventListener(MouseE vent.CLICK, isyaa);

function

isyaa(event:MouseEvent):void{

gotoAndStop("isya");

}

Menampilkan Gerakan sholat isya

Sesuai

Tabel III.14.

Black Box Menu Kuis

INPUT/

EVENT

NEXT STAGE

Mulai

mulaikuis.addEventListener(MouseEv ent.CLICK, ke_kuis);

Untuk memulai kuis

Sesuai

Waktu kuis

var waktuKuis:Timer;

var waktuPerSoal:Number=30;

var waktuSoal:Number=0;

function mulai_soal():void{

waktuText.text=

String(waktuPerSoal) + "detik";

waktuKuis=new Timer(1000, waktuPerSoal);

waktuKuis.addEventListener(T imerEvent.TIMER, waktuJalan);

waktuKuis.addEventListener(T imerEvent.TIMER_COMPLETE, waktuSelesai);

waktuKuis.start();

} function

waktuJalan(e:TimerEvent):void{

if(Boolean(this.getChildByNa me("waktuText"))){

waktuSoal=waktuKuis.repeatC ount-waktuKuis.currentCount;

waktuText.text=String(waktuS oal) + "detik";

}

Menampilkan waktu

pengerjaan kuis

Sesuai

(60)

59

} function

waktuSelesai(e:TimerEvent):void{

nextFrame();

} Tombol pilihan A,B,C

mulai_soal();

a.visible=true;

b.visible=true;

c.visible=true;

selanjutnya.addEventListener(MouseE vent.CLICK, soal_selanjutnya);

a.addEventListener(MouseEvent.CLI CK, ke_a);

b.addEventListener(MouseEvent.CLI CK, ke_b);

c.addEventListener(MouseEvent.CLI CK, ke_c);

function

soal_selanjutnya(event:MouseEvent):v oid

{

waktuKuis.stop();

nextFrame();

} function

ke_a(event:MouseEvent):void {

cek_a.visible=true;

poin+=1;

a.visible=false;

b.visible=false;

c.visible=false;

} function

ke_b(event:MouseEvent):void {

cek_b.visible=true;

Untuk menjawab pilihan kuis

Sesuai

(61)

60

a.visible=false;

b.visible=false;

c.visible=false;

} function

ke_c(event:MouseEvent):void {

cek_c.visible=true;

a.visible=false;

b.visible=false;

c.visible=false;

}

3.3.2. Support

Berikut adalah Spesifikasi Hardware dan Software yang dipergunakan dalam pembuatan animasi interaktif ini.

Tabel III.15.

Kebutuhan Hardware dan Software

Kebutuhan Keterangan

Sistem Operasi Windows 10 Pro

Processor Processor Core Intel Celeron N4000

dual-core

Memori 4GB

Hard disk 500 GB

Software - Adobe Photoshop CS6

- Adobe Flash CS6 - Adobe Audition CS6

(62)

61

3.4. Hasil Pengolahan Data Kuesioner Animasi Interaktif

Dalam pembuatan aplikasi ini dilakukan wawancara langsung dengan guru dan siswa/siswi di SDN Abadijaya 2 mengenai program animasi interaktif belajar tata cara wudhu dan shalat wajib yang telah dibuat. Untuk dapat mengetahui apakah aplikasi ini baik atau tidaknya digunakan, maka anak diberikan lembar kuisioner untuk diisi setelah menjalankan aplikasi ini. Kuisioner diberikan kepada 30 anak dimana setiap lembar kuisioner terdiri dari 10 pertanyaan. Berikut ini adalah rincian dari beberapa pertanyaan kuisioner untuk para siswa/siswi di SDN Abadijaya 2:

Berikut ini adalah rincian dari beberapa pertanyaan:

(63)

62

Tabel III.16.

Kuisioner Pengenalan Gerakan Tata Cara Berwudhu dan Shalat

Keterangan = beri tanda silang (X) pada jawaban yang dipilih

No Pertanyaan Untuk Siswa/Siswi YA CUKUP TIDAK 1 Menurut Adik-adik apakah aplikasi animasi

interaktif ini mudah digunakan?

2 Menurut Adik-adik apakah aplikasi ini dapat membantu adik-adik dalam belajar tata cara

wudhu dan shalat?

3 Menurut adik-adik apakah animasi ini menarik untuk dipelajari ?

4 Menurut adik-adik apakah gambar dan desain

didalam animasi ini menarik?

5 Menurut adik-adik apakah pembelajaran di

dalam animasi ini mudah dimengerti?

6 Menurut adik-adik apakah setelah mencoba

animasi ini adik-adik tertarik untuk belajar tata

cara wudhu dan shalat?

7 Menurut adik-adik apakah animasi ini membantu adik-adik didalam menghafal gerakan gerakan

wudhu dan shalat?

8 Menurut adik-adik apakah dengan adanya animasi ini pelajaran tata cara wudhu dan shalat

jadi menyenangkan?

9 Menurut adik-adik apakah suara yang didengar dalam animasi ini jelas?

10 Menurut adik-adik apakah setelah mencoba

animasi ini membantu dalam belajar tata cara

wudhu dan shalat?

(64)

63

Berikut ini adalah grafik batang perhitungan kuisioner animasi interaktif pengenalan pengenalan gerakan tata cara berwudhu dan shalat pada siswa/siswi SDN Abadijaya 2 :

Gambar III.32.

Tampilan Grafik Batang Kuisioner Pengenalan pengenalan pengenalan gerakan tata cara berwudhu dan shalat

Berikut ini adalah grafik pie perhitungan kuisioner animasi interaktif pengenalan gerakan tata cara berwudhu dan shalat pada siswa/siswi SDN Abadijaya 2

Gambar III.33.

Tampilan Grafik Pie Kuisioner Pengenalan interaktif pengenalan gerakan tata cara berwudhu dan shalat

0 5 10 15 20 25

1 2 3 4 5 6 7 8 9 10

ya cukup tidak

61%

39%

0%

YA CUKUP TIDAK

(65)

BAB IV PENUTUP 4.1. Kesimpulan

Dalam pembahasan mengenai animasi interaktif pengenalan gerakan tata cara wudhu dan shalat wajib ini penulis menyimpulkan bahwa :

1. Dengan aplikasi Animasi interaktif ini menjadi media alternatif dalam pengenalan pembelajaran gerakan tata cara wudhu dan shalat wajib.

2. Dengan dibuatnya animasi interaktif ini, maka metode pembelajaran tata cara wudhu dan shalat wajib lebih menyenangkan, serta lebih fleksibel tidak terbatas tempat dan waktu untuk belajar.

3. Animasi interaktif ini mudah dipahami karena dirancang dengan tampilan menarik, edukatif, dan tidak membuat anak cepat merasa bosan.

4.2. Saran-saran

Dari kesimpulan penulis bermaksud memberikan saran sebagai alteranatif pemikiran dengan harapan agar aspek ilmu pengetahuan tidak bersifat monoton.

Adapun saran-saran yang dapat penulis sampaikan adalah sebagai berikut:

1. Aplikasi interaktif ini masih perlu dikembangkan dengan cara menguji berulang- ulang, sehingga dapat mengetahui kekurangan aplikasi ini.

2. Penambahan animasi yang gerakannya lebih halus sehingga terlihat indah, perpaduan warna yang menarik, serta suara agar dapat membuat anak lebih tertarik.

(66)

3. Apabila pengguna seorang anak perlu didampingi oleh Guru, Orangtua, atau orang dewasa yang dapat membantu membaca proses belajar sehingga proses pembelajaran semakin baik