BAB III ANALISIS DAN PERANCANGAN 3.1. Analisis Sistem Perancangan aplikasi ini didasari oleh kebutuhan masyarakat terutama pelatih maupun pemula yang ingin mempelajari teknik gaya dengan mudah. Dengan visualisasi gerakan gaya tentunya user dapat melihat secara langsung simulasi gerakan yang benar. Hal ini tentu dapat membuat proses pembelajaran menjadi lebih mudah dipahami dan dapat diterapkan dengan lebih cepat bagi pemula yang hendak belajar. 3.2. Analisis Kebutuhan Dalam merancang aplikasi penyebaran informasi belajar diperlukan beberapa komponen mendukung terhadapa keberhasilan penelitian yang dilakukan oleh penulis: 1. Perangkat lunak (software) a. Sistem operasi Windows Xp b. Adobe Professional Flash CS5 c. Adobe Photoshop CS3 2. Perangkat keras (hardware) a. Notebook b. RAM 1 GB c. Hard disk d. External hard disk 29
30 3.3. Konsep Konsep yang menjadi pedoman penulis dalam membangun sebuah aplikasi visualisasi gerakan adalah sebagai berikut: Tabel 1. Deskipsi Konsep Aplikasi Program Aplikasi Penyebaran Informasi Belajar Renang dengan Adobe Flash CS5 Pengguna Pelatih dan masyarakat khususnya pemula Gambar Menggunakan file dengan format *.jpg dan *.png Suara Menggunakan file dengan format *.mp3 Animasi Teks Didesain khusus oleh penulis Interaktif Menggunakan actionscript 2.0 3.4. Perancangan 3.4.1 Peta Navigasi Peta navigasi berfungsi untuk merancang aplikasi yang akan dibuat dalam menentukan lokasi pada setiap halaman yang ada. Berikut ini merupakan peta navigasi terhadap program aplikasi penyebaran informasi belajar : Halaman pembuka Profile Halaman animasi gerakan Gaya bebas Gaya punggung Gaya dada Gaya kupu-kupu Quiz Close Gambar 1. Diagram Peta Navigasi
31 3.4.2 Storyboard Storyboard merupakan deskripsi masing-masing tampilan halaman aplikasi yang merupakan gambaran konten dari suatu aplikasi yang dibuat. Komponenkomponen yang dicantumkan berupa gambaran dari objek-objek multimedia yang akan dibuat. Satu halaman storyboard mewakili satu tampilan di layar dalam sebuah aplikasi. Modul : Halaman pembuka Nama Layer : Home Gambar animasi : gaya_bebas.gif Initial pembuat : vin_ascadia_mc Jam : jam_mc Navigasi Tombol next : Menuju ke halaman perkenalan Initial pembuat Gambar animasi Halaman Pembuka Jam Tombol Next Gambar 2. Storyboard Halaman Pembuka Modul Nama Layer Jurusan : Halaman perkenalan : Introduction : introduction_mc : IT.png Logo universitas : logo_mercu.png Tahun Foto profile Nama NIM Navigasi Tombol next : 2012.png : vina.png : nurvina_ahdiani.png : 41508110071.png : Menuju ke halaman perkenalan Jurusan Logo universitas Tahun Halaman Perkenalan : Menuju ke halaman animasi gerakan Foto profile Nama NIM Tombol Next Gambar 3. Storyboard Halaman Perkenalan
32 Tombol 1 Tombol 2 Layar tempat munculnya animasi Tombol 3 Tombol 4 Tombol 5 Halaman Animasi Gerakan Renang Modul Nama Layer Tombol 1 Tombol 2 Tombol 3 Tombol 4 Tombol 5 Navigasi Tombol next : Halaman Animasi Gerakan Renang : Menu : gaya_.png : gaya_bebas_mc, untuk memunculkan animasi gaya bebas : gaya_dada_mc, untuk memunculkan animasi gaya dada : gaya_punggung_mc, untuk memunculkan animasi gaya punggung : gaya_kupu-kupu_mc, untuk memunculkan animasi gaya kupu-kupu : quiz_mc, menuju halaman quiz : Menuju ke halaman perkenalan : Menuju ke halaman animasi gerakan Gambar 4. Storyboard Halaman Animasi Gerakan Renang
33 Modul Nama Layer Score_benar Score_salah Navigasi Tombol close : Halaman quiz : Quiz : judul_quiz No Soal : correct_mc Animasi : incorrect_mc Pilihan Ganda Score Benar Salah : Menuju ke halaman Tombol Close Animasi gerakan Halaman Quiz : Menutup aplikasi Gambar 5. Storyboard Halaman Quiz 3.4.3 Perancangan Antar Muka Visualisasi ini berguna menyampaikan gerakan gaya ditampilkan dalam bentuk animasi. Pengguna atau biasa disebut dengan user dapat melakukan interaksi pada halaman visualisasi, yaitu dengan menekan tombol Next, Back, atau beberapa tombol untuk melihat gerakan yang diinginkan. Adapun bentuk dari visualisasi adalah sebagai berikut: 3.4.3.1 Rancangan Halaman Pembuka Halaman pembuka merupakan halaman yang ditampilkan saat aplikasi pertama kali dijalankan. Pada halaman ini user akan melihat tampilan judul, salah satu animasi gerakan, initial programmer, beserta tombol next. Teks judul dan initial programmer dibuat menjadi sebuah teks grafis dengan animasi agar terlihat lebih menarik. Animasi gerakan sengaja ditampilkan agar menjadi salah satu ciri khas aplikasi dimana aplikasi ini memang dibuat khusus untuk gerakan. Tombol next berfungsi untuk melihat halaman berikutnya setelah halaman utama.
34 GAYA RENANG JAM vin_ascadia Next Gambar 6. Rancangan Halaman Pembuka 3.4.3.2 Rancangan Halaman Perkenalan Halaman kedua adalah halaman perkenalan programmer yang membuat aplikasi. Halaman ini terdiri dari judul, jurusan, logo universitas, tahun, foto profile, Nama, NIM, serta tombol back dan next. berfungsi untuk melihat halaman sebelumnya yaitu halaman permbuka, sedangkan tombol next berfungsi untuk melihat halaman berikutnya yaitu halaman animasi gerakan. Berikut rancangan tampilan halaman perkenalan. Introduction JAM Teknik Informatika Back 2012 Nurvina Ahdiani 41508110071 Next Gambar 7. Rancangan Halaman Perkenalan
35 3.4.3.3 Rancangan Halaman Gerakan Animasi Renang Halaman berikutnya adalah halaman gerakan animasi. Pada halaman inilah inti dari aplikasi yang dibangun, karena pada halaman ini ditampilkan empat macam gaya yaitu gaya dada, gaya punggung atau gaya katak, gaya bebas, dan gaya kupu-kupu. Pengguna (user) dapat melihat gerakan animasi dari sudut pandang tampak samping. Untuk melihat gerakan masing-masing gaya, user dapat menekan tombol masing-masing gaya yang disediakan dalam halaman gerakan animasi. Animasi gerakan akan muncul di samping tombol dan pertama kali user akan melihat animasi gerakan dari tampak samping. Pada halaman ini terdapat pula tombol back dan tombol quiz. berfungsi untuk melihat halaman sebelumnya yaitu halaman perkenalan, sedangkan tombol quiz berfungsi untuk melihat halaman berikutnya yaitu halaman quiz. Berikut rancangan halaman gerakan animasi. halaman ini dibuat dalam teks grafis dengan animasi agar terlihat lebih menarik. dapat berubah-ubah sesuai dengan gaya yang sedang ditampilkan. Jika user menekan tombol gaya bebas, maka judul yang ditampilkan adalah Gaya Bebas, jika user menekan tombol gaya kupu-kupu, maka judul yang ditampilkan adalah Gaya Kupu-kupu, begitupun seterusnya. Gaya Renang Gaya bebas Gaya bebas Gaya bebas Gaya bebas Back Quiz Gambar 8. Rancangan Halaman Gerakan Animasi Renang
36 3.4.3.4 Rancangan Halaman Quiz Halaman ini dibuat dengan tujuan untuk menguji pengetahuan user setelah melihat teknik gaya yang diperlihatkan dalam aplikasi. Cara kerja halaman ini adalah user menjawab sebuah soal yang meminta user menjawab teknik gaya apa yang diperlihatkan dalam animasi yang ditunjukan. Jawaban dipilih dalam pilihan ganda, dimana jika jawaban benar maka score benar akan bertambah (user akan mendapat nilai plus), namun jika jawaban salah makan user akan memdapat nilai minus yang diperlihatkan dalam score salah yang semakin bertambah. Berikut rancangan halaman quiz: Quiz 1 Soal A. Pilihan 1 B. Pilihan 2 C. Pilihan 3 D. Pilihan 4 Benar SCORE Salah Back Close Gambar 9. Rancangan Halaman Quiz Pertanyaan yang diberikan berjumlah 4 (empat) soal. Jika user berhasil menjawab 1 (satu) soal maka user akan mendapatkan point 25 yang ditunjukan dalam score Benar, begitu pun selanjutnya. Namun jika user memilih satu jawaban yang salah maka user akan mendapatkan minus -25 yang ditunjukan dalam score Salah, begitu pun selanjutnya minus akan bertambah sesuai dengan kelipatannya. Selama user belum berhasil mendapat nilai 100, maka akan muncul Silakan coba lagi!. Sebaliknya jika user berhasil mendapat nilai 100, maka akan muncul Selamat, anda berhasil. Dalam halaman ini terdapat tombol Close yang berfungsi untuk menutup aplikasi belajar dengan ekstensi *.swf atau *.exe. Ketika mouse diarahkan ke tombol Close, akan muncul tulisan Thank you kemudian aplikasi belajar akan tertutup setelah user mengklik tombol tersebut.
37 3.4.4 Rancangan Alur Proses (Flow Chart) 3.4.4.1 Flow Chart Program Aplikasi START Halaman pembuka N Next? Y Halaman perkenalan Back Back Next? Y Halaman gerakan animasi N N Pilih tombol? Y Gaya bebas Gaya dada Gaya kupu-kupu Gaya punggung Quiz Animasi Gaya bebas Animasi Gaya dada Animasi Gaya kupu-kupu Animasi Gaya punggung Halaman Quiz Salah Pilih jawaban pada Pilihan Ganda Benar Minus bertambah (-) Score Benar bertambah (+) Score 100? Selamat anda Berhasil Silakan coba lagi Tutup aplikasi? N Y Klik tombol close STOP Gambar 10. Flow Chart Program Aplikasi
38 3.4.4.2 Flow Chart Gaya Bebas START Siapkan posisi be Posisi badan lurus mengambang (seperti posisi tengkurap) Tangan? Tangan kiri Tangan kanan Tangan kiri lurus ke belakang Tangan kanan lurus ke depan Angkat tangan kiri ke arah atas membentuk sudut 70 o Tangan kanan tetap urus ke depan Tangan kiri lurus ke depan Tangan kanan ke arah bawah membentuk sudut 90 o Tangan kiri tetap lurus ke depan Tangan kiri tetap lurus ke depan Gerakan tangan kanan lurus ke belakang Angkat tangan kananke arah atas membentuk sudut 70 o Tangan kiri ke arah bawah membentuk sudut 90 o Tangan kananlurus ke depan STOP Gambar 11. Flow Chart Gaya Bebas
39 3.5. Skenario Black Box Berikut ini adalah scenario Black Box untuk menguji aplikasi belajar ditampilkan dalam tabel berikut ini: Tabel 2. Skenario Black Box Program Aplikasi Belajar Renang No Tombol Lokasi Hasil yang Diharapkan 1 Next Halaman pembuka Menuju halaman perkenalan 2 Next Halaman perkenalan Menuju halaman gerakan animasi 3 Back Halaman perkenalan Kembali ke halaman pembuka 4 Back Halaman gerakan animasi Kembali ke halaman perkenalan 5 Gaya Bebas Halaman gerakan animasi Memperlihatkan animasi gaya bebas 6 Gaya Dada Halaman gerakan animasi Memperlihatkan animasi gaya dada 5 Gya kupu-kupu Halaman gerakan animasi Memperlihatkan animasi gaya kupu-kupu 6 Gaya Punggung Halaman gerakan animasi Memperlihatkan animasi gaya punggung 7 Quiz Halaman gerakan animasi Menuju halaman quiz 8 Pilihan Ganda Halaman quiz Pilihan jawaban saat mengerjakan quiz, jika benar maka score benar akan bertambah (+), jika salah maka score salah yang akan bertambah (-) 9 Close Halaman quiz Menutup aplikasi *.swf atau *.exe