bab iii perancangan dan pembahasan...berikut ini adalah gambaran dari storyboard animasi pengenalan...

41
16 BAB III PERANCANGAN DAN PEMBAHASAN 3.1. Analisa Kebutuhan Software Dalam membangun sebuah sistem hendaklah merancang serta menganalisa secara teliti terlebih dahulu tentang data dan informasi apa saja yang dibutuhkan pengguna (user). Dalam menganalisa sebuah sistem perlu melibatkan komponen- komponen yang tergabung dalam ruang lingkup software. Untuk menjadi sebuah software hendaklah kita harus menganalisa secara menyeluruh dan utuh untuk memberikan hasil yang baik. Penulis juga membutuhkan alat bantu berupa perangkat lunak berupa aplikasi seperti WavePad Sound Editor, Adobe Photoshop CS6 Dan Adobe Flash Professional CS6. Penulis juga membutuhkan ruang lingkup sebagai dasar materi untuk software yang akan dibuat yaitu : 1. Materi pengenalan cara berkembang biak hewan 2. Soal-soal latihan 3. Games interaktif 3.2. Desain Desain adalah langkah pertama dalam fase pengembangan bagi setiap produk atau sistem yang direkayasa. Konsep desain yaitu membangun sebuah fondasi untuk pembuatan model desain yang mencakup storyboard user interface dan lain-lain.

Upload: others

Post on 14-Nov-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

16

BAB III

PERANCANGAN DAN PEMBAHASAN

3.1. Analisa Kebutuhan Software

Dalam membangun sebuah sistem hendaklah merancang serta menganalisa

secara teliti terlebih dahulu tentang data dan informasi apa saja yang dibutuhkan

pengguna (user). Dalam menganalisa sebuah sistem perlu melibatkan komponen-

komponen yang tergabung dalam ruang lingkup software. Untuk menjadi sebuah

software hendaklah kita harus menganalisa secara menyeluruh dan utuh untuk

memberikan hasil yang baik. Penulis juga membutuhkan alat bantu berupa

perangkat lunak berupa aplikasi seperti WavePad Sound Editor, Adobe Photoshop

CS6 Dan Adobe Flash Professional CS6. Penulis juga membutuhkan ruang

lingkup sebagai dasar materi untuk software yang akan dibuat yaitu :

1. Materi pengenalan cara berkembang biak hewan

2. Soal-soal latihan

3. Games interaktif

3.2. Desain

Desain adalah langkah pertama dalam fase pengembangan bagi setiap

produk atau sistem yang direkayasa. Konsep desain yaitu membangun sebuah

fondasi untuk pembuatan model desain yang mencakup storyboard user interface

dan lain-lain.

Page 2: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

17

3.2.1. Karakteristik Software

Dalam pembuatan animasi interaktif harus berpedoman pada karakteristik

dan unsur yang terdapat pada aplikasi multimedia, yaitu :

1. Format

Animasi interaktif yang akan dibuat terdiri dari 3 elemen utama yaitu materi

pengenalan cara berkembang biak hewan, latihan, permainan. Pada menu

materi pengenalan cara berkembang biak hewan pengguna dikenalkan dengan

penjelasan macam-macam cara berkembang biak hewan dan jenis hewan

bedasarkan cara berkembang biaknya. Pada menu latihan pengguna akan

diminta untuk menjawab 15 soal pertanyaan tentang pengenalan cara

berkembang biak hewan. Pada menu permainan pengguna akan bermain

puzzle, puzzle yang disajikan secara sliding gambar di mana pengguna

bermain sliding puzzle yaitu menggeser gambar ke kotak yang kosong untuk

mendapatkan sebuah foto yang utuh. Untuk aplikasi multimedia ini ada

beberapa tipe yang dapat dibuat, yaitu : swf, html, jpg, exe, mov, dalam skripsi

ini penulis menggunakan format exe dengan maksud agar lebih efektif dapat

digunakan dengan mudah.

2. Rules

Pada aplikasi ini, pengguna harus lebih dulu mempelajari pengenalan cara

berkembang biak hewan. Setelah itu pengguna dapat memilih menu latihan

untuk menjawab pertanyaan yang berhubungan cara berkembang biak hewan.

Dalam menu permainan pengguna dapat bermain puzzle.

Page 3: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

18

3. Policy

Ketika pengguna dapat menjawab soal dengan benar maka pengguna akan

mendapatkan poin 10 setiap soalnya namun apabila jawaban pengguna salah

maka pengguna mendapatkan poin 0. Setelah menyelesaikan 15 soal latihan

pengguna akan mendapatkan nilai. Jika nilai yang didapat kurang dari 80

maka pengguna dapat mencoba kembali soal latihan namun apabila pengguna

mendapat nilai lebih dari 80 soal latihan selesai.

4. Scenario

