lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2255/1/halaman awal.pdfiii...

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

PERANCANGAN MEDIA INTERAKTIF CERITA RAKYAT

TIMUN MAS

Laporan Tugas Akhir

Ditulis sebagai syarat untuk memperoleh gelar Sarjana Seni (S.Sn)

Nama : Eric Wilson Laujaya

NIM : 09120210069

Program Studi : Desain Komunikasi Visual

Fakultas : Seni & Desain

UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2014

ii

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT

Saya yang bertanda tangan di bawah ini:


NIM : 09120210069

Program Sudi : Desain Komunikasi Visual


Universitas Multimedia Nusantara

Judul Tugas Akhir/Skripsi:

PERANCANGAN MEDIA INTERAKTIF CERITA RAKYAT

TIMUN MAS

dengan ini menyatakan bahwa, laporan dan karya tugas akhir ini adalah asli dan

belum pernah diajukan untuk mendapatkan gelar sarjana, baik di Universitas

Multimedia Nusantara maupun di perguruan tinggi lainnya.

Karya tulis ini bukan saduran/terjemahan, murni gagasan, rumusan dan

pelaksanan penelitian/implementasi saya sendiri, tanpa bantuan pihak lain, kecuali

arahan pembimbing akademik dan nara sumber.

Demikian surat pernyataan originalitas ini saya buat dengan sebenarnya,

apabila di kemudian hari terdapat penyimpangan serta ketidakbenaran dalam

pernyataan ini, maka saya bersedia menerima sanksi akademik berupa pencabutan

Perancangan Media..., Eric Wilson, FSD UMN, 2015

iii

gelar (S.Sn.) yang telah diperoleh, serta sanksi lainnya sesuai dengan norma yang

berlaku di Universitas Multimedia Nusantara.

Tangerang, 14 November 2014

Eric Wilson Laujaya


iv

HALAMAN PENGESAHAN TUGAS AKHIR

PERANCANGAN MEDIA INTERAKTIF CERITA

RAKYAT TIMUN MAS

Oleh


NIM : 09120210069

Progam Studi : Desain Komunikasi Visual



Pembimbing

Yusup Sigit Martyastiadi, S.T., M.Inf.Tech

Penguji

Edwin Hartono Sutiono, M.A.

Ketua Sidang

Desi Dwi Kristanto,M.Ds.

Ketua Program Studi

Desi Dwi Kristanto,M.Ds.


v

KATA PENGANTAR

Puji Syukur kepada Tuhan yang Maha Esa atas berkat dan penyertaan-Nya terhadap

penulis dalam proses pembuatan Tugas Akhir berjudul Perancangan Media Interaktif

Cerita Rakyat Timun Mas sehingga dapat selesai pada waktunya. Pemilihan topik

Perancangan Media Interaktif Cerita Rakyat Timun Mas ini diawali dari kesenangan

penulis dalam membuat media flash, dan juga keprihatinan atas jarangnya anak

Indonesia terutama di perkotaan yang mengetahui cerita asli Indonesia.

Dalam Tugas Akhir ini, penulis akan merancang media interaktif dengan acuan teori

yang ada untuk membuat tugas akhir ini sesuai untuk anak usia 3-5 tahun yang

notabene merupakan golden age dari perkembangan jaringan otak. Juga

mengimplementasikan desain pola interaksi dan GUI pada media interaktif cerita

Timun Mas.

Tidak lupa ucapan terima kasih kepada orang-orang yang membantu tugas akhir ini,

khususnya kepada:

1. Desi Dwi Kristanto, M.Ds., selaku Dekan Program Studi Desain

Komunikasi Visual,

2. Yusup Sigit Martyastiadi, S.T., M.Inf.Tech. selaku Dosen Pembimbing

yang telah memberikan waktu dan masukan dalam pembuatan Tugas Akhir

ini.

3. Keluarga, terutama Papa, Mama, Ita, dan Ardi yang selalu menyemangati

dan mendukung penulis untuk menyelesaikan Tugas Akhir ini.


vi

4. Teman dan rekan-rekan seperjuangan mahasiswa Desain Komunikasi

Visual yang telah memberikan banyak masukan berharga.


Eric Wilson Laujaya


vii

ABSTRAKSI

Media interaktif merupakan media penggabungan dari gambar statis, dinamis,

animasi, suara, dan juga interaksi dari audiens. Media interaktif sangat efektif untuk

mengedukasi juga merangsang daya pikir anak usia balita sampai dengan sekolah

dasar, dimana ada 100 miliar sel otak yang siap untuk dirangsang untuk

