Visualisasi 3 demensi struktur rangka pada manusia

(1)

SKRIPSI

VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA

MANUSIA

ANOM TRY PUTRANTO NIM : 206091004027

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

(2)

VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA

MANUSIA

SKRIPSI

Sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer

Pada Program Studi Teknik Informatika Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

Anom Try Putranto

NIM : 206091004027

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

(3)

(4)

(5)

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

Jakarta, September 2011

(6)

ABSTRAK

Anom Try Putranto, 206091004027. Visualisasi 3 Dimensi Struktur Rangka Pada Manusia. Di bawah bimbingan Yusuf Durrachman, M.Sc, MIT dan Elsy Rahajeng, MTI.

Teknologi multimedia merupakan salah satu metode yang digunakan sebagai media penyampaian informasi dan pembelajaran karena memberikan kemudahan bagi penggunanya. Struktur rangka tubuh manusia merupakan salah satu sistem dalam tubuh manusia yang cukup rumit. Untuk memahami struktur rangka tubuh manusia, dengan memanfaatkan teknologi informasi maka dibuat aplikasi visualisasi 3 dimensi struktur rangka pada manusia. Dengan menggunakan visualisasi 3 dimensi, radiografer dapat melihat dan mempelajari bagaimana struktur rangka manusia secara jelas. Dalam perancangan visualisasi 3 dimensi struktur rangka pada manusia ini menggunakan metode pengembangan multimedia menurut Vaughan (2004) dalam Binanto yaitu perencanaan, desain dan produksi, pengujian dan distribusi. Penulis juga melakukan studi pustaka dan wawancara untuk mendapatkan data dan informasi dari pihak rumah sakit. Aplikasi berbasis multimedia ini mengandung elemen-elemen multimedia yang dikombinasikan dengan teknik 3 dimensi sehingga objek terlihat lebih nyata dan lebih menarik. Aplikasi multimedia ini menjadi salah satu alternatif sarana pembelajaran yang berbeda dan mudah digunakan oleh penggunanya. Untuk pengembangan berikutnya penulis menyarankan agar objek 3 dimensi lebih detail lagi dan bagi pengguna untuk menggunakan spesifikasi komputer yang lebih tinggi agar untuk mendapatkan kelancaran kinerja dari aplikasi.

Kata kunci: Struktur rangka, Multimedia, 3 Dimensi, Visualisasi

Jumlah Halaman : V Bab + xvi Halaman + 126 Halaman + 80 Gambar + 11 Tabel + Daftar Pustaka + Lampiran

(7)

KATA PENGANTAR

Assalamu’alaikum Wr. Wb.

Dengan memanjatkan puji dan syukur kehadirat Allah SWT yang telah

memberikan Rahmat dan Hidayah-Nya hingga penulis dapat menyelesaikan dan

menyusun skripsi berjudul Visualisasi 3 struktur rangka pada manusia. Shalawat

serta salam senantiasa tercurahkan kepada Nabi Muhammad SAW, beserta

keluarga, sahabat serta orang-orang yang istiqomah mengemban risalahnya hingga

akhir zaman.

Dalam menyusun skripsi ini, penulis menyadari bahwa skripsi ini tidak

dapat terlaksana dengan baik tanpa bantuan dan bimbingan dari semua pihak.

Pada kesempatan ini, perkenankan mengucapkan terima kasih kepada :

1. Prof. Dr. Komarudin Hidayat, selaku Rektor Universitas Islam Negeri

Syarif Hidayatullah Jakarta, Dr. Ir. Syopiansyah Jaya Putra, M.Sis, selaku

Dekan Fakultas Sains dan Teknologi.

2. Yusuf Durrachman, M.Sc, MIT selaku ketua dan Viva Arifin, MMSI

selaku Sekretaris Program Studi Teknik Informatika, Fakultas Sains dan

Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta.

3. Yusuf Durrachman, M.Sc, MIT selaku Dosen Pembimbing I dan Elsy

Rahajeng selaku Dosen Pembimbing II yang telah memberikan

kesempatan, waktu, kesabaran dan perhatiannya untuk membimbing dalam

menyelesaikan skripsi ini.

4. Bakri La Katjong, MT, M.Kom selaku Dosen Penguji I dan Arini, MT

(8)

5. Keluarga tercinta Bapak dan Mama , para kakak dan sodara tercinta yang

telah memberikan perhatian, do’a, kesabaran menunggu penyelesaian

skripsi ini. Serta dukungannya baik materi ataupun non materi.

6. Terima kasih kepada Melia Rizka yang telah membantu dan meminjamkan

Laptopnya untuk bimbingan.

7. Rekan-rekan TI 2006 : Hendry, Ardiyan, Sari, Vera, Riski, Luluk, Iche,

Joa, Kosasih. Dan semua teman-teman yang tidak bisa disebutkan satu

persatu, terima kasih atas segala motivasi dan dukungannya.

Penulis berharap semoga penulisan skripsi ini dapat memberikan manfaat

bagi pembaca dan penulis sendiri, serta pihak-pihak lain yang berkepentingan

dengan laporan ini. Akhir kata kepada semua pihak yang telah membantu

terwujudnya tugas akhir ini semoga Allah SWT selalu melimpahkan Rahmat dan

Karunia-Nya. Amin.

Jakarta September 2011

(9)

DAFTAR ISI

ABSTRAK

KATA PENGANTAR i

DAFTAR ISI iv

DAFTAR GAMBAR vii

DAFTAR TABEL xi

DAFTAR LAMPIRAN xii

BAB I PENDAHULUAN

1.1 Latar Belakang Masalah 1

1.2 Perumusan Masalah 2

1.3 Batasan Masalah 2

1.4 Tujuan Penelitian 3

1.5 Manfaat Penelitian 3

1.6 Metode Penelitian 4

1.6.1 Metode Pengumpulan Data 4

1.6.2 Metode Pengembangan Aplikasi Multimedia 5

1.7 Sistematika Penulisan 6

BAB II LANDASAN TEORI

2.1 Visualisasi 8

(10)

2.2.1 Sistem Koordinat 9

2.2.2 2 Dimensi 10

2.2.3 3 Dimensi 12

2.2.4 Permodelan 3D 15

2.3 Multimedia 18

2.3.1 Multimedia Interaktif 18

2.3.1 Kelebihan Multimedia 19

2.3.2 Elemen-Elemen Multimedia 20

2.3.3 Pengunaan Multimedia 29

2.4 MetodePengembangan Multimedia 31

2.4.1 Perancanaan 32

2.4.2 Desain dan Produksi 32

2.4.3 Pengujian 41

2.4.4 Distribusi 41

2.5 Black-box 41

2.6 Perangkat LunakAuthoring 42

2.6.1Adobe FlashCS3 42

2.6.2Adobe PhotoshopCS3 45

2.6.3Macromedia Director MX 48

2.6.4 3D Max 2009 50

2.6.5 Audacity 51

2.7 Struktur Rangka Pada Manusia 54

(11)

2.7.2 Tulang Dada 57

2.7.3 Ruas-Ruas Tulang Belakang 59

2.7.4Skeleton Apendikular 60

2.7.5 Tulang Gelang Bahu 63

2.7.6 Gelang Panggul 64

2.8 Studi Sejenis 65

BAB III METODOLOGI PENELITIAN

3.1 Metode Pengumpulan Data 70

3.1.1 Studi Kepustakaan 70

3.2 Studi Lapangan 71

3.2.2 Wawancara 71

3.2.3 Kuisioner 71

3.2 Metode Pengembangan Multimedia 71

3.2.1 Perencanaan 72

3.2.1 Desain dan Produksi 72

3.2.1 Pengujian 73

3.2.1 Distribusi 73

BAB IV ANALISIS DAN PEMBAHASAN

4.1 Perencanaan 74

4.2 Desain dan Produksi 76

(12)

4.2.2Flowchart 83

4.2.3 Perancangan Struktur Navigasi 91

4.2.4 Perancangan State Transition Diagram(STD) 92

4.2.5 Mendesain Antarmuka (Interface) 97

4.2.6 Pengumpulan / Pencarian Isi 104

4.2.7 Produksi 105

4.3 Pengujian 119

4.4 Distribusi 125

BAB V PENUTUP

5.1 Kesimpulan 126

5.2 Saran 126

(13)

DAFTAR GAMBAR

Gambar 2.1 Sistem Koordinat Kartesian 9

Gambar 2.2 Proses Translasi 2D 10

Gambar 2.3 Proses Scaling2D 11

Gambar 2.4 Proses Rotasi 2D 11

Gambar 2.5 Proses Translasi 3D 12

Gambar 2.6 Rotasi Terhadap Sumbu X 13

