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 Background
Gambar
Fungsi Sebagai latar belakang (background) setiap halaman dalam program aplikasi Belajar Renang
Lengkung
Memberikan efek lengkung pada background sehingga background terlihat lebih menarik
Bingkai
Memberikan efek bingkai pada background sehingga background terlihat lebih menarik
Judul_renang
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
- Sebagai initial nama pembuat program
- kotak
- Sebagai border yang terletak di margin gambar animasi
- renang
- Salah satu contoh animasi gerakan gaya renang
- jam
- 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.
Tabel 2.
Tampilan Folder “Introduction”
Fungsi Layer pada Halaman Perkenalan
Layer
Gambar
Fungsi
- Judul_intro
Menunjukan identitas penulis
- Logo
sebagai pembuat program mulai
- IT & & 2012
dari Nama, Nim, jurusan,
- Nama & Nim
universitar, tahun, juga disertai
- Photo
dengan foto penulis
- Back
- Untuk menuju halaman awal
- Next
- 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
- Sebagai tombol untuk menuju halaman sebelumnya
- kotak_home
- Sebagai border untuk layar
- layar
- Sebagai tempat munculnya animasi gerakan renang
- tombol
- Tombol untuk menunjukan animasi gerakan renang gaya bebas
- garis
- agar tombol terlihat lebih menarik
- quiz
- 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
Gambar 8.
6
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.
Gambar 10.
1
2
3
4
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
Gambar 14.
6
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”
Aplikasi belajar renang akan tertutup setelah user mengklik tombol Close tersebut.
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
Halaman
Kembali ke halaman pembuka
OK
Kembali ke halaman perkenalan
OK
Halaman gerakan
Memperlihatkan animasi renang gaya
OK
animasi renang
bebas
Halaman gerakan
Memperlihatkan animasi renang gaya
animasi renang
dada
Halaman gerakan
Memperlihatkan animasi renang gaya
animasi renang
kupu-kupu
Halaman gerakan
Memperlihatkan animasi renang gaya
animasi renang
punggung
Halaman gerakan
Menuju halaman quiz
OK
Pilihan jawaban saat mengerjakan
OK
3
Back
perkenalan 4
Back
Halaman gerakan animasi renang
5
6
5
6
7
Gaya Bebas
Gaya Dada
Gaya kupu-kupu
Gaya Punggung
Quiz
OK
OK
OK
animasi renang 8
Pilihan Ganda
Halaman quiz
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
