BAB III

PERANCANGAN DAN PEMBAHASAN

3.1 Analisa Kebutuhan Software

Analisa kebutuhan software merupakan proses mempelajari kebutuhan

user untuk dapat mendefinisikan kebutuhan sistem atau perangkat lunak dan

menetapkan petunjuk kerja perangkat lunak, menyatakan antarmuka perangkat

lunak dengan elemen-elemen sistem lain, dan menentukan kendala yang harus

dihadapi dalam pembuatan perangkat lunak, Sedangkan tujuan dari analisa

kebutuhan software adalah memahami masalah yang akan dibuat perangkat lunak

secara menyeluruh dan mendefiniskan apa yang harus dikerjakan perangkat lunak

sehingga dapat memenuhi keinginan pemakai.

Ditinjau dari kebutuhan tingkat sekolah dasar dalam menyerap segala

informasi yang diterima, diperlukan suatu suatu alternatif pembelajaran yang

efektif dan menyenangkan guna penyerapan informasi yang didapat, dapat lebih

tersampaikan dengan rasa senang dan tidak membosankan. Dalam hal ini

contohnya pengenalan planet dalam tata surya dapat mudah dipahami dan

dimengerti oleh tingkat sekolah dasar.

Penulis membuat suatu media animasi interaktif yang ditunjukan untuk

anak-anak tingkat sekolah dasar yang sedang mempelajari tentang planet dalam

tata surya di mana saja. Media ini berupa aplikasi yang interaktif mengenal planet

dalam tata surya yang telah dipaketkan kedalam sebuah file *.swf sehingga dapat

dijalankan di semua jenis PC (personal computer) dengan platform sistem operasi

windows.

Dengan adanya aplikasi ini diharapkan dapat membantu tingkat sekolah

dasar untuk lebih mengenal dan memahami tentang planet dalam tata surya

dengan menggunakan media computer.

3.2 Desain

Dalam mendesain animasi interaktif ini, Penulis mengidentifikasikan

aplikasi ini berdasarkan karakteristik software, perancangan storyboard, user

interface, dan state transition diagram .

3.2.1. Karakteristik Software

1. Format

Format yang digunakan untuk animasi ini adalah format berekstensi

*.swf, sehingga pengguna dapat menjalani aplikasi ini di semua kompter

atau laptop dengan platform sistem operasi windows.

2. Rules

Pada animasi ini, pengguna harus terlebih dahulu mempelajari pada

menu utama. Setelah itu pemain dapat memilih menu latihan untuk

mengerjakan soal pilihan ganda .

3. Policy

Ketika pengguna menjawab soal kurang setengah dari jumlah soal maka

pengguna akan mendapatkan nilai setengah dari soal, tapi bila pemain

dapat menjawab soal benar semua maka pemain akan mendapatkan nilai

sempurna .

4. Scenario

Pertama kali pengguna akan ditampilkan menu utama sebelum masuk ke

menu latihan. Setelah itu pengguna akan di minta mengerjakan soal-soal

yang terdapat pada animasi interaktif ini dan terdapat musik agar

pengguna dapat mengerjakan dengan rilex.

5. Roles

Pengguna harus dapat mengerjakan soal-soal seputar planet-planet.

6. Event/Challenges

Pada animasi interaktif ini pengguna diberikan tantangan yaitu

mengerjakan soal-soal yang terdapat pada animasi interaktif ini dengan

benar.

7. Decision

Keputusan yang dapat dibuat pengguna dalam hal ini adalah mengerjakan

soal-soal, pengguna dapat mengerjakan soal-soal dengan benar.

8. Levels

Animasi interaktif ini hanya memberikan level pada soal-soal yang

terdapat pada menu evaluasi.

9. Score model

Dalam hal ini, animasi interaktif hanya menentukan berapa banyak

jumlah soal yang dapat dijawab. Jika semua soal-soal dijawab benar

pemain mendapatkan nilai 100, tetapi jika kurang pengguna akan

mendapatkan nilai di bawah 100 dan dapat mengulang menjawab soal-

soal animasi interaktif.

10. Indicator

Indikator yang digunakan adalah berupa icon-icon yang berfungsi

menunjukkan spesifikasi dari planet tersebut, ini dilakukan agar lebih

mudah memahaminya.

11. Symbol

Dalam desain animasi interaktif ini terdapat simbol-simbol khusus yang

dapat menarik perhatian pengguna. Simbol tersebut merupakan objek