Gambar 2.7 Rotasi Terhadap Sumbu Y 13

Gambar 2.8 Rotasi Terhadap Sumbu Z 14

Gambar 2.9 Proses Penskalaan 3D 14

Gambar 2.10 Polygon Modeling 16

Gambar 2.11 NURBS Modeling 16

Gambar 2.12Teknik Pencahayaan 18

Gambar 2.13 Anatomi Bentuk Font 20

Gambar 2.14 Gambar Bitmap 23

Gambar 2.15 Gambar Vektor 23

Gambar 2.16 Gambar Animasi 25

Gambar 2.17Siklus Pengembangan Aplikasi Multimedia 31

Gambar 2.18 Contoh Storyboard 33

Gambar 2.19 Struktur Navigasi Linier 33

Gambar 2.20 Struktur Navigasi Hierarkis 34

(14)

Gambar 2.22 Struktur Navigasi Komposit 35

Gambar 2.23 Gambar STD 40

Gambar 2.24 Tampilan Adobe FlashCS3 43

Gambar 2.25 Tampilan Adobe PhotoshopCS3 45

Gambar 2.26 Tool-Toolpada Adobe Photoshop CS3 46 Gambar 2.27 Tampilan Macromedia Director MX2004 49

Gambar 2.28Tampilan 3D Max 2009 50

Gambar 2.29Tampilan Audacity 52

Gambar 2.30Tool Audacity 52

Gambar 2.31Anatomi Rangka Manusia 54

Gambar 2.32Tulang Tengkorang Dari Depan 55

Gambar 2.33Tulang Tengkorak Dari Samping 56

Gambar 2.34Tulang Dada/ Rusuk 57

Gambar 2.35Tulang Belakang 60

Gambar 2.36Tulang Anggota Gerak Atas 61

Gambar 2.37 Tulang Anggota Gerak Bawah 63

Gambar 2.38 Gelang Panggul 65

Gambar 3.1 Siklus Pengembangan Aplikasi Multimedia 72

Gambar 4.1 Rancangan Flowchart Intro 83

Gambar 4.2 Rancangan Flowchart Menu Utama 84

Gambar 4.3 FlowchartMenu Materi 85

(15)

Gambar 4.6 FlowchartSub Menu Materi Tulang Belakang 88 Gambar 4.7 FlowchartSub Menu Materi Ektremitas Atas 89 Gambar 4.8 FlowchartSub Menu Materi Ektremitas Bawah 90

Gambar 4.9 Rancangan Struktur navigasi 91

Gambar 4.10 Rancangan STD Intro 92

Gambar 4.11 Rancangan STD Menu Utama 92

Gambar 4.12 Rancangan Menu Visualisasi 3D 93

Gambar 4.13 Rancangan STD Menu Materi 93

Gambar 4.14 Rancangan Menu Tengkorak 94

Gambar 4.15 Rancangan Menu Rusuk 94

Gambar 4.16 Rancangan Menu Tulang Belakang 95

Gambar 4.17 Rancangan Menu Ekstremitas Atas 95 Gambar 4.18 Rancangan Menu Ekstremitas Bawah 96

Gambar 4.19 Rancangan STD Menu Bantuan 96

Gambar 4.20 Rancangan STD Menu Profil 97

Gambar 4.21 Rancangan Pembukaan Program 98

Gambar 4.22 Rancangan Menu Utama 99

Gambar 4.23 Rancangan Menu Visualisasi 3 Dimensi 100

Gambar 4.24 Rancangan Menu Materi 101

Gambar 4.25 Rancangan Sub Menu Materi 102

Gambar 4.26 Rancangan Menu Bantuan 103

Gambar 4.27 Rancangan Menu Penulis 103

(16)

Gambar 4.29 Tampilan Button 108 Gambar 4.30 Tampilan Kerja Objek Saat Memasukan Objek 110 Gambar 4.31 Tampilan Objek Setelah Dibentuk 110

Gambar 4.32 Objek 3 Dimensi Struktur Rangka 111

Gambar 4.33Tampilan Material 112

Gambar 4.34 Tampilan Export Shockwave 3D 113

Gambar 4.35 Tampilan Shockwave 3DSetelah Diexport 113

Gambar 4.36Time Configuration 114

Gambar 4.37 Auto Key 115

Gambar 4.38 Pengaturan Frame Pada Objek 115

Gambar 4.39 Render setup 116

Gambar 4.40 Penyimpanan File 116

(17)

DAFTAR TABEL

Tabel 2.1 Format Gambar Digital 23

Tabel 2.2 Flow Direction Symbols 36

Tabel 2.3 Processing symbols 37

Tabel 2.4 Input/ Output Symbol 38

Tabel 2.5 Tool-Toolpada Audacity 52

Tabel 2.6 Audio Control Buttons 53

Tabel 4.1 Deskripsi Konsep 75

Tabel 4.2 Rencana Kerja Pembuatan Proyek Skripsi 76

Tabel 4.3 Storyboard 77

Tabel 4.4 Tabel Fileyang Digunakan 104

(18)

DAFTAR LAMPIRAN

1. Hasil wawancara L1

2. InterfaceAplikasi L2

3. Source Code L13

(19)

1

BAB 1 PENDAHULUAN

1.1 Latar Belakang Masalah

Perkembangan dunia teknologi informasi saat ini semakin pesat dan

merambah ke berbagai sisi kehidupan manusia untuk dapat berperan aktif dalam

teknologi informasi, tidak terkecuali pada pelajar yang memanfaatkan penggunaan

perangkat lunak multimedia dalam proses belajar mengajar akan lebih

meningkatkan efisien, menigkatkan motivasi, memfasilitasi belajar eksperimental,

konsisten dengan belajar yang berpusat pada siswa atau mahasiswa dan mampu

belajar lebih baik. (Suyanto, 2003;340)

Dalam radiologi, seorang radiografer penting sekali memahami struktur

rangka. Sering kali pelajar radiografer kesulitan dalam memahaminya, karena

memang struktur rangka manusia termasuk ke dalam salah satu sistem dalam

tubuh manusia yang cukup rumit untuk dipelajari. Untuk mudahkan radiografer

memahami dan mempelajari struktur rangka dalam tubuh manusia. Dengan

memanfaatkan teknologi informasi ini, maka dibuat aplikasi visualisasi struktur

rangka manusia menggunakan 3 dimensi. Dengan menggunakan visualisasi 3

dimensi, radiografer dapat melihat dan mempelajari bagaimana struktur tulang

manusia secara jelas.

Atas dasar pemikiran tersebut penulis berusaha untuk menghadirkan

sebuah aplikasi pembelajaran multimedia yang berbentuk perangkat ajar untuk

(20)

yang telah didesain sedemikian rupa untuk mempermudah radiografer dalam

menggunakan aplikasi dan memudahkan dalam pemahaman tentang struktur

rangka manusia. Maka atas dasar penelitian tersebut maka judul yang diangkat

adalah “ Visualisasi 3 dimensi Struktur Rangka Pada Manusia”.

1.2 Perumusan Masalah

Berdasarkan permasalahan yang telah dijabarkan diatas, maka dapat

dirumuskan hal-hal sebagai berikut:

1. Bagaimana pembuatan aplikasi 3 dimensi struktur rangka manusia ini

agar mudah digunakan oleh radiografer.

2. Apa keuntungan dari penggunaan 3 dimensi dalam aplikasi visualisasi 3

dimensi struktur rangka bagi radiografer.

1.3 Batasan Masalah

Agar pembahasan dalam penelitian ini tidak terlalu luas, namun dapat

mencapai hasil yang optimal, maka penulis akan membatasi ruang lingkup

pembahasan sebagai berikut:

1. Informasi berisi susunan rangka pada manusia dalam visualisasi 3D.

(21)

3. Referensi berasal dari bukuHuman Anatomykarangan Van De Graaff, Skeletal System: Gross Anatomy karangan Rod Seeley, dan Essentials of Anatomy and Physiologykarangan Valerie C Scanlon.

4. Pada video menggunakan teknik pencahayaan fill lightdan key light.

1.4 Tujuan Penelitian

1. Tujuan dari penelitian adalah membuat aplikasi Visualisasi 3 dimensi

struktur Rangka Pada Manusia.

2. Membuat aplikasi pembelajaran bagi radiografer yang sedang

mempelajari struktur rangka manusia.

1.5 Manfaat Penelitian

Manfaat dari penelitian yang dilakukan ini adalah:

Bagi Penulis :

1. Mengetahui penerapan pemodelan 3 Dimensi dalam aplikasi berbasis

multimedia.

2. Menjadi referensi pembuatan aplikasi Visualisasi 3 dimensi struktur

Rangka Pada Manusia.

