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
ii
iii
 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

iv
 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.

v
 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

vi
 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

vii
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

viii
 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

ix
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

x
 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

xi
 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

xii
 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

xiii
 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

xiv
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

xv
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

xvi
 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

xvii
 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

xviii
 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

Selection Tool Subselection Tool

Free Transform Tool 3D Rotation Tool
Lasso Tool
Pen Tool Text Tool
Line Tool Shape Tool
Pencil Tool Brush Tool
Deco Tool

Bone Tool Paint Bucket Tool

Eyedrop Tool Eraser Tool
Hand Tool ZoomTool

Stroke Color
Fill Color
Black and White Swap Colors

Snap yo Objects

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:

 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 Aplikasi Game Edukasi Aplikasi ini sesuai Gambar beberapa

(2011) Mahasiswa pengenalan Bahasa Inggris dengan konsepnya yang animasi masih belum

UIN Syarif Tingkat Taman Kanak- ditujukan untuk anak- terlihat natural dan

Hidayatullah Jakarta kanak berbasis multimedia. anak dengan level permainan

menggunakan gambar masih sedikit.

yang menarik.

Tika Yuniawati, Aplikasi Game Berbasisi Kelebihan aplikasi ini Kelemahannya

Dede Rohidin, Flash Untuk Pembelajaran memiliki Konten gambar dari setiap

Ferdian (2011) Al-Quran Bagi Anak-Anak. gambar yang menarik objek masih sangat

Mahasiswa minat anak kecil, kasar dan gradasi

Politeknik Telkom memiliki banyak dari setiap warna

 68

Bandung animasi. masih kurang

menarik.

Suindarti (2011) Game edukasi Kelebihan aplikasi yang Kelemahannya

mahasiswa STMIK meningkatkan daya ingat dibuat memiliki game gambar dari setiap

AMIKOM anak Bermain bersama yang beraneka jenis objek masih sangat

Yogyakarta. Dido dengan Macromedia sehingga user menjadi kasar dan gradasi

Drector. lebih tertarik dan tidak dari setiap warna

cepat bosan. masih kurang

menarik.

Ahmad Fahmiaji Perancangan Game Edukasi Kelebihan game ini Kelemahannya pola

(2013) Islami Sebagai Media memiliki level yang permainan dari awal

Mahasiswa UIN Pembelajaran Pada cukup variatif dan hingga akhir tidak

Syarif Hidayatullah Madrasah Ibtidaiyah Al gambar animasi yang berubah, sehingga

Jakarta Wardah Berbasis baik dan menarik. cepat membuat

Multimedia. 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

-Animasi

-Gambar
Modul : Halaman Pembuka
-Teks
Frame ke : 121
Sebelumnya :- -Audio
Selanjutnya : Halaman Selamat Datang -Tombol
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
 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

-Animasi
Modul : Halaman Selamat Datang
Frame ke : 136 -Gambar
Sebelumnya : Halaman Pembuka -Teks
Selanjutnya : Halaman Menu Utama
-Audio
Keterangan : Menampilkan Halaman selamat
datang. Pada halaman ini terdapat animasi selamat -Tombol
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.
 84

Modul : Halaman Menu Utama

Frame ke : 162 -Gambar
Sebelumnya :-
-Teks
Selanjutnya : Halaman Pemanasan
-Audio
Halaman Menu Game
Halaman Manfaat -Tombol
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.
 85

Modul : Halaman Pemanasan -Animasi

Frame ke : 187 -Gambar
Sebelumnya : Halaman Menu Utama
-Teks
Selanjutnya : Halaman Menu Utama
Keterangan : Menampilkan Halaman Pemanasan. -Audio
Pada halaman ini terdapat tombol senam 1, tombol -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.
 86

Modul : Halaman Menu Game

Frame ke : 188
Sebelumnya : Halaman Menu Utama
-Animasi
Selanjutnya : Halaman Game Mudah
-Gambar
Halaman Game Menengah
Halaman Game Sulit -Teks
Keterangan : Menampilkan Halaman Menu Game.
-Audio
Pada halaman ini terdapat tombol game mudah, tombol
-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.
 87

-Animasi
Modul : Halaman Manfaat
-Gambar
Frame ke : 278
Sebelumnya : Halaman Menu Utama -Teks
Selanjutnya : Halaman Menu Utama
-Audio
Keterangan : Menampilkan Halaman Manfaat. Pada
-Tombol
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.
 88