Pertama kali pengguna akan diperkenalkan dengan Penjelasan cara

berkembang biak hewan yaitu sedikit artikel tentang cara berkembang biak

hewan dan Pengenalan jenis hewan bedasarkan cara berkembang biaknya.

Pengguna dapat memilih latihan untuk melatih kemampuan pengguna dalam

pengenalan cara berkembang biak hewan. Selain itu pengguna dapat melatih

kreatifitas dengan bermain game puzzle.

5. Events/Challenge

Pada aplikasi ini tantangan yang diberikan adalah pengguna harus menjawab

soal tentang pengenalan cara berkembang biak hewan dan pengguna dapat

memilih jawaban sesuai dengan soal yang diberikan. Ini berfungsi untuk

melatih pengguna dalam memahami materi yang telah diberikan dan melatih

daya ingat pengguna.

6. Roles

Pengguna harus bisa menjawab soal mengenai cara berkembang biak hewan

dengan benar untuk mendapatkan nilai yang tinggi.

Page 4: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

19

7. Decisions

Keputusan yang dapat dibuat pengguna di sini adalah dalam menjawab

pertanyaan latihan dengan tepat agar dapat menyelesaikan soal dengan lebih

cepat. Sedangkan dalam permainan puzzle, pengguna dapat membuat

keputusan untuk meletakkan gambar yang sesuai pada posisi yang tepat.

8. Levels

Dalam aplikasi ini dibuat dengan soal dengan level yang sama. Pengguna

harus menjawab pertanyaan dengan benar dalam latihan pengenalan cara

berkembak biak hewan sesuai dengan materi yang sudah disampaikan di awal

dengan tingkatan kesulitan latihan dimana pengguna harus bisa memahami

dan menghafal materi yang sudah disampaikan.

9. Score Model

Dalam hal ini, latihan hanya menentukan berapa banyak soal yang dijawab

dan tiap soal memiliki nilai masing-masing sebesar 10 poin. Jika soal yang

dijawab benar kurang dari 6 soal maka pada nilai akhir akan muncul total nilai

dan pilihan “Coba Lagi” untuk mencoba kembali soal latihan. Jika soal yang

dijawab lebih dari dengan 6 maka komentar yang muncul adalah “Selamat

Nilai Kamu Adalah ….”

10. Indikator

Indikator yang digunakan adalah berupa gambar yang berfungsi untuk

menampilkan jenis-jenis hewan berdasarkan cara berkembang biaknya.

11. Symbols

Sebagai penunjuk untuk ke menu-menu lain terdapat tombol-tombol yang

berupa gambar untuk menuju ke menu yang telah disediakan.

Page 5: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

20

3.2.2. Perancangan Story Board

Berikut ini adalah gambaran dari storyboard animasi pengenalan cara

berkembang biak hewan.

Tabel III.1

Perancangan Story Board

VISUAL SKETSA AUDIO

Tampilan Loading:

Tampilan ini muncul

saat aplikasi pertama

kali dijalankan

Sound.Mp3

Tampilan judul:

Tampilan ini

pertama kali yang

muncul ketika

aplikasi dijalankan .

Di dalam terdapat

tombol masuk yaitu

tombol untuk masuk

ke menu utama.

Sound.Mp3

Tampilan Menu

Utama:

Tampilan ini terdapat

5 tombol yaitu

Materi, Latihan,

Permainan, Profil,

Keluar.

Click.Mp3

Page 6: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

21

Tampilan Sub Menu

Materi :

Pada Materi terdapat

5 tombol yaitu

Ovipar, Vivipar,

Ovovivipar, dan

Membelah diri,

Menu utama.

Click.Mp3

Tampilan Ovipar,

Vivipar, Ovovivipar,

dan Membelah diri:

halaman ini

merupakan sekilas

penjelasan cara

berkembang biak.

Pada tampilan ini

memiliki dua tombol

Tombol Hewan yang

berfungsi untuk

melihat jenis hewan

dan Tombol Home

Materi kembali ke

Sub Menu Materi

Click.Mp3

Sound

Cringnews. Mp3

Tampilan Hewan :

Pada Tampilan ini

akan disajikan

Penjelasan tentang

hewan-hewan

bedasarkan cara

berkembang biaknya.

Pada tampilan ini

hanya terdapat 1

tombol yaitu tombol

Home Materi untuk

kembali ke Sub Menu

Materi.

Click.Mp3

Sound

Cringnews. Mp3

Page 7: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

22

Tampilan Sub Menu

Latihan:

Tampilan awal dari

Latihan adalah

menginput nama

yang akan latihan

soal sebelum masuk

kedalam latihan soal.

Pada halaman ini ada

2 tombol yaitu mulai

dan kembali

Click.Mp3

Tampilan soal latihan

:

halaman ini

merupakan halaman

soal dimana hanya

terdapat tombol