3. Mengetahui visualisasi Struktur rangka dengan format 3 dimensi.

Bagi Universitas

1. Menambah koleksi hasil penulisan.

2. Bahan pembelajaran bagi mahasiswa yang akan melaksanakan Skripsi

(22)

Bagi Pihak Lain

1. Sebagai alat pembelajaran yang interaktif dan edukatif.

2. Membantu menambah wawasan tentang struktur rangka manusia.

3. Membantu hemat waktu dan biaya.

1.6 Metode Penelitian

Dalam penyusunan skripsi ini, diperlukan data-data serta informasi yang

cukup banyak dan sulit didapatkan sebagai bahan yang dapat mendukung

kebenaran materi uraian dan pembahasan, oleh karena itu sebelum menyusun

skripsi ini, dalam persiapannya terlebih dahulu dilakukan penelitian untuk

menjaring data serta informasi atau bahan materi yang diperlukan.

Adapun metode penelitian yang dilakukan adalah sebagai berikut:

1.6.1. Metode Pengumpulan Data 1. Studi Kepustakaan

Dilakukan dengan cara membaca dan mempelajari buku-buku yang

mendukung dengan topik yang akan dibahas dalam penyusunan skripsi

ini, selain itu penulis juga mengumpulkan data dari situs-situs internet

yang berhubungan dengan skripsi penulis.

2. Studi Lapangan

Penulis mengumpulkan data dengan mengadakan peninjauan langsung

untuk memperoleh informasi tentang perumusan yang dibahas

(23)

a. Kuisioner

Kuisioner adalah cara pengambilan data berupa keterangan-keterangan

yang diperoleh dengan mengisi daftar pertanyaan, dapat dilihat dari

segi siapa yang mengisi (menulis isian) daftar pertanyaan tersebut

dimana isi dari kuisioner adalah fakta-fakta yang di anggap dikuasai

oleh reponden. (Nazir, 2005;203)

b. Wawancara

Wawancara akan dilakukan oleh Kasubag Radiologi di RS setia mitra

dengan guna memenuhi informasi dan materi yang akan digunakan

dalam implementasi sistem.

1.6.2. Metode Pengembangan Aplikasi Multimedia

Metode yang dipakai penulis dalam membuat aplikasi ini adalah

metodologi pengembangan multimedia. Salah satunya adalah menurut Tay

Vaughan (Dalam Binanto, 2010), yang berpendapat bahwa metodologi

pengembangan multimedia terdiri dari 4 tahapan, yaitu perencanaan, desain dan

produksi, pengujian, distribusi.

1. Perencanaan

Tahap ini akan merencanakan seluruh proses identifikasi kebutuhan dan

tujuan, dimulai dengan gagasan pertama dan diakhiri dengan

penyelesaian dan pengiriman produk yang sudah jadi.

2. Design dan Produksi

Design adalah tahap membuat spesifikasi mengenai arsitektur program,

(24)

merupakan tahap ketika proyek multimedia benar-benar direnderuntuk menghasilkan suatu produk.

3. Pengujian

Pengujian dilakukan untuk memeriksa dan memastikan bahwa program

yang dibuat sudah benar-benar sesuai dengan tujuan proyek dan sesuai

dengan keperluan.

4. Disribusi

Tahapan dimana aplikasi disimpan dalam suatu media penyimpanan.

Pada tahap ini jika media penyimpanan tidak cukup untuk menampung

aplikasinya, maka dilakukan kompresi terhadap aplikasi tersebut, dan

didistribusikan ke pengguna.

1.7 Sistematika Penulisan

Dalam penelitian ini pembahasan terbagi dalam lima bab yang secara

singkat akan diuraikan sebagai berikut:

BAB 1 PENDAHULUAN

Dalam bab ini akan dibahas mengenai latar belakang penulisan

skripsi, batasan masalah, tujuan dan manfaat, metode penelitian

dan sistematika penulisan yang merupakan gambaran menyeluruh

(25)

BAB 2 LANDASAN TEORI

Dalam bab ini akan dibahas mengenai berbagai teori yang

mendasari analisis permasalahan dan berhubungan dengan topik

yang dibahas.

BAB 3 METODE PENELITIAN

Bab ini membahas mengenai metode penelitian yang digunakan

dalam mengembangkan aplikasi multimedia.

BAB 4 ANALISA, PERANCANGAN DAN IMPLEMENTASI

Pada Bab ini membahas mengenai hasil dari analisa, perancangan,

impelementasi sesuai dengan metode yang dilakukan pada sistem

yang dibuat.

BAB 5 PENUTUP

Bab ini menguraikan tentang kesimpulan dari hasil penelitian yang

didapat dan juga saran yang dapat digunakan untuk pengembangan

(26)

8

BAB II

LANDASAN TEORI

2.1 Visualisasi

Visualisasi adalah rekayasa dalam pembuatan gambar, diagram atau

animasi untuk penampilan suatu informasi. Secara umum, visualisasi dalam

bentuk gambar baik yang bersifat abstrak maupun nyata telah dikenal sejak awal

dari peradaban manusia. Contoh dari hal ini meliputi lukisan di dinding-dinding

gua dari manusia purba, bentuk huruf hiroglip Mesir, sistem geometri Yunani, dan

teknik pelukisan dari Leonardo da Vinci untuk tujuan rekayasa dan ilmiah, dll.

(Herbert and James, 1998)

Pada saat ini visualisasi telah berkembang dan banyak dipakai untuk

keperluan ilmu pengetahuan, rekayasa, visualisasi disain produk, pendidikan,

multimedia interaktif, kedokteran, dll. Pemakaian dari grafika komputer

merupakan perkembangan penting dalam dunia visualisasi, setelah ditemukannya

teknik garis perspektif pada zaman Renaissance. Perkembangan bidang animasi

juga telah membantu banyak dalam bidang visualisasi yang lebih kompleks dan

canggih.

2.2 Grafika Komputer

Menurut Janner (2007) Grafika komputer pada dasarnya adalah suatu

(27)

membangkitkan, menyimpan, dan memanipulasi gambar model suatu objek

menggunakan komputer.

2.2.1 Sistem Koordinat

Dalam dunia nyata, kita mengenal adanya sistem koordinat kartesian yang

digunakan untuk membedakan lokasi atau posisi sembarang titik atau objek yang

lain. Dalam sistem tersebut dikenal sistem koordinat dua dimensi dan tiga

dimensi.

Dalam sistem koordinat kartesian dua dimensi, lokasi setiap titik ditentukan

oleh besaran. Jika digambarkan, nilai dua besaran tersebut akan membentuk suatu

sumbu koordinat mendatar (sumbu X) dan tegak (sumbu Y). Sedangkan, dalam

sistem koordinat tiga dimensi selain terdapat sumbu X dan sumbu Y terdapat satu

sumbu lain, yang arahnya tegak lurus dengan sumbu X dan sekaligus tegak lurus

dengan sumbu Y sehingga lebih tepat bila dikatakan sumbu tersebut tegak lurus

(menembus) bidang datar dan disebut sumbu Z.

(28)

2.2.2 2 Dimensi

Gambar 2 dimensi

dan sumbu Y, atau sumbu

adalah bahwa gambar yang

“mati”. Artinya, tidak dilakukan

pada objek maupun pada sistem koord

Transformasi 2 dimensi:

1) Translasi adalah

Gambar 2.

2) Scalingadalah adalah perpindahan jarak titik P’ adalah m kali titik P

dimensi memiliki karakteristik hanya memperlihatkan

atau sumbu koordinat kartesius dua dimensi. Karakteristik

gambar yang dihasilkan seolah-olah hanya merupakan

tidak dilakukan manipulasi atau pengoperasian tertentu,

objek maupun pada sistem koordinatnya. (Janner, 2007)

ormasi 2 dimensi:

Translasi adalah perpindahan obyek dari titik P ke titik P’ secara linier.

Gambar 2.2Proses translasi 2D (Basuki, 2009)

adalah perpindahan obyek dari titik P ke titik P’, dimana

titik P’ adalah m kali titik P.

memperlihatkan sumbu X

Karakteristik kedua

merupakan gambar

n tertentu, baik

ri titik P ke titik P’ secara linier.

(29)

Gambar 2.

3) Rotasi adalah perpindahan

pemindahan berputa

Gambar 2.4

Gambar 2.3Proses Scaling2D (Basuki, 2009)

perpindahan obyek dari titik P ke titik P’, yang n berputar sebesar sudut .

Gambar 2.4Proses Rotasi 2D (Basuki, 2009)

(30)

2.2.3 3 Dimensi

3 dimensi berbeda dengan 2 dimensi yang memperlihatkan sumbu X dan

