41
19 BAB III PEMBAHASAN 3.1. Analisis Kebutuhan Program animasi interaktif ini ditunjukan bagi mereka yang ingin mengetahui lebih dalam tentang penyakit demam berdarah dengue. Dengan program animasi interaktif ini, pengguna diharapkan bisa lebih memahami tentang penyakit demam berdarah dengue. Adapun menu-menu yang dapat dijalankan oleh pengguna yang memakai program ini, yaitu: 1. Penjelasan tentang pengenalan penyakit demam berdarah dengue. Pada menu ini, pengguna dapat mengetahui dan mengenal apa itu penyakit demam berdarah dengue. 2. Penjelasan tentang penyebab terjadinya penyakit demam berdarah dengue. Pada menu ini, pengguna dapat mengetahui apa saja penyebab terjadinya penyakit demam berdarah dengue 3. Penjelasan tentang gejala-gejala yang timbul ketika terjangkit penyakit demam berdarah dengue. Pada menu ini, pengguna dapat mengetahui gejala-gelaya yang timbul ketika seseorang terjangkit penyakit demam berdarah dengue. 4. Penjelasan tentang cara melakukan pertolongan pertama ketika terjangkit penyakit demam berdarah dengue. Pada menu ini, pengguna dapat mengetahui hal yang bisa dilakukan ketika anggota keluarga positif terjangkit penyakit demam berdarah dengue.

BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

19

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

Program animasi interaktif ini ditunjukan bagi mereka yang ingin

mengetahui lebih dalam tentang penyakit demam berdarah dengue. Dengan program

animasi interaktif ini, pengguna diharapkan bisa lebih memahami tentang penyakit

demam berdarah dengue. Adapun menu-menu yang dapat dijalankan oleh pengguna

yang memakai program ini, yaitu:

1. Penjelasan tentang pengenalan penyakit demam berdarah dengue.

Pada menu ini, pengguna dapat mengetahui dan mengenal apa itu penyakit

demam berdarah dengue.

2. Penjelasan tentang penyebab terjadinya penyakit demam berdarah dengue.

Pada menu ini, pengguna dapat mengetahui apa saja penyebab terjadinya

penyakit demam berdarah dengue

3. Penjelasan tentang gejala-gejala yang timbul ketika terjangkit penyakit

demam berdarah dengue.

Pada menu ini, pengguna dapat mengetahui gejala-gelaya yang timbul ketika

seseorang terjangkit penyakit demam berdarah dengue.

4. Penjelasan tentang cara melakukan pertolongan pertama ketika terjangkit

penyakit demam berdarah dengue.

Pada menu ini, pengguna dapat mengetahui hal yang bisa dilakukan ketika

anggota keluarga positif terjangkit penyakit demam berdarah dengue.

Page 2: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

20

5. Informasi terkait nomor-nomor emergency Rumah Sakit, Klinik dan

Puskesmas-puskesmas terdekat.

Pada menu ini, pengguna dapat mengetahui informasi beberapa nomor-

nomor Rumah Sakit, Klinik dan Puskesmas terdekat.

6. Penjelasan Tentang mencegah penyakit demam berdarah dengue.

Pada bab ini, pengguna dapat mengetahui cara-cara untuk mencegah

penyakit demam berdarah dengue.

7. Simulasi kegiatan cara mencegah penyakit demam berdarah dengue.

Pada bab ini, pengguna dapat melakukan simulasi seputar beberapa kegiatan

cara mencegah penyakit demam berdarah dengue untuk menguji pemahaman

pengguna tentang cara mencegah penyakit demam berdarah dengue.

3.2. Perancangan Perangkat Lunak

Perancangan perangkat lunak pada program animasi interaktif ini meliputi

rancangan storyboard dan rancangan antar muka (interface).

3.2.1. Rancangan Storyboard

Berikut adalah rangkaian storyboard yang akan digunakan pada program

animasi interaktif mengenal dan cara pencegahan terhadap penyakit demam

berdarah dengue:

1. Setting

Setting awal program animasi interaktif ini adalah halaman intro. Pada halaman

intro terdapat tombol “Mulai” yang dapat digunakan untuk mengakses/menuju

menu beranda. Pada menu beranda terdapat 3 tombol yaitu tombol “Teori”,