A,B,C,D untuk

pilihan jawaban dan

apabila sudah dipilih

soal secara otomatis

berubah dr soal no 1

sd 15

Click.Mp3

Tampilan score

latihan < 80 :

Pada tampilan ini

setelah 15 soal sudah

dijawab dan nilai

score < 80, maka

akan muncul 2

pilihan coba lagi

untuk mengulang 15

soal sebelumnya

sampai mendapatkan

nilai > 80 atau

kembali ke Menu

Utama .

Click.mp3

Tampilan score

latihan > 80 :

Pada tampilan ini

setelah 10 soal sudah

dijawab dan nilai

score > 80, maka

akan Tombol Selesai

untuk menuju ke

Menu Utama

Click.mp3

Sound

Menang.Mp3

Page 8: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

23

Tampilan Sub Menu

Permainan : Pada

halaman ini puzzle

tipe sliding yaitu

menggeser gambar ke

kotak yang kosong

dan menyusun

gambar sampai

gambar tersusun

rapih dan benar

dengan waktu 30

detik.

Click.mp3

Tampilan hasil

permainan kalah :

jika tidak bisa

menyelesaikan puzzle

dalam waktu 30 detik

maka aka n ada pesan

“GAGAL” dengan 2

tombol coba lagi

untuk mengulang

permainan dan

kembali untuk

kembali ke Menu

Utama.

Click.mp3

Sound

Kalah.Mp3

Tampilan hasil

permainan menang :

jika bisa

menyelesaikan puzzle

dalam waktu 30 detik

maka akan ada pesan

“BERHASIL”

dengan tombol

kembali untuk

kembali ke Menu

Utama.

Click.mp3

Sound

Menang.Mp3

Page 9: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

24

Tampilan Menu

Profil : Pada halaman

ini menampilkan

profile dari penulis

terdiri dari foto

penulis, nama

lengkap, nim, dan

jurusan, memiliki

satu tombol keluar

untuk kembali ke

Menu Utama.

Click.mp3

Tampilan Menu

Keluar : Tampilan ini

adalah menu untuk

keluar dari aplikasi,

dimana pengguna

dapat memilih untuk

tetap didalam aplikasi

atau keluar dari

aplikasi dengan

pilihan YA atau

TIDAK

Click.mp3

3.2.3. User Interface

Pada halaman ini akan dijelaskan perancangan user interface animasi yang

akan ditampilkan. Dalam tampilan animasi ini akan dibuat bermacam-macam

gambar, sehingga tampilannya menjadi lebih menarik dan lebih hidup. Berikut ini

adalah tampilan yang pada aplikasi yang penulis buat :

A. Halaman Loading

Berikut ini adalah gambaran dari tampilan halaman loading seperti yang ada

pada gambar dibawah ini :

Page 10: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

25

Gambar III.1

Tampilan Loading

B. Halaman Judul

Berikut ini adalah gambaran dari tampilan halaman judul seperti yang ada

qpada gambar dibawah ini :

Gambar III.2

Tampilan Awal

C. Halaman Menu Utama

Berikut ini adalah gambaran dari tampilan halaman menu utama seperti

yang ada pada gambar dibawah ini :

Page 11: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

26

Gambar III.3

Tampilan Menu Utama

D. Halaman Sub Menu Materi

Berikut ini adalah gambaran dari tampilan halaman sub menu materi seperti

yang ada pada gambar dibawah ini :

Gambar III.4

Tampilan Sub Menu Materi

E. Halaman Pengertian Ovipar

Berikut ini adalah gambaran dari tampilan halaman pengertian Ovipar

seperti yang ada pada gambar dibawah ini :

Page 12: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

27

Gambar III.5

Tampilan Pengertian Ovipar

F. Halaman Contoh Hewan Ovipar

Berikut ini adalah gambaran dari tampilan halaman contoh - contoh hewan

yang berkembang biak dengan cara ovipar seperti yang ada pada gambar dibawah

ini :

Gambar III.6

Tampilan Contoh Hewan Ovipar

G. Halaman Pengertian Vivipar

Berikut ini adalah gambaran dari tampilan halaman pengertian Vivipar

seperti yang ada pada gambar dibawah ini :

Page 13: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

28

Gambar III.7

Tampilan Pengertian Vivipar

H. Halaman Contoh Hewan Vivipar

Berikut ini adalah gambaran dari tampilan halaman contoh - contoh hewan

yang berkembang biak dengan cara vivipar seperti yang ada pada gambar dibawah

ini :

Gambar III.8

Tampilan Contoh Hewan Vivipar

Page 14: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

29

I. Halaman Pengertian Ovovivipar

Berikut ini adalah gambaran dari tampilan halaman pengertian Ovovivipar

seperti yang ada pada gambar dibawah ini :

Gambar III.9

Tampilan Pengertian Ovovivipar

