BAB IV IMPLEMENTASI DAN PENGUJIAN

Transkripsi

1 BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi Tahap selanjutnya setelah melakukan analisis dan merancang aplikasi pembelajaran renang berbasis animasi untuk memberikan informasi mengenai renang gaya punggung adalah implementasi dan pengujian aplikasi. Pada tahapan implementasi terdapat dua cakupan yaitu spesifikasi kebutuhan system yang meliputi perangkat keras dan perangkat lunak, implementasi yang meliputi pengkodean, desain antarmuka dan hal-hal yang berhubungan dengan pengujian aplikasi. Untuk dapat menjalankan sebuah aplikasi ini pada komputer, maka user harus mempunyai software yang dapat menjalankan program flash yaitu macromedia flash atau adobe flash Kebutuhan perangkat keras Spesifikasi perangkat keras yang di butuhkan dalam membuat perancangan Aplikasi Animasi Untuk Memberikan Informasi Mengenai pembelajaran renang gaya punggung adalah sebagai berikut : LAPTOP dengan spesifikasi sebagai berikut: A. Processor - Processor Intel Core Core 2 Duo CPU 2.00Ghz (2 Cpus) -2.0 Ghz B. VGA - Mobile Intel 4 Series Express Chipset Family Internal 128 MB C. Internal Memory (RAM ) 3 GB D. Hard disk 250 GB Serial ATA 5400 RPM E. Perangkat keras pendukung seperti mouse, printer dan speaker 58

2 4.1.2 Kebutuhan perangkat lunak Dalam perancangan aplikasi ini, Tools yang digunakan penulis untuk dapat membangun aplikasi ini adalah Adobe Flash CS3 Profesional. Kemudian system operasi yang digunakan saat merancang aplikasi ini adalah Windows 7 Sp 1 Profesional 32 bit. 4.2 Tampilan antarmuka Aplikasi ini dibuat dengan spesifikasi layar sebesar 1280 x 800 pixels dengan nilai frame rate 1.0 fps yang merupakan frame rate standart dalam pembuatan animasi dan perintah pengkodean menggunkan Action Script 2.0 sebuah movie dan objek flash dapat dibagi didalam beberapa scane dan frame. Apalikasi di buat dengan 17 scane dan 130 frame. Spesifikasi tampilan antarmuka akan mempermudah cara kerja aplikasi berbasis animasi untuk memberikan informasi mengenai pembelajaran renang gaya punggung. Dengan adanya spesifikasi tampilan ini diharapkan user dapat lebih mudah atau mengetahui cara kerja dari aplikasi tersebut, adapun spesifikasi tampilan yang dibuat adalah sebagai berikut: 1. Halaman Tampilan Awal Halaman ini adalah tampilan awal dari aplikasi untuk menghantarkan user ke dalam menu utama. Dalam tampian awal ini penulis menggunakan Objek sekelompok orang, orang berenang dan kolam renang. Berikut ini adalah tampilan gambar dan table yang akan menjelaskan mengenai halaman tampilan awal. 59

3 Gambar 4.1 Tampilan Awal Pada layer global_asc pada Frame 1 terdapat script fscommand("fullscreen",true); Script tersebut berfungsi untuk full screen tampilan awal aplikasi. Tabel 4.1 Layer Frame Tampilan Awal No. Nama Layer Keterangan 1. Sound Pada layer ini terdapat sound untuk masuk ke latar aplikasi. 2. Global_asc Pada layer ini terdapat action script. Tabel 4.2 Symbol pada Scene: 1 Frame: 1 No Symbol Nama symbol Keterangan 60

4 Sound.btn Close.btn Next.btn Judul.MC Berisi perintah untuk menghentikan suara dan menyalakanny a kembali diletakan pada layer 1. Berisi perintah untuk keluar aplikasi diletakan pada layer 9. Berisi perintah untuk melanjutkan ke frame berikutnya diletakan pada layer 1. Movieclip berupa animasi judul diletakan pada layer 1. 61