sumbu Y Obyek. 3 dimensi merupakan sekumpulan titik-titik 3-D (x,y,z) yang

membentuk luasan-luasan yang digabungkan menjadi satu kesatuan.

Terapan-terapan 3 dimensi berbeda dengan Terapan-terapan 2 dimensi, tidak hanya karena

penambahan dimensi dari dua menjadi tiga, tetapi lebih utama adalah cara

menampilkan suatu relita dari objek yang sebenarnya ke layar tampilan. (Janner,

2007)

Macam-macam transformasi 3 dimensi sebagai berikut:

1) Translasi

Menurut Basuki (Grafik 3D, 2009) translasi adalah proses untuk

memindahkan obyek ke arah sumbu X, sumbu Y dan sumbu Z sebesar

(dx,dy,dz) Matrik transformasi dari proses translasi 3 dimensi seperti

matrik translasi 2 dimensi dengan menambahkan nilai z, adalah:

(31)

2) Rotasi

Pemutaran atau rotasi 3 dimensi lebih rumit dibandingkan pemutaran 2

dimensi, tetapi pada dasarnya sama yaitu bahwa pemutaran bisa

dilaksanakan dengan memilih salah satu sumbu koordinasi sebagai sumbu

putar. (Janner, 2007)



y

z x

Gambar 2.6Rotasi terhadap sumbu X

y

z

x

[image:31.612.145.538.56.440.2]



(32)

y

z



x

Gambar 2.8Rotasi terhadap sumbu Z

3) Penskalaan

Proses pembesaran atau perkecil gambar. Penskalaan bisa dilaksanakan ke

arah x saja, ke arah y saja, ke arah z saja, atau kombinasi ketiga-tiganya.

Diperkecil

[image:32.612.150.540.56.400.2]

Diperbesar

(33)

2.2.4 Permodelan 3D

Pemodelan adalah membentuk suatu benda-benda atau obyek. Membuat

dan mendesain obyek tersebut sehingga terlihat seperti hidup. Sesuai dengan

obyek dan basisnya, proses ini secara keseluruhan dikerjakan di komputer.

Melalui konsep dan proses desain, keseluruhan obyek bisa diperlihatkan secara 3

dimensi, sehingga banyak yang menyebut hasil ini sebagai pemodelan 3 dimensi

(3D modelling). (Nalwan, 1998)

Ada beberapa aspek yang harus dipertimbangkan bila membangun model

obyek, kesemuanya memberi kontribusi pada kualitas hasil akhir. Hal-hal tersebut

meliputi metode untuk mendapatkan atau membuat data yang mendeskripsikan

obyek, tujuan dari model, tingkat kerumitan, perhitungan biaya, kesesuaian dan

kenyamanan, serta kemudahan manipulasi model.

Proses pemodelan 3D membutuhkan perancangan yang dibagi dengan

beberapa tahapan untuk pembentukannya, antara lain:

a. Obyek apa yang ingin dibentuk sebagai obyek dasar

b. Metode pemodelan obyek 3D

Teknik Polygonal modeling, Gambar 2.10 adalah teknik membuat model dengan memakai objek-objek geometry dasar yang kemudian dikembangkan menjadi objek model yang lebih kompleks. Umumnya

(34)

Gambar 2.10Polygon Modeling

Teknik NURBS modeling, Gambar 2.11 adalah teknik membuat model dengan memakai garis-garis yang dibuat seperti rangka objek yang

[image:34.612.149.539.53.661.2]

diinginkan kemudian diberi surface(bentuk permukaan).

(35)

c. Pencahayaan dan animasi gerakan obyek sesuai dengan urutan proses yang

akan dilakukan.

Ada 3 teknik pencahayaan pada 3 dimensi seperti terletak pada gambar

2.12 yaitu:

1. Lampu utama (Key light)

Key Light merupakan pencahayaan utama dari gambar kita, dan merepresentasikan bagian paling terang sekaligus mendefiniskan bayangan

pada gambar. Key Light juga merepresentasikan pencahayaan paling dominan seperti matahari dan lampu interior. Meski demikian

peletakannya tidak harus persis tepat pada sumber pencahayaan yang kita

inginkan.

2. Lampu pengisi (Fill Light)

Fungsi fill lightadalah melembutkan sekaligus mengisi bagian gelap yang diciptakan oleh key light. Fill Lightjuga berfungsi menciptakan kesan tiga dimensi.

3. Cahaya latar (Back Light)

Back Light berfungsi untuk menciptakan pemisahan antara objek utama dengan objek pendukung. Dengan diletakkan pada bagian belakang benda

back light menciptakan "garis pemisah" antara objek utama dengan latar

(36)

[image:36.612.139.538.54.426.2]

Gambar 2.12Teknik Pencahayaan

2.3 Multimedia

Multimedia adalah pemanfaatan komputer untuk membuat dan

menggabungkan teks, grafik, audio, gambar bergerak (video dan animasi) dengan

menggabungkanlinkdantoolyang memungkinkan pemakai melakukan navigasi, berinteraksi, berkreasi, dan berkomunikasi. (Suyanto, 2003)

Menurut Vaughan (2004) multimedia merupakan kombinasi text, seni,

suara, gambar, animasi dan video yang disampaikan dengan komputer atau di

manipulasi secara digital dan dapat disampaikan atau dikontrol secara interaktif.

2.3.1 Multimedia Interaktif

Menurut Sutopo (2003) media presentasi pada umumnya tidak dilengkapi

alat untuk mengontrol yang dilakukan oleh user. Presentasi berjalan sekuensial

(37)

audiens lebih dari satu orang. Tetapi bila menggunakan satu komputer unutk satu

orang, maka diperlukan untuk dengan keyboard, mouse, atau alat input lainnya. Hal ini disebut interaktif, dan multimedia yang dapat menangani interaktif user

disebut multimedia interaktif atau non-linier multimedia.

Pemanfaatan multimedia sangatlah banyak diantaranya untuk: media

pembelajaran, game, film, medis, militer, bisnis, desain, arsitektur, olahraga, hobi,

iklan/promosi, dll. (Wahono, 2007). Bila pengguna mendapatkan keleluasaan

dalam mengontrol multimedia tersebut, maka hal ini disebut multimedia interaktif. Menurut Thorn (2006) mengajukan enam kriteria untuk menilai

multimedia interaktif, yaitu :

a. Kriteria pertama adalah kemudahan navigasi.

b. Kriteria kedua adalah kandungan kognisi.

c. Kriteria ketiga adalah presentasi informasi.

d. Kriteria keempat adalah integrasi media.

e. Kriteria kelima adalah artistik dan estetika dan

f. Kriteria penilaian yang terakhir adalah fungsi secara keseluruhan.

2.3.2 Kelebihan Multimedia

a. Meningkatkan aliran gagasan dan informasi.

b. Merupakan cara yang kaya untuk mengomunikasikan sesuatu.

c. Mendorong partisipasi, keterlibatan, dan eksplarasi pemakai.

d. Menstimulasi panca indra.

(38)

2.3.3 Elemen-Elemen Multimedia

Untuk membuat aplikasi berbasis multimedia dibutuhkan elemen-elemen

yang berkaitan dengan aplikasi yang akan dibuat, yaitu:

a. Teks

Teks merupakan dasar dari pengolahan kata dan informasi berbasis

multimedia. Dipresentasikan dengan jenis huruf yang beragam agar

harmonis dengan elemen multimedia lainnya. Sebenarnya huruf dapat

ditransformasikan menjadi suatu karya seni yaitu dengan mengolah bentuk

kata atau blok tulisan sesuai fungsi masing-masing sehingga kemudian

tercipta suatu bentuk, tekstur yang kemudian dikomunikasikan sebagai

[image:38.612.147.535.137.504.2]

pesan, Mood, atau berupa gambar hias. (Binanto, 2010)

Gambar 2.13Anatomi Bentuk Huruf Jenis-jenis teks:

1) Printable Text (Teks Tercetak), adalah teks hasil dari cetakan Media pencetak yg biasanya tercetak di kertas.

(39)

3) Scan Text (Teks hasil scan), adalah teks yang dihasilkan oleh mesin scan. Ada 3 jenis scanner yang biasa digunakan Flatbed, Handheld, Sheet-fed.

4) Hypertext, adalah teks yang mengacu ke proses link untuk menampilkan dokumen yang berisi referensi-silang otomatis ke

dokumen lainnya yang disebut hiperlink. Memilih hiperlink menyebabkan komputer menampilkan dokumen yang terhubungkan

dalam waktu sangat singkat. Sebuah dokumen dapat dibuat

secara statik atau dinamik. Oleh karena itu, sebuah sistem

hiperteks yang dikonstruksi dengan baik dapat menangani,

