BAB III ANALISA DAN PERANCANGAN 3.1 Analisis Sistem Dalam sistem perancangan aplikasi pembelajaran renang gaya punggung ini, tahap-tahap yang harus dilakukan adalah tahap spesifikasi model-model analisis pengggambaran activity kemudian dilanjutkan dengan tahap konsep perancangan aplikasi tersebut. Pada tahap pertama penulis menganalisa kebutuhan dasar ayang ada pada system yang akan dibuat, yang biasa dilakukan adalah mempersentasikan suatu masalah, sehingga data tersebut dapat diketahui spesifikasi kebutuhannya. di dalam aplikasi ini penulis mencoba membuat informasi renang yang dapat dijalankan oleh user dengan menggerakkan sebuah mouse untuk menunjukan entity renang yang dibuat oleh penulis. Kemudian user akan mendapatkan informasi mengenai renang gaya punggung. 3.2 Perancangan Aplikasi Dalam konsep perancangan aplikasi renang berbasis animasi untuk memberikan informasi mengenai renang gaya punggung dengan menggabunggan Text, Gambar, Animasi dan Suara yang akan di implementasikan dalam bentuk aplikasi renang dan movie. Aplikasi ini merupakan perancangan yang dapat dibuat oleh masyarakat untuk mengetahui informasi renang gaya punggung. 3.2.1 Perancangan Storyboard Storyboard adalah deskripsi masing-masing tampilan suatu kejadian dan penglihatan yang dijalankan oleh pengguna dengan menampilkan semua objek atau desain multimedia serta komponen-kompenen aplikasi yang akan dibuat, Storyboard digunakan sebagai alat bantu pada tahapan perancangan aplikasi multimedia. Suatu storyboard mewakili satu tampilan di layar monitor. 24
1. Storyboard Tampilan Awal Scene : scene 1 Frame : 1 Gambar : Judul Aplikasi Sound : Sound mp4 1 2 3 4 5 6 7 Navigasi : 1 : Judul Aplikasi 2 : Tombol Keluar 3 : Tempat Kolam Renang 4 : Logo Mercubuana 5 : Tombol Sound 6 : Nama Pembuat 7 : Tombol Next Gambar 3.1 Storyboard Tampilan Awal Pada halaman ini menampilkan teks dan suara. Tampilan awal ini bertujuan untuk menampilkan judul dari aplikasi dan mengantarkan pengguna untuk masuk ke halaman menu utama pada aplikasi. 25
2. Storyboard Menu Utama Scene : scene 1 Frame : 2 Gambar : Kolam Renang, Orang Berenang, Orang Melakukan Pemanasan Animasi : Animasi orang melakukan pemanasan Dan Animasi Orang berjalan Sound : Background Kolam 4 1 5 6 7 Gambar Kolam 2 Renang 8 9 10 3 12 11 13 14 15 Navigasi : 1 : Orang pemanasan 2 : Animasi Orang Renang 3 : Orang berjalan 4 : Sejarah 5 : Pemanasan 6 : Renang Gaya Punggung 7 : Pendinginan 8 : Materi 9 : Video 10 : Profil 11 : Penutup 12 : Tombol Menu Kembali 13 : Tempat Kolam Renang 14 : Nama Pembuat 15 : Tombol Kembali Ke Tampilan Awal Gambar 3.2 Storyboard Menu Utama Pada halaman ini menampilkan animasi, teks, dan suara. Menu Utama ini bertujuan untuk menampilkan Menu-menu Tahap Renang dari aplikasi dan mengantarkan pengguna untuk memilih tombol menu informasi yang berada pada menu utama. 26
3. Storyboard Menu Sejarah Scene : scene 1 Frame : 21-23 Gambar : Sejarah Renang Animasi : - Sound : Sound Button 1 4 2 3 5 Navigasi : 1 : Judul Sejarah Olah raga Renang 2 : Isi Sejarah Renang 3 : Tombol Next 4 : Close Button Tombol Previous 5 : Tombol kembali Gambar 3.3 Storyboard Menu Sejarah I 27
Scene : scene 1 Frame : 23 Gambar : Sejarah Renang II Animasi : - Sound : Sound Button 1 4 2 3 Navigasi : 1 : Judul Sejarah Renang Gaya Punggung 2 : Isi Sejarah Renang 3 : Tombol Previous Menu Utama 4. Close Button Gambar 3.3.1 Storyboard Menu Sejarah II Pada halaman ini menampilkan isi dari menu sejarah, tombol kembali, dan suara. Menu sejarah ini bertujuan untuk menampilkan informasi dari menu sejarah. 28
4. Storyboard Menu Tahap Pemanasan Sebelum Renang Scene : scene 1 Frame : 3 Gambar : Kolam Renang, Orang Melakukan Pemanasan Animasi : Animasi Air Dan Animasi Orang melakukan pemanasan Sound : Background Kolam 7 6 5 1 2 3 4 9 8 Navigasi : 1 : Tombol Play 2 : Tombol Stop 3 : Tombol Pause 4 : Tombol Rewind 5 : Gambar Kolam renang 6 : Animasi Air 7 : Close Button 8 : Kembali Button 9 : Animasi Orang melakukan pemanasan Gambar 3.4 Storyboard Tahap Pemanasan Sebelum Renang 29
Pada halaman ini menampilkan isi dari menu tahap pemanasan sebelum renang, tombol play, tombol stop, tombol pause, tombol rewind, gambar kolam renang, animasi air, close button, kembali button dan animasi orang melakakukan pemanasan. bertujuan untuk menampilkan informasi dari menu tahap pemanasan sebelum renang. 5. Storyboard menu teknik renang gaya punggung Scene : scene 1 Frame : 8 Gambar : Kolam Renang, Dan Orang Berenang Animasi : - Sound : Sound Button 1 11 2 3 4 5 6 7 8 9 10 12 Navigasi : 1 : Judul 2 : Kedalaman 0,5 m 3 : Kedalaman 1 m 4 : Kedalaman 1,5 m 5 : Kedalaman 2 m 6 : Gambar kolam renang 7 : Tombol play 8 : Tombol stop 9 : Tombol pause 10 : Tombol rewind 11 : Close button 12 : Kembali button Gambar 3.5 Storyboard Teknik Renang Gaya Punggung Pada halaman ini menampilkan cara teknik renang gaya punggung bertujuan untuk menampilkan bagaimana melakukan cara pergerakan teknik renang gaya punggung dari informasi aplikasi ini. 30
6. Storyboard menu tahap pendinginan renang Scene : scene 1 Frame : 5 Gambar : Kolam Renang, Orang melakukan pendinginan Animasi : Animasi Air Dan Animasi orang melakukan pendinginan Sound : Sound Button 7 6 5 1 2 3 4 9 8 Navigasi : 1 : Tombol Play 2 : Tombol Stop 3 : Tombol Pause 4 : Tombol Rewind 5 : Gambar Kolam renang 6 : Animasi Air 7 : Close Button 8 : Kembali Button 9 : Animasi Orang melakukan pendinginan Gambar 3.6 Storyboard Tahap Pendinginan Setelah Renang Pada halaman ini menampilkan isi dari menu tahap pendinginan setelah renang, tombol play, tombol stop, tombol pause, tombol rewind, gambar kolam renang, animasi air, close button, kembali button dan animasi orang melakakukan 31
pendinginan. bertujuan untuk menampilkan informasi dari menu pendinginan setelah renan renang. tahap 7. Storyboard menu materi renang gaya punggung Scene : scene 1 Frame : 24 Gambar : Judul, Input nama, Dan Keterangan Animasi : - Sound : Sound Button 5 1 2 3 4 6 Navigasi : 1 :Judul 2 : Inputnama.txt 3 : Keterangan.txt 4 : Button enter 5 : Close button 6 : Kembali button Gambar 3.7 Storyboard Data Pengguna Materi Renang Gaya Punggung 32
Scene : scene 1 Frame : 9-18 Gambar : Gambar soal, Dan Keterangan gambar soal Animasi : - Sound : Sound Button 1 2 3 4 9 5 7 8 6 10 Navigasi : 1 : Salah.txt 2 : Benar.txt 3 : Skor.txt 4 : Soal-soal renang gaya punggung 5 : Pilihan jawaban pertama 6 : Pilihan jawaban kedua 7 : Gambar soal 8 : Keterangan gambar soal 9 : Close button 10 : Kembali button Gambar 3.7.1 Storyboard Menu Materi Renang Gaya Punggung 33
Pada halaman ini menampilkan gambar dan sound. Menu materi renang gaya punggung ini bertujuan untuk menampilkan cara pembahasan materi dari aplikasi renang gaya punggung. Scene : scene 1 Frame : 19 Gambar : Nama, Skor, Keterangan gambar Animasi : - Sound : Sound Button 6 1 2 3 4 5 7 Navigasi : 1 : Nama.txt 2 : Skor.txt 3 : Keterangan.txt 4 : Salah.txt 5 : Benar.txt 6 : Close button 7 : Kembali button Gambar 3.7.2 Storyboard Menu Hasil Skor Materi Renang Gaya Punggung Pada halaman ini menampilkan gambar dan sound. Menu hasil skor materi renang gaya punggung ini bertujuan untuk menampilkan hasil pengisian beberapa soal materi dari aplikasi renang gaya punggung. 34
8. Storyboard menu video renang gaya punggung Scene : scene 1 Frame : 20 Gambar : Judul Dan Video Renang Animasi : - Sound : Sound Button 4 1 2 3 5 Navigasi : 1 : Judul video 2 : Video renang gaya punggung I 3 : Tombol Lanjut 4 : Close button 5. Kembali Button Gambar 3.8 Storyboard Menu Video Renang Gaya Punggung I 35
Scene : scene 1 Frame : 6 Gambar : Judul data diri, Foto mahasiswa Dan Bioadata Animasi : - Sound : Sound Button 4 1 2 3 5 Navigasi : 1 : Judul data diri 2 : Foto mahasiswa 3 : Biodata 4 : Close button 5 : Kembali button Gambar 3.8.1 Storyboard Menu Video Renang Gaya Punggung II Pada halaman ini menampilkan gambar dan sound. Menu video renang gaya punggung ini bertujuan untuk menampilkan informasi gerak renang gaya punggung dari aplikasi dan mengantarkan pengguna untuk memilih tombol menu video renang gaya punggung. 36
9. Storyboard menu data diri Scene : scene 1 Frame : 6 Gambar : Judul data diri, Foto mahasiswa Dan Bioadata Animasi : - Sound : Background Kolam 4 1 2 3 5 Navigasi : 1 : Judul data diri 2 : Foto mahasiswa 3 : Biodata 4 : Close button 5 : Kembali button Gambar 3.9 Storyboard Menu Data diri Pada halaman ini menampilkan gambar dan sound. Menu data diri ini bertujuan untuk menampilkan informasi pembuat aplikasi renang gaya punggung. 37
10. Storyboard menu penutup Scene : scene 1 Frame : 7 Gambar : Text penutup Animasi : - Sound : Sound Button 2 1 3 1.Navigasi : 1 : Terima kasih kpd. 2 : Close button 3 : Kembali button Gambar 3.10 Storyboard Menu Penutup Pada halaman ini menampilkan gambar dan sound. Menu penutup ini bertujuan untuk memberikan informasi aplikasi, telah selesai tahap tahap cara renang gaya punggung. 38
3.2.2 Use Case Diagram Berikut adalah use case dari aplikasi mengenai informasi pembelajaran renang gaya punggung berbasis animasi. Sistem Melihat informasi sejarah Melihat informasi pemanasan renang Melihat informasi pergerakan menyelam Melihat informasi teknik renang Melihat informasi pendinginan renang Top Package::c Melihat informasi materi renang Melihat informasi video Melihat informasi data diri Melihat informasi penutup Gambar 3.11 Use case aplikasi renang gaya punggung berbasis animasi Pada aplikasi ini dapat diidentifikasikan bahwa bahwa actor utama dalam aplikasi ini adalah user (Pengguna), Dari identifikasi actor tersebut, maka akan didapat use case diagram dan beberapa scenario yang memperlihatkan interaksi antara use case dengan actor. 39
Tabel 3.1 adalah deskripsi dari use case yang telah di gambarkan pada gambar User Deskripsi Skenario Masyarakat Umum Pada aplikasi ini user akan mendapatkan informasi pembelajaran renang mengenai renang gaya punggung. 1. Tampilan awal aplikasi 2. User masuk ke dalam menu utama yang terdapat Sembilan tombol 3. System menampilkan informasi dari setiap tombol 4. Pada system terdapat tombol kembali 5. Terdapat tombol keluar untuk menutup aplikasi Kondisi Awal User masuk ke menu utama yang terdapat sembilan tombol, Yaitu : Sejarah, Tahap pemanasan sebelum renang, Tahap pergerakan menyelam kedalam air, Teknik renang gaya punggung, Tahap pendinginan renang, Materi renang gaya punggung, Video renang gaya, Dan Penutup Kondisi Akhir User mendapatkan informasi tentang pembelajaran renang gaya punggung 3.2.3 Perancangan Activity Diagram Activity diagram menggambarkan berbagai aliran aktifitas dalam sistem yang sedang di rancang. Bagaimana masing-masing aliran berawal, decision yang mungkin terjadi, dan bagaimana suatu aktifitas berakhir. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. 40
1. Perancangan Activity Diagram Halaman Menu Utama Aktifitas dimulai ketika pengguna memilih masuk, kemudian sistem akan menampilkan halaman menu utama, aktifitas selanjutnya adalah memilih halaman berikutnya terdiri dari Sejarah, Tahap pemanasan sebelum renang, Tahap pergerakan menyelam kedalam air, Teknik renang gaya punggung, Tahap pendinginan renang, Materi renang gaya punggung, Video renang gaya, Dan Penutup. Kemudian sistem akam menampilkan halaman yang di pilih. Pengguna Sistem Memilih tombol pada menu utama Menampilakan tombol pada menu sejarah, pemanasan, renang gaya punggung, pendinginan, materi, video, profil, penutup Memilih menu yang diinginkan Menampilkan menu yang di pilih Gambar 3.12 Activity Diagram Menu Utama 41
2. Perancangan Activity Diagram Menu Sejarah Aktifitas dimulai ketika pengguna memilih tombol sejarah, kemudian sistem akan menampilkan halaman sejarah, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih sejarah pada menu utama Menampilkan informasi sejarah olahraga renang Memilih tombol lanjut informasi Menampilkan informasi sejarah renang gaya punggung dan tombol kembali menu utama Memilih tombol kembali ke menu utama Gambar 3.13 Activity Diagram Menu Sejarah 42
3. Perancangan Activity Diagram Halaman Menu Tahap Pemanasan Aktifitas dimulai ketika pengguna memilih tombol tahap pemanasan, kemudian sistem akan menampilkan halaman tahap pemanasan, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih tahap pemanasan pada menu utama Menampilkan tombol tahap pemanasan dan tombol lanjut untuk ke menu utama Memilih tombol start, stop, pause, back Menampilkan gerak pemanasan dari tombol yang di pilih Gambar 3.14 Activity Diagram Menu Tahap Pemanasan 43
4. Perancangan Activity Diagram Halaman Menu Renang Aktifitas dimulai ketika pengguna memilih tombol teknik renang, kemudian sistem akan menampilkan halaman teknik renang, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih teknik renang pada menu utama Menampilkan gambar gerak teknik renang Memilih tombol start, stop, pause, back Menampilkan keseluruhan gerak teknik renang gaya punggung dan tombol kembali ke menu utama Memilih tombol kembali ke menu utama Gambar 3.15 Activity Diagram Menu Renang 44
6. Perancangan Activity Diagram Halaman Menu Tahap Pendinginan Aktifitas dimulai ketika pengguna memilih tombol tahap pendinginan, kemudian sistem akan menampilkan halaman tahap pendinginan, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih tahap pendinginan pada menu utama Menampilkan tombol tahap pendinginan dan tombol lanjut untuk ke menu utama Memilih tombol start, stop, pause, back Menampilkan gerak pendinginan dari tombol yang di pilih Gambar 3.16 Activity Diagram Menu Pendinginan 45
7. Perancangan Activity Diagram Halaman Menu Materi Renang Aktifitas dimulai ketika pengguna memilih tombol Materi, kemudian sistem akan menampilkan halaman Materi, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih materi renang pada menu utama Menampilkan isi data sebelum masuk materi Memasukan data untuk masuk materi Menampilkan Materi renang gaya punggung dan memilih tombol next materi berikutnya Mengerjakan materi soal renang Koreksi Jawaban Benar = Benar + 1 Salah = Salah + 1 Menampilkan nilai skor dan tombol kembali ke menu utama Gambar 3.17 Activity Diagram Menu Materi Renang 46
8. Perancangan Activity Diagram Halaman Menu Video Aktifitas dimulai ketika pengguna memilih tombol video, kemudian sistem akan menampilkan tanyangan video, aktifitas selanjutnya adalah memilih tombol next untuk melihat tanyangan video ke 2, aktifitas selanjutnya adalah memilih tombol kembali kemudian sistem akan menampilkan menu utama. Pengguna Sistem Menampilkan video renang 1 dan tombol next untuk video 2 Memilih video pada menu utama Memilih tombol next video 2 Menampilkan video 2 dan tombol kembali ke menu utama Memilih tombol kembali ke menu utama Gambar 3.18 Activity Diagram Menu Video 47
9. Perancangan Activity Diagram Halaman Menu Data Diri Aktifitas dimulai ketika pengguna memilih tombol data diri, kemudian sistem akan menampilkan halaman data diri, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih data diri pada menu utama Menampilkan informasi data diri penulis dan tombol untuk kembali ke menu utama Memilih tombol kembali ke menu utama Gambar 3.19 Activity Diagram Menu Data Diri 48
10. Perancangan Activity Diagram Halaman Menu Penutup Aktifitas dimulai ketika pengguna memilih tombol penutup, kemudian sistem akan menampilkan halaman penutup, aktifitas selanjutnya adalah memilih tombol kembali, kemudian sistem akan menampilkan menu utama. Pengguna Sistem Memilih penutup pada menu utama Menampilkan informasi penutup penulis dan tombol untuk kembali ke menu utama Memilih tombol kembali ke menu utama Gambar 3.20 Activity Diagram Menu Penutup 49
3.2.4 Perancangan Sequence Diagram Sequence diagram bias digunakan untuk menggambarkan scenario atau rangkaian langkah-langkah yang dilakukan sebagai respon dari sebuah event untuk menghasilkan output tertentu. Gambar 3.21 3.22 3.23 merupakan sequence diagram dari aplikasi yang akan dibuat. Menu Utama Sejarah Tahap pemanasan c Akses Menu Utama Menampilkan beranda Memilih menu sejarah Menampilkan menu sejarah Menampilkan tahap pemasan Memilih tahap pemanasan Gambar 3.21 Sequance Diagram Menu Utama, Sejarah, Tahap Pemanasan 50
Teknik Renang Tahap Pendinginan Materi Renang c Masuk teknik renang menjalankan teknik renang keluar teknik renang masuk tahap pendinginan Menjalankan tahap pendinginan keluar tahap pendinginan masuk materi input data Mengerj akan soal Menampilkan hasil nilai Gambar 3.22 sequance diagram menu teknik renang, tahap pendinginan, materi renang 51
video Data Diri Penutup User Masuk menu video Menampilkan video Memilih video melihat video menampilkan video Menampilkan data dari menampilkan data diri Menampilkan penutup Gambar 3.23 Sequance Diagram Menu Tahap Pendinginan, Materi Renang Pada gambar 3.23 3.24 3.25 menggunakan skenario dan langkah-langkah yang dilakukan oleh pengguna dalam menjalankan aplikasi ini. Pada kedua gambar dijelaskan pengguna memasuki menu utama, kemudian pengguna memilih dari sembilan tombol yang menampilkan informasi mengenai renang gaya punggung. 52
3.2 Perancangan Komponen Multimedia Berikut adalah kompenen multimedia yang digunakan penulis dalam perancangan renang berbasis animasi, untuk memberikan informasi renang mengenai renang gaya pungung yaitu: No. Komponen Multimedia Digunakan 1. Text Judul, Isi dari setiap scane, dan tulisan pada setiap tombol. 2. Gambar Background, Kolam Renang, Halaman Matras, dan Orang 3. Suara JAZZ INSTRUMENTAL Music Smooth Bossa Nova Piano Playlist Chill Out Relaxing Soft Latin Musica Mix - YouTube.mp3 Dan Sound Buttom (ptone) 4. Animasi Orang, Orang Berenang, Orang Berjalan, Dan Air Kolam, 3.4 Perancangan Black Box Testing Perancangan aplikasi ini dilakukan dengan menggunakan metode Black Box Testing. Tujuan dari metode Blak Box Testing ini untuk menentukan kesalahan fungsi pada program. 53
Tabel 3.3 Skenario perancangan Black Box Testing No Nama Tes Hasil Yang Di Harapkan 1. Masuk Ke Tampilan Awal Menampilkan Halaman Tampilan Awal 2. Masuk Ke Menu Utama Sejarah, Tahap Pemanasan Sebelum Renang, Tahap Pergerakan Menyelam Kedalam Air, Teknik Renang Gaya Punggung, Tahap Pendinginan Renang, Materi Renang Gaya Punggung, Video Renang Gaya Punggung, Data Diri, Penutup 3. Masuk Ke Menu Sejarah Renang Menampilakan Menu Sejarah 4. Masuk Ke Menu Tahap pemanasan Menampilakan Menu Tahap Pemanasan Sebelum Renang Sebelum Renang 5. Masuk Ke Menu Tahap Pergerakan Menampilakan Menu Tahap Pergerakan Menyelam Kedalam Air Menyelam Kedalam Air 6. Masuk Ke Menu Teknik Renang Gaya Menampilakan Menu Teknik Renang Gaya Punggung Runggung 7. Masuk Ke Menu Tahap Pendinginan Menampilakan Menu Tahap Pendinginan Renang Renang 8. Masuk Ke Menu Materi Renang Gaya Menampilakan Menu Materi Renang Gaya Punggung Punggung 9. Masuk Ke Menu Tombol Video Menampilakan Menu Tombol Video Renang Renang Gaya Punggung Gaya Punggung 10. Masuk Ke Menu Tombol Data Diri Menampilakan Menu Tombol Data Diri 11. Masuk Ke Menu Penutup Menampilakan Menu Penutup 12. Keluar Dari Aplikasi Dapat Keluar Dari Aplikasi 54