PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D...

47
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA VIRTUAL UNIVERSITAS SEBELAS MARET BERBASIS 3D TUGAS AKHIR Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika Disusun oleh: Mohammad Mohan NIM. M3309029 PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2012

Transcript of PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D...

Page 1: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

i

PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA VIRTUAL

UNIVERSITAS SEBELAS MARET BERBASIS 3D

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Disusun oleh:

Mohammad Mohan

NIM. M3309029

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

SURAKARTA

2012

Page 2: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ii

HALAMAN PERSETUJUAN

PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA VIRTUAL

UNIVERSITAS SEBELAS MARET BERBASIS 3D

Disusun oleh:

Mohammad Mohan

NIM. M3309029

Tugas Akhir ini telah disetujui untuk dipertahankan

di hadapan dewan penguji

pada tanggal 26 Juni 2012

Pembimbing

Taufiqurrakhman NH, S.Kom

NIDN. 0622058201

Page 3: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iii

HALAMAN PENGESAHAN

PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA VIRTUAL UNIVERSITAS SEBELAS MARET BERBASIS 3D

Disusun oleh: Mohammad Mohan

NIM. M3309029

Dibimbing Oleh:

Taufiqurrakhman NH, S.Kom

NIDN. 0622058201

Tugas Akhir ini telah diterima dan disahkan oleh dewan penguji Tugas Akhir

Program Diploma III Teknik Informatika pada hari Selasa tanggal 26 Juni 2012

Dewan penguji 1. Taufiqurrakhman NH, S.Kom ( )

NIDN. 0622058201

2. Meiyanto Eko Sulistyo, S.T., M.Eng ( ) NIP. 19770513 200912 1 004

3. Yudha Yudhanto, S.Kom ( )

Disahkan oleh:

Dekan FMIPA UNS Prof.Ir. Ari Handono Ramelan, M.Sc (Hons), Ph.D NIP. 19610223 198601 1 001

Ketua Program Diploma III Teknik Informatika FMIPA UNS Drs. YS. Palgunadi, M.Sc NIP. 19560407 198303 1 004

Page 4: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iv

ABSTRACT

MOHAN, MOHAMMAD 2012. INTERACTIVE MULTIMEDIA VIRTUAL MAP SEBELAS MARET UNIVERSITY 3D BASED. The Diploma III Program Informatics Engineering of Mathematics and Scientists Faculty in Universitas Sebelas Maret Surakarta. Sebelas Maret University is one of the largest campus in the Surakarta city. Has a coverage area of approximately 60 hectares, of which there are 9 School which has many buildings and buildings that stood in all directions. Since its establishment on 11 March 1976 University of March does not have a map that can present information that is interactive and effective, so as to look for places in the scope of the University still uses the normal map. The use of 3 dimensional object would make the map more interesting information delivery. The purpose of the project task is to provide convenience to the public in understanding the information about the places in the scope of the UNS. Virtual maps application is designed and developed using the method of study that is looking for a reference library and materials related to the research conducted. Virtual map making UNS carried out using several design and animation software such as Adobe Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, and Open Space 3D Editor. The study produced a multimedia application that will provide information about places in the area UNS presented in three dimensions. Information provided is information the faculties, administrative offices, rector and others. Key words: 3D, Multimedia, Universities, Virtual Map UNS

Page 5: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

v

ABSTRAK

MOHAN, MOHAMMAD 2012. PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA VIRTUAL UNIVERSITAS SEBELAS MARET BERBASIS 3D. Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

Universitas Sebelas Maret merupakan salah satu kampus terluas di kota Surakarta. Memiliki cakupan area sekitar 60 hektar, dimana terdapat 9 Fakultas yang memiliki banyak gedung dan bangunan-bangunan yang berdiri disegala penjuru. Sejak berdiri tanggal 11 maret 1976 Universitas Sebelas Maret belum mempunyai peta yang dapat menyajikan informasi yang interaktif dan efektif, sehingga untuk mencari tempat-tempat di lingkup Universitas masih menggunakan peta biasa. Penggunaan obyek 3 dimensi akan membuat penyampaian informasi peta lebih menarik. Tujuan dari proyek tugas ini adalah untuk memberikan kenyamanan kepada masyarakat dalam memahami informasi tentang tempat-tempat di lingkup UNS.

Multimedia interaktif peta virtual ini dirancang dan dikembangkan menggunakan metode studi pustaka yaitu mencari referensi dan materi yang berhubungan dengan penelitian yang dilakukan. Pembuatan peta virtual UNS dilakukan menggunakan beberapa software desain dan animasi seperti Adobe Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor.

Penelitian ini menghasilkan multimedia interaktif yang akan memberikan informasi tentang tempat-tempat dilingkup UNS yang disajikan secara 3 dimensi. Informasi yang diberikan adalah informasi fakultas-fakultas, kantor administrasi, rektorat dan lain sebagainya. Kata kunci : 3D, , Multimedia, Peta Virtual UNS, Universitas

Page 6: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vi

HALAMAN MOTTO

-orang yang sukses telah belajar membuat diri mereka melakukan hal

yang harus dikerjakan ketika hal itu memang harus dikerjakan, entah mereka

Ernest Newman

sa bukan hanya karena kita pandai, namun kita bisa karena kita biasa

Komang Leo Triandana

Page 7: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vii

HALAMAN PERSEMBAHAN

Laporan Tugas Akhir ini saya persembahkan kepada:

1. Bapak & Ibu yang telah berjuang agar aku tetap bisa belajar, serta kakak

2. Pacar, terimakasih atas perhatian dan pengertiannya

3. Sahabat, yang saling memberi semangat dan doa

4. Teman-teman D3 Teknik Informatika, khususnya Teknik Infomatika E

(TIE) 2009

Page 8: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

viii

KATA PENGANTAR

Alhamdulillah, puji syukur kehadirat Allah SWT atas rahmat dan

nikmat-

Multimedia Berupa

tepat waktu.

Laporan ini disusun untuk memenuhi salah satu syarat mencapai gelar

Ahli Madya Program Diploma III Teknik Informatika Fakultas Matematika dan

Ilmu Pengetahuan Alam Universitas Sebelas Maret.

Penyusunan laporan ini tidak lepas dari bimbingan dan bantuan dari

berbagai pihak. Untuk itu, pada kesempatan ini penulis mengucapkan terima kasih

kepada :

1. Drs. Y.S. Palgunadi, M.Sc, selaku Ketua Program Diploma III Teknik

Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sebelas Maret.

2. Taufiqurrakhman NH, S.Kom, selaku Pembimbing Tugas Akhir yang

telah meluangkan waktu untuk membimbing dan memberi pengarahan

kepada penulis dalam menyelesaikan laporan tugas akhir ini.

3. Meiyanto Eko Sulistyo, S.T., M.Eng dan Yudha Yudhanto, S.Kom, selaku

Dosen penguji Tugas Akhir.

Demikian laporan ini disusun, dengan harapan dapat memberikan

informasi serta pengetahuan bagi pembaca.

Surakarta, 11 Juni 2012

