BAB IV IMPLEMENTASI DAN UJI COBA 4.1 Implementasi Untuk menjalankan aplikasi ini, user harus memiliki sebuah program yang dapat menjalankan program flash yaitu Adobe Flash. 4.1.1 Kebutuhan Perangkat Keras Spesifikasi perangkat keras yang dibutuhkan untuk membuat aplikasi Penyebaran Informasi Belajar Renang adalah sebagai berikut: a. Processor Intel Pentium 4 or AMD Athlon 64 processor b. 1 GB RAM (internal memory) c. Hard disk minimal tersedia 1 GB untuk proses install d. Tampilan dengan resolusi 1024x768 ( direkomendasikan 1280x800) dengan kualifikasi kartu grafis hardware-accelerated OpenGL, 16-bit, dan 256MB VRAM e. Printer 4.1.2 Kebutuhan Perangkat Lunak Perangkat lunak yang digunakan untuk membangun Program Aplikasi Penyebaran Informasi Belajar Renang adalah sebagai berikut: a. Operating System: Windows XP b. Adobe Flash CS5 c. Program editor: Adobe Photoshop CS3 4.1.3 Tampilan Antarmuka Spesifikasi tampilan antarmuka menjelaskan cara penggunaan Program Aplikasi Penyebaran Informasi Belajar Renang. Dengan adanya tampilan antarmuka ini diharapkan user dapat dengan mudah memahami bagaimana cara menggunakan program aplikasi ini. 40
41 Dalam membuat tampilan antarmuka ini penulis membuat setiap halaman dalam satu folder pada file flash yang sama. Hal ini bertujuan agar file flash yang dibuat tidak terlalu banyak karena resiko kehilangan file akan semakin besar. Jika sebagian file ada yang hilang, maka fungsi link tidak dapat berfungsi dengan baik. Oleh karena itu, penulis membuat hubungan antar halaman dalam satu file flash, dimana setiap halaman dibuat dalam satu folder layer. Saat aplikasi dijalankan akan muncul halaman tampilan sebagai berikut: a. Menu Awal Menu ini disebut dengan halaman pembuka atau bisa disebut juga dengan menu selamat datang. Pada halaman ini terdapat sebuah tombol Next yang berfungsi untuk menuju ke halaman berikutnya. Berikut tampilan dari halaman pembuka: Gambar 1. Tampilan Halaman Pembuka Dalam program aplikasi yang sudah dibuat, halaman pembuka dibuat dalam sebuah folder layer dengan nama front_page.
42 Gambar 2. Tampilan Folder front_page pada layer dalam Program Adobe Flash CS5 Tabel 1. Fungsi Layer pada Halaman Awal Layer Gambar Fungsi Background Sebagai latar belakang (background) setiap halaman dalam program aplikasi Belajar Renang Lengkung Bingkai Judul_renang Memberikan efek lengkung pada background sehingga background terlihat lebih menarik Memberikan efek bingkai pada background sehingga background terlihat lebih menarik Huruf-huruf yang terangkai dalam judul renang dikreasikan dengan Photoshop sehingga terlihat lebih menarik
43 Next Tombol yang berfungsi untuk menuju halaman berikutnya - vin_ascadia - kotak - renang - jam - Sebagai initial nama pembuat program - Sebagai border yang terletak di margin gambar animasi - Salah satu contoh animasi gerakan gaya renang - Sebagai aplikasi tambahan penunjuk waktu b. Halaman Perkenalan Halaman ini bertujuan untuk memperkenalkan nama pembuat program dan universitas permbuat program berasal. Disertai pula dengan tahun pembuatan program. Berikut tampilan halaman perkenalan: Gambar 3. Tampilan Halaman Perkenalan
44 Dalam program aplikasi yang sudah dibuat, halaman perkenalan dibuat dalam sebuah folder layer dengan nama introduction. Gambar 4. Tampilan Folder Introduction Tabel 2. Fungsi Layer pada Halaman Perkenalan Layer Gambar Fungsi - Judul_intro - Logo - IT & & 2012 - Nama & Nim - Photo - Back - Next Menunjukan identitas penulis sebagai pembuat program mulai dari Nama, Nim, jurusan, universitar, tahun, juga disertai dengan foto penulis - Untuk menuju halaman awal - Untuk menuju menu utama c. Menu Utama Menu utama ini disebut juga dengan halaman animasi gerakan renang yang berisi beberapa pilihan tombol yang dapat menunjukan animasi gerakan setiap gaya renang.
45 Berikut tampilan menu utama: Gambar 5. Tampilan Menu Utama Dalam program aplikasi yang sudah dibuat, menu utama dibuat dalam sebuah folder layer dengan nama Home. Gambar 6. Tampilan Folder Home pada Layer
46 Tabel 3. Fungsi Layer pada Menu Utama Layer Gambar Fungsi - back - kotak_home - layar - Sebagai tombol untuk menuju halaman sebelumnya - Sebagai border untuk layar - Sebagai tempat munculnya animasi gerakan renang - tombol - garis - quiz - Tombol untuk menunjukan animasi gerakan renang gaya bebas - agar tombol terlihat lebih menarik - untuk menuju halaman quiz d. Halaman Animasi Gaya Bebas Halaman ini menunjukan animasi gerakan renang gaya bebas, yang ditunjukan pada gambar berikut: Gambar 7. Animasi Gaya Bebas
47 Animasi gaya bebas yang dibuat terdiri dari 6 (enam) gambar yang disusun dalam frame yang berbeda sehingga membentuk animasi seperti yang ditunjukan dalam program aplikasi gerakan renang. Berikut susunan gambar animasi gaya bebas: 1 2 3 4 5 6 Gambar 8. Susunan Gambar yang Membentuk Animasi Gaya Bebas e. Halaman Animasi Gaya Dada Halaman ini menunjukan animasi gerakan renang gaya dada, yang ditunjukan pada gambar berikut:
48 Gambar 9. Animasi Gaya Dada Animasi gaya dada yang dibuat terdiri dari 4 (empat) gambar yang disusun dalam frame yang berbeda sehingga membentuk animasi seperti yang ditunjukan dalam program aplikasi gerakan renang. 1 2 3 4 Gambar 10. Susunan Gambar yang Membentuk Animasi Gaya Dada f.halaman Animasi Gaya Kupu-kupu Halaman ini menunjukan animasi gerakan renang gaya kupu-kupu, yang ditunjukan pada gambar berikut:
49 Gambar 11. Animasi Gaya Kupu-kupu Animasi gaya kupu-kupu yang dibuat terdiri dari 5 (lima) gambar yang disusun dalam frame yang berbeda sehingga membentuk animasi seperti yang ditunjukan dalam program aplikasi gerakan renang. 1 2 3 4 5 Gambar 12. Susunan Gambar yang Membentuk Animasi Gaya Kupu-kupu
50 g. Halaman Animasi Gaya Punggung Halaman ini menunjukan animasi gerakan renang gaya punggung, yang ditunjukan pada gambar berikut: Gambar 13. Animasi Gaya Punggung Animasi gaya punggung yang dibuat terdiri dari 4 (empat) gambar yang disusun dalam frame yang berbeda sehingga membentuk animasi seperti yang ditunjukan dalam program aplikasi gerakan renang. 1 2 3 4
51 5 6 Gambar 14. Susunan Gambar yang Membentuk Animasi Gaya Punggung h. Halaman Quiz Halaman ini memperlihatkan quiz yang disediakan untuk user seperti ditunjukan pada gambar berikut: Gambar 15. Halaman Quiz Jika user berhasil memilih jawaban yang benar maka score benar akan bertambah seperti yang ditunjukan pada gambar berikut: Gambar 16. Score Bertambah
52 Namun jika user memilih jawaban yang salah maka score minus akan bertambah yang ditunjukan pada gambar berikut: Gambar 17. Score Minus Bertambah Pada halaman quiz terdapat tombol Close yang berfungsi untuk menutup aplikasi belajar renang dengan ekstensi file *.swf atau *.exe. Ketika mouse diarahkan ke tombol Close, akan muncul tulisan Thank you seperti gambar berikut: Gambar 18. Button Close Menampilkan Thank you tersebut. Aplikasi belajar renang akan tertutup setelah user mengklik tombol Close
53 4.1.4 Actionscript Actionscript yang digunakan pada program aplikasi yang dibuat adalah Actionscript 2.0, yang bertujuan untuk melakukan beberapa action agar program aplikasi yang dibuat menjadi interaktif. Actionscript dalam program aplikasi belajar renang terdiri dari: 1. Actionscript untuk menuju ke halaman berikutnya, dengan adanya tombol khusus untuk menuju ke halaman berikutnya, user dapat melakukan interakasi dengan program aplikasi yang dibuat. Dalam pembuatannya buat sebuah tombol dengan actionscript: on (release){ gotoandplay(x); dimana x = nomor frame Jadi ketika sebuah tombol diklik oleh user, maka akan berlanjut ke frame x dan dijalankan animasi yang ada di frame x. Tombol-tombol dalam aplikasi belajar renang yang menggunakan actionscript ini adalah: - Tombol Next - Tombol Back - Tombol Gaya Bebas - Tombol Gaya Dada - Tombol Gaya Kupu-kupu - Tombol Gaya Punggung - Tombol Quiz 2. Actionscript untuk menghentikan animasi, Adobe Flash merupakan program yang dibuat untuk membuat animasi berdasarkan frame-frame sebagai timeline. Timeline ini secara default terus berjalan ( looping). Oleh karena itu jika ingin membuat sebuah halaman animasi yang berhenti pada salah satu frame ketika halaman dieksekusi, maka gunakan actionscript Stop();.
54 3. Jam Actionscript yang digunakan untuk membuat jam seperti tampak pada gambar berikut adalah: Gambar 19. Penggunaan Jam pada Aplikasi Belajar Renang Pembuatan actionscript untuk aplikasi jam ini dapat dijelaskan sebagai berikut: a. Pendefinisian variable Variabel dalam jam terdiri dari jam, menit, detik, dan dilengkapi juga dengan tanggal. mydate=new Date() myhours=mydate.gethours(); myminutes=mydate.getminutes(); b. Pengkondisian antara am dan pm Secara default, nilai yang diberikan oleh Flash untuk jam adalah 24, maka jika kita ingin membagi dua kondisi menjadi am dan pm, maka dapat digunakan kondisi if sebagai berikut; myampm="pm"; if (myhours<12){ myampm = "am";
55 c. Pengkondisian angka jam Jika jam yang ditampilkan dibagi menjadi am dan pm, maka angka jam harus berkisar antara 1 sampai 12. Oleh karena itu, saat Flash memberikan nilai mulai 13 untuk pukul 1 maka dibuatkan script agar angka 13 diubah menjadi 1, begitu pun seterusnya. if (myhours>=13){ myhours = myhours-12; Secara default, jam 12 pagi ditunjukan dalam angka 0, oleh karena itu perlu kita ubah menjadi angka 12. if (myhours==0){ myhours = 12; d. Pengkondisian jumlah digit jam, menit, detik Ketika jam menunjukan angka 1 sampai 9, secara default hanya ditunjukan dalam satu digit. Jika ingin dibuat menjadi dua digit dengan penambahan 0 di depannya maka perlu ditambahkan script sebagai berikut: detik=mydate.getseconds(); if (myminutes<10){ menit = "0"+myMinutes; else{ menit = myminutes; if (myhours<10){ jam = "0"+myHours; else{ jam = myhours;
56 e. Pendefinisian hari dan bulan Untuk mendefinisikan nama hari dan bulan dapat dibuat dalam bentuk array sebagai berikut: weekdays=["sun","mon","tue","wed","thu","fri","sat"]; months=["jan","feb","mar","apr","may","jun","jul","aug ","Sep","Oct","Nov","Dec"]; f. Penyusunan urutan waktu Dalam aplikasi belajar renang, jam ditunjukan dalam susunan sebagai berikut: Hari, Bulan Tanggal, Tahun Untuk menyusun urutan waktu sesuai format di atas maka perlu dibuat script yang menyusun variabel-variable yang sudah dibuat sesuai urutan di atas. tanggal=weekdays[mydate.getday()]+", "+months[mydate.getmonth()]+" "+mydate.getdate()+", "+""+mydate.getfullyear(); gotoandplay(1); Karena script dibuat dalam frame kedua, sedangkan gambar jam dibuat dalam frame 1 maka ditambahkan actionscript gotoandplay(1); 4. Quiz Cara kerja quiz dalam aplikasi belajar renang adalah sebagai berikut: Quiz dalam aplikasi ini dibuat dalam pilihan ganda, dimana jika user memilih satu jawaban yang benar maka akan mendapat point 25, sebaliknya jika salah akan mendapat -25. Pilihan ganda dibuat dalam beberapa tombol ( button), sedangkan score benar dan salah dibuat dalam bentuk movie clip yang masing-masing diberi nama correct dan incorrect. Saat tombol benar diklik maka akan merujuk ke movie clip correct, sebalikya saat tombol salah diklik maka akan merujuk ke movie clip incorrect. Saat merujuk ke movie clip tersebut, perintah yang diberikan adalah menuju frame-frame
57 selanjutnya yang berisi score 25 dan kelipatannya hingga 100. Untuk membuat cara kerja ini, pada tombol pilihan ganda yang memuat jawaban yang benar diberikan script sebagai berikut: on (release){ telltarget ("/correct") { nextframe(); on (release){ nextframe(); Sedangkan pada tombol pilihan ganda yang memuat jawaban yang salah diberikan script sebagai berikut: on (release){ telltarget ("/incorrect") { nextframe(); on (release){ nextframe(); Jika user berhasil mendapat point 100 maka akan muncul Selamat, anda berhasil!, tulisan ini disimpan dalam movie clip correct bersamaan dengan frame yang memuat score 100. Sebaliknya jika user belum berhasil mendapat score 100, maka akan muncul Silakan coba lagi!, tulisan ini disimpan dalam scene utama yang terletak diframe terakhir setelah quiz selesai dijawab. 4.2 Metode Pengujian Pengujian dilakukan dengan mencoba setiap kemungkinan yang terjadi dan dilakukan secara berulang-ulang. Jika dalam pengujian ditemukan kesalahan, maka akan dilakukan penelusuran dan perbaikan (debugging) untuk memperbaiki kesalahan yang terjadi. Jika telah selesai melakukan perbaikan maka akan dilakukan pengujian kembali. Pengujian dan perbaikan dilakukan secara terus menerus hingga diperoleh hasil terbaik.
58 4.2.1 Pengujian Skenario Black Box Berikut hasil pengujian skenario black box pada aplikasi belajar renang: Tabel 4. Pengujian Skenario Black Box Program Aplikasi Belajar Renang No Tombol Lokasi Hasil yang Diharapkan Hasil 1 Next Halaman pembuka Menuju halaman perkenalan OK 2 Next Halaman Menuju halaman gerakan animasi OK perkenalan renang 3 Back Halaman Kembali ke halaman pembuka OK perkenalan 4 Back Halaman gerakan Kembali ke halaman perkenalan OK animasi renang 5 Gaya Bebas Halaman gerakan Memperlihatkan animasi renang gaya OK animasi renang bebas 6 Gaya Dada Halaman gerakan Memperlihatkan animasi renang gaya OK animasi renang dada 5 Gaya kupu-kupu Halaman gerakan Memperlihatkan animasi renang gaya OK animasi renang kupu-kupu 6 Gaya Punggung Halaman gerakan Memperlihatkan animasi renang gaya OK animasi renang punggung 7 Quiz Halaman gerakan Menuju halaman quiz OK animasi renang 8 Pilihan Ganda Halaman quiz Pilihan jawaban saat mengerjakan OK 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 OK