-Game

Modul : Halaman Game Mudah -Animasi

Frame ke : 189
-Gambar
Sebelumnya : Halaman Menu Game
Selanjutnya : Halaman Akhir Game Mudah -Teks

Keterangan : Menampilkan Halaman Game Mudah. -Audio

Pada halaman ini pengguna langsung dapat memainkan
-Tombol
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.
 89

Modul : Halaman Akhir Game Mudah

Frame ke : 222
-Gambar
Sebelumnya : Halaman Game Mudah
Selanjutnya : Halaman Menu Utama -Teks
Keterangan : Menampilkan Halaman Akhir Game
-Audio
Mudah. Pada halaman ini pengguna akan mengetahui
-Tombol
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.
 90

-Game

-Animasi
Modul : Halaman Game Menengah
Frame ke : 223 -Gambar
Sebelumnya : Halaman Menu Utama
-Teks
Selanjutnya : Halaman Akhir Game Menengah
-Audio
Keterangan : Menampilkan Halaman Game
Menengah. Pada halaman ini pengguna memainkan -Tombol
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.
 91

10

Modul : Halaman Akhir Game Menengah

Frame ke : 277
-Gambar
Sebelumnya : Halaman Game Menengah
Selanjutnya : Halaman Menu Utama -Teks
Keterangan : Menampilkan Halaman Akhir Game
-Audio
Menengah. Pada halaman ini pengguna akan
-Tombol
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.
 92

11

-Game

-Animasi
Modul : Halaman Game Sulit
Frame ke : 280 -Gambar
Sebelumnya : Halaman Menu Utama
-Teks
Selanjutnya : Halaman Game Sulit
-Audio
Keterangan : Menampilkan Halaman Game Sulit.
Pada halaman ini permaianan yang di hadapi akan -Tombol
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.
 93

12

Modul : Halaman Akhir Game Sulit

Frame ke : 285 -Animasi
Sebelumnya : Halaman Game Sulit
-Gambar
Selanjutnya : Halaman Menu Utama
-Teks
Keterangan : Menampilkan Halaman Akhir Game
Sulit. Pada halaman ini jika pengguna berhasil -Audio
menyelesaiakan 5 permainan sebelum waktu habis
-Tombol
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.
 94

4.2.2. Perancangan Struktur Navigasi

Struktur navigasi ini berguna untuk memberikan gambaran link

dari halaman satu ke halaman lainnya.

Halaman
Pembuka

Halaman
Keluar Selamat Bantuan
Datang

Halaman
Menu Utama

Halaman Halaman Halaman

Pemanasan Menu Game Manfaat

Halaman
Halaman Halaman
Level
Level Mudah Level Sulit
Menengah

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

Klik Bantuan
Klik Keluar
Tampil Informasi Bantuan
Keluar dari Aplikasi

Keluar Selamat Datang Bantuan

Klik Bantuan
Tampil Halaman
Selamat Datang

Klik Play
Tampil Halaman
Menu Utama
(Lanjut ke STD Menu Utama)

Menu Utama

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

Keluar

Klik Keluar
Keluar dari
Aplikasi

Klik Kembali Klik Manfaat

Tampil Halaman Tampil Halaman Manfaat
Menu Utama (Lanjut ke STD Manfaat)

Pemanasan Menu Utama Manfaat

Klik Kembali
Klik Pemanasan Tampil Halaman
Tampil Halaman Pemanasan Menu Utama
(Lanjut ke STD Pemanasan)

Klik Game
Tampil Halaman Klik Kembali
Menu Game Tampil Halaman
(Lanjut ke STD Menu Game) Menu Utama

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.

Klik Kembali
Tampil Halaman
Menu Utama
(Lanjut ke STD Menu Utama)

Keluar Pemanasan Menu Utama

Klik Keluar
Keluar dari Aplikasi Klik Pemanasan
Tampil Halaman
Pemanasan

Gambar 4.4. State Transition Diagram Pemanasan

 97

4. STD Game

Keluar

Klik Keluar
Keluar dari Aplikasi

Klik Kembali
Klik Kembali Tampil Halaman
Tampil Halaman Menu Utama
Game Lanjut ke STD Menu Utama)
Game Menu Game Menu Utama
Level Mudah
Klik Mudah Klik Game
Tampil Halaman Tampil Halaman
Game Level Mudah Game

