bab iii pembahasanan - repository.bsi.ac.id · animasi interaktif ini dibuat untuk ditunjuk kepada...

23

BAB III

PEMBAHASANAN

3.1 Analisa Kebutuhan Software

Proses pembuatan animasi interaktif dibuat dengan sesuai kebutuhan

identifikasi perlu dilakukan untuk mencari jalan keluar dari permasalahan yang

ada didalam proses pembelajaran di sekolah dasar. Rancangan animasi interaktif

yang penulis uraikan dalam sub bab ini terdiri dari beberapan bentuk. Dari

semuanya itu merupakan bagian yang diperlukan penulis dalam pembuatan

aplikasi animasi interaktif.

Berbagai macam bentuk media pembelajaran yang bersifat interaktif

dibuat dan disesuaikan dengan kebutuhan. Identifikasi kebutuhan diperlukan

sebagai acuan dalam merancang dan membuat animasi sesuai dengan materi-

materi pelajaran yang akan diambil. Animasi yang penulis buat ini diambil dari

materi pelajaran Ilmu Pengetahuan Alam (IPA) pada kelas 3 sekolah dasar.

Animasi interaktif ini dibuat untuk ditunjuk kepada siswa kelas 3 sekolah dasar.

3.2 Desain

Desain merupakan penggambaran perencanaan dan pembuatan sketsa

atau pengaturan dari beberapa elemen yang terpisah ke salah salah satu kesatuan

yang utuh dan mempunyai fungsi.

24

3.2.1 Storyboard

Pada perancangan storyboard ini penulis bahas tentang alur cerita dari

program perancangan animasi interaktif pengenalan Sayur-sayuran Hijau Beserta

Manfaatnya disini adalah sebagai berikut.

1. Setting dan synopsis

Pada awal setingan awal merupakan judul dari tugas akhir kemudian masuk

ke menu utama ada 4 pilihan didalam menu yaitu belajar, bermain, tentang

aplikasi dan keluar.

Sinopsis animasi ini memiliki skenario dan alur cerita sebagai berikut.

Anmiasi ini dibuka dengan tampilan pembuka judul yang didalamnya

menampilkan tunggu sebentar. Kemudian masuk kedalam scene menu

dimana terdapat 4 submenu yaitu submenu pertama menampilkan tombol

belaja, ketika diklik didalamnya berisi menu lagu sayur-sayuran hijau dan

berbagai macam sayuran hijau salah satu menu yang muncul. Contonya, klik

menu mengenal sayuran hijau lalu terdapat manfaat yang ada pada sayuran

hijau.

Submenu ke 2 tombol bermain yang didalamnya berisi menu tebak

gambar dan tebak kata jika diklik tebak gambar maka disitu akan muncul

pertanyaan pilihan ganda yang diberi waktu 1 menit jika jawabanya benar

maka mendapatkan nilai 100 dan jika jawabannya salah maka nilai akan

dikurangi 20 sampai waktu habis maka permainan akan selesai dan akan

menampilkan nilai diraih kemudian jika diklik menangkap sayur maka akan

muncul permainan menangkap sayur.

25

Sub yan ke 3 menampilkan tombol tentang, tentang tersebut

merupakan info mengenai tujuan aplikasi tersebut dibuat.

Sub ke 4 menampilkan tombol keluar jika diklik akan keluar aplikasi.

2. Desain

Gambar III.1

Alur Utama Animasi Pengenalan Sayuran Hijau

Rancangan ini dibuat dalam bentuk form yang terpecah dalam

beberapa guna membagi keterangan aplikasi yang akan dikerjakan secara

rinci. Rincian keterangan ini mempermudah dalam proses pembuatan aplikasi

secara lengkap. Desain aplikasi dibuat seperti tampilandibawah ini.

26

Name Frame : Judul Animasi (Opening)

Level :-

Layar Tampilan

Keterangan

Tampilan

1. Menampilkan teks tunggu

dulu ya

Animasi

Tidak ada

Sound

Tidak ada

Content/Teks

Sama dengan tampilan