J. Halaman Contoh Hewan Ovovivipar

Berikut ini adalah gambaran dari tampilan halaman contoh - contoh hewan

yang berkembang biak dengan cara Ovovivipar seperti yang ada pada gambar

dibawah ini :

Gambar III.10

Tampilan Contoh Hewan Ovovivipar

Page 15: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

30

K. Halaman Pengertian Membelah Diri

Berikut ini adalah gambaran dari tampilan halaman pengertian membelah

diri seperti yang ada pada gambar dibawah ini :

Gambar III. 11

Tampilan Contoh Hewan Membelah Diri

L. Halaman Contoh Hewan Membelah Diri

Berikut ini adalah gambaran dari tampilan halaman contoh - contoh hewan

yang berkembang biak dengan cara Membelah Diri seperti yang ada pada gambar

dibawah ini :

Gambar III.12

Tampilan Contoh Hewan Membelah Diri

Page 16: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

31

M. Halaman Sub Menu Latihan

Berikut ini adalah gambaran dari tampilan halaman sub menu latihan seperti

yang ada pada gambar dibawah ini :

Gambar III.13

Tampilan Sub Menu Latihan

N. Halaman Sola Latihan

Berikut ini adalah gambaran dari tampilan halaman soal latihan seperti yang

ada pada gambar dibawah ini :

Gambar III.14

Tampilan Soal Latihan

Page 17: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

32

O. Halaman Nilai Menang

Berikut ini adalah gambaran dari tampilan halaman nilai menang seperti

yang ada pada gambar dibawah ini :

Gambar III.15

Tampilan Nilai Menang

P. Halaman Nilai Kalah

Berikut ini adalah gambaran dari tampilan halaman nilai kalah seperti yang

ada pada gambar dibawah ini :

Gambar III.16

Tampilan Nilai Kalah

Page 18: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

33

Q. Halaman Permainan Sliding Puzzel

Berikut ini adalah gambaran dari tampilan halaman menu permainan

slidding puzzle yang terdapat 2 pilihan puzzle seperti yang ada pada gambar

dibawah ini :

Gambar III. 17

Tampilan Permainan Sliding Puzzel

R. Halaman Sliding Puzzel Menang

Berikut ini adalah gambaran dari tampilan halaman sliding puzzle menang

seperti yang ada pada gambar dibawah ini :

Gambar III. 18

Tampilan Sliding Puzzel Menang

Page 19: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

34

S. Halaman Sliding Puzzel Kalah

Berikut ini adalah gambaran dari tampilan halaman sliding puzzle kalah

ketika meyelesaikan permainan seperti yang ada pada gambar dibawah ini :

Gambar III. 19

Tampilan Sliding Puzzel Kalah

T. Halaman Sub Menu Profil

Berikut ini adalah gambaran dari tampilan halaman sub menu profil berisi

tentang biodata penulis seperti yang ada pada gambar dibawah ini :

Gambar III. 20

Tampilan Sub Menu Profil

Page 20: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

35

Menu UtamaLoading Judul

U. Halaman Sub Menu Keluar

Berikut ini adalah gambaran dari tampilan halaman sub menu keluar yang

ada pada gambar dibawah ini :

Gambar III. 21

Tampilan Sub Menu Keluar

3.2.4. State Transition Diagram

State Transition Diagram adalah suatu pemodelan peralatan (modeling

tool) yang menggambarkan sifat ketergantungan terhadap suatu sistem 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 Menu Loading

Gambar III.22

State Transition Diagram Awal

Page 21: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

36

Menggambarkan aplikasi dimana pertama kali pengguna akan menemui

loading diikuti oleh judul dengan tombol masuk, lalu akan masuk ke menu

utama.

2. Scene Menu Utama

Berikut ini adalah gambaran dari Scene Menu Utama :

Gambar III.23

State Transition Diagram Menu Utama

Menggambarkan menu awal aplikasi dimana pertama kali pengguna akan

menemui loading kemudian ke judul lalu akan masuk ke menu utama yang

terdapat tombol Materi, Latihan, Permainan, Profil dan Keluar.

3. Scene Menu Materi

Berikut ini adalah gambaran dari Scene Menu Materi:

Page 22: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

37

Gambar III.24

State Transition Diagram Sub Menu Materi

Gambar III.25

State Transition Diagram Sub Menu Latihan

Gambar III.26

State Transition Diagram Sub Menu Permainan

Gambar III.27

State Transition Diagram Sub Menu Profil

Page 23: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

38

3.3. Code generation

3.3.1 Testing

Aplikasi yang telah dibuat, selanjutnya diuji melalui teknik pengujian

perangkat lunak yang meliputi pengujian white box dan black box

A. White Box

Pengujian white Box merupakan metode perancangan test case yang

menggunakan struktur control dari perancangan procedural untuk mendapatkan