Klik Menengah Klik Sulit

Tampil Halaman Tampil Halaman Klik Kembali
Klik Kembali
Game Game Tampil Halaman
Tampil Halaman
Level Menengah Level Sulit Game
Game

Game Game
Level Menengah Level Sulit

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

Jenis
No Nama Gambar Ukuran Sumber
Gambar
1 Logo .png 10.8 kb dibuat di Adobe Photoshop
Background
2 .jpg 340 kb dibuat di Adobe Photoshop
Halaman Pembuka
Bacground
3 .jpg 467 kb dibuat di Adobe Photoshop
Selamat Datang
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
Screenshot_2015-
7 .jpg 113 kb Screenshoot handphone
03-27-16-13-40
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

Jenis Ukuran
No Nama Video Sumber
Video
1 Animasi Opening 15,1Mb Dibuat pada Adobe After
.mov
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

Status
No Nama Tampilan
Pengujian

Animasi
1 Tampil
Pembuka
 143

Halaman
2 Tampil
Pembuka

Halaman
3 Selamat Tampil
Datang

Halaman
4 Menu Tampil
Utama

Halaman
5 Pemanas Tampil
an
 144

Halaman
6 Menu Tampil
Game

Halaman
7 Tampil
Manfaat

Halaman
8 Level Tampil
Mudah

Halaman
Akhir
9 Tampil
Level
Mudah
 145

Halaman
Level
10 Tampil
Menenga
h

Halaman
Akhir
11 Level Tampil
Menenga
h

Halaman
12 Level Tampil
Sulit

Halaman
Akhir
13 Tampil
Level
Sulit
 146

Keluar
14 Tampil
Aplikasi

4.5.2. Pengujian Fungsi

Tabel 4.8. Pengujian Fungsi

Fungsi Hasil yang Status
No Skenario Pengujian
yang diuji diharapkan Pengujian
Animasi
ditampilkan selama
9 detik. Apabila
pengguna tidak
Pengguna
meng-klik animasi, Terpenuhi
menyaksikan dapat dilihat
maka animasi akan
1 Animasi animasi opening dan pada
berjalan hingga
opening meng-klik animasi Pengujian
selesai. Bila
untuk mengakses Tampilan
animasi di-klik No. 1 dan 2
halaman pembuka.
maka pengguna
dapat langsung
mengakses halaman
pembuka.
Pengguna Volume Suara Terpenuhi
mengarahkan slider backsound pada dapat dilihat
Mengatur pada
volume ke arah aplikasi dapat
2 volume Pengujian
kanan dan ke arah diatur sesuai
backsound Tampilan
kiri. dengan keinginan No. 1 hingga
pengguna. 13
Tombol Pengguna menekan Pengguna dapat Terpenuhi
Play, tombol Play, Pause memberhentikan dapat dilihat
3 Pause dan dan Stop atau memutar pada
Stop untuk backsound Pengujian
mengatur Tampilan
 147

backsound No. 1 hingga

13
Pengguna menekan Pengguna dapat Terpenuhi
tombol keluar menutup aplikasi dapat dilihat
Keluar jika menekan pada
4
Aplikasi tombol ya pada Pengujian
kotak dialog Tampilan
konfirmasi. No. 14
Pengguna menekan Pengguna dapat Terpenuhi
tombol Fullscreen membuat layar ke dapat dilihat
mode tampilan pada
Fullscreen
5 penuh Pengujian
Aplikasi
Tampilan
No. 1 hingga
13
Pengguna menekan Terpenuhi
Mengakses dapat dilihat
tombol start Pengguna dapat
6 halaman pada
mengakses halaman
selamat Pengujian
selamat datang Tampilan
datang
No. 3
Pengguna menekan Pengguna Terpenuhi
Menampilk dapat dilihat
tombol bantuan mendapatkan
7 an pada
informasi bantuan
informasi Pengujian
penggunaan
bantuan Tampilan
aplikasi No. 3
Pengguna menekan Pengguna dapat Terpenuhi
Mengakses tombol play yang mengakses halaman dapat dilihat
8 halaman terdapat pada menu utama pada
menu halaman selamat Pengujian
utama datang Tampilan
No. 4
Pengguna menekan Pengguna dapat
Terpenuhi
Mengakses tombol yang ada mengakses halaman dapat dilihat
beberapa pada menu utama, sesuai tombol pada
9
halaman yaitu: navigasi yang di Pengujian
dari menu - Pemanasan tekan Tampilan
utama - Game No. 5, 6 dan
- Manfaat 7
Menampilk Pengguna Pengguna dapat Terpenuhi
an senam mengarahkan kursor melihat pemanasan dapat dilihat
10
otak pada ke tombol senam otak dari pada
halaman Pengujian
pemanasan 1 hingga pemanasan 1
pemanasan Tampilan
 148