tombol “Simulasi” dan tombol “Keluar”.

Page 3: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

21

2. Sinopsis

Animasi ini memiliki skenario dan alur cerita sebagai berikut:

Program animasi ini diawali dengan halaman intro dan terdapat 1 tombol yaitu

tombol “Mulai” yang berfungsi untuk menuju ke halaman beranda. Didalam

beranda terdapat tiga tombol yaitu tombol “Teori”, tombol “simulasi” dan tombol

“keluar”. Ketika tombol “Teori” diakses, maka akan muncul lima menu yaitu

menu pengenalan, menu penyebab, menu gejala, menu pertolongan pertama,

menu no emergency dan menu cara pencegahan serta tombol home untuk kembali

ke menu beranda. Ketika tombol “Simulasi” diakses, maka akan muncul dua

menu yaitu menu simulasi seputar kegiatan pencegahan penyakit DBD di

halaman rumah dan menu simulasi seputar kegiatan pencegahan penyakit DBD di

halaman sekolah serta tombol “Home” untuk kembali ke halaman beranda.

Sedangkan ketika tombol “Keluar” diakses, maka program akan tertutup/keluar.

3. Tokoh

Di dalam program animasi ini ada satu tokoh yang digunakan, yaitu tokoh

serangga nyamuk.

Adapun rancangan storyboard yang terdapat di program animasi interaktif ini

adalah:

Page 4: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

22

Tabel III.1

Storyboard Intro

KETERANGAN GAMBARAN SUARA

Isi dari halaman utama terdapat satu tombol yang aktif

yaitu tombol “Mulai”.

- intro.wav

Tabel III.2

Storyboard Beranda

KETERANGAN GAMBARAN SUARA

Isi dari halaman Beranda terdapat tiga tombol yang aktif yaitu tombol

“Teori”, ”Simulasi” dan

“Keluar”.

- intro.wav

Page 5: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

23

Tabel III.3

Storyboard Teori

KETERANGAN GAMBARAN SUARA

Pada saat tombol Teori aktif, maka

akan muncul halaman animasi beserta beberapa tombol yang aktif

seperti tombol “Pengenalan”, “Penyebab”,

“Gejala”, “Pertolongan

Pertama”, “No Emergency”, “Cara Pencegahan” dan

“Home”.

-

Tabel III.4

Storyboard Materi Pengenalan

ISI GAMBARAN SUARA

Pada saat tombol “Pengenalan”aktif, maka akan muncul Materi pengenalan penyakit demam berdarah dengue

pada layar penjelasan.

- pengenalan 1.wav

Page 6: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

24

Tabel III.5

Storyboard Materi Penyebab

KETERANGAN GAMBARAN SUARA

Pada saat tombol “Penyebab” aktif, maka akan muncul Materi penyebab

terjadinya penyakit demam berdarah

dengue pada layar penjelasan.

- penyebab 1.wav

Tabel III.6

Storyboard Materi Gejala

KETERANGAN GAMBARAN SUARA

Pada saat tombol “Gejala” aktif,

maka akan muncul Materi gejala-gejala penyakit

demam berdarah dengue pada layar

penjelasan.

- gejala a.wav

Page 7: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

25

Tabel III.7

Storyboard Materi Pertolongan Pertama

KETERANGAN GAMBARAN SUARA

Pada saat tombol “Pertolongan

Pertama” aktif, maka akan muncul Materi pertolongan

pertama pada penderita penyakit demam berdarah

dengue pada layar penjelasan.

- pertolongan a.wav

Tabel III.8

Storyboard Informasi Nomor Emergency

KETERANGAN GAMBARAN SUARA

Pada saat tombol “No Emergency” aktif, maka akan muncul Materi

informasi nomor-nomor Rumah sakit, Klinik

maupun Puskesmas

terdekat pada layar penjelasan.

- no emergency a.wav

Page 8: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

26

Tabel III.9

Storyboard Materi Cara Pencegahan

KETERANGAN GAMBARAN SUARA

Pada saat tombol “Cara

Pencegahan” aktif, maka akan muncul

Materi cara mencegah

penyakit demam berdarah dengue

pada layar penjelasan.

- cara pencegahan a.wav

Tabel III.10

Storyboard Isi Simulasi