Penulis

Page 9: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ix

DAFTAR ISI

KATA PENGANTAR ....................................................................................... viii

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

DAFTAR GAMBAR ......................................................................................... xi

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

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

1.2 Perumusan Masalah ..................................................................... 2

1.3 Batasan Masalah .......................................................................... 2

1.4 Tujuan dan Manfaat ..................................................................... 2

1.4.1 Tujuan ................................................................... 2

1.4.2 Manfaat ................................................................. 2

1.5 Metodologi Penelitian .................................................................. 3

1.6 Sistematika Penulisan .................................................................. 4

BAB II LANDASAN TEORI ........................................................................ 5

2.1 Multimedia ............................................................................... 5

2.2 Peta ........................................................................................... 5

2.3 Unsur Multimedia .................................................................... 7

2.4 Animasi .................................................................................... 11

2.5 Grafis 3 dimensi ....................................................................... 12

2.6 3Ds Studio Max ........................................................................ 13

2.7 Open Space 3D Editor .............................................................. 14

2.8 Adobe Flash ............................................................................. 14

2.9 Adobe Photoshop ..................................................................... 15

2.10 Struktur Navigasi ...................................................................... 15

2.10.1 Struktur Linier .............................................................. 15

2.10.2 Struktur Menu .............................................................. 16

2.10.3 Struktur Hierarki .......................................................... 16

2.10.4 Struktur Jaringan .......................................................... 17

2.10.5 Struktur Kombinasi ............................................................... 18

BAB III ANALISA DAN PERANCANGAN ................................................. 19

Page 10: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

x

3.1 Pengembangan Aplikasi .............................................................. 19

3.2 Rancangan System Aplikasi ........................................................ 21

3.2.1 Struktur Navigasi Aplikasi ......................................... 21

3.2.2 Interaksi Aplikasi ....................................................... 21

3.3 Rancangan Desain Aplikasi ......................................................... 22

3.3.1 Rancangan Halaman Menu Utama ............................ 22

3.3.2 Rancangan Halaman Peta .......................................... 23

BAB IV IMPLEMENTASI DAN EVALUASI ............................................... 24

4.1 Analisa Kebutuhan ...................................................................... 24

4.1.1 Software ...................................................................... 24

4.1.2 Hardware ..................................................................... 25

4.2 Detail Aplikasi ............................................................................. 25

4.3 Pembuatan Aplikasi ..................................................................... 26

4.3.1 Pembuatan Obyek 3 Dimensi ...................................... 26

4.3.2 Pembuatan Material ..................................................... 29

4.3.3 Pembuatan Animasi Flash ........................................... 32

4.3.4 Penggunaan Backsound .............................................. 33

4.3.5 Pembuatan Peta Virtual ............................................... 33

4.4 Evaluasi Aplikasi ......................................................................... 35

1. Kelebihan Aplikasi ................................................................ 35

2. Kelemahan Aplikasi .............................................................. 35

BAB V PENUTUP ......................................................................................... 36

A. Kesimpulan .................................................................................. 36

B. Saran ............................................................................................ 36

Daftar Pustaka .................................................................................................... 37

Page 11: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xi

DAFTAR GAMBAR

Nomor Halaman

2.1 Struktur Linier ........................................................................................... 16

2.2 Struktur Menu ........................................................................................... 17

2.3 Struktur Hierarki ....................................................................................... 17

2.4 Struktur Jaringan ....................................................................................... 17

2.5 Struktur Kombinasi ................................................................................... 18

3.1 Langkah Pengembangan Aplikasi ............................................................. 19

3.2 Struktur Navigasi ...................................................................................... 21

3.3 Rancangan Halaman Menu Utama ........................................................... 22

3.4 Rancangan Halaman Peta ........................................................................... 23

4.1 Pembuatan Landscape ............................................................................... 26

4.2 Pembuatan Contour Tanah ........................................................................ 27

4.3 Pembuatan Pembuatan gedung Rektorat ................................................... 28

4.4 Pembuatan Pembuatan gedung FKIP ......................................................... 28

4.5 Pembuatan Material ................................................................................... 29

4.6 Pembuatan Unwrap UVW gedung rektorat .............................................. 30

4.7 Pembuatan Pembuatan material gedung Rektorat tahap awal .................. 30

4.8 Pembuatan Pembuatan material gedung Rektorat tahap akhir ................... 31

4.9 Gedung Rektorat ....................................................................................... 31

4.10 Pembuatan Animasi flash info .................................................................. 32

4.11 Pembuatan Exporter menggunakan DFusion ............................................ 33

4.12 Peta virtual ................................................................................................ 34

Page 12: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Perkembangan teknologi informasi sekarang ini, semakin marak dan

berkembang pesat, sehingga banyak membantu masyarakat dunia untuk

menikmati berbagai kemudahan yang telah di hasilkan oleh teknologi tersebut.

Sebagai konsekuensi logis dari penerapan teknologi yang tunggal adalah

kemajuan suatu bidang usaha yang memanfaatkan teknologi yang berdaya guna

dan tepat guna, berdampingan bersama aktifitas sumber daya pengolah dan

kelengkapan infrastruktur penunjangnya.

Salah satu bentuk perkembangan teknologi yang menonjol adalah bidang

komputer, khususnya bidang multimedia yang sangat berperan dalam

penyampaian berita atau informasi. Komputer multimedia dapat di pakai dalam

berbagai bentuk kehidupan di antaranya untuk membuat iklan televisi, untuk

keperluan presentasi atau seminar yang berbentuk interaktif.

Kampus Universitas Sebelas Maret merupakan salah satu kampus terluas

di kota sutakarta. Memiliki cakupan area sekitar 60 hektar, dimana terdapat 9

Fakultas yang memiliki banyak gedung dan bangunan-bangunan yang berdiri

disegala penjuru. Sejak berdiri tanggal 11 maret 1976 Universitas Sebelas Maret

belum mempunyai peta yang dapat menyajikan informasi yang interaktif dan

efektif, sehingga untuk mencari tempat-tempat di lingkup Universitas masih

menggunakan peta biasa.

Berdasarkan penjelasan di atas maka pada proposal Tugas Akhir ini

penulis membuat sebuah Multimedia Interaktif Berupa Peta Virtual Universitas

Sebelas Maret Berbasis 3D. Sehingga dengan adanya multimedia interaktif berupa

peta virtual tersebut diharapkan dapat memudahkan mahasiswa maupun

pengunjung untuk menerima dan memahami informasi.

Page 13: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

2

1.2 Perumusan Masalah

Membuat Multimedia Interaktif Berupa Peta Virtual Universitas Sebelas Maret

Berbasis 3D

1.3 Batasan Masalah

Batasan permasalahan dalam Pembuatan Multimedia Interaktif Berupa

Peta Virtual Universitas Sebelas Maret Berbasis 3D ini adalah sebagai berikut :

1. Pembuatan model bangunan/gedung dibatasi hanya gedung-gedung

perkuliahan dan gedung pokok seperti rektorat, spmb, dll.