yang difungsikan sebagai tombol (button) yang diberi perintah

menggunakan Actionscript untuk melakukan sebuah eksekusi yang di

inginkan sesuai jalanya program.

3.2.2 Perancangan Story Board

Story board merupakan sketsa yang menggambarkan suatu urutan (alur

cerita) elemen-elemen yang diusulkan untuk aplikasi multimedia.

A. Story Board Menu Utama

Berikut ini adalah gambaran dari story board menu utama seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.1 Story board Menu Utama

B. Story Board Menu Profil

Berikut ini adalah gambaran dari Storyboard Menu Profil seperti yang

dijelaskan pada tabel dibawah ini:

Tabel III.2 Story Board menu profil

C. Story Board Menu Belajar

Berikut ini adalah gambaran dari storyboard menu belajar seperti

menjelaskan pada tabel dibawah ini:

Tabel III.3 Story Board Belajar

D. Story Board Merkurius

Berikut ini adalah gambaran dari storyboard merkurius seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.4 Story Board Merkurius

E. Story Board Venus

Berikut ini adalah gambaran dari storyboard venus seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.5 Story Board Venus

F. Story Board Bumi

Berikut ini adalah gambaran dari Storyboard Bumi seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.6 Story Board Bumi

G. Story Board Mars

Berikut ini adalah gambaran dari Storyboard Mars seperti yang

dijelaskan pada tabel dibawah ini

Tabel III.7 Story Board Mars

H. Story Board Jupiter

Berikut ini adalah gambaran dari Story board Jupiter seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.8 Story Board Jupiter

I. Story Board Saturnus

Berikut ini adalah gambaran dari story board saturnus seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.9 Story Board Saturnus

J. Story Board Uranus

Berikut ini adalah gambaran dari story board uranus seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.10 Story Board Uranus

K. Story Board Neptunus

Berikut ini adalah gambaran dari story board neptunus seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.11 Story Board Neptunus

L. Story Board Menu Bermain

Berikut ini adalah gambaran dari Story board Menu Bermain seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.12 Story Board menu Bermain

M. Story Board Menu Latihan.

Berikut ini adalah gambaran dari story board menu latihan seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.12 Story Board menu latihan

N. Story Board Menu keluar

Berikut ini adalah gambaran dari storyboard menu keluar seperti yang

dijelaskan pada tabel dibawah ini :

Tabel III.14 Story Board menu keluar

3.2.3 User Interface

Antarmuka atau interface merupakan bagian dari program yang

berhubungan atau berinteraksi langsung user. Tujuan dari interface agar aplikasi

yang dihasilkan terlihat sederhana, menarik dan mudah dimengerti.

1. Tampilan Scene Menu Utama

Berikut ini adalah gambaran dari tampilan scene menu utama seperti yang

dijelaskan pada gambar dibawah ini :

GambarIII.1

Tampilan Scene Menu Utama

2. Tampilan scene Menu Profil

Pada scene ini berisi informasi tentang si pembuat animasi.

Gambar III.2

Tampilan Scene Menu Profil

3. Tampilan Scene Menu Belajar

Pada Scene ini terdapat tombol-tombol tentang planet meliputi merkurius,

venus, bumi, mars, yupiter, saturnus,uranus dan neptunus.

Gambar III.3

Tampilan Scene Menu Belajar

Gambar III.4

Tampilan Scene Merkurius

Gambar III .5

Tampilan scene Venus

Gambar III.6

Tampilan scene Bumi

Gambar III.7

Tampilan scene Mars

Gambar III.8

Tampilan scene yupiter

Gambar III.9

Tampilan scene saturnus

Gambar III.10

Tampilan scene uranus

Gambar III.11

Tamplan scene Neptunus

4. Tampilan Scene Menu Bermain

Pada scene ini berisikan puzzle bumi.

Gambar III.12

Tampilan scene Bermain Puzzle

5. Tampilan Scene Menu Latihan

Pada scene ini terdapat 10 soal latihan pilihan ganda tentang planet. Setiap

frame akan menampilkan satu soal pertanyaan .

Gambar III.13

Tampilan Scene Menu Latihan

3.2.4 State Transition Diagram

Menunjukkan bagaimana sistem bertingkah laku sebagai akibat dari

kejadian eksternal. Untuk melakukannya, state transition diagram menunjukkan

berbagai dari state satu ke state lainnya dan berfungsi sebagaimana bagi