KETERANGAN GAMBARAN SUARA

Pada saat tombol Simulasi aktif, maka

akan muncul halaman animasi

berikut tiga tombol yang aktif yakni

tombol “Simulasi Kegiatan

Pencegahan Penyakit DBD

dihalaman rumah dan dihalaman Sekolah, serta

tombol “Home”

-

Page 9: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

27

Tabel III.11

Storyboard Isi Simulasi Halaman Rumah

KETERANGAN GAMBARAN SUARA

Pada saat tombol Simulasi seputar

kegiatan cara mencegah penyakit

DBD dihalaman rumah aktif , maka

akan muncul halaman Permainan

awal dimana terdapat objek

sampah dan tong air yang bisa di drag

and drop serta tombol informasi

pada layar penjelasan.

- simulasi.wav

Tabel III.12

Storyboard Isi Simulasi Halaman Sekolah

KETERANGAN GAMBARAN SUARA

Pada saat tombol Simulasi seputar

kegiatan cara mencegah penyakit

DBD dihalaman Sekolah aktif , maka

akan muncul halaman Permainan

awal dimana terdapat objek

sampah yang bisa di drag and drop serta tombol informasi

pada layar penjelasan.

Musik : main.wav

Page 10: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

28

Tabel III.13

Storyboard Permainan Menang

KETERANGAN GAMBARAN SUARA

Halaman jika berhasil

menyelesaikan Simulasi Seputar

kegiatan cara mencegah penyakit

DBD dihalaman rumah maupun di

Sekolah.

Musik : main.wav

Tabel III.14

Storyboard Permainan Kalah

KETERANGAN GAMBARAN SUARA

Halaman jika gagal menyelesaikan

Simulasi Seputar kegiatan cara

mencegah penyakit DBD dihalaman

rumah maupun di Sekolah.

Musik : main.wav

Page 11: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

29

3.2.2. Rancangan Antar Muka

Berikut adalah rancangan antar muka yang diterapkan pada animasi

interaktif yaitu sebagai berikut:

1. Rancangan Antar Muka Intro

Di halaman intro ini adalah halaman awal dimana ada animasi yang akan

menemani user selama user menggunakan program, terdapat tombol Mulai untuk

masuk ke halaman beranda.

III.1 Intro

2. Rancangan Antar Muka Beranda

Di halaman beranda ini terdapat tombol “Teori” untuk masuk ke materi

penyakit demam berdarah dengue, tombol “Simulasi” untuk simulasi seputar

kegiatan mencegah penyakit demam berdarah dengue dan tombol “Keluar” untuk

keluar dari program.

Page 12: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

30

Gambar III.2 Beranda

3. Rancangan Antar Muka Teori

Di halaman teori terdapat tampilan animasi serta beberapa tombol yang aktif

yaitu tombol Pengenalan untuk masuk ke pengenalan penyakit demam berdarah

dengue, tombol Penyebab untuk masuk ke penyebab terjadinya penyakit demam

berdarah dengue, tombol Gejala untuk masuk ke gejala penyakit demam berdarah

dengue, tombol Pertolongan Pertama untuk masuk ke cara pertolongan pertama

kepada penderita penyakit demam berdarah dengue, tombol No Emergency untuk

masuk ke informasi nomor-nomor Rumah Sakit, Klinik maupun Puskesmas

terdekat, tombol Cara Pencegahan untuk masuk ke cara mencegah penyakit demam

berdarah dengue serta tombol Home untuk kembali ke halaman beranda.

Page 13: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

31

Gambar III.3 Teori

4. Rancangan Antar Muka Materi Pengenalan

Di halaman materi pengenalan terdapat tampilan tentang materi pengertian

penyakit demam berdarah dengue, dimana didalamnya terdapat animasi dan contoh

gambar serta empat tombol yang aktif yaitu tombol next untuk masuk ke scene

berikutnya, tombol prev untuk kembali ke scene sebelumnya, tombol home untuk

kembali ke halaman beranda dan tombol back untuk kembali ke halaman teori.

Gambar III.4 Materi Pengenalan

Page 14: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

32

5. Rancangan Antar Muka Materi Penyebab

Di halaman materi penyebab terdapat tampilan tentang materi penyebab

terjadinya penyakit demam berdarah dengue, dimana didalamnya terdapat animasi