5 2. Halaman Menu Utama Halaman ini merupakan menu utama dari aplikasi pembelajaran renang gaya punggung berbasis animasi untuk memberikan informasi mengenai kolam renang raihan Islamic Village Tangerang, dalam hal ini terdapat 9 tombol, yaitu tombol sejarah, tombol tahap pemanasan sebelum renang, tombol tahap pergerakan menyelam kedalam air, tombol teknik renang gaya punggung, tombol tahap pendinginan renang, tombol materi renang gaya punggung, tombol video renang gaya punggung, tombol data diri, tombol penutup. Tombol sejarah berfungsi untuk menampilkan informasi mengenai kapan di kenalkannya sejarah renang gaya punggung. Tombol tahap pemanasan sebelum renang berfungsi untuk menampilkan informasi mengenai cara pemanasan gerak badan yang benar. Tombol tahap pergerakan menyelam ke dalam air berfungsi untuk menampilkan informasi mengenai cara gerak tubuh yang benar menyelam ke dalam air. Tombol teknik renang gaya punggung berfungsi untuk menampilkan informasi mengenai cara gerakan dari satu tahap ke tahap selanjutnya dengan aturan yang tepat. Tombol tahap pendinginan renang berfungsi untuk menampilkan informasi mengenai cara pendingin gerak bandan yang benar. Tombol materi renang gaya punggung berfungsi untuk menampilkan informasi mengenai cara apa saja langkah-langkah yang harus di perhatikan sebelum melakukan gerak tubuh saat renang. Tombol video renang gaya punggung berfungsi untuk menampilkan informasi mengenai cara melakaukan teknik renang yang benar. Tombol data diri berfungsi untuk menampilkan informasi mengenai pengguna. Tombol penutup berfungsi untuk menampilkan informasi mengenai berkahirnya pembelajaran renang gaya punggung. selain itu dalam halaman ini juga terdapat background kolam renang raihan Islamic Village Tangerang serta terdapat animasi orang sedang melakukan tahap pemanasan, 62

6 animasi orang sedang berjalan di pinggir kolam renang, dan juga animasi orang sedang melakukan teknik di dalam kolam renang. Berikut ini adalah tampilan gambar dan table yang akan menjelaskan mengenai halaman menu utama. Gambar 4.2 Tampilan Menu Utama stop(); Script tersebut berfungsi untuk menstop pilihan menu utama aplikasi. Tabel 4.3 Layer Frame Menu Utama No. Nama Layer Keterangan 1. Global_asc Pada layer ini terdapat action script. 63

7 2. Animasi Pada layer ini terdapat action script. 3. Bg&Object Pada layer ini terdapat animasi orang berenang, yang di letakan pada frame dan layer. Tabel 4.4 Symbol pada Scene: 1 Frame: 2 No Symbol Nama symbol Keterangan 1. Berisi perintah untuk materi.btn memunculkan soal-soal tentangrenang gaya punggung diletakan pada layer Berisi perintah untuk keluar Close.btn aplikasi Next.btn pemanasan.btn Menu.btn Kembali.btn & Berisi perintah untuk melanjutkan ke frame berikutnya. Untuk berpindah ke halaman pemanasan diletakan pada layer 1. Untuk menampilkan rincian menu utama aplikasi dan kembali untuk menutup menu utama aplikasi. 64

8 6. Teknikrenang.btn Untuk berpindah ke halaman teknik renang gaya punggung, diletakan pada layer Tahappendinginan. btn Datadiri.btn Penutup.btn Video.btn Animasipemanasan.mc Animasi orang berjalan.mc Untuk berpindah ke halaman tahap pendinginanrenang gaya punggung, diletakan pada layer 1. Untuk berpindah ke halaman datadiri, diletakan pada layer 1 Digunakan untuk berpindah ke halaman penutup, diletakan pada layer 1. Digunakan untuk berpindah ke halaman video renang gaya punggung. Diletakan pada layer 1. Menampilkan animasi gerakan orang melakukan pemanasan, diletakan pada layer 1 frame 2. Diletakan pada layer 1 frame 2, dan manampilkan animasi orang berjalan. 13. Animasi kolam.mc air Diletakan pada layer 2 frame 2, menampilkan animasi air kolam. 65

9 3. Halaman Informasi Sejarah Renang Gaya Punggung Halaman ini menampilkan informasi mengenai kapan di kenalkannya sejarah olah raga renang. Gambar 4.3 Tampilan Isi Menu Sejarah Renang 66