5 hingga 5 No. 5
Pengguna menekan Pengguna dapat
tombol yang ada memulai permainan Terpenuhi
pada halaman menu sesuai dengan level dapat dilihat
Mengakses
game, yaitu: permainan yang pada
11 beberapa
Pengujian
halaman - Level Mudah dipilih melalui
Tampilan
level game - Level Menengah tombol navigasi No. 8, 10 dan
- Level Sulit yang ada dihalaman 12
menu game
Menampilk Pengguna menekan Pengguna akan Terpenuhi
an tombol navigasi melihat slide dapat dilihat
12 informasi yang ada pada informasi yang pada
dari Pengujian
halaman manfaat terdapat pada
manfaat Tampilan
aplikasi halaman manfaat No. 7
Pengguna menekan Pengguna dapat Terpenuhi
tombol kembali mengakses halam dapat dilihat
13 Tombol sebelumnya pada
kembali Pengujian
Tampilan
No. 4 dan 6
Pengguna menekan Animasi permainan Terpenuhi
Tombol tombol Replay yang akan mengulang dapat dilihat
Replay tersedia di beberpa kembali pada
14
pada Pengujian
permainan
halaman Tampilan
permainan No. 8, 10 dan
12
Pengguna menekan Pengguna dapat Terpenuhi
Tombol tombol-tombol yang melanjutkan dapat dilihat
instruksi tersedia selama permainan ke tahap pada
15
pada permainan Pengujian
selanjutnya
halaman berlangsung Tampilan
permainan 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

No Pertanyaan Indikator Respon Prosen

den tase
1. Setelah Kamu mencoba aplikasi permainan edukasi Menarik 20 100%
senam otak ini apakah tampilannya menarik?
Tidak Menarik 0 0%
2. Apakah permainan ini mudah digunakan? Mudah 18 90%
Sulit 2 10%
3. Menurut Kamu pemanasan dan permainan yang Menarik 16 80%
disampaikan menarik? 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 Ya 20 100%
menyenangkan jika diselingi oleh pemanasan dan Tidak 0 0%
permainan dari aplikasi ini?
7. Apakah menurut Anda permainan edukasi ini bermanfaat Ya 19 95%
untuk meningkatkan kualitas belajar? Tidak 1 5%

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
 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 Teachers 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
Lampiran 1. Surat-surat

A-1
A-2
A-3
A-4
Lampiran 2. Wawancara

B-1
B-2
B-3
B-4
Lampiran 3.

Kuesioner Awal

A-1
A-2
A-3
A-4
A-5
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-6
Prosentase Jawaban Responden

Apakah Anda bisa menggunakan komputer?

Ya Tidak

Tidak YA 20 100%
0%

TIDAK 0 0%
Ya
100%

Seberapa sering Anda mengoperasikan komputer?

Sangat Sering Sering Jarang

Jarang
5%
Sangat SANGAT SERING 3 15%
Sering
15%
SERING 16 80%

JARANG 1 5%

Sering
80%

A-7
Menurut Anda apakah belajar menggunakan komputer itu efektif?

Sangat Efektif Efektif Tidak Efektif

Tidak Efektif
0% Sangat
SANGAT EFEKTIF 4 20%
Efektif
20% EFEKTIF 16 80%

TIDAK EFEKTIF 0 0%

Efektif
80%

Apa Anda tertarik mengenai latihan senam otak menggunakan komputer?

Tertarik Tidak Tertarik

TERTARIK 20 100%
Tidak
Tertarik
0% TIDAK TERTARIK 0 0%

Tertarik
100%

Apakah Anda tertarik dengan permainan di komputer yang dapat meningkatkan

konsentrasi?

Tertarik Tidak Tertarik

