Top Banner
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 Gambar 3.1 Struktur Tampilan
19

BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

Jun 23, 2021

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

Gambar 3.1 Struktur Tampilan

Page 2: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

Page 3: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 4: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 5: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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”

Page 6: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 7: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 8: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 9: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

40

Gambar 3.9 Tampilan Desain icon

Gambar 3.10 Tampilan pembuatan frame

Page 10: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

41

Gambar 3.11 Tampilan pembuatan rangka

Gambar 3.12 Tampilan pembuatan Organ Dalam

Page 11: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 12: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

Page 13: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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.

Page 14: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

Button Organ Dalam

Button Organ Dalam

Button Organ Dalam

on (release)

{gotoAndPlay(3);}

on (release)

{gotoAndPlay(4);}

on (release)

{gotoAndPlay(8);}

Page 15: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

Button Bagian Rangka

Button Fungsi Tulang

Button Bentuk Tulang

on (release)

{gotoAndPlay(5);}

on (release)

{gotoAndPlay(6);}

on (release)

{gotoAndPlay(7);}

on (release)

{gotoAndPlay(8);}

Page 16: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

Button Siste organ

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:

on (release)

{gotoAndPlay(9);}

on (release)

{gotoAndPlay(10);}

Page 17: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

on (release)

{gotoAndPlay(2);}

on (release) {

jumlah_frame--;

gotoAndStop(array_frame[jumlah_frame]

);

}

Page 18: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

49

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

_root.jumlahFrame = 31;

_root.jumpFrame = [];

gotoAndStop(2);

}

Page 19: BAB III PERANCANGAN SISTEM 3.1 Ruang lingkup aplikasi...dengan menggunakan Corel Draw X5dan Macromedia Flash 8 Professional. 40 Gambar 3.9 Tampilan Desain icon Gambar 3.10 Tampilan

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

on (release) {gotoAndPlay(1);}