Gambar III.2

Storyboard Judul Animasi (Opening)

TUNGGU

27

Name Frame : Menu Utama

Level :-

Layer tampilan

Keterangan tampilan

Menu utama terdiri dari

1. Belajar

Menampilkan

menu sayuran

hijau seperti

kangkung,

brokoli, pare,

mentimun,

sawi, kubis.

2. Bermain

Menampilakan

menu tebak

gambar dan

menangkap

sayur.

3. Tentang

Menampilkan

info aplikasi.

4. Keluar

Keluar dari

program

Animasi

Baling-baling berputar

Sound

Musik Instrumen

Conteks / Teks

Sama seperti tampilan

Gambar III.3

Storydoard Menu Utama

KELUAR

BELAJAR

BERMAIN

INFO APLIKASI

28

Name Frime : Menu Belajar

Level :-

Layar tampilan Keterangan tampilan

1. Menu kangkung,

menampilkan apa

itu sayuran

kangkung dan

manfaat

manfaatnya.

2. Menu pare,

menampilkan apa

itu pare dan

manfaatnya.

3. Menu timun,

menampilkan apa

itu timun dan

manfaatnya.

4. Menu sawi,

menampilkan apa

itu sawi dan

manfaatnya.

5. Menu brokoli,

menampilkan apa

itu brokoli dan

manfaatnya.

6. Menu kubis,

menampilkan apa

itu kubs dan

manfaatnya.

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.4

Storyboard Menu Belajar

MARI MENGENAL SAYURAN HIJAU

KANGKUNG KUBIS TIMUN

PARE SAWI Brokoli

KEMBALI MENU

29

Name Frime : Menu Kangkung

Level :-


1. Menampilkan

menu kangkung

dan manfaatnya

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.5

Storyboard Menu Kangkung

KANGKUNG

PENJELASAN TENTANG

KANGKUNG

KEMBALI MENU

MANFAAT KANGKUNG

30

Name Frime : Menu Kubis

Level :-


1. Menampilkan

menu kubis dan

manfaatnya

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.6

Storyboard Menu Kubis

KUBIS

PENJELASAN TENTANG

KUBIS

KEMBALI MENU

MANFAAT KUBIS

31

Name Frime : Menu Timun

Level :-


1. Menampilkan

menu Timun dan

manfaatnya

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.7

Storyboard Menu Timun

TIMUN

PENJELASAN TENTANG

TIMUN

KEMBALI MENU

MANFAAT TIMUN

32

Name Frime : Menu Pare

Level :-


1. Menampilkan

menu Pere dan

manfaatnya

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.8

Storyboard Menu Pare

PARE

PENJELASAN TENTANG

PARE

KEMBALI MENU

MANFAAT PARE

33

Name Frime : Menu Sawi

Level :-


1. Menampilkan

menu Sawi dan

manfaatnya

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.9

Storyboard Menu Sawi

SAWI

PENJELASAN TENTANG

SAWI

KEMBALI MENU

MANFAAT SAWI

34

Name Frime : Menu Brokoli

Level :-


1. Menampilkan

menu Brokoli

dan manfaatnya

Animasi


Sound

Musik instrumen

Conteks/Teks


Gambar III.10

Storyboard Menu Brokoli

BROKOLI

PENJELASAN TENTANG

BROKOLI

KEMBALI MENU

MANFAAT BROKOLI

35

Name Frame : Menu Bermain

Level :-

Layer tampilan

Keterangan tampilan


1 Tebak cepat

menampilkan

soal pilihan

gan

2 Menangkap

sayur

menampilkan

dengan

bermain game

menaruh

sayuran ke

dalam

mangkuk,

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.11

Storydoard Menu Bermain

MARI KITA BERMAIN

TEBAK GAMBAR MENANGKAP SAYUR

KELUAR MENU

36

Name Frame : Menu Tebak Gambar

Level :-

Layer tampilan

Keterangan tampilan


1 Tebak Gambar

menampilkan

permainan

tebak gambar

sayuran

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.12