10 Halaman ini menampilkan informasi mengenai kapan di kenalkannya sejarah renang gaya punggung. Gambar 4.4 Tampilan Isi Menu Sejarah Renang Gaya Punggung 67

11 4. Halaman Tahap Pemanasan Sebelum Renang Halaman ini memperlihatkan informasi mengenai tahap pemanasan sebelum renang gaya punggung, dengan melakukan tahap gerak kecil. Gambar 4.5 Tampilan Tahap pemanasan Sebelum Renang stop(); pemanasan.stop(); Script tersebut berfungsi untuk menstop pemanasan pilihan menu aplikasi. a. Tombol Play on (release) {pemanasan.play(); } 68

12 b. Tombol pause on (release) {pemanasan.stop(); } c. Tombol stop on (release) {pemanasan.gotoandstop(1); } d. Tombol rewind on (release) {pemanasan.gotoandplay(1); } Script tersebut berfungsi untuk Tombol Play, Tombol pause, Tombol stop, Tombol rewind menu pemanasan aplikasi. Tabel 4.5 Symbol pada Scene: 1 Frame: 3 No Symbol Nama symbol Keterangan 1. untuk menampilkan animasi play.btn orang melakukan pemanasan sebelum renang pada layer Untuk menghentikan animasi yang sedang berjalan diletakan stop.btn pada layer 1 dan memulainya kembali. 3. Untuk menghentikan animasi pause.btn yang sedang berjalan diletakan pada layer 1. 69

13 rewind.btn Close.btn Next.btn air.mc Pemanasan.mc Untuk mengulang animasi yang sedang berjalan diletakan pada layer 1. Berisi perintah untuk keluar aplikasi diletakan pada layer 9. Berisi perintah untuk melanjutkan ke frame berikutnya diletakan pada layer 1. Movieclip berupa animasi air diletakan pada layer 1. Animasi pemanasan yang di sembunyikan ketika belum dimulai atau diklik tombol play diletakan pada layer 1. 70

14 5. Halaman Teknik Renang Gaya Punggung Halaman ini memperlihatkan informasi mengenai tahap teknik renang gaya punggung, dimana tahap ini sudah bisa melakukan gerak tubuh untuk renang gaya punggung. Langkah awalnya bisa juga dengan badan mengapung di air lalu di gerakan kedua tangan dan kaki secara bergiliran. Gambar 4.7 Tampilan Tahap Teknik Renang Gaya Punggung stop(); gayapunggung.stop(); Script tersebut berfungsi untuk menstop gerak renang gaya punggung pilihan menu aplikasi. 71

15 a. Tombol Play on (release) {gayapunggung.play(); } b. Tombol pause on (release) {gayapunggung.stop(); } c. Tombol stop on (release) {gayapunggung.gotoandstop(1); } d. Tombol rewind on (release) {gayapunggung.gotoandplay(1); } Script tersebut berfungsi untuk Tombol Play, Tombol pause, Tombol stop, Tombol rewind menu gaya punggung aplikasi. Tabel 4.6 Symbol pada Scene: 1 Frame: 4 No Symbol 1. Nama symbol Keterangan untuk menampilkan animasi orang melakukan play.btn gerakan sebelum renang pada layer 1. 72

16 stop.btn pause.btn rewind.btn Close.btn previous.btn air.mc gerakansebel um.mc Untuk menghentikan animasi yang sedang berjalan diletakan pada layer 1 dan memulainya kembali. Untuk menghentikan animasi yang sedang berjalan diletakan pada layer 1. Untuk mengulang animasi yang sedang berjalan diletakan pada layer 1. Berisi perintah untuk keluar aplikasi diletakan pada layer 9 Berisi perintah untuk kembali ke frame berikutnya diletakan pada layer 1. Movieclip berupa animasi air diletakan pada layer 1. Animasi gerakansebelum renang ketika belum dimulai atau diklik tombol play diletakan pada layer 1. 73

17 6. Halaman Tahap Pendinginan Renang Halaman ini memperlihatkan informasi mengenai tahap pendinginan sebelum renang gaya punggung, dengan melakukan tahap gerak kecil. Gambar 4.8 Tampilan Tahap Pendinganan Renang stop(); pendinginan.stop(); Script tersebut berfungsi untuk menstop pendinginan pilihan menu aplikasi. 74