dan contoh gambar serta empat tombol yang aktif yaitu tombol next untuk masuk ke

scene berikutnya, tombol prev untuk kembali ke scene sebelumnya, tombol home

untuk kembali ke halaman beranda dan tombol back untuk kembali ke halaman

teori.

Gambar III.5 Materi Penyebab

6. Rancangan Antar Muka Materi Gejala

Di halaman materi gejala terdapat tampilan tentang materi gejala yang timbul

ketika terjangkit penyakit demam berdarah dengue, dimana didalamnya terdapat

animasi dan contoh gambar serta empat tombol yang aktif yaitu tombol next untuk

masuk ke scene berikutnya, tombol prev untuk kembali ke scene sebelumnya,

tombol home untuk kembali ke halaman beranda dan tombol back untuk kembali ke

halaman teori.

Page 15: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

33

Gambar III.6 Materi Gejala

7. Rancangan Antar Muka Materi Pertolongan Pertama

Di halaman materi pertolongan pertama terdapat tampilan tentang materi

cara pertolongan pertama ketika anggota keluarga positif terkena penyakit demam

berdarah dengue, dimana didalamnya terdapat animasi dan contoh gambar serta

empat tombol yang aktif yaitu tombol next untuk masuk ke scene berikutnya, tombol

prev untuk kembali ke scene sebelumnya, tombol home untuk kembali ke halaman

beranda dan tombol back untuk kembali ke halaman teori.

Page 16: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

34

Gambar III.7 Materi Pertolongan Pertama

8. Rancangan Antar Muka Materi No Emergency

Di halaman materi no emergency terdapat tampilan informasi nomor-nomor

Rumah Sakit, Klinik maupun Puskesmas dimana didalamnya terdapat animasi dan

contoh gambar serta empat tombol yang aktif yaitu tombol next untuk masuk ke

scene berikutnya, tombol prev untuk kembali ke scene sebelumnya, tombol home

untuk kembali ke halaman beranda dan tombol back untuk kembali ke halaman

teori.

Gambar III.8 Materi No Emergency

Page 17: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

35

9. Rancangan Antar Muka Materi Cara Pencegahan

Di halaman materi cara pencegahan terdapat tampilan tentang materi cara

untuk mencegah penyakit demam berdarah dengue, dimana didalamnya terdapat

animasi dan contoh gambar serta empat tombol yang aktif yaitu tombol next untuk

masuk ke scene berikutnya, tombol prev untuk kembali ke scene sebelumnya,

tombol home untuk kembali ke halaman beranda dan tombol back untuk kembali ke

halaman teori.

Gambar III.9 Materi Cara Pencegahan

10. Rancangan Antar Muka Simulasi

Di halaman Simulasi terdapat tiga tombol yang aktif yatu tombol Simulasi

seputar kegiatan pencegahan penyakit DBD di halaman Rumah, tombol Simulasi

seputar kegiatan pencegahan penyakit DBD di halaman Sekolah dan tombol Home

untuk kembali ke halaman beranda.

Page 18: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

36

Gambar III.10 Simulasi

11. Rancangan Antar Muka Isi Simulasi Halaman Rumah

Di halaman Isi Simulasi Halaman Rumah terdapat tombol informasi untuk

memberi pengarahan kepada user cara melakukan kegiatan simulasi yang akan

dimainkan serta ada beberapa contoh objek sampah yang harus dimasukkan ke objek

tempat sampah dan ditimbun kedalam tanah serta objek penutup tong yang diletakan

diatas tong air, dimana user hanya diberi dua kesempatan.

Gambar III.11 Simulasi Rumah

Page 19: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

37

12. Rancangan Antar Muka Isi Simulasi Halaman Sekolah

Di halaman Isi Simulasi Halaman Sekolah terdapat tombol informasi untuk

memberi pengarahan kepada user cara melakukan kegiatan simulasi yang akan

dimainkan serta ada beberapa contoh objek sampah yang harus dimasukkan ke objek

tempat sampah dan ditimbun kedalam tanah, dimana user hanya diberi dua

kesempatan.

Gambar III.12 Simulasi Sekolah

13. Rancangan Antar Muka Simulasi Menang

Di halaman simulasi menang ini adalah tampilan dimana saat simulasi