menggunakan atau melebihi banyak interface pengguna lainnya seperti menu dan baris perintah, dan dapat digunakan untuk

mengakses kedua dokumen referensi-silang yang dikumpulkan

secara statik dan aplikasi interaktif. Dokumen dan aplikasi terdapat

secara lokal atau dari mana pun dia berada dengan bantuan

jaringan komputer seperti internet. Implementasi paling terkenal dari

hiperteks adalah World Wide Web. Format-format teks:

1) Format paragraph/ format paragraf rata kiri, rata kanan, Centre, Justify.

2) Text effect/ efek pada teks Shadow, Font color, Emboss.

(40)

4) Font Type/ tipe huruf dan cita rasa jenis huruf, Arialmemiliki cita rasa Friendly/ bersahabat, Times New Roman memiliki cita rasa informative, Impact memiliki cita rasa Trendy, Bodoni memiliki cita rasa nostalgia, Bookmanmemiliki cita rasa tradisional, New York memiliki cita rasa klasik, Mistramemiliki cita rasa Playful, Helveticamemiliki cita rasa agresif.

b. Gambar atau Grafik

Gambar atau grafik berarti still image seperti foto dan gambar. Manusia sangat berorientasi pada visual dan gambar merupakan sarana

yang sangat baik untuk menyajikan informasi. Gambar yang digunakan

dalam multimedia dapat berupa gambar sintesis, artinya gambar yang

dibuat dengan program editor gambar, dapat juga berupa gambar hasil

scanning dari foto atau lukisan tangan, atau dapat pula berupa gabungan antara hasil scanning dan editing.

Grafis dibedakan menjadi 2 bagian, yaitu:

1) Citra Diam (gambar) Bitmap

Gambar merupakan saranan yang sangat baik untuk menyajikan

informasi. Bitmap adalah representasi spasial dari objek yang

(41)

Gambar 2.14Gambar Bitmap 2) Grafik Vektor

Vektor merupakan representasi spasial dari objek yang disusun dari

bangun-bangun grafis seperti garis, persegi panjang, elips, segi

banyak dan sebagainya. Yang ditempatkan secara matematis dengan

koordinat, ukuran, ketebalan sisi dan pola pengisian pada bidang.

Vektor baik untuk menyimpan kartun dan gambar-gambar yang

tidak fotorealistik.

Gambar 2.15Gambar Vektor (

Tabel 2.1 merupakan beberapa jenis format digital untuk gambar/ grafik

yang dibuat.

Tabel 2.1Format Gambar Digital

NO JENIS

FORMAT PENJELASAN

1 Bitmap (.BMP)

representasi dari citra grafis yang terdiri dari susunan titik yang tersimpan di memori komputer. Nilai setiap titik diawali oleh satu bit data untuk gambar hitam putih, atau lebih bagi gambar berwarna.

(42)

2 JPEG (Joint Fotogrphic Expert Group)

Format JPG merupakan format yang paling terkenal sekarang ini. Hal ini karena sifatnya yang berukuran kecil (hanya puluhan/ratusan KB saja), dan bersifat portable.

3 GIF (Graphic Interchange Format)

Format GIF ini berukuran kecil dan mendukung gambar yang terdiri dari banyak frame sehingga bisa disebut sebagai gambar animasi (gambar bergerak).

4 Portable Network Graphics (.PNG)

Format yang standar dan sering digunakan di internet untuk menampilkan gambar atau pengiriman gambar. Ukuran file ini cukup kecil dan setara dengan ukuran gif dengan kualitas yang bagus. Namun tidak mendukung animasi (gambar bergerak).

5 PSD

(Photoshop Document)

Format fileini merupakan format asli dokumen Adobe Photoshop. Format ini mampu menyimpan informasi layerdan alpha channelyang terdapat pada sebuah gambar, sehingga suatu saat dapat dibuka kembali. Format ini juga mampu menyimpan gambar dalam beberapa mode warna yang disediakan Photoshopdan dapat menyimpan dengan format fileini jika ingin mengeditnya kembali.

6 AI (Adobe Illustrator Artwork)

Format file ini merupakan format asli dari adobe Illustrator. Berfungsi sama dengan PSD tetapi file AI dapat mengolah membuat gambar menjadi vektor lebih baik di bandingkan PSD.

c. Animasi

Animasi adalah penayangan frame-frame gambar secara cepat untuk menghasilkan kesan gerakan. Teks dan gambar memiliki

keterbatasan dalam menyampaikan suatu informasi, dengan menggunakan

animasi dapat membantu menyajikan informasi yang sulit disampaikan

dalam bentuk teks atau gambar saja. (Sutopo, 2002). Frame merupakan

(43)

[image:43.612.146.539.55.451.2]

Gambar 2.16Gambar Animasi (Sutopo, 2002) Jenis-jenis animasi menurut Suyanto:

1) Animasi Sel, merupakan material yang digunakan untuk membuat film

gambar bergerak pada saat awal

2) Animasi Frame, adalah bentuk animasi yang paling sederhana.

Diumpamakan sebuah buku yang mempunyai gambarberseri di tepi

halaman berurutan.

3) Animasi Sprite, yaitu animasi objek yang diletakan dan dianimasikan

pada bagian puncak grafik dengan latar belakang diam.

4) Animasi Lintasan, adalah animasi dari objek yang bergerak sepanjang

garis kurva yang ditentukan oleh lintasan.

5) Animasi Spline, adalah animasi yang menggunakan representasi

matematis kurva. Bila objek bergerak, biasanya tidak mengikuti garis

lurus, misalnya bentuk kurva.

6) Animasi Vektor, merupakan garis yang memiliki ujung-pangkal, arah,

dan panjang. Animasi vektor serupa dengan animasi sprite. Animasi

sprite menggunakan bitmap untuk sprite, animasi vektor menggunakan

rumus matematika untuk menggambarkan sprite.

7) Animasi Karakter, merupakan cabang khusus animasi. Animasi

(44)

8) Morphing, yaitu mengubah satu bentuk menjadi bentuk lain dengan

menampilkan serangkaian frame yang menciptakan gerakan halus

begitu bentuk pertama mengubah dirinya menjadi bentuk yang lain.

Teknik-teknik dalam animasi:

1) Frame by frame, merupakan teknik merangkai urutan gambar yang

diletakkan pada sejumlah frame. Pada dasarnya pembuatan animasi

frame-by-frame memerlukan minimal dua frame. Jika pada frame 1

diletakkan objek lingkaran warna merah, pada frame 2 diletakkan

objek lingkaran warna kuning, maka pada saat movie dimainkan

akantampil animasi warna kelip merah dan kuning.

2) Masking, digunakan untuk menampilkan objek yang berada dalam

layer yang dimaksud berdasarkan area yang bersimpangan dengan

objek yang berada dalam layer mask.

3) Motion Guide, animasi pergeseran posisi obyek dengan menentukan

garis lintasannya (baik lurus, melengkung, atau bebas)

d. Suara atau Audio

Suara atau audio adalah fenomena fisik yang dihasilkan oleh

pergetaran materi. Kategori-kategori audio yaitu ucapan (suara orang

berbicara), musik (hasil pendengaran alat musik), efek suara (suara lainnya,

seperti tembakan, gelas pecah, halilintar, dll). Audio membantu

memperjelas pengertian dari informasi dari suara teks, gambar dan video

(45)

Format-format suara:

1) AAC (advance Audio Coding)

AAC merupakan audio codec yang menyempurnakan MP3 dalam hal mediumdan high bit rates.

2) Waveform Audio(WAV)

WAV adalah format audio standar Microsoft untuk PC dan jarang sekali digunakan di internet karena ukurannnya yang relatif besar.

3) Mpeg Audio Layer 3(MP3)

MP3 distandarisasi pada tahun 1991 dan sering digunakan di internet

karena ukurannnya yang cukup kecil dibandingkan ukuran audio file yang tidak terkompresi.

4) MIDI (Music Instrument Digital Interface)

Standard yang dibuat oleh perusahaan alat-alat musik elektronik

berupa serangkaian spesifikasi agar lebih berbagai instrumen dapat

berkomunikasi.

e. Video

Video seperti animasi, tetapi disimpan dalam format khusus yang

dapat menyimpan adegan dunia nyata atau rekaan dengan komputer. Dari

elemen multimedia lainnya video yang paling kompleks, paling

memerlukan persyaratan hardware yang tinggi dan membutuhkan penyimpanan yang jauh lebih besar. Video dapat menyajikan bergerak

(46)

Format-format video:

1) AVI

Audio Video Interleaved adalah format standar file video untuk Microsoft Windows, yang juga format video “tertua” karena diperkenalkan sejak Windows3.