TERTARIK 20 100%
Tidak
Tertarik
0% TIDAK TERTARIK 0 0%
Tertarik
100%

A-8
Apakah Anda pernah melihat/menggunakan aplikasi komputer yang berhubungan
dengan permainan senam otak sebelumnya?

Pernah Belum Pernah

Pernah
5%
PERNAH 1 5%

BELUM PERNAH 19 95%

Belum
Pernah
95%

Bagaimana Kondisi saat kegiatan belajar mengajar berlangsung?

Membosankan Menyenangkan

Menyenang
kan
MENYENANGKAN 2 10%
10%
MEMBOSANKAN 18 90%

Membosank
an
90%

Apakah Anda tertarik dalam proses belajar mengajar sesekali diselingi oleh
permainan?

Tertarik Tidak Tertarik

Tidak
TERTARIK 20 100%
Tertarik
0% TIDAK TERTARIK 0 0%
Tertarik
100%

A-9
Apakah suasana belajar yang menyenangkan dapat meningkatkan minat belajar
Anda?

Ya Mungkin Tidak

Tidak
Mungkin 0%
15%
YA 17 85%

MUNGKIN 3 15%

TIDAK 0 0%

Ya
85%

A-10
Kuesioner Akhir

A-11
A-12
A-13
A-14
A-15
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?

Menarik Tidak Menarik

MENARIK 20 100%
Tidak
Menarik
0% TIDAK MENARIK 0 0%

Menarik
100%

A-16
Apakah permainan ini mudah digunakan?

Mudah Sulit

Sulit
10%
MUDAH 18 80%

Mudah SULIT 2 10%

90%

Menurut Anda pemanasan dan permaianan yang disampaikan menarik?

Menarik Tidak Menarik

Tidak
Menarik MENARIK 16 80%
20%
TIDAK MENARIK 4 20%

Menarik
80%

Apakah kamu merasa bosan dengan tampilannya?

Tidak Ya

Ya TIDAK 18 90%
10%

YA 2 10%
Tidak
90%

A-17
Apakah Anda mengalami kesulitan dalam penggunannya?

Tidak Ya

TIDAK 17 85%
Ya
15%
YA 3 15%
Tidak
85%

Apakah suasana belajar Anda lebih menarik dan menyenangkan jika diselingi oleh
pemanasan dan pemainan dari aplikasi ini?

Ya Tidak

YA 20 100%
Tidak
0%
TIDAK 0 0%

Ya
100%

Apakah menurut Anda permainan edukasi ini bermanfaat untuk meningkatkan

kualitas belajar?

Ya Tidak

Tidak YA 19 95%
5%
TIDAK 1 5%

Ya
95%

A-18
Lampiran 4. Dokumentasi Demo Aplikasi

D-1
Lampiran 5.

Rekap Nilai Hasil Belajar Kelas V Semester Ganjil (Sebelum Penelitian)

E-1
Rekap Nilai Hasil Belajar Kelas V Semester Genap (Sesudah Penelitian)

E-2
 Diagram Perbandingan Nilai Rata-rata per Mata Pelajaran Sebelum dan Sesudah Penelitian

Diagram Perbandingan Nilai Rata-rata Per Mata Pelajaran

Sebelum dan Sesudah Penelitian
12,0

10,0

8,0

6,0

4,0

2,0

0,0

Nilai Rata-rata Sebelum Penelitian Nilai Rata-rata Sesudah Penelitian Prosentase

Diagram Prosentase Kenaikan Nilai

Diagram Prosentase Kenaikan Nilai (dalam persen)

KOMPUTER 10
B SUNDA 2
B INGGRIS 3
PJOK 1
SBK 6
IPS 6
IPA 2
MATEMATIKA 3
B ARAB 4
B INDONESIA 2
PKN 1
SKI 1
FIQIH 2
AKIDAH 7
QUR'AN HADITS 6
0 2 4 6 8 10 12

Prosentase Kenaikan Nilai (dalam persen)

E-3
 Tabel. Perbandingan Nilai Rata-Rata Per Mata Pelajaran Yang Dicapai Siswa Sebelum Dan
Sesudah Penelitian

NILAI RATA-RATA NILAI RATA-RATA

MATA PELAJARAN PROSENTASE
SEBELUM PENELITIAN SESUDAH PENELITIAN
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%

E-4