T0__BAB III Institutional Repository | Satya Wacana Christian University: Animasi Pengenalan Kerangka dan Organ Tubuh Manusia Beserta Fungsinya T0 BAB III
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
Gambar 3.1 Struktur Tampilan
32
33
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
Gambar 3.2 Gambar Tampilan intro
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
Form ini berisi lima tombol yang berisi
keterangan-keterangan mulai dari fungsi kerangka,
bagian kerangka, fungsi tulang, bentuk tulang, dan
tombol close.
35
Gambar 3.4 Tampilan kerangka
3.3.4
Form tampilan organ dalam
Form ini terdiri dari tiga button dan 8
movie clip yang berisi keterangan-keterangan
mulai dari pengenalan nama organ tubuh dan
fungsi , selain itu juga menampilkan sistem organ.
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
menekan tombol “mulai”
37
Gambar 3.6 Tampilan soal
3.3.6
Form tampilan soal 1-10
Form ini menampilkan tampilan soal yang
memiliki empat buah visible button sebagai jawaban yang
akan dipilih.
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.
Disini juga terdapat satu button “MAIN LAGI” yang akan
kembali ke tampilan “KATEGORI” jika user mengeklik
button tersebut.
39
Gambar 3.8 Tampilan Hasil
3.3.8
Desain Icon
Hal yang dilakukan sebelum pembuatan aplikasi
pembelajaran ini adalah membuat desain frame, desain
kerangka, desain organ dalam dan disain tampilan soal
dengan menggunakan Corel Draw X5dan Macromedia
Flash 8 Professional.
40
Gambar 3.9 Tampilan Desain icon
Gambar 3.10 Tampilan pembuatan frame
41
Gambar 3.11 Tampilan pembuatan rangka
Gambar 3.12 Tampilan pembuatan Organ Dalam
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
Setelah membuat button yang terdapat pada setiap
layer maka export masing-masing seperti berikut.
43
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
c.
Kemudian ada tampilan Convert to Bitmap,
pastikan Width dan Height sama seperti ukuran
yang akan di export, resolution diisi 100, jika akan
44
mencetak setiker berukuran kecil maka diisi 200,
klik ok .
Gambar 3.15 Tampilan Convert Bitmap
Proses editing gambar menggunakan Corel Draw
X5 untuk merubah atau mengkonvert gambar dari
format *.jpg menjadi format *.png sebelum di-import ke
Macromedia Flash Professional 8.
45
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 :
Button Kerangka
on (release)
{gotoAndPlay(3);}
Button Organ Dalam
Button
Organ Dalam
on (release)
{gotoAndPlay(4);}
Button Organ Dalam
on (release)
{gotoAndPlay(8);}
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 :
Button Fungsi Kerangka
on (release)
{gotoAndPlay(5);}
Button Bagian Rangka
on (release)
{gotoAndPlay(6);}
Button Fungsi Tulang
on (release)
{gotoAndPlay(7);}
Button Bentuk Tulang
on (release)
{gotoAndPlay(8);}
47
3.3.13
Membuat Button layer Organ Dalam
Didalam layer ini terdapat dua button saja yaitu
button Organ tubuh manusia dan button sistem organ,
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 :
Button Organ tubuh manusia
on (release)
{gotoAndPlay(9);}
Button Siste organ
on (release)
{gotoAndPlay(10);}
3.3.14
Membuat Button Mulai pada masing-masing
layer
Didalam aplikasi ini terdapat tiga button
mulai yang terdapat pada layer awal/home lalu
evaluasi dan layer terakhir yaitu layer hasil, dan
setiap button ini memiliki peran yang berbeda karna
di tempatkan di layer yang berbeda pula, cara
membuat:
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
on (release)
{gotoAndPlay(2);}
Button mulai pada layer Evaluasi
Gambar 3.17 Button mulai
on (release) {
jumlah_frame--;
gotoAndStop(array_frame[jumlah_frame]
);
}
49
Button main lagi pada layer akhir/hasil
Gambar 3.18 Button mulai
on (release) {
_root.jumlahFrame = 31;
_root.jumpFrame = [];
gotoAndStop(2);
}
3.3.15
Membuat Button kembali pada masingmasing 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 :
50
Button yang terdapat pada layer kategori
on (release) {gotoAndPlay(1);}
Button yang terdapat pada layer kerangka
on (release) {gotoAndPlay(1);}
Button yang terdapat pada layer organ dalam
on (release) {gotoAndPlay(1);}
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
Gambar 3.1 Struktur Tampilan
32
33
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
Gambar 3.2 Gambar Tampilan intro
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
Form ini berisi lima tombol yang berisi
keterangan-keterangan mulai dari fungsi kerangka,
bagian kerangka, fungsi tulang, bentuk tulang, dan
tombol close.
35
Gambar 3.4 Tampilan kerangka
3.3.4
Form tampilan organ dalam
Form ini terdiri dari tiga button dan 8
movie clip yang berisi keterangan-keterangan
mulai dari pengenalan nama organ tubuh dan
fungsi , selain itu juga menampilkan sistem organ.
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
menekan tombol “mulai”
37
Gambar 3.6 Tampilan soal
3.3.6
Form tampilan soal 1-10
Form ini menampilkan tampilan soal yang
memiliki empat buah visible button sebagai jawaban yang
akan dipilih.
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.
Disini juga terdapat satu button “MAIN LAGI” yang akan
kembali ke tampilan “KATEGORI” jika user mengeklik
button tersebut.
39
Gambar 3.8 Tampilan Hasil
3.3.8
Desain Icon
Hal yang dilakukan sebelum pembuatan aplikasi
pembelajaran ini adalah membuat desain frame, desain
kerangka, desain organ dalam dan disain tampilan soal
dengan menggunakan Corel Draw X5dan Macromedia
Flash 8 Professional.
40
Gambar 3.9 Tampilan Desain icon
Gambar 3.10 Tampilan pembuatan frame
41
Gambar 3.11 Tampilan pembuatan rangka
Gambar 3.12 Tampilan pembuatan Organ Dalam
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
Setelah membuat button yang terdapat pada setiap
layer maka export masing-masing seperti berikut.
43
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
c.
Kemudian ada tampilan Convert to Bitmap,
pastikan Width dan Height sama seperti ukuran
yang akan di export, resolution diisi 100, jika akan
44
mencetak setiker berukuran kecil maka diisi 200,
klik ok .
Gambar 3.15 Tampilan Convert Bitmap
Proses editing gambar menggunakan Corel Draw
X5 untuk merubah atau mengkonvert gambar dari
format *.jpg menjadi format *.png sebelum di-import ke
Macromedia Flash Professional 8.
45
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 :
Button Kerangka
on (release)
{gotoAndPlay(3);}
Button Organ Dalam
Button
Organ Dalam
on (release)
{gotoAndPlay(4);}
Button Organ Dalam
on (release)
{gotoAndPlay(8);}
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 :
Button Fungsi Kerangka
on (release)
{gotoAndPlay(5);}
Button Bagian Rangka
on (release)
{gotoAndPlay(6);}
Button Fungsi Tulang
on (release)
{gotoAndPlay(7);}
Button Bentuk Tulang
on (release)
{gotoAndPlay(8);}
47
3.3.13
Membuat Button layer Organ Dalam
Didalam layer ini terdapat dua button saja yaitu
button Organ tubuh manusia dan button sistem organ,
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 :
Button Organ tubuh manusia
on (release)
{gotoAndPlay(9);}
Button Siste organ
on (release)
{gotoAndPlay(10);}
3.3.14
Membuat Button Mulai pada masing-masing
layer
Didalam aplikasi ini terdapat tiga button
mulai yang terdapat pada layer awal/home lalu
evaluasi dan layer terakhir yaitu layer hasil, dan
setiap button ini memiliki peran yang berbeda karna
di tempatkan di layer yang berbeda pula, cara
membuat:
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
on (release)
{gotoAndPlay(2);}
Button mulai pada layer Evaluasi
Gambar 3.17 Button mulai
on (release) {
jumlah_frame--;
gotoAndStop(array_frame[jumlah_frame]
);
}
49
Button main lagi pada layer akhir/hasil
Gambar 3.18 Button mulai
on (release) {
_root.jumlahFrame = 31;
_root.jumpFrame = [];
gotoAndStop(2);
}
3.3.15
Membuat Button kembali pada masingmasing 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 :
50
Button yang terdapat pada layer kategori
on (release) {gotoAndPlay(1);}
Button yang terdapat pada layer kerangka
on (release) {gotoAndPlay(1);}
Button yang terdapat pada layer organ dalam
on (release) {gotoAndPlay(1);}