perancangan permainan edukasi senam otak
-
Upload
khangminh22 -
Category
Documents
-
view
1 -
download
0
Transcript of perancangan permainan edukasi senam otak
PERANCANGAN PERMAINAN EDUKASI SENAM OTAK
DENGAN MODEL INSTRUCTIONAL GAMES
PADA MADRASAH IBTIDIYAH AT-TAQWA BERBASIS MULTIMEDIA
Oleh :
RINAL HAFIZ
109091000044
PROGRAM SARJANA (S1) KOMPUTER
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI (UIN) SYARIF HIDAYATULLAH
JAKARTA
2015 M / 1436 H
iv
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI
BENAR-BENAR HASIL KARYA SENDIRI YANG BELUM
PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA
ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA
APAPUN.
Jakarta, 29 Juni 2015
Rinal Hafiz
NIM. 109091000044
v
ABSTRAK
Rinal Hafiz - 109091000044, PERANCANGAN PERMAINAN
EDUKASI SENAM OTAK DENGAN MODEL INSTRUCTIONAL GAMES
PADA MADRASAH IBTIDIYAH AT-TAQWA BERBASIS MULTIMEDIA
(dibawah bimbingan Hendra Bayu Suseno, M.Kom dan Defiana Arnaldy,
S.Tp, M.Si)
Perkembangan teknologi multimedia kini telah menjanjikan potensi besar
dalam merubah cara seseorang belajar, yang salah satu pemanfaatannya dapat
digunakan untuk pengajaran dan pembelajaran agar kegiatan belajar mengajar
tidak lagi membosankan. Namun perlu disadari, keefektifan semua metode dan
media pembelajaran itu tidak akan berarti jika siswa yang di didik memiliki
kelemahan dalam menangkap dan menghafal suatu pelajaran yang baru diberikan.
Berdasarkan hasil wawancara dengan Bapak M. Naseh, S.Pd.I selaku wali kelas 5
dan kepala bidang kesiswaan Madrasah Ibtidaiyah At Taqwa, tingkat keseriusan
anak dalam belajar baik di sekolah maupun di rumah masih sangat minim. Juga
ditambahkan oleh Ibu Rumyanih, S.Pd.I sebagai Kepala Madrasah Ibtidaiyah At-
Taqwa menegaskan bahwa kurangnya alat peraga dan metode belajar
konvensional biasa yang terlihat membosankan menjadi faktor menurunnya minat
siswa dalam belajar. Kondisi ini sangat memprihatinkan karena tingkat
kemampuan untuk berfikir, mencerna serta mengingat pelajaran sangat
dibutuhkan dalam proses belajar siswa, sehingga penulis merancang permainan
yang dapat memberikan solusi yang mampu meningkatkan kualitas konsentrasi
belajar pada siswa MI At-Taqwa. Oleh karenanya peneliti membuat permainan
dan senam otak yang diintegrasikan kedalam media berbasis teknologi multimedia
dengan model instructional games yang dapat menstimulus fungsi otak untuk
menangkap informasi, menghafal, berfikir dan berkonsentrasi. Dalam penelitian
ini, peneliti menggunakan metode studi pustaka, wawancara dan kuesioner dalam
pengumpulan data. Pengembangan sistem pada pembuatan aplikasi, peneliti
mengguanakan metode Multimedia Development Life Cycle dari Luther dimana
tahapannya adalah konsep (concept), perancangan (design), pengumpulan bahan
(material collecting), pembuatan (assembly), pengujian (testing) dan distribusi
(distribution). Dari penelitian ini dihasilkan permainan edukasi senam otak dan
hasil aplikasi diserahkan kepada Madrasah Ibtidaiyah At-Taqwa serta di unggah
ke website file sharing. Disarankan untuk penelitian selanjutnya agar dapat
digunakan pada mobile dan penambahan tingkatan permainan untuk tingkatan
Menengah Pertama dan Menengah Atas. Dalam perancangan digunakan aplikasi
Adobe Flash CS6, Adobe Photoshop CS6, serta bahasa pemograman yang
digunakan adalah Java Script 2.0.
Kata kunci : Senam otak, animasi, permainan edukasi, multimedia.
Daftar Pustaka : 39 (1994-2013)
Jumlah Halaman : bab v + xviii+ 11 tabel + 62 gambar + 6 lampiran + 155 hal.
vi
KATA PENGANTAR
Puji dan syukur kehadirat Allah SWT, Rab semesta alam yang telah
memberikan rahmat dan hidayah-Nya sehingga sehingga penyusunan skripsi ini
yang berjudul “Perancangan Permainan Edukasi Senam Otak Dengan Model
Instructional Games Pada Madrasah Ibtidiyah At-Taqwa Berbasis
Multimedia” dapat terselesaikan dengan baik. Shalawat serta salam senantiasa
tercurah kepada Rasulullah Muhammad SAW yang telah menyampaikan ajaran
Islam sehingga dapat menjadikan hambah Allah SWT yang taat dan diberi
ketenangan dalam menyelesaikan skripsi ini.
Pada kesempatan ini, penulis ingin mengucapkan terima kasih kepada
pihak-pihak yang telah memberikan banyak bantuan, baik dalam bentuk dukungan
moril maupun materi selama penulis melaksanakan penyusunan skripsi ini. Secara
khusus penulis ingin mengucapkan terima kasih kepada:
1. Bapak Dr. Agus Salim, M. Si selaku Dekan Fakultas Sains dan Teknologi.
2. Ibu Arini, MT selaku Ketua Program Studi Teknik.
3. Bapak Hendra Bayu Suseno, M.Kom selaku dosen Pembimbing 1 dan Bapak
Defiana Arnaldy, S.Tp, M.Si selaku dosen pembimbing 2. Terimakasih telah
sabar membimbing dan mendengarkan curhatan penulis. Mohon maaf karena
sering menghilang dari peredaran. Semoga Allah membalas kebaikan dan
menjadikannya sebagai amal soleh, Aamiin.
4. Ibu Rumyanih, S.Pd.I selaku Kepala Madrasah dan Bapak M. Naseh, S.Pd.I
selaku wali kelas 5 dan kepala bidang kesiswaan serta semua pihak Madrasah
vii
Ibtidaiyah At-Taqwa yang telah memberikan bimbingan serta dukungan, baik
moril maupun teknis sehingga penulis dapat menyelesaikan penelitian dengan
baik.
5. Ibu, Ayah, Kakak dan Adik yang semoga Allah SWT selalu melimpahkan
Rahmat serta Hidayah-Nya kepda keluarga Kita. Terimakasih atas doa,
dukungan, semangat, dan motivasi dalam setiap langkah penulis.
6. Sahabat-sahabat Komunitas Doa Ibu (Faried, Ridho, Dini, Restie, Yuli dan
additional player yang baru ikut nimbrung; Saeful dan Ohang) Teman-teman
TI 2009. Serta teman penerus perjuangan TI Multimedia 2009 yang telah
memberikan semangat, dukungan, dan bantuan kepada penulis dalam
menyelesaikan penelitian ini.
7. Special thanks to printer Ridho, scanner, kemeja dan sepatu olahraganya
Ohang, laptop Yuli, rumah kostan Faried, modalnya Febri, PSDnya Taphe,
coding-annya Yoga, serta apalah itu banyak yang tidak bisa disebutkan semua
sebagai saksi bisu perjuangan penyusunan skripsi ini.
8. Komunitas Musik Mahasiswa Ruang Inspirasi Atas Keglisahan atas
inspirasinya yang selama ini kadang jadi pelipur lara. Pergerakan Mahasiswa
Islam Indonesia yang sering ngajak ke puncak gratis.
9. Sheila On 7 yang nanti mau datang.
10. Semua pihak yang secara langsung maupun tidak langsung membantu penulis
selama kegiatan hingga penyelesaian laporan ini.
Akhir kata penulis juga ingin mengucapkan maaf yang sebesar-besarnya
kepada semua pihak yang terkait, apabila selama ini ada hal-hal yang kurang
viii
berkenan yang penulis lakukan. Penulis sadar dalam penulisan skripsi ini masih
banyak kekurangan, maka dari itu penulis juga mengharapkan saran serta kritik
dari pembaca dan semua pihak agar penulisan skripsi selanjutnya menjadi lebih
baik lagi.
Jakarta, Juni 2015
Rinal Hafiz
ix
DAFTAR ISI
Halaman
HALAMAN JUDUL ...................................................................................... i
LEMBAR PENGESAHAN ........................................................................... ii
LEMBAR PENGESAHAN UJIAN .............................................................. iii
PERNYATAAN .............................................................................................. iv
ABSTRAK ...................................................................................................... v
KATA PENGANTAR .................................................................................... vi
DAFTAR ISI ................................................................................................... ix
DAFTAR GAMBAR ...................................................................................... xiv
DAFTAR TABEL .......................................................................................... xvii
DAFTAR LAMPIRAN .................................................................................. xviii
BAB I PENDAHULUAN ............................................................................... 1
1.1. Latar Belakang Masalah ................................................................ 1
1.2. Perumusan Masalah....................................................................... 3
1.3. Batasan Masalah ............................................................................ 3
1.4. Tujuan dan Manfaat Penelitian ..................................................... 4
1.4.1. Tujuan Penelitian................................................................ 4
1.4.2. Manfaat Penelitian.............................................................. 5
1.5. Metodologi Penelitian ................................................................... 5
1.5.1. Metode Pengumpulan Data ............................................... 5
1.5.2. Metode Pengembangan ...................................................... 6
1.6. Sistematika Penulisan ................................................................... 6
x
BAB II LANDASAN TEORI ....................................................................... 9
2.1. Pengertian Permainan .................................................................... 9
2.1.1. Jenis-Jenis Game ................................................................. 13
2.1.1.1. Side Scrolling Game ............................................... 14
2.1.1.2. Shooting Game ........................................................ 14
2.1.1.3. RPG (Role Playing Game) ...................................... 15
2.1.1.4. RTS (Real Time Strategy) ....................................... 16
2.1.1.5. Simulation ............................................................... 17
2.1.1.6. Racing ..................................................................... 18
2.1.1.7. Fighting ................................................................... 18
2.1.1.8. Puzzle Games .......................................................... 19
2.1.2. Pengertian Game Edukasi ................................................... 20
2.2. Multimedia .................................................................................... 21
2.2.1. Kelebihan Multimedia ......................................................... 22
2.2.2. Elemen-elemen Multimedia ................................................ 23
2.2.2.1. Teks ......................................................................... 23
2.2.2.2. Gambar ................................................................... 24
2.2.2.3. Suara Digital (Audio Digital) .................................. 26
2.2.2.4. Video ....................................................................... 27
2.2.2.5. Animasi ................................................................... 28
2.2.2.6. Link Interaktif ......................................................... 30
2.2.3. Tahap Pengembangan Multimedia ...................................... 31
xi
2.2.3.1. Concept (Pengonsepan) .......................................... 32
2.2.3.2. Design (Pendesainan) ............................................. 33
2.2.3.3. Material Collecting (Pengumpulan Materi) ........... 34
2.2.3.4. Assembly (Pembuatan) ............................................ 34
2.2.3.5. Testing (Pengujian) ................................................. 34
2.2.3.6. Distribution (Pendistribusian) ................................ 35
2.3. Media Pembelajaran ...................................................................... 35
2.3.1. Tujuan Media ...................................................................... 37
2.4. Perancangan Sistem....................................................................... 37
2.4.1. Storyboard ........................................................................... 37
2.4.2. STD (State Transition Diagram)......................................... 37
2.4.3. Struktur Navigasi................................................................. 40
2.4.3.1. Struktur Linier ........................................................ 40
2.4.3.2. Struktur Menu ......................................................... 40
2.4.3.3. Struktur Hierarki ..................................................... 41
2.4.3.4. Struktur Jaringan ..................................................... 41
2.4.3.5. Struktur Navigasi .................................................... 41
2.4.4. ActionScript ......................................................................... 42
2.4.5. Animasi ............................................................................... 43
2.4.5.1. Tweened animation ................................................. 44
2.4.5.2. Animasi masking .................................................... 44
2.4.5.3. Animasi Frame per Frame ..................................... 45
2.5. Software Authoring ....................................................................... 45
xii
2.5.1. Adobe Photoshop CS6 Extended ........................................ 45
2.5.1.1. Area Kerja Dalam Adobe Photoshop CS6 .......... 46
2.5.1.2. Mengenal Panel Tools / Toolbox .......................... 49
2.5.2. Adobe Flash CS6 Extended ................................................ 53
2.5.2.1. Area Kerja Dalam Adobe Flash CS6 .................. 54
2.5.2.2. Mengenal Panel Tools / Toolbox .......................... 55
2.6. Otak ............................................................................................... 59
2.6.1. Meningkatkan Kinerja Otak ................................................ 60
2.6.2. Senam Otak ......................................................................... 60
2.6.2.1. Pemanfaatan senam otak pada proses
Pembelajaran ......................................................... 62
2.6.2.2. Manfaat Senam Otak .............................................. 65
2.7. Penelitian Sejenis .......................................................................... 67
BAB III METODOLOGI PENELITIAN .................................................... 69
3.1. Metode Pengumpulan Data ........................................................... 69
3.1.1. Studi Kepustakaan ............................................................... 69
3.1.2. Studi Lapangan .................................................................... 69
3.2. Metode Pengembangan ................................................................ 72
3.3. Alasan Menggunakan Metode Luther .......................................... 77
BAB IV HASIL DAN PEMBAHASAN ....................................................... 78
4.1. Concept (Pengonsepan) ................................................................. 78
4.2. Design (Pendesainan) ..................................................................... 82
4.2.1. Perancangan Storyboard ..................................................... 82
xiii
4.2.2. Perancangan Struktur Navigasi ........................................... 94
4.2.3. Perancangan State Transition Diagram (STD) ................... 95
4.3. Material Collecting (Pengumpulan Materi) ................................... 98
4.3.1. Bahan Teks .......................................................................... 98
4.3.2. Bahan Gambar ..................................................................... 98
4.3.3. Bahan Animasi (Flash dan Video) ...................................... 99
4.3.4. Bahan Suara......................................................................... 99
4.4. Assembly (Pembuatan) ................................................................... 100
4.4.1. Layout dan Desain ............................................................... 100
4.4.2. Pembuatan Game................................................................. 125
4.4.3. Tahap Pengkodean .............................................................. 132
4.5. Testing (Pengujian) ........................................................................ 141
4.5.1 Pengujian Tampilan.............................................................. 142
4.5.2. Pengujian Fungsi ................................................................. 146
4.6. Distribution (Pendistribusian) ........................................................ 148
BAB V KESIMPULAN DAN SARAN ......................................................... 151
5.1. Kesimpulan ................................................................................... 151
5.2. Saran ............................................................................................. 151
DAFTAR PUSTAKA .................................................................................... 153
LAMPIRAN .................................................................................................... 154
xiv
DAFTAR GAMBAR
Halaman
Gambar 2.1 Game Metal Slug ................................................................ 14
Gambar 2.2 Game Conflict Global Strom ............................................... 15
Gambar 2.3 Game Ragnarok ................................................................... 16
Gambar 2.4 Game Clash Of Clans .......................................................... 17
Gambar 2.5 Game Champhionship Manager .......................................... 17
Gambar 2.6 Game Need for Speed Most Wanted .................................... 18
Gambar 2.7 Game Bloody Roar 2 ........................................................... 19
Gambar 2.8 Game Teka Teki Silang ....................................................... 19
Gambar 2.9 Gambaran definisi multimedia ............................................. 22
Gambar 2.10 Penggunaan teks dalam desain grafis .................................. 24
Gambar 2.11 Contoh Gambar .................................................................... 24
Gambar 2.12 Ilustrasi Gelombang Suara ................................................... 26
Gambar 2.13 Teknik Editing Video Menggunakan Komputer ................. 28
Gambar 2.14 Animasi ................................................................................ 29
Gambar 2.15 Tahap Pengembangan Multimedia ...................................... 32
Gambar 2.16 Simbol State ......................................................................... 39
Gambar 2.17 Simbol Transistion State ...................................................... 39
Gambar 2.18 Kondisi dan Aksi ................................................................. 40
Gambar 2.19 Adobe Photoshop CS6 ......................................................... 46
Gambar 2.20 Area Kerja Adobe Photoshop CS6 ...................................... 46
Gambar 2.21 Toolbox pada Adobe Photoshop CS6 .................................. 47
xv
Gambar 2.22 Adobe Flash CS6 ................................................................. 53
Gambar 2.23 Area Kerja Adobe Flash CS6 .............................................. 54
Gambar 2.24 Tools pada Adobe Flash CS6 ............................................... 56
Gambar 4.1 Struktur Navigasi ................................................................... 94
Gambar 4.2 State Transition Diagram Selamat Datang ............................... 95
Gambar 4.3 State Transition Diagram Menu Utama.................................... 96
Gambar 4.4 State Transition Diagram Pemanasan ...................................... 96
Gambar 4.5 State Transition Diagram Game .............................................. 97
Gambar 4.6 State Transition Diagram Manfaat ........................................... 97
Gambar 4.7 Logo Game ............................................................................ 100
Gambar 4.8 Langkah Pembuatan Logo ....................................................... 101
Gambar 4.9 Langkah Pembuatan Animasi Opening I .................................. 102
Gambar 4.10 Langkah Pembuatan Animasi Opening II ................................. 103
Gambar 4.11 Desain Halaman Pembuka ...................................................... 104
Gambar 4.12 Langkah Pembuatan Latar Belakang Halaman Pembuka I ......... 105
Gambar 4.13 Langkah Pembuatan Latar Belakang Halaman Pembuka II ........ 107
Gambar 4.14 Hasil Latar Belakang Halaman Pembuka ................................. 108
Gambar 4.15 Langkah Pembuatan Animasi Pada Adobe Flash ...................... 109
Gambar 4.16 Langkah Pembuatan Animasi Teks Berjalan ............................. 110
Gambar 4.17 Langkah Pembuatan Animasi Orang ........................................ 111
Gambar 4.18 Desain Halaman Selamat Datang ............................................. 112
Gambar 4.19 Langkah Pembuatan Halaman Selamat Datang I ....................... 113
xvi
Gambar 4.20 Langkah Pembuatan Halaman Selamat Datang II ...................... 114
Gambar 4.21 Desain Halaman Menu Utama ................................................. 116
Gambar 4.22 Langkah Pembuatan Halaman Menu Utama I .......................... 116
Gambar 4.23 Langkah Pembuatan Halaman Menu Utama II ......................... 117
Gambar 4.24 Desain Halaman Pemanasan .................................................... 119
Gambar 4.25 Langkah pembuatan Halaman Pemanasan ................................ 119
Gambar 4.26 Desain Halaman Menu Game .................................................. 121
Gambar 4.27 Langkah Pembuatan Halaman Menu Game .............................. 122
Gambar 4.28 Desain Halaman Game ........................................................... 123
Gambar 4.29 Langkah Pembuatan Halaman Game........................................ 124
Gambar 4.30 Bentuk Sketsa Orang dan Pewarnaan .................................. 125
Gambar 4.31 Langkah Pembuatan Tombol Navigasi ................................ 126
Gambar 4.32 Convert to Symbol ................................................................ 127
Gambar 4.33 Membuat Animasi Frame by Frame ................................... 129
Gambar 4.34 Animasi Tweening ............................................................... 130
Gambar 4.35 Animasi Masking ................................................................. 131
Gambar 4.36 Proses Publish Program ....................................................... 141
Gambar 4.37 Program dengan format .exe ............................................... 141
Gambar 4.38 Desain Cover CD Aplikasi ...................................................... 150
xvii
DAFTAR TABEL
Halaman
Tabel 2.1 Contoh tabel deskripsi konsep ............................................. 32
Tabel 2.2 Penelitian Sejenis ................................................................. 68
Tabel 4.1 Perancangan Storyboard ...................................................... 82
Tabel 4.2 Bahan Teks ................................................................................... 98
Tabel 4.3 Bahan Gambar .............................................................................. 98
Tabel 4.4 Bahan Animasi ............................................................................. 99
Tabel 4.5 Bahan Suara ................................................................................. 99
Tabel 4.6 Spesifikasi minimum komputer untuk pengujian aplikasi ........... 142
Tabel 4.7 Pengujian Tampilan ..................................................................... 142
Tabel 4.8 Pengujian Fungsi .......................................................................... 146
Tabel 4.9 Hasil Evaluasi Kuesioner 20 Responden ................................ 149
xviii
DAFTAR LAMPIRAN
Halaman
Lampiran 1. Surat-surat................................................................................. A-1
Lampiran 2. Wawancara ............................................................................... B-1
Lampiran 3. Kuesioner .................................................................................. C-1
Lampiran 4. Dokumentasi Demo Aplikasi ................................................... D-1
Lampiran 5. Rekap Nilai Hasil Belajar Kelas V ........................................... E-1
1
BAB I
PENDAHULUAN
1.1. Latar Belakang Masalah
Perkembangan teknologi multimedia kini telah menjanjikan potensi
besar dalam merubah cara seseorang untuk belajar, memperoleh informasi,
serta pengetahuan lainnya. Tidak dapat dipungkiri, teknologi multimedia
mampu memberikan kesan yang besar dalam bidang komunikasi dan
pendidikan, karena bisa mengintegrasikan teks, grafik, animasi, audio dan
video. Multimedia telah mengembangkan proses pengajaran yang lebih
dinamik, namun yang lebih penting ialah pemahaman tentang bagaimana
menggunakan teknologi tersebut dengan lebih efektif dan dapat
menghasilkan ide-ide untuk pengajaran dan pembelajaran.
Seiring dengan perkembangan teknologi multimedia tersebut, perlu
kiranya pula mengembangkan potensi kemampuan sumber daya
manusianya. Salah satunya dengan memberikan bekal yang matang,
menambah pengembangan karakter, pengembangan motorik kasar dan
halus, pengetahuan komputer dan sains siswa dalam memperoleh
pendidikan. Salah satu metodenya yaitu dengan penggunaan model
Instructional Games.
Model Instructional Games ini merupakan salah satu metode dalam
pembelajaran dengan multimedia interaktif yang berbasis komputer. Tujuan
model Instructional Games ini adalah untuk menyediakan
suasana/lingkungan yang memberikan fasilitas belajar yang menambah
2
kemampuan siswa. “Model ini tidak perlu menirukan realita, namun dapat
memiliki karakter yang menyediakan tantangan yang menyenangkan bagi
siswa. Model ini juga berperan sebagai pembangkit motivasi dengan
memunculkan cara berkompetisi untuk mencapai sesuatu“ (Rusman, 2005).
Keindahan suatu media merupakan salah satu sarana agar siswa tidak
jenuh dalam belajar dan efek yang terbesar diharapkan siswa dapat
termotivasi untuk semakin giat dalam belajar. Namun perlu disadari,
keefektifan semua metode dan media pembelajaran itu tidak akan berarti
jika siswa yang di didik memiliki kelemahan dalam menangkap dan
menghafal suatu pelajaran yang baru diberikan. Dimana telah diketahui,
otak merupakan bagian yang paling penting dari proses menangkap
informasi, menghafal, berfikir dan berkonsentrasi.
Sebagian besar siswa madrasah ibtidaiyah At Taqwa terutama kelas 4
hingga kelas 6 mengalami kesulitan dalam menghafal pelajaran dan
kegiatan belajar konvensional di anggap membosankan. Menurut Bapak M.
Naseh, S.Pd.I selaku wali kelas 5 dan kepala bidang kesiswaan Madrasah
Ibtidaiyah At Taqwa mengatakan, tingkat keseriusan anak dalam belajar
baik di sekolah maupun di rumah masih sangat minim. Juga ditambahkan
oleh Ibu Rumyanih, S.Pd.I sebagai Kepala Madrasah Ibtidaiyah At-Taqwa,
menegaskan bahwa kurangnya alat peraga dan metode belajar konvensional
biasa yang terlihat membosankan menjadi faktor menurunnya minat siswa
dalam belajar. Kondisi ini sangat memprihatinkan karena tingkat
3
kemampuan untuk berfikir, mencerna serta mengingat pelajaran sangat
dibutuhkan dalam proses belajar siswa.
Berdasarkan penjelasan tersebut diharapkan hasil dari penelitian ini
dapat membimbing siswa bagaimana melatih otaknya secara teratur dan
berkelanjutan. Sehingga tingkat keberhasilan siswa dalam meningkatkan
optimalisasi kemampuan fungsi otaknya dengan media ini akan lebih baik.
Untuk itu penulis memilih judul “PERANCANGAN PERMAINAN
EDUKASI SENAM OTAK DENGAN MODEL INSTRUCTIONAL
GAMES PADA MADRASAH IBTIDIYAH AT-TAQWA BERBASIS
MULTIMEDIA”.
1.2. Perumusan Masalah
Berdasarkan penjabaran latar belakang yang telah dijelaskan, maka
peneliti merumuskan permasalahan, yaitu:
1. Bagaimana cara membuat permainan edukasi dengan metode
instructional game yang dapat dipahami dengan mudah dan diminati
oleh siswa MI At-Taqwa?
2. Bagaimana menyajikan permainan edukasi ini sehingga mampu
mengembalikan konsentrasi dan fokus belajar pada siswa MI At-
Taqwa?
1.3. Batasan Masalah
Untuk mencegah meluasnya permasalahan pada penelitian ini, maka
batasan masalah pada penelitian ini mencakup:
4
1. Sumber data penelitian yang digunakan berasal dari Madrasah
Ibtidaiyah At-Taqwa.
2. Permainan senam otak di bangun berbasis flash dengan menggunakan
ActionScript 2.0.
3. Pengguna dikhususkan untuk siswa tingkatan Madrasah Ibtidaiyah
kelas 4, 5 dan 6.
4. Pengembangan aplikasi ini di titik beratkan pada implementasi model
instructional game.
5. Metode perancangan permainan edukasi senam otak berbasis
multimedia ini didasarkan pada pengembangan multimedia Luther.
6. Permainan ini hanya dapat digunakan di Personal Computer (PC).
1.4. Tujuan dan Manfaat Penelitian
1.4.1. Tujuan Penelitian
Tujuan yang ingin dicapai pada penelitian ini sebagai berikut:
1. Memberikan metode melatih otak sehingga mampu
meningkatkan fungsi dan kemampuan otak siswa.
2. Memudahkan para guru dalam mengajarkan dan memahami
pelajaran kepada siswa dengan mengembalikan konsentrasi
dan fokus belajarnya.
3. Merancang dan membuat aplikasi permainan senam otak
berbasis multimedia.
5
1.4.2. Manfaat Penelitian
1. Mampu memberikan motivasi dan minat belajar pada siswa.
2. Mengoptimalisasi fungsi otak siswa.
3. Mengembalikan konsentrasi dan fokus belajar siswa.
4. Sebagai alat bantu belajar siswa di rumah.
5. Untuk mengatasi persoalan menurunnya kemampuan siswa
dalam menangkap pelajaran di sekolah.
6. Untuk meningkatkan prestasi belajar siswa.
1.5. Metodologi Penelitian
Dalam proses penelitian ini, diperlukan data dan informasi yang akurat
sebagai bahan yang dapat mendukung kebenaran uraian materi dan
pembahasan. Dimana teknik pengumpulan data berupa studi kepustakaan
dan studi lapangan yang terstruktur dengan beberapa metode penelitian yang
di lakukan sebagai berikut:.
1.5.1. Metode Pengumpulan Data
Untuk mendapatkan data-data serta informasi yang diperlukan
dalam perancangan aplikasi multimedia interaktif ini, peneliti
menggunakan empat metode pengumpulan data, yaitu :
1. Studi Kepustakaan
Pengumpulan data dan informasi dilakukan dengan cara
membaca dan mempelajari buku-buku yang berhubungan
dengan permaina edukatif berbasis multimedia serta data-data
6
dari internet yang mendukung dengan topik yang akan dibahas
dalam penyususnan penelitian ini.
2. Studi Lapangan
Metode pencarian data secara langsung di lapangan dengan
wawancara secara langsung dengan pihak terkait di MI At-
taqwa. Pada tahap ini penulis bertanya langsung kepada Ibu
Rumyanih, S.Pd.I selaku kepala sekolah MI At-taqwa dan
Bapak M. Naseh, S.Pd.I selaku wali kelas 5 dan bidang
kesiswaan. Kemudian dengan cara observasi serta penyebaran
kuesioner.
1.5.2. Metode Pengembangan
Metode perancangan permainan edukasi senam otak berbasis
multimedia ini didasarkan pada pengembangan multimedia Luther
yang terdiri dari enam tahap, “yaitu concept (pengonsepan), design
(pendesainan), material collecting (pengumpulan materi), assembly
(pembuatan), testing (pengujian) dan distribution (pendistribusian).
(Iwan Binanto, 2010:259).
1.6. Sistematika Penulisan
Dalam penulisan ini, peneliti telah membagi 5 bab dan tiap bab terdiri
dari beberapa sub bab. Adapun tujuan dari pembagian di dalam beberapa
bab adalah untuk memudahkan pembahasan penulisan penelitian adalah
sebagai berikut:
7
BAB I PENDAHULUAN
Pada bagian ini mensinyalir tentang adanya masalah yang
kemudian diuraikan tentang topik atau masalah yang menjadi isu
sentral penelitian atau gejala penelitian sebagai informasi awal
untuk diteliti. Menjelaskan tentang latar belakang masalah
penggunaan kemampuan otak yang masih sangat minim,
pembatasan dan perumusan masalah, tujuan penelitian, manfaat
penelitian, metodologi penelitian, dan sistematika penulisan.
BAB II LANDASAN TEORI
Menjelaskan tentang uraian konsep-konsep, pengertian-
pengertian, penjelasan, jenis-jenis, faktor-faktor dan unsur-unsur
mengenai aplikasi multimedia dan otak.
BAB III METODOLOGI PENELITIAN
Menjelaskan tentang objek penelitian yang memuat tentang
variabel-variabel penelitian beserta karakteristik atau unsur-unsur
mengenai fungsi otak, populasi penelitian, sampel penelitian, unit
sampel penelitian dan tempat penelitian. Serta metode yang
digunakan dalam penelitian ini.
BAB IV HASIL DAN PEMBAHASAN
Bagian ini menguraikan tahap-tahap pembuatan dan
pengembangan aplikasi.
8
BAB V KESIMPULAN DAN SARAN
Bab ini akan menguraikan tentang kesimpulan dari hasil
penelitian yang telah dilaksanakan serta saran-saran untuk
pengembangan aplikasi yang lebih baik lagi.
9
BAB II
LANDASAN TEORI
Pada bab ini, peneliti menguraikan teori-teori yang mendasari perancangan
aplikasi. Berikut akan dijelaskan tentang teori-teori yang berhubungan dengan
penelitian.
2.1. Pengertian Permainan
Dalam Kamus Besar Bahasa Indonesia, Permainan memiliki arti
“sesuatu yang digunakan untuk bermain; barang atau sesuatu yang
dipermainkan” (Anwar, 2010: 270).
Dalam Bahasa Inggris, permainan di sebut dengan game. Game sendiri
bisa diartikan sebagai aktifitas terstruktur yang biasanya dilakukan untuk
bersenang-senang.
Menurut Semiawan (2007: 19-20), “berbagai game (permainan) dapat
di buat secara sengaja (intentionally) dengan maksud agar anak
meningkatkan beberapa kemampuan tertentu berdasarkan pengalaman
belajar. Melalui aktivitas bermain, berbagai pekerjaannya terwujud.
Bermain adalah aktivitas yang di pilih sendiri oleh anak karena
menyenangkan, bukan karena akan memperoleh hadiah atau pujian.”
“Komputer menjadi popular sebagai media pengajaran karena
komputer memiliki keistimewaan yang tak dimiliki oleh media pengajaran
lain sebelum adanya komputer” (Munir, 2005). Diantara keistimewaan
komputer sebagai media, yaitu:
10
1. Hubungan interaktif, diamana komputer menyebabkan terwujudnya
hubungan antara simulus dan resfons, menumbuhkan inspirasi dan
meningkatkan minat.
2. Pengulangan, dimana komputer memberikan fasilitas bagi
pengguna untuk mengulang materi atau bahan pelajaran yang
diperlukan, memperkuat proses pembelajaran dan memperbaiki
ingatan, memiliki kebebasan dalam memilih materi atau bahan
pelajaran.
3. Umpan balik dan peneguhan, dimana media komputer membantu
pelajar meperoleh umpan balik (feedback) terhadap pelajaran
secara leluasa dan dapat memacu motivasi pelajar dengan
peneguhan positif yang diberi apabila pelajar memberikan jawaban.
4. Simulasi dan uji coba. Dimana media komputer dapat
mensimulasikan atau menguji coba penyajian bahan pelajaran yang
rumit dan teliti.
Bentuk-bentuk pemanfaatan model-model multimedia interaktif
berbasis komputer dalam pembelajaran dapat berupa drill, tutorial,
simulation, dan games (Rusman, 2005). Pada dasarnya salah satu tujuan
pembelajaran dengan multimedia interaktif adalah sedapat mungkin
menggantikan dan atau melengkapi serta mendukung unsur-unsur: tujuan,
materi, metode dan alat penelitian yang ada dalam proses belajar mengajar
dalam sistem pendidikan konvensional yang biasa kita lakukan. Nandi
(2006) menjelaskan model-model multimedia interaktif tersebut, yaitu :
11
1. Model Drills
Model drills merupakan salah satu bentuk model
pembelajaran interaktif berbasis komputer (CBI) yang bertujuan
memberikan pengalaman belajar yang lebih konkret melalui
penyediaan latihan-latihan soal untuk menguji penampilan siswa
melalui kecepatan menyelesaikan latihan soal yang diberikan
program secara umum. Tahapan materi model drill adalah sebagai
berikut :
i. Penyajian masalah-masalah dalam bentuk latihan soal
tingkat tertentu dari penampilan siswa.
ii. Siswa mengerjakan latihan soal.
iii. Program merekam penampilan siswa, mengevaluasi
kemudian memberikan umpan balik.
iv. Jika jawaban yang diberikan benar program menyajikan
soal selanjutnya dan jika jawaban salah program
menyediakan failitas untuk mengulang latihan, yang
dapat diberikan secara parsial atau pada akhir
keseluruhan soal.
2. Model Tutorial
Model tutorial merupakan program pembelajaran interaktif
yang digunakan dalam proses belajar menagajar dengan
menggunakan perangkat lunak atau software berupa program
komputer berisi materi pelajaran. Secara sederhana pola-pola
12
pengoprasian komputer sebagai instruktur pada model tutorial ini
yaitu:
i. Komputer menyajikan materi.
ii. Siswa memberikan respon.
iii. Respon siswa dievaluasi oleh komputer dengan
orientasi pada arah siswa dalam menempuh prestasi
berikutnya.
iv. Jika belum berhasil kembali lagi ketahapan
sebelumnya.
3. Metode Simulasi
Model simulasi pada dasarnya merupakan salah satu strategi
pembelajaran yang bertujuan memberikan pengalaman secara
konkret melalui penciptaan tiruan-tiruan bentuk pengalaman yang
mendekati suasana pengalaman yang mendekati suasana
sebenarnya dan berlangsung dalam suasana yang tanpa resiko.
Model simulasi terbagi dalam empat kategori, yaitu: fisik, situasi,
prosedur dan proses. Secara umum tahapan materi model simulasi
adalah sebagai berikut: pengenalan, penyajian, informasi,
pertanyaan dan respon jawaban, penilaian respon, pemberian
feedback tentang respon, pengulangan, segmen pengaturan
pengajaran, penutup.
13
4. Model Instructional Games
Model Instructional Games merupakan salah satu metode
dalam pembelajaran dengan multimedia interaktif yang berbasis
komputer. Tujuan model Instructional Games ini adalah untuk
menyediakan suasana/lingkungan yang memberikan fasilitas
belajar yang menambah kemapuan siswa. Model ini tidak perlu
menirukan realita, namun dapat memiliki karakter yang
menyediakan tantangan yang menyenangkan bagi siswa. Model ini
juga berperan sebagai pembangkit motivasi dengan memunculkan
cara berkompetisi untuk mencapai sesuatu.
Game mempunyai potensi yang sangat besar dalam membangun
motivasi pada proses pembelajaran. Berbeda dengan pada penerapan metode
konvensional, untuk menciptakan motivasi belajar sebesar motivasi dalam
game, dibutuhkan seorang guru/instruktur yang berkompeten dalam
pengelolaan proses pembelajaran (Clark, 2006).
Dalam hal ini, model permainan yang di ambil pada peneliti adalah
model Instructional Games.
2.1.1. Jenis-Jenis Game
Game atau permainan merupakan suatu alternatif sebagai
penyegar pikiran dari rasa penat yang disebabkan oleh aktivitas dan
rutinitas. Ternyata tidak hanya anak kecil saja yang membutuhkan
hiburan ini, orang dewasa pun cukup banyak yang tergolong sebagai
“maniak” game. Oleh karena itu, tidak salah jika perkembangan
14
teknologi dan peminat game semakin hari semakin meningkat. “Ada
banyak jenis game yang beredar saat ini, di antaranya adalah : Side
Scrolling Game, Shooting, RPG, RTS, Simulation, Racing , dan
Fighting” (Rafrastara,A.D., Dkk. 2009).
Game dapat diklasifikasikan menjadi beberapa tipe yaitu :
2.1.1.1. Side Scrolling Game
Pada game jenis ini, pemain dapat menggerakkan
karakter ke kanan, kiri, atas, atau bawah sesuai dengan
gerakan background. Game jenis ini yang sangat terkenal di
antaranya adalah : Contra, Super mario, Metal Slug, dan
lain sebagainya.
Gambar 2.1 Game Metal Slug
(Sumber: capture screenshot)
2.1.1.2. Shooting Game
Merupakan game yang mewajibkan pemain mencari
dan menembak musuh untuk mencapai tujuan tertentu.
15
Game jenis ini dapat dibedakan menjadi 2 kategori, yaitu
First Person Shooting, dan Third Person Shooting. Contoh
game yang masuk ke dalam jenis game ini di antaranya
adalah : Conflict Global Strom, Counter Strike, Virtual Cop
dan lain sebagainya.
Gambar 2.2 Game Conflict Global Strom
(Sumber: www.theisozone.com)
2.1.1.3. RPG (Role Playing Game)
Pada game ini pemain dapat memerankan suatu
karakter untuk mengemban misi khusus. Game ini terhitung
memiliki kompleksitas frame yang cukup tinggi. Sebagai
contoh, ketika bertemu dengan karakter lain, akan dibawa
ke tampilan frame baru, dan pada saat itu akan
mendapatkan sesuatu atau malah melakukan pertarungan,
Contoh game yang tergolong RPG di antaranya adalah
16
Final Fantasy, Ragnarok, Zelda, Master Of Fantasy, dan
lain sebagainya.
Gambar 2.3 Game Ragnarok
(sumber : www.gaming-age.com)
2.1.1.4. RTS (Real Time Strategy)
Rata-rata game yang masuk kategori ini merupakan
game peperangan. Pada game ini dibebani misi tertentu
dengan dibekali pasukan seadanya (sebagai modal). Pemain
dapat menggerakkan, memperbanyak, dan melengkapi
persenjataan pasukan-pasukan tersebut sambil merancang
strategi untuk mempertahankan dan menguasai wilayah.
Contoh game RTS yang paling terkenal adalah Army Man,
Age of Empire, Clash Of Clans, Stronghold Crusader, War
Craft, dan lain sebagainya.
17
Gambar 2.4 Game Clash Of Clans
(sumber : capture screenshot)
2.1.1.5. Simulation
Merupakan game yang mensimulasikan suatu keadaan
nyata. Contohnya simulasi pengendalian pesawat terbang
pada game Microsoft flight Simulator, simulasi kehidupan
sehari-hari pada game The SIMS dan simulasi seorang
manajer tim sepakbola pada game Champhionship
Manager.
Gambar 2.5 Game Champhionship Manager
(sumber : www.game-server-hosting.net)
18
2.1.1.6. Racing
Game racing merupakan game jenis balapan. Contoh
game Racing yang paling terkenal adalah Need for Speed,
Grand Tourismo, Nascar Rumble, Top Gear, dan lain
sebagainya.
Gambar 2.6 Game Need for Speed Most Wanted
(sumber : capture screenshot)
2.1.1.7. Fighting
Yang termasuk kategori jenis ini adalah game-game
fighting atau tarung. Contoh yang sangat terkenal dari game
Fighting ini diantaranya adalah Bloody Roar2, Street
Fighter, Mortal Combat, Tekken dan lain sebagainya.
19
Gambar 2.7 Game Bloody Roar 2
(sumber : capture screenshot)
2.1.1.8. Puzzle Games
Game yang ditujukan untuk menyelesaikan suatu masalah
tertentu. Hampir semua semua tantangan disini menyangkut
masalah logika contoh game adalah TTS.
Gambar 2.8 Game Teka Teki Silang
(sumber : capture screenshot)
20
2.1.2. Pengertian Game Edukasi
Edukasi adalah sesuatu yang bersifat menyeluruh. Edukasi
tidak hanya berupa pelajaran ataupun diktat kuliah. Edukasi atau
pendidikan memiliki makna yang lebih dalam daripada hanya
sekedar mengajari. Menurut Handriyantini (2009) Game edukasi
adalah permainan yang dirancang atau dibuat untuk merangsang
daya pikir termasuk meningkatkan konsentrasi dan menyelesaikan
masalah.
Game Edukasi merupakan salah satu jenis media yang
digunakan untuk memberikan pengajaran, menambah pengetahuan
penggunanya melalui suatu media yang unik dan menarik. Jenis ini
biasanya ditujukan untuk anak- anak, maka segi tampilan seperti
permainan warna sangat diperlukan disini.
Ketika seseorang meniru sesuatu atau seseorang, ini juga
merupakan bagian dari pendidikan. Maka dari pada itu, sebenarnya
implementasi pendidikan dengan game tidak hanya mengacu pada
pelajaran semata. Ia harus mencakup semua tatanan pendidikan,
meski dengan spesifikasi tertentu. Penggunaan game sebagai sarana
pendidikan sebetulnya bukan merupakan hal yang tabu ataupun
salah. Karena game bersifat entertaint atau menghibur, yang
dimaksud di sini adalah bermain. Psikologi manusia lebih suka
bermain daripada belajar serius. Dalam game, pendidikan diberikan
lewat praktek atau pembelajaran dengan praktek (learning by
21
doing). Dalam game, pemain seolah masuk ke dalam dunia baru
tempat mereka bisa melakukan apa saja. Game secara tidak
langsung mendidik manusia lewat apa yan mereka kerjakan.
Game edukasi atau game yang didedikasikan khusus untuk
pendidikan, biasanya masih berkutat di bidang pelajaran.
Berdasarkan uraian di atas maka dapat disimpulkan permainan
edukasi adalah salah satu bentuk permainan yang berguna untuk
menunjang proses belajar-mengajar secara lebih menyenangkan
dan lebih kreatif yang mampu memberikan pengajaran atau
menambah pengetahuan penggunanya melalui suatu media yang
menarik.
2.2. Multimedia
Menurut Vaughan (2004), multimedia merupakan kombinasi teks, seni,
suara, gambar, animasi dan video yang disampaikan dengan komputer atau
dimanipulasi secara digital dan dapat disampaikan dan atau dikontrol secara
interaktif (Binanto, 2010:2).
Ditinjau dari bahasanya, multimedia terdiri dari 2 kata, yaitu multi dan
media. “Multi memiliki arti banyak atau lebih dari satu, sedangkan media
merupakan bentuk jamak dari medium. juga diartikan sebagai saran, wadah,
atau alat” (Darma, 2009:6).
22
Ada tiga jenis multimedia yaitu :
1. Multimedia interaktif
Pengguna dapat mengontrol apa dan kapan elemen-elemen
multimedia akan dikirimkan atau ditampilkan.
2. Multimedia hiperaktif
Multimedia jenis ini mempunyai suatu struktur dari elemen-
elemen terkait dengan pengguna yang dapat mengarahkannya.
Dapat dikatakan bahwa multimedia jenis ini mempunyai banyak
tautan (link) yang menghubungkan elemen-elemen multimedia
yang ada.
3. Multimedia linear
Pengguna hanya menjadi penonton dan menikmati produk
multimedia yang disajikan dari awal hingga akhir.
Dari definisi di atas, sebuah sistem multimedia dapat digambarkan
seperti pada Gambar 2.9.
Gambar 2.9 Gambaran definisi multimedia
(Sumber: Binanto, 2010)
2.2.1. Kelebihan Multimedia
1. Meningkatkan aliran gagasan dan informasi.
23
2. Merupakan cara yang kaya untuk mengkomunikasikan sesuatu.
3. Mendorong partisipasi, keterlibatan dan eksplarasi pemakai.
4. Menstimulasi panca indera.
5. Memberikan kemudahan pemakai, terutama bagi pemakai
awam.
2.2.2. Elemen-elemen Multimedia
Multimedia terdiri dari beberapa objek (element), yaitu teks,
grafik atau image, animasi, audio video dan link interaktif. (Sutopo,
2003:5).
2.2.2.1. Teks
Teks adalah elemen dasar yang paling sederhana.
Menurut Binanto (2010:25) “teks dan simbol merupakan
elemen vital dalam menu multimedia, sistem navigasi, dan
isi.”
Sistem Multimedia menggunakan teks sebagai cara
yang efektif untuk mengungkapkan ide dan menyediakan
instruksi bagi penggunanya. Penggunaannya bertujuan
untuk menyampaikan pesan seluas mungkin dengan teks
yang sedikit mungkin. Hal ini banyak ditemui pada iklan
elektronik, majalah, buku, dan beberapa newsletter.
24
Gambar 2.10 Penggunaan teks dalam desain grafis
(Sumber: www.sidimageenation.blogspot.com)
2.2.2.2. Gambar
Gambar adalah citra atau bayangan atau imaji (dari
bahasa Inggris image, dan Bahasa Latin imago) adalah
benda yang dihasilkan atas upaya manusia dalam
mereproduksi kemiripan dari suatu obyek. Gambar juga
bisa diartikan sebagai suatu tampilan yang memiliki
karakter sebagai representasi spatial atau cerminan dari
suatu objek. (Sutopo, 2003:9).
Gambar 2.11 Contoh Gambar
(Sumber: www.hafidznaufal.blogspot.com)
25
Menurut Binanto (2010:97):
Gambar dibuat dengan dua cara, yaitu:
1. Bitmap
Bitmap digunakan untuk foto realistik dan
gambar kompleks yang membutuhkan detail yang
halus. Bitmap berarti matriks sederhana dari titik-
titik kecil yang membentuk sebuah image dan
ditampilkan di layar komputer atau dicetak
(Binanto, 2010:97).
2. Vektor
Vector merupakan garis yang dideskripsikan oleh
lokasi dua ujung titik. Segi empat sederhana
misalnya, didefinisikan sebagai berikut:
RECT 0,0,200,200
dengan menggunakan koordinat cartesius,
perangkat lunak akan menggambarkan sebuah
segi empat yang dimulai dari sudut atas kiri layar
0,0 dan bergerak 200 piksel secara horizontal ke
kanan dan 200 pixel ke bawah 200,200 untuk
menandai sudut yang berlawanan (Vaughan,
2006:135).
26
Kedua tipe gambar ini disimpan dalam berbagai format
file dan dapat diterjemahkan dari satu aplikasi ke aplikasi
yang lain atau dari satu platform ke platform yang lain.
2.2.2.3. Suara Digital (Audio Digital)
Audio digital merupakan versi digital dari suara analog.
Pengubahan suara analog menjadi suara digital
membutuhkan suatu alat yang disebut Analog to Digital
Converter (ADC). ADC akan mengubah amplitude sebuah
gelombang analaog ke dalam waktu interval sehingga
menghasilkan representasi digital dari suara (Binanto
2010:50).
Penyajian audio merupakan cara lain untuk lebih
memperjelas pengertian suatu informasi. Audio atau suara
dapat lebih menjelaskan karakteristik suatu gambar (Sutopo,
2003:13).
Gambar 2.12 Ilustrasi Gelombang Suara
(Sumber: www.mydk.wordpress.com)
27
2.2.2.4. Video
“Kata video berasal dari kata Latin, yang berarti ‘saya
lihat’. Video adalah teknologi pemrosesan sinyal elektronik
yang mewakilkan gambar bergerak” (Binnato, 2010:179).
Video dapat menampilkan gambar hidup untuk sebuah
aplikasi Multimedia. Video dapat dikategorikan dalam
beberapa jenis, yaitu:
1. Live video feeds
Adalah video yang disiarkan langsung lewat internet
dan dijadikan link video yang bersifat real time dalam
aplikasi berbasis Multimedia.
2. Videotape
Adalah media video yang paling banyak digunakan
karena memiliki akses secara linear.
3. Digital video
Adalah suatu media yang menyimpan informasi
filenya dalam harddisk, CD-ROM, DVD-ROM dan
dapat diakses secara acak.
4. DVD
Adalah suatu video yang menggunakan teknologi
MPEG-2 yang digunakan untuk mengkompresi sebuah
film.
28
Gambar 2.13 Teknik Editing Video Menggunakan Komputer
(Sumber: www.tutovi.com)
2.2.2.5. Animasi
Menurut Vaughan (2004), “animasi adalah usaha untuk
membuat presentasi statis menjadi hidup” (Binanto,
2010:219).
Dalam multimedia, animasi sebenarnya adalah
rangkaian gambar yang disusun berurutan, atau dikenal
dengan istilah frame. Satu frame terdiri dari satu gambar.
Jika susunan gambar tersebut ditampilkan bergantian
dengan waktu tertentu akan terlihat bergerak. Satuan yang
dipakai adalah farme per second (fps). (Sunyoto, 2010:47).
Animasi terdiri dari beberapa kategori, yaitu:
1. Frame animation
Adalah animasi yang membuat objek-objek
bergerak dengan menampilkan beberapa gambar yang
29
disebut dengan frame, dimana objek-objek tersebut
muncul di tempat yang berbeda-beda di dalam layar.
2. Vector animation
Adalah animasi yang merupakan sebuah garis yang
mempunyai arah, titik awal dan panjang. Objek dibuat
bergerak dengan merubah ketiga parameter tersebut.
3. Computational animation
Adalah suatu animasi yang membuat objek
bergerak dengan merubah koordinat posisi x dan posisi
y dari objek tersebut.
4. Morphing
Merupakan perubahan dari suatu bentuk yang satu
ke bentuk yang lain dengan menampilkan beberapa
frame yang dapat membuat perubahan geraknya halus
seakan-akan bentuk pertama merubah bentuknya
sendiri ke bentuk yang lain.
Gambar 2.14 Animasi
(Sumber: www.reallusion.com)
30
Adapun grafik animasi terbagi atas 2 bagian yaitu :
1. Animasi 2D
Animasi 2D adalah penciptaan gambar
bergerak dalam lingkungan 2 dimensi. Hal ini
dilakukan dengan urutan gambar berturut-turut
atau “frame per frame” yang mensimulasikan gerak
oleh setiap gambar berikutnya dalam secara
bertahap (Purnama, 2013:81).
2. Animasi 3D
Grafik komputer 3 dimensi atau biasa disebut
3D, adalah bentuk dari benda yang memiliki
panjang, lebar, dan tinggi. Animasi 3D adalah
objek animasi yang berada pada ruang 3D. Objek
animasi ini dapat dirotasi dan berpindah seperti
objek nyata. 3D secara umum merujuk pada
kemampuan dari sebuah video card (link). Saat ini
video card menggunakan variasi dari instruksi-
instruksi yang ditanamkan dalam video card itu
sendiri (Purnama, 2013:83).
2.2.2.6. Link Interaktif
Link Interaktif (Interactive link) merupakan sebagian
dari multimedia yang diperlukan untuk menggabungkan
beberapa elemen (objek) multimedia sehingga menjadi
31
informasi yang terpadu, di mana pengguna dapat menekan
mouse atau objek pada layer seperti tombol atau teks dan
menyebabkan program melakukan perintah tertentu.
(Sutopo, 2003:14).
Dalam hal ini semua elemen multimedia digunakan
oleh penulis untuk membuat aplikasi media interaktif, yaitu
teks, gambar (vector dan bitmap), suara, video, animasi (2
dimensi) dan link interaktif.
2.2.3. Tahap Pengembangan Multimedia
Menurut Luther (1994), metodologi pengembangan multimedia
terdiri dari enam tahap, yaitu: concept (pengonsepan), design
(pendesainan), material collecting (pengumpulan materi), assembly
(pembuatan), testing (pengujian) dan distribution (pendistribusian).
(Binanto, 2010:259).
Keenam tahap ini tidak harus berurutan dalam praktiknya,
tahap-tahap tersebut dapat saling bertukar posisi. Meskipun begitu,
tahap concept memang harus menjadi hal yang pertama kali
dikerjakan.
Sutopo (2003) mengadopsi metodologi Luther dengan
memodifikasi, seperti yang terlihat pada gambar 2.15
32
Gambar 2.15 Tahap Pengembangan Multimedia
(Sumber: Binanto, 2010)
2.2.3.1. Concept (Pengonsepan)
Tahap konsep yaitu menentukan tujuan aplikasi
(informasi, hiburan, pelatihan, dll), identifikasi penggunan
(user), bentuk aplikasi (presentasi, interaktif, dll) dan
spesifikasi umum (ukuran aplikasi, dasar perancangan, target
yang ingin dicapai, dll). Pada tahap ini ditentukan definisi
umum tentang Sistem Multimedia interaktif dan
lingkungannya.
Tabel 2.1 Contoh tabel deskripsi konsep
Judul : Permainan senam otak berbasis multimedia.
Audiens : Pelajar dan umum.
Durasi : -
Image : Dari CD Content dengan format bitmap
Format .png yang dibuat sebagai
pelengkap animasi.
33
Audio : Vokal dan instrumen dengan format .MP3.
Animasi : Animasi 2D dan efek transisi dibuat
sendiri.
Zooming dan gambar transisi diambil dari
CD Content dengan sedikit ubahan.
Interaktivitas : Play, Next, previous, continue, skip, exit dan
tombol menuju dari satu scene ke scene yang
lain.
2.2.3.2. Design (Pendesainan)
Pada tahap ini membuat spesifikasi secara rinci
mengenai arsitektur proyek, gaya, tampilan dan kebutuhan
material/bahan untuk program. Spesifikasi dibuat cukup
rinci sehingga pada tahap berikutnya, yaitu material
collecting dan assembly, tidak diperlukan keputusan baru.
Tahap ini biasanya menggunakan storyboard untuk
menggambarkan deskripsi tiap scene, dengan
mencantumkan semua objek multimedia dan tautan dari
scene ke scene lain.
34
2.2.3.3. Material Collecting (Pengumpulan Materi)
Pengumpulan bahan dapat dikerjakan paralel dengan
tahap assembly. Pada tahap ini dilakukan pengumpulan
bahan seperti gambar, animasi, audio, foto dan lain-lain
yang diperlukan pada tahap selanjutnya. Bahan-bahan yang
diperlukan dalam Multimedia dapat diperoleh dari berbagai
sumber seperti: library, bahan yang sudah ada dari pihak
lain, atau pembuatan khusus dari pihak lain.
2.2.3.4. Assembly (Pembuatan)
Tahap pembuatan merupakan tahap dimana seluruh
objek Multimedia dibuat. Pembuatan aplikasi didasarkan
pada tahap design, seperti storyboard, bagian alir, dan atau
struktur navigasi.
Pada tahap ini digunakan software Adobe Photoshop
CS6 dan Adobe Flash CS6. Tampilan Adobe Photoshop
CS6 dapat dilihat pada gambar 2.19 dan tampilan Adobe
Flash CS6 dapat dilihat pada gambar 2.22
2.2.3.5. Testing (Pengujian)
Tahap pengujian dilakukan setelah menyelesaikan
semua tahap pembuatan dengan menjalankan
aplikasi/program dan melihatnya apakah ada kesalahan atau
tidak. Tahap pertama pada tahap ini disebut tahap pengujian
alpha (alpha test) yang pengujiannya dilakukan oleh
35
pembuat atau lingkungan pembuatnya sendiri. Setelah lolos
dari pengujian alpha, pengujian beta yang melibatkan
pengguna akhir.
2.2.3.6. Distribution (Pendistribusian)
Tahap distribusi merupakan tahap dimana dilakukan
penggandaan aplikasi. Penggandaan dapat menggunakan
CD atau DVD READ WRITE dan lain-lain. Tahap ini juga
melakukan evaluasi terhadap suatu produk Multimedia.
Evaluasi dilakukan agar dapat mengembangkan sistem yang
lebih baik.
2.3. Media Pembelajaran
Miarso menyatakan bahwa, media pembelajaran adalah segala sesuatu
yang digunakan untuk menyalurkan pesan serta dapat merangsang pikiran,
perasaan, perhatian dan kemauan siswa sehingga dapat mendorong
terjadinya proses belajar yang disengaja, bertujuan dan terkendali. (Miarso,
2004: 457-458)
Sedangkan menurut Purnomo (1996), media yaitu segala sesuatu yang
dapat digunakan untuk menyalurkan pesan. Pembelajaran merupakan proses
komunikasi yang didalamnya terdapat sumber pesan, penerima pesan dan
pesan yaitu materi pembelajaran.
Secara umum dapat dikatakan media mempunyai kegunaan, antara lain:
a. Memperjelas pesan agar tidak terlalu verbalistis.
b. Mengatasi keterbatasan ruang, waktu, tenaga dan daya indra.
36
c. Menimbulkan gairah belajar, interaksi lebih langsung antara murid
dengan sumber belajar.
d. Memungkinkan anak belajar mandiri sesuai dengan bakat dan
kemampuan visual, auditori dan kinestetiknya.
e. Memberi rangsangan yang sama, mempersamakan pengalaman dan
menimbulkan persepsi yang sama.
Karakteristik dan kemampuan masing-masing media perlu diperhatikan
oleh guru agar mereka dapat memilih media mana yang sesuai dengan
kondisi dan kebutuhan (Indriani, 2011).
Berdasarkan definisi tersebut, dapat dikatakan bahwa proses
pembelajaran merupakan proses komunikasi. Dapat juga dikatakan baha
media adalah bentuk-bentuk komunikasi baik tercetak maupun audio-visual
serta peralatannya. Proses pembelajaran mengandung lima komponen
komunikasi, guru (komunikator), bahan pembelajaran, media pembelajaran,
siswa (komunikan) dan tujuan pembelajaran. Jadi, media pembelajaran
adalah segala sesuatu yang dapat digunakan untuk menyalurkan pesan
(bahan pembelajaran), sehingga dapat merangsang perhatian, minat, pikiran
dan perasaan siswa dalam kegiatan belajar untuk mencapai tujuan belajar.
37
2.3.1. Tujuan Media
Media berfungsi mengarahkan siswa untuk memperoleh
berbagai pengalaman belajar. Pengalaman belajar (learning
experience) tergantung pada interaksi siswa dengan media. Media
yang tepat dan sesuai dengan tujuan belajar akan mampu
meningkatkan pengalaman belajar sehingga anak didik bisa
mempertinggi hasil belajar
2.4. Perancangan Sistem
2.4.1. Storyboard
Storyboard menurut Luther (1994), merupakan deskripsi dari
setiap scene yang secara jelas menggambarkan objek multimedia
serta perilakunya yang penjelasannya dapat menggunakan symbol
maupun teks (Sutopo, 2003:200).
Storyboard merupakan serangkaian sketsa di buat persegi
panjang yang menggambarkan suatu urutan (alur cerita) elemen-
elemen yang diusulkan untuk aplikasi multimedia (Suyanto, 2003).
Storyboard dapat dibuat dengan gambar tangan/sketsa langsung di
kertas atau digambar dengan komputer kemudian dicetak (Binanto,
2010:255).
2.4.2. STD (State Transition Diagram)
State diagram menyediakan vairasi simbol dan sejumlah ide
untuk pemodelan. Tipe diagram ini, mempunyai potensi untuk
menjadi sangat kompleks dalam waktu yagn singkat. State chart
38
diagram menampilkan state-state yang mungkin dari sebuah obyek.
Event yang dapat dideteksi dan respon atas event-event tersebut.
Secara umum, pendeteksian sebuah event dapat menyebabkan
sebuah obyek bergerak dari satu state ke state yang lain, hal ini
disebut dengan transition (Munawar, 2005).
Para pengembang, tentunya harus mengetahui bagaimana
obyek-obyek ini bertindak, karena harus dilakukan implemntasi
perilaku tersebut ke dalam perangkat lunak (software). Tidak cukup
hanya mengimplementasikan sebuah obyek, pengembang juga harus
membuat obyek tersebut melakukan sesuatu. State Diagram
memastikan bahwa obyek-obyek tersebut akan menebak apa yang
seharusnya dilakukan. Dengan gambaran yang jelas tentang perilaku
obyek, kemungkinan tim pengembang akan memproduksi sebuah
sistem yang sesuai dengan peningkatan kebutuhan (Munawar, 2005).
STD (State Transition Diagram ) juga menunjukkan bagaimana
sistem bertingkah laku sebagai akibat dari kejadian eksternal. STD
juga menunjukkan berbagai model tingkah laku (state) sistem dan
cara dimana transisi dibuat dari state satu ke state yang lainnya. STD
berfungsi sebagai dasar bagi pemodelan tingkah laku (Pressman,
2002).
39
1. Keadaan Sistem
Setiap kotak mewakili suatu keadaan dimana sistem
mungkin berada di dalamnya. State disimbolkan dengan simbol
segi empat.
Gambar 2.16 Simbol State
2. Perubahan Sistem
Untuk menghubungkan satu keadaan dengan keadaan lain.
Simbol ini digunakan jika sistem memiliki transisi dalam
perilakunya, maka hanya suatu keadaan dapat berubah menjadi
keadaan tertentu.
Gambar 2.17 Simbol Transistion State
3. Kondisi dan Aksi
Untuk melengkapi STD dibutuhkan dua hal tambahan,
yaitu kondisi sebelum keadaan berubah dan aksi dari pemakai
untuk merubah keadaan. Berikut ini adalah sebuah gambaran
dari kondisi dan aksi yang ditampilkan disebelah anak panah
yang menghubungkan dua keadaan.
40
Gambar 2.18 Kondisi dan Aksi
2.4.3. Struktur Navigasi
Menurut Suyanto (2003), terdapat lima cara untuk mendesain
aliran aplikasi multimedia, yaitu menggunakan struktur linier,
struktur menu, struktur hierarki, jaringan, dan hibrid.
2.4.3.1. Struktur Linier
Struktur yang paling sederhana dalam mendesain
aliran aplikasi multimedia adalah struktur linier. Untuk
menampilkan informasi atau isi aplikasi multimedia
dengan meng-klik mouse maka muncul layer pertama
yang berisi obyek multimedia. Kemudian klik mouse
berikutnya akan muncul layer berikutnya. Lalu dapat maju
(next) atau mundur kembali (back) untuk menampilkan
aplikasi multimedia yang sesuai kebutuhan.
2.4.3.2. Struktur Menu
Struktur kedua adalah struktur menu, dimana obyek
dalam menu dapat diwujudkan dalam garis-garis
hypertext, grafik, audio, video, dan animasi atau
kombinasi dari kelima obyek tersebut. Ketika memilih
sebuah obyek pada menu, maka obyek yang terhubung
41
akan muncul dan tampil pada layar. Sedangkan untuk
memilih menu yang lain cukup mengklik menu yang
diinginkan.
2.4.3.3. Struktur Hierarki
Struktur hierarki merupakan struktur seperti tinggi
atau pohon. Masing-masing obyek menyediakan sebuah
menu pilihan yang menonjolkan lebih banyak menu
dengan banyak pilihan. Tidak ada batas ukuran atau
jumlah menu dan sub menu yang dapat dimiliki dalam
sebuah struktur hierarki.
2.4.3.4. Struktur Jaringan
Bentuk struktur jaringan merupakan desain yang
paling kompleks. Suatu obyek dapat terhubung dengan
banyak obyek dalam setiap arah pada setiap obyek dalam
aplikasi. Khusus untuk aplikasi multimedia yang besar,
desain struktur jaringan memungkinkan untuk melakukan
navigasi ke setiap layar dengan meng-klik mouse yang
minimum. Dengan rancangan menggunanakan struktur
jaringan. Memungkinkan untuk melakukan 3 klik dan apa
yang diinginkan dapat tercapai.
2.4.3.5. Struktur Navigasi
Dalam merancangan aliran aplkasi, multimedia
sering menggunakan lebih dari satu struktur seperti linier,
42
menu, hierarki, dan jaringan. Misalnya jika akan
merancang jaringan yang canggih dapat memunculkan
sebuah struktur linier, menu, hierarki, dan dalam “slide
blank” dengan navigasi sederhana yang membiarkan
pemakai bergerak kembali atau ke depan (melanjutkan)
lower slide. Bila pemakai mendapatkan akhir dari daftar
desain, maka jaringan kembali untuk menyediakan pilihan
navigasi yang lebih kaya. Desain yang mengkombinasikan
semua struktur ini disebut hibrid.
2.4.4. ActionScript
Pemograman dengan ActionScript dapat digunakan untuk
pembuatan aplikasi interaktif, web site berbasis multimedia, demo
produk, bahan pembelajaran, dan lain-lain. (Franklin dan Makar,
2000)
ActionScript merupakan bahasa pemrograman visual berbasis
objek seperti JavaScript. ActionScript mempunyai sintaks, tata
bahasa dan struktur yang mirip dengan bahasa pemograman C.
Apabila pemrogram pernah mempelajari bahasa pemrograman
komputer lainnya seperti bahasa C maupun JavaScript maka
pemrogram akan menemukan kesamaan pernyataan-pernyataan
program maupun struktur pemrogramaan pada bahasa pemrograman
ActionScript. (Riberu, 2004:1)
43
Bahasa ini merupakan bahasa pemrograman yang digunakan
dalam perancangan animasi mulai macromedia flash rilis 2.0 sampai
dengan rilis terakhir, dimana pemrogram dapat mengintegrasikan
fungsi-fungsi navigasi maupun interaksi yang kompleks dengan
memanfaatkan rutin-rutin dan pernyataan program yang dapat
mendukung animasi yang dibuat.
2.4.5. Animasi
Animasi adalah usaha untuk membuat presentasi statis menjadi
hidup. Animasi merupakan perubahan visual sepanjang waktu yang
memberi kekuatan besar pada proyek multimedia dan halaman web
yang dibuat (Binanto. 2010 :219).
Animasi dasar terbagi menjadi tiga bagian yaitu animasi gerak,
skala dan putar, animasi gerak yaitu menggerakkan objek dari satu
posisi ke posisi lainnya. Animasi skala yaitu mengubah skala atau
ukuran sebuah objek, animasi putar atau rotasi yaitu animasi di mana
sebuah obek mempunyai gerak berputar pada titik poros yang
ditentukan. Ketiga animasi dasar tersebut bisa berdiri sendiri atau
digabung satu sama lainnya hingga menjadi animasi yang kompleks.
Ada tiga teknik dasar dalam pembuatan anmasi yaitu animasi
frame by frame, tweened animation dan animasi bone. Animasi
tween adalah jalan yang efektif untuk membuat gerakan dan
mengatur waktu sambil mengecilkan ukuran file. Dalam animasi
tween, program Adobe Flash CS6 hanya menyimpan jumlah
44
perubahan antara frame, dalam animasi frame by frame program
Adobe Flash CS6 menyimpan setiap gerakan objek pada masing-
masing frame, animasi bone merupakan animasi dengan mengadopsi
struktur persendian tulang.
2.4.5.1. Tweened animation
Teknik animasi tween mempunyai tiga tipe aniamasi
yaitu, motion tween, shape tween dan classic tween.
Animasi motion tween biasanya digunakan untuk membuat
animasi objek bergerak, berputar dan perubahan ukuran
(dua dimensi atu tiga dimensi). Motion tween dapat
diterapkan pada objek instance (symbol), group dan teks,
sedangkan animasi shape tween merupakan animasi
perubahan bentuk sebuah objek, misalnya dari bentuk kotak
berubah menjadi bentuk lingkaran. Shape tween dapat
diterapkan pada objek shape (rectangle, oval, dan pencil).
Classic tween sama dengan motion tween tetapi hanya
untuk gerakan dua dimensi.
2.4.5.2. Animasi masking
Prinsip kerja dari animasi masking adalah menampilkan
bidang yang tertutup dan menyembunyikan bidang yang
terbuka.
45
2.4.5.3. Animasi Frame per Frame
Animasi frame per frame adalah animasi yang diatur
pada setiap frame, mulai dari perubahan gerak, bentuk,
posisi atau warna objek, semakin banyak frame yang
digunakan untk menampung setiap detil gerakan objek,
semakin halus animasi yang dihasilkan (Madcoms,
2011:101).
2.5. Software Authoring
Untuk mengolah objek multimedia, diperlukan tools yang sesuai
(Vaughan, 2006: 234). Perangkat lunak yang secara khusus ditujukan untuk
membuat aplikasi multimedia disebut multimedia authoring system (atau
sering disebut authoring software). Tools multimedia dapat dibagi menjadi
beberapa macam sesuai penggunaannya, yaitu Graphic Tools, Animation
Tools, Audio Editor dan Video Editor.
2.5.1. Adobe Photoshop CS6 Extended
Adobe Photoshop merupakan produk perangkat lunak Adobe
yang berguna untuk mengolah gambar berbasis bitmap, yang
mempunyai perangkat alat dan efek yang cukup lengkap sehingga
dapat menghasilkan gambar yang berkualitas. (Madcoms, 2011:1)
46
Gambar 2.19 Adobe Photoshop CS6
(Sumber: capture screenshot)
2.5.1.1. Area Kerja Dalam Adobe Photoshop CS6
Area kerja Adobe photoshop CS6 terdiri dari atas
beberapa komponen, yaitu: Menubar, Toolbox, Timeline,
Canvas dan Window Pallete seperti pada gambar 2.20.
Gambar 2.20 Area Kerja Adobe Photoshop CS6
(Sumber: capture screenshot)
47
Di bawah ini adalah kegunaan atau fungsi dari setiap bagian
komponen pada Adobe Photoshop CS6, yaitu:
1. Menubar
Menubar adalah menu pulldown yang berisi perintah-
perintah untuk menjalankan manajemen file, perintah untuk
mengolah layer dan dokumen, serta memuat perintah lain
untuk memberi efek filter dan mengatur tampilan panel.
Menu-menu tersebut diantaranya menu File, Edit, Image,
Layer, Select, Filter, View, Window dan Help. Baris menu
ini terkelompok berdasarkan topiknya.
2. Panel Tools / Toolbox
Panel Tools / Toolbox merupakan bagian yang memuat alat-
alat untuk menggambar, menyeleksi, memodifikasi dan
memanipulasi objek gambar. Alat-alat ini juga
dikelompokkan menurut jenisnya.
3. Jendela Dokumen / Canvas
Canvas adalah bidang yang digunakan sebagai tempat untuk
meletakkan gambar. Biasanya ukuran canvas akan sama
dengan ukuran gambar, tetapi dalam Photoshop kita dapat
merubah ukuran canvas dan gambar sesuai dengan
kebutuhan.
4. Dock Panel / Window Pallete
48
Window Pallete adalah window yang berguna untuk
memilih atau mengatur berbagai parameter pada saat
menyunting image dalam photoshop. Untuk menampilkan
Window Pallete dapat kita lakukan dengan cara memilih
menu Window kemudian pilih pallete yang dimunculkan.
5. Tab Dokumen
Tab dokumen merupakan bagian yang menampung nama-
nama dokumen yang sedang aktif, dimana kita dapat
mengklik nama dokumen tersebut untuk mengaktifkan
jendela dokumen / canvas yang akan kita kerjakan. Hal ini
memungkinkan untuk kita membuka dokumen dengan
jumlah yang banyak secara bersamaan.
6. Panel Control
Panel Control merupakan bagian yang menampilkan daftar
tombol perintah tambahan. Tombol-tombol perintah yang
ditampilkan pada bagian ini berubah –ubah menyesuaikan
dengan alat yang di pilih pada bagian Panel Tools /
Toolbox.
7. Workspace Switcher
Workspace Switcher merupakan mode pilihan area kerja
yang sesuai dengan kebutuhan kita. Secara default
worksapce terdiri dari mode essentials, design, photography
dan painting.
49
2.5.1.2. Mengenal Panel Tools / Toolbox
Panel Tools / Toolbox merupakan panel utama pada
Photoshop CS6 yang memuat sejumlah alat-alat (tombol
perintah) yang sering dioperasikan selama bekerja dengan
Photoshop CS6.
Gambar 2.21 Toolbox pada Adobe Photoshop CS6
(Sumber: capture screenshot)
Di bawah ini adalah kegunaan atau fungsi dari Toolbox
pada adobe photoshop, yaitu:
1. Rectangle Marquee Tool
Digunakan untuk menyeleksi atau mem-blok bagian dari
suatu image dengan bentuk seleksi persegi. Didalamnya ada
Elliptical Marquee Tool, Single Row, Marquee Tool dan
Single Column Marquee Tool.
2. Lasso Tool
Digunakan untuk menyeleksi atau mem-blok bagian dari
suatu image dengan bentuk bebas dengan cara mendrag
50
bagian image yang akan diseleksi. Di dalamnya ada
Poligonal Lasso Tool, dan Magnetic Lasso Tool.
3. Crop
Digunakan untuk menyeleksi bagian dari suatu image
dengan bentuk seleksi persegi dan membuang bagian yang
tidak diinginkan.
4. Clone Stamp Tool
Digunakan untuk mengambil contoh dari suatu image dan
membuat copynya dimanapun.
5. Eraser Tool
Digunakan untuk menghapus image, ini juga dapat
digunakan untuk mengembalikan sebuah image menjadi
sebuah daerah awal.
6. Blur Tool
Digunakan untuk mengaburkan bagian dari suatu image.
7. Path Selection Tool
Digunakan untuk mempercerah suatu image.
8. Pen Tool
Digunakan untuk merancang atau mengedit path.
9. Notes Tool
Digunakan untuk membuat catatan pada suatu bagian
image.
51
10. Hand Tool
Digunakan untuk menggeser image jika lebar image
melebihi ukuran window.
11. Default Foreground and Background Color
Digunakan untuk mengembalikan warna standar yaitu
foreground hitam dan background putih.
12. Edit Standart Mode
Digunakan untuk membuat seleksi dan menampilkan
standar painting dan editing.
13. Move Tool
Digunakan untuk memindah bagian dari image yang di blok
atau layer diantara image atau image lainnya.
14. Magic Wand Tool
Digunakan untuk membuat seleksi atau blok secara
otomatis yang hampir sama dengan warna areanya.
15. Slice Tool
Digunakan untuk membuat atau memblok setiap area
rectangular dari sebuah image.
16. Brush Tool
Digunakan untuk menggambar dengan warna foreground
dengan menggunakan standar brushes atau custom brushes.
52
17. History Brush Tool
Digunakan untuk menggambar diatas sebuah image dengan
daerah sebelumnya yang telah ditentukan dalam rangka
membenarkan kesalahan atau untuk menggambar diatas
sebuah image.
18. Paint Bucket Tool
Digunakan untuk memberi warna suatu bagian dari image
dengan warna foreground.
19. Dodge Tool
Digunakan untuk mencerahkan bagian dari suatu image.
20. Horizontal Type Tool
Digunakan untuk membuat teks pada suatu image.
21. Rectangle Tool
Digunakan untuk menggambar kotak pada suatu image.
22. Eyedropper Tool
Digunakan untuk memilih warna foreground maupun
background dari warna yang ada pada sebuah image.
23. Zoom Tool
Digunakan untuk memperbesar atau memperkecil tampilan
sebuah image. Perubahan tampilan menggunakan Zoom
Tool ini tidak mempengaruhi ukuran pixel dalam sebuah
image.
53
24. Set Backround Color
Digunakan sebagai indikator warna background yang aktif
dan sekaligus dapat digunakan untuk mengganti warna
background dengan warna yang lain.
25. Edit in Quick Mask Mode
Digunakan untuk merancang dan mengedit selection mask
sementara.
2.5.2. Adobe Flash CS6 Extended
Menurut Mortier (2001, x) “Flash adalah software pembuat
karya seni dan animasi vektor, walaupun seperti Anda akan
ketahui software ini juga bisa menggabungkan elemen bitmap
tertentu.”
Animasi pada Adobe Flash sama halnya dengan film secara
fisik, yang tersusun dari banyak frame dengan gambar-gambar
penyusunnya. Frame yang mendefinisikan adanya perubahan
pada objek disebut dengan keyframe. Format Flash Movie *.SWF
kini dapat dibuat tidak hanya oleh Adobe Flash saja.
Gambar 2.22. Adobe Flash CS6
(Sumber: capture screenshot)
54
2.5.2.1. Area Kerja Dalam Adobe Flash CS6
Area kerja Adobe Flash CS6 terdiri dari atas beberapa
komponen, yaitu: Menubar, Toolbox, Timeline, Canvas dan
Window Pallete seperti pada gambar 2.22.
Gambar 2.23 Area Kerja Adobe Flash CS6
(Sumber: capture screenshot)
Dibawah ini adalah kegunaan atau fungsi dari setiap
bagian komponen pada Adobe Flash CS6, yaitu:
1. Timeline
Digunakan untuk mengatur dan mengontrol isi keseluruhan
movie yang dibuat.
2. Stage
Merupakan tempat dimana kita bekerja dalam membuat
sebuah animasi.
55
3. Toolbox
Berisi alat-alat yang digunakan untuk menggambar objek
pada stage.
4. Panel
Digunakan untuk menentukan atribut-atribut yang akan
digunakan oleh tool-tool dalam toolbox untuk membuat atau
mengubah objek pada stage.
2.5.2.2. Mengenal Panel Tools / Toolbox
Gambar 2.24 Tools pada Adobe Flash CS6
(Sumber: capture screenshot)
Di bawah ini adalah kegunaan atau fungsi dari Toolbox
(Tools, Colors, dan View) pada Adobe Flash CS6, yaitu:
Selection Tool
Free Transform Tool
Lasso Tool
Pen Tool
Line Tool
Pencil Tool
Deco Tool
Bone Tool
Eyedrop Tool
Hand Tool
Stroke Color
Fill Color
Black and White
Snap yo Objects
Subselection Tool
3D Rotation Tool
Text Tool
Shape Tool
Brush Tool
Paint Bucket Tool
Eraser Tool
ZoomTool
Swap Colors
56
1. Tools
a. Selection Tool
Tool ini digunakan untuk memilih suatu objek atau
untuk memindahkannya.
b. Subselection Tool
Tool ini digunakan untuk merubah suatu objek dengan
edit points.
c. Line Tool
Tool ini digunakan untuk membuat suatu garis di stage.
d. Lasso Tool
Tool ini digunakan untuk memilih daerah di objek yang
akan diedit.
e. Pen Tool
Tool yang digunakan untuk menggambar dan merubah
bentuk suatu objek dengan menggunakan edit points
(lebih teliti & akurat).
f. Text Tool
Tool ini digunakan untuk menuliskan kalimat atau kata-
kata.
g. Oval Tool
Tool yang digunakan untuk menggambar sebuah
lingkaran.
57
h. Rectangle Tool
Tool yang digunakan untuk menggambar sebuah
segiempat.
i. Pencil Tool
Tool ini digunakan untuk menggambar sebuah objek
sesuai dengan yang kita sukai. Tetapi setiap bentuk
yang anda buat akan diformat oleh Flash CS3 menjadi
bentuk sempurna.
j. Brush Tool
Tool ini sering digunakan untuk memberi warna pada
suatu objek.
k. Free Transform Tool
Tool ini digunakan untuk memutar (rotate) objek yang
anda buat atau merubah ukuran suatu objek.
l. Ink Bottle Tool
Tool ini digunakan untuk mengisi warna pada objek
yang bordernya telah hilang (tidak ada).
m. Paint Bucket Tool
Tool ini digunakan untuk mengisi warna pada objek
yang dipilih.
n. Eraser Tool
Tool ini digunakan untuk menghapus objek yang user
bentuk.
58
o. Eyedropper Tool
Tool ini digunakan untuk memilih warna foreground
maupun background dari warna yang ada pada sebuah
image.
2. Colors
a. Stroke Color
Digunakan untuk memberi warna pada garis atau
border objek.
b. Fill Color
Digunakan untuk memberi warna objek.
c. Black & White
Digunakan untuk memberi warna objek dan warna
border atau garis dengan warna hitam putih.
d. Swap Colors
Digunakan untuk menukar warna objek (Fill Color)
dengan warna border atau garis (Stroke Color).
3. View
a. Zoom Tool
Digunakan untuk memperbesar tampilan objek pada
stage.
59
b. Hand Tool
Digunakan untuk menggerakkan suatu tampilan objek
pada stage tanpa merubah posisi objek tersebut pada
stage.
2.6. Otak
Menurut Rahayu (2009:6) “Otak merupakan pusat kendali tubuh. Otak
kita mengendalikan tindakan, pikiran, ingatan, perilaku, dan emosi kita.”
Otak mengendalikan segala sesuatu yang terjadi di dalam tubuh. Ia
mengirimkan pesan yang memberitahu semua anggota tubuh lain apa yang
harus dijalankan. Pesan-pesan ini mengalir sepanjang saraf. Dimana otak
dan saraf terdiri dari jutaan sel saraf yang di sebut neuron. “Pesan melesat di
sepanjang neuron-neuron dengan kecepatan lebih dari 400 km per jam.”
(Rahayu, 2009:15) Setiap neuron di otak dapat menerima lebih dari 100.000
pesan setiap detik.
“Ketika bayi lahir, berat otaknya sekitar 350 gram. Setelah dia berusia
20 tahun, otaknya mencapai 1,3 kilogram.” (Rahayu, 2009:6)
Otak terbuat dari 100 milyar sel saraf. Bentuknya seperti gumpalan jeli
kelabu merah muda. Permukaannya berkeriput, dan ada lekukan yang
membaginya menjadi beberapa bagian.
Melalui saraf-saraf yang meliputi seluruh tubuh, otak senantiasa
menerima rangsangan dari bagian lain tubuh. Otak menilai rangsangan dan
menanggapinya pada bagian-bagian tubuh yang terkait. Tanggapan yang
60
diberikan otak inilah yang menjadikan dapat bergerak, mendengar, melihat
dan merasakan.
Semiawan mengatakan, “otak manusia terbagi menjadi dua belahan,
yaitu otak sebelah kanan dan kiri yang mempunyai fungsi berbeda.
Belahan otak kiri mempunyai fungsi berfikir linier, logis, konvergen, dan
teratur. Sedangkan belahan otak kanan mempunyai fungsi imaginasi,
berfikir divergen, dan kreatif.” (Semiawan, 2007: 115)
2.6.1. Meninkatkan Kinerja Otak
Menurut Prasetya (2013), ada beberapa cara membuat kinerja
otak lebih maksimal, yaitu : Mengkonsumsi dosis EPA dan DHA,
mengisi teka-teki, rajin berjalan kaki, mempelajari bahsa baru,
tertawa kecil setiap hari, belajar menuangkan kreatifitas, dan lain-
lain.
Contohnya ketika mengisi teka-teki, saat teka-teki diluncurkan,
otak akan menyisir semua arsip yang ada di kepala untuk dicocokkan
dengan petunjuk yang ada. Karenanya permainan ini sangat baik
untuk menjaga daya ingat otak atas semua objek dan pengetahuan
yang tersimpan.
2.6.2. Senam Otak
Senam otak merupakan suatu rangkaian gerakan yang disusun
sedemikian rupa untuk mengoptimalkan kemampuan otak seseorang,
menajamkan daya ingat dan meningkatkan konsentrasi.
61
Dalam penerapannya di dunia pendidikan, Menurut Denisson
(2004) Senam otak merupakan serangkaian gerak sederhana yang
menyenangkan dan digunakan untuk meningkatkan kemampuan
belajar siswa dengan menggunakan keseluruhan otak.
Dalam penelitian ditemukan bahwa, saraf-saraf otak seorang
anak akan berkembang lebih pesat jika dia melakukan banyak
gerakan dan aktif bermain saat masih kecil (Denisson, 2004). Untuk
mengoptimalkan saraf otak, tidak sembarang gerakan yang bisa
dilakukan. Oleh karena itu, untuk menstimulasi perkembangan saraf
otak, beberapa pakar membuat serangkaian gerakan khusus yang
terpadu, dan jadilah istilahnya sebagai senam otak alias brain gym
(Denisson, 2004). Negara yang mencetuskan brain gym ini adalah
Amerika Serikat, dan telah beberapa negara telah banyak yang
mengadopsinya termasuk Indonesia.
Ternyata senam otak ini bukan hanya untuk anak, namun untuk
para lanjut usia pun patut merasakan manfaat dari senam otak itu
sendiri, yakni dapat mencegah kepikunan dan membantu pemulihan
bagi para penderita stroke. Senam otak dapat dilakukan dimana saja,
kapan saja dan oleh siapa saja. Bahkan senam otak sudah dapat
diberikan untuk bayi berusia 4 bulan hingga orang yang telah lanjut
usia.
62
2.6.2.1. Pemanfaatan senam otak pada proses pembelajaran
Senam otak dapat digunakan di dalam kegiatan proses
pembelajaran setiap hari, kegiatan senam otak ini dibuat
guna menstimulasi (dimensi lateralitas), meringankan
(dimensi pemfokusan), atau merelaksasi (dimensi
pemusatan) siswa yang terlibat dalam situasi belajar
tertentu. Dengan gerakan-gerakan khusus diamati, agar
lebih bermanfaat untuk mengatasi hambatan belajar siswa
dalam pembelajaran. Senam otak juga bertujuan untuk
mengaktifkan potensi belahan otak (hemisfer) kanan dan
kiri, sehingga pada akhirnya terjadi integrasi atau kerja
sama antar keduanya (Denisson, 2004)
Pelajaran lebih mudah diterima bila mengaktifkan
sejumlah panca indera daripada hanya diberikan secara
abstrak saja. Akan tetapi, otak manusia juga spesifik
tugasnya, yang mana dalam aplikasi senam otak digunakan
dengan beberapa istilah. Menurut Paul E. Denisson dan Gill
E. Denisson (2004), menyatakan bahwa istilah yang
digunakan dalam senam otak tersebut dibagi menjadi tiga
dimensi, yaitu:
1. Dimensi lateralitas (untuk belahan otak kiri dan kanan)
Tubuh manusia dibagi dalam dua sisi, yaitu sisi kiri
dan sisi kanan. Sifat ini memungkinkan dominasi salah
63
satu sisi, misalnya menulis dengan tangan kanan atau
tangan kiri, dan juga untuk integrasi kedua sisi tubuh
(bilateral integration), yaitu untuk menyebrangi garis
tengah tubuh untuk bekerja di bidang tengah. Bila
keterampilan ini sudah dikuasai, siswa akan mampu
memproses kode linear, simbol tertulis dengan dua
belahan otak dari kedua jurusan: kiri ke kenan atau kanan
ke kiri, yang merupakan kemampuan dasar kesuksesan
akademik.
2. Dimensi pemfokusan (untuk bagian belakang otak/batang
otak dan bagian depan otak)
Dalam hal ini fokus merupakan kemampuan
menyeberangi garis tengah partisipasi, yang memisahkan
bagian belakang dan depan tubuh, dan juga belakang dan
depan otak. Garis tengah partisipasi adalah garis
bayangan vertikal ditengah tubuh. Di sisi lain, ketidak
lengkapan perkembangan refleks menghasilkan
ketidakmampuan untuk secara mudah mengekspresikan
diri sendiri dan ikut aktif dalam proses belajar. Siswa
yang mengalami fokus kurang (underfocused), disebut
kurang perhatian, kurang pengertian, terlambat bicara
atau hiperaktif. Dan di sisi lain adalah anak yang terlalu
mengalami fokus lebih (overfocus) dan berusaha terlalu
64
keras. Gerakan yang membantu melepaskan hambatan
fokus adalah aktifitas integrasi depan/belakang. Gerakan
ini juga membantu kesiapan dan konsentrasi untuk
menerima hal-hal baru dan mengekspresikan apa yang
sudah diketahui.
3. Dimensi pemusatan (untuk sistem limbis/otak tengah dan
otak besar)
Pemusatan dalam hal ini, merupakan kemampuan
untuk menyebrangi garis pisah antara bagian atas dan
bawah tubuh dan mengaitkan fungsi bagian atas dan
bawah otak, bagian tengah sistem limbis (midbrain) yang
berhubungan dengan informasi emosional serta otak
besar untuk berpikir yang abstrak. Apa yang dipelajari
harus benar-benar dapat dihubungkan dengan perasaan
dan memberi arti. Ketidak mampuan untuk
mempertahankan pemusatan ditandai oleh kekuatan yang
tak beralasan, cenderung bereaksi berjuang atau
melarikan diri, atau ketidak mampuan untuk merasakan
atau menyatakan emosi. Gerakan yang membuat sistem
badan menjadi rileks dan membantu menyiapkan siswa
untuk mengolah informasi tanpa pengaruh emosi negatif
disebut pemusatan atau bertumpu pada dasar yang
kokoh.
65
2.6.2.2. Manfaat Senam Otak
Selain dapat meningkatkan kemampuan belajar, Senam
otak atau Brain Gym dapat memberikan beberapa manfaat
seperti yang dikemukakan oleh Ayinosa (2009), Brain Gym
dapat memberikan manfaat yaitu berupa:
a. Stress emosional berkurang dan pikiran lebih jernih.
b. Hubungan antarmanusia dan suasana belajar/kerja lebih
relaks dan senang.
c. Kemampuan berbahasa dan daya ingat meningkat.
d. Orang menjadi lebih bersemangat, lebih kreatif dan
efisien.
e. Orang merasa lebih sehat karena stress berkurang.
f. Prestasi belajar dan bekerja meningkat.
Senada dengan yang dikatakan oleh Fanny (2009),
banyak manfaat yang bisa diperoleh dengan melakukan
Brain Gym. Gerakangerakan ringan dengan permainan
melalui olah tangan dan kaki dapat memberikan rangsangan
atau stimulus pada otak. Gerakan yang menghasilkan
stimulus itulah yang dapat meningkatkan kemampuan
kognitif (kewaspadaan, konsentrasi, kecepatan, persepsi,
belajar, memori, pemecahan masalah dan kreativitas),
menyelaraskan kemampuan beraktivitas dan berfikir pada
saat yang bersamaan, meningkatkan keseimbangan atau
66
harmonisasi antara kontrol emosi dan logika,
mengoptimalkan fungsi kinerja panca indera, menjaga
kelenturan dan keseimbangan tubuh, meningkatkan daya
ingat dan pengulangan kembali terhadap huruf/angka
(dalam waktu 10 minggu), meningkatkan ketajaman
pendengaran dan penglihatan, mengurangi kesalahan
membaca, memori, dan kemampuan komperhensif pada
kelompok dengan gangguan bahasa, hingga mampu
meningkatkan respon terhadap rangsangan visual.
Selain itu Brain Gym dapat mengaktifkan otak sehingga
mampu berfungsi dengan lebih baik. Brain Gym telah
diakui sebagai salah satu teknik belajar yang paling baik
oleh “National Learning Foundation USA” (Ayinosa, 2009)
karena Brain Gym ini memberikan keuntungan yaitu:
a. Memungkinkan belajar dan bekerja tanpa stress.
b. Dapat dilakukan dalam waktu singkat yaitu kurang
dari 5 menit.
c. Tidak memerlukan bahan atau tempat yang khusus.
d. Dapat dipakai dalam semua situasi belajar/bekerja
juga dalam kehidupan sehari-hari.
e. Meningkatkan kepercayaan diri.
f. Menunjukkan hasil dengan segera.
67
g. Sangat efektif dalam penanganan seorang yang
mengalami hambatan dan stress belajar.
h. Memandirikan seorang dalam belajar dan
mengaktifkan seluruh potensi dan keterampilan yang
dimiliki oleh seseorang.
2.7. Penelitian Sejenis
Pada penelitian ini, peneliti juga mengumpulkan beberapa penelitian
sejenis sebagai bahan perbandingan, dengan menyimpulkan kelebihan dan
kekurangan dari aplikasi yang di buat.
Tabel 2.2 Penelitian Sejenis
Nama Penulis Judul Skripsi Kelebihan Kekurangan
Alam Putra Semesta
(2011) Mahasiswa
UIN Syarif
Hidayatullah Jakarta
Aplikasi Game Edukasi
pengenalan Bahasa Inggris
Tingkat Taman Kanak-
kanak berbasis multimedia.
Aplikasi ini sesuai
dengan konsepnya yang
ditujukan untuk anak-
anak dengan
menggunakan gambar
yang menarik.
Gambar beberapa
animasi masih belum
terlihat natural dan
level permainan
masih sedikit.
Tika Yuniawati,
Dede Rohidin,
Ferdian (2011)
Mahasiswa
Politeknik Telkom
Aplikasi Game Berbasisi
Flash Untuk Pembelajaran
Al-Quran Bagi Anak-Anak.
Kelebihan aplikasi ini
memiliki Konten
gambar yang menarik
minat anak kecil,
memiliki banyak
Kelemahannya
gambar dari setiap
objek masih sangat
kasar dan gradasi
dari setiap warna
68
Bandung animasi. masih kurang
menarik.
Suindarti (2011)
mahasiswa STMIK
AMIKOM
Yogyakarta.
Game edukasi
meningkatkan daya ingat
anak “Bermain bersama
Dido” dengan Macromedia
Drector.
Kelebihan aplikasi yang
dibuat memiliki game
yang beraneka jenis
sehingga user menjadi
lebih tertarik dan tidak
cepat bosan.
Kelemahannya
gambar dari setiap
objek masih sangat
kasar dan gradasi
dari setiap warna
masih kurang
menarik.
Ahmad Fahmiaji
(2013)
Mahasiswa UIN
Syarif Hidayatullah
Jakarta
Perancangan Game Edukasi
Islami Sebagai Media
Pembelajaran Pada
Madrasah Ibtidaiyah Al
Wardah Berbasis
Multimedia.
Kelebihan game ini
memiliki level yang
cukup variatif dan
gambar animasi yang
baik dan menarik.
Kelemahannya pola
permainan dari awal
hingga akhir tidak
berubah, sehingga
cepat membuat
bosan.
Rancangan game dan media pembelajaran yang peneliti buat ditujukan
untuk membantu proses pembelajaran siswa MI dengan menggunakan game
interaktif yang mampu meningkatkan kemampuan fungsi otak, hal ini
dimaksudkan agar siswa merasa senang, tidak cepat bosan dan mudah
menyerap pelajaran saat kegiatan belajar mengajar berlangsung.
69
BAB III
METODOLOGI PENELITIAN
Metodologi penelitian yang digunakan oleh peneliti dalam merancang
aplikasi multimedia ini adalah:
3.1. Metode Pengumpulan Data
Dalam proses penelitian ini penulis membutuhkan data yang benar-
benar akurat dan relevan sehingga mendapatkan hasil yang diharapkan.
Oleh karena itu sebelum melakukan penelitian, penulis terlebih dahulu
melakukan riset untuk mengumpulkan data-data informasi dengan cara
sebagai berikut:
3.1.1. Studi Kepustakaan
Dilakukan dengan cara membaca dan mempelajari buku-buku
yang berhubungan dengan senam otak, permainan edukatif,
multimedia, software-software pendukung serta data-data dari
internet yang relevan dengan topik yang akan dibahas.
3.1.2. Studi Lapangan
Metode pencarian data secara langsung di lapangan dengan
mengadakan:
70
a. Observasi
Metode ini dilakukan dengan cara pengamatan
langsung ke lapangan tentang kendala-kendala apa saja
yang dihadapi dalam Kegiatan Belajar Mengajar
(KBM) di kelas, serta kekurangan dari alat bantu yang
ada, seperti buku pelajaran berbentuk teks statis dan
monoton, papan tulis, alat bantu konvensional dan lain-
lain.
Untuk mengetahui kendala-kendala tersebut maka
dilakukan pengamatan pada:
Hari/Tanggal : Senin, 5 Januari 2015
Waktu : Pukul 09.00 -11.30 WIB
Tempat : Madrasah Ibtidaiyah At-taqwa
Alamat : Jl. Raya Pengasinan Gg. H. Marsan
Kp Kebon Kopi rt 01/06
Pengasinan, Sawangan – Depok.
b. Wawancara
Penulis melakukan dua tahap wawancara, tahap
pertama penulis melakukan wawancara kepada Kepala
Kepala Madrasah Itidaiyah At-taqwa Ibu Rumyanih,
S.Pd.I untuk mengetahui bagaimana metode yang
digunakan oleh sekolah dalam menerapkan proses dan
71
metode belajar serta menggali minat anak dalam
belajar.
Tahap kedua, penulis melakukan wawancara juga
kepada salah satu pengajar. Penulis berkesempatan
mewawancarai Bapak Muhammad Naseh, S.Pd.I
sebagai wali kelas 5 dan kepala bidang kesiswaan. Hal
ini bertujuan untuk mendapatkan informasi mengenai
minat siswa dalam memahami dan menguasai pelajaran
dan apa-apa yang dibutuhkan dan diharapkan oleh
pengguna dalam perancangan aplikasi game edukasi
dan media pembelajaran ini agar didapatkan data dan
masukkan yang mendukung. Hasil wawancara dapat
dilihat pada lampiran.
c. Kuesioner
Dengan menggunakan metode ini penulis
mengumpulkan data, pembagian kuesioner terdiri dari 2
tahapan yaitu kuesioner awal dan kuesioner evaluasi,
fungsi dari kuesioner awal adalah untuk mengetahui
apakah para siswa terbiasa menggunakan komputer,
penyebab kesulitan dalam belajar, serta pendapat
mengenai latihan otak menggunakan komputer.
Kuesioner evaluasi adalah untuk mengetahui apakah
aplikasi yang dirancang mudah digunakan, mudah
72
dipahami, menarik, serta sejauh mana aplikasi yang
dirancang dapat bermanfaat bagi mereka. Penulis
awalnya menyebarkan kuesioner kepada siswa
sebanyak 20 orang yang dilaksanakan pada:
Tanggal : 27 Januari 2015
Waktu : Pukul 09.00-12.00 WIB
Tempat : Madrasah Ibtidaiyah At-taqwa
Alamat : Jl. Raya Pengasinan Gg. H. Marsan
Kp Kebon Kopi rt 01/06
Pengasinan, Sawangan – Depok.
3.2. Metode Pengembangan
Metode perancangan permainan edukasi berbasis multimedia ini
menggunakan metodologi pengembangan multimedia versi Luther yang
terdiri dari enam tahap, yaitu: concept (pengonsepan), design (pendesainan),
material collecting (pengumpulan materi), assembly (pembuatan), testing
(pengujian) dan distribution (pendistribusian). (Binanto, 2010:259).
1. Concept (Pengonsepan)
Visualisasi yang dikembangkan adalah pemaksimalan teknologi
komputer khususnya di bidang multimedia dalam proses peningkatan
kemampuan otak dengan media permainan edukasi sehingga dapat
dengan mudah dipahami oleh siswa.
Aplikasi permaianan di buat dengan menggabungkan unsur teks,
animasi, gambar, video dan suara yang di kemas dalam sebuah
73
permainan yang memiliki tingkatan-tingkatan yang mengandung aspek
untuk merangsang otak agar kemampuannya dapat bertambah. Aplikasi
permaianan yang telah di buat hasil akhirnya akan dikonversi ke dalam
format *.exe dari software Adobe Flash CS6. sehingga aplikasi tersebut
dapat dijalankan di komputer manapun dengan spesifikasi minimum
yang sudah di tentukan pada sub bab 4.5. tabel 4.6.
Beberapa perangkat lunak pendukung juga digunakan. Seperti
Snipping tool, Format Factory, MP3 Cutter, dan Adobe Photoshop
CS6.
Dasar perancangan ditentukan pada tahap ini, seperti ukuran
resolusi layar, tingkatan level, dan lain-lain. Hasil dari pengembangan
konsep adalah judul, deskripsi, dan tujuan dari sistem tersebut.
Secara detail keseluruhan perencanaan dan konsep dapat di lihat di
sub bab 4.1.
2. Design (Pendesainan)
Pada tahap ini, untuk menggambarkan perancangan dari tiap-tiap
scene, untuk tahap ini perlu dibuat perancangan storyboard. Penentuan
tautan dari scene satu ke scene yang lain akan menggunakan
perancangan struktur navigasi dengan model hieraki. Sedangkan
perancangan perangkat keras dan perangkat lunak digunakan untuk
menentukan perangkat keras dan perangkat lunak yang dipakai dalam
pembuatan sistem.
74
1. Perancangan Storyboard
Pada perancangan storyboard, gambar dari scene, bentuk visual
perancangan, suara, durasi, keterangan, dan narasi untuk suara akan
dibuat. Hasil dari perancangan storyboard akan menjadi acuan
untuk pembuatan tampilan pada tahap implementasi.
Storyboard pada scene awal adalah halaman pembuka,
selanjutnya adalah scene untuk menu utama permaianan. Scene-
scene yang lain merupakan level-level dari permaianan tersebut.
pada aplikasi permaianan edukasi ini, terdapat 12 rancangan
storybord, antara lain:
1) Storyboard Halaman Pembuka
2) Storyboard Halaman Selamat Datang
3) Storyboard Halaman Menu Utama
4) Storyboard Halaman Pemanasan
5) Storyboard Halaman Menu Game
6) Storyboard Halaman Manfaat
7) Storyboard Halaman Game Mudah
8) Storyboard Halaman Akhir Game Mudah
9) Storyboard Halaman Game Menengah
10) Storyboard Halaman Akhir Game Menengah
11) Storyboard Halaman Game Sulit
12) Storyboard Halaman Akhir Game Sulit
75
Perancangan storyboard secara lengkap dapat dilihat pada sub bab
4.2.1.
2. Struktur Navigasi
Struktur navigasi yang digunakan menggunakan model hierarki
dengan modifikasi secara keseluruhan. Hasil dari perancangan
struktur navigasi berupa diagram hierarki yang menghubungkan
antar scene. Secara detail struktur navigasi dapat dilihat pada sub
bab 4.2.2.
3. Peracangan Antar Muka (user interface)
Perancangan antar muka disesuaikan dengan perancangan
storyboard yang telah dibuat sebelumnya. Sehingga terdapat 12
rancangan antar muka. Secara detail keseluruhan perancangan antar
muka dapat dilihat pada sub bab 4.4.1.
3. Material Collecting (Pengumpulan Materi)
Pada tahap pengumpulan bahan, bahan yang dikumpulkan adalah
berupa teks, gambar, animasi dan suara. Bahan-bahan yang digunakan
untuk kebutuhan aplikasi diperoleh dari membuat sendiri dengan
menggunkan program Adobe Photoshop CS6 dan Adobe Flash CS6
untuk gambar dan animasi, Voice Recorder untuk merekam suara serta
beberpa bahan yang di ambil dari internet yang kemudian di olah
dengan software yang tekah disebutkan sebelumnya.
Secara detai keseluruhan dari pengumpulan bahan dapat dilihat
pada sub bab 4.3.
76
4. Assembly (Pembuatan)
Tahap ini adalah tahap pembuatan seluruh objek berdasarkan
perancangan yang telah dibuat sebelumnya. Pada praktiknya tahap ini
bisa dilakukan dengan tahap pengumpulan bahan karena disesuaikan
dengan kebutuhan. Pada tahap ini aplikasi yang digunkan untuk
membangun permainan edukasi adalah Adobe Photoshop CS6 dan
Adobe Flash CS6. Secara detail dari tahap pembuatan dapat dilihat pada
sub bab 4.4.
5. Testing (Pengujian)
Pada tahap ini akan dilakuakn pengujian pada aplikasi yang dibuat.
Tahap pengujian dilakukan tidak setelah aplikasi jadi seluruhnya, tetapi
dilakuakn per scene atau dilakukan ditengah-tengah proses pembuatan.
Aplikasi harus berjalan dengan baik pada perangkat komputer
manapun. Apabila ada kesalaham, aplikasi akan dibetulkan. Jika sudah
berjalan sesuai dengan rancangan dan tujuan, proses akan masuk ke
tahap selanjunya yaitu penyelesaian dan distribusi.
Secara detail keseluruhan hasil dari pengujian dapat dilihat pada
sub bab 4.5.
6. Distribution (Pendistribusian)
Pada tahap ini aplikasi yang sudah jadi didistribusikan dalam
bentuk media CD (Compact Disk) dan media internet. Penyebaran
aplikasi masih dibatasi untuk mendapatkan respon dan hasil dari para
pengguna untuk selanjutnya masuk ke tahap evaluasi.
77
7. Evaluasi Aplikasi (Evaluate)
Tahap evaluasi dilakuakan demo aplikasi kepada siswa MI At-
Taqwa. Dari hasil demo aplikasi tersebut ditentukan apa saja
kekurangan serta kendala yang dialami saat pengguna menjalankan
aplikasi tersebut.
Demo aplikasi dilakukan kepada siswa sebanyak 10 orang yang
dilaksanakan pada:
Tanggal : 2 Maret 2015
Waktu : Pukul 09.00-12.00 WIB
Tempat : Madrasah Ibtidaiyah At-taqwa
Alamat : Jl. Raya Pengasinan Gg. H. Marsan
Kp Kebon Kopi rt 01/06
Pengasinan, Sawangan – Depok.
3.3. Alasan Menggunakan Metode Luther
Alasan peneliti menggunakan Metode Multimedia Development Life
Cycle dari Luther adalah:
1. Tahapan multimedia Luther dapat dikerjakan seacara paralel sehingga
memudahkan peneliti untuk melakukan update informasi pada
penelitiannya.
2. Pada metode ini terdapat tahapan material collecting yang tidak
terdapat pada metode lain seperti metode Vaughan dan Vilamil-
Molina. Sedangkan penelitian ini sangat bergantung pada
pengumpulan bahan.
78
BAB IV
HASIL DAN PEMBAHASAN
Pada bab ini berisi penjelasan mengenai proses atau tahapan-tahapan
dalam membangun game edukatif senam otak serta perangkat pendukung
perancangan tersebut. Tahapan perancangan aplikasi dimulai dengan concept
(pengonsepan), design (pendesainan), material collecting (pengumpulan materi),
assembly (pembuatan), testing (pengujian) dan distribution (pendistribusian)
(Binanto, 2010:259).
4.1. Concept (Pengonsepan)
Deskripsi konsep game adalah sebagai berikut :
1. Judul
Perancangan Aplikasi Edukasi Senam Otak Dengan Model
Instructional Games Pada Madrasah Ibtidaiyah At Taqwa
2. Pengguna
Pengguna dikhususkan untuk siswa tingkatan Madrasah Ibtidaiyah
kelas 4, 5 dan 6, namun secara umum boleh dimainkan oleh masyarakat
luas. Pengguna game diasumsikan pernah menggunakan komputer dan
mengetahui Bahasa Indonesia.
3. Tujuan
Tujuan dari pembuatan game ini adalah memberikan metode
melatih otak sehingga mampu meningkatkan fungsi dan kemampuan
otak siswa. Selain itu game ini juga diharapkan akan memudahkan para
guru dalam mengajarkan dan memahami pelajaran kepada siswa.
79
4. Jenis Game
Jenis game yang dibuat oleh peneliti adalah instructional games
yang merupakan salah satu metode dalam pembelajaran dengan
multimedia interaktif yang berbasis komputer. Tujuan model
Instructional Games ini adalah untuk menyediakan suasana/lingkungan
yang memberikan fasilitas belajar yang menambah kemapuan siswa.
Interaktivitas game digambarkan dengan terdapatnya navigasi yang
dapat digunakan oleh pengguna aplikasi sehingga game bersifat non
linear.
5. Teknik Pembuatan Game
Peneliti membuat game dengan teknik illustrasi dan teknik animasi
dimana pada teknik ilustrasi setiap gambar yang ada pada game
merupakan pemodelan 2 dimensi yang dibuat pada Adobe Flash dengan
menggunakan Pencil Tool sebagai tools utama. Dan pembuatan game
dengan animasi menggunakan teknik Frame by Frame, animasi
Tweening, animasi masking dengan teknik dua dimensi.
Pembuatan game dibagi kedalam tiga level. Level pertama yaitu
level mudah, dimana pengguna yang memainkannya di tuntut untuk
menyelesaikan permainan dengan waktu sedikit mungkin. Level kedua
yaitu level menengah, pengguna yang bermain diharuskan untuk
mendapatkan nilai/score sebanyak mungkin. Dan level ketiga adalah
level sulit, setiap pengguna yang bermain harus bertarung melawan
80
waktu yang sudah di tentukan untuk dapat menyelesaikan permainan
sebelum waktu habis.
6. Gambar
Gambar yang digunakan menggunakan file berformat .png dan .jpg
yang dibuat oleh peneliti menggunakan software Adobe Photoshop dan
Adobe Flash.
PNG (Portable Network Graphics) adalah salah satu format
penyimpanan citra yang menggunakan metode pemadatan yang tidak
menghilangkan bagian dari citra tersebut (lossless compression).
Format .png menggunakan metode kompresi lossless untuk
menampilkan gambar 24-bit atau warna-warna solid pada media.
Format ini mendukung transparansi di dalam alpha channel sehingga
format .png sangat baik digunakan pada media atau aplikasi yang dibuat
oleh peneliti.
7. Audio
Menggunakan file yang berformat .mp3 dan .wav yang diambil dari
www.youtube.com dan dikonversi menjadi .mp3 serta hasil rekaman
peneliti.
8. Video
Menggunakan file yang berformat .avi yang dibuat dengan
software Adobe After Effect dan dikonversi menjadi .swf untuk
selanjutnya digabungkan pada Adobe Flash.
81
9. Animasi
Animasi menggunakan file yang berformat .swf yang dibuat
dengan Adobe Flash dengan menggunakan Grafik 2D.
Kelebihan menggunakan file .swf adalah animasi yang dihaslkan
sangat bervariasi dan lebih menarik, desainer dapat mengeksplor lebih
banyak fungsi-fungsi tool yang ada pada software Adobe Flash. Selain
itu, File yang dihasilkan ukuranya relatif kecil dan dapat ditampilkan
dengan ukuran layar yang disesuaikan dengan keinginan.
10. Penggunaan Warna
Dalam pembuatan aplikasi permainan ini penulis memerlukan
warna sebagi gelombang eletromagnetik yang menuju ke mata kita
kemudian diterjemahkan oleh otak. Warna juga sesuatu yang
berhubungan dengan emosi manusia dan dapat menimbulkan pengaruh
psikologis. Berikut beberapa warna beserta kegunaannya yang
digunakan dalam pembuatan aplikasi permainan:
a. Biru, sering diartikan sebagai sesuatu yang memiliki ketenangan
dan kepercayaan.
b. Merah, Arti dan warna ini melambangakan sesuau kekuatan, dan
kemauan yang agresif.
c. Hijau, warna ini menunjukkan sesuatu yang alami dan serba sehat.
11. Software Authoring
Adobe Photoshop untuk mengolah gambar, Adobe Flash dan
Adobe After Effect untuk membuat animasi.
12. Output
Output aplikasi permianan ini berbentuk kepingan CD (Compact Disk)
82
4.2. Design (Pendesainan)
4.2.1. Perancangan Storyboard
Perancangan storyboard merupakan tahap menggambarkan
panduan mengenai segala sesuatu tentang tampilan aplikasi yang
akan dibangun nantinya pada tahap assembly (Pembuatan).
Tabel 4.1. Perancangan Storyboard
No Visual Konten
1
Modul : Halaman Pembuka
Frame ke : 121
Sebelumnya : -
Selanjutnya : Halaman Selamat Datang
Keterangan : Menampilkan Halaman Pembuka.
Pada halaman ini terdapat animasi pembuka, tombol
start, tombol Fullscreen, tombol keluar dan kontrol
panel suara.
Tombol start akan mengarahkan pengguna ke Halaman
Selamat Datang. Tombol Fullscreen membuat resolusi
game menjadi mode layar penuh. Tombol keluar akan
menutup aplikasi. Di kontrol panel suara terdapat
-Animasi
-Gambar
-Teks
-Audio
-Tombol
83
tombol untuk mengatur suara, tombol play untuk
memutar suara, tombol pause untuk menjeda suara,
tombol stop untuk memberhentikan suara. Dan terdapat
volume bar unruk mengeraskan atau mengecilkan
suara.
2
Modul : Halaman Selamat Datang
Frame ke : 136
Sebelumnya : Halaman Pembuka
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman selamat
datang. Pada halaman ini terdapat animasi selamat
datang, tombol play, tombol bantuan, tombol
fullscreen, tombol keluar dan kontrol panel suara.
Tombol play akan mengarahkan pengguna ke Halaman
Menu Utama, tombol bantuan akan menampilkan
informasi tombol-tombol yang terdapat dalam aplikasi.
Dan untuk tombol fullscreen, tombol keluar dan
kontrol panel suara fungsinya sama seperti penjelasan
di tabel storyboard nomor 1 halaman pembuka.
-Animasi
-Gambar
-Teks
-Audio
-Tombol
84
3
Modul : Halaman Menu Utama
Frame ke : 162
Sebelumnya : -
Selanjutnya : Halaman Pemanasan
Halaman Menu Game
Halaman Manfaat
Keterangan : Menampilkan Halaman Utama. Pada
halaman ini terdapat tombol pemanasan, tombol game,
tombol manfaat, tombol fullscreen, tombol keluar dan
kontrol panel suara.
Tombol pemanasan akan mengarahkan pengguna ke
Halaman Pemanasan. Tombol game akan mengarahkan
pengguna ke Halaman Menu Game. Tombol mnfaat
akan menuju ke halaman Manfaat. Dan untuk tombol
fullscreen, tombol keluar dan kontrol panel suara
fungsinya sama seperti penjelasan di tabel storyboard
nomor 1 halaman pembuka.
-Gambar
-Teks
-Audio
-Tombol
85
4
Modul : Halaman Pemanasan
Frame ke : 187
Sebelumnya : Halaman Menu Utama
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman Pemanasan.
Pada halaman ini terdapat tombol senam 1, tombol
senam 2, tombol senam 3, tombol senam 4, tombol
senam 5, tombol kembali, tombol fullscreen, tombol
keluar dan kontrol panel suara.
Tombol senam 1 hingga senam 5 akan menampilkan
animasi senam otak menggunakan jari apabila kursosr
di arahkan ke tombol tersebut. Tombol kembali akan
mengarah ke Halaman Menu Utama. Dan untuk tombol
fullscreen, tombol keluar dan kontrol panel suara
fungsinya sama seperti penjelasan di tabel storyboard
nomor 1 halaman pembuka.
-Animasi
-Gambar
-Teks
-Audio
-Tombol
86
5
Modul : Halaman Menu Game
Frame ke : 188
Sebelumnya : Halaman Menu Utama
Selanjutnya : Halaman Game Mudah
Halaman Game Menengah
Halaman Game Sulit
Keterangan : Menampilkan Halaman Menu Game.
Pada halaman ini terdapat tombol game mudah, tombol
game menengah, tombol game sulit, tombol kembali,
tombol fullscreen, tombol keluar dan kontrol panel
suara.
Tombol game mudah akan mengarahkan pengguna ke
Halaman game mudah, dimana pengguna dapat
langsung memainkan permainan. Begitupun tombol
game menengah, akan menagarah ke Halaman game
menengah dan tombol game sulit akan mengarah ke
halaman game sulit. Tombol kembali akan mengarah
ke Halaman Menu Utama. Dan untuk tombol
fullscreen, tombol keluar dan kontrol panel suara
fungsinya sama seperti penjelasan di tabel storyboard
nomor 1 halaman pembuka.
-Animasi
-Gambar
-Teks
-Audio
-Tombol
87
6
Modul : Halaman Manfaat
Frame ke : 278
Sebelumnya : Halaman Menu Utama
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman Manfaat. Pada
halaman ini terdapat slide manfaat, tombol kembali,
tombol fullscreen, tombol keluar dan kontrol panel
suara.
Slide manfaat terdapat 5 slide yang dapat di lihat
dengan menekan tombol navigasi yang ada di
bawahnya. Tombol kembali akan mengarah ke
Halaman Menu Utama. Dan untuk tombol fullscreen,
tombol keluar dan kontrol panel suara fungsinya sama
seperti penjelasan di tabel storyboard nomor 1 halaman
pembuka.
-Animasi
-Gambar
-Teks
-Audio
-Tombol
88
7
Modul : Halaman Game Mudah
Frame ke : 189
Sebelumnya : Halaman Menu Game
Selanjutnya : Halaman Akhir Game Mudah
Keterangan : Menampilkan Halaman Game Mudah.
Pada halaman ini pengguna langsung dapat memainkan
permaianan yang berhubungan dengan rangsangan
otak, pada level mudah akan tersedia 9 permainan yang
berurutan dimana pengguna harus menyelesaikan
semua permainan dengan waktu secepat mungkin.
Pada halaman ini juga terdapat tombol fullscreen,
tombol keluar dan kontrol panel suara.
Tombol fullscreen, tombol keluar dan kontrol panel
suara fungsinya sama seperti penjelasan di tabel
storyboard nomor 1 halaman pembuka.
-Game
-Animasi
-Gambar
-Teks
-Audio
-Tombol
89
8
Modul : Halaman Akhir Game Mudah
Frame ke : 222
Sebelumnya : Halaman Game Mudah
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman Akhir Game
Mudah. Pada halaman ini pengguna akan mengetahui
berapa lama waktu yang di capai dalam menyelesaikan
9 permainan di level mudah ini. Jika waktu yang di
selesaikan kurang dari 2 menit maka pengguna akan
mendapatkan evaluasi kemampuan otaknya cukup
baik, bila lebih dari itu maka pengguna dapat
meningkatkan latihannya kembali. Pada halaman ini
juga terdapat Tombol kembali, tombol fullscreen,
tombol keluar dan kontrol panel suara.
Tombol kembali akan mengarah ke Halaman Menu
Game. Tombol fullscreen, tombol keluar dan kontrol
panel suara fungsinya sama seperti penjelasan di tabel
storyboard nomor 1 halaman pembuka.
-Gambar
-Teks
-Audio
-Tombol
90
9
Modul : Halaman Game Menengah
Frame ke : 223
Sebelumnya : Halaman Menu Utama
Selanjutnya : Halaman Akhir Game Menengah
Keterangan : Menampilkan Halaman Game
Menengah. Pada halaman ini pengguna memainkan
permaianan tingakatan yang lebih sulit dengan
tantangan mendapatkan nilai/score sebanyak-
banyaknya. Permainan pada level menengah terdapat 5
permainan. Pada halaman ini juga terdapat tombol
fullscreen, tombol keluar dan kontrol panel suara.
Tombol fullscreen, tombol keluar dan kontrol panel
suara fungsinya sama seperti penjelasan di tabel
storyboard nomor 1 halaman pembuka.
-Game
-Animasi
-Gambar
-Teks
-Audio
-Tombol
91
10
Modul : Halaman Akhir Game Menengah
Frame ke : 277
Sebelumnya : Halaman Game Menengah
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman Akhir Game
Menengah. Pada halaman ini pengguna akan
mengetahui berapa banayak nilai yang diperoleh dalam
menyelesaikan 5 permainan di level menengah. Jika
niali yang diperoleh lebih dari 50 point maka pengguna
akan mendapatkan evaluasi kemampuan otaknya cukup
baik, bila kurang dari itu maka pengguna dapat
meningkatkan latihannya kembali. Pada halaman ini
juga terdapat Tombol kembali, tombol fullscreen,
tombol keluar dan kontrol panel suara.
Tombol kembali akan mengarah ke Halaman Menu
Game. Tombol fullscreen, tombol keluar dan kontrol
panel suara fungsinya sama seperti penjelasan di tabel
storyboard nomor 1 halaman pembuka.
-Gambar
-Teks
-Audio
-Tombol
92
11
Modul : Halaman Game Sulit
Frame ke : 280
Sebelumnya : Halaman Menu Utama
Selanjutnya : Halaman Game Sulit
Keterangan : Menampilkan Halaman Game Sulit.
Pada halaman ini permaianan yang di hadapi akan
lebih sulit tingkatannya dan harus bertarung dengan
waktu mundur. Pengguna diharuskan menyelesaikan 5
permaianan yang ada sebelum waktunya habis. Pada
halaman ini juga terdapat tombol fullscreen, tombol
keluar dan kontrol panel suara.
Tombol fullscreen, tombol keluar dan kontrol panel
suara fungsinya sama seperti penjelasan di tabel
storyboard nomor 1 halaman pembuka.
-Game
-Animasi
-Gambar
-Teks
-Audio
-Tombol
93
12
Modul : Halaman Akhir Game Sulit
Frame ke : 285
Sebelumnya : Halaman Game Sulit
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman Akhir Game
Sulit. Pada halaman ini jika pengguna berhasil
menyelesaiakan 5 permainan sebelum waktu habis
maka pengguna akan mendapatkan evaluasi
kemampuan otaknya cukup baik, bila waktu habis
maka permaianan akan selesai (game over) dan
pengguna dapat meningkatkan latihannya kembali
dengan menekan tombol kembali. Pada halaman ini
juga terdapat Tombol kembali, tombol fullscreen,
tombol keluar dan kontrol panel suara.
Tombol kembali akan mengarah ke Halaman Menu
Game. Tombol fullscreen, tombol keluar dan kontrol
panel suara fungsinya sama seperti penjelasan di tabel
storyboard nomor 1 halaman pembuka.
-Animasi
-Gambar
-Teks
-Audio
-Tombol
94
4.2.2. Perancangan Struktur Navigasi
Struktur navigasi ini berguna untuk memberikan gambaran link
dari halaman satu ke halaman lainnya.
Halaman
Pembuka
Halaman
Selamat
Datang
Halaman
Menu Utama
Bantuan
Halaman
Menu Game
Halaman
Manfaat
Halaman
Pemanasan
Halaman
Level
Menengah
Halaman
Level Sulit
Halaman
Level Mudah
Keluar
Gambar 4.1. Struktur Navigasi
95
4.2.3. Perancangan State Transition Diagram (STD)
STD merupakan diagram yang memodelkan tingkah laku
(behaviour) sistem berdasarkan pada definisi satu bagian dari
keadaan sistem. Langkah ini digunakan untuk menggambarkan
kinerja sistem. Terdapat 6 State Transition Diagram pada
perancangan permainan edukasi ini.
1. STD Selamat Datang
Selamat Datang
Menu Utama
BantuanKeluar
Klik Bantuan
Tampil Informasi BantuanKlik Keluar
Keluar dari Aplikasi
Klik Play
Tampil Halaman
Menu Utama
(Lanjut ke STD Menu Utama)
Klik Bantuan
Tampil Halaman
Selamat Datang
Gambar 4.2. State Transition Diagram Selamat Datang
Pada Halaman Selamat Datang, pengguna dapat mengakses 3
navigasi, yaitu Menu Utama, tombol Bantuan dan Keluar.
2. STD Menu Utama
State transtion diagram (STD) pada halaman utama
terdapat empat navigasi yaitu Pemanasan, Game, Manfaat dan
Keluar
96
Menu Utama
Game
Keluar
ManfaatPemanasan
Klik Keluar
Keluar dari
Aplikasi
Klik Kembali
Tampil Halaman
Menu Utama
Klik Kembali
Tampil Halaman
Menu Utama
Klik Kembali
Tampil Halaman
Menu Utama
Klik Manfaat
Tampil Halaman Manfaat
(Lanjut ke STD Manfaat)
Klik Pemanasan
Tampil Halaman Pemanasan
(Lanjut ke STD Pemanasan)
Klik Game
Tampil Halaman
Menu Game
(Lanjut ke STD Menu Game)
Gambar 4.3. State Transition Diagram Menu Utama
3. STD Pemanasan
State transtion diagram pada halaman pemanasan terdapat
dua navigasi yaitu Menu Utama dan Keluar.
Pemanasan Menu UtamaKeluar
Klik Kembali
Tampil Halaman
Menu Utama
(Lanjut ke STD Menu Utama)
Klik Keluar
Keluar dari Aplikasi Klik Pemanasan
Tampil Halaman
Pemanasan
Gambar 4.4. State Transition Diagram Pemanasan
97
4. STD Game
Menu GameGame
Level Mudah
Keluar
Game
Level Menengah
Game
Level Sulit
Menu Utama
Klik Keluar
Keluar dari Aplikasi
Klik Kembali
Tampil Halaman
Game
Klik Kembali
Tampil Halaman
Game
Klik Kembali
Tampil Halaman
Game
Klik Kembali
Tampil Halaman
Menu Utama
Lanjut ke STD Menu Utama)
Klik Menengah
Tampil Halaman
Game
Level Menengah
Klik Sulit
Tampil Halaman
Game
Level Sulit
Klik Mudah
Tampil Halaman
Game Level Mudah
Klik Game
Tampil Halaman
Game
Gambar 4.5. State Transition Diagram Game
Pada State Transition Diagram Game terdapat 5 navigasi. Yaitu
Mudah, Menengah, Sulit, Kembali untuk ke menu utama dan Keluar
untuk keluar aplikasi.
5. STD Manfaat
Gambar 4.6. State Transition Diagram Manfaat
Pada State Transition Diagram manfaat terdapat 2 navigasi. Yaitu
tombol Kembali untuk ke menu utama dan Keluar untuk keluar
aplikasi.
98
4.3. Material Collecting (Pengumpulan Materi)
Peneliti melakukam metode pengumpulan bahan yang diperlukan untuk
memenuhi kebutuhan-kebutuhan dalam pembuatan game ini. Metode itu
adalah studi kepustakaan, wawancara dan kuisioner.
Bahan yang diperlukan untuk membangun game ini berupa file teks,
gambar, suara dan animasi diperoleh dari berbagai sumber dan sebagian
yang lain dibuat sendiri oleh peneliti. Berikut adalah rinciannya:
4.3.1. Bahan Teks
Tabel 4.2. Bahan Teks
No Judul Teks Jenis Font Ukuran
1 Credit Alhambra 178 kb
2 Judul BD Bardust 214 kb
3 Tombol Play BD Bardust 214 kb
4 Tombol Start BD Bardust 214 kb
5 Tombol Kembali BD Bardust 214 kb
6 Tombol Senam Akbar 148 kb
7 Konten game ITC Avant Garde 126 kb
8 Menu game ITC Avant Garde 126 kb
9 Manfaat ITC Avant Garde 126 kb
4.3.2. Bahan Gambar
Tabel 4.3. Bahan Gambar
No Nama Gambar Jenis
Gambar Ukuran Sumber
1 Logo .png 10.8 kb dibuat di Adobe Photoshop
2 Background
Halaman Pembuka .jpg 340 kb dibuat di Adobe Photoshop
3 Bacground
Selamat Datang .jpg 467 kb dibuat di Adobe Photoshop
4 Menu Utama .png 631 kb dibuat di Adobe Photoshop
5 Background .jpg 315 kb dibuat di Adobe Photoshop
6 Pilih Game .jpg 105 kb dibuat di Adobe Photoshop
7 Screenshot_2015-
03-27-16-13-40 .jpg 113 kb Screenshoot handphone
8 Reading .gif 34,8 kb www.ocps.net
9 Sretching .gif 9,86 kb ukca.org.uk
10 Guitar .png 561 kb Hdwallpapered.com
99
11 pencilcolours .png 638 kb www.wallpaperup.com
12 Greenlizard .png 738 kb Hdw.eweb4.com
13 Nature .png 773 kb Wallpaperswide.com
14 Cars .png 743 kb Hdw.eweb4.com
15 Mushroom .png 738 kb Abduzeedo.com
16 Laptop .png 645 kb www.wallpapervortex.com
17 Awan2 .png 193 kb dibuat di Adobe Photoshop
18 Awan3 .png 18,1 kb dibuat di Adobe Photoshop
19 Awan1 .png 164 kb dibuat di Adobe Photoshop
20 Joystick .png 124 kb dibuat di Adobe Photoshop
21 Black-gear-hi .png 31,87 kb www.clker.com
4.3.3. Bahan Animasi (Flash dan Video)
Tabel 4.4. Bahan Animasi
No Nama Video Jenis
Video
Ukuran Sumber
1 Animasi Opening .mov
15,1Mb Dibuat pada Adobe After
Effect
2 Tween animasi1 .swf 324 kb Dibuat di Adobe Flash
3 AnimasiHome .swf 43 kb Dibuat di Adobe Flash
4 Awan Animasi .swf 342 kb Dibuat di Adobe Flash
5 Movieclip_salah 74 kb Dibuat di Adobe Flash
6 Movieclip_nosalah 83 kb Dibuat di Adobe Flash
7 Mc_senam_ikuti 25 kb Dibuat di Adobe Flash
8 Mc_manfaat 79 kb Dibuat di Adobe Flash
9 Mc_lanjutkan 14 kb Dibuat di Adobe Flash
10 Mc_btn1 8 kb Dibuat di Adobe Flash
11 Mc_btn_p2 9 kb Dibuat di Adobe Flash
12 Mc_btn_gmeMenu 65 kb Dibuat di Adobe Flash
13 Mc_btn_gameSusah 88 kb Dibuat di Adobe Flash
14 Mc_btn_gameMudah 88 kb Dibuat di Adobe Flash
15 Mc_btn_gameMenengah 88 kb Dibuat di Adobe Flash
4.3.4. Bahan Suara
Tabel 4.5. Bahan Suara
No Nama Suara Jenis Suara Ukuran Sumber
1 Wrong-answer .wav 207,4 kb www.soundjay.com
2 Right Edit .wav 225,8 kb www.soundjay.com 3 Game over .wav 258,5 kb www.soundjay.com 4 Click .wav 0,6 kb www.adobeflash.com 5 Button-3 .mp3 6,7 kb www.soundjay.com 6 17 .mp3 2423,1 kb www.classical-music.com 7 1 .wav 102,4 kb Rekam 8 2 .wav 69,6 kb Rekam 9 3 .wav 53,2 kb Rekam
100
4.4. Assembly (Pembuatan)
4.4.1. Layout dan Desain
Pada tahapan ini, peneliti mendesain interface game agar tampil
user friendly. Tahapan desain meliputi desain logo, animasi opening,
background, karakter, level permainan dan tombol navigasi pada
setiap halaman yang ada di game ini.
1. Desain Logo
Gambar 4.7. Logo Game
Desain logo game dibuat dari klasifikasi bentuk Picture
Mark dan Letter Mark Logo. Visualisasi Logo dibuat dari
gabungan gambar siluet kepala dan letter “Senam Otak” yang
berbentuk tipografi sehingga menyerupai gambar otak.
101
Gambar 4.8. Langkah Pembuatan Logo
Penjelasan Gambar :
a. Jalankan Aplikasi Adobe Photoshop, Buat dokumen baru di
Adobe Photoshop dengan ukuran 16,93 cm x 16,93 cm
dengan resolusi 300 pixel.
b. Gunakan Pen Tool yang terdapat pada Toolbar untuk
membuat sketsa siluet kepala
c. Isi warna menggunakan warna hitam agar membentuk
karakter siluet seperti pada umumnya.
102
d. Setelah itu buat tulisan “Senam Otak” dengan menggunakan
Pen Tool dan atur agar membetuk tipografi seperti otak.
e. Berikan efek shine pada tulisan agar terlihat lebih nyata
dengan menggunakan Brush Tool.
2. Desain Animasi Opening
Gambar 4.9. Langkah Pembuatan Animasi Opening I
103
Penjelasan gambar :
a. Buka aplikasi Adobe After Effect dan atur komposisi
ukuran video dengan width 1920x1080 dengan durasi 9
detik pada frame rate 30.
b. Import logo senam otak yang telah dibuat di Adobe
Photoshop ke halaman project dengan cara File > Import
dan pilih file yang ingin digunakan.
c. Berikan Effect Wipe Master pada Control Effect dan atur
durasi tampil logo di 2 detik awal.
d. Buat Radial Effect dengan warna #e8507e dan atur durasi
selama 1,5 detik untuk Effect Radial.
Gambar 4.10. Langkah Pembuatan Animasi Opening II
104
e. Pada frame selanjutnya, import gambar tipograpi senam
otak yang telah di buat di Adobe Photoshop dan beri
animasi zoom buble dengan mengklik Animation > Effect >
Logo > Zoom Buble.
f. Setelah semua karakter ditampilkan, atur opacity dari 100%
ke 0% untuk tampilan transisi ke halaman selanjutnya.
g. Render project ke format .avi dengan mengklik Render >
Render Queueu dan atur kedalam format .avi
3. Desain Halaman Pembuka
Gambar 4.11. Desain Halaman Pembuka
Pembuatan halaman pembuka menggunakan 2 aplikasi
yaitu Adobe Photoshop dan Adobe Flash. Adobe Photoshop
digunakan untuk mengolah gambar dan Adobe Flash untuk
membuat animasinya.
105
Tahap pertama adalah membuat latar belakang halaman
pembuka menggunakan aplikasi Adobe Photosohop. Tahap
selanjutnya latar belakang yang sudah dibuat di Export ke
Adobe Flash Untuk di buat animasinya.
Gambar 4.12. Langkah Pembuatan Latar Belakang Halaman Pembuka I
Penjelasan Gambar:
a. Buka aplikasi Adobe Photoshop. Kemudian buat dokumen
baru dengan cara klik menu File > New atau dengan
menekan tombol Ctrl + N.
106
b. Masukan angka 1024 pada kolom isian Width dan angka
640 pada kolom isian Height dengan satuan pixel. Pada
kolom isian Resultions masukkan angka 72 Pixel/Inch lalu
klik Ok.
c. Buka file gambar di direktori penyimpanan data dengan
cara kli menu File > Open atau dengan menekan tombol
Ctrl + O pada keyboard. Kemudian pilih gambar lalu klik
Open.
d. Gunakan Tools Magic Wand Tool yang terdapat pada
Toolbox. Kemudian klik pada bagian area gambar yang
ingin dihilangkan. Jika sudah muncul area seleksi pada
bidang warna yang sama tekan tombol Del.
e. Atur Opacity gambar menjadi 70 %.
f. Kemudian Drag And Drop gambar tersebut ke halaman
yang sudah di buat di awal dengan menggunakan Selection
Tool yang ada pada Toolbox atau dengan menekan tombol
V.
g. Atur posisi gambar di tengah dengan sedikit ke atas.
Gunakan Move Tool untuk memperbesar atau menecilkan
gambar.
107
Gambar 4.13. Langkah Pembuatan Latar Belakang Halaman Pembuka II
h. Klik Layer Background, kemudaian klik Menu Edit lalu
pilih Fill (Shift + F5)
i. Isikan warna pada Layer Background dengan warna abu-
abu terang. Beri sedikit efek cahaya dengan menggunakan
Dodge Tool.
j. Buat bidang persegi panjang dengan menggunakan
Rectangle Tool dengan warna #7fe6f5. Buat lagi persegi
untuk bagian belakangnya dengan warna #339eae dan
108
letakan posisi Layer berada di bawah Layer persegi panjag
pertama. Buat sekali lagi untuk posisi yang lain dengan cara
yang sama. Atur posisi dengan baik sehingga dapat
membentuk efek 3dimensi. Tambahkan sedikit bayangan,
klik kanan pada Layer Shape, kemudian pilih Blending
Options lalu pilih Drop Shadow. Klik Ok.
k. Simpan gambar dengan cara klik Menu File > Save As.
Isikan nama file sesuai kebutuhan lalu pilih format .jpeg.
Klik Save kemudian akan muncul kotak dialog JPEG
Options, atur Quality pada Max kemudian klik Ok.
Gambar 4.14. Hasil Latar Belakang Halaman Pembuka
109
Gambar 4.15. Langkah Pembuatan Animasi Pada Adobe Flash
a. Buka aplikasi Adobe Flash dan buat dokumen baru dengan
Type: ActionScript 2.0. Isi kolom Width: 1024px dan
Height: 640px kemudian klik Ok.
b. Import gambar ke dalam stage dengan cara klik menu File
> Import > Import to Stage atau dengan menekan tombol
jalan pintas Ctrl + R.
c. Atur gambar hingga sesuai dengan stage.
110
d. Buat Layer baru dengan cara klik menu Insert > Timeline >
Layer. Kemudian ganti nama masing-masing Layer agar
mudah dalam proses pembuatan halaman selanjutnya. Layer
yang digunakan untuk gambar latar belakang ganti nama
Layer dengan background. Sedangkan pada Layer yang
baru di buat ganti dengan nama Orang & Teks.
e. Pilih Layer Orang & Teks Pada Frame 1, kemudian pilih
Text Tool. Pada Properties pilih Classic Text dan Gunakan
Static Text. Di kolom Character gunakan tipe huruf pada
kolom Family dan pilih jenis Font BD Bardust, Size 24 pt
dan Color putih #ffffff.
Gambar 4.16. Langkah Pembuatan Animasi Teks Berjalan
f. Ketik Segarkan Otakmu, atur posisi dan ukuran teks agar
sesuai dengan latar belakang.
g. Pilih objek teks yang sudah di buat, kemudain tekan tombol
F8 pada keyboard atau dengan cara pilih menu Modify >
Convert to Symbol... pada kotak dialog yang muncul pilih
Type: Movie Clip kemudian klik Ok. Buat animasi ke kanan
dan ke kiri dengan mengubah posisi Frame awal dan akhir.
111
Gambar 4.17. Langkah Pembuatan Animasi Orang
h. Gunakan Pencil Tool atau dengan menekan tombol Y pada
keyboard. Gambar animasi orang dengan alat tersebut
hingga selesai. Pastikan Layer yang digunakan adalah Layer
Orang & Teks. Seleksi dan pilih gambar yang sudah jadi
kemudian tekan tombol F8 untuk mengubah gambar
menjadi Movie Clip. Pada kotak dialog yang muncul pilih
Type: Movie Clip kemudian klik Ok.
112
i. Klik dua kali pada Movie Clip tersebut, kemudian buat
animasi dengan merubah posisi tangan gambar pada Frame
yang berbeda.
4. Desain Halaman Selamat Datang
Gambar 4.18. Desain Halaman Selamat Datang
Elemen obyek yang terdapat pada halaman selamat datang
adalah teks, gambar, suara dan animasi. Adapun langkah
pembuatannya adalah sebagai berikut :
113
Gambar 4.19. Langkah Pembuatan Halaman Selamat Datang I
Penjelasan gambar :
a. Buat dokumen baru di Adobe Photoshop dengan ukuran
1024x640 pixel dengan resolusi 72 pixel/inch. Kemudian
klik Ok.
b. Hilangkan kunci pada Layer agar objek dapat di ubah
dengan cara klik dua kali pada Layer, pada kotak dialog
yang muncul klik Ok.
114
c. Gunakan alat Rectangular Marquee Tool yang ada pada
Toolbox atau dengan menggunakan tombol jalan pintas
dengan menekan tombol M.
d. Seleksi bagaian gambar yang akan dihilangkan, kemudaian
tekan tombol Del.
e. Buat sebuah gambar, kemudian gunakan Type Tool untuk
membuat teks.
f. Simpan gambar dengan format .png. klik Save. Kemudian
pada kotak dialog yang muncul, pada Compression pilih
None/Fast dan pada Interlance pilih Interlanced kemudian
klik Ok.
Gambar 4.20. Langkah Pembuatan Halaman Selamat Datang II
115
g. Buka kembali Program Adobe Flash.
h. Buat layer baru dengan cara klik menu File > Timeline >
Layer. Ganti nama Layer. Posisikan Layer tepat berada di
atas Layer Latar Belakang.
i. Klik kanan pada Frame ke 3 (Frame ke 1 dan ke 2 di
gunakan untuk halaman Animasi Opening dan halaman
pembuka), pada Layer yang baru di buat, kemudian pilih
Insert Blank Keyframe.
j. Masukkan gambar Selamat Datang yang telah kita buat
sebelumnya ke atas Stage. Klik menu File > Import >
Import to Stage atau dengan cara tekan tombol Ctrl + R.
Pilih gambar di direktori kemudian klik Open.
k. Pastikan Layer gambar Selamat Datang tersebut berada di
Layer Latar Belakang.
l. Kunci Layer dengan mengklik simbol gembok.
m. Pada Layer Latar Belakang di Frame ke 3 buat animasi
awan bergerak, sehingga terlihat efek 3 dimensi yang
berada di belakang gambar.
5. Desain Halaman Menu Utama
Halaman menu utama di desain dengan dominan gambar
otak sebagai ciri utama dalam aplikasi permainan ini.
116
Gambar 4.21. Desain Halaman Menu Utama
Sama seperti halaman-halaman sebelumnya, gambar latar
belakang halaman selamat datang di desain menggunakan
aplikasi Adobe Photoshop dan pembuatan tombol serta bagian-
bagian lain di buat di Adobe Flash.
Gambar 4.22. Langkah Pembuatan Halaman Menu Utama I
117
Penjelasan gambar :
a. Buat dokumen baru di Adobe Photoshop dengan ukuran
1024x640 pixel dengan resolusi 72 pixel/inch. Kemudian
klik Ok.
b. Pilih gambar, kemudian klik Open.
c. Gunakan Magic Wand Tool untuk menseleksi area yang
akan dihilangkan. Setelah terseleksi tekan tombol Del.
d. Gunakan Rectangle Tool untuk membuat bidang persegi
panjang.
Gambar 4.23. Langkah Pembuatan Halaman Menu Utama II
118
e. Gunakan Ellipse Tool untuk membuat bidang lingkaran.
f. Pilih Layer bidang persegi panjang, lingkaran dan gambar
otak. Klik menu Layer > Merge Layers.
g. Gunakan Magic Wand Tool untuk menseleksi bagian
lingkaran, gunakan tombol Shift untuk menseleksi ketiga
bidang lingkaran. Hapus bagian lingkaran dengan menekan
tombol Del.
h. Simpan gambar kedalam format .png. pilih None/Fast dan
Interlaced kemudian klik Ok.
i. Buka aplikasi Adobe Flash. Import gambar yang sudah di
buat kedalam stage dengan perintah Ctrl + R sebagai
background.
j. Import gambar lainnya untuk tombol. Tekan tombol F8
untuk perintah Convert to Symbol. Pilih Button.
k. Berikan animasi tombol dengan Motion Tween.
l. Ulangi untuk tombol selanjutnya.
119
6. Desain Halaman Pemanasan
Gambar 4.24. Desain Halaman Pemanasan
Desain halaman pemanasan menggunakan latar belakang yang
sama dengan halaman menu game dan halaman game, dimana latar
belakang di desain dengan aplikasi Adobe Photoshop. Sedangkan
untuk tombol dan animasinya di buat pada aplikasi Adobe Flash.
Gambar 4.25. Langkah pembuatan Halaman Pemanasan
120
Penjelasan gambar :
a. Untuk langkah pembuatan tombol, buat Frame baru dengan
menekan tombol F6 pada timeline dan layer yang di pilih.
Gunakan Rectangle Tool untuk membuat bidang persegi
panjang. Gunakan Selection Tool untuk mengubah objek
gambar. Pilih objek kemudain tekan tombol F8 pada
keyboard atau dengan cara pilih menu Modify > Convert to
Symbol... pada kotak dialog yang muncul pilih Type: Button
kemudian klik Ok. Pada Frame Up, seleksi objek dan tekan
F8 kemudian pilih Type: Movie Clip. Klik dua kali dan buat
animasinya dengan Motion Tween. Ulangi langkah tersebut
untuk membuat tombol selanjutya.
b. Pembuatan animasi tombol dibuat dengan mengkonversi
objek gambar kedalam bentuk Movie Clip. Setelah masuk
ke stage tombol, pada Frame Over pilih objek kemudian
tekan tombol F8 dan pilih Type: Movie clip. Klik dua kali
dan buat animasi pada bidang persegi panjang yang di buat
dengan animasi Shape Tween.
c. Gunakan Pencil Tool, lalu buat gambar objek senam otak
pada satu frame. Pilih objek yang telah selesai di buat,
kemudian klik menu Modify > Convert to Symbol... pada
kotak dialog yang muncul pilih Type: Movie Clip kemudian
121
klik Ok. Klik dua kali pada movie clip tersebut, di frame
selanjutnya gambar perubahan dari pergerakan objek.
Lakukan hal yang sama untuk membuat senam otak
selanjutnya.
7. Desain Halaman Menu Game
Gambar 4.26. Desain Halaman Menu Game
Sama dengan halaman yang lain, latar belakang di desain dengan
aplikasi Adobe Photoshop. Sedangkan untuk tombol dan animasinya
di buat pada aplikasi Adobe Flash.
122
Gambar 4.27. Langkah Pembuatan Halaman Menu Game
Penjelasan gambar :
a. Untuk membuat icon game tools utama yang digunakan
adalah Pencil Tool. Buat objek gambar dan rapihkan
lengkungan-lengkungan gambar dengan bantuan Selection
Tool. Pastikan semua garis terhubung, beri warna pada
gambar dengan Paint Bucket Tool, pilih warna di Fill Color
dan arahkan pada bidang yang akan diwarnai.
b. Pembuatan animasi tombol dibuat dengan mengkonversi
objek gambar kedalam bentuk Movie Clip. Setelah masuk
ke stage tombol, pada Frame Over pilih objek kemudian
tekan tombol F8 dan pilih Type: Movie clip. Klik dua kali
dan buat animasi pada bidang persegi panjang yang di buat
dengan animasi Shape Tween. Gunakan Pencil Tool, lalu
buat gambar objek seperti spedometer pada satu layer. Dan
123
buat jarum penunjuknya di layer yang berbeda Pilih layer
jarum penunjuk yang telah selesai di buat, kemudian klik
menu Modify > Convert to Symbol... pada kotak dialog
yang muncul pilih Type: Movie Clip kemudian klik Ok. Klik
dua kali pada movie clip tersebut, di frame selanjutnya
gambar perubahan dari pergerakan objek. Lakukan hal yang
sama untuk membuat tombol lainnya.
8. Desain Halaman Game
Gambar 4.28. Desain Halaman Game
Desain halaman game menggunakan latar belakang yang di
desain dengan aplikasi Adobe Photoshop. Sedangkan untuk tombol,
permianan dan animasinya di buat pada aplikasi Adobe Flash.
124
Gambar 4.29. Langkah Pembuatan Halaman Game
Penjelasan gambar :
a. Untuk membuat pemodelan game. Tools utama yang
digunakan adalah Rectangle Tool, Oval Tool dan Pencil
Tool. Buat objek dengan tools tersebut sesuai dengan
permainan yang dikonsepkan. Berikan warna dengan Fill
Color.
b. Untuk pembuatan game dibuat dengan penggunaan Action
Script untuk algoritma dan alur permainannya. Penjelasan
lebih lanjut akan di jelaskan pada sub bab 4.4.2.
125
4.4.2. Pembuatan Game
Proses pembuatan game secara keseluruhan dibuat di Adobe Flash,
adapaun objek-objek dasar yang dibuat untuk konten game adalah
sebagai berikut:
1. Membuat Karakter
Pembuatan objek karakter dua dimensi ini menggunakan
Pencil Tool sebagai alat utama. Berikut ini proses pembuatan
model karakter orang:
a. Klik New Layer untuk membuat layer orang.
b. Pilih Pencil Tool, lalu buat sketsa orang, hasilnya seperti
gambar di bawah ini.
Gambar 4.30. Bentuk Sketsa Orang dan Pewarnaan
c. Warnai sketsa orang dengan Paint Buket Tool.
2. Membuat Tombol Navigasi
Pada aplikasi permainan ini, tombol navigasi berperan
sangat penting, karena berfungsi agar pengguna dapat berinteraksi
dengan Movie Flash yang dibuat seperti halnya memulai suatu
126
aplikasi dan permainan. Langkah-langkah pembuatannya adalah
sebagai berikut:
a. Buat sebuah Layer baru untuk Layer tombol.
b. Pilih Rectangle Tool. Buat bidang persegi panjang.
c. Ubah warna dengan Fill Color.
Gambar 4.31. Langkah Pembuatan Tombol Navigasi
d. Lakukan seleksi terhadap semua objek persegi.
e. Klik kanan, kemudian pilih Convert to Symbol. Pilih
Button. Lalu klik Ok.
127
Gambar 4.32. Convert to Symbol
f. Klik ganda objek Button untuk masuk ke subscene-nya.
Pada Frame Up seleksi objek klik kanan, kemudian pilih
Convert to Symbol. Pilih Movie Clip. Lalu klik Ok. Buat
animasi dengan menggunakan Create Classic Tween.
Lakukan hal yang sama pada Frame Over.
g. Klik Scene 1 untuk kembali ke stage utama. Pilih tombol
yang sudah dibuat, kemudian tekan F9 untuk menampilkan
panel Actions.
h. Tambahkan kode Script berikut :
on (Press){
nextFrame();
}
Sedangkan proses pembuatan game yang dibuat untuk konten game
dibuat dengan beberapa metode dasar pada Aobe Flash yaitu sebagai
berikut:
128
1. Teknik Animasi 2 Dimensi
a. Animasi Frame by Frame
Animasi Frame by Frame adalah Teknik animasi yang
proses pengerjaannya dengan cara menggambar frame by
frame (tiap frame). Animasi Frame by Frame mengubah isi
dari area pengerjaan di setiap frame dan merupakan metode
paling cocok untuk animasi yang kompleks. Dimana gambar
harus terus berubah dalam setiap frame dibandingkan hanya
bergerak secara linear pada suatu area. Biasanya ukuran file
Flash yang menggunakan banyak animasi Frame by Frame
kadang lebih besar dibandingkan dengan yang menggunakan
motion tweening, hal ini dikarenakan flash menyimpan
seluruh informasi gambar yang dibuat disetiap frame.
Sedangkan pada motion tweening hanya perubahan
koordinatnya yang dikalkulasi menjadi animasi oleh Adobe
Flash.
Langkah-langkah untuk membuat animasi Frame by
Frame adalah sebagai berikut:
a. buat gambar awal pada frame 1.
b. Setelah gambar awal selesai dibuat, pisah bagian-bagian
yang akan dibuat animasi gerakan. Misal bagian kepala,
bagian tangan, bagian badan dan bagian kaki. pada frame
ke dua klik kanan -> Insert Blank Keyframe.
129
c. Pada frame ke dua, gambar perubahan gerakan dan
lakukan penggambaran di frame-frame selanjutnya hingga
animasi selesai
Gambar 4.33. Membuat Animasi Frame by Frame
b. Animasi Tweening
Animasi Tweening sangat menghemat waktu karena tidak
perlu membuat animasi secara frame by frame. Sebaliknya
cukup hanya membuat frame awal dan frame akhir saja. Dua
alasan utama mengapa penggunaan tween animation sangat
baik yaitu karena mengurangi pekerjaan menggambar dan
meminimalkan ukuran file.
Langkah-langkah membuat sebuah tween animation
adalah:
130
a. Buat sebuah gambar, seleksi gambar kemudian tekan F8
pada keyboard. kemudian pilih Convert to Symbol. Pilih
Movie Clip.
b. Tekan tombol F6 pada frame ke enam, dan ubah posisi
gambar pada posisi akhir gerakan.
c. Klik kanan pada frame pertama lalu pilih Create Classic
Tween.
Gambar 4.34. Animasi Tweening
c. Animasi Masking
Masking dalam flash berarti menutup sebagian stage dan
hanya memperlihatkan bagian tertentu. Animasi dengan
masking biasanya dipergunakan untuk pembukaan sebuah
presentasi atau memberikan efek yang lebih dinamis pada
sebuah tombol. Langkah-langkahnya adalah sebagai berikut:
131
a. Buat gambar, kemudian seleksi dan klik kanan pilih
Convert to Symbol, Pilih Button.
Gambar 4.35. Animasi Masking
b. Klik kanan dua kali untuk masuk ke menu edit symbol
Tween.
c. Buat lingkaran dengan Oval Tool dengan fill Color
hitam, letakkan di layer paling atas.
d. Klik kanan pada layer oval pilih Mask.
e. Lakukan Test Movie dengan perintah Ctrl + Enter untuk
melihat hasilnya.
132
4.4.3. Tahap Pengkodean
Pada tahap pengkodean, secara garis besar pembahasan program
permainan ini dibagi menjadi tiga bagian permainan yaitu: permainan
level mudah, level menengah dan level sulit. ActionScript yang di
gunakan adalah ActionScript versi 2.0 yang digunakan untuk
menjalankan aksi pada frame, movie clip maupun pada suatu tombol.
1. ActionScript pada awal frame aplikasi
Pada saat pengguna membuka aplikasi, akan muncul video
pembuka. Video ini akan berputar hingga selesai, jika ingin
langsung ke menu utama pengguna harus meng-klik video. Script
yang dibutuhkan agar saat pengguna bisa masuk ke halaman
selanjutnya adalah:
on (Press){
gotoAndPlay(102);
}
Penjelasan:
Script Keterangan
on (Press){ Jika mouse di klik, maka akan menjalankan
intruksi di dalamnya. gotoAndPlay(102); Aplikasi akan menuju dan menampilkan
frame ke 102
Karena ActionScript 2.0 adalah bahasa pemrograman yang
khusus untuk flash, maka penulisannya pun dapat diintegrasikan
langsung pada setiap objek yang dibuat di Flash, Kode juga dapat
133
ditulis di setiap frame sehingga kode tersebut dapat berjalan
tergantung pada frame yang sedang ditampilkan. Untuk dapat
diberikan script, maka movieclip di dalam flash harus diberi
instance Name dan pada sound harus diberi identifier karena
dipanggil dari library.
2. Game Level Mudah
Pada level mudah, pengguna akan bermain menyelesaikan
permianan dengan waktu secepat mungkin. Semakin cepat
menyelesaikan permaianan maka semakin baik kemampuannya
dalam memecahkan teka-teki yang disajikan.
a. Penghitung Waktu
Penghitung waktu menggunakan detik dan menit, inisalisai
parameter pada ActionScript menggunakan “fps”, “detik” dan
“menit”.
fps = 0;
detik = 0;
menit = 0;
Fps ditambah 1 secara terus menerus, jika fps lebih dari 10
maka detik akan bertambah 1
onEnterFrame = function () {
//menambahkan angka 0 pada second jika
detik kurang dari 10
if (detik<10) {
second = "0"+detik;
} else {
second = detik;
}
//menambahkan angka 0 pada minute jika
menit kurang dari 10
134
if (menit<10) {
minute = "0"+menit;
} else {
minute = menit;
}
//fps ditambah 1 secara terus menerus
fps++;
//jika fps sama dengan 10
if (fps == 10) {
//fps menjadi 0
fps = 0;
//detik ditambah 1
detik += 1;
}
Menambahkan menit jika detik lebih dari 60
//jika detik sama dengan 60
if (detik >= 60) {
//detik menjadi 0
detik = detik-60;
//menit ditambah 1
menit += 1;
}
};
b. Tombol Jawaban Salah
Jika pengguna salah dalam menjawab permainan, maka
waktu akan bertambah 10 detik.
on (release){
detik +=10;
}
Diwaktu bersamaan fungsi attachMovie akan memanggil
movieclip peringatan salah.
salah = attachMovie("movieclip_salah",
"movieclip_salah"+_root.getNextHighestDepth(),
_root.getNextHighestDepth(),
{_x:Stage.height/1.25, _y:Stage.width/18.5});
135
Function Menghilangkan movieclip pada layar ketika berada di
frame 20 dengan perintah removeMovieClip.
salah.onEnterFrame = function() {
//jika movie clip movieclip_salah berada di frame
20
if (this._currentframe == 20) {
//hilangkan movie clip ini dari stage
removeMovieClip(this);
//nilai animasi jalan menjadi false
animasi_jalan = false;
}
}
c. Evaluasi akhir permainan
Setelah pengguna menyelesaikan semua permainan dilevel
mudah, akan ada halaman evaluasi dari hasil waktu yang
dicapai. Pada halaman ini akan ditampilkan total waktu
pencapaian penyelesaian permainan.
//menampilkan waktu akhir pada textfield
waktu_tampil
waktu_tampil = "0"+menit +" : "+ detik;
Jika waktu yang dicapai kurang dari 3 menit, maka pada kolom
TextField akan menampilkan informasi "Daya ingat dan
konsentrasimu cukup baik, pertahankan :)"
//Jika menit kurang dari 3
if (menit <= 3) {
mudahkesimpulan_tampil.text="Daya ingat dan
konsentrasimu cukup baik, pertahankan :)";
hasilmudah_tampil.text="Selamat, Kamu
berhasil menyelesaikan level mudah";
}
136
Waktu yang di capai lebih dari 3 menit, akan muncul informasi
"Tingkatkan terus latihan mu ya..".
//Jika menit lebih dari 3
else {
mudahkesimpulan_tampil.text="Tingkatkan
terus latihan mu ya..";
hasilmudah_tampil.text="Maaf, Coba lagi ya";
}
d. Tombol kembali ke Menu Game
Pada halaman hasil evaluasi game akan ada tombol kembali
yang akan mengarahkan pengguna kembali ke Menu Game
yang berada di farme ke-188.
on (release){
gotoAndStop(188);
}
3. Game Level Menengah
Pada game level menengah, pengguna diberikan tantangan
untuk mengumpulkan nilai sebanyak-banyak, semakin banyak nilai
yang di dapat maka semakin baik kemampuannya.
a. Inisialisasi parameter nilai dan nama
Sebelum permainan dimulai, pengguna diminta untuk
memasukan nama. dan pemberian nilai pada awal permainan =
0.
stop();
benar = 0;
salah = 0;
nilai = 0;
input_txt.text = "";
137
alert_txt.text = "";
_global.namaKamu = "";
_global.scoreKamu = 0;
Function disable tombol ketika nama belum di masukkan.
onEnterFrame = function () {
if (input_txt.text == "") {
mulai_btn.enabled = false;
mulai_btn._alpha = 20;
} else {
mulai_btn.enabled = true;
mulai_btn._alpha = 100;
}
};
Function pengecekan nama minimal 3 karakter
mulai_btn.onRelease = function() {
if (length(input_txt.text)>=3) {
alert_txt.text = "";
_global.namaKamu = input_txt.text;
nextFrame();
} else {
alert_txt.text = "Masukan nama kamu
terlebih dahulu minimal 3 karakter!";
}
};
b. Tombol jawaban benar
Jika pengguna menekan tombol benar maka nilai akan
bertambah 5 dan berlanjut ke frame selanjutnya.
on (release){
nilai2 +=5;
nextFrame();
}
c. Tombol jawaban salah
138
Jika jawaban salah, nilai akan dikurangi 3, dan akan muncul
movieclip dan langsung ke frame selanjutnya.
on (release){
nilai -=3;
salah = attachMovie("movieclip_salah",
"movieclip_salah"+_root.getNextHighestDepth(),
_root.getNextHighestDepth(),
{_x:Stage.height/1.25, _y:Stage.width/18.5});
salah.onEnterFrame = function() {
//jika movie clip animasi2
berada di frame 20
if (this._currentframe == 25) {
//hilangkan movie clip ini
dari stage
removeMovieClip(this);
//nilai animasi jalan
menjadi false
animasi_jalan = false;
}
}
nextFrame();
}
d. Evaluasi akhir permainan level menengah
Setelah pengguna menyelesaikan permainan di level
menengah, maka pengguna akan masuk ke halaman evaluasi.
Menampilkan total nilai yang dikumpulkan.
nilai2_tampil = nilai2;
Jika nilai lebih dari 50, akan menampilkan informasi "Selamat,
kini level menengah telah kamu selesaikan". Menunjukkan
kemampuan pengguna cukup baik.
if (nilai2 >= 50) {
hasilmenengah_tampil.text="Daya ingat dan
konsentrasimu cukup baik, pertahankan :)";
nama2_tampil.text="Selamat, kini level
menengah telah kamu selesaikan";
}
139
Jika nilai kurang dari 50, maka akan menampilkan informasi
"Tingkatkan terus latihan mu ya.." dan "Oopps. Kamu bisa
latihan dahulu di pemanasan atau level mudah".
else {
hasilmenengah_tampil.text="Tingkatkan terus
latihan mu ya..";
nama2_tampil.text="Oopps. Kamu bisa latihan
dahulu di pemanasan atau level mudah";
}
4. Game Level Sulit
Pada game level sulit, pengguna harus menyelesaikan
permainan sebelum waktu habis.
a. Penghitung waktu mundur
Waktu diberikan selama 60 detik. Jika waktu habis maka
permaian usai dan akan langsung menuju ke frame 285 yang di
beri label “waktu_habis”.
start_time = getTimer();
tot = 60;
onEnterFrame = function(){
wak = getTimer()-start_time;
detik = Math.floor(wak/1000);
sis = tot - detik;
if(sis>0){
_root.twaktu = +sis;
}else if(sis<=0){
_root.twaktu = "Waktu Habis";
gotoAndStop("waktu_habis");
delete this.onEnterFrame;
}
140
Jika pengguna berhasi menyelesaikan semua jawaban, maka
akan mendapat nilai 50 dan langsung menampilkan frame
“waktu_cukup”.
if
(score == 50){
gotoAndStop("waktu_cukup");
}
};
b. Tombol jawaban benar
Ketika menjawab benar pengguna akan langsung ke frame
selanjutnya untuk menyelesaikan permainan.
on (press){
nextFrame();
}
Setelah proses pembuatan dan pengkodingan selesai, dimana semua
material sudah disusun di masing-masing frame, Kemudian tahap
selanjutnya adalah mem-publish program menjadi format .exe, format
program inilah yang nantinya dapat langsung dijalankan pada setiap
komputer pengguna.
141
Gambar 4.36. Proses Publish Program
Setelah behasil dalam proses publish akan menghasilkan sebuah aplikasi
yang berformat .exe
Gambar 4.37. Program dengan format .exe
4.5. Testing (Pengujian)
Pengujian merupakan bagian yang terpenting dalam siklus
pembangunan perangkat lunak. Pengujian dilakukan untuk memeriksa
fungsi-fungsi dalam aplikasi permainan senam otak ini agar dapat berjalan
dengan baik dan sesuai dengan perancangan yang telah disusun sebelumnya.
Adapun perangkat yang digunakan dalam menguji aplikasi ini adalah:
142
Tabel 4.6. Spesifikasi minimum komputer untuk pengujian aplikasi
Spesifikasi Keterangan
Os Windows Xp
Processor Pentium 41.5 GHz
VGA On board (64 MB)
Memori RAM 256 MB
Harddisk 20 GB
Pengujian aplikasi ini menggunakan jenis uji black-box yaitu pengujian
yang berfokus pada persyaratan fungsional perangkat lunak dengan harapan
dapat mengetahui kategori error seperti; fungsi yang hilang atau tidak benar,
error dari antarmuka, error dari kinerja atau tingkah laku dan lain-lain.
Berikut adalah tabel hasil pengujian black-box:
4.5.1. Pengujian Tampilan
Tabel 4.7. Pengujian Tampilan
No Nama Tampilan Status
Pengujian
1 Animasi
Pembuka
Tampil
143
2 Halaman
Pembuka
Tampil
3
Halaman
Selamat
Datang
Tampil
4
Halaman
Menu
Utama
Tampil
5
Halaman
Pemanas
an
Tampil
144
6
Halaman
Menu
Game
Tampil
7 Halaman
Manfaat
Tampil
8
Halaman
Level
Mudah
Tampil
9
Halaman
Akhir
Level
Mudah
Tampil
145
10
Halaman
Level
Menenga
h
Tampil
11
Halaman
Akhir
Level
Menenga
h
Tampil
12
Halaman
Level
Sulit
Tampil
13
Halaman
Akhir
Level
Sulit
Tampil
146
14 Keluar
Aplikasi
Tampil
4.5.2. Pengujian Fungsi
Tabel 4.8. Pengujian Fungsi
No Fungsi
yang diuji Skenario Pengujian
Hasil yang
diharapkan
Status
Pengujian
1 Animasi
opening
Pengguna
menyaksikan
animasi opening dan
meng-klik animasi
untuk mengakses
halaman pembuka.
Animasi
ditampilkan selama
9 detik. Apabila
pengguna tidak
meng-klik animasi,
maka animasi akan
berjalan hingga
selesai. Bila
animasi di-klik
maka pengguna
dapat langsung
mengakses halaman
pembuka.
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 1 dan 2
2
Mengatur
volume
backsound
Pengguna
mengarahkan slider
volume ke arah
kanan dan ke arah
kiri.
Volume Suara
backsound pada
aplikasi dapat
diatur sesuai
dengan keinginan
pengguna.
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 1 hingga
13
3
Tombol
Play,
Pause dan
Stop untuk
mengatur
Pengguna menekan
tombol Play, Pause
dan Stop
Pengguna dapat
memberhentikan
atau memutar
backsound
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
147
backsound No. 1 hingga
13
4 Keluar
Aplikasi
Pengguna menekan
tombol keluar
Pengguna dapat
menutup aplikasi
jika menekan
tombol ya pada
kotak dialog
konfirmasi.
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 14
5 Fullscreen
Aplikasi
Pengguna menekan
tombol Fullscreen
Pengguna dapat
membuat layar ke
mode tampilan
penuh
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 1 hingga
13
6
Mengakses
halaman
selamat
datang
Pengguna menekan
tombol start Pengguna dapat
mengakses halaman
selamat datang
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 3
7
Menampilk
an
informasi
bantuan
Pengguna menekan
tombol bantuan
Pengguna
mendapatkan
informasi bantuan
penggunaan
aplikasi
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 3
8
Mengakses
halaman
menu
utama
Pengguna menekan
tombol play yang
terdapat pada
halaman selamat
datang
Pengguna dapat
mengakses halaman
menu utama
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 4
9
Mengakses
beberapa
halaman
dari menu
utama
Pengguna menekan
tombol yang ada
pada menu utama,
yaitu:
- Pemanasan
- Game
- Manfaat
Pengguna dapat
mengakses halaman
sesuai tombol
navigasi yang di
tekan
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 5, 6 dan
7
10
Menampilk
an senam
otak pada
halaman
pemanasan
Pengguna
mengarahkan kursor
ke tombol
pemanasan 1 hingga
Pengguna dapat
melihat pemanasan
senam otak dari
pemanasan 1
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
148
5 hingga 5 No. 5
11
Mengakses
beberapa
halaman
level game
Pengguna menekan
tombol yang ada
pada halaman menu
game, yaitu:
- Level Mudah
- Level Menengah
- Level Sulit
Pengguna dapat
memulai permainan
sesuai dengan level
permainan yang
dipilih melalui
tombol navigasi
yang ada dihalaman
menu game
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 8, 10 dan
12
12
Menampilk
an
informasi
dari
manfaat
aplikasi
Pengguna menekan
tombol navigasi
yang ada pada
halaman manfaat
Pengguna akan
melihat slide
informasi yang
terdapat pada
halaman manfaat
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 7
13 Tombol
kembali
Pengguna menekan
tombol kembali
Pengguna dapat
mengakses halam
sebelumnya
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 4 dan 6
14
Tombol
Replay
pada
halaman
permainan
Pengguna menekan
tombol Replay yang
tersedia di beberpa
permainan
Animasi permainan
akan mengulang
kembali
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 8, 10 dan
12
15
Tombol
instruksi
pada
halaman
permainan
Pengguna menekan
tombol-tombol yang
tersedia selama
permainan
berlangsung
Pengguna dapat
melanjutkan
permainan ke tahap
selanjutnya
Terpenuhi
dapat dilihat
pada
Pengujian
Tampilan
No. 8, 10 dan
12
4.6. Distribution (Pendistribusian)
Setelah dilakukan tahap pengujian secara mandiri diketahui bahwa
aplikasi dapat berjalan dengan baik kemudian Peneliti memberikan
149
kuesioner kepada 20 responden yaitu siswa/i Madrasah Ibtidaiyah At-Taqwa
sebagai responden. Hasil Uji kuesioner akhir adalah :
Tabel 4.9. Hasil Evaluasi Kuesioner 20 Responden
Setelah melakukan pengujian aplikasi dan hasil perhitungan kuesioner
evaluasi penelitian, maka didapat evaluasi terhadap aplikasi yaitu :
1. Diperoleh rata-rata 97,5% yang menjawab positif dari 2 pertanyaan
yang disediakan, ini berarti adanya peningkatan suasana/lingkungan
yang memberikan fasilitas belajar agar siswa merasa senang, tidak cepat
No Pertanyaan Indikator Respon
den
Prosen
tase
1. Setelah Kamu mencoba aplikasi permainan edukasi
senam otak ini apakah tampilannya menarik?
Menarik 20 100%
Tidak Menarik 0 0%
2. Apakah permainan ini mudah digunakan? Mudah 18 90%
Sulit 2 10%
3. Menurut Kamu pemanasan dan permainan yang
disampaikan menarik?
Menarik 16 80%
Tidak 4 20%
4. Apakah Kamu merasa bosan dengan tampilannya? Tidak 18 90%
Ya 2 10%
5. Apakah kamu mengalami kesulitan dalam penggunaanya? Tidak 17 85%
Ya 3 15%
6. Apakah Suasana belajar Kamu lebih menarik dan
menyenangkan jika diselingi oleh pemanasan dan
permainan dari aplikasi ini?
Ya 20 100%
Tidak 0 0%
7. Apakah menurut Anda permainan edukasi ini bermanfaat
untuk meningkatkan kualitas belajar?
Ya 19 95%
Tidak 1 5%
150
bosan dan mudah menyerap pelajaran saat kegiatan belajar mengajar
berlangsung.pada siswa/i Madrasah Ibtidaiyah At-Taqwa.
2. 89% pengguna menyatakan tampilan sudah praktis, interkatif dan
efektif serta petunjuk penggunaan aplikasi yang mudah dimengerti.
Setelah melakukan pengujian, tahap selanjutnya adalah distribusi.
Tahap ini merupakan tahap penggandaan aplikasi ke dalam CD untuk
selanjutnya didistribusikan kepada Madrasah Ibtidaiyah At-Taqwa agar
dapat dimanfaatkan oleh para guru dan siswa.
Gambar 4.38. Desain Cover CD Aplikasi
151
BAB V
KESIMPULAN DAN SARAN
Berdasarkan hasil implementasi game edukasi senam otak, maka dapat di
ambil kesimpulan serta saran-saran bagi pengembangan game selanjutnya.
5.1. Kesimpulan
Berdasarkan pemaparan pada tujuan dan hasil yang di peroleh dalam
penelitian game senam otak, maka dapat disimpulkan sebagai berikut:
1. Terciptanya aplikasi permainan senam otak dengan animasi dan
pemanasan senam otak yang menarik. Dalam aplikasi terdapat 3 level
tingkatan permainan. Aplikasi ini juga terdapat informasi manfaat dari
permainan. Dengan adanya permianan edukasi senam otak ini dapat
membantu poses pembelajaran agar siswa merasa senang, tidak cepat
bosan dan mudah menyerap pelajaran saat kegiatan belajar mengajar
berlangsung.
2. Penerapan permainan senam otak dalam bentuk CD dan dapat
digunakan pada komputer sehinga pengguna dapat dengan mudah
menggunakaannya.
5.2. Saran
Berdasarkan pembahasan hasil penelitian dan pengembangan game
senam otak, maka beberapa saran yang dapat berguna untuk pengembangan
selanjutnya, yaitu:
1. Pada permainan edukasi senam otak ini menggunakan ActionScript 2.0
sehingga terbatas untuk penggunaan pada dekstop saja. untuk
152
pengembangan selanjutnya diharapkan dapat menggunakan bahasa
pemrograman yang kompatibel sehingga dapat digunakan pada desktop
dan mobile.
2. Variasi permainan dibuat untuk siswa tingkatan Madrasah Ibtidaiyah
kelas 4, 5 dan 6. Diharapkan adanya pengembangan dengan
menambahkan tingkatan permainan untuk tingkatan Menengah Pertama
dan Menengah Atas.
3. Diharapkan metode pengembangan aplikasi tidak sebatas menggunakan
model instructional game saja, namun dapat menggunakan model-
model yang lain seperti drill, tutorial, dan simulation.
4. Pengembangan selanjutnya aplikasi dapat digunakan pada mobile.
153
DAFTAR PUSTAKA
Achmad, Samsudin. (2008). Peran Multimedia Interaktif (Mmi) Dalam
Pembelajaran. Diakses dari http://semangatbelajar.com/peran-
multimedia-interaktif-mmi-dalam-pembelajaran, 1 Mei 2013
Anwar, Desy. 2010. Kamus Lengkap Bahasa Indonesia Terbaru. Amelia:
Surabaya.
Ayinosa. 2009. Brain Gym (Senam Otak). Diperoleh dari
http://book.store.co.id/2009. Diakses tanggal 15 Mei 2013.
Binanto, Iwan. 2010. Multimedia Digital Dasar Teori + Pengembangannya.
Yogyakarta: Andi.
Clark, Donald. (2006). Games and E-Learning. Diakses dari
http://www.caspianlearning.co.uk/Whtp_caspian_games_1.1.pdf, 11
Oktober 2013.
Darma, Tri. 2005. Sistem Multimedia dan Aplikasinya. Yogyakarta: Graha Ilmu.
Davis, Ben. 1991. Teaching with Media, a peper presented at Technology and
Education Conference in Athens, Greece
Denisson, Paul E. & Gill E. Denisson. 2002. Buku Panduan Lengkap Brain Gym.
Jakarta: Gramedia
---------------------------------. 2004. The Brain Gym Teacher’s Edition. California:
Edu Kinesthetics.
Erfan, (2009). Aplikasi. Diakses dari
http//:f4123n.blogspot.com/2009/01/aplikasi.html, 14 Agustus 2013,
11.30 WIB.
Handriyantini, Eva. 2009. Permainan Edukatif (Educational Games) Berbasis
Komputer untuk Siswa Sekolah Dasar. Jurnal Sekolah Tinggi
Informatika & Komputer Indonesia Malang.
Indriyani, Dina. 2011. Ragam Alat Bantu Media Pengajaran. Jogjakarta: Diva
Press.
Jamalludin Harun & Zaidatun Tasir. 2000. Pengenalan Kepada Multimedia.
Venton Publishing: Kuala Lumpur.
154
Jamalludin Harun & Zaidatun Tasir. 2003. Multimedia dalam pendidikan. PTS
Publication: Bentong.
La Londe, Bernard. 1994. Evolution of the Integrated Logistics Concept. Dalam
Robenson, James F. The Logistics: USA
Lydia. 2007. Perancangan Aplikasi Company Profile Dana PT. Indosat Tbk
Berbasis Multimedia. FST UIN.
Luther, Arc C. 1994. Auithoring Interactive Multimedia. San Frasisco: AP
Professional.
Madcoms. 2011. Kupas Tuntas Adobe Photoshop CS6. Yogyakarta: Andi.
Miarso, Yusufhadi. 2004. Menyemai Benih Teknologi Pendidikan. Jakarta:
Prenada Media.
Motier, Shamms. 2001. FLASHTM 5 WEEKEND CRASH COURSETM. Jakarta: PT
Elex Media Komputindo.
Munawar. 2005. Pemodelan Visual dengan UML, Yogyakarta: Graha Ilmu.
Munir. 2005. Konsep dan Aplikasi Program Pembelajaran Berbasis Komputer
(Computer Based Interaction), P3MP, UPI.
Nandi. 2006. Penggunaan Multimedia Interaktif Dalam Pembelajaran Geografi
Di Persekolahan. Jurnal “GEA” Jurusan Pendidikan Geografi Vol. 6,
No.1, April
Prasetya, Andi. 2013. Sulap Otakmu Bisa Berfikir Lebih Cepat. Jogjakarta:
Flashbook.
Pressman, Roger S.. 2010. Rekayasa Perangkat Lunak. Yogyakarta: Andi.
Purnama, Bambang. 2013. Konsep Dasar Multimedia. Yogyakarta: Graha Ilmu.
Purnomo. 1996. Strategi Pembelajaran, makalah disampaikan dalam Seminar –
Loka karya Dosen Sekolah Tinggi Theologia “Intheous” Surakarta.
Tawangmangu, 12 Juli 1996. Yogyakarta: Universitas Santa Dharma.
Rafrastara, A.D., S.P. Hajar dan Diginnovac. 2009. Membuat Game Fighting
dengan Flash . Jakarta: Elex Media Komputindo.
Rahayu, Tri. 2009. Human Body Encyclopedia Panca Indra. Uranus Publishing.
Riberu, Tito. 2004. Actionscript Macromedia Flash MX. Jakarta: Dinastindo.
155
Rusman. 2005. Model-model Multimedia Interaktif Berbasis Komputer, P3MP,
UPI.
Semiawan, Conny R. 2007. Landasan Pembelajaran dalam Perkembangan
Manusia. Jakarta: Centre of Human Competency Development.
----------------------. 2007. Catatan Kecil Tentang Penelitian dan Pengembangan
Ilmu Pengetahuan. Jakarta: Kencana Prenada Media Grup.
Suyanto, M.. 2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing.
Yogyakarta: Andi.
Sunyoto, Andi.. 2010. Adobe Flash + XML = Rich Multimedia Application.
Yogyakarta: Andi.
Sutopo, Aristo Hadi. 2003. Multimedia Interaktif dengan Flash. Yogyakarta:
Garah Ilmu.
Tim Power Brain Indonesia. 2004. Latihan Otak, Jakarta Timur: PT Intimedia
Ciptanusantara.
Vaughan, T. 2004. Multimedia: Making It Work. Edisi ke-6. New York: McGraw-
Hill Companies.
Waryanto, Nur H.. 2008. "Multimedia Interaktif Dalam Pembelajaran" . Paper
presented at Diklat Guru SMK Muhammadiyah 3, Klaten
A-6
20 Tanggapan
Ringkasan
Tabel Identitas Responden
No. Nama Kelas 1 Adisti ramadhanti V (Lima)
2 Afni dwi putri anakku V (Lima)
3 Ahmad al-idrus V (Lima)
4 Alfia rahim V (Lima)
5 Alya desika V (Lima)
6 Anggita komalasari V (Lima)
7 Athif ramadhan V (Lima)
8 Azzikra tunasza V (Lima)
9 Dia fauziah V (Lima)
10 Dimas arrasidt V (Lima)
11 Mia noviyanti V (Lima)
12 Parhan gunawan V (Lima)
13 Riyansyah V (Lima)
14 Miranda apriliyanti V (Lima)
15 Muhamad haikal V (Lima)
16 Khafifah sri nur aulia V (Lima)
17 Fasya mulia V (Lima)
18 Hani nadhirah V (Lima)
19 Hasan V (Lima)
20 Irfan maulana V (Lima)
A-7
Prosentase Jawaban Responden
Apakah Anda bisa menggunakan komputer?
Seberapa sering Anda mengoperasikan komputer?
Ya100%
Tidak0%
Ya Tidak
Sangat Sering15%
Sering80%
Jarang5%
Sangat Sering Sering Jarang
YA 20 100%
TIDAK 0 0%
SANGAT SERING 3 15%
SERING 16 80%
JARANG 1 5%
A-8
TERTARIK 20 100%
TIDAK TERTARIK 0 0%
Menurut Anda apakah belajar menggunakan komputer itu efektif?
Apa Anda tertarik mengenai latihan senam otak menggunakan komputer?
Apakah Anda tertarik dengan permainan di komputer yang dapat meningkatkan
konsentrasi?
Sangat Efektif
20%
Efektif80%
Tidak Efektif0%
Sangat Efektif Efektif Tidak Efektif
Tertarik100%
Tidak Tertarik
0%
Tertarik Tidak Tertarik
Tertarik100%
Tidak Tertarik
0%
Tertarik Tidak Tertarik
SANGAT EFEKTIF 4 20%
EFEKTIF 16 80%
TIDAK EFEKTIF 0 0%
TERTARIK 20 100%
TIDAK TERTARIK 0 0%
A-9
PERNAH 1 5%
BELUM PERNAH 19 95%
MENYENANGKAN 2 10%
MEMBOSANKAN 18 90%
TERTARIK 20 100%
TIDAK TERTARIK 0 0%
Apakah Anda pernah melihat/menggunakan aplikasi komputer yang berhubungan
dengan permainan senam otak sebelumnya?
Bagaimana Kondisi saat kegiatan belajar mengajar berlangsung?
Apakah Anda tertarik dalam proses belajar mengajar sesekali diselingi oleh
permainan?
Pernah5%
Belum Pernah
95%
Pernah Belum Pernah
Membosankan
90%
Menyenangkan10%
Membosankan Menyenangkan
Tertarik100%
Tidak Tertarik
0%
Tertarik Tidak Tertarik
A-10
YA 17 85%
MUNGKIN 3 15%
TIDAK 0 0%
Apakah suasana belajar yang menyenangkan dapat meningkatkan minat belajar
Anda?
Ya85%
Mungkin15%
Tidak0%
Ya Mungkin Tidak
A-16
MENARIK 20 100%
TIDAK MENARIK 0 0%
20 Tanggapan
Ringkasan
Tabel Identitas Responden
No. Nama Kelas 1 Adisti ramadhanti V (Lima)
2 Afni dwi putri anakku V (Lima)
3 Ahmad al-idrus V (Lima)
4 Alfia rahim V (Lima)
5 Alya desika V (Lima)
6 Anggita komalasari V (Lima)
7 Athif ramadhan V (Lima)
8 Azzikra tunasza V (Lima)
9 Dia fauziah V (Lima)
10 Dimas arrasidt V (Lima)
11 Mia noviyanti V (Lima)
12 Parhan gunawan V (Lima)
13 Riyansyah V (Lima)
14 Miranda apriliyanti V (Lima)
15 Muhamad haikal V (Lima)
16 Khafifah sri nur aulia V (Lima)
17 Fasya mulia V (Lima)
18 Hani nadhirah V (Lima)
19 Hasan V (Lima)
20 Irfan maulana V (Lima)
Setelah Anda mencoba aplikasi permainan edukasi senam otak ini apakah tampilannya
menarik?
Menarik100%
Tidak Menarik
0%
Menarik Tidak Menarik
A-17
MUDAH 18 80%
SULIT 2 10%
MENARIK 16 80%
TIDAK MENARIK 4 20%
TIDAK 18 90%
YA 2 10%
Apakah permainan ini mudah digunakan?
Menurut Anda pemanasan dan permaianan yang disampaikan menarik?
Apakah kamu merasa bosan dengan tampilannya?
Mudah90%
Sulit10%
Mudah Sulit
Menarik80%
Tidak Menarik
20%
Menarik Tidak Menarik
Tidak90%
Ya10%
Tidak Ya
A-18
TIDAK 17 85%
YA 3 15%
YA 20 100%
TIDAK 0 0%
YA 19 95%
TIDAK 1 5%
Apakah Anda mengalami kesulitan dalam penggunannya?
Apakah suasana belajar Anda lebih menarik dan menyenangkan jika diselingi oleh
pemanasan dan pemainan dari aplikasi ini?
Apakah menurut Anda permainan edukasi ini bermanfaat untuk meningkatkan
kualitas belajar?
Tidak85%
Ya15%
Tidak Ya
Ya100%
Tidak0%
Ya Tidak
Ya95%
Tidak5%
Ya Tidak
E-3
Diagram Perbandingan Nilai Rata-rata per Mata Pelajaran Sebelum dan Sesudah Penelitian
Diagram Prosentase Kenaikan Nilai
0,0
2,0
4,0
6,0
8,0
10,0
12,0
Diagram Perbandingan Nilai Rata-rata Per Mata Pelajaran Sebelum dan Sesudah Penelitian
Nilai Rata-rata Sebelum Penelitian Nilai Rata-rata Sesudah Penelitian Prosentase
6
7
2
1
1
2
4
3
2
6
6
1
3
2
10
0 2 4 6 8 10 12
QUR'AN HADITS
AKIDAH
FIQIH
SKI
PKN
B INDONESIA
B ARAB
MATEMATIKA
IPA
IPS
SBK
PJOK
B INGGRIS
B SUNDA
KOMPUTER
Diagram Prosentase Kenaikan Nilai (dalam persen)
Prosentase Kenaikan Nilai (dalam persen)
E-4
Tabel. Perbandingan Nilai Rata-Rata Per Mata Pelajaran Yang Dicapai Siswa Sebelum Dan
Sesudah Penelitian
MATA PELAJARAN NILAI RATA-RATA
SEBELUM PENELITIAN NILAI RATA-RATA
SESUDAH PENELITIAN PROSENTASE
Qur'an Hadits 7,682 8,315 6%
Akidah 8,152 8,811 7%
Fiqih 8,091 8,273 2%
SKI 7,894 8,001 1%
PKn 8,094 8,2 1%
B Indonesia 7,806 8,01 2%
B Arab 7,379 7,818 4%
Matematika 7,442 7,764 3%
IPA 7,873 8,029 2%
IPS 7,421 8,017 6%
SBK 7,621 8,182 6%
PJOK 8,076 8,158 1%
B Inggris 7,364 7,709 3%
B Sunda 8,015 8,212 2%
Komputer 7,011 8,014 10%