2. Interaksi yang dibuat adalah menjelajahi peta, interaksi dengan gedung di

dalam peta virtual.

1.4 Tujuan dan Manfaat

1.4.1 Tujuan

Tujuan yang ingin dicapai dalam Tugas Akhir ini adalah menghasilkan

multimedia interaktif berupa peta virtual dalam tiga dimensi.

1.4.2 Manfaat

Manfaat yang dapat diambil dari aplikasi ini adalah sebagai berikut:

a. Mahasiswa, tamu universitas dan masyarakat dapat menjelajahi dan

berinteraksi di aplikasi peta virtual tiga dimensi sehingga dapat

mengetahui, mengenal serta mencari lokasi gedung di lingkup kampus

dengan lebih mudah.

b. Pihak universitas dapat menjelaskan dengan mudah tentang lokasi

gedung, fakultas serta jurusan-jurusan yang ada didalam fakultas

tersebut dengan aplikasi peta virtual.

Page 14: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

3

1.5 Metodologi Penelitian

Metode penelitian yang digunakan untuk membuat proposal tugas akhir ini

adalah sebagai berikut :

1. Tahap awal meliputi :

a. Observasi lingkungan

Tahap observasi lingkungan merupakan tahap identifikasi permasalahan

yang berhubungan dengan Universitas sebelas maret.

b. Konseptualisasi

c. Pengumpulan data

Didalam pengumpulan data terdiri dari beberapa metode yaitu :

1. Observasi

2. Studi pustaka

3. Browsing

d. Analisis data

Pada tahap ini digunakan untuk melakukan analisa terhadap data-data

yang telah diperoleh sebelumnya.

2. Tahap perancangan Aplikasi

3. Tahap pembuatan Aplikasi.

4. Tahap uji coba.

5. Tahap kesimpulan dan saran.

6. Tahap pembuatan laporan.

Page 15: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

4

1.6 Sistematika Penulisan

1. BAB I PENDAHULUAN

Menguraikan latar belakang, perumusan masalah, batasan masalah,

tujuan dan manfaat penelitian, serta metodologi penelitian.

2. BAB II LANDASAN TEORI

Berisi landasan teori dari permasalahan yang diambil, juga landasan

teori dari perangkat lunak dan bahasa pemrograman yang dipakai.

3. BAB III ANALISA DAN PERANCANGAN

Berisi penjelasan konsep aplikasi yang terdiri dari desain dan

rancangan yang akan diterapkan.

4. BAB IV IMPLEMENTASI DAN EVALUASI

Menunjukkan hasil aplikasi multimedia interaktif peta virtual

universitas sebelas maret berbasis 3D yang explorable dengan gambar serta

pembahasan masalah dari pembuatan aplikasi.

5. BAB V PENUTUP

Menguraikan kesimpulan yang merupakan hasil penjabaran dari tujuan

pembuatan aplikasi serta saran untuk pengembangan aplikasi yang lebih baik.

Page 16: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

5

BAB II

LANDASAN TEORI

2.1 Multimedia

Multimedia adalah media yang menggabungkan dua unsur atau lebih

media yang terdiri dari teks, grafis, gambar, foto, audio, video dan animasi secara

terintegrasi. Multimedia terbagi menjadi dua kategori, yaitu: multimedia linier dan

multimedia interaktif (Juhaeri, 2007).

a. Multimedia linier adalah suatu multimedia yang tidak dilengkapi dengan

alat pengontrol apapun yang dapat dioperasikan oleh pengguna. Multimedia ini

berjalan sekuensial (berurutan),

Contoh multimedia linear : TV dan film.

b. Multimedia interaktif adalah suatu multimedia yang dilengkapi dengan alat

pengontrol yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat

memilih apa yang dikehendaki untuk proses selanjutnya.

Contoh multimedia interaktif adalah: multimedia pembelajaran interaktif,

aplikasi game, aplikasi peta.

2.2 Peta

Peta merupakan alat utama di dalam ilmu geografi, selain foto udara dan

citra satelit. Melalui peta, seorang dapat mengamati kenampakan permukaan bumi

lebih luas dari batas pandang manusia.

Menurut ICA (International Cartographic Association) Peta adalah suatu

gambaran atau representasi unsur-unsur ketampakan abstrak yang dipilih dari

permukaan bumi, yang ada kaitannya dengan permukaan bumi atau benda-benda

angkasa. Pada umumnya, peta digambarkan pada suatu bidang datar dan

diperkecil atau skalakan.

Peta mulai ada dan digunakan manusia, sejak manusia melakukan

penjelajahan dan penelitian. Walaupun masih dalam bentuk yang sangat

sederhana yaitu dalam bentuk sketsa mengenai lokasi suatu tempat.

Page 17: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

6

Pada awal abad ke 2 (87 M 150 M), Claudius Ptolomaeus mengemukakan

mengenai pentingnya peta. Kumpulan dari peta peta karya Claudius Ptolomaeus

peta adalah kartografi. Sedangkan orang ahli membuat peta disebut kartografer

(Romenah, 2007).

2.2.1 Tujuan Peta

Peta dibuat orang dengan berbagai tujuan. Berikut ini contoh-contoh peta

untuk berbagai tujuan:

a. Peta Pendidikan (Educational Map). Contohnya: peta lokasi sekolah

SLTP/SMU.

b. Peta Ilmu Pengetahuan. Contohnya: peta arah angin, peta penduduk.

c. Peta Informasi Umum (General Information Map). Contohnya: peta pusat

perbelanjaan.

d. Peta Turis (Tourism Map). Contohnya: peta museum, peta rute bus.12

e. Peta Navigasi. Contohnya: peta penerbangan, peta pelayaran.

f. Peta Aplikasi (Technical Application Map) .Contohnya: peta penggunaan

tanah, peta curah hujan.

g. Peta Perencanaan (Planning Map). Contohnya: peta jalur hijau, peta

perumahan, peta pertambangan (Romenah, 2007).

2.2.2 Fungsi Peta

Peta sangat diperlukan oleh manusia. Dengan peta Anda dapat mengetahui

atau menentukan lokasi yang ingin di cari. Secara umum fungsi peta dapat

disimpulkan sebagai berikut:

a. Menunjukkan posisi atau lokasi suatu tempat di permukaan bumi.

b. Memperlihatkan ukuran (luas, jarak) dan arah suatu tempat di

permukaan bumi.

c. Menggambarkan bentuk-bentuk di permukaan bumi, seperti benua,

negara, gunung, sungai dan bentuk-bentuk lainnya.

Page 18: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

7

d. Membantu peneliti sebelum melakukan survei untuk mengetahui

kondisi daerah yang akan diteliti.

e. Menyajikan data tentang potensi suatu wilayah.

f. Alat analisis untuk mendapatkan suatu kesimpulan.

g. Alat untuk menjelaskan rencana-rencana yang diajukan.

h. Alat untuk mempelajari hubungan timbal-balik antara fenomena-

fenomena (gejala-gejala) geografi di permukaan bumi (Romenah,

2007).

2.3 Unsur Multimedia