berhasil diselesaikan, dan user dapat mengulang kembali ke halaman Simulasi.

Page 20: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

38

Gambar III.13 Isi Simulasi Menang

14. Rancangan Antar Muka Simulasi Kalah

Di halaman simulasi kalah ini adalah tampilan dimana saat user tidak

berhasil menyelesaikan simulasi sesuai yang diperintahkan, dan user dapat

mengulang kembali ke halaman Simulasi.

Gambar III.14 Isi Simulasi Kalah

Page 21: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

39

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

Implementasi rancangan antar muka pada aplikasi animasi interaktif ini

adalah sebagai berikut:

1. Tampilan Intro

Di halaman intro ini adalah halaman awal dimana ada animasi yang akan

menemani user selama user menggunakan program, terdapat tombol Mulai untuk

masuk ke halaman beranda.

Gambar III.15 Tampilan intro

2. Tampilan Beranda

Di halaman beranda ini terdapat tombol “Teori” untuk masuk ke materi

penyakit demam berdarah dengue, tombol “Simulasi” untuk simulasi seputar

kegiatan mencegah penyakit demam berdarah dengue dan tombol “Keluar” untuk

keluar dari program.

Page 22: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

40

Gambar III.16 Tampilan Beranda

3. Tampilan Teori

Di halaman teori terdapat tampilan animasi serta beberapa tombol yang aktif

yaitu seperti tombol Pengenalan untuk masuk ke pengenalan penyakit demam

berdarah dengue, tombol Penyebab untuk masuk ke penyebab terjadinya penyakit

demam berdarah dengue, tombol Gejala untuk masuk ke gejala penyakit demam

berdarah dengue, tombol Pertolongan Pertama untuk masuk ke cara pertolongan

pertama kepada penderita penyakit demam berdarah dengue, tombol No Emergency

untuk masuk ke informasi nomor-nomor Rumah Sakit, Klinik maupun Puskesmas

terdekat, tombol Cara Pencegahan untuk masuk ke cara mencegah penyakit demam

berdarah dengue serta tombol Home untuk kembali ke halaman beranda.

Page 23: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

41

Gambar III.17 Tampilan Teori

4. Tampilan Pengenalan

Di halaman materi pengenalan terdapat tampilan tentang materi pengertian

penyakit demam berdarah dengue, dimana didalamnya terdapat animasi dan contoh

gambar serta empat tombol yang aktif yaitu tombol next untuk masuk ke scene

berikutnya, tombol prev untuk kembali ke scene sebelumnya, tombol home untuk

kembali ke halaman beranda dan tombol back untuk kembali ke halaman teori.

Page 24: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

42

Gambar III.18 Tampilan Materi Pengenalan

5. Tampilan Penyebab

Di halaman materi penyebab terdapat tampilan tentang materi penyebab

terjadinya penyakit demam berdarah dengue, dimana didalamnya terdapat animasi

dan contoh gambar serta empat tombol yang aktif yaitu tombol next untuk masuk ke

scene berikutnya, tombol prev untuk kembali ke scene sebelumnya, tombol home

untuk kembali ke halaman beranda dan tombol back untuk kembali ke halaman

teori.

Page 25: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

43

Gambar III.19 Tampilan Materi Penyebab

6. Tampilan Gejala

Di halaman materi gejala terdapat tampilan tentang materi gejala yang timbul

ketika terjangkit penyakit demam berdarah dengue, dimana didalamnya terdapat

animasi dan contoh gambar serta empat tombol yang aktif yaitu tombol next untuk

masuk ke scene berikutnya, tombol prev untuk kembali ke scene sebelumnya,

tombol home untuk kembali ke halaman beranda dan tombol back untuk kembali ke

halaman teori.

Page 26: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

44

Gambar III.20 Tampilan Materi Gejala

7. Tampilan Pertolongan Pertama

Di halaman materi pertolongan pertama terdapat tampilan tentang materi

cara pertolongan pertama ketika anggota keluarga positif terkena penyakit demam

berdarah dengue, dimana didalamnya terdapat animasi dan contoh gambar serta

empat tombol yang aktif yaitu tombol next untuk masuk ke scene berikutnya,

tombol prev untuk kembali ke scene sebelumnya, tombol home untuk kembali ke