test case. Dengan menggunakan metode white box analisis sistem akan dapat

memperoleh test case yang:

1. Memberikan jaminan bahwa semua jalur independen pada suatu modul telah

digunakan paling tidak satu kali.

2. Menggunakan semua keputusan logis pada sisi true dan false.

3. Mengeksekusi semua loop ( perulangan ) pada batasan mereka dan pada batas.

4. Operasional pengunaan aplikasi.

Dalam hal ini, pengujian tidak dilakukan terhadap keseluruhan program secara

utuh, namun dilakukan sampel pengujian soal latihan tertentu yang dijalankan.

Sebagai contoh akan dibahas pengujian terhadap soal latihan ke-1 , yang prinsip

kerjanya sama dengan soal latihan ke-2 sampai dengan ke-15. Secara garis besar,

algoritma dari soal latihan adalah sebagai berikut:

1. Jika pengguna mengklik soal latihan di menu utama, maka pengguna dapat

melatih pengetahuannya tentang hal yang pengguna dapat tentang aplikasi

tersebut.

Page 24: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

39

2. Tiap soal latihan yang dikerjakan dengan benar, maka akan medapatkan

score atau nilai 15 dan nilai tersebut akan diakumulasikan jika dapat

mengerjakan soal berikutnya dengan benar.

3. Jika jawaban benar pengguna pada 15 soal pertama dan mendapatkan nilai

kurang dari < 80 maka pengguna disarankan untuk mencoba kembali.

Page 25: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

40

Gambar III.28

Bagan Alir Latihan

Page 26: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

41

Gambar III.29

Grafik Alir Latihan

Page 27: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

42

import flash.events.MouseEvent;

stop();

latihan.addEventListener(MouseEvent.CLICK, goToLatihan);

function goToLatihan(e:MouseEvent) {

MovieClip(parent).gotoAndStop(5);

}

import flash.events.MouseEvent;

import flash.text.TextField;

import flash.events.Event;

var nama:String;

mulai.addEventListener(MouseEvent.CLICK, mulaiQuiz);

function mulaiQuiz(e:MouseEvent):void {

//nama = testinput.text;

trace(nama);

gotoAndStop(2);

}

testinput.addEventListener(Event.CHANGE, checkInput);

function checkInput(e:Event):void {

3

2

1

4

Page 28: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

43

//receive input value and validate it

var textfield:TextField = e.target as TextField;

nama = textfield.text;

//...

}

menuUtama.addEventListener(MouseEvent.CLICK, goToMenuMateri);

function goToMenuMateri(e:MouseEvent) {

MovieClip(parent).gotoAndStop(2);

}

import flash.events.MouseEvent;

var score:int = 0;

var urutan:int = 0;

var pertanyaanValue:Array = new Array();

pertanyaanValue[0] = "1. dibawah ini manakah yang termasuk hewan vivipar?";

pertanyaanValue[1] = "2. disebut apakah hewan yang berkembang biak dengan

cara bertelur?";

pertanyaanValue[2] = "3. Apakah ciri ciri hewan yang membelah diri?";

pertanyaanValue[3] = "4. disebut apakah hewan yang berkembang biak dengan

cara beranak atau melahirkan?";

pertanyaanValue[4] = "5. dibawah ini manakah yang termasuk hewan

ovovivipar?";

pertanyaanValue[5] = "6. Apakah ciri ciri hewan Ovipar?";

pertanyaanValue[6] = "7. disebut apakah hewan yang berkembang biak dengan

cara bertelur-beranak?";

pertanyaanValue[7] = "8. dibawah ini manakah yang termasuk hewan ovipar?";

5

Page 29: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

44

pertanyaanValue[8] = "9. Apakah ciri ciri hewan vivipar?";

pertanyaanValue[9] = "10. dibawah ini manakah yang termasuk hewan membelah

diri?";

pertanyaanValue[10] = "11. Gajah adalah hewan yang berkembang biak dengan

cara?";

pertanyaanValue[11] = "12. Berikut ini adalah hewan yang berkembang biak

dengan cara bertelur yaitu?";

pertanyaanValue[12] = "13. Hanya dapat dilihat dengan mikroskop adalah ciri

hewan yang berkembang biak dengan cara?";

pertanyaanValue[13] = "14. Cara berkembang biak ovovivipar, Embrio mendapat

nutrisi makanan dari?";

pertanyaanValue[14] = "15. Merpati merupakan hewan yang berkembang biak

dengan cara?";pertanyaanValue[9] = "dibawah ini manakah yang termasuk hewan

membelah diri?";

var jawabanAValue:Array = new Array();

jawabanAValue[0] = "Gajah";

jawabanAValue[1] = "Ovipar";

jawabanAValue[2] = "Setelah telur-telur tersebut menetas, barulah sang induk

akan melahirkan anaknya";