memaksimalkan tingkat kecerdasan anak. Cerita atau konsep yang lebih sulit akan

dapat disampaikan dengan fun dan menarik dengan media interaktif karena audiens

tidak hanya dapat membaca atau mendengarkan, tetapi juga dapat berinteraksi dengan

cerita tersebut, sehingga pesan moral yang terkandung didalamnya dapat diterima

dengan maksimal.

Tugas Akhir yang akan dibuat adalah perancangan media penceritaan interaktif

Timun Mas yang dapat diakses melalui komputer. Secara umum media interaktif

menggunakan bantuan dari software Adobe Flash, Adobe Illustrator, dan juga Adobe

Photoshop.

Kata kunci : Media Interaktif, Flash, Adobe, Edukasi


viii

ABSTRACT

Interactive Media is a combination of a static images, dynamic images, animation,

sound, also interaction of the audience. Interactive media is very effective to educate

also stimulate children’s cognitive up to primary school, where there are 100 billion

brain cells that ready to be stimulated to maximize the child level of intellegence.

Story or difficult concepts will be presented with fun and exciting in interactive media

because the audience not only read or listen, but they can interact with the story. So

moral message that contained in the story can be receive to the maximum level.

The Final Project that will be create is an interactive story book of Timun Mas that

can be accessible via computer. In general this interactive media using the software

Adobe Flash, Adobe Illustrator, and Adobe Photoshop.

Keywords : Interactive Media, Flash, Adobe, Education.


ix

DAFTAR ISI

LEMBAR PERNYATAAN TIDAK MELAKUKAN PLAGIAT ........................... ii

KATA PENGANTAR ................................................................................................. v

ABSTRAKSI .............................................................................................................. vii

ABSTRACT .............................................................................................................. viii

DAFTAR ISI ............................................................................................................... ix

DAFTAR GAMBAR ................................................................................................ xiii

DAFTAR TABEL .................................................................................................... xvi

BAB I ............................................................................................................................ 1

1.1. Latar Belakang ............................................................................................... 1

1.2. Rumusan Masalah .......................................................................................... 3

1.3. Batasan Masalah ............................................................................................. 3

1.4. Tujuan Tugas Akhir ........................................................................................ 3

1.5. Manfaat Tugas Akhir ...................................................................................... 4

BAB II .......................................................................................................................... 5

TELAAH LITERATUR ............................................................................................. 5


x

2.1. Media Interaktif ............................................................................................. 5

2.2. Interaktifitas .................................................................................................... 6

2.3. Graphical User Interface (GUI) ..................................................................... 9

2.3.1. Peraturan User Interface ....................................................................... 10

2.3.2. Klasifikasi User Interface ..................................................................... 11

2.3.3. Elemen-elemen GUI - WIMP ............................................................... 13

2.3.4. Proses Perancangan User Interface ....................................................... 14

2.4. Prinsip Desain ............................................................................................... 15

2.5. Elemen-Elemen Desain ................................................................................ 16

2.6. Layout ........................................................................................................... 18

2.7. Tema Visual - Cartoon / Kartun ................................................................... 19

2.8. Psikologi Warna ........................................................................................... 20

BAB III ....................................................................................................................... 22

METODOLOGI ........................................................................................................ 22

3.1. Gambaran Umum ......................................................................................... 22

3.2. Sinopsis Timun Mas ..................................................................................... 22

3.3. Praproduksi ................................................................................................... 24

3.3.1. Pola Interaksi ......................................................................................... 25


xi

3.3.2. Referensi Tampilan ............................................................................... 28

3.3.3. Referensi Media Interaktif untuk Anak-anak ........................................ 31

3.3.4. Wireframe .............................................................................................. 36

3.3.5. Sketsa .................................................................................................... 39

3.4. Proses Produksi ............................................................................................ 41

3.4.1. Graphic Properties ............................................................................... 41

3.4.2. Tombol Navigasi ................................................................................... 57

3.4.3. Animasi Tombol ................................................................................... 59

3.4.4. Media Interaktif ..................................................................................... 61

3.5. Post Production ............................................................................................ 62

BAB IV ....................................................................................................................... 63

ANALISIS .................................................................................................................. 63

4.1. Media Interaktif ............................................................................................ 63

4.2. Interaktifitas .................................................................................................. 64

4.3. User Interface ............................................................................................... 71

4.4. Layout ........................................................................................................... 72

BAB V ......................................................................................................................... 77

PENUTUP .................................................................................................................. 77


xii

5.1. Kesimpulan ................................................................................................... 77

5.2. Saran ............................................................................................................. 78

DAFTAR PUSTAKA .............................................................................................. xvii


xiii