halaman beranda dan tombol back untuk kembali ke halaman teori.

Page 27: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

45

Gambar III.21 Tampilan Materi Pertolongan Pertama

8. Tampilan No Emergency

Di halaman materi no emergency terdapat tampilan informasi nomor-nomor

Rumah Sakit, Klinik maupun Puskesmas dimana didalamnya terdapat animasi dan

contoh gambar serta empat tombol yang aktif yaitu tombol next untuk masuk ke

scene berikutnya, tombol prev untuk kembali ke scene sebelumnya, tombol home

untuk kembali ke halaman beranda dan tombol back untuk kembali ke halaman

teori.

Page 28: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

46

Gambar III.22 Tampilan Materi No Emergency

9. Tampilan Cara Pencegahan

Di halaman materi cara pencegahan terdapat tampilan tentang materi cara

untuk mencegah penyakit demam berdarah dengue, dimana didalamnya terdapat

animasi dan contoh gambar serta empat tombol yang aktif yaitu tombol next untuk

masuk ke scene berikutnya, tombol prev untuk kembali ke scene sebelumnya,

tombol home untuk kembali ke halaman beranda dan tombol back untuk kembali ke

halaman teori.

Page 29: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

47

Gambar III.23 Tampilan Materi Cara Pencegahan

10. Tampilan Simulasi

Di halaman Simulasi terdapat tiga tombol yang aktif yatu tombol Simulasi

seputar kegiatan pencegahan penyakit DBD di halaman Rumah, tombol Simulasi

seputar kegiatan pencegahan penyakit DBD di halaman Sekolah dan tombol Home

untuk kembali ke halaman beranda.

Gambar III.24 Tampilan Simulasi

Page 30: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

48

11. Tampilan Simulasi Halaman Rumah

Di halaman Isi Simulasi Halaman Rumah terdapat tombol informasi untuk

memberi pengarahan kepada user cara melakukan kegiatan simulasi yang akan

dimainkan serta isi simulasi seputar kegiatan mencegah penyakit DBD dimana saat

simulasi dimulai, ada beberapa contoh objek sampah yang harus dimasukkan ke

objek tempat sampah dan ditimbun kedalam tanah serta objek penutup tong yang

diletakan diatas tong air, dimana user hanya diberi dua kesempatan.

Gambar III.25 Tampilan Simulasi Rumah

12. Tampilan Simulasi Halaman Sekolah

Di halaman Isi Simulasi Halaman Sekolah terdapat tombol informasi untuk

memberi pengarahan kepada user cara melakukan kegiatan simulasi yang akan

dimainkan serta isi simulasi seputar kegiatan mencegah penyakit DBD dimana saat

simulasi dimulai, ada beberapa contoh objek sampah yang harus dimasukkan ke

objek tempat sampah dan ditimbun kedalam tanah, dimana user hanya diberi dua

kesempatan.

Page 31: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

49

Gambar III.26 Tampilan Simulasi Sekolah

13. Tampilan Simulasi Berhasil

Di halaman Simulasi berhasil ini adalah tampilan dimana saat simulasi

berhasil diselesaikan, dan user dapat kembali ke halaman Simulasi.

Gambar III.27 Tampilan Simulasi Berhasil

Page 32: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

50

14. Tampilan Simulasi Kalah

Di halaman simulasi kalah ini adalah tampilan dimana saat user tidak

berhasil menyelesaikan simulasi sesuai yang diperintahkan, dan user dapat

mengulang kembali ke halaman Simulasi.

Gambar III.28 Tampilan Simulasi Kalah

A. Spesifikasi Sistem Komputer

1. Perangkat Keras

Perangkat keras merupakan elemen vital yang diperlukan untuk menjalankan

program aplikasi atau software yang akan digunakan. Elemen-elemen vital tersebut

merupakan (input device), tempat penyimpanan (storage unit), dan peralatan

keluaran (output device). Spesifikasi perangkat keras yang dibutuhkan adalah

sebagai berikut:

a. CPU (Central Processing Unit)

1) Processor Intel Pentium 4

2) Memory (RAM) 1 GB

Page 33: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

51

3) Harddisk 80 GB

b. Monitor dengan resolusi layar minimum 1024x768

c. Standart Mouse

d. Standart Keyboard

