BAB 3
PERANCANGAN SISTEM
3.1 Gambaran Umum Sistem Perancangan
Secara umum perancangan sistem ini adalah untuk membuat sebuah aplikasi game kuis edukasi menggunakan Maacromedia Flash 8 untuk membantu anak dalam
mengerjakan soal-soal. Program ini dikemas secara userfriendly baik design tampilan warnanya maupun letak tool-tool aplikasi ini agar anak bisa menyukai
tampilannya, mau berlama-lama menggunakan aplikasi dan memudahkan dalam penggunaan aplikasi.
Aplikasi ini merupakan pemaparan tentang program yang telah dibuat agar program lebih mudah dimengerti. Program aplikasi ini dirancang untuk kalangan
anak-anak dalam pembelajar dan bermain game. Maka kesesuaian tampilannya, di design seunik mungkin agar anak menyukai aplikasi game kuis ini.
Perancangan sistem dipergunakan untuk menyajikan sebuah program menjadi sebuah sistem yang dapat mempermudah kerja manusia. Program ini
dapat dipergunakan menggunakan PC sehingga user dapat dengan mudah menggunakannya untuk memainkan game dan menyelesaikan soal nya. Action
script yang digunakan untuk program ini adalah disimpan dalam note pad.
Universitas Sumatera Utara
3.2 Algoritma
Pengertian Algoritma adalah susunan yang logis dan sistmatis untuk memecahkan suatu masalah atau untuk mencapai tujuan tertentu. Dalam dunia komputer,
Algortima sangat berperan penting dalam pembangunan suatu software. Dalam dunia sehari-hari, mungkin tanpa kita sadari Algoritma telah masuk dalam
kehidupan kita. Algoritma merupakan langkah-langkah yang disusun secara tertulis dan
berurutan untuk menyelesaikan suatu masalah.
Sedangkan Algoritma Pemograman adalah langkah-langkah yang ditulis secara berurutan untuk
menyelesaikan masalah pemograman komputer. Dalam menuliskan pemograman sederhana, algoritma merupakan langkah pertama yang ditulis sebelum
menuliskan program. Algoritma berhubungan dengan sistem kerja komputer memiliki brainware, hardware, dan software.
3.2.1 Interface Menu Utama Program Aplikasi
Diawal program aplikasi Macromedia Flash 8 ini mempunyai beberapa menu- menu dan beberapa toolbar yang tertuju kepada user. Pada Menu file terdapat
pilihan new, disinilah kita akan memulai animasi nya. Berikut akan dijelaskan langkah-langkah untuk membuat game kuis nya :
1. Pertama-tama kita membuat tiga scene pada aplikasi ini yaitu, scene tampilan
awal, scene materi, scene latihan dan scene profil.
2. Untuk scene tampilan awal, kita akan membuat wallpaper dari game kuis ini.
Kita harus mengusahakan tampilan awalnya semenarik mungkin. 3.
Caranya klik File pilih ImportImport to library. Pilih gambar background yang telah kita simpan sebelumnya.
Universitas Sumatera Utara
4. Seret gambar dari kotak Library dan sesuaikan dengan ukuran stage.
5. Kemudian gunakan Text tool pada properties pilih static text untuk
memasukkan kata-kata selamat datang di game, lalu gunakan kembali text tool dinamic text untuk membuat kotak userpengguna.Untuk pilihan menu
Mulai, kita gunakan Rectangle tool untuk membuat kotak nya. Caranya yaitu pilih Rectangle tool lalu bentuk persegi sebanyak dua buah. Klik kanan pada
kotak persegi itu, Convert to symbol, kemudian pilih button. Jangan lupa masukkan text didalamnya dengan Text tool.
6. Kita bisa melihat contohnya seperti gambar berikut.
Gambar 3.1 Perancangan background game
Universitas Sumatera Utara
7. Untuk frame kedua kita akan membuat tiga menu utama tadi yaitu Materi,
Latihan dan Profil sehingga ketika di klik akan memunculkan data seperti yang di klik.
8. Seperti langkah sebelumnya, kita pilih text toolA untuk mengetik text nya
menjadi Materi, Latihan dan Profil. 9.
Pilih pada text lalu gunakan selection tool, untuk membuat text Materi ini menjadi button. Pada text Materi yang dipilih tadi tekan F8 pilih button lalu
OK. Jangan lupa memasukkan action script nya.
Gambar 3.2 Convert to symbol
10. Untuk text Latihan dan text Profil juga dilakukan dengan cara yang sama
pada langkah yang sudah dijelaskan tadi.
11. Kemudian pada scene materi, kita membuat sebuah tulisan berupa ilmu
pengetahuan yang menjadi bahan bacaan untuk user. Dapat juga dilengkapi dengan gambar yang membuatnya semakin menarik.
Universitas Sumatera Utara
12. Kita dapat melihat tampilannya seperti berikut.
Gambar 3.3 Perancangan Materi
13. Di dalam gambar terdapat dua button yaitu amerika serikat dan Belanda.
Untuk membuatnya, pilih Text tool A ketik text kemudian pilih selection tool dan tekan F8 untuk pilihan button nya.
14. Selanjutnya pada scene Latihan, kita membuat delapan frame.
15. Frame pertama merupakan tampilan awal dari game kuis ini. Dimana pada
tampilan awal ini user diminta untuk memasukkan nama untuk ditampilkan ke frame hasil latihan.
16. Untuk frame kedua, klik kanan pada frame pilih Insert Blank key frame,
maka hanya terdapat layar kosong. Dengan cara yang sama pilih background untuk frame kedua tersebut. Untuk frame soal dibutuhkan empat kotak untuk
jawaban. Satu diantara empat kotak tersebut merupakan jawaban yang benar dari soal. Untuk jawaban yang benar akan dimasukkan action script seperti
ini.
Universitas Sumatera Utara
17. Perhatikan gambar di bawah ini.
Gambar 3.4 Perancangan soal
18. Untuk masing-masing jawaban terdapat action script untuk menentukan skor
nya. 19. Untuk jawaban yang benar, klik kanan kemudian tekan F9 untuk memasukkan
action scriptnya. Perhatikan gambar berikut.
Gambar 3.5 Action script untuk jawaban benar
Universitas Sumatera Utara
19. Jangan lupa memasukkan action script seperti langkah-langkah sebelumnya
pada jawaban yang salah.
Gambar 3.5 Action Script untuk jawaban salah
20. Jika diperhatikan, sebenarnya semua frame yang dibuat mempunyai cara
yang percis sama, jadi sangat memudahkan kita untuk mencoba membuatnya.
Universitas Sumatera Utara
21. Dalam kasus ini, penulis hanya membuat 5 soal saja untuk percobaan, jadi
untuk frame soal selanjutnya tidak perlu dijelaskan lagi karna langkah-nya persis sama dengan sebelumnya.
22. Langkah selanjutnya, yaitu membuat frame skor, dimana dalam frame ini
nantinya akan menunjukkan kemampuan user dalam bermain. Yang berbeda dalam frame ini adalah ketika membuat kolom skor-nya, Text tool yang
digunakan yaitu dynamic text yaitu text yang dapat berubah-ubah nilainya. Sedangkan frame yang lain menggunakan static text yaitu tetap.
Gambar 3.6 Perancangan skor
Universitas Sumatera Utara
23. Langkah terakhir yaitu frame untuk Profil dimana di dalam frame ini akan
ditampilkan identitas penulis yang telah membuat aplikasi ini.
Gambar 3.7 Perancangan frame profil
Universitas Sumatera Utara
BAB 4
HASIL DAN PEMBAHASAN
4.1 Konfigurasi Akhir Progam
Setelah proses pembuatan program selesai, supaya bisa digunakan atau dimainkan maka, selanjutnya diperlukan proses pengujian program yang bertujuan sebagai
berikut:
1. Untuk mengetahui apakah program yang telah dibuat dapat bekerja sesuai
dengan yang diinginkan. 2.
Untuk mengetahui apakah komponen-komponen yang telah dibuat dapat berfungsi sesuai dengan prosedur yang diinginkan.
3. Memeriksa apakah terdapat kesalahan pada source code.
4. Untuk mengetahui apakah program telah efektif dan efisien.
4.2 Pengujian Program Apabila program telah selesai maka program ini harus decompile atau
diujikan apakah program dapat bekerja sesuai dengan yang diinginkan. Jika semua form dapat bekerja dengan baik sesuai yang kita harapkan, maka program
bisa digunakan.
Universitas Sumatera Utara
4.3 Tampilan Program 4.2.1
Kategori