BAB III ANALISA DAN PERANCANGAN
3.1.
Analisa Sistem
Analisa sistem merupakan tahap awal pembangunan perangkat lunak. Pada tahap analisa penulis mencari kebutuhan sistem. Analisa ini bertujuan untuk menentukan spesifikasi apa saja yang dibutuhkan untuk membangun sistem. Penulis merncang aplikasi ini untuk mempermudah dalam penyampaian materi Renang Gaya Katak. Aplikasi ini berisikan gerakan dasar seperti gerakan kaki yaitu Kaki tekuk, tendang, rapatkan. Ada juga gerakan tangan yaitu luruskan tangan di atas kepala, gerakkan tangan ke samping kiri dan kanan dan Gerakan kombinasi tangan dan kaki dan mengambil nafas. Pembuatan
aplikasi
ini
bertujuan
untuk
membantu
user
dalam
mendapatkan informasi dengan mudah melalui animasi. Aplikasi ini juga memungkinkan user mengulang semua materi hingga dapat dipahami. Penulis berharap dengan membangun aplikasi ini, user dapat lebih cepat memahami semua materi Renang Gaya Katak. Dengan design dan karakter menarik semoga aplikasi ini dapat dogunakan oleh berbagai kalangan.
3.2.
Analisa Kebutuhan
Dalam melakukan penelitian, dibutuhkan beberapa komponen yang mendukung terhadap keberhasilan penelitian ini yaitu : 1. Perangkat lunak (software) a. Sistem operasi Windows 7 b. Software animasi Adobe Flash Profesional CS6 c. Software animasi Adobe Ilustrator d. Software Swish Max e. Sotfware Adobe Photoshop
39
40
2. Perangkat keras (hardware) Seperangkat Komputer
3.3.
Konsep Pengembangan aplikasi pembelajaran Renang Gaya Katak ini dibuat
sebagai alternatif lain dalam penyampaian atau pemberian materi untuk semua kalangan yang menyukai olah raga ini terutama Renang dengan Gaya Katak. Agar menarik, dalam aplikasi berisi simulasi gerakan – gerakan Renang Gaya Katak, penjelasan gerakan menggunakan animasi agar tidak membosankan.
Konsep aplikasi ini sebagai berikut : Tabel 3.1 Konsep Aplikasi Judul
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Pengguna
Semua kalangan pecinta Renang Gaya Katak
Suara
Menggunakan file yang mendukung suara
Gambar
Menggunakan format Gif dan jpeg
Animasi
Animasi dibuat sendiri
Menggunakan tombol untuk menjalankan perintah
Disesuaikan dengan gerakan yang ada pada objek
Aplikasi ini dibuat sebagai salah satu alternatif media penyampaian materi yang semula manual menjadi digital. Dengan aplikasi ini diharapkan mampu mempercepat penyerapan dalam penerimaan materi. Aplikasi ini dapat dibuka dengan media apapun yang mendukung, sehingga pengulangan semua materi dapat dilakukan kapanpun.
3.4.
Konsep Pengoperasian Aplikasi Aplikasi pembelajaran bertahap renang gaya katak berbasis animasi ini
berbentuk CD interaktif yang akan digunakan sebagai media pembelajaran edukasi intraktif.
41
Cara pengoperasian aplikasi ini sangat mudah karena tidak perlu instalasi. Cukup masukan CD yang berisi aplikasi ini maka akan keluar fotmat file flash swf dan tinggal klik maka program tersebut langsung masuk ke halaman pembuka. Setelah di klik maka akan masuk ke halaman menu utama dan user tinggal memilih menu yang tersedia di halaman menu utama agar bisa memilih menu button yang ada.
Deskripsi konsep aplikasi ini adalah sebagai berikut:
Judul : “Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi”
Audiens : Sekolah-sekolah renang maupun sekolah dasar SD.
Bentuk Aplikasi : Media Pembelajaran Interaktif
Gambar Menggunakan file JPEG pada bacground utama animasi (800x600 pixel), (blue-water-elemental-backgrounds-wallpapers.jpg)
Audio : -
Intro menggunakan file MP3 (19 detik dan 306 kb).
-
Renang menggunakan file MP3 dengan panjang suara (25 detik dan 400 kb).
-
Panduan gerakan kaki menggunakan file MP3 (28 detik dan 446 kb).
-
Pandauan gerakan tangan menggunakan file MP3 (28 detik dan 446 kb).
Animasi : Animasi gambar dan tombol dibuat oleh penulis.
42
3.5.
Perancangan Dalam tahap ini penulis menjelaskan tentang rancangan aplikasi ini
menggunakan multimedia Luther (Sutopo, 2002: 32) yang terdiri dari 6 (enam) tahapan pada Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi. 3.5.1
Storyboard Storyboard merupakan deskripsi masig-masing tampilan suatu kejadian
dari movie yang akan dimainkan. Dengan mencantumkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Satu kolom storyboard mewakili satu tampilan di layar monitor.
1. Storyboard Halaman Pembuka Nama
Nim Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Logo UMB
PLAY
Universitas Mercubuana
Gambar 3.1. Storyboard Halaman Pembuka Scene name Link Ket Dimensi Animasi
: Halaman Pembuka : Scene 1 pada layer tombol : Menampilkan Halaman Pembuka : 800 x 600 pixel : Huruf muncul Nama dan NIM Penulis
43
Gambar Sound Navigasi Start
: Bagcround Biru dan Putih : Musik intro : : Menuju Menu Utama
3.5.1.1 Storyboard Halaman Menu Utama
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
EXIT
Gerakan Tangan
ANIMASI
Gerakan Kaki
Gerakan Keseluruhan
Logo Universitas Gambar 3.2. Storyboard Halaman Menu Utama
Scene name
: Halaman Menu Utama
Link
: Scene pada layer Halaman Menu Utama
Ket
: Menampilkan Halaman Menu Utama
Dimensi
: 800 x 600 pixel
Animasi
: Gambar objek bergerak Tombol
Gambar
: Bagcround Biru dan Putih
Sound
: Musik intro
44
Navigasi
:
Gerakan Tangan
: Menuju ke Animasi Gerakan Tangan
Gerakan Kaki
: Menuju ke Animasi Gerakan Kaki
Gerakan Keseluruhan : Menuju ke Animasi Gerakan Keseluruhan Exit
: Menuju Halaman Penutup/ Credit Title
2. Storyboard Halaman Animasi Renang Gerakan Tangan Menu
Animasi Gerak
Gerakan Tangan Tujuan menambah laju Pergerakan renang
Animasi Gerak
Gambar 4.6. Desain Gerakan Animasi
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Gambar 3.3. Storyboard Halaman Animasi Renang Gerakan Tangan Scene name
: Halaman Animasi Gerakan Tangan
Link
: Scene pada Menu Utama
Ket
: Menampilkan Animasi Gerakan Tangan
Dimensi
: 800 x 600 pixel
Animasi
: Gambar objek bergerak Tombol Text
Gambar
: Bagcround Biru dan Putih
Sound
: Panduan Gerakan Tangan
Navigasi
:
Menu
: Kembali ke Menu Utama
45
3. Stroyboard Halaman Animasi Renang Gerakan Kaki
Menu
Animasi Gerak
Gerakan Kaki Tujuan menambah laju Pergerakan renang
Animasi Gerak
Gambar 4.7. Desain Animasi Gerakan Kaki Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Gambar. 3.4. Storyboard Halaman Animasi Renang Gerakan Kaki
Scene name
: Halaman Animasi Gerakan Kaki
Link
: Scene pada Menu Utama
Ket
: Menampilkan Animasi Gerakan Kaki
Dimensi
: 800 x 600 pixel
Animasi
: Gambar objek bergerak Tombol Text
Gambar
: Bagcround Biru dan Putih
Sound
: Panduan Gerakan Kaki
Navigasi
:
Menu
: Kembali ke Menu Utama
46
4. Stroyboard Halaman Animasi Renang Gerakan Keseluruhan
Menu
Animasi Gerak
Gerakan Tangan dan Kaki dilakukan secara bergantian
Tombol Proses Pembuatan
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Gambar 3.5. Stroyboard Halaman Animasi Renang Gerakan Keseluruhan
Scene name
: Halaman Animasi Gerakan Keseluruhan
Link
: Scene pada Menu Utama
Ket
: Menampilkan Animasi Gerakan Keseluruhan
Dimensi
: 800 x 600 pixel
Animasi
: Gambar objek bergerak Tombol Text
Gambar
: Bagcround Biru dan Putih
Navigasi
:
Menu
: Kembali ke Menu Utama
47
5. Stroyboard Halaman Animasi Pembentukan Karakter
Menu
Pembentukan Karakter
Gambar 4.7. Desain Proses Pembuatan Proses Pembuatan Gambar 4.8 Desain Menggunakan Aplikasi Adobe Animasi Ilustrator Scene name
: Proses Pembuatan
Link
: Scene 4
Ket
: Menampilkan Proses Pembuatan
Dengan Menggunakan Shape Tool
Gambar 3.6. Stroyboard Halaman Animasi Pembentukan Karakter
Scene name
: Halaman Animasi Pembentukan Karakter
Link
: Scene pada Gerakan Keseluruhan
Ket
: Menampilkan Animasi Pembentukan Karakter
Dimensi
: 800 x 600 pixel
Animasi
: Gambar objek bergerak Tombol Text
Gambar
: Bagcround Biru dan Putih
Navigasi
:
Menu
: Kembali ke Menu Utama
48
6. Stroyboard Halaman Animasi Simulasi Renang Gaya Katak Menu Simulasi Lomba Renang Gaya Katak
ANIMASI BERJALAN
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Gambar 3.7. Stroyboard Halaman Animasi Simulasi Renang Gaya Katak
Scene name
: Halaman Animasi Simulasi Renang Gaya Katak
Link
: Scene pada Menu Utama
Ket
: Menampilkan Animasi Simulasi Renang Gaya Katak
Dimensi
: 800 x 600 pixel
Animasi
: Gambar objek bergerak Simulasi Lomba Renang Gaya Katak Tombol Text
Gambar
: Bagcround Biru dan Putih
Navigasi
:
Menu
: Kembali ke Menu Utama
49
7. Stroyboard Halaman Animasi Kuis
QUIZ
Pertanyaan Kuis
Jawaban A
Jawaban B
Timer
KETERANGAN Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi
Gambar 3.8. Stroyboard Halaman Animasi Kuis
Scene name
: Halaman Animasi Kuis
Link
: Scene pada Menu Utama
Ket
: Menampilkan Animasi Kuis
Dimensi
: 800 x 600 pixel
Animasi
: Waktu lama menjawab pertanyaan selama 2 menit Tombol apabila waktu habis Tombol Mulai Text
Gambar
: Bagcround Biru dan Putih
Navigasi
:
Menu
: Kembali ke Menu Utama
Tombol Mulai
50
8. Stroyboard Halaman Animasi Credit Title
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi Nama Mahasiswa Nim Mahasiswa
GAMBAR
Logo Universitas
Gambar 3.9 Stroyboard Halaman Animasi Credit Title
Scene name
: Halaman Animasi Penutup/Credit Title
Link
: Scene pada Menu Utama
Ket
: Menampilkan Animasi Penutup/Credit Title
Dimensi
: 800 x 600 pixel
Animasi
: Text Berjalan
Gambar
: Coklat
51
3.6.
Perancangan Design Struktur Navigasi Halaman Pembuka Halaman Utama
Tombol 1
Tombol 2
Tombol 3
Tombol 4
Tombol 5
Tombol 6
Exit
Gambar 3.10 Perancangan Design Struktur Navigasi
3.7.
Perancangan Aplikasi dengan Flowchar
Aplikasi Pembelajaran Bertahap Renang Gaya Katak Berbasis Animasi akan dikembangkan digambarkan dalam bagan alir (Flowchar) yang dapat dilihat pada gambar berikut: Start
Halaman Utama
Menu Pilihan 1. Tangan 2. Gerakan Kaki 3. Gerakan Keseluruhan 4. Simulasi Lomba 5. Kuis 6. keluar
Gerakan Tangan
Gerakan Kaki
Gerakan Keseluruhan
Simulasi Lomba
Pembuatan Karakter
Gambar 3.11 Aplikasi dengan Flowchar
Kuis
Credit title
52
3.8.
Perancangan Antarmuka
Pada tahap ini penulis membuat tampilan awal yang berisi Satu tombol dari aplikasi yang akan dibuat, guna untuk memulai proses pembelajaran Gerakan Renang Gaya Katak.
1.
Tampilan Halaman Pembuka (intro) Halaman pembuka atau intro adalah tampilan paling awal sebelum pengguna masuk ke halaman utama aplikasi, sebagian besar halaman intro berisikan tombol, teks dan gambar. Halaman ini dibuat untuk menarik perhatian pengguna. Pada halaman ini terdapat button untuk masuk ke halaman utama.
TEXT
TEXT
TEXT
MASUK
LOGO
Gambar 3.12. Tampilan Pembuka
2.
Tampilan Halaman Utama Halaman utama adalah tampilan utama yang berisikan button-button gerakan yang bila ditekan akan memunculkan animasi gerakan renang secara bertahap. Pada halaman ini, juga terdapat area animasi, area keterangan serta area button untuk keluar.
53
TEXT
EXIT
TOMBOL 1
TOMBOL 2
ANIMASI
TOMBOL 3
LOGO Gambar 4.9. Tampilan Halaman Utama Gambar 3.13. Tampilan Halaman Utama 3.
Tampilan Halaman Gerakan Animasi Halaman Gerakan animasi adalah halaman yang akan menampilkan animasi gerakan renang secara bertahap, disini juga terdapat keterangan dari gerakan tersebut. Untuk kembali ke halaman utama dan melihat gerakan renang yang lain maka bisa tekan button menu yang berada diatas kanan. MENU
ANIMASI BERJALAN
KETERANGAN
Gerakan 3.14. Tampilan Gerakan Animasi
ANIMASI
54
Tampilan Halaman Simulasi Lomba Renang Halaman Simulasi Lomba Renang ini menampilkan secara detail perlombaan Renang Gaya Katak setelah melalui penggabungan aniamasi disetiap gerakan yaitu gerakan tangan, gerakan kaki dan gerakan keseluruhan. 4.
MENU TEXT
TEXT KETERANGAN
Gerakan 3.15. Tampilan Gerakan Simulasi Lomba 5.
Tampilan Halaman Proses Pembuatan Halaman proses pembuatan ini adalah halaman yang menampilkan cara membuat objek animasi gerakan renang secara bertahap. MENU
TEXT
ANIMASI
TEXT
TEXT
Gambar 3.16. Tampilan Proses Pembuatan
55
Tampilan Halaman Kuis Halaman Kuis ini adalah halaman yang menampilkan quiz yang terdiri dari 10 pertanyan terkait renang dan menampilkan skor jika benar dan menampilkan skor berkurang jika salah. 6.
QUIZ
TEXT
TIME
TEXT KETERANGAN
TOMBO L
Gambar KETERANGAN 3.17. Tampilan Hamalan Kuis
7.
Tampilan Halaman Penutup Halaman penutup ini adalah animasi halaman penutup yang menampilkan credit title nama, jurusan, universitas dan image objek berenang.
TEXT TEXT TEXT GAMBAR
LOGO
Gambar 3.18. Tampilan Penutup
56
3.9.
Pengumpulan Bahan (Material Collecting) Aplikasi Pembelajaran Bertahapa Renang Gaya Katak Berbasis Animasi
yang digunakan sebagai pembelajaran siswa siswi sekolah dasar, pada tahapa pengumpulan bahan penulis membagi menjadi beberapa bagian, diantaranya yaitu bahan yang dibuat sendiri dan pengumpulan bahan yang diunduh dari internet.
Tabel 3.2 Pengumpulan bahan yang di buat sendiri Nama
Ukuran
Piksel
Tipe
Durasi
Keterangan
Gerakan
1.097 kb
-
Vektor
-
Di
Tangan
menggunakan Adobe Ilustrator
Gerakan
1.097 kb
-
Vektor
-
Kaki
Di menggunakan Adobe Ilustrator
Gerakan
1.097 kb
-
Vektor
-
Keseluruhan
Di menggunakan Adobe Ilustrator
Animasi
1.097 kb
-
Vektor
-
Di menggunakan Adobe Ilustrator
Lomba
1.097 kb
-
Vektor
-
Di menggunakan Adobe Ilustrator
Button
7 kb
-
Vektor
-
Di
buat
menggunakan
57
Adobe Flash CS6 Panduan
447 kb
-
MP3
28
Di
buat
gerakan
menggunakan
kaki
Coll Edit Pro
Panduan
447 kb
-
MP3
28
Di
buat
gerakan
menggunakan
tangan
Coll Edit Pro
Tabel 3.3 Pengumpualan bahan yang di unduh dari internet Nama
Ukuran
Piksel
Tipe
Durasi
Keterangan
blue-water-
30,1 kb
800x600
JPEG
-
http://amanari.or
elemental-
g.br/agrotoxicos-
backgrounds-
na-agua-podem-
wallpapers
causar-alergia/
The-Dictator-
215 kb
800x600
JPEG
-
http://www.123rf
Republic-Of-
.com/photo_5109
Wadiya-
081_swimming-
Underwater-Pool-
pool-tiles-
Background-Design-
underwater-
001
useful-as-abackground.html
Logo Mercubuana
45 kb
450x450
Gif
-
http://www.merc ubuana.ac.id
Intro
307 kb
-
MP3
19
http://www.pacd v.com
Renang
400 kb
-
MP3
25
http://www.pacd v.com