DAFTAR GAMBAR

Gambar 2. 1. Struktur Pengembangan Cerita................................................................ 6

Gambar 2. 2. Nodal Plot ............................................................................................... 8

Gambar 2. 3. Modulated Plot ........................................................................................ 8

Gambar 2. 4. Open Plot................................................................................................. 9

Gambar 2. 5. Text User Interface ................................................................................ 12

Gambar 2. 6. Graphical User Interface ...................................................................... 13

Gambar 2. 7. W.I.M.P ................................................................................................. 14

Gambar 2. 8. Elemen-Elemen Desain ......................................................................... 16

Gambar 2. 9. Kartun Sebagai Propaganda .................................................................. 20

Gambar 3.1. Pola Interaksi .......................................................................................... 25

Gambar 3.2. Pengaplikasian Pola Interaksi................................................................. 26

Gambar 3.3. Rumah Gubuk Jawa Tengah .................................................................. 28

Gambar 3.4. Pemandangan Desa ................................................................................ 29

Gambar 3.5. Troll ........................................................................................................ 30

Gambar 3.6. Menu Utama Bawang Merah Bawang Putih .......................................... 31

Gambar 3.7. Wireframe Bawang Merah Bawang Putih .............................................. 32

Gambar 3.8. Scene Bawang Merah Bawang Putih ..................................................... 33

Gambar 3.9. Scene Jack and the Beanstalk................................................................. 34

Gambar 3.10. Wireframe Halaman Utama .................................................................. 36

Gambar 3.11. Wireframe Scene .................................................................................. 37


xiv

Gambar 3.12. Wireframe Scene Mini Game ............................................................... 37

Gambar 3.13. Wireframe Ilustrasi Interaktif ............................................................... 38

Gambar 3.14. Sketsa Halaman Utama ........................................................................ 39

Gambar 3.15. Sketsa Timun Mas dan Mbok Srini ...................................................... 40

Gambar 3.16. Halaman Utama Media Interaktif Timun Mas ..................................... 42

Gambar 3.17. Scene Pertama Timun Mas ................................................................... 43

Gambar 3.18. Scene Kedua Timun Mas...................................................................... 44

Gambar 3.19. Scene Kedua Timun Mas...................................................................... 45

Gambar 3.20. Scene Ketiga Timun Mas ..................................................................... 46

Gambar 3.21. Scene Keempat Timun Mas.................................................................. 47

Gambar 3.22. Scene Mini Game Timun Mas .............................................................. 48

Gambar 3.23. Mini Game Timun Mas ........................................................................ 49

Gambar 3.24. Scene Keenam Timun Mas ................................................................... 50

Gambar 3.25. Scene Ketujuh Timun Mas ................................................................... 51

Gambar 3.26. Scene Kedelapan Timun Mas ............................................................... 52

Gambar 3.27. Scene Mini Game Timun Mas .............................................................. 53

Gambar 3.28. Game Timun Mas ................................................................................. 54

Gambar 3.29. Scene Timun Mas ................................................................................. 55

Gambar 3.30. Scene Kesepuluh Timun Mas ............................................................... 57

Gambar 3.31. Tombol-Tombol dalam Media Interaktif Timun Mas .......................... 58

Gambar 3.32. Tombol Khusus pada Media Interaktif Timun Mas ............................. 59

Gambar 3.33. Animasi Tombol pada Media Interaktif Timun Mas ........................... 60


xv

Gambar 3.34. Animasi Tombol dalam Mini Game Timun Mas ................................. 60

Gambar 3.35. Action Script pada Tombol ................................................................... 61

Gambar 4.1. Contoh Warna Ceria ............................................................................... 64

Gambar 4.2. Sistem Interaksi ...................................................................................... 65

Gambar 4.3. Pengaplikasian Teori Interaktifitas......................................................... 66

Gambar 4.4. Aplikasi Pola Interaktif .......................................................................... 67

Gambar 4.5. Pengaplikasian Wireframe dalam Scene ................................................ 68

Gambar 4.6. Mini Game Timun Mas .......................................................................... 69

Gambar 4.7. Mini Game Timun Mas .......................................................................... 70

Gambar 4.8. Pengaplikasian 8 Golden Rules of Shneiderman .................................... 71

Gambar 4 9. Font Gretoon Highlight .......................................................................... 72

Gambar 4.10. Font Comic Sans .................................................................................. 72

Gambar 4.11. Pengaplikasian Wireframe.................................................................... 73





xvi

DAFTAR TABEL

Tabel 2.1. Warna dan Maknanya ................................................................................ 21


lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/2255/1/halaman awal.pdfiii...

Documents