pemodelan tingkah laku.

1. Scene Menu Utama

GambarIII.14

State Transition Diagram Menu Utama

Menggambarkan awal aplikasi dimana pertama kali pengguna akan

masuk ke menu utama yang terdapat Pofil, Belajar, Bermain, Latihan dan

Keluar.

2. Scene Menu Profil

GambarIII.15

State Transition Diagram Profil

Dalam scene ini hanya ada informasi tentang data diri pembuat animasi

interaktif ini.

3. Scene Menu Belajar

Gambar III.16

State Transition Diagram Belajar

Dalam scene ini agar pengguna mengetahui penjelasan setiap planet

yang terdapat pada animasi interaktif ini.

4. Scene Menu Bermain

Gambar III.17

State Transition Diagram Bermain

Dalam scene pengguna akan bermain yang terdapat pada animasi interaktif

ini.

5. Scene Menu Latihan

Gambar III.18

State Transition Diagram Latihan

Dalam scene ini pengguna akan disuruh mengerjakan soal-soal yang

terdapat pada animasi interaktif ini.

6. Scene Menu Keluar

Gambar III.19

State Transition Diagram Keluar

Dalam scene ini pengguna akan keluar dari aplikasi animasi interaktif

ini.

3.3 Code Generation

Kontruksi sistem berisikan script listing program yang digunakan dalam

pembuatan animasi interaktif ini, adapun script yang digunakan sebagai berikut :

1. Script tombol menu belajar

On(release){

gotoAndPlay("belajar",1);

}

2. Sricpt menu bermain (game)

On(release){

gotoAndPlay("bermain", 1);

}

On(release){

gotoAndStop("home_game");

}

stop();

var nilai = 0;

xawala = a._x;

yawala = a._y;

a.onPress = function() {

this.startDrag();

};

a.onRelease = function() {

this.stopDrag();

if (this.hitTest(atarget)) {

this.x = _root.atarget._x;

this.y = _root.atarget._y;

a._visible = false;

atarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawala;

this._y = yawala;

}

};

xawalb = b._x;

yawalb = b._y;

.onPress = function() {

this.startDrag();

};

b.onRelease = function() {

this.stopDrag();

if (this.hitTest(btarget)) {

this.x = _root.btarget._x;

this.y = _root.btarget._y;

b._visible = false;

btarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawalb;

this._y = yawalb;

}

};

xawalc = c._x;

yawalc = c._y;

c.onPress = function() {

this.startDrag();

};

c.onRelease = function() {

this.stopDrag();

if (this.hitTest(ctarget)) {

this.x = _root.ctarget._x;

this.y = _root.ctarget._y;

c._visible = false;

ctarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawalc;

this._y = yawalc;

}

};

xawald = d._x;

yawald = d._y;

d.onPress = function() {

this.startDrag();

};

d.onRelease = function() {

this.stopDrag();

if (this.hitTest(dtarget)) {

this.x = _root.dtarget._x;

this.y = _root.dtarget._y;

d._visible = false;

dtarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawald;

this._y = yawald;

}

};

xawale = e._x;

yawale = e._y;

e.onPress = function() {

this.startDrag();

};

e.onRelease = function() {

this.stopDrag();

if (this.hitTest(etarget)) {

this.x = _root.etarget._x;

this.y = _root.etarget._y;

e._visible = false;

etarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawale;

this._y = yawale;

}

};

xawalf = f._x;

yawalf = f._y;

f.onPress = function() {

this.startDrag();

};

f.onRelease = function() {

this.stopDrag();

if (this.hitTest(ftarget)) {

this.x = _root.ftarget._x;

this.y = _root.ftarget._y;

f._visible = false;

ftarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawalf;

this._y = yawalf;

}

};

xawalb = g._x;

yawalb = g._y;

g.onPress = function() {

this.startDrag();

};

g.onRelease = function() {

this.stopDrag();

if (this.hitTest(gtarget)) {

this.x = _root.gtarget._x;

this.y = _root.gtarget._y;

g._visible = false;

gtarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawalg;

this._y = yawalg;

}

};

xawalh = h._x;

yawalh = h._y;

h.onPress = function() {

this.startDrag();

};

h.onRelease = function() {

this.stopDrag();

if (this.hitTest(htarget)) {

this.x = _root.htarget._x;

this.y = _root.htarget._y;

h._visible = false;

htarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawalh;

this._y = yawalh;

}

};