2) MPEG

Moving Picture Experts Group (.mpg atau .mpeg) dibangun sebagai standar untuk hasil kompresi file digital video-audio. Format ini menghasilkan kualitas gambar yang tinggi, tapi tidak membutuhkan

kapasitasfilebesar. 3) VCD

Format VCD (Video Compact Disc) berbeda dengan video lainnya. Format VCD merupakan satu kesatuan yang tidak berdiri sendiri.

VCD terdiri dari folder-folder, seperti Vcd, Mpegav, Cdda, Segment, Karaoke, Ext, dan Cdi, dan berisi file penunjang. Isi videonya berformat ekstensi .dat (singkatan dari data) dan terletak dalam

folder MPEGAV. Biasanya bertitel AVSEQ.DAT. File .dat adalah file AVI yang dikompresi menjadi MPEG, dan disesuaikan dalam struktur VCD.

4) SWF (Shockwave Flash)

SWF saat ini berfungsi sebagai format yang dominan untuk

(47)

untuk program-program, biasanya permainan, menggunakan

Actionscript. 2.3.3 Pengunaan Multimedia

Multimedia dapat digunakan di berbagai bidang misalnya: ekonomi,

pendidikan, keamanan, hiburan dan lain sebagainya. Ada beberapa penggunaan

multimedia pada saat ini yaitu:

a. Presentasi Bisnis

Presentasi bisnis biasanya disajikan dalam bentuk linear, tidak interaktif.

Dengan multimedia dapat menjadikan presentasi bisnis dengan tampilan

yang lebih menarik dan interaktif. Presentasi bisnis memiliki nilai lebih

jika dibuat interaktif.

b. Aplikasi Pendidikan

Pendidikan salah satu bidang utama mendapat manfaat dari teknologi

multimedia. Penggunaan multimedia sebagai perangkat ajar dapat

meningkatkan efektifitas suatu pembelajaran.

c. Information Delivery

Banyak aplikasi multimedia dikembangkan dengan kemampuan user mengakses data. Information deliverymemungkinkan usermengakses data digital dan menampilkan dengan komputer.

d. Promosi dan Penjualan

(48)

e. Aplikasi Produksi

Apliksi ini merupakan kombinasi dari information delivery dan training. Salah satu contoh adalah presentasi untuk online help, tutorial, aplikasi spreadsheetdengan tambahan audio dan video.

f. Teleconferencing

Teleconferencing merupakan gabung dari multimedia dengan teknologi jaringan digital. Teleconferencing dapat dimanfaatkan oleh pekerja aktif yang banyak melakukan perjalanan bisnis untuk dapat ikut serta dalam

suatu pertemuan tanpa datang ke tempat pertemuan berlangsung.

Teleconferencing dapat berjalan bila tersedia jaringan digital dengan kecepatan tinggi yang menghubungkan komputer dalam jaringan.

g. Film

Film animasi 2D atau 3D dapat digunakan sebagai sarana informasi,

presentasi, permodelan, pendidikan, dokumentasi, maupun hiburan. Film

merupakan multimedia linear.

h. Aplikasi Web

Manfaat teknologi multimedia di WWW adalah meruntuhkan batasan

waktu dan ruang dalam berkomunikaski. Contohnya seperti chatting, video conference, e-learningdan lain-lain.

i. Permainan

Teknologi multimedia interaktif dapat menghasilkan permainan yang lebih

(49)

memungkinkan berkomunik

lokasi geografis yang be

j. Virtual Reality(VR) Bidang ini biasanya

helm, sarung tangan,

berusaha untuk menempatkan

nyata.

Dalam VR, lingkungan

objek geometris

banyak objek dan

resolusinya, semakin

2.4 Metode Pengembangan Menurut Vaughan

dilakukan melalui empat taha

dan distribusi, seperti gambar

Gambar 2.17Siklus Pengembangan Apl

Perencanaan

Desain

Pengujian

memungkinkan berkomunikasi dengan orang lain yang berbe

lokasi geografis yang berbeda.

(VR)

biasanya menggunakan alat-alat khusus, misalnya kacamata,

sarung tangan, dan antarmuka pengguna yang tidak lazim,

untuk menempatkan penggunanya “di dalam” pengalaman

VR, lingkungan yang diciptakan sebenarnya merupakan

geometris yang digambarkan dalam ruang 3 dimensi.

objek dan titik yang mendeskripsikan objek serta semakin

nya, semakin realistis hasil yang akan diperoleh.

engembangan Multimedia

Vaughan dalam Binanto (2010), pengembangan mu

empat tahap, yaitu perencanaan, desain dan produksi, pe

stribusi, seperti gambar 2.17 di bawah ini:

Siklus Pengembangan Aplikasi Multimedia (Binanto, 2010)

erencanaan

Desain dan Produksi

Pengujian

Pendistribusian

yang berbeda pada

misalnya kacamata,

tidak lazim, dan

pengalaman yang

merupakan ribuan

dimensi. Semakin

semakin tinggi

multimedia

dan produksi, pengujian,

(50)

2.4.1 Perencanaan

Tahap Perencanaan (planning) adalah tahap yang mencakup proses identifikasi kebutuhan dan tujuan, kemampuan multimedia yang dibutuhkan,

misalnya keterampilan menulis, seni grafis, music, video dan lain-lain. Selain itu

proses perhitungan waktu yang dibutuhkan unutk mengerjakan seluruh elemen

juga dilakukan pada tahap ini.

2.4.2 Desain dan produksi

Desain adalah tahap membuat spesifikasi mengenai arsitektur program,

gaya, tampilan dan kebutuhan material/ bahan untuk program. Mendesain berarti

berpikir, memilih, membuat, dan mengerjakan.

Produksi merupakan tahap ketika proyek multimedia benar-benar dirender.

Yang perlu dilakukan pada tahap desain dan produksi ini adalah:

A. Storyboard

Membuat storyboard mempunyai peran yang sangat penting dalam pengembangan multimedia. Storyboard digunakan sebagai alat bantu pada tahap perancangan multimedia. Storyboard merupakan perngorganisasian grafik, contohnya adalah sederetan ilustrasi atau gambar yang ditampilkan berurutan

untuk keperluan visualisasi awal dari suatu file, animasi, atau urutan media

(51)

Gambar 2.18Contoh Storyboard(Binanto, 2010)

B. Struktur Navigasi

Mendesain struktur navigasi, struktur navigasi memberikan gambaran link

dari suatu halaman ke halaman lainnya struktur navigasi digunakan pada

multimedia nonlinear. Terdapat 4 struktur navigasi dasar pada proyek mulltimedia,

yaitu: (Vaughan, 2004)

a. Linier : Pengguna melakukan navigasi secara berurutan, dari frame atau

biteinformasi satu ke yang lainnya.

(52)

b. Hierarkis : Disebut juga ”linier dengan percabangan”, karena pengguna

melakukan navigasi sepanjang cabang pohon struktur yang terbentuk oleh

natural logicdari isi.

Gambar 2.20Struktur Navigasi Hierarkis (Binanto, 2010)

c. Nonlinier : Pengguna melakukan navigasi dengan bebas melalui isi proyek,

tidak terikat dengan rute yang ditetapkan sebelumnya.

Gambar 2.21Struktur Navigasi Nonlinier (Binanto, 2010) d. Komposit : Pengguna melakukan navigasi dengan bebas (secara nonlinier),

tetapi terkadang dibatasi oleh presentasi linier film atau informasi kritis

dan atau pada data yang paling terorganisasi secara logis dalam suatu

(53)

Gambar 2.22Struktur Navigasi Komposit (Binanto, 2010) C. Flowchart

Flowchart adalah bagan-bagan yang mempunyai arus yang menggambarkan langkah-langkah penyelesaian suatu masalah. Flowchart merupakan cara penyajian dari suatu algoritma. (Ladjamuddin, 2005)

Menurut Ladjamuddin, dalam penulisan Flowchart dikenal dua model, yaitu Sistem Flowchartdan Program Flowchart.

a. System Flowchart

Yaitu bagan yang memperlihatkan urutan prosedur dan proses

dari beberapa file di dalam media tertentu. Melalui flowchart ini terlihat jenis media penyimpanan yang dipakai dalam pengolahan data.

Selain itu juga menggambarkan file yang dipakai sebagai input dan

output. Serta tidak digunakan untuk menggambarkan urutan langkah

untuk memecahkan masalah hanya untuk menggambarkan prosedur

(54)

b. Program Flowchart

Yaitu: Bagan yang memperlihatkan urutan dan hubungan

proses dalam suatu program. Dua jenis metode penggambaran

program flowchart :

1) Conceptual flowchart, menggambarkan alur pemecahan masalah secara global.

