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<=60) {
keterangan = "Anda Harus Coba Lagi !!";
}
restart.onPress = function(){
gotoAndStop(1 }
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
