BAB III PERANCANGAN DAN PEMBAHASAN fileKeputusan yang dapat dibuat pengguna dalam hal ini adalah dalam menempatkan potongan gambar mana yang tepat agar dapat menyelesaikan permainan.

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


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


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


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


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


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


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


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) {


46

}

10. Tombol Home

on (release) {


}

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) {


}

E. Menu Latihan

1. Tombol Home

on (release) {


}

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) {


}

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


{

lingkaran_target


lingkaran_target


score += 10;

if (kontrol2)

{

kontrol2 = false;

if (score == 160)

{


}

}

}

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


{

lingkaran_target


lingkaran_target


score += 10;

if (kontrol3)

{

kontrol3 = false;

if (score == 160)

{


}

}

}

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


{

lingkaran_target


lingkaran_target


score += 10;

if (kontrol4)

{

kontrol4 = false;

if (score == 160)

{


}

}

}

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();


{



score += 10;

if (kontrol5)

{

kontrol5 = false;

if (score == 160)

{

55


}

}

}

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();


{



score += 10;

if (kontrol6)

56

{

kontrol6 = false;

if (score == 160)

{


}

}

}

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();


{

57



score += 10;

if (kontrol7)

{

kontrol7 = false;

if (score == 160)

{


}

}

}

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();


{



score += 10;

if (kontrol8)

{

kontrol8 = false;

if (score == 160)

{


}

}

}

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();


{



score += 10;

if (kontrol9)

{

kontrol9 = false;

if (score == 160)

{


}

}

}

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();


{

this._x = _root.target10._x


score += 10;

if (kontrol10)

{

kontrol10 = false;

if (score == 160)

{


}

}

}

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();


{



score += 10;

if (kontrol11)

{

kontrol11 = false;

if (score == 160)

{


}

}

}

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();


{



score += 10;

if (kontrol12)

{

kontrol12 = false;

if (score == 160)

{


}

}

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();


{



score += 10;

if (kontrol13)

{

kontrol13 = false;

if (score == 160)

64

{


}

}

}

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();


{



score += 10;

65

if (kontrol14)

{

kontrol14 = false;

if (score == 160)

{


}

}

}

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();


66

{



score += 10;

if (kontrol15)

{

kontrol15 = false;

if (score == 160)

{


}

}

}

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) {



score +=10;

if (kontrol16) {

kontrol16 = false;

if (score == 160) {


}}

} 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();


{

68



score += 10;

if (kontrol25)

{

kontrol25 = false;

if (score == 160)

{


}

}

}

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) {


}

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) {


}

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) {


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) {


}

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) {


}

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) {


}

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.

BAB III PERANCANGAN DAN PEMBAHASAN fileKeputusan yang dapat dibuat pengguna dalam hal ini adalah dalam menempatkan potongan gambar mana yang tepat agar dapat menyelesaikan permainan.

Documents