Storydoard Menu Tebak Gambar

AYO TEBAK GAMBAR

SAYUR BERIKUT INI

DENGAN CEPAT DAN

TEPAT

KELUAR MENU

37

Name Frame : Bermain

Level :-

Layer tampilan

Keterangan tampilan


1. Bermain

menampilkan

pertanyaan

pilihan ganda

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.13

Storydoard Bermain

YANG MANA KAH

GAMBAR

SAWI

SAWI

KELUAR MENU

KANGKKUNG PARE

WAKTU

KELUAR

SCORE

38

Name Frame : Hasil Bermain

Level :-

Layer tampilan

Keterangan tampilan


1 Hasil bermain

menampilkan,

hasil atau score

yang di dapat

saat permainan

selesai.

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.14

Storydoard Hasil Bermain

HASIL BERMAIN

SCORE

TIDAK

KELUAR MENU

MAIN LAGI

ANIMASI BINTANG

39

Name Frame : Menu Menangkap Gambar

Level :-

Layer tampilan

Keterangan

tampilan

Menu utama

terdiri dari

1 Menu

menangkap

gambar

menampilkan,

permainam

menangkap

sayuran

kedalam

mangkuk.

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.15

Storydoard Menangkap Sayur

GARIS

NYAWA SCORE

MANGKUK

KELUAR MENU

40

Name Frame : Menu Game Over

Level :-

Layer tampilan

Keterangan

tampilan

Menu utama

terdiri dari

1. Menu game

over

menampilkan

game over, dan

ada keterangan

main lagi atau

tidak.

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.16

Storydoard Menu Game Over

GAME OVER

SCORE

MAIN LAGI TIDAK

41

Name Frame : Menu Tentang

Level :-

Layer tampilan

Keterangan tampilan


1 Menu Info

Aplikasi

menampilkan

tujuan aplikasi

tersebut dibuat.

Animasi


Sound

Musik Instrumen

Conteks / Teks


Gambar III.17

Storydoard Menu Tentang Aplikasi

TENTANG

KELUAR

42

3.2.2 User Interface

1. Judul Animasi

Halaman loading dari animasi ini berisi tesk yaitu mohon tunggu,

hitungan mundur diberikan kurang dari 1 menit untuk menuju kemenu

utama.

Gambar III.18

Tampilan Halaman Judul Animasi

2. Menu Utama

Halaman menu utama dari animasi ini berisi teks judul, tombol

belajar, tombol bermain, tombol tentang aplikasi, dan tombol keluar.

43

Gambar III.19

Tampilan Halaman Menu Utama

3. Menu Belajar

Halaman menu belajar ini berisi menu 6 sayuran yaitu Kangkung,

Kubis, Timun, Sawi, Pare dan Brokoli, dan tombol kembali dan menu

Gambar III.20

Tampilan Menu Belajar

44

4. Menu Kangkung

Halaman menu kangkung berisi teks tentang pengertian tentang

kangkung dan manfaatnya, dan tombol kembali dan menu.

Gambar III.21

Tampilan Menu Kangkung

5. Menu Kubis

Halaman menu kubis berisi teks tentang pengertian tentang kubis dan

manfaatnya, dan tombol kembali dan menu

Gambar III.22

Tampilan Menu Kubis

45

6. Menu Timun

Halaman menu Timun berisi teks tentang pengertian tentang timun

dan manfaatnya, dan tombol kembali dan menu.

Gambar III.23

Tampilan Menu Timun

7. Menu Pare

Halaman menu Pare berisi teks tentang pengertian tentang pare dan

manfaatnya, dan tombol kembali menu.

Gambar III.24

Tampilan Menu Pare

46

8. Menu Sawi

Halaman menu Sawi berisi teks tentang pengertian tentang sawi dan

manfaatnya, dan tombol kembali dan menu.

Gambar III.25

Tampilan Menu Sawi

9. Menu Brokoli

Halaman menu Brokoli berisi teks tentang pengertian tentang brokoli

dan manfaatnya, dan tombol kembali dan menu.

