T0 562012063 BAB III
BAB III
PERANCANGAN SISTEM
3.1
Analisa Kebutuhan
Berdasarkan kebutuhan dari pengguna, pembuatan
Animasi ini ditujukan kepada siswa dan masyarakat yang
masih banyak membutuhkan informasi tentang berbagai
gambaran tentang bencana alam, dan cara mengantisipasi
kejadian tersebut jika terjadi sewaktu-waktu di daerah
mereka.
Media animasi adalah salah satu media yang
mudah dipahami dan diterima oleh masyarakat, karena di
dalamnya berisikan pembelajaran tentang berbagai macam
bencana alam yang dikemas dengan menarik.
Perangkat lunak sistem atau sistem operasi
merupakan software yang berfungsi melakukan operasi
yang mengurusi tentang segala aktifitas komputer seperti
mendukung operasi sistem aplikasi dan mengendalikan
semua perangkat komputer agar dapat berjalan selaras
dengan fungsinya.untuk menjalankan animasi ini di
butuhkan perangkat komputer dengan spesifikasi minimal
sebagai berikut, P4 2.8Ghz, Monitor LG E2241, RAM 2GB,
VGA 6600 GT 512 MB 128 BIT AGP, DVD WRITER
MODEL SH-222.
12
3.2 Storyboard
Berikut ini adalah perancangan animasi pengenalan
berbagai kejadian alam.
a. Tampilan animasi awal
Gambar 3.1 tampilan tampilan awal
Keterangan:
A: Pada tampilan awal terdapat loading bar yang
dilanjutkan animasi kedua.
13
b. Desain animasi kedua
Gambar 3.2 Design animasi kedua
Keterangan:
A: menampilkan judul Pengenalan Berbagai Kejadian
Alam yang berubah warna, merah, biru ,merah hati, hijau,
dan kuning secara bergantian
B: berisi teks nama
C: tombol button untuk melanjutkan ke tampilan
berikutnya.
14
c. Desain animasi ketiga
Gambar 3.3 Design animasi ketiga
Keterangan:
A: menampilkan animasi gambar profesor yang berbicara
dan menjadi penyambut dari animasi ini.
B: berisi button home yang berbentuk gambar rumah
berwarna merah.
C: berisi button close yang berbentuk silang, dan
berfungsi untuk mengakhiri animasi.
15
d. Tampilan menu awal
Gambar 3.4 Design tampilan home
Keterangan:
A: berisi button judul Tanah yang menampilkan submenu
pergeseran normal, seisme tanah, seisme gempa, patahan,
dan pusat gempa.
B: berisi button judul Inti Bumi menampilkan bagianbagian dari inti bumi beserta pengertiannya.
C: berisi button judul Efek menampilkan animasi efek
dari bencana yang ditimbulkan.
D: berisi button judulGempa Bumi yang menampilkan
gambar gempa bumi dengan pengertiannya.
E: berisi button judul tips yang menampilkan beberapa
tips jika tiba-tiba terjadi bencana alam disekitar kita.
16
F: berisi button judul latihan yang menampilkan soalsoal,sebagai pembelajaran untuk siswa.
G: berisi button judul tentang, yaitu berisi pengertian
tentang proses terbentuknya bumi, dan teori-teori dari
para ahli.
H: berisi button home yang berbentuk gambar rumah
berwarna merah .
I: berisi button close yang berbentuk silang, dan berfungsi
untuk mengakhiri animasi.
e. Tampilan submenu
Gambar 3.5 Design tampilan submenu
17
Keterangan:
A. menampilkan button judul Pergeseran Normal jika di
klik akan menampilkan animasi terkait dengan judul
beserta pengertiannya.
B. berisi button judul Seisme Tanah yang menampilkan
animasi
terkait
dengan
judul
tersebut
beserta
pengertiannya.
C. berisi button judul Seisme Gempa yang menampilkan
animasi
terkait
dengan
judul
tersebut
beserta
pengertiannya.
D. berisi button judul Patahan yang menampilkan
animasi
terkait
dengan
judul
tersebut
pengertiannya.
E. Menampilkan animasi gambar pusat geempa.
18
beserta
g. Tampilan pengertian
Gambar 3.7 Design pengertian
Keterangan:
A: berisi teks pengertian dari tombol button yang di tekan
yang terkait dengan judul.
B: berisi button berbentuk panah dengan posisi berbalik
arah berwarna biru, yang berfungsi untuk kembali ke
tampilan sebelumnya.
20
h. Tampilan Inti umi
Gambar 3.8 Design tampilan Inti Bumi
Keterangan:
A: menampilkan bentuk belahan bumi sederhana yang di
masing-masing lapisan bumi adalah button yang di
dalamnya berisi pengertian dari lapisan tersebut.
B: berisi animasi teks judul Inti Bumi berwarna merah.
C: berisi button berbentuk panah dengan posisi berbalik
arah berwarna biru, yang berfungsi untuk kembali ke
tampilan sebelumnya.
21
i. Tampilan Efek yang terjadi
Gambar 3.9 Design tampilan efek
Keterangan:
A: menampilkan animasi bergerak yang terkait dengan
judul tersebut.
B: berisi button berbentuk panah yang posisinya kearah
kiri dan berwarna biru yang befungsi untuk kembali ke
menu sebelumnya.
C: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
befungsi
untuk
melanjutkan ke tampilan berikutnya.
D: berisi button berbentuk bintang dan menunjukkan
pengertian apabila di tekan.
22
j. Tampilan gambar dan pengertian
Gambar 3.10 Design gambar dan pengertian
Keterangan:
A: menampilkan gambar tentang bencana alam
B: berisi teks pengertian dari gambar disamping.
C: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
melanjutkan ke tampilan berikutnya.
23
befungsi
untuk
k. Tampilan Tentang
Gambar 3.11 Design Tentang
Keterangan:
A: menampilkan pengertian tentang bencana alam, proses
terbentuknya bumi, dan teori-teori dari para ahli.
B: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
melanjutkan ke tampilan berikutnya.
24
befungsi
untuk
l. Tampilan Soal Latihan
Gambar 3.12 Design Soal Latihan
Keterangan:
A: berisi soal-soal latihan bersifat isian
B: berisi kolom yang berfungsi sebagai tempat mengisi
jawaban, jika jawaban salah disamping label teks akan
ada tanda silang dan centang jika benar.
C: berisi teks nilai yang di dapatkan setelah mencoba
mmengisi soal-soal tersebut.
D: berisi button reset untuk mengosongkan label jawaban
di atas.
E:
berisi
button
koreksi
mengeksekusi jawaban di atas.
25
yang
berfungsi
untuk
F: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
befungsi
untuk
melanjutkan ke tampilan berikutnya.
3.3
Jaringan Semantik Tampilan
T1
T3
START
T9
BACK
TENTANG
GEMPA BUMI
BACK
T2
BACK
LATIHAN
INTI BUMI
BACK
T4
T8
BACK
EFEK
TIPS
BACK
BACK
TANAH
T7
T5
T6
BACK
SEISME
GEMPA
T10
BACKSEISME
TANAH
PERGESERAN
NORMAL
BACK
T11
T12
Gambar 3.13 Jaringan Semantik tampilan
26
Keterangan:
T1 : Tampilan Awal
T2 : Tampilan Menu utama
T3 : Tampilan Menu Tanah
T4 : Tampilan Menu Inti Bumi
T5 : Tampilan Menu Efek
T6 : Tampilan Menu Gempa Bumi
T7 : Tampilan Menu Tips
T8 : Tampilan Menu Latihan
T9 : Tampilan Menu Tentang
T10 : Tampilan Menu Seisme Gempa
T11 : Tampilan Menu Seisme Tanah
T12 : Tampilan Pergeseran Normal
PERANCANGAN SISTEM
3.1
Analisa Kebutuhan
Berdasarkan kebutuhan dari pengguna, pembuatan
Animasi ini ditujukan kepada siswa dan masyarakat yang
masih banyak membutuhkan informasi tentang berbagai
gambaran tentang bencana alam, dan cara mengantisipasi
kejadian tersebut jika terjadi sewaktu-waktu di daerah
mereka.
Media animasi adalah salah satu media yang
mudah dipahami dan diterima oleh masyarakat, karena di
dalamnya berisikan pembelajaran tentang berbagai macam
bencana alam yang dikemas dengan menarik.
Perangkat lunak sistem atau sistem operasi
merupakan software yang berfungsi melakukan operasi
yang mengurusi tentang segala aktifitas komputer seperti
mendukung operasi sistem aplikasi dan mengendalikan
semua perangkat komputer agar dapat berjalan selaras
dengan fungsinya.untuk menjalankan animasi ini di
butuhkan perangkat komputer dengan spesifikasi minimal
sebagai berikut, P4 2.8Ghz, Monitor LG E2241, RAM 2GB,
VGA 6600 GT 512 MB 128 BIT AGP, DVD WRITER
MODEL SH-222.
12
3.2 Storyboard
Berikut ini adalah perancangan animasi pengenalan
berbagai kejadian alam.
a. Tampilan animasi awal
Gambar 3.1 tampilan tampilan awal
Keterangan:
A: Pada tampilan awal terdapat loading bar yang
dilanjutkan animasi kedua.
13
b. Desain animasi kedua
Gambar 3.2 Design animasi kedua
Keterangan:
A: menampilkan judul Pengenalan Berbagai Kejadian
Alam yang berubah warna, merah, biru ,merah hati, hijau,
dan kuning secara bergantian
B: berisi teks nama
C: tombol button untuk melanjutkan ke tampilan
berikutnya.
14
c. Desain animasi ketiga
Gambar 3.3 Design animasi ketiga
Keterangan:
A: menampilkan animasi gambar profesor yang berbicara
dan menjadi penyambut dari animasi ini.
B: berisi button home yang berbentuk gambar rumah
berwarna merah.
C: berisi button close yang berbentuk silang, dan
berfungsi untuk mengakhiri animasi.
15
d. Tampilan menu awal
Gambar 3.4 Design tampilan home
Keterangan:
A: berisi button judul Tanah yang menampilkan submenu
pergeseran normal, seisme tanah, seisme gempa, patahan,
dan pusat gempa.
B: berisi button judul Inti Bumi menampilkan bagianbagian dari inti bumi beserta pengertiannya.
C: berisi button judul Efek menampilkan animasi efek
dari bencana yang ditimbulkan.
D: berisi button judulGempa Bumi yang menampilkan
gambar gempa bumi dengan pengertiannya.
E: berisi button judul tips yang menampilkan beberapa
tips jika tiba-tiba terjadi bencana alam disekitar kita.
16
F: berisi button judul latihan yang menampilkan soalsoal,sebagai pembelajaran untuk siswa.
G: berisi button judul tentang, yaitu berisi pengertian
tentang proses terbentuknya bumi, dan teori-teori dari
para ahli.
H: berisi button home yang berbentuk gambar rumah
berwarna merah .
I: berisi button close yang berbentuk silang, dan berfungsi
untuk mengakhiri animasi.
e. Tampilan submenu
Gambar 3.5 Design tampilan submenu
17
Keterangan:
A. menampilkan button judul Pergeseran Normal jika di
klik akan menampilkan animasi terkait dengan judul
beserta pengertiannya.
B. berisi button judul Seisme Tanah yang menampilkan
animasi
terkait
dengan
judul
tersebut
beserta
pengertiannya.
C. berisi button judul Seisme Gempa yang menampilkan
animasi
terkait
dengan
judul
tersebut
beserta
pengertiannya.
D. berisi button judul Patahan yang menampilkan
animasi
terkait
dengan
judul
tersebut
pengertiannya.
E. Menampilkan animasi gambar pusat geempa.
18
beserta
g. Tampilan pengertian
Gambar 3.7 Design pengertian
Keterangan:
A: berisi teks pengertian dari tombol button yang di tekan
yang terkait dengan judul.
B: berisi button berbentuk panah dengan posisi berbalik
arah berwarna biru, yang berfungsi untuk kembali ke
tampilan sebelumnya.
20
h. Tampilan Inti umi
Gambar 3.8 Design tampilan Inti Bumi
Keterangan:
A: menampilkan bentuk belahan bumi sederhana yang di
masing-masing lapisan bumi adalah button yang di
dalamnya berisi pengertian dari lapisan tersebut.
B: berisi animasi teks judul Inti Bumi berwarna merah.
C: berisi button berbentuk panah dengan posisi berbalik
arah berwarna biru, yang berfungsi untuk kembali ke
tampilan sebelumnya.
21
i. Tampilan Efek yang terjadi
Gambar 3.9 Design tampilan efek
Keterangan:
A: menampilkan animasi bergerak yang terkait dengan
judul tersebut.
B: berisi button berbentuk panah yang posisinya kearah
kiri dan berwarna biru yang befungsi untuk kembali ke
menu sebelumnya.
C: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
befungsi
untuk
melanjutkan ke tampilan berikutnya.
D: berisi button berbentuk bintang dan menunjukkan
pengertian apabila di tekan.
22
j. Tampilan gambar dan pengertian
Gambar 3.10 Design gambar dan pengertian
Keterangan:
A: menampilkan gambar tentang bencana alam
B: berisi teks pengertian dari gambar disamping.
C: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
melanjutkan ke tampilan berikutnya.
23
befungsi
untuk
k. Tampilan Tentang
Gambar 3.11 Design Tentang
Keterangan:
A: menampilkan pengertian tentang bencana alam, proses
terbentuknya bumi, dan teori-teori dari para ahli.
B: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
melanjutkan ke tampilan berikutnya.
24
befungsi
untuk
l. Tampilan Soal Latihan
Gambar 3.12 Design Soal Latihan
Keterangan:
A: berisi soal-soal latihan bersifat isian
B: berisi kolom yang berfungsi sebagai tempat mengisi
jawaban, jika jawaban salah disamping label teks akan
ada tanda silang dan centang jika benar.
C: berisi teks nilai yang di dapatkan setelah mencoba
mmengisi soal-soal tersebut.
D: berisi button reset untuk mengosongkan label jawaban
di atas.
E:
berisi
button
koreksi
mengeksekusi jawaban di atas.
25
yang
berfungsi
untuk
F: berisi button berbentuk panah yang posisinya kearah
kanan
dan
berwarna
biru
yang
befungsi
untuk
melanjutkan ke tampilan berikutnya.
3.3
Jaringan Semantik Tampilan
T1
T3
START
T9
BACK
TENTANG
GEMPA BUMI
BACK
T2
BACK
LATIHAN
INTI BUMI
BACK
T4
T8
BACK
EFEK
TIPS
BACK
BACK
TANAH
T7
T5
T6
BACK
SEISME
GEMPA
T10
BACKSEISME
TANAH
PERGESERAN
NORMAL
BACK
T11
T12
Gambar 3.13 Jaringan Semantik tampilan
26
Keterangan:
T1 : Tampilan Awal
T2 : Tampilan Menu utama
T3 : Tampilan Menu Tanah
T4 : Tampilan Menu Inti Bumi
T5 : Tampilan Menu Efek
T6 : Tampilan Menu Gempa Bumi
T7 : Tampilan Menu Tips
T8 : Tampilan Menu Latihan
T9 : Tampilan Menu Tentang
T10 : Tampilan Menu Seisme Gempa
T11 : Tampilan Menu Seisme Tanah
T12 : Tampilan Pergeseran Normal