BAB 3
PERANCANGAN SISTEM
3.1 Analisis Perancangan
Analisis perancangan yang dilakukan dalam penulisan tugas akhir ini adalah dengan cara menganalisis bahan-bahan yang telah diperoleh dari berbagai sumber atau
referensi seperti buku maupun internet. Kemudian bahan-bahan tersebut ditampilkan dalam sebuah metode yang menarik dan interaktif melalui aplikasi yang menggunakan
Adobe Flash CS 3.
Analisis perancangan aplikasi tentang kebudayaan daerah ini adalah sebagai berikut:
a. User interface, merupakan bagian dari perangkat lunak yang menyediakan
sarana untuk user pengguna agar dapat berkomunikasi dengan sistem yang dalam tugas akhir ini menggunakan Adobe Flash CS3.
b. Pembuatan desain, merupakan suatu program untuk menciptakan interface
agar dapat menarik perhatian para pengguna.
Universitas Sumatera Utara
3.2 Pemodelan Sistem
Merancang sketsa yang tepat adalah sebuah langkah awal yang dapat dilakukan dalam memulai persiapan sebelum menuangkan ide perancangan. Halaman awal yang
digunakan dalam aplikasi ini terdapat sebuah link untuk menuju halaman selanjutnya. Adapun diagram pohon untuk merancang Aplikasi Kebudayaan Daerah Sumatera
Utara Berbasis Multimedia adalah sebagai berikut:
Perancangan Aplikasi Kebudayaan Daerah Sumatera Utara Berbasis Multimedia
Home
Menu Utama
Rumah Adat Pakaian Adat Alat Musik Lagu Daerah Tebak Gambar
Gambar 3.1 Diagram Pohon Perancangan Aplikasi Kebudayaan Daerah Sumatera Utara Berbasis Multimedia
Universitas Sumatera Utara
3.3 Perancangan Tampilan
3.3.1 Halaman utama
Halaman utama adalah tampilan awal yang pertama kali muncul ketika aplikasi dibuka. Halaman utama ini berisi judul aplikasi yaitu “Aplikasi Kebudayaan Daerah
Sumatera Utara” serta tombol menu yang akan menampilkan kebudayaan-kebudayaan apa saja yang disajikan pada aplikasi ini.
Gambar 3.2 Rancangan Halaman Utama
Keterangan : 1
Running teks judul font Kristen ITC berwarna biru durasi 3 detik 2
Running teks menu font MV Boli berwarna biru durasi 3 detik, berubah warna menjadi merah saat kursor berada di teks dan ukuran membesar.
Judul 1
Menu2
Universitas Sumatera Utara
Dalam halaman utama ini terdapat animasi yaitu judul yang bergerak dan datang dari kiri menuju stage, lalu teks judul berkedap-kedip cepat dan berhenti.
Begitu juga dengan tombol menu yang dibuat dari teks. Tombol menu akan menampilkan halaman menu utama.
3.3.2 Halaman menu
Halaman menu merupakan halaman yang menampilkan menu-menu yang berisi macam-macam kebudayaan daerah Sumatera Utara, yaitu tombol rumah adat, pakaian
adat, alat musik, lagu daerah dan tebak gambar untuk permainan sederhana serta tombol home dan keluar.
Gambar 3.3 Rancangan Halaman Menu
Universitas Sumatera Utara
Keterangan: 1
Gambar yang mewakili masing-masing halaman. 2
Tombol dengan font teks MV Boli warna hitam. Warna berubah menjadi coklat saat kursor berada di tombol dan ukuran membesar serta terdapat sound
effect saat diklik.
Tombol rumah adat, pakaian adat, alat musik, lagu daerah dan tebak gambar memiliki masing-masing gambar di atasnya. Setiap tombol memiliki link. Tombol
rumah adat akan menampilkan menu pilihan rumah adat. Tombol pakaian adat akan menampilkan menu pilihan pakaian adat. Tombol alat musik menampilkan menu
pilihan alat musik. Tombol lagu daerah menampilkan kumpulan lagu daerah. Tombol tebak gambar akan menampilkan sebuah permainan sederhana. Tombol home
menampilkan kembali halaman utama dan tombol keluar akan menutup aplikasi.
3.3.3 Halaman rumah adat
Halaman ini berisi gambar-gambar rumah adat yang terdapat di daerah Sumatera Utara, seperti rumah adat siwaluh jabu dari karo dan lain-lain. Apabila salah satu
gambar rumah adat tersebut diklik, maka akan tampil penjelasan mengenai rumah adat tersebut serta gambarnya.
Universitas Sumatera Utara
Gambar 3.4 Rancangan Halaman Rumah adat
Keterangan: 1
Gambar yang berfungsi sebagai tombol, setiap gambar mewakili rumah adat. Terdapat Sound effect pada saat diklik dan akan muncul keterangan nama
rumah adat jika kursor berada di gambar. 2
Tombol menu berwarna abu-abu dan terjadi sound effect saat diklik.
Terdapat delapan tombol pilihan rumah adat dalam halaman ini dan tombol menu. Setiap tombol memiliki link masing-masing. Tombol rumah adat akan
menampilkan halaman penjelasan mengenai rumah adat yang dipilih. Tombol menu akan menampilkan kembali halaman menu utama aplikasi. Berikut adalah gambar
rancangan tampilan penjelasan rumah adat:
Universitas Sumatera Utara
Keterangan: 1
Seluruh isi halaman bergerak dari kiri.
2 Teks menggunakan font
Kristen ITC berwarna abu- abu.
3 Gambar rumah adat yang
dijelaskan. 4
Tombol berwarna abu-abu dengan teks hitam.
Gambar 3.5 Rancangan Tampilan Penjelasan Rumah Adat
Dalam halaman penjelasan rumah adat terdapat judul di bagian atas yaitu nama rumah adat. Gambar rumah adat yang dipilih terletak di bagian kiri dan teks
penjelasan terletak di bagian kanan. Selain itu terdapat 2 tombol, yaitu tombol kembali dan tombol menu. Tombol kembali akan menampilkan halaman sebelumnya, yaitu
halaman menu pilihan rumah adat dan tombol menu akan menampilkan halaman menu utama.
3.3.4 Halaman pakaian adat
Halaman ini berisi gambar-gambar pakaian adat yang terdapat di daerah Sumatera Utara, yaitu pakaian adat batak Simalungun, Toba, Nias, Pakpak, Mandailing,
Universitas Sumatera Utara
Angkola dan Melayu. Gambar-gambar tersebut merupakan tombol yang apabila salah satu gambar pakaian adat tersebut diklik, maka akan tampil penjelasan mengenai
pakaian adat serta gambarnya. Selain itu terdapat tombol menu yang terletak di sudut kiri bawah.
Gambar 3.6 Rancangan Halaman Pakaian Adat
Keterangan: 1
Gambar yang berfungsi sebagai tombol, setiap gambar mewakili pakaian adat. Terdapat Sound effect pada saat diklik dan akan muncul keterangan nama
pakaian adat jika kursor berada di gambar. 2
Tombol menu berwarna abu-abu dan terjadi sound effect saat diklik.
Universitas Sumatera Utara
Seluruh gambar yang merupakan tombol memiliki link masing-masing. Setiap tombol akan menampilkan penjelasan mengenai pakaian adat yang dipilih. Tombol
menu yang terletak di bagian kiri bawah akan menampilkan halaman menu utama
Keterangan: 1
Seluruh isi halaman bergerak dari kanan.
2 Teks menggunakan font Kristen ITC
berwarna abu-abu. 3
Gambar pakaian
adat yang
dijelaskan. 4
Tombol berwarna abu-abu dengan teks hitam.
Gambar 3.7 Rancangan Tampilan Penjelasan Pakaian Adat
Dalam halaman penjelasan terdapat teks judul, yaitu nama pakaian adat yang akan dijelaskan. Di bagian kiri terdapat gambar pakaian adat dan di bagian kanan teks
penjelasannya. Selain itu terdapat 2 tombol, yaitu tombol kembali dan tombol menu. Tombol kembali akan menampilkan halaman sebelumnya, yaitu halaman menu
pilihan pakaian adat. Tombol menu akan menampilkan halaman menu utama.
Universitas Sumatera Utara
3.3.5 Halaman alat musik
Halaman ini berisi gambar-gambar alat musik yang terdapat di daerah Sumatera Utara. Apabila salah satu gambar alat musik tersebut diklik, maka akan tampil penjelasan
mengenai alat musik serta gambarnya.
Gambar 3.8 Rancangan Halaman Alat Musik
Keterangan: 1
Gambar yang berfungsi sebagai tombol, setiap gambar mewakili alat musik. Terdapat Sound effect pada saat diklik dan akan muncul keterangan nama alat
musik jika kursor berada di gambar. 2
Tombol menu berwarna abu-abu dan terjadi sound effect saat diklik.
Universitas Sumatera Utara
Seluruh gambar yang merupakan tombol memiliki link masing-masing. Setiap tombol akan menampilkan penjelasan mengenai alat musik yang dipilih. Tombol menu yang
terletak di bagian kiri bawah akan menampilkan halaman menu utama. Berikut gambar rancangan tampilan penjelasan alat musik:
Keterangan: 1
Seluruh isi halaman bergerak dari kiri.
2 Teks menggunakan font Kristen
ITC berwarna abu-abu. 3
Gambar pakaian adat yang dijelaskan.
4 Tombol berwarna abu-abu
dengan teks hitam.
Gambar 3.9 Rancangan Tampilan Penjelasan Alat Musik
Dalam halaman penjelasan alat musik, terdapat judul yang merupakan nama alat musik yang terletak di bagian atas. Gambar alat musik terletak di bagian kiri dan
teks penjelasannya di bagian kanan. Selain itu, terdapat tombol kembali dan tombol menu. Tombol kembali akan menampilkan halaman berikutnya, yaitu halaman menu
pilihan alat musik. Sedangkan tombol menu akan menampilkan halaman menu utama.
Universitas Sumatera Utara
3.3.6 Halaman lagu daerah
Halaman lagu daerah berisi daftar lagu-lagu daerah Sumatera Utara. Setiap judul lagu merupakan tombol yang akan menampilkan lirik lagu tersebut. Selain itu terdapat
tombol menu dan tombol MP3. Tombol MP3 akan menampilkan daftar lagu yang dapat diputar dan tombol menu akan menampilkan halaman menu utama.
Gambar 3.10 Rancangan Halaman Lagu Daerah
Keterangan: 1
Teks judul ”Kumpulan Lagu Daerah” berwarna hitam dengan font Kristen ITC 2
Teks judul lagu berfungsi sebagai tombol, setiap judul menampilkan lirik. Teks akan berubah warna menjadi abu-abu jika kursor berada di judul dan
ukuran teks membesar. 3
Tombol menu dan mp3 berwarna abu-abu dengan teks hitam dan terjadi sound effect saat diklik.
Universitas Sumatera Utara
Pada halaman lagu daerah terdapat judul halaman yang terletak di bagian atas. Sebanyak 21 judul lagu daerah dituliskan dalam halaman ini. Setiap judul merupakan
tombol yang akan menampilkan lirik lagu tersebut. Selain itu terdapat tombol mp3 dan tombol menu. Tombol mp3 akan menampilkan halaman yang berisi 7 lagu daerah
yang dapat diputar dengan cara mengklik judul. Untuk menghentikan lagu yang telah diputar, caranya adalah dengan mengklik kembali judul lagu. Tombol menu akan
menampilkan halaman menu utama. Keterangan:
1 Seluruh isi halaman bergerak
dari atas. 2
Teks MV Boli berwarna hitam.
3 Tombol berwarna abu-abu
dengan teks hitam didalamnya dan memiliki sound effect saat
diklik.
Gambar 3.11 Rancangan Tampilan Lirik Lagu
Halaman lirik lagu daerah memiliki 2 tombol, yaitu tombol kembali yang akan menampilkan halaman sebelumnya, yaitu halaman lagu daerah yang berisi judul-judul
lagu dan tombol menu akan menampilkan halaman menu utama.
Universitas Sumatera Utara
Keterangan: 1
Judul halaman, teks dengan font Kristen ITC berwarna
hitam. 2
Judul-judul lagu dengan font MV
Boli hitam
sebagai tombol
yang dapat
memainkan dan
menghentikan lagu dengan cara diklik.
3 Tombol berwarna abu-abu
dengan teks
hitam di
dalamnya. Terdapat sound effect saat diklik.
Gambar 3.12 Rancangan Tampilan Halaman MP3
Halaman MP3 merupakan halaman yang berisi 7 lagu daerah pilihan yang dapat didengarkan oleh user dengan cara mengklik tombol judulnya dan dengan cara
itu juga user dapat menghentikan lagu yang dimainkan. Terdapat tombol kembali yang akan menampilkan halaman lagu daerah yang berisi daftar judul lagu daerah dan
tombol menu untuk menampilkan kembali halaman menu utama.
3.3.7 Halaman tebak gambar
Halaman ini merupakan sebuah permainan sederhana dengan cara menebak gambar- gambar yang tersedia dengan mengikuti pertanyaan yang diberikan. Hasil skor
Universitas Sumatera Utara
tebakan yang telah dimainkan akan mucul apabila user selesai menebak gambar- gambar berdasarkan semua pertanyaan. Dalam halaman ini semua gambar merupakan
tombol, selain itu terdapat tombol main lagi dan tombol menu. Tombol main lagi akan mengulangi permainan tebak gambar dan tombol menu untuk menampilkan kembali
halaman menu utama. Berikut flowchart halaman tebak gambar:
Gambar 3.13 Rancangan Halaman Awal Tebak Gambar
Keterangan: 1
Judul “Tebak Gambar” dengan font Kristen ITC berwarna abu-abu. 2
Tombol untuk memulai permainan berwarna abu-abu, terdapat sound effect saat diklik.
Halaman awal tebak gambar berisi judul halaman yang terletak di bagian atas dan tombol mulai berbentuk lingkaran yang terletak di bagian tengah bawah. Tombol
mulai akan memulai permainan tebak gambar apabila diklik. Berikut gambar rancangan tampilan halaman permainan tebak gambar:
Universitas Sumatera Utara
Keterangan: 1
Teks pertanyaan berwarna hitam dengan font Kristen
ITC. 2
Gambar-gambar sebagai
tombol untuk pilihan jawaban
Gambar 3.14 Rancangan Tampilan Halaman Permainan
Pada halaman tebak gambar terdapat teks pertanyaan di bagian atas dan empat pilihan gambar yang akan dipilih oleh user. Setiap memilih satu gambar dari
pertanyaan yang diberikan, maka akan tampil halaman tebakan berikutnya yang bentuknya sama. Setelah menjawab sepuluh tebakan, maka akan muncul hasil skor
berdasarkan jawaban. Berikut halaman hasil skor tebak gambar:
Keterangan: 1
Jumlah jawaban yang benar. 2
Jumlah jawaban yang salah. 3
Tombol berwarna abu-abu dan memiliki sound effect saat
diklik.
Gambar 3.15 Rancangan Tampilan Halaman Skor Tebak Gambar
Universitas Sumatera Utara
Halaman skor tebak gambar merupakan halaman hasil perolehan nilai yang didapat oleh user yang memainkan tebak gambar. Setelah tebakan berakhir maka
halaman ini akan mucul dengan tampilan jumla benar dan jumlah salah. Selain itu terdapat tombol menu yang akan menampilkan menu utama dan tombol main lagi
yang akan mengulangi permainan tebak gambar.
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Pengertian Implementasi Sistem
Kategori