2.3.1 Teks

Teks adalah elemen paling awal dan sederhana dalam multimedia, yang

biasanya mengacu pada kata, kalimat dan alinea. Sebagian besar multimedia

menggunakan teks karena teks sangat efektif untuk menyampaikan ide dan

panduan kepada pengguna. Teks merupakan bentuk data multimedia yang paling

mudah disimpan dan dikenali, serta file teks merupakan struktur yang

sederhana.(Suyanto, 2003)

Di dalam flash terdapat 3 tipe dari teks, yaitu:

a. Static Text yaitu tulisan yang bersifat statis sehingga tidak dapat diubah

saat aplikasi dijalankan.

b. Dynamic Text yaitu tulisan yang bersifat dinamis sehingga bisa diedit atau

diubah pada saat aplikasi dijalankan.

c. Input Text yaitu teks yang dapat diinputkan oleh user saat aplikasi

dijalankan.

2.3.2 Gambar

Gambar merupakan tampilan diam atau tidak bergerak. Gambar juga

merupakan salah satu komponen penting dalam multimedia karena dapat

meringkas dan menyajikan data kompleks serta mampu menyampaikan seribu

kata. Gambar dalam publikasi multimedia lebih menarik perhatian dan dapat

Page 19: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

8

mengurangi kebosanan dibandingkan dengan teks sebab manusia selalu

berorientasi terhadap visual. (Suyanto, 2003)

Ada dua jenis grafik:

a. Raster

Dimana setiap pixel didefinisikan secara terpisah.

b. Vector

Dimana formula matematika digunakan untuk mneggambar graphics

primitives (garis, kotak, lingkaran, elips, dan lain-lain) dan menggunakan

atributnya. Gambar vektor biasanya berukuran lebih kecil, gambar tidak

pecah, semua manipulasi dilakukan melalui rumus.

Grafik tidak hanya terdiri dari gambar-gambar statis. Grafik tersebut dapat

dimanipulasi secara dinamis:

a. Motion dynamics => obyek / background bergerak

b. Update dynamics => obyek berubah bentuk, warna, ukuran.

2.3.3 Jenis Format Ekstensi Gambar

a. Bitmap (*.BMP)

Format gambar yang paling umum dan merupakan format standar windows.

Ukuran filenya sangat besar karena bisa mencapai ukuran megabytes. File ini

merupakan format yang belum terkompresi dan menggunakan sistem warna RGB

(Red, Green, Blue) dimana masing-masing warna pixelnya terdiri dari 3

komponen, R, G, dan B yang dicambur menjadi satu. File BMP dapat dibuka

dengan berbagai macam software pembuka gambar seperti ACDSee, Paint,

IrvanView dan lain-lain. File BMP tidak bisa (sangat jarang) digunakan di web

(internet) karena ukurannya yang besar.