jawabanAValue[3] = "Membelah Diri";

jawabanAValue[4] = "Hiu";

jawabanAValue[5] = "tidak dapat di lihat tampa microskop ";

jawabanAValue[6] = "Ovipar";

jawabanAValue[7] = "Burung";

jawabanAValue[8] = "Tidak menyusui anaknya";

jawabanAValue[9] = "Bebek";

jawabanAValue[10] = "Vivipar";

jawabanAValue[11] = "Itik, Angsa dan Bebek";

jawabanAValue[12] = "Ovipar";

Page 30: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

45

jawabanAValue[13] = "Induk";

jawabanAValue[14] = "Melahirkan";

var jawabanBValue:Array = new Array();

jawabanBValue[0] = "Ayam";

jawabanBValue[1] = "Vivipar";

jawabanBValue[2] = "memiliki sel satu ";

jawabanBValue[3] = "Ovovivipar";

jawabanBValue[4] = "Gajah";

jawabanBValue[5] = "berukuran sangat kecil";

jawabanBValue[6] = "Ovovivipar";

jawabanBValue[7] = "Hiu";

jawabanBValue[8] = "Tidak memiliki daun telinga";

jawabanBValue[9] = "Ayam";

jawabanBValue[10] = "Ovovivipar";

jawabanBValue[11] = "Hiu, Ayam dan Cicak";

jawabanBValue[12] = "Ovovivipar";

jawabanBValue[13] = "Telur";

jawabanBValue[14] = "Bertelur";

var jawabanCValue:Array = new Array();

jawabanCValue[0] = "Hiu";

jawabanCValue[1] = "Ovovivipar";

jawabanCValue[2] = "Memiliki puting susu dan kelenjar susu serta menyusui

anaknya";

jawabanCValue[3] = "Vivipar";

jawabanCValue[4] = "Ayam";

jawabanCValue[5] = "Memiliki penutup tubuh berupa rambut";

Page 31: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

46

jawabanCValue[6] = "Membelah Diri";

jawabanCValue[7] = "Gajah";

jawabanCValue[8] = "Tidak memiliki puting dan kelenjar susu";

jawabanCValue[9] = "Amoeba";

jawabanCValue[10] = "Ovipar";

jawabanCValue[11] = "Kera, Bebek dan Ayam";

jawabanCValue[12] = "Vivipar";

jawabanCValue[13] = "Darah";

jawabanCValue[14] = "Membelah diri";

var jawabanDValue:Array = new Array();

jawabanDValue[0] = "Amoeba";

jawabanDValue[1] = "Membelah Diri";

jawabanDValue[2] = "Tidak memiliki daun telinga";

jawabanDValue[3] = "Ovipar";

jawabanDValue[4] = "Amoeba";

jawabanDValue[5] = "Tidak memiliki puting dan kelenjar susu";

jawabanDValue[6] = "Vivipar";

jawabanDValue[7] = "Plankton";

jawabanDValue[8] = "Memiliki daun telinga";

jawabanDValue[9] = "Gajah";

jawabanDValue[10] = "Membelah diri";

jawabanDValue[11] = "Angsa, Bebek dan kelinci";

jawabanDValue[12] = "Membelah diri";

jawabanDValue[13] = "Sisa makanan induknya";

jawabanDValue[14] = "Bertelur dan melahirkan";

var jawabanBenar:Array = new Array();

Page 32: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

47

jawabanBenar[0] = "A";

jawabanBenar[1] = "A";

jawabanBenar[2] = "B";

jawabanBenar[3] = "C";

jawabanBenar[4] = "A";

jawabanBenar[5] = "D";

jawabanBenar[6] = "B";

jawabanBenar[7] = "A";

jawabanBenar[8] = "D";

jawabanBenar[9] = "C";

jawabanBenar[10] = "A";

jawabanBenar[11] = "A";

jawabanBenar[12] = "D";

jawabanBenar[13] = "B";

jawabanBenar[14] = "B";

pertanyaan.text = pertanyaanValue[urutan];

jawabanA.text = jawabanAValue[urutan];

jawabanB.text = jawabanBValue[urutan];

jawabanC.text = jawabanCValue[urutan];

jawabanD.text = jawabanDValue[urutan];

btnA.addEventListener(MouseEvent.CLICK, dijawabA);

btnB.addEventListener(MouseEvent.CLICK, dijawabB);

btnC.addEventListener(MouseEvent.CLICK, dijawabC);

btnD.addEventListener(MouseEvent.CLICK, dijawabD);