18 a. Tombol Play on (release) {pendinginan.play(); } b. Tombol pause on (release) {pendinginan.stop(); } c. Tombol stop on (release) {pendinginan.gotoandstop(1); } d. Tombol rewind on (release) {pendinginan.gotoandplay(1); } Script tersebut berfungsi untuk Tombol Play, Tombol pause, Tombol stop, Tombol rewind menu pendinginan aplikasi. Tabel 4.7 Symbol pada Scene: 1 Frame: 5 No Symbol Nama symbol Keterangan untuk menampilkan animasi orang play.btn melakukan gerakan setelah renang pada layer 1. Untuk menghentikan animasi yang stop.btn sedang berjalan diletakan pada layer 1 dan memulainya kembali. 75

19 pause.btn rewind.btn Close.btn previous.btn air.mc Untuk menghentikan animasi yang sedang berjalan diletakan pada layer 1. Untuk mengulang animasi yang sedang berjalan diletakan pada layer 1. Berisi perintah untuk keluar aplikasi diletakan pada layer 9. Berisi perintah untuk kembali ke frame berikutnya diletakan pada layer 1. Movieclip berupa animasi air diletakan pada layer Pendinginan. mc Animasi gerakan setelah renang ketika belum dimulai atau diklik tombol play diletakan pada layer 1. 76

20 7. Halaman Materi Renang Gaya Punggung Input Nama Halaman ini menjelaskan informasi untuk mengisi data nama sebelum masuk materi renang gaya punggung. Gambar 4.9 Tampilan Materi Renang Gaya Punggung Input Nama inputnama=""; ket.text=""; Script tersebut berfungsi untuk input nama materi pilihan menu aplikasi. 77

21 Tabel 4.8 Symbol pada Scene: 1 Frame: 25 No Symbol Nama symbol Keterangan 1. Berisi perintah untuk memasukan jenis keterangan nama nama.btn pengguna pada aplikasi yang diletakan pada layer 1 frame Berisi perintah untuk masuk ke frame enter.btn berikutnya diletakan pada layer movieclip. 78

22 8. Halaman Materi Renang Gaya Punggung Halaman ini menampilkan materi test untuk renag gaya punggung, supaya mengerti bagaimana cara melakukan gerak badan renang gaya punggung. Gambar 4.10 Tampilan Materi Renang Gaya Punggung nama=inputnama; stop(); benar=0; salah=0; skor=0; salah_btn.onrelease=function(){ salah=salah+1; 79

23 nextframe(); stopallsounds(); }; benar_btn.onrelease=function(){ benar=benar+1;skor=benar; nextframe(); stopallsounds(); }; Script tersebut berfungsi untuk input nama materi dan skor jawaban pilihan menu aplikasi. a. Tombol next on (press) { nextframe();stopallsounds(); } Script tersebut berfungsi untuk nextframe materi pilihan menu aplikasi. Tabel 4.9 Symbol pada Scene: 1 Frame: 9 No Symbol Nama symbol Keterangan 1. Berisi perintah untuk keluar Close.btn aplikasi diletakan pada layer Berisi perintah untuk kembali previous.btn ke frame berikutnya diletakan pada layer Berisi perintah untuk Next.btn melanjutkan ke frame 80

24 Tampilkansoal.txt Contoh,jawaba nbenar.btn Contoh,jawaba nsalah.btn Benar.txt/salah.txt/skor.txt berikutnya diletakan pada layer 1. Soal text dinamis akan terisi ketika melewati frame 9 sd. 19 berisi soal-soal tentang materi renang gaya punggung. Berisi perintah untuk memberikan nilai benar dan menambah skor.text diletakan pada layer 4 frame 9 sd. 19. Berisi perintah untuk memberikan nilai salah dan mengurangi skor.text diletakan pada layer 4 frame 9 sd. 19. Menampilkan nilai benar, maka akan bertambah 1, diletakan di frame 9 sd. 19 pada layer 4. 81

25 9. Halaman Video Renang Gaya Punggung Halaman ini memperlihatkan bagaimana contoh pertama gerak tubuh renang gaya punggung yang benar. Gambar 4.11 Tampilan Video I Renang Gaya Punggung 82

26 Halaman ini memperlihatkan bagaimana contoh ke dua gerak tubuh renang gaya punggung yang benar. Gambar 4.12 Tampilan Video II Renang Gaya Punggung 83