2. Perangkat Lunak

Perangkat lunak atau software merupakan suatu rangkaian instruksi yang

disusun secara teratur agar komputer dapat mengolah data untuk mendapatkan

informasi yang dibutuhkan oleh user atau pengguna. Dalam pembuatan program

animasi interaktif ini dibutuhkan perangkat lunak sebagai berikut:

a. Sistem Operasi: Windows 7

b. Program Pendukung: Macromedia Flash Professional 8, Audio Editor

Master.

3.3.2. Pengujian Unit

A. Blackbox Testing

Tabel III.15 Hasil Pengujian Blackbox Testing Intro

Input/Event Proses Output/Next

Stage Hasil

Pengujian Tombol “Mulai”

onPress = function(){ gotoAndStop(2); }

Menampilkan halaman Beranda

Sesuai

Tabel III.16 Hasil Pengujian Blackbox Testing Beranda

Input/Event Proses Output/Next

Stage Hasil

Pengujian Tombol “Teori”

onPress = function(){ gotoAndStop(3); }

Menampilkan halaman teori. Sesuai

Tombol onPress = function(){ Menampilkan Sesuai

Page 34: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

52

“Simulasi” gotoAndStop(4); }

halaman simulasi.

Tombol “Keluar”

on(release){ fscommand("quit",true); }

Keluar dari program. Sesuai

Tabel III.17 Hasil Pengujian Blackbox Testing Teori

Input/Event Proses Output/Next

Stage Hasil

Pengujian Tombol “Pengenalan”

onPress = function(){ gotoAndStop(21); }

Menampilkan halaman Pengenalan.

Sesuai

Tombol “Penyebab”

onPress = function(){ gotoAndStop(23); }

Menampilkan halaman Penyebab.

Sesuai

Tombol “Gejala”

onPress = function(){ gotoAndStop(25); }

Menampilkan halaman Gejala.

Sesuai

Tombol “Pertolongan Pertama”

onPress = function(){ gotoAndStop(30); }

Menampilkan halaman Pertolongan Pertama.

Sesuai

Tombol “No Emergency”

onPress = function(){ gotoAndStop(35); }

Menampilkan halaman No Emergency.

Sesuai

Tombol “Cara Pencegahan”

onPress = function(){ gotoAndStop(41); }

Menampilkan halaman Cara Pencegahan.

Sesuai

Tombol “Home”

onPress = function(){ _root.gotoAndPlay(2); }

Menampilkan halaman beranda

Sesuai

Tabel III.18 Hasil Pengujian Blackbox Testing Penjelasan

Input/Event Proses Output/Next

Stage Hasil

Pengujian Tombol “Home”

onPress = function(){ _root.gotoAndPlay(2); }

Menampilkan halaman Beranda

Sesuai

Tombol “Next”

onPress = function(){ gotoAndStop(22); }

Menampilkan halaman penjelasan

Sesuai

Page 35: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

53

berikutnya Tombol “Prev”

onPress = function(){ gotoAndStop(21); }

Menampilkan halaman penjelasan sebelumnya

Sesuai

Tombol “Back”

onPress = function(){ gotoAndStop(20); }

Menampilkan halaman Teori Sesuai

Tabel III.19 Hasil Pengujian Blackbox Testing Simulasi

Input/Event Proses Output/Next

Stage Hasil

Pengujian Tombol “Kembali”

onPress = function(){ gotoAndStop(20); }

Menampilkan halaman simulasi

Objek “Sampah”

stop(); chance = 2; truePoin = 0; count = 5; chancetxt.text = "Kesempatan"; kaleng_cklt.onPress = function(){ startDrag(this); } kaleng4.onPress = function(){ startDrag(this); } btl_plastik.onPress = function(){ startDrag(this); } penutup_air.onPress = function(){ startDrag(this); } pisang.onPress = function(){ startDrag(this); } kaleng_cklt.onRelease = function() { stopDrag(); if (this.hitTest(tanah)) { this._visible = false; truePoin++; count--; if (count==0){ gotoAndPlay(22); }

Terdapat beberapa jenis sampah pada sebuah halaman rumah dan halaman sekolah beberapa jenis sampah yang berbeda harus dimasukkan sesuai informasi yang sudah ditentukan.

Sesuai

Page 36: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

54

} if (this.hitTest(tong_air)) { this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tong_sampah)){ this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } } kaleng4.onRelease = function() { stopDrag(); if (this.hitTest(tanah)) { this._visible = false; truePoin++; count--; if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tong_air)) { this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){

Page 37: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

55

gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tong_sampa)){ this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } } btl_plastik.onRelease = function() { stopDrag(); if (this.hitTest(tong_sampah)) { this._visible = false; truePoin++; count--; if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tong_air)) { this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tanah)){ this._visible = false; chance--;

Page 38: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

56

count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } } penutup_air.onRelease = function() { stopDrag(); if (this.hitTest(tong_air)) { this._visible = true; truePoin++; count--; if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tong_sampah)) { this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tanah)){ this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22);

