Proses
prototype
untuk menu bantuan gambar 4.16 tidak banyak terjadi penambahan oleh
user,
karena sebelumnya untuk
button
menu bantuan adalah
button sound
mute
yang letaknya dipindahkan ke bagian kanan bawah pada tampilan aplikasi.
4.2 Implementasi
Tujuan dari tahap ini adalah merealisasikan perancangan sistem menjadi sebuah aplikasi yang dapat bekerja dengan baik,
efisien dan sesuai dengan yang diinginkan
user
. Pada bagian implementasi sistem ini, memuat dokumentasi dan penjelasan
tentang antarmuka
interface
dari aplikasi pembelajaran interaktif sistem rangka manusia. Aplikasi ini memiliki lima menu utama yang
terdiri dari
intro
, materi, latihan,
game
, dan bantuan. Menu-menu dalam aplikasi ini terhubung satu sama lain sesuai urutan metode
pembelajaran.
4.2.1 Implementasi
Loading Screen
Tampilan
Loading Screen
Gambar 4.17 Tampilan
Loading Screen
Tampilan
loading screen
pada Gambar 4.17 merupakan tampilan awal ketika aplikasi dijalankan. Halaman ini menampilkan
nama aplikasi dengan
background
gambar
chibi skeleton
dan dilengkapi dengan
button next
dan
button
pengatur suara pada sebelah kanan bawah tampilan. Kemudian setelah
user
menekan
button next
halaman utama aplikasi akan muncul setelah tampilan
loading
. Kode program untuk membuat tampilan halaman awal untuk
aplikasi dapat dilihat pada Kode Program 4.1.
Kode Program 4.1
Actionscript
Tampilan Aplikasi 1
2 3
4 5
6 7
8 9
10 11
fscommandfullscreen,true; Mouse.hide;
cursor_mc.onMouseMove = function { this._x = _xmouse;
this._y = _ymouse; updateAfterEvent;
}; mySound = new Soundthis;
mySound.attachSoundbg; mySound.start0, 99;
_root.sound_1.gotoAndPlayon;
Penjelasan Kode Program 4.1 adalah: Perintah baris 1 untuk membuat tampilan aplikasi menjadi
lebih besar
fullscreen
. Perintah baris 2-7 berfungsi untuk mengganti tampilan
cursor
. Perintah baris 8-11 berfungsi untuk memberi
background
musik.
4.2.2 Implementasi Menu
Intro
Tampilan Menu
Intro
Gambar 4.18 Tampilan
Intro
Gambar 4.18 merupakan tampilan halaman
welcome page
pada menu utama aplikasi. Dengan penambahan tokoh
chibi skeleton, user
akan diperkenalkan dengan aplikasi yang kemudian mengarahkan
user
masuk ke menu berikutnya dengan menekan
button next
. 4.2.3
Implementasi Menu Materi
. Tampilan Menu Materi
Gambar 4.19 Tampilan Menu Materi
Halaman menu materi pada Gambar 4.19 berisi materi umum tentang rangka dan terdapat animasi interaktif yang menjelaskan
tentang bagian-bagian rangka manusia. Animasi dibuat secara detail, menarik dan
user friendly
. Tampilan animasi rangka dapat berputar mengikuti gerakan
mouse
saat digerakkan ke kanan dan ke kiri, serta menjelaskan tiga bagian rangka manusia, yaitu rangka kepala,
rangka badan, dan rangka anggota gerak. Disini
user
dapat mempelajari nama tulang dan bagian-bagian rangka manusia dengan
menekan langsung pada tampilan animasi rangka. Bagian kanan atas halaman ini terdapat
button exit
dan
button sound off
terdapat di bagian kanan bawah
.
Dan dilengkapi
button next
untuk melanjutkan ke menu berikutnya.
Kode program untuk membuat tampilan halaman materi aplikasi dapat dilihat pada Kode Program 4.2.
Kode Program 4.2
Actionscript
Tampilan Menu Materi 1
2 3
4 5
6 7
8 9
10 11
12 13
14 15
16 17
18 19
onrelease{ nextFrame;
} onrelease{
prevFrame; }
onClipEventmouseMove{ this.play;
} onClipEventmouseDown{
_parent.nextFrame; }
onClipEvent enterFrame { Radians = Math.atan2_root._ymouse-this._y, _root._xmouse-
this._x; Degrees = Math.roundRadians180Math.PI;
_root.yChange = Math.round_root._ymouse-this._y; _root.xChange = Math.round_root._xmouse-this._x;
this._rotation = Degrees+90;
}
Penjelasan dari Kode Program 4.2 adalah: Perintah baris 1-3 menampilkan
button
untuk menuju ke
frame
berikutnya
next
. Perintah baris 4-6 menampilkan
button
untuk menuju ke
frame
sebelumnnya
prev
. Perintah baris 7-12 adalah
actionscript
yang berfungsi untuk memutar animasi rangka.
Perintah baris 13-19 untuk membuat animasi pada gerakan sendi.
4.2.4 Implementasi Menu Latihan