27 10. Halaman Data Diri Halaman ini menampilkan data diri user untuk informasi pembelajaran renang gaya punggung dari area menu utama layer. Berikut ini adalah tampilan dari halaman data diri user miliki : Gambar 4.13 Tampilan Data Diri 84

28 11. Halaman Penutup Halaman ini menampilkan Penutup untuk mengetahui tahap penyelesaian aplikasi pembelajaran renang gaya punggung berbasis animasi dengan adobe flash sc3. Berikut ini adalah tampilan dari halaman penutup user miliki : Gambar 4.14 Tampilan Penutup 85

29 4.3 Pengujian Sistem Pengujian aplikasi pembelajaran renang berbabasis animasi untuk memberikan informasi mengenai gerak renang gaya punggung ini di lakukan untuk mengetahui apakah aplikasi yang telah dibuat dapat berjalan dengan baik dan sesuai dengan rancangan yang telah di tetapkan sebelumnya pengujian terhadap aplikasi ini dilakukan dengan menggunakan metode pengujian Black Box Testing Pengujian Black Box Testing Pengujian aplikasi pembelajaran renang berbabasis animasi untuk memberikan informasi mengenai gerak renang gaya punggung ini dilakukan dengan menggunakan metode Black Box Testing. Tujuan dari metode Black Box Testing ini adalah untuk menemukan kesalahan fungsi pada program. Pengujian dilakukan dengan menjalankan aplikasi ini apakah sesuai dengan yang diharapkan. Tabel 4.10 Pengujian 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 86

30 3. Masuk Ke Menu Sejarah Renang Menampilakan Menu Sejarah 4. Masuk Ke Menu Tahap pemanasan Sebelum Renang 5. Masuk Ke Menu Tahap Pergerakan Menyelam Kedalam Air 6. Masuk Ke Menu Teknik Renang Gaya Punggung 7. Masuk Ke Menu Tahap Pendinginan Renang 8. Masuk Ke Menu Materi Renang Gaya Punggung 9. Masuk Ke Menu Tombol Video Renang Gaya Punggung Menampilakan Menu Tahap Pemanasan Sebelum Renang Menampilakan Menu Tahap Pergerakan Menyelam Kedalam Air Menampilakan Menu Teknik Renang Gaya Runggung Menampilakan Menu Tahap Pendinginan Renang Menampilakan Menu Materi Renang Gaya Punggung Menampilakan Menu Tombol Video Renang 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 Dari scenario pengujian terhadap aplikasi yang sudah dibuat, hasilnya adalah sebagai berikut: Tabel 4.11 Hasil pengujian Black Box Testing No. Nama Tes Hasil yang di harapkan Hasil 1. Masuk Ke Tampilan Awal Menampilkan Halaman Tampilan Awal Berhasil 87

31 2. Masuk Ke Menu Utama Sejarah, Tahap Pemanasan Sebelum Renang, Tahap Pergerakan Menyelam Kedalam Air, Berhasil 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 Berhasil 4. Masuk Ke Menu Tahap pemanasan Sebelum Renang 5. Masuk Ke Menu Tahap Pergerakan Menyelam Kedalam Air 6. Masuk Ke Menu Teknik Renang Gaya Punggung 7. Masuk Ke Menu Tahap Pendinginan Renang 8. Masuk Ke Menu Materi Renang Gaya Punggung 9. Masuk Ke Menu Tombol Video Renang Gaya Punggung 10. Masuk Ke Menu Tombol Data Diri Menampilakan Menu Tahap Pemanasan Berhasil Sebelum Renang Menampilakan Menu Tahap Pergerakan Berhasil Menyelam Kedalam Air Menampilakan Menu Teknik Renang Gaya Berhasil Runggung Menampilakan Menu Tahap Pendinginan Berhasil Renang Menampilakan Menu Materi Renang Gaya Berhasil Punggung Menampilakan Menu Tombol Video Renang Berhasil Gaya Punggung Menampilakan Menu Tombol Data Diri Berhasil 11. Masuk Ke Menu Penutup Menampilakan Menu Penutup Berhasil 12. Keluar Dari Aplikasi Dapat Keluar Dari Aplikasi Berhasil 88