xawali = i._x;

yawali = i._y;

i.onPress = function() {

this.startDrag();

};

i.onRelease = function() {

this.stopDrag();

if (this.hitTest(itarget)) {

this.x = _root.itarget._x;

this.y = _root.itarget._y;

i._visible = false;

itarget._alpha = 100;

nilai++;

if (nilai == 9) {

gotoAndPlay("finish");

}

} else {

this._x = xawali;

this._y = yawali;

}

};

3. Sricpt menu latihan (kuis)

On(release){

gotoAndPlay("latihan",1);

stop();

score =0;

onEnterFrame = function () { skor= +score;};

A.onPress = function (){

score =+10;

nextFrame();

};

B.onPress = function (){

nextFrame();

};

C.onPress = function (){

nextFrame();

};

D.onPress = function (){

nextFrame();

};

if (score>=80) {

keterangan = "Bagus Anda Pintar !!";

}

if (score

4. Sricpt menu profile

On(release){

gotoAndPlay("profil", 1);

}

5. Sricpt menu keluar

On(release){

fscommand(“quit”,true);

}

3.3.1 Testing

Animasi interaktif ini terlebih dahulu dilakukan pengujian dengan

menggunakan teknik pengujian perangkat lunak yang meliputi pengujian white

box dan black box.

A. White Box

Pada pengujian white box yang penulis uji adalah perintah prosedural dari

keseluruhan program secara utuh untuk menjamin operasi-operasi internal sesuai

dengan spesifikasi yang telah ditetapkan dengan menggunakan struktur kendali

dari prosedur yang dirancang. Pada animasi interaktif ini diambil beberapa sempel

yang diuji, yaitu:

1. Pengujian White box pada scene Menu Utama.

Secara garis besar, algoritma dari scene menu utama adalah sebagai

berikut:

a. Scene menu utama merupakan scene tampilan awal, yang melibatkan seluruh

scene pada aplikasi animasi interaktif ini.

b. Pengguna dapat menjalankan scene profil, belajar, bermain, latihan dan keluar

yang terdapat pada menu utama.

c. Jika pengguna ingin keluar dari aplikasi ini, pengguna harus mengklik menu

keluar yang tersedia di menu utama.

GambarIII.20

Flowchart Animasi Pengenalan Planet Dalam Tata Surya

Gambar III.21

Bagan Alir Animasi Interaktif

B. Black Box

Metode Black Box merupakan pengujian user interface oleh pengguna

setelah sistem selesai dibuat dan diuji coba pada pengguna (user). Metode

pengujian ini didasarkan pada spesifikasi sistem dengan menguji yang dilakukan

menghasilkan output yang sesuai dengan rancangan.

Aspek pengujian Black Box terhadap aplikasi animasi interaktif

pembelajaran sistem tata surya yaitu:

Tabel III.15

Hasil Pengujian Black Box

INPUT PROSES OUTPUT HASIL

PENGUJIAN

Tombol Menu

Utama

On (release) {

gotoAndStop(“menu”);

}

Menampilkan

menu utama

Sesuai

Tombol Menu

Profil

On (release ) {

gotoAndStop(“profil”);

}

Menampilkan

menu data diri

pembuat animasi

Sesuai

Tombol Menu

Belajar

On (release ) {

gotoAndStop(“belajar”);

}

Menampilkan

menu belajar

Sesuai

Tombol Menu

Bermain

On (release ) {

gotoAndStop(“bermain”)

}

Menampilkan

menu bermain

Sesuai

Tombol Menu

Latihan

On (release ) {

gotoAndStop(“latihan”);

}

Menampilkan

menu soal

Sesuai

Tombol Menu

Keluar

On (release ) {

gotoAndStop(“keluar”);

}

Keluar dari aplikasi Sesuai

3.3.2 Support

Berikut spesifikasi Hardware dan Software yang digunakan adalah

sebagai berikut:

TabelIII.16

Kebutuhan Hardware dan Software

Software Adobe Flash 8 atau Macromedia Flash 8

Processor Intel Pentium

Memori 4.00 GB (2.62 GB usable)

Hardisk 80 GB

Operating System Win XP, 7 dan seterusnya

3.4 Hasil Pengolahan Data Kuesioner Animasi Interaktif

Kuesioner ini terdiri dari 10 pertanyaan, penulis menggunakan metode

DRM (Direct Rating Method), dilakukan dengan meminta konsumen menilai

beberapa konsep iklan yang hendak ditayangkan. Penilaian tersebut didasarkan

pada beberapa variabel yakni , Cognitif (ranah yang mencakup kegiatan mental

atau otak), Afektif (ranah yang berkaitan dengan sikap dan nilai), Psikomotorik

(ranah yang berkaitan dengan ketrampilan (skill), Tekhnologi yang lebih cocok

digunakan di komputer atau selain itu, dan manfaat dari animasi tersebut.

Variabel Indikator R1 R2 R3 R4 R5 R6 R7 R8 R9 R10 R11 R12 R13 R14 R15

C1 I1 5 4 5 5 5 5 5 5 5 5 4 3 3 4 4

C6 I2 4 5 3 4 4 5 5 5 5 5 5 5 5 5 5

C9 I3 3 4 3 3 4 4 5 4 4 3 5 5 4 5 4

P2 I4 5 5 4 5 4 5 5 5 5 3 5 5 3 5 5

T7 I5 5 3 4 4 3 3 5 5 3 4 4 5 4 3 4

M8 I6 5 4 4 4 5 5 5 5 3 5 5 5 3 3 5

A3 I7 3 3 3 4 4 4 5 3 4 3 5 5 5 4 3

A4 I8 5 5 5 5 5 3 5 5 5 3 5 3 4 5 5

A5 I9 4 3 5 4 5 4 4 5 3 5 4 5 5 5 4

A10 I10 5 4 5 5 4 3 5 5 4 5 4 4 4 5 3

Tabel III.17

Variabel Indikator dan Responden 15

Dari gambar diatas bisa dibuat akumulatif dari masing masing variabel sebagai

berikut :

C1 = (1*0)+(2*0)+(3*2)+(4*4)+(5*10) = 72/15(responden) = 4,80

C6 = (1*0)+(2*0)+(3*1)+(4*3)+(5*11) = 70/15(responden) = 4,66

C9 = (1*0)+(2*0)+(3*4)+(4*7)+(5*4) = 60/15(responden) = 4,00

Total Rerata variabel C = 4,80 + 4,66 + 4,00 = 4.49

3

P6 = (1*0)+(2*0)+(3*2)+(4*2)+(5*11) = 69/15(responde) = 4,60

Total Rerata Variabel P = 4,60/1 = 4,60

T7 = (1*0)+(2*0)+(3*5)+(4*6)+(5*4) = 59/15(responde) = 3,93

Total Rerata Variabel T = 3,93/1 = 3,93

M8 = (1*0)+(2*0)+(3*3)+(4*3)+(5*9) = 67/15(responde) = 4,47

Total Rerata Variabel M = 4,47/1 = 4,47

A3 = (1*0)+(2*0)+(3*6)+(4*5)+(5*4) = 58/15(responde) = 3,87

A4 = (1*0)+(2*0)+(3*3)+(4*1)+(5*11) = 68/15(responde) = 4,53

A5 = (1*0)+(2*0)+(3*2)+(4*6)+(5*7) = 65/15(responde) = 4.33

A10 = (1*0)+(2*0)+(3*2)+(4*6)+(5*7) = 65/15(responde) = 4,33

Total Rerata Variabel A = 3,87+4,53+4,33+4,33 = 3,41

4

Rentang Penilaian

Rs = bobot tb – bobot tk

Ob

= 5 – 1 = 4 = 0,8

5 5

Sangat buruk buruk Cukup baik Sangat Baik

1 1,8 2,6 3,4 4,2 5,00

Dari Variabel C == 4,49 Penilaian Sangat Baik

Dari Variabel P == 4, 60 Penilaian Sangat Baik

Dari Variabel T == 3,93 Penilaian Baik

Dari Variabel M == 4,47 Penilaian Sangat Baik

Dari Variabel A == 3,41 Penilaian Baik

Skala pada Table Direct Table 100

G = X* 20

5

C == 4,49*(20/5) == 17,96

P == 4,60*(20/5) == 18,40

T == 3,93*(20/5) == 15,72

M == 4,47*(20/5) == 17.88

A == 3,41*(20/5) == 13,64

Total === 83.60

Sangat buruk buruk Cukup baik Sangat Baik

0 20 40 60 80 100

Dari total table direct skala 100 terdapat nilai total dari keseluruhan variable yaitu

bernilai 83,60 yang berada di skala Sangat Baik