2) Detail flowchart, menggambarkan alur pemecahan masalah secara rinci.

c. Simbol-simbol Flowchart

Simbol-simbol yang di pakai dalam flowchart dibagi menjadi 3 kelompok:

1) Flow direction symbols

Digunakan untuk menghubungkan simbol satu dengan yang lain.

Disebut juga connecting line.

Tabel 2.2Flow Direction Symbols(Ladjamuddin, 2005)

Simbol arus / flow, yaitu menyatakan jalannya arus suatu proses

Simbol communication link, yaitu menyatakan transmisi data dari satu lokasi ke lokasi lain

(55)

Simbol offline connector, menyatakan sambungan dari proses ke proses lainnya dalam halaman yang berbeda

2) Processing symbols

Menunjukkan jenis operasi pengolahan dalam suatu proses

/prosedur.

Tabel 2.3Processing symbols (Ladjamuddin, 2005)

Simbol process, yaitu menyatakan suatu tindakan (proses) yang dilakukan oleh komputer

Simbol manual, yaitu menyatakan suatu tindakan (proses) yang tidak dilakukan oleh komputer

Simbol decision, yaitu menujukkan suatu kondisi tertentu yang akan menghasilkan dua kemungkinan jawaban : ya / tidak

Simbol predefined process, yaitu menyatakan penyediaan tempat penyimpanan suatu pengolahan untuk memberi harga awal

Simbol terminal, yaitu menyatakan permulaan atau akhir suatu program

Simbol keying operation, Menyatakan segala jenis operasi yang diproses dengan menggunakan suatu mesin yang mempunyai keyboard

(56)

Simbol manual input, memasukkan data secara manual dengan menggunakan online keyboard

3) Input/ Output symbols

Menunjukkan jenis peralatan yang digunakan sebagai media input atau output.

Tabel 2.4Input/ Output Symbol(Ladjamuddin, 2005)

Simbol input/output, menyatakan proses input atau output tanpa tergantung jenis peralatannya

Simbol punched card, menyatakan input berasal dari kartu atau output ditulis ke kartu

Simbol magnetic tape, menyatakan input berasal dari pita magnetis atau output disimpan ke pita magnetis

Simbol disk storage, menyatakan input berasal dari dari disk atau output disimpan ke disk

Simbol document, mencetak keluaran dalam bentuk dokumen (melalui printer)

(57)

D. State Transition Diagram

Menurut Roger Pressman (1997:354) State transition diagram menunjukan bagaimana sistem bertingkah laku sabagai akibat dari kejadian

eksternal. Untuk melakukannya, STD menunjukan berbagai model tingkah laku

(disebut state) sistem dan cara di mana transisi dibuat dari state satu ke state lainnnya. STD berfungsi sebagai dasar bagi permodelan tingkah laku.

Menurut Kowal James (1998:331) STD merupakan suatu modeling tool yang menggambarkan sifat ketergantungan pada waktu dari suatu sistem. Pada

mulanya hanya digunakan untuk menggambarkan suatu sistem yang memiliki

sifat real time, seperti :

1. Process control

2. Telephone switching system

3. High speed data acquisition system 4. Military command and control system

State disimbolkan dengan segi empat ( ) dan transisi state atau perubahan state disimbolkan dengan ( ). Ada dua macam stateakhir (final state). Final state bisa berupa beberapa state, tetapi initial statetidak boleh lebih dari satu.

(58)

Gambar 2.23Contoh STD (Pressman, 2002) E. Antarmuka (interface)

Antarmuka produk multimedia merupakan perpaduan dari elemen-elemen

grafis dan sistem navigasinya. Jika pesan dan isi tidak terorganisasi dan sulit

dicari, atau jika pengguna menjadi kehilangan tujuan atau bosan, maka

proyek gagal. Grafis yang buruk bisa menyebabkan kebosanan. Alat bantu

navigasi yang buruk dapat membuat pengguna kehilangan arah dan tidak

mengerti isinya. (Vaughan, 2007)

F. Pengumpulan / pencarian isi

Tahap pengumpulan bahan sesuai kebutuhan yang dikerjakan, seperti:

(59)

G. Produksi

Produksi merupakan tahap ketika proyek multimedia benar-benar dirender

menghasilkan suatu produk. Dalam produksi rencana proyek menjadi bahan

panduan langkah demi langkah pembuatan produk. (Vaughan, 2010:270)

2.4.3 Pengujian

Pengujian adalah tahap yang dilakukan untuk memeriksa dan memastikan

bahwa program yang dibuat sudah benar-benar sesuai dengan tujuan proyek dan

sesuai dengan keperluan. (Binanto, 2010:271)

2.4.4 Distribusi

Distribusi merupakan tahap disimpannya aplikasi ke dalam suatu media

penyimpanan. Tahap ini juga dapat disebut tahap evaluasi terhadap suatu produk

multimedia, diharapkan akan dapat dikembangkan sistem multimedia yang lebih

baik di kemudian hari. (Binanto, 2010:271)

2.5 Black-box

Menurut Pressman pengujian black-box berfokus pada persyaratan

fungsional perangkat lunak. Dengan demikian, pengujian black-box

memungkinkan perekayasaan perangkat lunak mendapatkan serangkaian kondisi

input yang sepenuhnya mengguna semua persyaratan fungsional untuk suatu

program.

(60)

kesalahan dalam struktur atau akses database eksternal, kesalahan kinerja,

inisialisasi dan kesalahan termilasi.

2.6 Perangkat Lunak Authoring

Menurut Suyanto (2003) perangkat lunak authoring merupakan peralatan authoring serupa dengan bahasa pemrograman yang memungkin integrasi teks, video, audio dan animasi ke dalam presentasi yang interaktif. Authoring merupakan aplikasi komputer yang memberikan peluang kepada pemakai untuk

mengembangkan sebuah perangkat lunak dengan draggingdan droppingberbagai objek multimedia tanpa harus mengetahui penggunaan atau pemahaman bahasa

pemrograman, meskipun ada beberapa yang dilengkapi bahasa pemrograman,

misalnya macromedia directoryang dilengkapi dengan Lingo.

2.6.1 Adobe FlashCS3

Flash merupakan program animasi professional yang mudah digunakan dan sangat berdaya guna untuk membuat animasi, dari animasi sederhana sampai

animasi yang kompleks, meliputi multimedia dan aplikasi seperti animasi kartun,

animasi interaktif, game, company profile, presentasi, video klip, movie, web animasi dan aplikasi animasi lainnya.

(61)

mempunyai kemampuan untuk mengimpor video, gambar dan suara dari aplikasi

di luarnya.

Movie flash juga bisa memasukkan unsur interaktif dalam movie dengan mengunakan actionscript (bahasa pemrograman di flash) sehingga user bisa berinteraksi dengan keyboard atau mouse untuk berpindah ke bagian-bagian yang berbeda dari sebuah moviedan operasi lainnya.

Dengan demikian dapat digunakan untuk pengembangan multimedia

interaktif untuk produksi CD, jaringan, maupun pengunaan pada web. Dalam multimedia dapat dilihat teks, gambar, animasi, audio dan digital video

bersama-sama tampil pada satu saat dan penggunaanbuttonsebagai alat interaktif.

Panel Tool

Stage Panel Timeline

(62)

Berikut ini diberikan penjelasan singkat mengenai panel-panel yang sering

dipakai, yaitu:

1. Stagemerupakan tempat anda membuat aplikasi dan juga menunjukkan isi aplikasi anda yang akan muncul setelah anda selesai membuat dan

menjalankan aplikasi. Anda dapat menambahkan objek-objek (bisa berupa

graphic, text, komponen interaktif, buttondan sebagainya) ke dalam Stage. Anda dapat juga memodifikasi objek-objek tersebut atau membuat objek

baru atau pun membuat animasi objek anda menggunakan program

ActionScript.

2. Panel Timeline menyediakan frame-frame yang dapat digunakan untuk membuat animasi objek tanpa menggunakan program Script. Dalam buku

ini Timeline tidak banyak digunakan karena kita hanya akan menggunakan

sedikit mungkin frame dari timeline, dan lebih banyak membuat animasi

menggunakan program script. Pada panel Timeline juga terdapat

layer-layer yang bisa anda buat. Dalam buku ini jumlah layer-layer akan dibuat

secukupnya untuk menyederhanakan pembuatan program.

3. Panel Properties membantu anda mengatur beberapa properti dari objek terpilih yang ada di Stage. Apabila tidak ada objek yang dipilih, maka

panel properti akan berkait langsung dengan properti Stage.

4. Panel Toolsmemuat alat bantu untuk membuat objek graphicyang dapat ditambahkan dalam Stage.

