commit to user 16
3.3.2 Perancangan Desain
Berikut ini adalah rancangan desain yang akan dibuat dalam perancangan
produk.
1. Rancangan Desain Menu Utama Pada Gambar 3.2 merupakan tampilan Menu utama yang memiliki
beberapa tombol button yang disajikan di menu utama, sehingga pengguna dapat memilih menu-menu yang ada di bagian ini.
Kelas 1
Kelas 2
Kelas 3
Kelas 4
Kelas 5
Kelas 6
JUDUL
Gambar 3.2 Rancangan Desain Menu Utama Keterangan :
- Kelas 1 : Pada button kelas 1, jika button ini di klik maka
user akan masuk ke dalam sub menu yang berada di kelas 1.
ActionScript yang digunakan untuk tombol kelas 1 sebagai berikut ini:
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumkelas1.swf,this;
} else { this.loadMoviekelas1.swf;
}End Behavior }
commit to user 17
- Kelas 2 : Pada button kelas 2, jika button ini di klik maka
user akan masuk ke dalam sub menu yang berada di kelas 2.
ActionScript yang digunakan untuk tombol kelas 2 sebagai berikut ini:
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumkelas2.swf,this;
} else { this.loadMoviekelas2.swf;}
End Behavior }
- Kelas 3 : Pada button kelas 3, jika button ini di klik maka
user akan masuk ke dalam sub menu yang berada di kelas 3.
ActionScript yang digunakan untuk tombol kelas 3 sebagai berikut ini:
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumkelas3.swf,this;
} else { this.loadMoviekelas3.swf;}
End Behavior }
- Kelas 4 : Pada button kelas 4, jika button ini di klik maka
user akan masuk ke dalam sub menu yang berada di kelas 4.
commit to user 18
ActionScript yang digunakan untuk tombol kelas 4 sebagai berikut ini:
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumkelas4.swf,this;
} else { this.loadMoviekelas4.swf;
} End Behavior
}
- Kelas 5 : Pada button kelas 5, jika button ini di klik maka
user akan masuk ke dalam sub menu yang berada di kelas 5.
ActionScript yang digunakan untuk tombol kelas 5 sebagai berikut ini:
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumkelas5.swf,this;
} else { this.loadMoviekelas5.swf;
} End Behavior
}
- Kelas 6 : Pada button kelas 6, jika button ini di klik maka
user akan masuk ke dalam sub menu yang berada di kelas 6.
commit to user 19
ActionScript yang digunakan untuk tombol kelas 6 sebagai berikut ini:
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumkelas6.swf,this;
} else { this.loadMoviekelas6.swf;
} End Behavior
} 2. Rancangan Desain Sub Menu
Pada Gambar 3.3 merupakan rancangan desain bagian sub menu dan sub menu muncul setelah meng-klik salah satu menu utama.
Tombol dipojok atas kiri terdapat tombol menu berfungsi untuk mempermudahkan user untuk masuk ke menu lainnya. Sedangkan
Tombol navigasi berisikan tombol-tombol materi yang terdapat disetiap sub menunya.
Exit Back to
Menu Tombol Navigasi
Isi Tombol menu
Gambar 3.3 Rancangan Desain Sub Menu
commit to user 20
Keterangan : - Tombol Menu
Tombol ini merupakan tombol dari tombol kelas 1 sampai dengan kelas 6. Dimana jika user mengklik salah satu dari
tombol ini, akan masuk ke sub menu dari setiap tombol yang dikliknya tadi. ActionScript yang digunakan untuk Tombol
Menu sebagai berikut ini : on release {
load Movie Behavior ifthis == Numberthis{
loadMovieNumkelas.swf,this; } else {
this.loadMoviekelas.swf; }
End Behavior }
- Tombol Navigasi Tombol navigasi berisikan materi-materi yang ada di setiap
kelas. Judul dari materi-materi ini nantinya akan berbentuk link yang akan masuk ke dalam materi yang sesuai dengan judul
materi yang diklik oleh user. ActionScript yang digunakan untuk Tombol Navigasi sebagai berikut ini :
onrelease{ gotoAndPlayFrame yang akan dituju;
}
commit to user 21
- Tombol Back To Menu Tombol ini dapat digunakan untuk kembali ke tampilan
halaman pertama. ActionScript yang digunakan untuk tombol ini sebagai berikut ini :
on release { load Movie Behavior
ifthis == Numberthis{ loadMovieNumBahasa Inggris.swf,this;
} else { this.loadMovieBahasa Inggris.swf;
} End Behavior
}
- Exit Pada tombol ini berfungsi untuk menutup program secara
langsung. ActionScript yang digunakan untuk tombol keluar sebagai berikut ini :
onrelease{ fscommandquit,true;
}
3. Rancangan Desain Latihan Pada Gambar 3.4 merupakan rancangan desain dari soal latihan.
Pada desain latihan berisikan mengenai soal-soal latihan tiap materi. Soal-soal latihan ini digunakan sebagai pelatihan. Dihalaman pelatihan
ini user dapat menjawab soal setelah itu akan langsung dikoreksi jawaban yang benar yang mana.
commit to user 22
Tombol kembali
Soal Latihan
Koreksi Reset
Gambar 3.4 Rancangan Desain Soal latihan Keterangan :
- Tombol Koreksi Tombol koreksi digunakan untuk mengoreksi hasil jawaban
yang telah dipilih. Pada tombol ini nanti saat jawaban salah maka akan ditunjukan mana jawaban yang benar. ActionScript
yang digunakan untuk tombol ini adalah : ketika tekanan mouse dilepaskan setelah ditekan
on release { jika cek bernilai true
if cek { membuat variable i=1
for i=1; i2; i++ { jika jawaban+i bernilai true
if _root[jawaban+i] {
jika jawaban+i bernilai false } else if _root[jawaban+i] {
lingkaran+i menjadi tidak transparan _root[lingkaran+i]._alpha = 100;
commit to user 23
} }
cek = true; tulis = false;
} }
- Tombol Reset Pada tombol reset digunakan untuk mengembalikan soal seperti
semula. ActionScript yang digunakan sebagai berikut ini : on release {
reset; }
- Tombol Kembali Pada tombol Kembali digunakan untuk kembali ke halaman
kelas. ActionScript yang digunakan sebagai berikut ini : onrelease{
load Movie Behavior ifthis == Numberthis{
loadMovieNumkelas berapa.swf,this; } else {
this.loadMoviekelas berapa.swf; } End Behavior
}
4. Rancangan Desain Ujian Pada Gambar 3.5 merupakan rancangan desain ujian. Ujian nanti
akan dibuat dengan menggunakan timer. Dengan menggunakan timer diharapkan waktu ujian menjadi lebih terkontrol dan saat ujian telah
selesai dilakukan akan muncul nilainya atau hasil dari ujian tersebut.
commit to user 24
Pada rancangan desain ujian ini, saat user pemilih jawaban yang maka akan langsung dikoreksi jawaban tersebut benar atau salah, dan user
akan masuk ke soal berikutnya.
Tombol kembali
Soal Latihan Timer
Gambar 3.5 Rancangan Desain Soal Ujian Keterangan :
- Timer Pada timer dilakukan perhitungan secara mumdur. Saat waktu
habis maka nilai akan keluar dan sebaliknya jika waktu belum habis ternyata user sudah selesai mengerjakan soal maka hasil
nilainya juga dapat diketahui. ActionScript untuk pembuatan timer sebagai berikut ini :
stop; var currentQuestionNumber=1;
var numOfQuestionsAnsweredCorrectly=0; var numOfQuestionsAnsweredIncorrectly=0;
fps = 0; var tmr:Boolean = true;
commit to user 25
silahkan tentukan nilai detik, menit, dan jam seseuai keinginan
timernya.onEnterFrame = function { ifjam==-1{
jam=0; menit=0;
} ifmenit==-1{
menit=0; tmr=false;
detik=0; gotoAndStopSummaryScreen;
} ifmenit ==0 and detik==1{
detik = 0; }
iftmr{ menambahkan angka 0 pada second jika
detik kurang dari 10 if detik10 {
second = 0+detik; } else {
second = detik; }
menambahkan angka 0 pada minute jika menit kurang dari 10
if menit10 { minute = 0+menit;
} else { minute = menit;
}
commit to user 26
menambahkan angka 0 pada hour jika jam kurang dari 10 if jam10 {
hour = 0+jam; } else {
hour = jam; }
fps ditambah 1 secara terus menerus fps++;
jika fps sama dengan 20 if fps == 20 {
fps menjadi 0 fps = 0;
detik dikurangi 1 detik -= 1;
} jika detik sama dengan 0
if detik == 0 { detik menjadi 59
detik = 59; menit dikurangi 1
menit -= 1; }else
jika menit sama dengan 0 if menit == 0 {
menit menjadi 59
commit to user 27
menit = 59; jam dikurangi 1
jam -= 1; }}};
gotoAndStopShowQuiz;
- Tombol Kembali Pada tombol Kembali digunakan untuk kembali ke halaman
kelas. ActionScript yang digunakan sebagai berikut ini : on release {
load Movie Behavior ifthis == Numberthis{
loadMovieNumkelas berapa.swf,this; } else {
this.loadMoviekelas berapa.swf; }
End Behavior }
Saat user selesai menjawab semua pertanyaan atau jika waktu sudah habis maka akan ditampilkan halaman nilai. Rancangan desain nilai seperti gambar 3.6
dibawah ini :
Tombol kembali
benar
Nilai Salah
Gambar 3.6 Rancangan Desain Nilai
commit to user 28
Keterangan : - Keteranga Benar
Merupakan jumlah jawaban benar yang telah user jawab. ActionScript yang digunakan sebagai berikut ini :
currentQuestionNumber++; numOfQuestionsAnsweredCorrectly++;
gotoAndStopShowQuiz;
- Keterangan Salah Merupakan jumlah jawaban yang salah dari jawaban user yang
telah dijawab. ActionScript yang digunakan sebagai berikut : currentQuestionNumber++;
numOfQuestionsAnsweredIncorrectly++; gotoAndStopShowQuiz;
- Nilai Nilai disini akan menampilkan jumlah score berapa yang benar
dan berapa yang salah, dan akan menampilkan nilainya. ActionScript yang digunakan untuk mengetahui nilainya adalah
sebagai berikut : userScore=numOfQuestionsAnsweredCorrectly100
numOfQuestionsAnsweredIncorrectly+numOfQuestionsAn sweredCorrectly;
stop;
commit to user
29
BAB IV IMPLEMENTASI DAN ANALISA
4.1 Hasil Pengujian Aplikasi 4.1.1 Tampilan Halaman Menu Utama
Gambar 4.1 Halaman Menu Pada gambar 4.1 diatas merupakan aplikasi saat pertama dijalankan
akan menampilkan halaman menu utama yang terdapat beberapa tombol yang akan digunakan untuk masuk ke sub menu. Pada Gambar 4.1
digunakan sebagai halaman pembuka.
Kategori