bab iii perancangan dan pembahasan filekeputusan yang dapat dibuat pengguna dalam hal ini adalah...
TRANSCRIPT
19
BAB III
PERANCANGAN DAN PEMBAHASAN
3.1. Analisa Kebutuhan Software
Dalam pembuatan animasi interaktif ini penulis membutuhan beberapa
kebutuhan software di antaranya adalah :
1. Hardware
Hardware yang digunakan dalam pembuatan animasi interaktif ini adalah
sebagai berikut :
a. Processor Intel core i3-3110M (2.4GHz, 3MB L3 Cache)
b. RAM minimal 4 GB
c. Hardisk 500 GB
d. Monitor
e. Keyboard
f. Mouse
g. Microphone
2. Software
Software yang digunakan dalam pembuatan animasi interaktif ini adalah
sebagai berikut :
20
a. Adobe Flash Professional CS6
Digunakan untuk proses membuat dan mengolah animasi atau gambar.
File yang dihasilkan dari Software ini menggunakan ekstension .swf.
Dengan bahasa pemprograman yang digunakan di Adobe Flash
menggunakan bahasa Action Script 2.0.
b. Adobe Illustrator
Untuk mengolah serta mengedit desain atau gambar dalam bentuk vector
yang akan di export menjadi format PNG sebagai bahan pembuatan
animasi.
c. Adobe After Effect
Digunakan untuk kebutuhan Motion Graphic Design membuat animasi
dengan After Effects menghasilkan pergerakan yang lebih dinamis.
d. Audacity
Mengolah audio dengan cara memotong, memperbanyak, menyatukan
track satu dengan yang lain, merekam suara atau memberikan efek khusus
pada suara.
3.2. Desain
Perancangan animasi interaktif ini dibuat untuk bertujuan memberikan
kemudahan bagi pemakai sehingga mudah dimengerti dan agar pengguna merasa
tertarik, maka penulis akan memberikan animasi baik dari tulisan, gambar serta
21
suara yang jelas untuk menjelaskan materi agar tidak membuat pengguna merasa
bosan dalam pembelajarannya.
3.2.1. Karakteristik Software
Dalam merancang system yang dalam hal ini berupa animasi interaktif,
harus berpedoman pada karakteristik dan unsur yang terdapat pada animasi
interaktif yaitu :
1. Format
Program telah diformat menjadi file yang ber ekstension .swf sehingga
pengguna cukup klik ganda saja untuk memudahkan pengguna memulai
menjalankan animasi interaktif ini.
2. Rules
Pada pembelajaran animasi interaktif ini, pengguna harus lebih dulu
mempelajari materi pengenalan tata surya dari pengenlan planet-planet hingga
benda langit. Setelah itu pengguna dapat memilih menu latihan untuk
menjawab pertanyaan soal tentang tata surya. Pengguna juga dapat memilih
menu permainan yang dapat menyatukan potongan gambar tata surya yang
masih acak.
3. Policy
Ketika pengguna dapat menjawab dari pertanyaan soal latihan maka akan
mendapatkan nilai atau skor dari hasil jawaban yang benar.
22
4. Scenario
Ketika menjalankan animasi interaktif ini di awal akan dihadapkan dengan
animasi intro dilanjutkan dengan menu utama. Saat pengguna masuk akan
disediakan beberapa tombol menu, diantaranya menu materi yang terdiri dari
pengenalan tata surya, pengenalan planet-planet dan pengenalan benda langit.
Setelah pembelajaran materi pengguna bisa melanjutkan ke menu latihan yang
berisikan sepuluh soal dan menu permainan berisikan permainan puzzle.
5. Roles
Pengguna harus dapat menjawab soal pertanyaan yang diberikan untuk dapat
mengetahui kemempuan dirinya dalam mempelajari animasi interaktif ini.
6. Event/Challenge
Tantangan yang diberikan dalam latihan soal harus menjawab sepuluh
pertanyaan agar pengguna dapat mengingat kembali pada materi yang sudah
dipelajarinya. Pada game pengguna harus bisa menyatukan gambar acak
menjadi sebuah gambar yang utuh dalam waktu yang di tentukan agar
pengguna dapat mengingat gambaran yang sudah dibahas.
7. Decisions
Keputusan yang dapat dibuat pengguna dalam hal ini adalah dalam
menempatkan potongan gambar mana yang tepat agar dapat menyelesaikan
permainan. Selain itu pada menu latihan pengguna dapat membuat keputusan
untuk menjawab pertanyaan sesuai kemampuannya.
23
8. Levels
Latihan soal terdiri dari 3 level dengan tingkat kesulitan yang berbeda-beda.
9. Score Model
Penilaian pada latihan soal akan diberikan skor setiap nomoer soalnya, jika
pengguna dapat menjawab soal dengan benar, maka diberikan skor 10, tetapi
jika pemain salah dalam menjawab soal maka pemain tidak mendapat skor.
10. Indicators
Indikator yang digunakan adalah penentuan keberhasilan pengguna dalam
menu latihan adalah bisa menyelesaikan soal dengan cepat dan benar, untuk
mendapatkan nilai yang bagus.
11. Symbol
Dalam animasi interaktif ini terdapat symbol-simbol atau button yang mudah
dimengerti dan di desain semenarik mungkin agar pengguna dapat mengerti
dan memahami arti symbol itu sendiri.
3.2.2. Perancangan Story Board
Perancangan storyboard berisi pembahasan mengenai alur cerita dari
aplikasi yang akan disampaikan dengan menggunakan tulisan dan gambar.
Berikut ini storyboard dari animasi interaktif pengenalan tata surya :
24
A. Storyboard Menu Opening
Berikut ini adalah gambaran dari storyboard tampilan pembuka seperti
yang dijelaskan pada table dibawah ini :
Tabel III.1.
Storyboard Tampilan Pembuka
Visual Sketsa Audio
Ketika program
pertama kali
dijalankan akan
muncul tampilan
pembuka
sebelum masuk
ke menu utama
dengan tulisan
judul animasi
interaktif
pengenalan tata
surya, dan akan
otomasi
memasuki menu
utama
Sound_Effect.wav
Animasi Interaktif
Pengenalan Tata Surya
Untuk Sekolah Dasar Kelas VI
25
B. Storyboard Menu Utama
Berikut ini adalah gambaran dari storyboard Menu Utama seperti yang
dijelaskan pada table dibawah ini :
Tabel III.2.
Storyboard Menu Utama
Visual Sketa Audio
Halaman Menu
Utama terdapat 6
menu pilihan
yaitu : Mengenal
Tata Surya,
Mengenal Planet,
Mengenal Benda
Langit, Latihan,
Game, dan Profil.
Selain itu juga
terdapat animasi
judul dan tombol
Exit.
Backsound.wav
Mengenal Tata Surya
Mengenal Planet
Mengenal Benda Langit
Latihan
Game
EXIT
Animasi Judul Profil
26
C. Storyboard menu Pengenalan Tata Surya
Berikut ini adalah gambaran dari storyboard menu Mengenal Tata Surya
seperti yang dijelaskan pada table dibawah ini :
Tabel III.3.
Storyboard Mengenal Tata Surya
Visual Sketa Audio
Halaman menu
Mengenal Tata
Surya berisi
pembahasan
pengertian tata
surya dengan di
sertai animasi
susunan tata surya,
dan terdapat
tombol untuk ke
menu utama.
Backsound.wav
Animasi teks penjelasan
Tata Surya
Animasi susunan tata surya berputar
mengelilingi matahari
Tombol Back
27
D. Storyboard menu Mengenal Planet
Berikut ini adalah gambaran dari storyboard menu Mengenal Planet
seperti yang dijelaskan pada table dibawah ini :
Tabel III.4.
Storyboard Mengenal Planet
Visual Sketa Audio
Halaman menu
Mengenal Planet
menampilakan
gambar planet-
planet dan ketika
tombol gambar
ditekan akan
menampilkan yang
di pilih dan
menampilkan
penjelasan planet
yang dipilih, dan
terdapat tombol
back untuk ke
menu utama.
Backsound.wav
Plnt1
Plnt2
Plnt3
Plnt4
Plnt5
Plnt6
Plnt7
Plnt8
Tombol Back
28
E. Storyboard menu Mengenal Benda Langit
Berikut ini adalah gambaran dari storyboard menu Mengenal Benda
Langit seperti yang dijelaskan pada table dibawah ini :
Tabel III.5.
Storyboard Mengenal Benda Langit
Visual Sketa Audio
Halaman menu
Mengenal Benda
Langit terdapat 5
gambar macam-
macam benda
langit ketika
memelilih dan
menekan tombol
gambar akan
menampilan
penjelasan dari
gambar yang di
pilih, dan terdapat
tombol back untuk
ke menu utama.
Backsound.wav
Gambar 1
Tombol Back
Gambar 2
Gambar 3 Gambar 4
Gambar 5
Teks penjelasan
29
F. Storyboard menu Latihan
Berikut ini adalah gambaran dari storyboard menu Latihan seperti yang
dijelaskan pada table dibawah ini :
Tabel III.6.
Storyboard Latihan
Visual Sketa Audio
Menu latihan ini
terdapat 10
pertanyaan yang
bisa dijawab oleh
pengguna animasi
interaktif ini, dan
terdapat menu
home untuk
kembali ke menu
utama
Backsound.wav
Latihan soal
Tombol Home
Pilihan B
Pertanyaan
Pilhan C
Pilihan A
Pilhan D
30
G. Storyboard menu Hasil Latihan
Berikut ini adalah gambaran dari storyboard menu Hasil Latihan seperti
yang dijelaskan pada table dibawah ini :
Tabel III.7.
Storyboard Hasil Latihan
Visual Sketa Audio
Menu latihan ini
terdapat 10
pertanyaan yang
bisa dijawab oleh
pengguna animasi
interaktif ini, dan
terdapat menu
home untuk
kembali ke menu
utama
Backsound.wav
Hasil Latihan
Tombol Home
Jumlah Benar
Ulang
Jumlah Salah
Skor
31
H. Storyboard Menu Utama Game
Berikut ini adalah gambaran dari storyboard Menu Utama Game seperti
yang dijelaskan pada table dibawah ini :
Tabel III.8.
Storyboard Menu Utama Game
Visual Sketa Audio
Dalam menu ini
hanya
menampilkan
judul game,
tombol mulai
untuk masuk dan
memulai game,
dan tombol home
untuk kembali ke
menu utama
Backsound.wav
Tombol Home
Judul Game
Mulai
32
I. Storyboard menu Game
Berikut ini adalah gambaran dari storyboard menu Game seperti yang
dijelaskan pada table dibawah ini :
Tabel III.9.
Storyboard Game
Visual Sketa Audio
Dalam menu ini
terdapat game
puzzle dengan
waktu dan skor.
Juga terdapat
tombol ulang
untuk mengulang
game dan tombol
home untuk
kembali ke menu
utama
Backsound.wav
Tombol Home Ulang
Game Puzzle
Waktu Skor
33
J. Storyboard menu Profil
Berikut ini adalah gambaran dari storyboard menu Profil seperti yang
dijelaskan pada table dibawah ini :
Tabel III.10.
Storyboard Profil
Visual Sketa Audio
Dalam menu ini
pengguna akan
melihat profile dari
pembuat animasi ini
yang berirsi foto,
nama, NIM, tanggal
lahir, jurusan,
universitas, dan
alamat email.
Backsound.wav
3.2.3. User Interface
Setelah perancangan storyboard, tahap berikutnya adalah perancangan
user interface. Dimana tahap ini menjadi hal yang sangat penting dalam
pembuatan animasi interaktif, dibutuhkan sebuah interface yang komunikatif dan
user friendly. Berikut ini adalah beberapa tampilan yang ada pada animasi
interaktif yang dibuat.
Foto
Biodata
Tombol Home
34
A. Tampilan Menu Utama
Gambar III.1.
Tampilan Menu Utama
B. Tampilan Menu Mengenal Tata Surya
Gambar III.2.
Tampilan Menu Mengenal Tata Surya
35
C. Tampilan Menu Mengenal Planet
Gambar III.3.
Tampilan Menu Mengenal Planet
D. Tampilan Menu Benda Langit
Gambar III.4.
Tampilan Menu Benda Langit
36
E. Tampilan Latihan Soal
Gambar III.5.
Tampilan Latihan Soal
F. Tampilan Hasil Latihan
Gambar III.6.
Tampilan Hasil Latihan
37
G. Tampilan Menu Game
Gambar III.7.
Tampilan Menu Game
H. Tampilan Game
Gambar III.8.
Tampilan Game
38
I. Tampilan Profil
Gambar III.9.
Tampilan Profil
3.2.4. State Transition Diagram
State Transition Diagram adalah suatu pemodelan peralatan (modeling
tool) yang menggambarkan sifat ketergantungan terhadap suatu system waktu
nyata (real time system), dan tampilan tatap muka (interface) pada system aktif
(online system). Pemodelan ini juga penulis gunakan dalam menjelaskan alur-alur
dari aplikasi yang penulis rancang.
39
A. Scene Menu Utama
Gambar III.10.
State Transition Menu Utama
Menggambarkan menu awal aplikasi dimana pertama kali user akan
melihat opening lalu terdapat tombol Mengenal Tata Surya, Mengenal Planet,
Mengenal Benda Langit, Latihan, Game, Profil, dan Exit.
B. Scene Mengenal Tata Surya
Gambar III.11.
State Transition Mengenal Tata Surya
Pada scene ini menggambarkan bahwa pada layar mengenal tata surya
terdapat tampilan tesk pembahasan dengan di sertai animasi gambar dan tombol
back untuk kembali ke menu utama.
Mengenal Tata Surya
Mengenal Planet
Profil
Latihan
Mengenal Benda Langit
Game
Menu Utama
Exit
Tampilan
Back
Mengenal Tata Surya
40
C. Scene Mengenal Planet
Gambar III.12.
State Transition Mengenal Planet
Pada scene ini menggambarkan bahwa pada layar mengenal planet user
dapat memillih delapan tombol planet yang ada sehingga user dapat mengenal
setiap planet, dan tombol back untuk kembali ke menu utama.
D. Scene Mengenal Benda Langit
Gambar III.13.
State Transition Mengenal Benda Langit
Mengenal Planet
Merkurius
Bumi
Mars
Yupiter
Saturnus
Uranus
Neptunus
Tampilan
Tampilan
Tampilan
Tampilan
Tampilan
Venus
Tampilan
Tampilan
Tampilan
Back
Asteroid
Meteoroid
Komet
Satelit Alami
Satelit Buatan
Tampilan
Tampilan
Tampilan
Tampilan
Tampilan
Mengenal Benda Langit
41
E. Scene Latihan
Gambar III.14.
State Transition Latihan
Pada scene ini menggambarkan bahwa pada layar latihan terdapat 10 soal
yang bisa dijawab oleh user dan pada akhir soal akan tampil score sesuai dengan
jawaban yang dipilih. Dilayar hasil latihan juga terdapat tombol ulang untuk
mengulang latihan dan home untuk kembali ke menu utama.
F. Scene Game
Gambar III.15.
State Transition Game
Pada scene ini menggambarkan bahwa pada layar game terdapat tombol
mulai dan user diminta meletakan potongan puzzle yang masih acak pada kotak
yang telah disediakan. Selain itu pada layar ini terdapat tombol back dan home
untuk mengulang game atau kembali ke menu utama.
Latihan Soal 1-10 Hasil Latihan
Home
Ulang
Game Mulai
Tampilan
Berhasil
Tampilan
Gagal
Game
Puzzle
42
3.3. Code Generation
Code generation berisikan script listing program yang digunakan dalam
pembuatan animasi interaktif pengenalan tata surya ini, adapun script programnya
sebagai berikut.
A. Menu Utama
1. Tombol Mengenal Tata Surya
on (release) {
gotoAndPlay("Tata Surya", 1);
}
2. Tombol Mengenal Planet
on (release) {
gotoAndStop("Mengenal Planet", 1);
}
3. Tombol Mengenal Benda Langit
on (release) {
gotoAndStop("Mengenal Benda Langit", 1);
}
43
4. Tombol Latihan
on (release) {
gotoAndPlay("Latihan", 1);
}
5. Tombol Game Puzzle
on (release) {
gotoAndPlay("Game", 1);
}
6. Tombol Profile
on (release) {
gotoAndStop("Profile", 1);
}
7. Tombol Exit
on (release) {
fscommand("quit", true);
}
B. Menu Mengenal Tata Surya
1. Tombol Back
on (release) {
44
gotoAndStop("Menu", 1);
}
C. Menu Mengenal Planet
1. Tombol Merkurius
on (release) {
gotoAndPlay("Merkurius", 1);
}
2. Tombol Venus
on (release) {
gotoAndPlay("Venus", 1);
}
3. Tombol Bumi
on (release) {
gotoAndPlay("Bumi", 1);
}
4. Tombol Mars
on (release) {
gotoAndPlay("Mars", 1);
}
45
5. Tombol Yupiter
on (release) {
gotoAndPlay("Yupiter", 1);
}
6. Tombol Saturnus
on (release) {
gotoAndPlay("Saturnus", 1);
}
7. Tombol Uranus
on (release) {
gotoAndPlay("Uranus", 1);
}
8. Tombol Neptunus
on (release) {
gotoAndPlay("Neptunus", 1);
}
9. Tombol Back
on (release) {
gotoAndStop("Menu", 1);
46
}
10. Tombol Home
on (release) {
gotoAndStop("Menu", 1);
}
D. Menu Mengenal Benda Langit
1. Tombol Asteroid
on (press) {
gotoAndPlay(2);
}
2. Tombol Meteoroid
on (press) {
gotoAndPlay(16);
}
3. Tombol Komet
on (press) {
gotoAndPlay(31);
}
47
4. Tombol Satelit Buatan
on (press) {
gotoAndPlay(46);
}
5. Tombol Satelit Alami
on (press) {
gotoAndPlay(46);
}
6. Tombol Back
on (release) {
gotoAndStop("Menu", 1);
}
E. Menu Latihan
1. Tombol Home
on (release) {
gotoAndStop("Menu", 1);
}
2. Latihan Soal
stop();
48
var benar = 0;
3. Tombol Jawaban Benar
on (press) {
nextFrame();
benar++;
}
4. Tombol Jawaban salah
on (press) {
nextFrame();
}
5. Hasil Latihan
tampilan_benar = benar;
tampilan_salah = 10 - benar;
tampilan_skor = benar * 10;
stop();
6. Tombol Ulang
on (release) {
benar = 0;
gotoAndStop(1);
49
}
F. Menu Game Puzzle
1. Tombol Mulai
on (release) {
gotoAndPlay(2);
}
2. Tombol Home
on (release) {
gotoAndStop("Menu", 1);
}
3. Game Puzzle
stop();
score = 0;
for (i = 1; i <= 25; i++)
{
set("kontrol" + i, true);
}
xawal = satu._x;
yawal = satu._y;
satu.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
50
satu.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target1)
{
this._x = _root.target1._x;
this._y = _root.target1._y;
score += 10;
if (kontrol1)
{
kontrol1 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
xawal = dua._x;
yawal = dua._y;
dua.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
dua.onRelease = function()
{
51
this.stopDrag();
lingkaran_target
if (eval(this._droptarget) == target2)
{
lingkaran_target
this._x = _root.target2._x;
lingkaran_target
this._y = _root.target2._y;
score += 10;
if (kontrol2)
{
kontrol2 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
dua.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = tiga._x;
yawal = tiga._y;
52
tiga.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
tiga.onRelease = function()
{
this.stopDrag();
lingkaran_target
if (eval(this._droptarget) == target3)
{
lingkaran_target
this._x = _root.target3._x;
lingkaran_target
this._y = _root.target3._y;
score += 10;
if (kontrol3)
{
kontrol3 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
tiga.onReleaseOutside = function()
53
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = empat._x;
yawal = empat._y;
empat.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
empat.onRelease = function()
{
this.stopDrag();
lingkaran_target
if (eval(this._droptarget) == target4)
{
lingkaran_target
this._x = _root.target4._x;
lingkaran_target
this._y = _root.target4._y;
score += 10;
if (kontrol4)
{
kontrol4 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
54
else
{
this._x = xawal;
this._y = yawal;
}
};
empat.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = lima._x;
yawal = lima._y;
lima.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
lima.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target5)
{
this._x = _root.target5._x;
this._y = _root.target5._y;
score += 10;
if (kontrol5)
{
kontrol5 = false;
if (score == 160)
{
55
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
lima.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = enam._x;
yawal = enam._y;
enam.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
enam.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target6)
{
this._x = _root.target6._x;
this._y = _root.target6._y;
score += 10;
if (kontrol6)
56
{
kontrol6 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
enam.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = tujuh._x;
yawal = tujuh._y;
tujuh.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
tujuh.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target7)
{
57
this._x = _root.target7._x;
this._y = _root.target7._y;
score += 10;
if (kontrol7)
{
kontrol7 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
tujuh.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = delapan._x;
yawal = delapan._y;
delapan.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
delapan.onRelease = function()
58
{
this.stopDrag();
if (eval(this._droptarget) == target8)
{
this._x = _root.target8._x;
this._y = _root.target8._y;
score += 10;
if (kontrol8)
{
kontrol8 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
delapan.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = sembilan._x;
yawal = sembilan._y;
sembilan.onPress = function()
{
59
this.startDrag();
this.swapDepths(1);
};
sembilan.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target9)
{
this._x = _root.target9._x;
this._y = _root.target9._y;
score += 10;
if (kontrol9)
{
kontrol9 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
sembilan.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
60
xawal = sepuluh._x;
yawal = sepuluh._y;
sepuluh.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
sepuluh.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target10)
{
this._x = _root.target10._x
this._y = _root.target10._y;
score += 10;
if (kontrol10)
{
kontrol10 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
sepuluh.onReleaseOutside = function()
{
61
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = sebelas._x;
yawal = sebelas._y;
sebelas.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
sebelas.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target11)
{
this._x = _root.target11._x;
this._y = _root.target11._y;
score += 10;
if (kontrol11)
{
kontrol11 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
62
}
};
sebelas.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = duabelas._x;
yawal = duabelas._y;
duabelas.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
duabelas.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target12)
{
this._x = _root.target12._x;
this._y = _root.target12._y;
score += 10;
if (kontrol12)
{
kontrol12 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
63
}
else
{
this._x = xawal;
this._y = yawal;
}
};
duabelas.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = tigabelas._x;
yawal = tigabelas._y;
tigabelas.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
tigabelas.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target13)
{
this._x = _root.target13._x;
this._y = _root.target13._y;
score += 10;
if (kontrol13)
{
kontrol13 = false;
if (score == 160)
64
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
tigabelas.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = empatbelas._x;
yawal = empatbelas._y;
empatbelas.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
empatbelas.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target14)
{
this._x = _root.target14._x;
this._y = _root.target14._y;
score += 10;
65
if (kontrol14)
{
kontrol14 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
empatbelas.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = limabelas._x;
yawal = limabelas._y;
limabelas.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
limabelas.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target15)
66
{
this._x = _root.target15._x;
this._y = _root.target15._y;
score += 10;
if (kontrol15)
{
kontrol15 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
limabelas.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = enambelas._x;
yawal = enambelas._y;
enambelas.onPress = function() {
this.startDrag();
this.swapDepths(1);
};
enambelas.onRelease = function() {
67
this.stopDrag();
if (eval(this._droptarget) == target16) {
this._x = _root.target16._x;
this._y = _root.target16._y;
score +=10;
if (kontrol16) {
kontrol16 = false;
if (score == 160) {
gotoAndPlay("menang");
}}
} else {
this._x = xawal;
this._y = yawal;
}
};
enambelas.onReleaseOutside = function() {
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
xawal = sampah._x;
yawal = sampah._y;
sampah.onPress = function()
{
this.startDrag();
this.swapDepths(1);
};
sampah.onRelease = function()
{
this.stopDrag();
if (eval(this._droptarget) == target25)
{
68
this._x = _root.target25._x;
this._y = _root.target25._y;
score += 10;
if (kontrol25)
{
kontrol25 = false;
if (score == 160)
{
gotoAndPlay("menang");
}
}
}
else
{
this._x = xawal;
this._y = yawal;
}
};
sampah.onReleaseOutside = function()
{
this.stopDrag();
this._x = xawal;
this._y = yawal;
};
4. Waktu
onClipEvent (load) {
time = 90;
kontrol = 1;
}
69
onClipEvent (enterFrame) {
kontrol++;
if (kontrol == 25) {
kontrol = 1;
time--;
if (time==0){
_root.gotoAndPlay("Game Over");
}
}
}
5. Tampilan Berhasil
stop();
removeMovieClip(satu);
removeMovieClip(dua);
removeMovieClip(tiga);
removeMovieClip(empat);
removeMovieClip(lima);
removeMovieClip(enam);
removeMovieClip(tujuh);
removeMovieClip(delapan);
removeMovieClip(sembilan);
removeMovieClip(sepuluh);
removeMovieClip(sebelas);
removeMovieClip(duabelas);
70
removeMovieClip(tigabelas);
removeMovieClip(empatbelas);
removeMovieClip(limabelas);
removeMovieClip(enambelas);
removeMovieClip(sampah);
6. Tampilan Gagal
stop();
removeMovieClip(satu);
removeMovieClip(dua);
removeMovieClip(tiga);
removeMovieClip(empat);
removeMovieClip(lima);
removeMovieClip(enam);
removeMovieClip(tujuh);
removeMovieClip(delapan);
removeMovieClip(sembilan);
removeMovieClip(sepuluh);
removeMovieClip(sebelas);
removeMovieClip(duabelas);
removeMovieClip(tigabelas);
removeMovieClip(empatbelas);
removeMovieClip(limabelas);
removeMovieClip(enambelas);
removeMovieClip(sampah);
7. Tombol Ulang
on (release) {
gotoAndPlay(1);
}
71
G. Menu Profile
1. Tombol Home
on (release) {
gotoAndStop("Menu", 1);
}
3.3.1. Testing
Agar program yang telah dibuat dapat dijalankan dengan baik pada saat
implementasi oleh user tanpa adanya kesalahan dari segi pemrograman maka
diperlukan adanya suatu pengujian pada sistem program maupun pengujian pada
file.
A. White Box
Metode white box ini adalah suatu metode desain test case yang
menggunakan struktur control desain procedural untuk memperoleh test case.
Dalam hal ini, pengujian tidak dilakukan terhadap keseluruhan program secara
utuh, namun dilakukan sampel pengujian terhadap latihan soal tertentu yang
dijalankan. Sebagai contoh akan dibahas pengujian terhadap soal 1, yang prinsip
kerjanya sama dengan soal 2 sampai dengan soal 10 pada aplikasi ini.
1. Jika memilih menu Latihan maka akan langsung ditampilkan soal
pertanyaan
2. Pilih salah satu jawaban yang dianggap benar untuk melanjutkan ke
soal berikutnya
72
3. Jika user menjawab pertanyaan dengan benar, maka user akan
mendapat skor 10 di setiap soalnya, namun jika salah akan mendapat
nilai 0 tiap soalnya. Skor akan di akumulasikan di akhir latihan soal.
Bagian alir latihan soal animasi pengenalan tata surya adalah sebagai
berikut :
T
Y
Gambar III.16.
Bagan Alir Latihan
Tampil Soal
dan Jawaban
A,B,C, dan D
Tampil Soal
Berikutnya
Tekan Salah Satu Jawaban
A, B, C, atau D
Soal
No=10
Skor
Selesai
Mulai
Tekan Salah Satu Jawaban
A, B, C, atau D
73
Gambar III.17.
Grafik Alir Latihan
• Script
on (release) {
gotoAndPlay("Latihan", 1);
}
stop();
var benar = 0;
1
2
3
4
5
6
7
8
2
1
74
on (press) {
nextFrame();
}
on (press) {
gotoAndStop(16);
}
on (press) {
nextFrame();
benar++;
}
on (press) {
gotoAndPlay(24);
}
tampilan_benar = benar;
tampilan_salah = 10 - benar;
tampilan_skor = benar * 10;
stop();
on (release) {
gotoAndStop("Menu", 1);
3
4
5
6
7
8
75
Kompleksitas Siklomatis (pengukuran kuantitatif terhadap kompleksitas logis
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) = 8 – 8 + 2 = 2
Basis set yang dihasilkan dari jalur independent secara linier adalah jalur
sebagai berikut :
1 – 2 – 3 – 4 – 5 – 6 – 7 – 8
1 – 2 – 3 – 4 – 5 – 6 – 4
Ketika aplikasi dijalankan, maka terlihat bahwa salah satu basis set yang
dihasilkan adalah 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 dan terlihat bahwa simpul telah
dieksekusi satu kali.
Dengan ketentuan tersebut dari kelayakan software, system menu latihan
ini telah memenuhi syarat.
B. Black Box
Dalam pengujian berikutnya dilakukan untuk memastikan bahwa suatu
event atau masukan akan menjalankan proses yang tepat dan menghasilkan output
sesuai dengan rancangan yang dibuat.
V(G) = E – N + 2
76
Tabel III.11.
Pengujian Black Box Latihan
Input /
Event Proses Output / Next Stage
Hasil
Pengujian
Tombol Latihan
on (release) {
gotoAndPlay("Latihan", 1);
}
Halaman Latihan Soal
Sesuai
Jawaban Salah
on (press) {
nextFrame();
}
Jawaban salah Sesuai
Jawaban Benar
on (press) {
nextFrame();
benar++;
}
Jawaban Benar Sesuai
Tombol Ulang
on (release) {
benar = 0;
gotoAndStop(15);
}
Mengulang ke Halaman Latihan
Soal Sesuai
Tombol Home
on (release) {
gotoAndStop("Menu", 1);
}
Halaman Menu Utama
Sesuai
77
Tabel III.12.
Pengujian Black Box Game
Input /
Event Proses Output / Next Stage
Hasil
Pengujian
Tombol Mulai
on (release) {
gotoAndPlay(2);
}
Halaman Game Puzzle Sesuai
Tombol Ulang
on (release) {
gotoAndPlay(1);
}
Halaman Menu Game Sesuai
Tombol Home
on (release) {
gotoAndStop("Menu", 1);
}
Halaman Menu Utama Sesuai
3.3.2. Support
Dalam Pembuatan animasi interaktif ini dibutuhkan beberapa perangkat
pendukung. Berikut spesifikasi yang dibutuhkan dalam pembutan animsi
interaktif ini :
Tabel III.13.
Kebutuhan Hardware dan Software
Kebutuhan Keterangan
Sistem Operasi Windows XP, Windows 7 atau Sesudahnya
Processor Pentium IV 2.0 GHz atau lebih tinggi
Memory (RAM) 2 GB atau lebih besar
Hardisk 500 GB atau lebih besar
Software Adobe Flash Profesional CS6. Adobe After Effect CS6,
Adobe Illustrator CS6, Audacity
78
3.4. Hasil Pengolahan Data Kuesioner Animasi Interaktif
Penulis menggunakan metode kuesioner memalui survey dengan respoden
yang mewakili pengguna yang digunakan dalam pengujian animasi. Kuesioner
diberikan kepada 10 anak sekolah dasar tentang bagaimana pendapat mereka
setelah aplikasi ini dijalankan, yang terdiri dari 10 pertanyaan.
Berikut ini adalah rincian dari item-item kuesioner :
Tabel III.14.
Kuesioner Animasi Pengenalan Tata Surya
No Pertanyaan Ya Tidak
1 Apakah tampilan Animasi Interaktif Pengenalan Tata
Surya ini menarik ?
2 Apakah aplikasi ini mudah digunakan?
3 Apakah dengan aplikasi ini dapat membantu kamu dalam
mengenal tata surya ?
4 Apakah dengan animasi ini kamu sudah mengetahui
tentang tata surya ?
5 Apakah materi dalam animasi ini mudah untuk dipahami ?
6 Apakah latihan soal dalam animasi ini mudah untuk
dijawab ?
7 Apakah tombol-tombol yang terdapat pada animasi ini
berjalan dengan baik ?
8 Apakah game puzzle pada animasi ini menarik untuk
dimainkan ?
9 Apakah bahasa yang ada di animasi ini mudah di
mengerti?
10 Apakah dengan animasi ini bisa meningkatkan minat
belajar kamu untuk mengenal tata surya ?
Ket: beri tanda ceklis (√) pada jawaban yang dipilih.
79
Berikut ini adalah bagan dari kuensioner animasi interaktif pengenalan tata
surya :
Gambar III.18.
Tampilan Grafik Kuensioner
Dari hasil kuensioner pada Gambar III.18. dapat diambil kesimpulan
bahwa sebagian besar anak sekolah dasar dapat menggunakan aplikasi ini dengan
mudah, dapat membantu dalam pelajaran tata surya, serta dapat membuat para
siswa/i lebih kreatif dalam proses belajar.