function dijawabA(e:MouseEvent) {

6

po

int

;

na

m

as

co

re.

te

xt

=n

a

m

a;

po

int

=

N

u

m

be

r(

po

int

7

po

int

;

na

m

Page 33: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

48

dijawab("A");

}

function dijawabB(e:MouseEvent) {

dijawab("B");

}

function dijawabC(e:MouseEvent) {

dijawab("C");

}

function dijawabD(e:MouseEvent) {

dijawab("D");

}

function dijawab(jawaban:String) {

if(jawabanBenar[urutan] == jawaban) {

trace("BENAR");

score += 10;

} else {

trace("SALAH");

}

urutan++;

if(urutan == 15) {

gotoAndStop(3);

} else {

pertanyaan.text = pertanyaanValue[urutan];

jawabanA.text = jawabanAValue[urutan];

jawabanB.text = jawabanBValue[urutan];

jawabanC.text = jawabanCValue[urutan];

Page 34: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

49

jawabanD.text = jawabanDValue[urutan];

}

import flash.events.MouseEvent;

namapengerja.text = nama;

scorenilai.text = score+"";

if(score <= 60) {

cobaLagi.visible = true;

kembali.visible = true;

selesai.visible = false;

} else {

var myMusic2 = new tepuk();

var volumesuara2 = new SoundTransform(0.3,0);

var channel2 = myMusic2.play(0, 1, volumesuara2);

var myMusic3 = new hore();

var volumesuara3 = new SoundTransform(0.3,0);

var channel3 = myMusic3.play(0, 1, volumesuara3);

cobaLagi.visible = false;

kembali.visible = false;

selesai.visible = true;

}

cobaLagi.addEventListener(MouseEvent.CLICK, cobaLagifunc);

kembali.addEventListener(MouseEvent.CLICK, kembalifunc);

selesai.addEventListener(MouseEvent.CLICK, selesaifunc);

function cobaLagifunc(e:MouseEvent) {

8

po

int

;

na

m

as

co

re.

te

xt

=n

a

m

a;

po

int

=

N

u

m

be

9

po

int

;

na

m

as

co

re.

te

xt

=n

a

m

a;

po

int

=

N

u

10

po

int

;

na

m

as

co

re.

te

xt

=n

a

m

a;

po

int

11

po

int

;

na

m

as

co

re.

Page 35: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

50

gotoAndStop(1);

}

function kembalifunc(e:MouseEvent) {

MovieClip(parent).gotoAndStop(2);

}

function selesaifunc(e:MouseEvent) {

MovieClip(parent).gotoAndStop(2);

}

Kompleksitas Siklomatis (pengukuran kuantitatif terhadap

kompleksitalogis suatu program) dari grafik alir dapat diperoleh dengan

perhitungan :

Dimana:

E = Jumlah edge grafik alir yang ditandakan dengan gambar panah

N = Jumlah simpul grafik alir yang ditandakan dengan gambar lingkaran

Sehingga kompleksitas siklomatisnya

V(G)= 12-11+2=3

Basis set yang dihasilkan dari jalur independent secara linear adalah jalur

sebagai berikut :

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

1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – 11 – 2

1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – 11

V(G)=E-N+2

Page 36: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

51

Ketika aplikasi dijalankan ,maka terlihat bahwa salah satu basis set yang

dihasilkan adalah 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – 11 dan terlihat bahwa simpul

telah di eksekusi satu kali.

B. Black Box

Pengujian selanjutnya dilakukan untuk memastikan bahwa suatu masukan

akan menjalankan proses tepat. Untuk contoh pengujian terhadap beberapa tombol

dari aplikasi multimedia memberikan hasil sebagai berikut :

Tabel III.2

Tabel Pengujian

Input /event Proses Output/next

Stage

Hasil

penguji

Tombol

button Masuk

import flash.events.MouseEvent;

masuk.addEventListener(MouseEvent.CLI

CK, doMasuk);

function doMasuk(e:MouseEvent) {

MovieClip(parent).gotoAndStop(2);

}

Ke halaman

Menu Utama

Sesuai

Tombol

button Materi

import flash.events.MouseEvent;

materi.addEventListener(MouseEvent.CLI

CK, goToMateri);

function goToMateri(e:MouseEvent) {

MovieClip(parent).gotoAndStop(3);

}

Ke halaman

Materi

Sesuai

Tombol

button

Latihan

import flash.events.MouseEvent;

stop();

latihan.addEventListener(MouseEvent.CLI

CK, goToLatihan);

function goToLatihan(e:MouseEvent) {

Ke halaman

Latihan

Sesuai

Page 37: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

52

MovieClip(parent).gotoAndStop(5);

}

Tombol

button

Permainan

import flash.events.MouseEvent;

stop();

permainan.addEventListener(MouseEvent.

CLICK, goToPermainan);

function goToPermainan(e:MouseEvent) {

MovieClip(parent).gotoAndStop(8);

}

Ke halaman

Permainan

Sesuai

Tombol

button Profil

import flash.events.MouseEvent;

stop();

profile.addEventListener(MouseEvent.CLI

CK, goToProfile);

function goToProfile(e:MouseEvent) {

MovieClip(parent).gotoAndStop(7);

}

Ke halaman

Profil

Sesuai

Tombol

button Keluar

import flash.events.MouseEvent;

stop();

keluar.addEventListener(MouseEvent.CLIC

K, exit);

function exit(e:MouseEvent) {

MovieClip(parent).setChildIndex(thi

s, MovieClip(parent).numChildren - 1);

gotoAndStop(2);

}

Ke halaman

Keluar

Sesuai

3.3.2 Support

Spesifikasi hardware dan software minimum yang digunakan pada

aplikasi ini adalah :

Page 38: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

53

Tabel III.3

Kebutuhan Hardware dan Software Perancangan Animasi Interaktif

Kebutuhan Keterangan

Sistem Operasi Windows 10

Processor Intel Core 2 Duo atau lebih tinggi

Memori 1 GB (direkomendasikan 2 GB)

Hardisk 160 GB

Software

Adobe Profesional Flash CS6, Adobe Photoshop

CS6,

3.4. Hasil Pengolahan Data Kuesioner Animasi Interaktif

Setelah melakukan pembuatan program penulis melakukan pengujian

program animasi kepada anak kelas 4 SD di lingkungan Madrasah Ibtidaiyah

Hidayatul Anam Jakarta dengan menggunakan kuesioner yang berupa angket dan

kemudian diberikan kepada 10 anak, kemudian penulis simpulkan kedalam hasil

kuesioner dalam bentuk grafik sebagai berikut :

Petunjuk pengisian :

1. Mohon kuesioner ini diisi secara lengkap dari seluruh pernyataan yang telah

disediakan, sesuai dengan pendapat anak-anak dan sesuai dengan kondisi

yang sebenarnya.

2. Berilah tanda (√) pada kolom jawaban yang tersedia.

Page 39: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

54

3. Terdapat 2 (Dua) alternatif pengisian jawaban, yaitu :

a. Ya

b. Tidak

Berikut ini adalah rincian dari item-item kuesioner untuk anak-anak:

Tabel III.4

Kuesioner Animasi Interaktif Pengenalan Jenis Hewan Berdasarkan Cara

Berkembang Biak

Petunjuk Pengisian :

Tuliskan jawaban adik – adik dengan beri tanda (√) pada jawaban yang

dipilih. Jika adik – adik setuju pilih (ya) jika tidak setuju pilih (tidak).

No Pertanyaan Untuk Peserta Didik Ya Tidak

1. Apakah desain animasi menarik?

2. Apakah animasi mudah digunakan?

3. Apakah suara dalam materi jelas?

4. Apakah materi mudah di mengerti?

5. Apakah tampilan latihan menarik?

6. Apakah ada kesulitan dalam mengerjakan

latihan?

7. Apakah animasi ini menyenangkan?

8. Apakah animasi ini membosankan?

9. Apakah animasi ini bermanfaat?

10. Apakah animasi ini membuat semangat belajar

meningkat?

Page 40: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

55

Beri tanda (√) pada jawaban yang dipilih

Berikut ini adalah bagan dari kuesioner dari animasi interaktif pengenalan

jenis hewan berdasarkan cara berkembang biak

Sumber : Hasil Penelitian (2017)

Gambar III.30

Tampian Grafik Kuesioner pada anak-anak

Penjelasan :

Soal 1 : 10 dari 10 responden = 10/10 x 100 % = 100 %

Soal 2 : 9 dari 10 responden = 9/10 x 100 % = 90 %

Soal 3 : 7 dari 10 responden = 7/10 x 100 % = 70 %

Soal 4 : 8 dari 10 responden = 8/10 x 100 % = 80 %

Soal 5 : 10 dari 10 responden = 10/10 x 100 % = 100 %

Soal 6 : 8 dari 10 responden = 8/10 x 100 % = 85 %

Soal 7 : 10 dari 10 responden = 20/10 x 100 % = 100 %

Soal 8 : 0 dari 10 responden = 0/10 x 100 % = 0 %

Soal 9 : 9 dari 10 responden = 9/10 x 100 % = 90 %

Soal 10 : 10 dari 10 responden = 10/10 x 100 % = 100 %

Page 41: BAB III PERANCANGAN DAN PEMBAHASAN...Berikut ini adalah gambaran dari storyboard animasi pengenalan cara berkembang biak hewan. Tabel III.1 Perancangan Story Board VISUAL SKETSA AUDIO

56

Dari kesimpulan kuesioner diatas diambil kesimpulan bahwa anak-anak

lebih senang menggunakan aplikasi ini dan aplikasi ini mempermudah anak-anak

dalam belajar pengenalan jenis hewan berdasarkan cara berkembang biak. Para

anak-anak pun setuju untuk aplikasi ini sebagai media pembelajaran yang lebih

menarik.