47

Gambar III.26

Tampilan Menu Brokoli

10. Menu Bermain

Halaman menu bermain disini berisi menu menu tebak gambar dan

menangkap sayur, dan ada tombol kembali menu

Gambar III.27

Tampilan Menu Bermain

48

11. Menu Tebak Gambar

Menu tebak gambar disini adalah menu opening sebelum masuk ke

permainan, dan ada tombol kembali dan menu

Gambar III.28

Tampilan Menu Tebak Gambar

12. Bermain

Bermain disini adalah adanya pertanyaan pilihan ganda berupa

gambar yang akan dipilih, dan ada tombol kembali dan menu.

49

Gambar III.29

Tampilan Bermain

13. Hasil Permainan

Hasil permainan berisi tentang hasil dari tebak gambar tersebut dan

ada tombol kembali dan menu.

Gambar III.30

Tampilan Hasil Permainan

50

14. Menangkap Sayur

Menangkap sayur berisi permainan ata game dalam menangkap sayur

memakai mangkk,dan ada tombol kembali dan menu.

Gambar III.31

Tampilan Menangkap Sayur

15. Game Over

Game over berisi tentang perminan sudah selesai dan ada pilihan

bermain lagi atau tidak.

51

Gambar III.32

Tampilan Game Over

16. Menu Tentang Aplikasi

Halaman menu info tentang aplikasi animasi ini menampilkan tujuan

aplikasi tersebut dibuat dan tombol ke menu utama.

Gambar III.33

Tampilan Menu Tentang Aplikasi

52

17. Keluar

Halaman menu keluar dari animasi ini berisi teks judul dan tombol

keluar berakhinya aplikasi animasi.

Gambar III.34

Tampilan Menu Keluar

3.3 Implementasi

3.3.1 Code Generation

Sebuah program yang dibuat agar dapat menghasilkan interuksi atau kode

program sesuai dengan kebutuhan pengguna dalam ruang lingkup tertentu.

1. Kode Menu Login

stop();

fscommand('fullscreen',true);

2. Kode Menu Utama

on(release){

_root.gotoAndStop('belajar');

}

on(release){

53

_root.gotoAndStop('bermain');

}

3. Menu Belajar

on(release){

gotoAndStop('kangkung');

}

on(release){

gotoAndStop('kubis');

}

on(release){

gotoAndStop('timun');

}

on(release){

gotoAndStop('pare');

}

on(release){

gotoAndStop('sawi');

}

on(release){

gotoAndStop('brokoli');

}

4. Menu Bermain

on(release){

_root.gotoAndStop('tebakgambar');

}

54

on(release){

_root.gotoAndStop('tangkapsayur');

}

5. Menu Tentang

stop();

6. Menu Keluar

on (release) {

fscommand("quit", true);

}

3.3.2 Black Box Testing

Animasi yang dibuat dapat berfungsi dengan benar dan sesuai dengan

kebutuhan user. Pengujian black box disini tidak memperlihatkan struktur logika

intern animasi yang dibuat.

55

Tabel III.1

Tabel Pengujian Black Box

INPUT PROSES OUTPUT VALIDASI

Tombol

Belajar

Menampilkan

menu materi

tentang sayuran

hijau dan

manfaatnya

Tampilan Pilihan

menu materi

tentang sayuran

dan manfaatnya

Sesuai

Tombol

Bermain

Menampilkan

latihan sayuran

hijau

Tampilan tebak

gambar dan

menangkap sayur

Sesuai

Tombol info

aplikasi

Menampilkan info

tentang aplikasi

Tampilan info

tentang aplikasi Sesuai

Tombol

Keluar

Menampilkan opsi

keluar dari

program aplikasi

Tampilan opsi

keluar dari

program aplikasi

Sesuai

Dari pengujian tersebut dapat disimpulkan bahwa animasi tersebut diliahat

dari sudut pandang pembuatannya layak untuk digunakan.

Dan untuk mengetahui lebih lanjut penilaian dari pengguna atau user