b. Joint Photographic Expert Group (*.JPEG/*.JPG)

Format JPG merupakan format yang paling terkenal sekarang ini. Hal ini

karena sifatnya yang berukuran kecil (hanya puluhan/ ratusan Kb saja), dan

Page 20: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

9

bersifat portabel. File ini sering digunakan pada bidang fotografi untuk

menyimpan file foto. File ini bisa digunakan di web (internet).

c. Graphics Interchange Format (*.GIF)

Format GIF ini berukuran kecil dan mendukung gambar yang terdiri dari

banyak frame sehingga bisa disebut gambar animasi (gambar bergerak). Format

ini sering sekali digunakan di internet untuk menampilkan gambar-gambar di

web.

d. Portable Network Graphics (*.PNG)

Format yang standar dan sering digunakan di internet untuk menampilkan

gmabar atau pengiriman gambar. Ukuran file ini cukup kecil dan setara dengan

ukuran gif dengan kualitas yang bagus. Namun tidak mendukung animasi (gambar

bergerak).

2.3.4 Suara

Animasi dapat dibuat lebih menarik apabila dilengkapi dengan suara yang

sesuai, karena suara yang mendukung gerakan animasi dapat membangkitkan

perasaan tertentu. Penambahan suara akan memperbesar ukuran file. Oleh karena

itu suara yang dimasukan sebaiknya berupa format yang berkapasitas kecil seperti

mp3 dan wav. (Hasanuddin dan Noviyanto, 2002)

a. AAC (Advanced Audio Coding) [*.m4a]

AAC bersifat lossy compression (data hasil kompresi tidak bisa

dikembalikan lagi ke data sebelum dikompres secara sempurna, karena

setelah dikompres terdapat data-data yang hilang). AAC merupkan audio

codec yang menyempurnakan MP3 dalam bidang medium dan high bit

rates.

Cara kerja dari format audio AAC adalah bagian-bagian sinyal yang

tidak relevan dibuang. Menghilangkan bagian-bagian sinyal yang

redundan. Dilakukan proses MDCT (Modified Discret Cosine Transform)

Page 21: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

10

berdasarkan tingkat kekompleksitasan sinyal. Adanya penambahan

Internal Error Correction. Kemudian, sinyal disimpan atau dipancarkan.

b. Waveform Audio [*.wav]

WAV adalah format audio standar Microsoft dan IBM untuk PC. WAV

biasanya menggunakan coding PCM (Pulse Code Modulation) WAV

adalah data tidak terkompres sehingga seluruh sampel audio disimpan

semuanya di harddisk. Software yang dapat menciptakan WAV dari

Analog Sound misalnya adalah Windows Sound Recorder. WAV jarang

sekali digunakan di internet karena ukurannya yang relatif besar.

Maksimal ukuran file WAV adalah 2GB.

c. Audio CD [*.cda]

Format untuk mendengarkan CD Audio CD Audio stereo berkualitas

sama dengan PCM/WAV yang memiliki sampling rate 44100 Hz, 2 Canel

(stereo) pada 16 bit. Durasi 75 menit dan dynamic range 95 dB.

d. Mpeg Audio Layer 3 [*.mp3]

Merupakan file dengan lossy compression. Sering digunakan di internet

karena ukurannya yang cukup kecil dibandingkan ukuran audio file yang

tidak terkompresi. Distandarisasi pada tahun 1991. Kompresi dilakukan

dengan menghilangkan bagian-bagian bunyi yang kurang berguna bagi

pendengaran manusia. Kompresi mp3 dengan kualitas 128 bits 44000 Hz

biasanya akan menghasilkan file berukuran 3-4 MB, tetapi unsur panjang

pendeknya lagu juga akan berpengaruh.

Page 22: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

11

2.3.5 Video

Video adalah teknologi untuk menangkap, merekam, memproses,

mentransmisikan dan menata ulang gambar bergerak. Biasanya menggunakan film

seluloid

video pada multimedia mencakup banyak aplikasi

a. Entertainment: roadcast TV, VCR/DVD recording

b. Interpersonal: video telephony, video conferencing

c. Interactive: windows

Digital video adalah jenis sistem video recording yang bekerja

menggunakan sistem digital dibandingkan dengan analog dalam hal representasi

videonya. Biasanya digital video direkam dalam tape, kemudian didistribusikan

melalui optical disc, misalnya VCD dan DVD. Salah satu alat yang dapat

digunakan untuk menghasilkan video digital adalah camcorder, yang digunakan

untuk merekam gambar-gambar video dan audio, sehingga sebuah camcorder

akan terdiri dari camera dan recorder.

2.4 Animasi

Animasi merupakan gerakan-gerakan objek yang disusun sehingga menarik

pehatian orang yang melihatnya. Cara kerja animasi tergantung pada penggaturan

frame di timeline. (Hasanuddin dan Noviyanto, 2002)

Flash membagi animasi dalam dua kategori, yaitu:

a. Shape adalah animasi berupa perubahaan bentuk dari keadaan awal,

menuju keadaan akhir yang ditentukan.

b. Motion adalah animasi pada flash yang berupa gerakan suatu obyek

tanpa mengalami perubahan bentuk.

Macam-macam Jenis Animasi

a. Animasi 2D (2 Dimensi)

Animasi 2D biasa juga disebut dengan film kartun. Kartun sendiri

berasal dari kata Cartoon, yang artinya gambar yang lucu. Dan film

kartun itu kebanyakan film yang lucu. Contohnya banyak sekali, baik

Page 23: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

12

yang di TV maupun di Bioskop. Misalnya: Shincan, Looney Tunes, Pink

Panther, Tom and Jerry, Scooby doo, dan masih banyak lagi. Meski yang

populer kebanyakan film Disney, namun bukan Walt Disney sebagai

bapak animasi kartun.

b. Animasi 3D (3 Dimensi)

Perkembangan teknologi dan komputer membuat teknik

pembuatan animasi 3D semakin berkembang dan maju pesat. Animasi

3D adalah pengembangan dari animasi 2D. Dengan animasi 3D, karakter

yang diperlihatkan semakin hidup dan nyata, mendekati wujud manusia

aslinya. Semenjak Toy Story buatan Disney (Pixar Studio), maka

berlomba¬lombalah studio film dunia memproduksi film sejenis.

Bermunculanlah, Bugs Life, AntZ, Dinosaurs, Final Fantasy, Toy Story

2, Monster Inc., hingga Finding Nemo, The Incredible, Shark Tale. Cars,

Valian. Kesemuanya itu biasa juga disebut dengan animasi 3D atau CGI

(Computer Generated Imagery).

2.5 Grafis 3 Dimensi

Dasar-dasar grafik 3 dimensi menurut Carsten Wartmann (2001) adalah

sebagai berikut:

1. Warna

Warna ditimbulkan oleh perbedaan kualitas cahaya yang direfleksikan

atau dipancarkan oleh objek. Saat melihat warna, sebenarnya yang dilihat adalah

gelombang cahaya yang dipantulkan atau dipancarkan oleh objek yang dilihat.

Warna termasuk karakteristik terukur seperti hue, penerangan, dan saturasi untuk

objek dan sumber cahaya.

Warna dibagi menjadi primer (warna dasar yang tidak dapat diproduksi

dengan mencampurkan warna lain), sekunder (campuran sederhana dari dua

warna primer), dan tersier (campuran dari warna sekunder).

Page 24: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

13

2. Sistem Koordinat

Beralih dari warna ke bentuk, menggambar suatu objek dapat dilakukan

dengan membuat titik-titik dalam ruang. Untuk memberikan lokasi tepat dari tiap

titik objek pada ruangan, menggunakan sistem koordinat. Sistem ini terdiri atas

posisi spesifik berdasarkan titik referensi yang telah ditentukan, dengan koordinat

yang biasa diberikan dalam pasangan (dua dimensi) atau tiga dimensi.

3. Permukaan

Permukaan merupakan pertemuan antara titik-titik koordinat yang

membentuk sebuah garis yang saling terhubung.

4. Cahaya Rendering

Pencahayaan objek yang menambahkan bayangan dan kedalaman adalah

hal yang mendasar untuk membuat kesan yang realistis dari objek.

5. Transformasi

Transformasi melibatkan manipulasi objek di ruang virtual termasuk

translasi (penempatan), rotasi (pemutaran), dan skala (mengubah ukuran). Di

dunia nyata, setiap transformasi dari objek fisik memerlukan sejumlah energi.

Dalam pandangan dunia virtual komputer grafik, bagaimanapun tidak ada energi

yang dibutuhkan untuk melakukan hal yang berhubungan dengan transformasi. Di

komputer, transformasi dilakukan menggunakan perhitungan matematis, biasanya

perhitungan matriks.

6. Animasi

Animasi adalah pergerakan dari objek dalam ruangan tiga dimensi.

Pergerakan dihitung untuk menghasilkan tiap gambar dengan memindahkan

sedikit objek.

2.6 3ds Studio Max

Adalah software visualisasi 3 dimensi yang handal dan serbaguna. Biasa

digunakan didunia perfilman, grafis, game, arsitektur, otomotif, produk, web,

fasion dll. 3D Studio Max (kadangkala disebut 3ds Max atau hanya MAX) adalah

sebuah perangkat lunak grafik vektor 3-dimensi dan animasi, ditulis oleh

Autodesk Media & Entertainment (dulunya dikenal sebagai Discreet and Kinetix.

Page 25: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

14

Perangkat lunak ini dikembangkan dari pendahulunya 3D Studio fo DOS, tetapi

untuk platform Win32. Kinetix kemudian bergabung dengan akuisisi terakhir

Autodesk, Discreet Logic. Versi terbaru 3Ds Max pada Juli 2005 adalah 7. 3Ds

Max Autodesk 8 diperkirakan akan tersedia pada akhir tahun. Hal ini telah

diumumkan oleh Discreet di Siggraph 2005. Harga software 3Ds Studio Max di

http://www.software-asli.com adalah Rp 26.928.000,-

2.7 Open Space 3D Editor

Aplikasi ini adalah sebuah editor atau scene manager yang bersifat

opensource. dengan Openspace 3d kita bisa membuat aplikasi game/simulasi 3d

secara mudah tanpa terlibat secara langsung dengan programing. aplikasi

Openspace 3d bersifat sebagai sebuah scene manager dan editor dalam pengaturan

scene. user hanya perlu memasukan resource yang dibutuhkan seperti grafik 3d

dalam bentuk mesh ogre, material, texture dan multimedia lainnya mencakup

audio dan video.

2.8 Adobe Flash

Adobe Flash adalah sebuah program grafis dan animasi yang

keberadaannya ditujukan bagi pecinta desain dan animasi untuk berkreasi

membuat animasi web interaktif, film animasi kartun, presentasi bisnis atau

kegiatan, company/organization profile, dan game Flash yang menarik. Adobe

Flash ini dapat menghasilkan file dengan ukuran kecil. Hal ini dikarenakan Flash

menggunakan animasi dengan basis vector dan juga ukuran file Flash yang kecil

ini berguna ketika digunakan pada halaman web yang akan berdampak tidak

dibutuhkannya waktu loading yang lama untuk membuka halaman tersebut.

Setiap program desain dan animasi dibuat dengan memiliki area kerja yang

memiliki kekhasan tersendiri diantara satu program dengan program lainnya. Pada

area kerja yang telah disediakan itulah diberikan kemudahan berupa tersedianya

berbagai macam fasilitas yang akan digunakan untuk berkreasi membuat desain

sesuai dengan ide. Pada Adobe Flash ini terdapat beberapa komponen utama yang

Page 26: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

15

penting, yaitu Toolbox, Timeline, dan Stage. (Anggra. 2008). Harga software

Adobe Flash di situs resmi www.adobe.com adalah US$699 (Rp 6,1 juta).

2.9 Adobe Photoshop

Photoshop merupakan salah satu software pengolah grafis berbasis bitmap

yang memiliki fitur sangat kompleks dibanding software sejenisnya. Dari

pengamatan terhadap beberapa perusahaan dan jasa desain, dapat dikatakan

bahwa Photoshop merupakan salah satu software wajib yang dijadikan andalan

atau penunjang utama di dalam proses menghasilkan produk seni. (Soeherman,

Bonnie. 2007)

Pada dasarnya, interface Photoshop memiliki bagian-bagian yang tidak

berbeda jauh dengan software-software lainnya dan mudah untuk dikenali.

Interface Photoshop dibagi ke dalam empat kategori utama, yaitu menu bar,

toolbox dan option bar, palette, dan area dokumen kerja. Harga software Adobe

Photoshop di situs resmi www.adobe.com adalah US$399 (Rp 3,1 juta).

2.10 Struktur Navigasi

Struktur navigasi merupakan alat bantu untuk merancang aliran aplikasi

multimedia. Ada beberapa cara yang digunakan dalam mendesain aliran aplikasi

multimedia, diantaranya adalah struktur linier, struktur hirarki, struktur jaringan

dan struktur kombinasi (Suyanto, 2004).

2.10.1 Struktur Linier

Struktur yang paling sederhana dalam mendesain aliran aplikasi multimedia

adalah struktur linier. Dalam menampilkan aplikasi multimedia dapat maju (next)

, mundur (back), jika mouse di klik akan menampilkan isi informasi dari aplikasi

multimedia tersebut dan bila di klik lagi akan muncul pada halaman berikutnya.

Skema dari struktur linier dapat dilihat seperti Gambar 2.1.

Page 27: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

16

Gambar 2.1 Struktur Linier

2.10.2 Struktur Menu

Struktur kedua untuk merancang aliran aplikasi multimedia adalah dengan

struktur menu. Objek dalam menu dapat diwujudkan dalam garis-garis hypertext,

grafik, audio, video, dan animasi atau kombinasi dari semua objek tersebut.

Skema dan struktur menu dapat dilihat pada Gambar 2.2.

Gambar 2.2 Struktur Menu

2.10.3 Struktur Hierarki

Struktur hierarki merupakan struktur seperti tangga atau pohon, dimana

masing-masing objek menyediakan sebuah menu pilihan yang memiliki lebih

banyak menu dengan lebih banyak pilihan. Tidak ada batasan ukuran atau jumlah

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Menu

Multimedia

Objek

Multimedia

Page 28: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

17

menu dan sub menu yang dapat dimiliki dalam sebuah struktur hierarki. Skema

struktur hierarki dapat dilihat pada Gambar 2.3.

Gambar 2.3 Struktur Hierarki

2.10.4 Struktur Jaringan

Bentuk struktur jaringan merupakan desain yang paling kompleks dengan

multimedia. Skema dari struktur jaringan dapat dilihat seperti Gambar 2.4.

Gambar 2.4 Struktur Jaringan

Objek

Objek

Objek

Objek

Objek Objek

Objek

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Page 29: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

18

2.10.5 Struktur Kombinasi

Struktur kombinasi merupakan struktur navigasi yang mengkombinasikan

struktur-struktur yang ada. Skema struktur kombinasi dapat dilihat seperti Gambar

2.5.

Gambar 2.5 Struktur Kombinasi

Menu Utama

Menu Utama Menu Utama

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Objek

Multimedia

Page 30: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

19

BAB III

ANALISA DAN PERANCANGAN

3.1 Pengembangan Aplikasi

Untuk menyelesaikan multimedia Interaktif Berupa Peta Virtual

Universitas Sebelas Maret Surakarta Berbasis 3D perlu adanya pengembangan

yang digunakan sebagai langkah-langkah sistematis mulai dari konsep,

pengumpulan data, perancangan aplikasi, pembuatan aplikasi dan uji coba

aplikasi. Dengan langkah-langkah tersebut diharapkan sistem akan dapat berjalan

secara baik dan sesuai dengan hasil yang diharapkan. Langkah-langkah membuat

aplikasi dapat dilihat pada gambar berikut :

Gambar 3.1 Langkah Pengembangan Aplikasi

Konsep

Pengumpulan Data

Perancangan Aplikasi

Pembuatan Aplikasi

Testing

Hasil

Page 31: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

20

1. Penentuan Konsep

Langkah ini dipergunakan untuk menetukan konsep yang akan

diterapkan dalam pengembangan aplikasi.

2. Pengumpulan Data

Tahap pengumpulan data terdiri dari 3 metode, yaitu:

a. Observasi

Pada tahap observasi data dikumpulkan dengan mengambil foto

atau gambar.

b. Studi pustaka

Pengumpulan data dilakukan melalui literature dan buku.

c. Browsing

Data dikumpulkan melalui source yang berada di internet.

3. Perancangan

Tahap perancangan meliputi:

a. Rancangan system

b. Rancangan Desain

4. Pembuatan

Tahap pembuatan Aplikasi meliputi:

a. Pembuatan object 3 dimensi

b. Pembuatan Material

c. Pembuatan Animasi Flash

d. Pembuatan Peta virtual

5. Testing

Pada langkah ini dilakukan uji coba aplikasi setelah diekspor. Jika

masih terdapat error, dilakukan perbaikan dan dilakukan testing lagi.

6. Hasil

Hasil adalah multimedia interaktif yang siap digunakan

Page 32: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

21

3.2 Rancangan System Aplikasi

3.2.1 Struktur Navigasi Aplikasi

Pembuatan aplikasi multimedia visualisasi tipe kamar hotel virtual ini

dibagi menjadi 4 menu navigasi, untuk masing-masing menu memiliki konten isi

yang berbeda dalam hal tipe kamar virtual yang disertai dengan

interaksi. Struktur navigasi yang digunakan adalah struktur navigasi

hirarki (Hierarchical model).

Gambar 3.2 Struktur Navigasi

3.2.2 Interaksi Aplikasi

Ketika aplikasi ini dijalankan, pengguna dapat memperoleh informasi

mengenai apa saja yang ada di dalam kampus UNS, dimana pengguna dapat

melakukan interaksi menggunakan mouse dan keyboard untuk mengetahui letak

setiap gedung beserta informasi didalamnya yang disajikan secara virtual 3

dimensi sehingga pengguna seolah-olah berjalan berjalan di dunia nyata.

Pergerakan kamera menggunakan keyboard (up) maju, (down) mundur, (right)

kanan, (left) kiri dan tombol space digunakan ntuk jumping. Serta enter agar

tampilan maximize, Q minimize dan ESC keluar dari Aplikasi. Terdapat pula

minimap interaktif yang dapat di kilik sehingga kamera akan langsung menuju

lokasi yang dipilih dan terdapat juga button lokasi untuk mempermudah pencarian

lokasi.

HELP

Menu Utama

Info UNS Peta UNS

Page 33: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

22

3.3 Rancangan Desain Aplikasi

Sebelum membuat aplikasi multimedia Interaktif Berupa Peta Virtual

Universitas Sebelas Maret Surakarta Berbasis 3D, terlebih dahulu dibuat

rancangan desain tampilannya. Rancangan desain tampilan pada aplikasi ini

terdiri dari Intro, halaman utama dan peta virtual. Berikut rancangan halaman

aplikasi multimedia interaktif peta virtual UNS:

3.3.1 Rancangan Halaman Menu Utama

Rancangan halaman menu utama merupakan tampilan utama untuk

menampung isi dari aplikasi multimedia peta virtual. Pada bagian kanan terdapat

Button peta dimana apa bila di klik akan membuka peta virtual 3D. pada bagian

kiri terdapat Button Info UNS dimana apa bila di klik akan membuka Flash

tentang info info UNS seperti sejarah singkat, fakultas-fakultas dll. Serta terdapat

tombol home untuk kembali ke menu utama.

Gambar 3.3 Rancangan Halaman Menu Utama

HELP

INFO UNS UNS VIRTUAL MAP

HOME

Page 34: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

23

3.3.2 Rancangan Halaman Peta

Rancangan halaman peta merupakan tampilan dari peta virtual 3D itu

sendiri, dimana pada bagian kiri atas terdapat minimap peta, sehingga pergerakan

bisa dipantau. Untuk bagian kanan terdapat keterangan dari object gedung yang

dipilih. Keterangan akan muncul apabila gedung/object diklik kiri serta akan

hilang apabila gedung/object diklik kanan. Pada bagian bawah terdapat 10 tombol

untuk memudahkan pengguna menuju ke 10 tempat yang sudah ditentukan.

Tombol akan kluar apabila kursor di dekatkan ke tombol. Untuk peta virtual

terdapat pada hampir seluruh interface. Terdapat mimimap yang interaktif,

sehingga dengan klik di minimap kamera langsung tertuju pada lokasi yang

dipilih. Terdapat pula tombol sound dan tombol kembali yang terdapat di bagian

bawah.

Gambar 3.4 Rancangan Halaman Peta

Peta virtual

HOME

Keterangan

Minimap

Tombol link, sound dan back

Page 35: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

24

BAB IV

IMPLEMENTASI DAN EVALUASI

4.1 Analisa Kebutuhan

Dalam pembuatan aplikasi dan penyusunan tugas akhir ini dibutuhkan alat

baik software maupun hardware.

4.1.1 Software

Adapun software yang digunakan antara lain:

a. Open Space 3D Editor

Software open space 3d editor digunakan untuk menggabungkan

semua obyek 3D, flash dan audio sehingga dapat berinteraksi satu sama lain.

b. 3D Studio Max versi 2010

Merupakan perangkat lunak yang digunakan untuk membuat obyek 3

dimensi berupa lansdscape, jalan, gedung-gedung dan bangunan-bangunan

universitas sebelas maret. menggunakan 3ds max versi 2010 karena versi

dibawahnya belum support dengan exporter DFussion Exporter 3D max 2010

yang digunakan untuk mengexport obyek 3D berextensi .mesh.

c. Adobe Photoshop CS

Perangkat lunak ini digunakan untuk membuat material, desain

tampilan dan button (tombol) serta mengedit gambar.

d. Adobe Flash CS

Perangkat lunak yang digunakan untuk membuat animasi dua dimensi

seperti info gedung, tombol-tombol dan animasi interface.

Page 36: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

25

4.1.2 Hardware

Hardware adalah perangkat keras yang dibutuhkan untuk membangun

aplikasi tugas akhir ini. Adapun hardware yang digunakan antara lain :

b. Personal Computer (PC) dengan spesifikasi:

Processor Intel® core i3

Memory 2 GB

VGA NVidia Geforce 1 GB

Harddisk 500 GB

c. Mouse

d. Headset

4.2 Detail Aplikasi

Aplikasi multimedia ini merupakan multimedia interaktif yang berisi peta

virtual UNS secara 3 dimensi yang dapat dijelajahi dan terdapat interaksi. Pada

aplikasi ini pengguna dapat menjelajah dan interaksi dengan bangunan-bangunan

di dalam linggkup UNS. Untuk keadaan pagi, siang, sore dan malam aplikasi peta

virtual ini menggunakan fungsi real time yang sudah diset sebelumnya dimana

apabila pengguna mengakses peta pada siang hari keadaan juga siang hari, apabila

diakses pada malam hari keadaan di dalam peta juga malam hari dan begitu pula

pada waktu pagi dan sore hari.

Multimedia interaktif ini ditujukan kepada seluruh warga kampus dan

tamu universitas pada khususnya serta masyarakat pada umumnya. Peta

Universitas Sebelas Maret ini dibuat secara 3 dimensi agar seluruh tempat di

lingkup kampus dapat terlihat lebih realistis. Pada penyampaian peta virtual ini

juga dilengkapi dengan interaksi yang akan menjadikan aplikasi ini semakin

menarik.

Page 37: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

26

4.3 Pembuatan Aplikasi

4.3.1 Pembuatan Obyek 3 Dimensi

a. Pembuatan Landscape

Gambar 4.1 Pembuatan Landscape

Landscape peta gabungan dari banyak obyek, antara lain: obyek tanah,

jalan, gapura, tembok, dll. Pembuatan obyek tanah menggunakan obyek geometri

Plane. Agar terdapat contour pada tanah, obyek Plane diberi modifier displace.

Tentunya terlebih dulu membuat file gambar sebagai acuan contournya. Warna

hitam akan tenggelam sedangkan semakin menuju ke putih akan naik. File gambar

dimasukkan ke dalam Plane sebagai material, dari material gambar ke modifier

displace dan dimasukkan ke image map dan diatur strengthnya secala otomatis

plane akan naik turun sesuai gambar.

Page 38: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

27

Gambar 4.2 Contour Tanah

Pembuatan obyek jalan, menggunakan line sebagai acuannya. Line

dibentuk sesuai jalan sesungguhnya. Setelah itu membuat Rectangle dengan

tinggi dan lebar yang disuaikan dengan tebal dan lebar jalan. Line dan rectangle

yang sudah dibuat akan di kolaborasikan agar membentuk sebuah jalan

menggunakan compound object, dengan rectangle sebagai get shapenya.

Untuk pembuatan obyek yang lain seperti gapura, pos satpam dan obyek

obyek yang lain pada landscape, menggunakan obyek geometri box. Box dibuat

dengan besar dan jumlah segment yang sesuai, convert pada editable poly.

Pembentukan obyek menggunakan vertek yang ditarik. Untuk menambah volume

pada sisi tertentu menggunakan modifier extrude. (seperti pada gambar 4.1).

Page 39: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

28

b. Pembuatan Obyek Gedung

Gambar 4.3 Pembuatan Gedung Rektorat

Gambar 4.4 Pembuatan Gedung FKIP

Pembuatan obyek gedung menggunakan box-box yang ditata

sedemikian rupa sehingga membentuk sebuah gedung yang sesuai dengan aslinya.

Contohnya gedung rektorat, terdiri dari box lantai, utama, tiang dan box atap yang

diedit verteknya. Untuk membuat pinggiran pada atap dipalai obyek plane yang

diedit vertek serta ditarik edgenya. Pembuatan tangga menggunakan fasilitas yang

ada pada 3ds max versi 2010 pada Geometry Stairs.

Page 40: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

29

4.3.2 Pembuatan Material

Material sangatlah penting dimana dengan material sebuah obyek dapat

terlihat lebih realistis. Apalagi teknik pembuatan gedung disini pintu, jendela dan

ornament lain tidak dibuat dengan teknik mengextrude sisi, melainkan

memasukkan material gambar. Selain pembuatan yang sedikit lebih simple, teknik

ini tidak akan memberatkan computer bahkan akan jauh memperingan computer

jika dibandingkan dengan teknik pembuatan ornament dengan cara di mengedit

setiap sisi.

Sebagai contoh material pada gedung rektorat. Terdapat 2 box yang

menggunakan material buatan, yaitu box utama (1) yang berisi gambar pintu,

jendela dan lubang angin. Sedangkan box yang depan (2) berisi jendela dan

sedikit ornament pada bagian atas.

Gambar 4.5 Material Buatan Pada Gedung Rektorat

Teknik pembuatan material pertama-tama harus mempunya acuan semua

sisi gedung yang diambil dari file 3ds max nya. Dengan fasilitas modifier Unwrap

UVW.

Page 41: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

30

Gambar 4.6 Unwrap UVW Gedung Rektorat

Printscrint jendela baru dan edit pada Photoshop. Gambar Unwrap UVW

berfungsi sebagai marker dimana kita meletakkan posisi pintu, jendela dan

ornament lain.

Gambar 4.7 Pembuatan Material Gedung Rektorat Tahap Awal

Page 42: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

31

Gambar 4.8 Pembuatan Material Gedung Rektorat Tahap Akhir

Material dimasukkan pada box yang sesuai. Sehingga gedung terlihat

mempunyai jendela dan pintu yang nyata.

Gambar 4.9 Gedung Rektorat

Page 43: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

32

4.3.3 Pembuatan animasi Flash

Pembuatan animasi flash meliputi flash halaman utama, tombol pada

interaktif peta dan informasi pada peta. Disini akan dijelaskan pembuatan animasi

informasi peta. Informasi peta adalah info-info yang akan muncul ketika gedung

di klik.

Info mempunyai animasi sederhana dengan background transparan dan

text yang berjalan dari atas kebawah.

Gambar 4.10 Pembuatan Animasi Flash Info

Page 44: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

33

4.3.4 Penggunaan Backsound

sound sangatlah penting dalam sebuah product multimedia, dimana dengan

sebuah backsound yang tepat akan membuat multimedia interaktif peta virtual ini

menjadi lebih menarik. Di sini menggunakan 2 backsound dengan format .mp3

yang didownload di hǴp ://www.sounddogs.com/.

4.3.5 Pembuatan Peta Virtual

Pembuatan peta virtual ini menggunakan software freeware Openspace 3D

Editor dimana obyek 3d (. Mesh) dan flash disatukan sehingga dapat berinteraksi.

Karena software OpenSpace hanya mengenal obyek 3d dengan extensi .mesh dan

di dalam 3ds max 2010 tidak terdapat exporter .mesh maka harus menginstal

plugin exporter .mesh.

Menggunakan exporter DFusion Exporter 3ds Max Setup 2010 karena

expordter ini lebih simple cara penggunaannya.

Gambar 4.11 Exporter Menggunakan DFusion

Pembuatan peta virtual ini menggabungkan file 3d, flash dan audio di

dalam software open space. Diatur sedemikian rupa sehingga pada peta terdapat

Page 45: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

34

fitur minimap, info gedung dan tombol lokasi. Pergerakan 4 arah titambah

jumping. Fitur real time akan membuat keadaan didalam peta virtual akan sama

dengan keadaan nyata dimana jika siang hari didalam peta juga siang hari, jika

malam didalam peta juga malam hari.

Gambar 4.12 Peta Virtual

Page 46: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

35

4.4 Evaluasi Aplikasi

1. Kelebihan Aplikasi

Kelebihan dari multimedia interaktif berupa peta virtual

Universitas Sebelas Maret berbasis 3 dimensi ini adalah:

a. Peta Universitas Sebelas Maret ditunjukkan secara 3 dimensi, sehingga

dapat dilihat dari berbagai sisi.

b. Universitas Sebelas Maret pada aplikasi peta virtual ini dapat dijelajahi

dengan menggunakan tombol arrow pada keyboard dan mouse.

c. Pengguna dapat melakukan interaksi di dalam peta virtual dimana

terdapat info setiap gedung dan fitur tombol lokasi dimana dengan

menekan tombol kamera akan diarahkan ke lokasi yang sudah

ditentukan.

2. Kelemahan Aplikasi

Kelemahan dari multimedia interaktif berupa peta virtual

Universitas Sebelas Maret berbasis 3 dimensi ini adalah:

a. Contour tanah belum sesuai dengan sebenarnya.

b. Aplikasi ini dapat berjalan normal pada PC (personal computer)

dengan spesifikasi minimum Pentium 4.

Page 47: PEMBUATAN MULTIMEDIA INTERAKTIF BERUPA PETA …... · ii HALAMAN PERSETUJUAN ... Photoshop CS4, 3D Studio Max 2010, Adobe Flash CS4, dan Open Space 3D Editor. ... 3. Browsing d. Analisis

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

36

BAB V

PENUTUP

5.1 Kesimpulan

Kesimpulan yang dapat diperoleh dari pembuatan aplikasi peta virtual

ini adalah :

1. Telah dibuat aplikasi peta virtual universitas sebelas maret.

2. Aplikasi ini memberikan informasi tentang fungsi gedung, jurusan-

jurusan yang terdapat dalam fakultas yang ada di dalam lingkup

universitas sebelas maret

5.2 Saran

Saran yang dapat diperoleh dari pembuatan aplikasi peta virtual

universitas sebelas maret ini adalah :

1. Pengembangan bangunan gedung, tempat parkir, dan fasilitas yang

lainnya.

2. Zoom tool dan rotasi sudut pandang, dimana kamera dapat melakukan

perbesaran pandangan dan rotasi sudut pandang agar pandangan kamera

bisa do rotate ke atas dan bawah.