Page 39: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

57

} } } pisang.onRelease = function() { stopDrag(); if (this.hitTest(tong_sampah)) { this._visible = false; truePoin++; count--; if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tong_air)) { this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } if (this.hitTest(tanah)){ this._visible = false; chance--; count--; chancetxt.text = chance; if (chance == 0){ gotoAndPlay(23); } if (count==0){ gotoAndPlay(22); } } }

Page 40: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

58

B. Penerimaan User Terhadap Animasi

Dengan menggunakan kuisioner dapat mengetahui apakah aplikasi animasi

interaktif ini berguna bagi pengguna. maka penulis melakukan pengujian kuisioner

yang diberikan kepada pengguna yang telah menjalankan program animasi

interaktif secara langsung. Pertanyaan yang diajukan kepada pengguna yaitu sebagai

berikut:

Tabel III.20 Pengujian Kuisioner

NO PERTANYAAN KUISIONER

Ya Tidak

1 Apakah Tampilan Aplikasi Mengenal dan Cara Pencegahan

Terhadap Penyakit Demam Berdarah Dengue ini Menarik?

2 Apakah Dengan Aplikasi Ini Pengguna Sudah Mengetahui Tentang

Apa Itu Penyakit Demam Berdarah Dengue?

3 Apakah Dengan Aplikasi Ini Pengguna Mendapatkan Informasi

Tentang Penyebab Terjadinya Penyakit Demam Berdarah Dengue?

4 Apakah Dengan Aplikasi Ini Pengguna Mendapatkan Informasi

Tentang Gejala Penyakit Demam Berdarah Dengue?

5 Apakah Dengan Aplikasi Ini Pengguna Mendapatkan Informasi

Berupa Cara Pertolongan Pertama Yang Dilakukan Ketika

Terjangkit Penyakit Demam Berdarah Dengue?

6 Apakah Dengan Aplikasi Ini Pengguna Mendapatkan Informasi

Terkait Nomor-nomor Emergency Rumah Sakit Maupun

Puskesmas-puskesmas Terdekat?

7 Apakah Dengan Aplikasi Ini Pengguna Mendapatkan Informasi

Tentang Cara-cara Untuk Mencegah Penyakit Demam Berdarah

Dengue?

8 Apakah Setiap Fitur Yang Terdapat Pada Aplikasi Ini Berjalan

Dengan Baik Serta Mudah Untuk Dioperasikan?

9 Apakah Informasi Yang Diberikan Oleh Aplikasi Ini Sudah

Page 41: BAB III PEMBAHASAN - repository.bsi.ac.id · Storyboard Teori KETERANGAN GAMBARAN SUARA Pada saat tombol Teori aktif, maka akan muncul halaman animasi beserta beberapa tombol yang

59

Memenuhi Kebutuhan Pengguna?

10 Apakah Dengan Bantuan Aplikasi Ini Masalah Pengguna Dapat

Diselesaikan?

Dari pertanyaan kuisioner yang diajukan kepada pengguna program, maka

didapatkan data berupa penilaian peminatan terhadap program, data yang didapatkan

yaitu sebagai berikut:

Gambar III.29 Grafik Pengujian Kuisoner

Tabel III.21

Grafik Kuisioner Pengguna Program

Soal

1

Soal

2

Soal

3

Soal

4

Soal

5

Soal

6

Soal

7

Soal

8

Soal

9

Soal

10

Ya 10 8 10 10 9 6 7 10 6 10

Tidak 0 2 0 0 1 4 3 0 4 0