(63)

button, graphic. Sound dan video yang diimport juga masuk dalam panel Library ini.

2.6.2 Adobe PhotoshopCS3

[image:63.612.130.541.55.426.2]

Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/

gambar dan pembuatan efek, dan membantu pengguna bekerja lebih efisien untuk

mengeksploitasi kreatifitas, memanipulasi gambar, dan menghasilkan gambar

dengan kualitas gambar tertinggi untuk web atau yang lainnya. Adobe photoshop menciptakan gambar menjadi lebih mudah diakses ke data file, memperlancar desain web, lebih cepat dalam mengolah foto dan lebih banyak lagi (Suyanto, 2003).

Di dalam Photoshop CS3 terdapat beberapa fasilitas yang dapat mempermudah pengguna dalam membuat atau memanipulasi gambar yaitu menu

[image:63.612.135.508.471.672.2]

(64)

A: Menu Bar, berisi perintah utama untuk membuka file, save, mengubah ukuran gambar, filter dan lain-lain. Juga ditampilkan keyboard shortcut seperti: New (Ctrl+N), Open (Ctrl+O), dan lain-lain.

B: Option, berisi pilihan dari tool yang Anda pilih. Misalnya dipilih kuas/brush, maka ukuran/diameter juga opacity brush ada di sini.

C: Gambar, menampilkan besar kanvas atau gambar yang sedang

dibuka, diedit atau dibuat.

D: Pallete Well, cara cepat untuk mengakses palet brushes, tool resets dan Layer Comps. Juga dapat digunakan untuk meletakkan palet yang sering digunakan.

[image:64.612.131.536.53.663.2]

(65)

1. Move Tool(V), untuk memindahkan objek gambar.

2. Rectangular Marquee Tool (M), untuk membuat seleksi berbentuk kotak persegi empat.

3. Polygonal Lasso Tool(L), untuk membuat seleksi lurus. 4. Crop Tool(C), untuk memotong gambar.

5. Slice Tool(K), untuk membuat pembagian gambar.

6. Brush Tool (B), untuk menggambar atau mewarnai dengan bentuk kuas.

7. Spot Healing Brush Tool(J), untuk memperbaiki kerusakan gambar. 8. Clone Stamp Tool (S), untuk melakukan duplikasi/copy area tertentu

pada sebuah gambar atau biasa disebut cloning.

9. Magic Wand Tool (W), untuk menyeleksi gambar yang memiliki warna sama.

10.Gradient Tool(G), untuk menghasilkan warna gradasi.

11.Eraser Tool(E), untuk menghapus gambar yang tidak kita inginkan. 12.Blur Tool(R), untuk mengaburkan area atau memburamkan gambar. 13.Dodge Tool(O), untuk membuat area menjadi lebih terang.

14.Horizontal Type Tool(T), untuk membuat teks secara horisontal. . 15.Pen Tool (P), untuk membuat gambar (garis lurus dan lengkung)

dalam bentuk path/vektor.

16.Custom Shape Tool(U), untuk membentuk bebas. 17.Direct Selection Tool(A), untuk merapikan alur path.

(66)

19.Notes Tool(N), untuk membuat catatan pada image seperti copyright. 20.Hand Tool(PH), untuk menggeser tampilan (canvas) pada layar. 21.Zoom Tool(Z), untuk memperbesar tampilan gambar.

22.Set Background Color, untuk merubah warna baik depan maupun belakang.

23.Edit in Quick Mask Mode (Q), untuk pengeditan menggunakan efek mask.

24.Change Screen Mode(F), untuk merubah tampilan layar.

F : Palette, berisi jendela-jendela kecil yang di dalamnya terdapat perintah dan pilihan untuk dokumen/gambar yang sedang dikerjakan. Anda dapat meletakkan

palet yang sering digunakan sekaligus menutup palet lain yang tidak digunakan.

Panggil palet melalui menu utamawindow. 2.6.3 Macromedia Director MX

Macromedia Director adalah sebuah program yang dirancang khusus

untuk membuat self-containedatau program yang dapat berjalan sendiri. Aplikasi ini dapat dijadikan sebagai media presentasi maupun sebagai Media Interaktif

untuk Membuat CD Interaktif. Director ini juga dapat digunakan untuk

menciptakan konten halaman web dalam bentuk Shockwave.

Uniknya director ini menjadikan perancang layaknya seorang sutradara

dalam sebuah film. Para pemain ataupun materi/media bisa dianggap sebagai Cast. Semua aksi dan pergerakan Cast diatur dalam Stage yang diatur dalam alur cerita

(67)

File seperti MP3 dan WAV, Video File seperti AVI, MPG, MOV dan Flash.

Dengan Director ini, tentu saja kita dapat menggabungkan sumber daya yang ada,

[image:67.612.134.537.127.524.2]

menjadi sebuah media yang interaktif.

Gambar 2.27Tampilan Macromedia Director MX2004

Bagian penting yang harus dikenal terlebih dahulu oleh seorang director J

yaitustage, Cast, Score, Properti Inspector dan Tools. Untuk memudahkan pemahaman maka akan diumpakan dalam sebuah drama pentas:

1. Stage sama dengan panggung, diamana di stage inilah semua hal akan ditampilkan.

Stage Tool Pallete

Cast Score

(68)

2. Scoresama dengan alur cerita dari sebuah drama, mengatur hal yang akan tampil terlebih dahulu layaknya sebuah cerita.

3. Castadalah balik panggung, di-cast inilah dikumpulkan segala macam hal yang akan ditampilkan.

4. Tools dan Property Inspector adalah perangkat tambahan yang akan membantu dalam membuat sebuah cerita tersebut.

2.6.4 3D Max 2009

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

sebuah perangkat lunak grafik vektor 3-dimensi dan animasi. 3ds Max adalah

salah satu paket perangkat lunak yang paling luas digunakan sekarang ini, karena

beberapa alasan seperti penggunaan platform Microsoft Windows, kemampuan

[image:68.612.134.536.50.744.2]

mengedit yang serba bisa, dan arsitektur plugin yang banyak.

(69)

a) Menu Bar: barisan judul menu Tab Panel yang telah terkelompokkan, sebagaimana layaknya banyak software.

b) Main Toolbar: barisan perintah-perintah yang umum/dasar ( undo, redo, select, move, rotate, scale, dll.)

c) Viewport: tampilan layar 3D objek tempat kita mendesain/jendela pandang.

d) Command Panel: 6 Panel yang berisi perintah-perintah modeling. e) Command Panel Rollout: Tampilan gulungan dari panel perintah.

2.6.5 Audacity

Audacityadalah aplikasi pemberi efek suara yang terbaik yang pernah ada di dunia sumber terbuka (open source). Aplikasi ini dibangun dengan pustaka WxWidgets sehingga dapat berjalan pada berbagai sistem operasi.

Dengan Audacity, pengguna bisa mengoreksi berkas suara tertentu, atau

sekedar menambahkan berbagai efek yang disediakan. Selain itu, pengguna juga

dapat berkreasi dengan suara yang dimiliki sendiri.

Kelebihan dari aplikasi ini adalah fitur dan kestabilan. Pustaka yang

digunakan juga tidak terlalu banyak dan waktu tunggunya juga tidak terlalu lama.

(70)

[image:70.612.148.540.56.390.2]

Gambar 2.29Tampilan Audacity

Control Toolbar mengandung dua jenis konten yang mempunyai fungsi yang berbeda, yaitu Editing Toolsdan Audio Control.

Gambar 2.30Tool Audacity Tabel 2.5Tool-Toolpada Audacity

Ikon Nama Fungsi

Selection Tool Untuk menyeleksi range audio yang akan diedit atau didengarkan.

(71)

Draw Tool Untuk modifikasi sample individual.

Zoom Tool Untuk memperbesar atau memper- kecil tampilan.

Timeshift Tool Untuk menggeser track.

[image:71.612.143.534.49.707.2]

Multi Tool Untuk mengakses keseluruhan tool secara bersamaan.

Tabel 2.6Audio Control Buttons

Ikon Nama Fungsi

Skip To Start Untuk memindakan kursor ke awal lagu (time0).

Play Untuk memainkan musik/lagu yang

Loop Jika tombol Shift ditekan dan tahan, tombol Play akan berubah menjadi tombol Loop, yang berfungsi untuk memainkan area terseleksi berulang-ulang.

Record Untuk merekam suara/musik. Track baru akan terekam dimulai dari posisi kursor.

(72)

Stop Untuk mengakhiri proses recording atau playing. Tombol ini harus ditekan jika Anda ingin mengaplikasikan efek, menyimpan, atau mengexport file. Skip To End Untuk memindakan kursor ke akhir

lagu/track.