terhadap animasi yang telah dibut, penulis menggunkan metode kuisonerdan

wawancara langsung dengan responden yang mewakili pengguna, untuk

wawancara penulis mengambil narasumber sebanyak 10 (sepuluh) orang untuk

kuisioner yang terdiri dari 10 (sepuluh) pertanyaan, berikut ini adalah rincian dari

item kuisioner untuk responden.

56

KUESIONER MINAT BELAJAR MENGENAL SAYURAN-SYURAN

HIJAU MENGGUNAKAN MEDIA INTERAKTIF

IDENTITAS RESPONDEN

NAMA :

KELAS :

JENIS KELAMIN :

Tabel III.2

Kuisioner Aplikasi Pengenalan Sayur-sayuran Hijau

Tabel III.2 Kuesioner Aplikasi Pengenalan Sayur-sayuran Hijau

No DAFTAR PERTANYAAN UNTUK PESERTA

DIDIK YA TIDAK

1 Menurut adik-adik apakah aplikasi animasi ini

mudah digunakan ? 9 1

2

Apakah aplikasi animasi ini dapat membantu

adik-adik dalam mengenal Sayur-sayuran

hijau?

9 1

3

Apakah setelah mencoba aplikasi animasi ini

adik-adik lebih tertarik menggunakan media

ini ?

10 0

4 Apakah aplikasi animasi ini membuat adik-

adik ingin lebih rajin dalam belajar ? 8 2

5 Menurut adik-adik apakah aplikasi animasi ini

menarik dan mudah untuk di pelajari ? 9 3

6 Menurut adik-adik apakah soal-soal yang ada

di quiz interaktif sulit untuk dijawab ? 3 7

7 Apakah suara didalam aplikasi animasi ini

terdengar jelas? 9 2

8 Apakah gambar dan animasi yang terdapat di

aplikasi ini menarik bagi adik-adik ? 9 2

9 Apakah pembahasan materi yang ada

diaplikasi ini mudah dimengerti ? 8 2

10 Apakah dengan adanya aplikasi ini pelajaran

teori itu membosankan ? 8 2

keterangan : Beri tanda () pada jawaban yang dipilih

57

Gambar III.25

Tampilan Grafik Kuesioner Untuk Siswa Kelas 3 SD

Dari ini hasil kuesioner yang telah disebar ke responden dan grafik di atas

dapat diambil kesimpulan bahwa sebagian besar siswa sekolah dasar kelas 3

dapat membantu dalam pembelajaran mengenal Sayur-sayuran hijau, dan

membuat siswa lebih bersemangat dalam proses belajar mengajar disekolah

untuk bidang pelajaran Ilmu Pengetahuan Alam (IPA).

3.3.3 Spesifikasi Hardware dan Software

Dalam sistem komputer harus ada Hardware dan software untuk spesifikasi

menggunakan program Adobe Flash CS6 supaya animasi berjalan lancar. Berikut

adalah spesifikasi minimum komputer untuk menjalankan program aplikasi

Adobe Flash CS6 dan corel DRAWX4:

1. Processor : Intel Dual Care 1.8 Ghz

2. Motherboard : Socket LGA 775

3. Memory (RAM) : DDR2 1024 MB

10% 10%

0%

20%

30%

70%

20% 20% 20% 20%

90% 90%

100%

80%

90%

30%

90% 90%

80% 80%

soal 1 soal 2 soal 3 soal 4 soal 5 soal 6 soal 7 soal 8 soal 9 soal 10

tidak ya

58

4. VGA Card : 512 MB (NVIDIA/ATI)

5. Harddisk : 80 GB (IDE/SATA)

6. PSU : 450 Watt (220V/4A)

7. Monitor : CRT / LCD / LED

8. Keyboard : QWERTY Port Ps/2 atau USB

9. Mouse : Port Ps/2 atau USB

10. Sound Card : On Board atau PCI

11. Sistem Operasi : Windows 7 SP3

bab iii pembahasanan - repository.bsi.ac.id · animasi interaktif ini dibuat untuk ditunjuk kepada...

Documents