32
BAB III
PERANCANGAN SISTEM
3.1
Ruang lingkup aplikasi
Berdasarkan kebutuhan dari pengguna, pembuatan Animasi ini ditujukan kepada masyarakat yang membutuhkan terutama anak-anak pelajar (SD).
3.2
Struktur tampilan
3.3
Lembar Kerja Tampilan
Perancangan ini menggunakan software bantuan macromedia flas 8 pofessional yang dibuat dari animasi dan pengkodeannya.
Susuna LKT di bawah ini terdiri dari : a. Coding pembuatan aplikasi. b. Cara pembuatan Aplikasi c. Sub folder Aplikasi.
3.3.1 Form tampilan intro
Form Home berisi tentang loading atau intro aplikasi saat pertama dijalankan
34
3.3.2 Form tampilan Kategori
Form ini berisi empat tombol pilihan yaitu kerangka, organ dalam, soal dan close.
Gambar 3.3 Tampilan kategori
3.3.3 Form tampilan kerangka
Gambar 3.4 Tampilan kerangka
3.3.4 Form tampilan organ dalam
36
Gambar 3.5 Tampilan Organ Dalam
3.3.5 Form tampilan soal
Form ini menampilkan soal yang terdiri dari 30 soal yang hanya dikeluarkan 10 secara acak, setelah user
Gambar 3.6 Tampilan soal
3.3.6 Form tampilan soal 1-10
38
Gambar 3.7 Tampilan soal 1-10
3.3.7 Form tampilan Hasil
Form ini menampilkan keterangan hasil/sekor mulai dari benar, salah, dan nilai setelah user menjawab sepuluh soal yang telah diberikan secara acak lalu disini juga menampilkan hasil keterangan LULUS/TIDAK.
Gambar 3.8 Tampilan Hasil
3.3.8 Desain Icon
40
Gambar 3.9 Tampilan Desain icon
Gambar 3.11 Tampilan pembuatan rangka
42
Gambar 3.13 Tapilan soal pilihan ganda
3.3.9 Membuat AplikasiKerangka dan Organ Tubuh
Untuk pembuatan aplikasi menggunakan Macromedia Flash 8 dengan memasukkan semua elemen yang dibutuhkan seperti gambar, teks dan suara. Proses pembuatan dan editing obyek gambar menggunakan CorelDRAW X5.
3.3.10 Membuat Button Yang Terdapat Pada Setiap
Layer
Gambar 3.14 Tampilan Pembuatan button
a. Setelah semua proses editing selesai maka selanjutnya kita akan melanjutkan proses Eksport Gambar yang telah kita edit dengan cara pilih semua.
b. Lalu pilih Export atau Ctrl+E maka akan ada tampilan Export, Format yang dipakai adalah PNG, centang Selected Only, pilih lokasinya dan klik Export
44
mencetak setiker berukuran kecil maka diisi 200, klik ok .
Gambar 3.15 Tampilan Convert Bitmap
3.3.11 Membuat Button layer Kategori
Button yang terdapat dalam layer kategori ini ada tiga yaitu Button Kerangka, Button Organ Dalam, Soal yang memiliki keterangan pada setiap masing-masing buttonnya, Cara membuatnya:
a. Masukkan icon yang sudah di format ke PNG, kemudian Conver To Symbol kemudian pilih Button.
b. Klik button tersebut, kemudian ketikan pada Action Script sebagai berikut :
46
3.3.12 Membuat Button layer Kerangka
Didalam layer kerangka ini terdapat empat button yaitu button fungsi kerangka, bagian kerangka, fungsi tulang, bentuk tulang, cara membuatnya:
a. Masukkan icon yang sudah di format ke PNG, kemudian Conver To Symbol kemudian pilih Button.
b. Klik button tersebut, kemudian ketikan pada Action Script sebagai berikut :
3.3.13 Membuat Button layer Organ Dalam Action Script sebagai berikut :
Button Organ tubuh manusia
Button Siste organ
3.3.14 Membuat Button Mulai pada masing-masing
layer
48
a. Masukkan icon yang sudah di format ke PNG, kemudian Conver To Symbol kemudian pilih Button. b. Klik button tersebut, kemudian ketikan pada Action
Script sebagai berikut :
Button MULAI pada layer Home
Gambar 3.16 Button mulai
Button mulai pada layer Evaluasi
Gambar 3.17 Button mulai
Button main lagi pada layer akhir/hasil
Gambar 3.18 Button mulai
3.3.15 Membuat Button kembali pada
masing-masing layer
Selanjutnya membuat button kembali yang terdapat pada masing-masing layer yang pertama pada layer kategori kedua pada layer kerangka dan yang ketiga terdapat pada layer Organ dalam, cara membuat:
a. Masukkan icon yang sudah di format ke PNG, kemudian Conver To Symbol kemudian pilih Button.
b. Klik button tersebut, kemudian ketikan pada Action Script sebagai berikut :
on (release) {
50
Button yang terdapat pada layer kategori
Button yang terdapat pada layer kerangka
Button yang terdapat pada layer organ dalam on (release) {gotoAndPlay(1);}
on (release) {gotoAndPlay(1);}
