12
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
13
3.2 Storyboard
Berikut ini adalah perancangan animasi pengenalan
berbagai kejadian alam.
a. Tampilan animasi awal
Gambar 3.1 tampilantampilan awal
Keterangan:
A: Pada tampilan awal terdapat loading bar yang
14
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
15
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
16
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 bagian-bagian 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.
17
F: berisi button judul latihan yang menampilkan soal-soal,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
18 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 beserta
pengertiannya.
20
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
21
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
22
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
23
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 befungsi untuk
24
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 befungsi untuk
25
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 buttonreset untuk mengosongkan label jawaban
di atas.
E: berisi button koreksi yang berfungsi untuk
26
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 T2 T3 T4 T5 T6 T7 T8 T9 START GEMPA BUMI BACK BACK INTI BUMI BACK BACK BACK BACK BACK EFEK TANAH TIPS LATIHAN TENTANG BACK BACK BACK PERGESERAN NORMAL SEISME TANAH SEISME GEMPA 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 T10
T11 T12