SKRIPSI VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA...

SKRIPSI

VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA

MANUSIA

ANOM TRY PUTRANTONIM : 206091004027

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA 2011/1432 H

i

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

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA 2011/1432 H

iv

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-

BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN

SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI

ATAU LEMBAGA MANAPUN.

Jakarta, September 2011

Anom Try Putranto206091004027

v

ABSTRAK

Anom Try Putranto, 206091004027. Visualisasi 3 Dimensi Struktur RangkaPada 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 kemudahanbagi 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, VisualisasiJumlah Halaman : V Bab + xvi Halaman + 126 Halaman + 80 Gambar + 11 Tabel + Daftar Pustaka + LampiranJumlah Daftar Pustaka : 29 Sumber (Tahun 1995 - Tahun 2010)

vi

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

selaku Dosen Penguji II.

vii

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

Anom Try Putranto206091004027

iv

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

2.2 Grafika Komputer 8

v

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 Lunak Authoring 42

2.6.1 Adobe Flash CS3 42

2.6.2 Adobe Photoshop CS3 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

2.7.1 Skeleton Aksial 55

vi

2.7.2 Tulang Dada 57

2.7.3 Ruas-Ruas Tulang Belakang 59

2.7.4 Skeleton 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

4.2.1 StoryBoard 76

vii

4.2.2 Flowchart 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

DAFTAR PUSTAKA

LAMPIRAN

viii

DAFTAR GAMBAR

Gambar 2.1 Sistem Koordinat Kartesian 9

Gambar 2.2 Proses Translasi 2D 10

Gambar 2.3 Proses Scaling 2D 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.12 Teknik 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.17 Siklus Pengembangan Aplikasi Multimedia 31

Gambar 2.18 Contoh Storyboard 33

Gambar 2.19 Struktur Navigasi Linier 33

Gambar 2.20 Struktur Navigasi Hierarkis 34

Gambar 2.21 Struktur Navigasi Nonlinier 34

ix

Gambar 2.22 Struktur Navigasi Komposit 35

Gambar 2.23 Gambar STD 40

Gambar 2.24 Tampilan Adobe Flash CS3 43

Gambar 2.25 Tampilan Adobe Photoshop CS3 45

Gambar 2.26 Tool-Tool pada Adobe Photoshop CS3 46

Gambar 2.27 Tampilan Macromedia Director MX 2004 49

Gambar 2.28 Tampilan 3D Max 2009 50

Gambar 2.29 Tampilan Audacity 52

Gambar 2.30 Tool Audacity 52

Gambar 2.31 Anatomi Rangka Manusia 54

Gambar 2.32 Tulang Tengkorang Dari Depan 55

Gambar 2.33 Tulang Tengkorak Dari Samping 56

Gambar 2.34 Tulang Dada/ Rusuk 57

Gambar 2.35 Tulang Belakang 60

Gambar 2.36 Tulang 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 Flowchart Menu Materi 85

Gambar 4.4 Flowchart Sub Menu Materi Tengkorak 86

Gambar 4.5 Flowchart Sub Menu Materi Rusuk 87

x

Gambar 4.6 Flowchart Sub Menu Materi Tulang Belakang 88

Gambar 4.7 Flowchart Sub Menu Materi Ektremitas Atas 89

Gambar 4.8 Flowchart Sub 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

Gambar 4.28 Tampilan Background 108

xi

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.33 Tampilan Material 112

Gambar 4.34 Tampilan Export Shockwave 3D 113

Gambar 4.35 Tampilan Shockwave 3D Setelah Diexport 113

Gambar 4.36 Time 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

Gambar 4.41 Tombol Navigasi 117

xi

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-Tool pada 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 File yang Digunakan 104

Tabel 4.5 Pengujian Black-Box 120

xii

DAFTAR LAMPIRAN

1. Hasil wawancara L1

2. Interface Aplikasi L2

3. Source Code L13

4. Kuisioner dan evaluasi L27

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

radiografer yang menghadirkan model 3 dimensi yaitu struktur rangka manusia

2

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.

2. Coding yang digunakan untuk membuat program ini berupa Lingo

script yang digunakan pada aplikasi Macromedia Director dan

Actionscript yang digunakan pada aplikasi Adobe Flash.

3

3. Referensi berasal dari buku Human Anatomy karangan Van De Graaff,

Skeletal System: Gross Anatomy karangan Rod Seeley, dan Essentials

of Anatomy and Physiology karangan Valerie C Scanlon.

4. Pada video menggunakan teknik pencahayaan fill light dan 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

atau tugas akhir.

4

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

dilakukan dengan cara sebagai berikut :

5

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,

gaya, tampilan dan kebutuhan material/bahan untuk program. Produksi

6

merupakan tahap ketika proyek multimedia benar-benar dirender untuk

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

dari penulisan skripsi ini.

7

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

sistem ini ke arah yang lebih baik lagi di masa yang akan datang.

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

bidang komputer yang mempelajari cara-cara untuk meningkatkan dan

memudahkan komunikasi antara manusia dan mesin (komputer) dengan jalan

9

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.

Gambar 2.1 Sistem Koordinat Kartesian

2.2.2 2 Dimensi

Gambar 2 dimensi memiliki karakteristik hanya memperlihatkan sumbu X

dan sumbu Y, atau sumbu koordinat kartesius dua dimensi. Karakteristik kedua

adalah bahwa gambar yang dihasilkan seolah

“mati”. Artinya, tidak dilakukan manipulasi atau pengoperasian tertentu, baik

pada objek maupun pada sistem koordinatnya.

Transformasi 2 dimensi:

1) Translasi adalah

Gambar 2.2

2) Scaling adalah adalah perpindahan obyek dari titik P ke titik P’, dimana

jarak titik P’ adalah m kali titik P



gambar yang dihasilkan seolah-olah hanya merupakan gambar


pada objek maupun pada sistem koordinatnya. (Janner, 2007)

Transformasi 2 dimensi:

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

Gambar 2.2 Proses translasi 2D (Basuki, 2009)

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

jarak titik P’ adalah m kali titik P.

10



olah hanya merupakan gambar


ri titik P ke titik P’ secara linier.

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

Gambar 2.3

3) Rotasi adalah perpindahan obyek dari titik P ke titik P’, yang berupa

pemindahan berputar sebesar sudut

Gambar 2.4

Gambar 2.3 Proses Scaling 2D (Basuki, 2009)

perpindahan obyek dari titik P ke titik P’, yang berupa

pemindahan berputar sebesar sudut .

Gambar 2.4 Proses Rotasi 2D (Basuki, 2009)

11

perpindahan obyek dari titik P ke titik P’, yang berupa

12

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 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:

Gambar 2.5 Proses translasi 3D (Basuki, 2009)

13

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.6 Rotasi terhadap sumbu X

y

z x

Gambar 2.7 Rotasi terhadap sumbu Y

14

y

z x

Gambar 2.8 Rotasi 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

Diperbesar

Gambar 2.9 Proses penskalaan 3D

15

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

memakai bentuk objek geometry box (kotak) yang kemudian dihaluskan

lagi permukaannya (smooth).

16

Gambar 2.10 Polygon Modeling

Teknik NURBS modeling, Gambar 2.11 adalah teknik membuat model

dengan memakai garis-garis yang dibuat seperti rangka objek yang

diinginkan kemudian diberi surface (bentuk permukaan).

Gambar 2.11 NURBS Modeling

17

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 light adalah melembutkan sekaligus mengisi bagian gelap yang

diciptakan oleh key light. Fill Light juga 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

belakang pendukungnya.

18

Gambar 2.12 Teknik Pencahayaan

2.3 Multimedia

Multimedia adalah pemanfaatan komputer untuk membuat dan

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

menggabungkan link dan tool yang 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

sebagai garis lurus sehingga disebut linier multimedia. Contoh multimedia jenis

ini adalah program TV dan film. Presentasi linier sesuai digunakan bila jumlah

19

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.

e. Memberikan kemudahan pemakaian, terutama bagi pemakai awam.

20

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

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

Gambar 2.13 Anatomi Bentuk Huruf

Jenis-jenis teks:

1) Printable Text (Teks Tercetak), adalah teks hasil dari cetakan Media

pencetak yg biasanya tercetak di kertas.

2) Electronic Text (Teks Elektronik), adalah teks yang diketik dengan

pengolah text.

21

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.

3) Character format/ format huruf, Bold, Underline, Italic,

Strikethrough, Subscript, Superscript.

22

4) Font Type/ tipe huruf dan cita rasa jenis huruf, Arial memiliki cita

rasa Friendly/ bersahabat, Times New Roman memiliki cita rasa

informative, Impact memiliki cita rasa Trendy, Bodoni memiliki

cita rasa nostalgia, Bookman memiliki cita rasa tradisional, New

York memiliki cita rasa klasik, Mistra memiliki cita rasa Playful,

Helvetica memiliki 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

disusun sebagai metrics nilai numerik yang merepresentasikan setiap

titik atau pixel. Bitmap baik digunakan untuk gambar-gambar rumit

yang membutuhkan rincian halus.

23

Gambar 2.14 Gambar 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.15 Gambar Vektor (

Tabel 2.1 merupakan beberapa jenis format digital untuk gambar/ grafik

yang dibuat.

Tabel 2.1 Format Gambar Digital

NOJENIS

FORMATPENJELASAN

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.

GambarAsli Gambar

Asli

GambarDiperbesar

GambarDiperbesar

GambarAsli

GambarDiperbesar

Piksel(15 x 16 piksel)

24

2 JPEG (JointFotogrphicExpertGroup)

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 file ini merupakan format asli dokumen Adobe Photoshop. Format ini mampu menyimpan informasi layer dan alpha channel yang terdapat pada sebuah gambar, sehingga suatu saat dapat dibuka kembali. Format ini juga mampu menyimpan gambar dalam beberapa mode warna yang disediakan Photoshop dan dapat menyimpan dengan format file ini jika ingin mengeditnya kembali.

6 AI (AdobeIllustrator Artwork)

Format file ini merupakan format asli dari adobeIllustrator. 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

tempat objek-objek movie diletakkan.

25

Gambar 2.16 Gambar 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

karakter semacam yang terlihat dalam film kartum.

26

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

dan memberikan efek dramatis. (Sutopo, 2003)

27

Format-format suara:

1) AAC (advance Audio Coding)

AAC merupakan audio codec yang menyempurnakan MP3 dalam

hal medium dan 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

dengan kualitas tinggi. (Suyanto, 2003)

28

Format-format video:

1) AVI

Audio Video Interleaved adalah format standar file video untuk

Microsoft Windows, yang juga format video “tertua” karena

diperkenalkan sejak Windows 3.

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

kapasitas file besar.

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

menampilkan "animasi" vektor grafik di web. Dan juga digunakan

29

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 delivery memungkinkan user mengakses data

digital dan menampilkan dengan komputer.

d. Promosi dan Penjualan

Aplikasi penjualan merupakan gabungan dengan informasi delivery dapat

mempunyai bentuk seperti penawaran, negosiasi, pengambilan order dan

lain-lain.

30

e. Aplikasi Produksi

Apliksi ini merupakan kombinasi dari information delivery dan training.

Salah satu contoh adalah presentasi untuk online help, tutorial, aplikasi

spreadsheet dengan 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-learning dan lain-lain.

i. Permainan

Teknologi multimedia interaktif dapat menghasilkan permainan yang lebih

menarik, seperti game online selain tampilan yang menarik juga

memungkinkan berkomunik

lokasi geografis yang berbeda.

j. Virtual Reality (VR)

Bidang ini biasanya

helm, sarung tangan, dan antarmuka pengguna yang tidak lazim, dan

berusaha untuk menempatkan penggun

nyata.

Dalam VR, lingkungan yang dici

objek geometris yang digambarkan dalam ruang 3 dimensi. Semakin

banyak objek dan titik yang mendeskripsikan objek serta semakin tinggi

resolusinya, semakin realistis hasil yang akan diperoleh.

2.4 Metode Pengembangan

Menurut Vaughan

dilakukan melalui empat tahap, yaitu perencanaan, desain dan produksi, pengujian,

dan distribusi, seperti gambar

Gambar 2.17 Siklus Pengembangan Aplikasi Multimedia

Perencanaan

Desain

Pengujian

memungkinkan berkomunikasi dengan orang lain yang berbe

lokasi geografis yang berbeda.

(VR)

Bidang ini biasanya menggunakan alat-alat khusus, misalnya kacamata,


berusaha untuk menempatkan penggunanya “di dalam” pengalaman yang

Dalam VR, lingkungan yang diciptakan sebenarnya merupakan ribuan

ek geometris yang digambarkan dalam ruang 3 dimensi. Semakin


resolusinya, semakin realistis hasil yang akan diperoleh.

Metode Pengembangan Multimedia

Vaughan dalam Binanto (2010), pengembangan mu

empat tahap, yaitu perencanaan, desain dan produksi, pengujian,

dan distribusi, seperti gambar 2.17 di bawah ini:

Siklus Pengembangan Aplikasi Multimedia (Binanto, 2010)

Perencanaan

Desain dan Produksi

Pengujian

Pendistribusian

31

asi dengan orang lain yang berbeda pada

alat khusus, misalnya kacamata,


nya “di dalam” pengalaman yang

nya merupakan ribuan

ek geometris yang digambarkan dalam ruang 3 dimensi. Semakin


multimedia

empat tahap, yaitu perencanaan, desain dan produksi, pengujian,

(Binanto, 2010)

32

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

interaktif termasuk interaktivitas web. (Binanto, 2010:255)

33

Gambar 2.18 Contoh 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

bite informasi satu ke yang lainnya.

Gambar 2.19 Struktur Navigasi Linier (Binanto, 2010)

34

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

melakukan navigasi sepanjang cabang pohon struktur yang terbentuk oleh

natural logic dari isi.

Gambar 2.20 Struktur Navigasi Hierarkis (Binanto, 2010)

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

tidak terikat dengan rute yang ditetapkan sebelumnya.

Gambar 2.21 Struktur 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

hierarki.

35

Gambar 2.22 Struktur 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 Flowchart dan 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

dalam sistem yang dibentuk.

36

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.2 Flow 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

Simbol connector, berfungsi menyatakan sambungan dari proses ke proses lainnya dalam halaman yang sama

37

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.3 Processing 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

Simbol offline-storage, menunjukkan bahwa data dalam simbol ini akan disimpan ke suatu media tertentu

38

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.4 Input / 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)

Simbol display, mencetak keluaran dalam layar monitor

39

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 state akhir (final

state). Final state bisa berupa beberapa state, tetapi initial state tidak boleh lebih

dari satu.

Transisi state disimbolkan dengan panah berarah. Setiap panah berarah

diberi label yang menunjukkan kejadian yang menjelaskan transisi tersebut.

40

Gambar 2.23 Contoh 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:

clipart, image, animasi, audio, berikut pembuatan grafik, foto, audio, dan

lain-lain yang diperlukan proyek multimedia. (Binanto, 2010:266)

41

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.

Pengujian black-box berusaha menemukan kesalahan dalam kategori

sebagai berikut: fungsi-fungsi yang tidak benar atau hilang, kesalahan interface,

42

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 dragging dan dropping berbagai

objek multimedia tanpa harus mengetahui penggunaan atau pemahaman bahasa

pemrograman, meskipun ada beberapa yang dilengkapi bahasa pemrograman,

misalnya macromedia director yang dilengkapi dengan Lingo.

2.6.1 Adobe Flash CS3

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.

Flash mempunyai banyak fasilitas yang sangat berdaya guna dan mudah.

Animasi atau movie flash terdiri dari grafik, teks, animasi dan aplikasi untuk situs

web. Semuanya tetap mengutamakan grafik berbasis vektor, jadi aksesnya lebih

cepat dan terlihat halus pada skala resolusi layar berapapun, selain itu juga

43

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 movie dan 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 penggunaan button sebagai alat interaktif.

Gambar 2.24 Tampilan Adobe Flash CS3

Panel Tool

StagePanel Timeline

Panel LibraryPanel Properties

44

Berikut ini diberikan penjelasan singkat mengenai panel-panel yang sering

dipakai, yaitu:

1. Stage merupakan 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, button dan 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 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 Tools memuat alat bantu untuk membuat objek graphic yang dapat

ditambahkan dalam Stage.

5. Panel Library merupakan panel yang digunakan untuk menampilkan

objek-objek yang dibuat di flash. Objek-objek tersebut berupa movie clip,

45

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

Library ini.

2.6.2 Adobe Photoshop CS3

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

bar, option bar, tool box, palet dan jendela gambar.

Gambar 2.25 Tampilan Adobe Photoshop CS3

46

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.

E: Toolbox, berisi tool-tool untuk menyeleksi dan memodifikasi

gambar.

Gambar 2.26 Tool-tool pada Adobe Photoshop CS3

47

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.

18. Eyedropper Tool (I), untuk memilih warna dari sebuah objek.

48

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 utama window.

2.6.3 Macromedia Director MX

Macromedia Director adalah sebuah program yang dirancang khusus

untuk membuat self-contained atau 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

atau timeline. Sutradara juga dapat mengambil atau mengikutsertakan Cast dari

pemain-pemain yang berbeda karakter seperti Photoshop, 3D Studio Max, Audio

49

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,

menjadi sebuah media yang interaktif.

Gambar 2.27 Tampilan Macromedia Director MX 2004

Bagian penting yang harus dikenal terlebih dahulu oleh seorang director J

yaitu stage, 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.

StageTool Pallete

Cast ScoreProperty Inspector

50

2. Score sama dengan alur cerita dari sebuah drama, mengatur hal yang

akan tampil terlebih dahulu layaknya sebuah cerita.

3. Cast adalah 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

mengedit yang serba bisa, dan arsitektur plugin yang banyak.

Gambar 2.28 Tampilan 3D Max 2009

51

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

Audacity adalah 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.

Kekurangan dari aplikasi ini adalah antarmuka penggunanya (user interface) yang

sedikit kaku apabila dibandingkan dengan aplikasi sejenis di sistem operasi lain.

52

Gambar 2.29 Tampilan Audacity

Control Toolbar mengandung dua jenis konten yang mempunyai fungsi yang

berbeda, yaitu Editing Tools dan Audio Control.

Gambar 2.30 Tool Audacity

Tabel 2.5 Tool-Tool pada Audacity

Ikon Nama Fungsi

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

Envelope Tool Untuk mengubah volumeberlebihan.

53

Draw Tool Untuk modifikasi sampleindividual.

Zoom Tool Untuk memperbesar atau memperkecil tampilan.

Timeshift Tool Untuk menggeser track.

Multi Tool Untuk mengakses keseluruhan tool secara bersamaan.

Tabel 2.6 Audio Control Buttons

Ikon Nama Fungsi

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

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. Trackbaru akan terekam dimulai dari posisi kursor.

Pause Untuk menghentikan sementara proses recording atau proses playingmusik/lagu yang sedang dimainkan. Tekan tombol Pause kembali untuk melanjutkan.

54

Stop Untuk mengakhiri proses recordingatau playing. Tombol ini harus ditekan jika Anda ingin mengaplikasikan efek, menyimpan, atau mengexport file.

Skip To End Untuk memindakan kursor ke akhir lagu/track.

2.7 Struktur Rangka Pada Manusia

Struktur rangka manusia dapat dikelompokkan menjadi dua bagian yaitu

bagian poros tubuh (aksial) dan bagian alat gerak (apendikular). Bagian aksial

terdiri atas 80 tulang pada manusia dewasa umumnya. Sedangkan bagian

apendikular terdiri atas 126 tulang pada manusia dewasa umumnya.

Gambar 2.31 Anatomi rangka manusia

55

2.7.1 Skeleton Aksial

Terdiri atas sekelompok tulang yang menyusun poros tubuh dan

memberikan dukungan dan perlindungan pada organ di kepala, leher dan badan.

Macam-macam skeleton aksial yaitu:

1. Tulang tengkorak bagian kepala terdiri dari:

Bagian Parietal tulang dahi

Bagian Temporal tulang samping kiri kanan kepala dekat telinga

Bagian Occipitas daerah belakang dari tengkorak

Bagian Spenoid berdekatan dengan tulang rongga mata, seperti

tulang baji

Bagian Ethmoid tulang yang menyusun rongga hidung

Gambar 2.32 Tulang tengkorang dari depan.

56

Gambar 2.33 Tulang tengkorak dari samping.

Tulang-tulang tengkorak merupakan tulang yang menyusun kerangka

kepala. Tulang tengkorak tersusun atas 8 buah tulang yang menyusun kepala dan

empat belas tulang yang menyusun bagian wajah. Tulang tengkorak bagian kepala

merupakan bingkai pelindung dari otak. Sendi yang terdapat di antara tulang-

tulang tengkorak merupakan sendi mati yang disebut sutura. (Seeley,dkk.

2004:200)

2. Tulang tengkorak bagian wajah terdiri dari (Van de Graaf, 2001:155)

Rahang bawah, menempel pada tulang tengkorak bagian temporal. hal

tersebut merupakan satu-satunya hubungan antar tulang dengan gerakan

yang lebih bebas

Rahang Bawah, menyusun sebagian dari hidung, dan langit-langit

Palatinum (tulang langit-langit), menyusun sebagian dari rongga hidung

dan bagian atas dari atap rongga mulut

57

Zigomatik, tulang pipi

Tulang Hidung

Tulang Lakrimal, sekat tulang hidung.

2.7.2 Tulang dada

Tulang dada termasuk tulang pipih, terletak di bagian tengah dada. Pada

sisi kiri dan kanan tulang dada terdapat tempat lekat dari rusuk. Bersama-sama

dengan rusuk, tulang dada memberikan perlindungan pada jantung, paru-paru dan

pembuluh pembuluh darah besar dari kerusakan. (Scanlon, 2007:122)

Gambar 2.34 Tulang dada/ rusuk

Tulang dada tersusun atas 3 tulang yaitu:

Tulang Hulu / Manubrium, terletak di bagian atas dari tulang dada, tempat

melekatnya tulang rusuk yang pertama dan kedua

58

Tulang Badan / Gladiolus, terletak di bagian tengah, tempat melekatnya

tulang rusuk ke tiga sampai ke tujuh, gabungan tulang rusuk ke delapan

sampai sepuluh.

Tulang Taju Pedang / Xiphoid Process, terletak di bagian bawah dari

tulang dada. Tulang ini terbentuk dari tulang rawan.

1. Tulang rusuk

Tulang rusuk berbentuk tipis, pipih dan melengkung. Bersama-sama

dengan tulang dada membentuk rongga dada untuk melindungi jantung

dan paru-paru. Tulang rusuk dibedakan atas tiga bagian yaitu: (Seeley,dkk.

2004:224)

a) Tulang rusuk sejati berjumlah tujuh pasang. Tulang-tulang rusuk ini

pada bagian belakang berhubungan dengan ruas-ruas tulang belakang

sedangkan ujung depannya berhubungan dengan tulang dada dengan

perantaraan tulang rawan.

b) Tulang rusuk palsu berjumlah 3 pasang. Tulang rusuk ini memiliki

ukuran lebih pendek dibandingkan tulang rusuk sejati. Pada bagian

belakang berhubungan dengan ruas-ruas tulang belakang sedangkan

ketiga ujung tulang bagian depan disatukan oleh tulang rawan yang

melekatkannya pada satu titik di tulang dada.

c) Rusuk melayang berjumlah 2 pasang. Tulang rusuk ini pada ujung

belakang berhubungan dengan ruas-ruas tulang belakang, sedangkan

ujung depannya bebas.

59

Tulang rusuk memiliki beberapa fungsi di antaranya:

1) Melindungi jantung dan paru-paru dari goncangan.

2) Melindungi lambung, limpa dan ginjal, dan

3) Membantu pernapasan.

2.7.3 Ruas-ruas Tulang Belakang

Ruas-ruas tulang belakang disebut juga tulang belakang disusun oleh 33

buah tulang dengan bentuk tidak beraturan. Ke 33 buah tulang tersebut terbagi

atas 5 bagian yaitu: (Seeley,dkk. 2004:217)

a) Tujuh ruas pertama disebut tulang leher. Ruas pertama dari tulang leher

disebut tulang atlas, dan ruas kedua berupa tulang pemutar atau poros.

bentuk dari tulang atlas memungkinkan kepala untuk melakukan gerakan.

b) Dua belas ruas berikutnya membentuk tulang punggung. Ruas-ruas tulang

punggung pada bagian kiri dan kanannya merupakan tempat melekatnya

tulang rusuk.

c) Lima ruas berikutnya merupakan tulang pinggang. Ukuran tulang

pinggang lebih besar dibandingkan tulang punggung. Ruas-ruas tulang

pinggang menahan sebagian besar berat tubuh dan banyak melekat otot-

otot.

d) Lima ruas tulang kelangkangan (sacrum), yang menyatu, berbentuk

segitiga terletak di bawah ruas-ruas tulang pinggang.

e) Bagian bawah dari ruas-ruas tulang belakang disebut tulang ekor (coccyx),

tersusun atas 3 sampai dengan 5 ruas tulang belakang yang menyatu.

60

Gambar 2.35 Tulang belakang.

Ruas-ruas tulang belakang berfungsi untuk menegakkan badan dan

menjaga keseimbangan. menyokong kepala dan tangan, dan tempat melekatnya

otot, rusuk dan beberapa organ. (Seeley,dkk. 2004:217)

2.7.4 Skeleton Apendikular

Tersusun atas tulang tulang yang merupakan tambahan dari skeleton axial

yang terdiri dari : (Seeley,dkk. 2004:225)

Anggota gerak atas

anggota gerak bawah

gelang bahu

gelang panggung

bagian akhir dari ruas-ruas tulang belakang seperti sakrum dan tulang

coccyx

61

1. Tulang anggota gerak atas (extremitas superior)

Gambar 2.36 Tulang anggota gerak atas

Tulang penyusun anggota gerak atas tersusun atas: (Scanlon, 20007:123)

a. Humerus / tulang lengan atas. Termasuk kelompok tulang panjang /pipa,

ujung atasnya besar, halus, dan dikelilingi oleh tulang belikat. pada bagian

bawah memiliki dua lekukan merupakan tempat melekatnya tulang radius

dan ulna.

b. Radius dan ulna / pengumpil dan hasta. Tulang ulna berukuran lebih besar

dibandingkan radius, dan melekat dengan kuat di humerus. Tulang radius

memiliki kontribusi yang besar untuk gerakan lengan bawah dibandingkan

ulna.

c. Karpal / pergelangan tangan. Tersusun atas 8 buah tulang yang saling

dihubungkan oleh ligamen

62

d. Metakarpal / telapak tangan. Tersusun atas lima buah tangan. Pada bagian

atas berhubungan dengan tulang pergelangan tangan, sedangkan bagian

bawah berhubungan dengan tulang-tulang jari (palanges)

e. Palanges (tulang jari-jari). Tersusun atas 14 buah tulang. Setiap jari

tersusun atas tiga buah tulang, kecuali ibu jari yang hanya tersusun atas 2

buah tulang.

2. Tulang anggota gerak bawah (ekstremitas inferior)

Tulang anggota gerak bawah disusun oleh tulang: (Seeley,dkk. 2004:233)

a. Femur / tulang paha. Termasuk kelompok tulang panjang, terletak mulai

dari gelang panggul sampai ke lutut.

b. Tibia dan Fibula / tulang kering dan tulang betis. Bagian pangkal

berhubungan dengan lutut bagian ujung berhubungan dengan pergelangan

kaki. Ukuran tulang kering lebih besar dibandingkan tulang betis karena

berfungsi untuk menahan beban atau berat tubuh. Tulang betis merupakan

tempat melekatnya beberapa otot.

63

Gambar 2.37 Tulang anggota gerak bawah.

c. Patela / tempurung lutut. Terletak antara femur dengan tibia, bentuk

segitiga. Patela berfungsi melindungi sendi lutut, dan memberikan

kekuatan pada tendon yang membentuk lutut.

d. Tarsal / Tulang pergelangan kaki. Termasuk tulang pendek, dan tersusun

atas 8 tulang dengan salah satunya adalah tulang tumit.

e. Metatarsal / Tulang telapak kaki. Tersusun atas 5 buah tulang yang

tersusun mendatar.

f. Palanges / tulang jari-jari tangan. Setiap jari tersusun atas 3 tulang kecuali

tulang ibu jari atas 14 tulang.

2.7.5 Tulang Gelang Bahu (clavicula dan scapula / belikat dan selangka)

Tulang selangka (clavicula) berbentuk seperti huruf "S", berhubungan

dengan tulang lengan atas (humerus) untuk membentuk persendian yang

64

menghasilkan gerakan lebih bebas, ujung yang satu berhubungan dengan tulang

dada sedangkan ujung lainnya berhubungan dengan tulang belikat.

Tulang belikat (skapula) berukuran besar, bentuk segitiga dan pipih,

terletak pada bagian belakang dari tulang rusuk. Fungsi utama dari gelang bahu

adalah tempat melekatnya sejumlah otot yang memungkinkan terjadinya gerakan

pada sendi. (Van de Graaf, 2001:173)

2.7.6. Gelang Panggul

Tulang gelang panggul terdiri atas dua buah tulang pinggung. Pada anak

anak tulang pinggul ini terpisah terdiri atas tiga buah tulang yaitu illium (bagian

atas), tulang ischiun (bagian bawah) dan tulang pubis (bagian tengah). Di bagian

belakang dari gelang panggul terdapat tulang sakrum yang merupakan bagian dari

ruas-ruas tulang belakang. Pada bagian depan terdapat simfisis pubis merupakan

jaringan ikat yang menghubungkan kedua tulang pubis. Fungsi gelang panggung

terutama untuk mendukung berat badan bersama-sama dengan ruas tulang

belakang. melindungi dan mendukung organ-organ bawah, seperti kandung

kemih, organ reproduksi, dan sebagai tempat tumbuh kembangnya janin. (Van de

Graaf, 2001:181)

65

Gambar 2.38 Gelang panggul

2.8 Studi Sejenis

Studi sejenis adalah studi yang sama yang sudah dilakukan oleh para

peneliti dalam hal ini penelitian tentang visualisasi. Hal ini dilakukan untuk

mengetahui kekurangan dan kelebihandari penelitian yang sama.

Perancangan dan Implementasi Computer Assisted Instruction Mata

Pelajaran Biologi Virus Berbasis Multimedia 3 Dimensi, oleh Fitria Yuni tahun

2010, menggunakan metodelogi M.Suyanto terdiri dari 11 tahap yaitu

mendefinisikan masalah, studi kelayakan, analisis kebutuhan sistem, merancang

konsep, merancang isi, merancang naskah, merancang grafik, memproduksi

sistem, mengetes sistem, menggunakan sistem dan memelihara sistem. Pada

skripsi ini penulis membahas tentang Virus yaitu parasit berukuran mikroskopik

yang menginfeksi sel organisme biologis. Virus hanya dapat bereproduksi di

dalam material hidup dengan menginvasi dan memanfaatkan sel makhluk hidup

karena virus tidak memiliki perlengkapan selular untuk bereproduksi sendiri.

66

Dalam sel inang, virus merupakan parasit obligat dan di luar inangnya menjadi tak

berdaya. Penulis membuat aplikasi pembelajaran ini terlihat menarik karena

menggunakan elemen-elemen multimedia dan pembuatan dengan frame by frame,

materi diambil langsung dari buku pelangi indonesia dan situs internet sesuai

dengan kurikulum yang berlaku di sekolah sehingga siswa dapat lebih mudah

mempelajarinya dan penulis menyarankan agar aplikasi pembelajaran terkoneksi

dengan internet juga dapat menerapkan materi-materi mata pelajaran lain.

Dalam Aplikasi Pembelajaran perkembangan Tumbuhan Berbasis

Multimedia, oleh Fitriyani tahun 2008 dengan menggunakan Luther (1994) yaitu

concept, desain, material collecting, assembly, testing dan distribution. Pada

skripsi ini penulis membahas tentang perkembangan tumbuhan seperti fotosintesis.

Penggunna dari aplikasi ini dapat berinteraksi langsung di dalam proses

pembelajarannya sehingga belajar menjadi lebih menyenangkan, mudah diingat,

dan tidak cepat bosan karena menggunakan elemen-elemen multimedia.

Dalam Aplikasi Pembelajaran Interaktif Fauna Indonesia Berbasis

Multimedia 3 Dimensi, oleh Nofitri Heriyani tahun 2010 dengan menggunakan

metodologi Luther (1994) yaitu concept, desain, material collecting, assembly,

testing dan distribution. Pada skripsi ini penulis membahas tentang

pengelompokan mahluk hidup berdasarkan pada kesamaan struktur tubuh yaitu

kelompok hewan vertebrata ( hewan bertulang punggung). Aplikasi ini di

peruntukan untuk siswa-siswi dengan usia batasan 6-14 tahun yang sudah bisa

membaca. Di skripsi ini penulis membuktikan keefektifan menggunakan

67

komputer untuk mendapatkan informasi dan menyarankan agar 3D yang dibuat

lebih detail lagi.

Aplikasi Pembelajaran HTML Berbasis Multimedia dengan Metode

Computer Assisted Instruction untuk SMA 1 Barunawati Jakarta, oleh Isna

Marliana tahun 2010 dengan metode desain CAI oleh Roblyer dan Hall (1994)

terdiri dari 3 fase : perancangan, pra-pemrograman dan pemrograman. Pada

skripsi skripsi ini dapat memberikan informasi secara jelas dan menarik mengenai

pembuatan hal web, interaktif karena pengguna dapat berinteraksi langsung

didalam proses pembelajarannya, dengan metode CAI menjadi lebih mudah

memahami sehingga menigkatkan minat siswa belajar, dan aplikasi ini dapat

digunakan kapan saja dan menyarankan agar dapat menggunakan database untuk

soal juga dapat diterapkan untuk pelajaran teknologi informasi dan komunikasi.

Aplikasi Pembelajaran dengan Global Illumination (Pencahayaan

Realistik) Menggunakan V-ray Pada Alat Pencernaan Manusia Berbasis 3D, oleh

Ratna Cahyaning Tyas tahun 2010. Menggunakan metodologi Luther (dalam

Ariesto Hadi Soetopo, 2003) yang terdiri dari 6 tahap yaitu concept, desain,

material collecting, assembly, testing dan distribution. Pada skrispsi ini penulis

membahas sistem pencernaan manusia yang terdiri dari mulut (oris), tekak

(faring), kerongkongan (oesophagus), lambung (ventrikulus), ususu halus, usus

besar (colon), dan anus. Evaluasi dari aplikasi ini mudah digunakan karena

menggunakan media interaktif yang berbasis multimedia dengan navigasi yang

mudah dan tidak membingungkan sehingga membantu proses belajar.

68

Visualisasi Edukatif Sistem Pencernaan Manusia Sebagai Alat Bantu Ajar

Biologi Berbasis Multimedia, oleh Friska Violita Wardhani tahun 2010.

Menggunakan metodelogi Luther yang dilakukan 6 tahap, yaitu konsep,

perancangan, pengumpulan bahan, pembuatan, testing, dan distribusi. Pada

aplikasi ini penulis membahas tentang sistem pencernaan makanan berhubungan

dengan penerimaan makanan dan prosesnya sehingga siap memasuki proses

metabolisme di dalam tubuh sebagai menyediakaan suplai terus menerus pada

tubuh akan air , elekrolit dan zat gizi, sehingga siap di absorbsi. Penulis membuat

aplikasi ini menggunakan teknik proyeksi perspektif dan animasinya

menggunakan teknik transformasi 3D dengan peroses epmutaran dan penskalaan.

Penilus menyaraan akan agar aplikasi dikembangkan untuk mata pelajaraan

lainnnya.

Visualisasi 3 Dimensi Gedung Fakultas Sains dan Teknologi UIN Syarif

Hidayatullah, oleh Arafik tahun 2010 dengan menggunakan metode Luther yang

terdiri dari 6 tahap yaitu konsep, perancangan, pengumpulan bahan, pembuatan,

testing, dan distribusi. Penulis membahas tentang tata gedung sains dan teknologi

yang mempunyai 7 lantai agar terciptanya sebuah informasi tata letak ruang yang

memvisualisasikan gedung serta ruang-ruang pada falkutas sains dan teknologi

yang dapat di terapkan untuk menggantikan stand informasi. Sehingga pengguna

dapat dengan leluasa mencari lokasi yang di inginkan.

Dalam analisis dan perancangan teknik 3 dimensi pada pembuatan iklan

produk jam tangan tagheuer berbasisi multimedia oleh Deni Tri Purwanti pada

tahun 2010, menggunakan metode luther dengan 6 tahap yaitu konsep,

69

perancangan, pengumpulan bahan, pembuatan, testing, dan distribusi. Dalam

skripsi tersebut menjelaskan tentang pebuatan iklan produk jam yang bisa menjadi

media prensentasi, interaktif, menarik dan mudah digunakan oleh para user untuk

membuat suatu iklan dengan perancangan teknik 3 dimensi berbasis multimedia.

Dari beberapa penelitian di atas menggunakan 3 dimensi hanya saja hanya

bisa merotasi satu arah pada modeling 3 dimensi sedangkan dengan dapat

memutar 3 dimensi lebih luas sehingga dapat mendetail dalam mempelajarinya

dan juga lebih cepat mengerti jika 3 dimensi lebih interaktif dari sebelumnya. Dari

penelitian di atas gambar yang ada di aplikasi di atas tidak interaktif sedangkan

dengan dapat memperbesar bagian-bagian gambar bisa lebih jelas melihat secara

detail dari gambar yang diperagakan tersebut.

70

BAB III

METODOLOGI PENELITIAN

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

relatif lengkap sebagai bahan yang dapat mendukung kebenaran materi uraian dan

pembahasan. Oleh karena itu, sebelum menyusun skripsi ini, dalam persiapannya

terlebih dahulu dilakukan riset atau penelitian untuk menunjang data serta

informasi atau bahan materi yang diperlukan.

3.1 Metode pengumpulan Data

3.1.1. Studi Kepustakaan

Untuk menambah referensi akan teori-teori yang diperlukan, penulis

melakukan studi pustaka dengan membaca dan mempelajari secara mendalam

literatur yang mendukung penelitian ini. Yaitu seperti buku-buku yang berkaitan

dengan aplikasi, media pembelajaran, struktur rangka tubuh manusia, multimedia

interaktif dan beberapa buku mengenai software yang peneliti gunakan seperti,

Adobe Photoshop CS, 3D Studio Max, Adobe Flash CS3 dan Macromedia

Director.

Selain itu penulis mengunjungi (browsing) situs-situs yang berhubungan

dengan topik yang dibahas dalam penyusunan skripsi ini. Penulis juga

mengumpulkan data-data berupa gambar dan informasi yang akurat mengenai

struktur rangka tubuh manusia.

71

3.2 Studi Lapangan

3.2.1 Wawancara

Wawancara memungkinkan penulis sebagai pewawancara untuk

mengumpulkan data secara tatap muka langsung dengan orang yang

diwawancarai. Wawancara dilakukan untuk memperoleh data-data yang di

perlukan dalam penulisan skripsi. Dalam hal ini yaitu Ibu Dr. Saraswati, MARS.

selaku kepala Rumah Sakit Setia Mitra dan Bapak Wisnu Pramono, Dpl.Rad.

selaku KASUBAG Radiologi pada tanggal 11 Januari 2011. Hasil terdapat di

lampiran.

3.2.2 Kuisioner

Dengan menggunakan metode ini penulis mengumpulkan data dengan

melakukan survey ke Rumah Sakit Setia Mitra, yang beralamat di jalan R.S.

Fatmawati No.80 – 82, Jakarta Selatan pada tanggal 20 Juli 2011. Dengan

menyebarkan kuisioner kepada radiografer sebanyak 30 orang. Tujuannya untuk

mengetahui layak apa tidaknya aplikasi visualisasi 3 dimensi yang akan

dikembangkan oleh peneliti. Hasil terdapat pada lampiran.

3.2 Metode Pengembangan Multimedia

Untuk pengembangan multimedia, penulis akan menggunakan metode

Pengembangan Multimedia menurut Vaughan dalam Binanto (2010) yang terdiri

dari empat tahap, yaitu perencanaan, desain dan produksi, pengujian, dan

distribusi, seperti gambar di bawah ini:

Gambar

3.2.1 Perencanaan

Tahap perencanaan mencakup tentang

elemen multimedia yang di

membuat program tersebut, dan bagaimana produk akhir didistribusikan.

3.2.2 Desain dan Produksi

Desain adalah tahap membuat spesifikasi mengenai arsitektur program,

gaya, tampilan dan kebutuhan material/ bahan untuk program

yaitu membuat storyboard

dan Pengumpulan / pencarian isi

Setelah desain sel

instruksi langkah demi langkah pembuatan produk. Produksi merupakan

ketika proyek multimedia benar

3.2.3 Pengujian

Pengujian program wajib dilakukan untuk memeriksa dan

bahwa program yang dibuat sudah benar

pengguna. Penulis menggunakan pengujian

Perencanaan

Desain

Pengujian

Gambar 3.1 Siklus Pengembangan Aplikasi Multimedia

Tahap perencanaan mencakup tentang siapa pengguna program. E

elemen multimedia yang digunakan, banyak waktu yang digunakan untuk


roduksi

adalah tahap membuat spesifikasi mengenai arsitektur program,

gaya, tampilan dan kebutuhan material/ bahan untuk program. Yang dilak

storyboard, mendesain struktur navigasi, mendesain Antarmuka

Pengumpulan / pencarian isi.

Setelah desain selesai produksi dimulai, rencana proyek menjadi panduan

instruksi langkah demi langkah pembuatan produk. Produksi merupakan

ketika proyek multimedia benar-benar dirender menghasilkan suatu produk.

Pengujian program wajib dilakukan untuk memeriksa dan m

a program yang dibuat sudah benar-benar sesuai dengan keperluan

Penulis menggunakan pengujian Black-box.

Perencanaan

Desain dan Produksi

Pengujian

Pendistribusian

72

Siklus Pengembangan Aplikasi Multimedia

siapa pengguna program. Elemen

waktu yang digunakan untuk


adalah tahap membuat spesifikasi mengenai arsitektur program,

. Yang dilakukan

endesain Antarmuka,

produksi dimulai, rencana proyek menjadi panduan

instruksi langkah demi langkah pembuatan produk. Produksi merupakan tahap

menghasilkan suatu produk.

memastikan

benar sesuai dengan keperluan

73

3.2.4 Distribusi

Tahap ini aplikasi akan disimpan dalam suatu media penyimpanan dan jika

media penyimpanan tidak cukup untuk menampung aplikasinya, maka dilakukan

kompresi terhadap aplikasi tersebut. Tahap distribusi juga merupakan tahap

evaluasi terhadap suatu produk multimedia, diharapkan akan dapat dikembangkan

sistem multimedia yang lebih baik di kemudian hari.

74

BAB IV

ANALISA DAN PEMBAHASAN

Pembuatan visualisasi 3D struktur rangka pada manusia ini didasarkan

pada empat tahap Vaughan (Iwan Binanto, 2010:264) yaitu perencanaan, desain

dan produksi, pengujian dan distribusi. Untuk memudahkan dalam pengembangan

visualisasi 3D pada struktur rangka manusia, penulis membuat pembahasan secara

rinci mengenai pengembangan visualisasi 3D struktur rangka pada manusia.

4.1 Perencanaan

Pembangunan visualisasi 3 dimensi struktur rangka pada manusia ini

mengguakan teknologi multimedia dengan menggabungkan unsur teks, animasi,

gambar, video dan suara. Visualisasi ini digunakan sebagai pembelajaran dalam

ilmu radiologi dengan menampilkan objek 3 dimensi struktur rangka agar mudah

mempresentasi atau mempelajarinya. Pada modeling akan dibuat dengan teknik

polygon modeling dan video 3D menggunakan teknik fill light dan key light.

Elemen gambar menggunakan PSD dan JPG karena dalam PSD (Photoshop

Document) mampu menyimpan informasi layer dan transparency, dan text yang

terdapat pada sebuah gambar, sehingga suatu saat dapat dibuka kembali jika ada

perubahan desain interface. Sedangkan JPG karena file JPG telah di kompresi

sehingga kecil ukurannya dan juga file JPG dapat diterima pada hampir semua

program-program komputer. Audio menggunakan file Mp3 karena merupakan

75

sebuah file audio yang dikompresi (compressed audio file), yang dihasilkan oleh

format audio lainnya. Pada video menggunakan file FLV karena memiliki ukuran

yang kecil juga agar bisa di tampilkan dalam flash. File animasi dibuat dengan

format SWF karena file tersebut merupakan hasil jadi dari animasi yang dibuat

dengan Adobe Flash CS3. Pada 3D file yang digunakan W3D karena dengan

mengunakan file tersebut sebuah objek 3D dapat dirotasi dan diperbesar juga

perkecil. Interface menggunakan warna hijau karena melambangkan kesegaran

yang identik dengan kedokteran dan warna putih karena melambangkan

kebersihan atau streril.

Setelah produksi selesai pada tahap distribusi nantinya adalah program

jadi dalam bentuk .EXE yang disimpan dalam media penyimpanan CD.

Tabel 4.1 Deskripsi Konsep

Judul Visualisasi 3 dimensi struktur rangka manusia

Audiens Radiografer

Gambar Menggunakan File berformat .jpg dan .psd

Audio Mengunakan File .mp3 dengan bitrate 64 Kbit

Video Menggunakan File berformat .flv

Animasi teks Animasi pada teks di buat sendiri

Interaktif Menggunakan video, foto, animasi, dan tombol navigasi untuk berpindah dari satu menu ke menu lainnya.

76

Tabel 4.2 Rencana Kerja Pembuatan Proyek Skripsi

4.2 Desain dan Produksi

Dalam tahap ini penulis melakukan pembuatan storyboard, struktur

navigasi, mendesain interface (antarmuka), pengumpulan dan pencarian isi, dan

produksi.

4.2.1 Storyboard

Storyboard merupakan deskripsi tiap scene (tampilan), dengan

mencantumkan semua objek multimedia dan link ke scene lain (Suyanto, 2003:

No KegiatanBulan Ke-

1Bulan Ke-

2Bulan Ke-

3Bulan Ke-

41 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

1Membuat peta navigasi

2 Storyboard

3merancang Antarmuka (interface)

4pencarian dan pengumpulan isi

5 3D modeling

6mendigitalkan Audio dan video

7 merevisi desain8 membuat grafis9 membuat animasi

10asemmbly (pemrograman)

11 produksi12 pengujian13 memperbaiki bug14 distribusi

375). Secara umum rancangan

rangka pada manusia.

Scene

1

Form Name Link Keterangan

375). Secara umum rancangan storyboard dalam visualisasi 3 dimensi

Tabel 4.3 Storyboard

Visual

: Intro: Scene 2: Menampilkan halaman pembuka

77

ensi struktur

Sound

Sound1.mp3

drivin dat funky daisy.mp3

2

Form Name Link Keterangan :

3

Form Name : Visualisasi 3DLink : Keterangan : Menampilkan visualisasi 3 dimensi

: Home: Scene 3,4,5,6

gan :Menampilkan Penjelasan secara umum tentang sistem rangka manusia

: Visualisasi 3D: Scene 2,4,5,6: Menampilkan visualisasi 3 dimensi struktur rangka manusia dan pengguna bisa merotasi dan membesar dan mengecilkan objek 3 dimensi

78

ChuckBrown_November.mp3

Sound1.mp3

bisa merotasi dan

ChuckBrown_November.mp3

Sound1.mp3

Pling.mp3

4

Form Name : Link : Keterangan : Menampilkan materi tentang

5

Form Name : BantuanLink : Keterangan : Menampilkan bantuan dari tombol navigasi

: Materi: Scene 2,3,5,6,7,8,9,10,11: Menampilkan materi tentang struktur rangkadan bagian-bagiannya

Tampilan menu rangka diwakili dengan kotak-kotak.

: Bantuan: Scene 2,3,4,6: Menampilkan bantuan dari tombol navigasi yang ada pada visualisasi 3 dimensi ini.

79

ChuckBrown_November.mp3Sound1.mp3Pling.mp3

ChuckBrown_November.mp3Sound1.mp3

80

6

Form Name : ProfilLink : Scene 2,3,4,5Keterangan : Menampilkan profil dari penulis sekaligus

pembuat visualisasi 3D struktur rangka ini.


7

Form Name : Materi TengkorakLink : Scene 2,3,4,5,6,11,12,13Keterangan : Menampilkan materi tengkorak secara khusus

yang dilengkapi dengan teks, gambar, dan video 3D


81

8

Form Name : Materi RusukLink : Scene 2,3,4,5,6,14,15,16Keterangan : Menampilkan materi tengkorak secara khusus



9

Form Name : Materi Tulang BelakangLink : Scene 2,3,4,5,6,17,18,19Keterangan : Menampilkan materi tengkorak secara khusus



82

10

Form Name : Materi Ektremitas AtasLink : Scene 2,3,4,5,6,20,21,22Keterangan : Menampilkan materi tengkorak secara khusus



11

Form Name : Materi Ekstremitas BawahLink : Scene 2,3,4,5,6,23,24,25Keterangan : Menampilkan materi tengkorak secara khusus



83

4.2.2 Flowchart

Perancangan flowchart menggambarkan tahapan proses dari suatu sistem,

termasuk sistem multimedia. (Suyanto,2003:364)

Gambar 4.1 Rancangan Flowchart Intro

Gambar 4.1 menjelaskan halaman awal dari aplikasi. Jika pengguna

memilih masuk maka akan menuju halaman menu utama. Jika pengguna memilih

keluar maka aplikasi akan tertutup.

Keterangan

A: Halaman menu utama

84

Gambar 4.2 Rancangan Flowchart Menu Utama

Gambar 4.2 flowchart ini menjelaskan bahwa halaman menu utama berisi

5 proses, yakni untuk menuju menu utama, visualisasi 3 dimensi, materi, bantuan

dan profil. Jika pengguna memilih materi maka akan terhubung ke menu materi

Keterangan

A: Halaman menu utama

B: Halaman materi

85

dan jika tidak makan pengguna bisa memilih menu lainnya atau keluar dari

program.

Gambar 4.3 Flowchart Menu Materi

Gambar 4.3 flowchart ini menjelaskan bahwa dalam menu materi terdapat

5 proses, yakni materi tengkorak, materi rusuk, materi tulang belakang, materi

ekstremitas atas dan materi ekstremitas bawah. Jika pengguna memilih salah satu

Keterangan

B: Halaman menu materi

C: Halaman sub menu materi tengkorak

D: Halaman sub menu materi rusuk

E: Halaman sub menu materi

Tulang belakang

F: Halaman sub menu materi

Ekstremitas atas

G: Halaman sub menu materi

Ekstremitas bawah

86

proses tersebut maka akan terhubung ke menu yang diinginkan dan jika “tidak”

maka pengguna bisa memilih menu lainnya atau keluar dari program.

Gambar 4.4 Flowchart Sub Menu Materi Tengkorak

Gambar 4.4 flowchart ini menjelaskan bahwa dalam sub menu materi

tengkorak berisi 3 proses, yakni sub menu penjelasan tengkorak, sub menu

gambar tengkorak, dan sub menu video tengkorak. Jika pengguna memilih salah

satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih

sub menu lainnya atau keluar dari program.

Keterangan

C: Halaman sub menu materi tengkorak

87

D

Pilih Penjelasan

Pilih Gambar

Pilih Video

Tampilkan Penjelasan Rusuk

Tampilkan Gambar Rusuk

Tampilkan Video Rusuk

Ya

Tidak

Ya

Tidak

Ya

Tampilkan Layar Rusuk

Keluar

Tidak

Gambar 4.5 Flowchart Sub Menu Materi Rusuk


rusuk berisi 3 proses, yakni sub menu penjelasan rusuk, sub menu gambar rusuk,

dan sub menu video rusuk. Jika pengguna memilih salah satu proses maka akan

dilakukan dan jika “tidak” maka pengguna bisa memilih sub menu lainnya atau

keluar dari program.

Keterangan

D: Halaman sub menu materi rusuk

88

Gambar 4.6 Flowchart Sub Menu Materi Tulang Belakang


tulang belakang berisi 3 proses, yakni sub menu penjelasan tulang belakang, sub

menu gambar tulang belakang, dan sub menu video tulang belakang. Jika

pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka

pengguna bisa memilih sub menu lainnya atau atau keluar dari program.

Keterangan

E: Halaman sub menu materi

Tulang belakang

89

Gambar 4.7 Flowchart Sub Menu Materi Ektremitas Atas


ektremitas atas berisi 3 proses, yakni sub menu Penjelasan ektremitas atas, sub

menu gambar ektremitas atas, dan sub menu ektremitas atas. Jika pengguna

memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna

bisa memilih sub menu lainnya atau keluar dari program.

Keterangan

F: Halaman sub menu materi

Ekstremitas atas

90

Gambar 4.8 Flowchart Sub Menu Materi Ektremitas Bawah


ektremitas bawah berisi 3 proses, yakni sub menu penjelasan ektremitas bawah,

sub menu gambar ektremitas bawah, dan sub menu ektremitas bawah. Jika

pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka

pengguna bisa memilih sub menu lainnya atau keluar dari program.

Dari rancangan flowchart di atas penulis menyimpulkan bahwa dalam

tampilan menu utama sebagai pembuka dan pilihan menu ditampilkan sekaligus

untuk efisiensi dan kemudahan akses dari menu utama ke sub menu.

Keterangan

G: Halaman sub menu materi

Ekstremitas bawah

91

4.2.3 Perancangan Struktur Navigasi

Struktur navigasi yang digunakan adalah hierarkis model karena lebih

mudah digunakan oleh pengguna. Pada model ini dapat dilihat penggunaan setiap

scene yang dihubungkan dengan scene lainnya. Untuk lebih jelasnya dapat dilihat

pada Gambar 4.9.

Gambar 4.9 Rancangan Struktur Navigasi

92

4.2.4 Perancangan State Diagram Transition (STD)

1. Rancangan Struktur Intro

IntroKlik “Mulai”

Tampilkan halamanmenu utama

Menu Utama

Gambar 4.10 Rancangan STD Intro

2. Rancangan Struktur Menu Utama

Menu Utama(HOME)

Bantuan Profil

MateriVisualisasi

3D

Klik “Home”Tampilkan halaman

menu utama

Klik “Materi”Tampilkan halaman

Materi

Klik “Visualisasi 3D”Tampilkan halaman

Visualisasi 3D


menu utama

Klik “Bantuan”Tampilkan halaman

Bantuan


menu utama

Klik “Profil”Tampilkan halaman

Profil


menu utama

Gambar 4.11 Rancangan STD Menu Utama

93

3. Rancangan menu visualisasi 3D

Gambar 4.12 Rancangan Menu Visualisasi 3D

4. Rancangan menu materi

Gambar 4.13 Rancangan STD Menu Materi

94

5. Rancangan menu tengkorak

Tengkorak

Materi

Gambar

Penjelasan

Video

Klik “tengkorak”Tampilkan Tengkorak


Klik “Gambar”Tampilkan Gambar

Klik “Penjelasan”Tampilkan pejelasan



Klik “Video”Tampilkan Video

Gambar 4.14 Rancangan Menu Tengkorak

6. Rancangan menu rusuk

Gambar 4.15 Rancangan Menu Rusuk

95

7. Rancangan menu tulang belakang

Gambar 4.16 Rancangan Menu Tulang Belakang

8. Rancangan menu ekstremitas atas

Gambar 4.17 Rancangan Menu Ekstremitas Atas

96

9. Rancangan menu ekstremitas bawah

Gambar 4.18 Rancangan Menu Ekstremitas Bawah

10. Rancangan menu Bantuan

Gambar 4.19 Rancangan STD Menu Bantuan

97

11. Rancangan menu Profil

Gambar 4.20 Rancangan STD Menu Profil

4.2.5 Mendesain Antarmuka (interface)

Rancangan antarmuka pemakai (user interface) yang akan ditampilkan

pada aplikasi multimedia ini akan disesuaikan dengan kebutuhan pengguna dan

pengetahuan pengguna. Pada program visualisasi 3D struktur rangka pada

manusia terdapat 7 rancangan layar, yaitu:

1. Rancangan layar intro

Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan

utama. Pada tampilan intro ini terdapat tombol untuk melanjutkan ke

menu utama yaitu tombol mulai untuk memulai program.

2. Rancangan layar menu utama

Rancangan ini berfungsi sebagai tampilan utama program yang

menyediakan 6 tombol menu yaitu : home,

bantuan, profil. Pada tampilan menu ini juga terdapat tombol on / off

music dan exit. Pada tampilan berisikan tentang sekilas seputa

struktur rangka

Gambar 4.21 Rancangan Pembukaan Program

Rancangan layar menu utama


menyediakan 6 tombol menu yaitu : home, visualisasi 3D, materi,


music dan exit. Pada tampilan berisikan tentang sekilas seputa

struktur rangka manusia.

98

rogram


visualisasi 3D, materi,


music dan exit. Pada tampilan berisikan tentang sekilas seputar

3. Rancangan layar visualisasi 3D

Pada rancangan visualisasi 3D ini berfungsi

rangka dengan 3 dimensi. Di rancangan ini terdapat 8 tombol yaitu :

panah atas, panah bawah, panah kiri, panah kanan,

zoom out.

Pada tombol panah berfungsi merotasi 3 dimensi

Tanda zoom in

memperkecil objek 3 dimensi

digunakan untuk mengembalikan 3 dimensi

semula.

Gambar 4.22 Rancangan Menu Utama

Rancangan layar visualisasi 3D

Pada rancangan visualisasi 3D ini berfungsi menampilkan

dengan 3 dimensi. Di rancangan ini terdapat 8 tombol yaitu :

panah atas, panah bawah, panah kiri, panah kanan, reset, zoom in,

Pada tombol panah berfungsi merotasi 3 dimensi struktur rangka

zoom in dan zoom out berfungsi untuk memper

memperkecil objek 3 dimensi struktur rangka dan untuk tombol

digunakan untuk mengembalikan 3 dimensi struktur rangka

99

menampilkan struktur

dengan 3 dimensi. Di rancangan ini terdapat 8 tombol yaitu :

reset, zoom in, dan

struktur rangka.

berfungsi untuk memperbesar dan

dan untuk tombol reset

struktur rangka ke posisi

Gambar 4.

4. Rancangan layar materi

Pada rancangan menu materi ini berfungsi untuk menampilkan materi

seputar struktur rangka

menu untuk mengakses tiap bagian

rusuk, tulang belakang, ekstremitas atas dan ekstremit

Gambar 4.23 Rancangan Menu Visualisasi 3 Dimensi

Rancangan layar materi


struktur rangka manusia. Pada menu ini juga disajikan tombol

menu untuk mengakses tiap bagian struktur rangka yaitu: tengkorak,

rusuk, tulang belakang, ekstremitas atas dan ekstremitas bawah.

100

imensi


manusia. Pada menu ini juga disajikan tombol

yaitu: tengkorak,

as bawah.

5. Rancangan layar sub menu materi

Pada rancangan ini berfungsi sebagai pemberi keterangan dari tiap

masing-masing bagian dari

yang disediakan pada rancangan ini yaitu :

Pada materi berisi berupa teks yang menjelaskan

materi yang

visualisasi gambar dari materi yang telah dipi

bisa diperbesar agar

tulang pada manusia. Dan pada tombol video menampilkan video 3

dimensi tentang materi yang di

Gambar 4.24 Rancangan Menu Materi

Rancangan layar sub menu materi


masing bagian dari struktur rangka pada manusia. Tombol

sediakan pada rancangan ini yaitu : materi, gambar dan video.

Pada materi berisi berupa teks yang menjelaskan bagian-bagian dari

materi yang terdapat pada menu materi. Pada tombol gambar berupa

visualisasi gambar dari materi yang telah dipilih dan gambar tersebut

perbesar agar pengguna dapat melihatnya dengan jelas struktur


dimensi tentang materi yang dipilih oleh pengguna.

101


pada manusia. Tombol

materi, gambar dan video.

bagian dari

erdapat pada menu materi. Pada tombol gambar berupa

lih dan gambar tersebut

dapat melihatnya dengan jelas struktur


102

Gambar 4.25 Rancangan Sub Menu Materi

6. Rancangan layar bantuan

Rancangan ini berisi untuk menampilkan informasi cara penggunaan

program. Rancangan ini akan ditampilkan secara singkat agar bisa

memenuhi kebutuhan pengguna dan mempermudah pengguna dalam

menggunakan program ini.

103

Gambar 4.26 Rancangan Menu Bantuan

7. Rancangan layar profil

Rancangan ini berfungsi untuk menampilkan informasi tentang

penulis.

Gambar 4.27 Rancangan Menu Penulis

104

4.2.6 Pengumpulan / Pencarian Isi

Pegumpulan/ pencarian isi (bahan) berupa File-File audio, video, gambar,

foto, teks dilakukan dengan cara mengambil dari berbagai sumber dan

membuatnya sendiri. Bahan yang berupa File gambar diambil dari buku koleksi

pribadi. File audio penulis mendapatkannya dari internet. Sedangkan File video,

animasi, dan 3D dibuat sendiri oleh penulis.

Tabel 4.4 Tabel File yang Digunakan

No Nama File Jenis Formatyang digunakan

Sumber

1 Background Gambar PSD Buatan Sendiri

2 Tombol

Navigasi

Gambar PSD Buatan Sendiri

3 Gambar

Rangka

Animasi JPG Buku Kedokteran

4 Intro Animasi SWF Buatan Sendiri

5 Video Rangka Video FLV Buatan Sendiri

6 Backsound Audio MP3 Internet

7 Rangka 3D Shockwave 3D W3D Buatan Sendiri

105

4.2.7 Produksi

Dalam pembuatan visualisasi 3 dimensi struktur rangka pada manusia ini

dibutuhkan spesifiksi perangkat lunak sebagai berikut:

1. Spesifikasi perangkat lunak

Untuk mengembangkan aplikasi ini penulis membutuhkan spesifikasi

perangkat lunak sebagai berikut :

a. Adobe Photoshop CS3, dengan spesifikasi Intel Pentium 4,

Microsoft Windows XP with Service Pack 2, Java Runtime

Environment 1.5, Ram 2 Gb atau lebih. Photoshop digunakan

sebagai perangkat lunak untuk mempekecil ukuran File foto yang

digunakan dalam aplikasi serta untuk mendesain gambar tampilan

layar program, editing gambar atau foto.

b. 3Ds Max 2009, dengan spesifikasi Intel Pentium IV , 512 MB

RAM, 500 MB penyimpanan hardisk. 3D max digunakan sebagai

perangkat lunak untuk perancangan bunga kering tiga dimensi dan

untuk menganimasikan bunga tiga dimensi menggunakan animasi

kamera.

c. Adobe Flash CS3, dengan spesifikasi Intel Pentium 4, Microsoft

Windows XP with Service Pack 2, Java Runtime Environment 1.5,

Ram 2 Gb atau lebih. Flash digunakan sebagai perangkat lunak

untuk pengembangan animasi interaktif, juga animasi tombol yang

diperlukan dalam program ini.

106

d. Macromedia Director MX, dengan spesifikasi Intel Pentium III

600 MHz, 128 MB RAM, 200 MB penyimpanan memori. Director

digunakan sebagai perangkat lunak utama yang berfungsi

menggabungkan semua komponen program yang telah dibuat

dengan menggunakan perangkat lunak ini maupun perangkat lunak

pengembangan lainnya.

e. Audacity, Windows 2000, XP, RAM 512 MB digunakan sebagai

perangkat lunak untuk mengedit audio agar lebih menarik.

2. Spesifikasi perangkat keras

Untuk mengembangkan sistem ini penulis membutuhkan spesifikasi

perangkat keras, yaitu :

a. Processor intel Pentium 4, berfungsi untuk memberikan proses

kinerja, kreativits dan produktivitas yang lebih tinggi.

b. Memory 2048 Mbytes berfungsi untuk mempercepat proses

publish, rendering video dan juga objek 3 dimensi. Sekaligus

sebagai tempat penyimpanan sementara perangkat lunak dan data.

c. Graphic Card 128 Mbytes berfungsi mempercepat penampilan

gambar pada layar.

d. DVD-RW, berfungsi untuk penyimpanan program ke dalam bentuk

kepingan CD.

e. Mouse, berfungsi sebagai alat interaksi penggunaan perangkat

lunak pengembangan dan secara umum sebagai alat interaksi yang

penting dalam pembuatan aplikasi ini.

107

f. Keyboard, berfungsi untuk penulisan listing program dan secara

umum sebagai alat interaksi yang penting pada pembuatan program

ini.

g. Active Speaker, berfungsi untuk mendengarkan suara pada program

ini.

h. Monitor 14”, berfungsi sebagai media interface (antarmuka) atau

penghubung antara pengguna dengan komputer sehingga tampilan

program dapat dilihat penulis.

i. Hard disk 80 GB berungsi untuk menyediakan tempat bagi

program perangkat lunak dan menyediakan tempat penyimpanan

untuk keperluan program yang akan dibuat.

Setelah spesifikasi pengembangan dapat dipenuhi tahap selanjutnya adalah

pembuatan program. Dalam proses pembuatan desain gambar latar penulis

menggunakan Adobe Photoshop CS3, desain menggunakan kombinasi warna dan

langkah awal penulis mendesain tampilan halaman intro. Untuk mendapatkan

tampilan yang diinginkan penulis memakai tampilan didominasi dengan warna

hijau yang melambangkan kesegaran yang identik dengan kedokteran dan warna

putih yang melambangkan kebersihan atau streril. Dalam pembuatan ini memakai

resolusi 1024 x 768 karena agar kualitas gambarnya tinggi.

108

Gambar 4.28 Tampilan Background

Tampilan button, teks dan efek-efek lainnya penulis menggunakan aplikasi

Adobe Flash CS3, yang setelah jadi File disimpan berformat .swf. kemudian File

tersebut penulis gabungkan dengan macromedia director MX.

Untuk File button, menu, teks title dan tampilan setiap halaman penulis

menggunakan adobe photosop CS3. File tersebut penulis buat agar telihat

menarik dan disimpan dengan format File .psd. kemudian File tersebut di

animasikan agar terlihat menarik dengan menggunakan adobe flash CS3 dan di

simpan dengan File berformat .swf

Gambar 4.29 Tampilan Button

109

File suara penulis peroleh dari koleksi pribadi dan mencari di internet.

Semua File suara berformat .mp3.

File teks yang diperoleh berupa informasi yang berkaitan dengan struktur

rangka berupa bahasa inggris yang kemudian dirangkum dan ditranslate sehingga

menjadi inti sari untuk disajikan dalam program.

Objek 3 dimensi yang penulis desain sendiri menggunakan 3D max 2009.

Berikut ini adalah pembuatan modeling 3 dimensi struktur rangka: hal yang paling

mendasar pada proses 3D adalah modeling yang artinya membuat objek 3 dimensi

yang nantinya akan digunakan pada program.

3. Modeling 3D

Beberapa tahapan penting selama pengembangan program ini akan

dibahas di bawah ini.

a. Pada pembuatan rangka mula-mula masukan gambar yang ingin di

buat—biasanya berupa File jpg yang sudah di siapkan oleh penulis,

drag gambar objek tersebut dan letakan pada plane. Aktifkan see-

through pada objek property agar cylinder menjadi transparan agar

mudah di bentuk sesuai gambar pada plane. Kemudian select

cylinder dan lakukan convert ka editable poly.

110

Gambar 4.30 Tampilan Kerja Objek Saat Memasukan Objek

Tahap selanjutnya penulis mengatur vertex sehingga menyerupai

objek yang sesuai dengan image yang di masukan sebelumnya.

Lakukan seakurat mungkin sehingga benar-benar menyerupai

objeknya.

Gambar 4.31 Tampilan Objek Setelah Dibentuk

Penulis membuat model satu per satu dahulu dengan cara yang

sama seperti di atas lalu kemudian nanti digabung menjadi satu.

111

Proses modeling memakan waktu yang cukup lama untuk membuat

semua modeling 3 dimensi dari struktur rangka tersebut.

Gambar 4.32 Objek 3 Dimensi Struktur Rangka

b. Pemberian texture dan material

Proses pemberian material pada rangka ini menetukan karakteristik

sebuah material objek dari segi texture. Texture bisa digunakan

untuk membuat berbagai variasi warna, tingkat kehalusan atau

kekasaran sebuah lapisan objek secara detail.

Untuk mengakses material, tekan M untuk memunculkan material

editor. Kemudian pilih slot map yang kosong lalu klik kotak abu-

abu disamping pilihan difuse. Lalu pilih bitmap, browse dan pilih

material rangka yang digunakan. Kemudian tarik material slot ke

arah permukaan layar rangka.

112

Gambar 4.33 Tampilan Material

Penulis memberikan material pada objek dengan material yang

telah yang telah penulis buat menggunakan adobe photosop CS3.

c. Proses export 3D

Pada proses renderasi penulis merender ke File .W3D (Shockwave

3D scene export). Pilih File pada menu bar kemudian export.

113

Gambar 4.34 Tampilan Export Shockwave 3D

Keuntungan dari .W3D adalah kita bisa merotasi objek secara

bebas tanpa dibatasi. Jadi lebih bisa lebih jelas ketika menpelajari

struktur rangka.

Gambar 4.35 Tampilan Shockwave 3D Setelah Diexport

114

d. Pembuatan animasi 3D

Animasi yang buat seluruhnya dengan menggunakan aplikasi 3D

max 2009. Dimungkinkan untuk menghidupkan posisi, rotasi dan

skala dari suatu objek, dan hampir semua pengaturan parameter

yang mempengaruhi bentuk benda dan permukaan. Untuk

membuat animasi 3D mula-mula penulis menentukan panjang

durasi animasi per frame pada time configuration. Penulis disini

menggunakan 800 frame mengisi end time dengan 800 agar video

yang di render tampak halus ketika di putar.

Gambar 4.36 Time Configuration

Kemudian Key menentukan keadaan sebuah benda pada waktu

tertentu. Animasi diciptakan sebagai objek bergerak. Control key

ini terletak di sebalah kiri time control. Kemudian penulis memilih

obejek pada frame ke- 0.

115

Gambar 4.37 Auto Key

Klik frame ke-100 kemudian pilih objek dan di rotasi 90 derajat.

Lakukan hal yang sama tiap 100 frame seperti gambar berikut:

Gambar 4.38 Pengaturan Frame Pada Objek

e. Proses rendering

Rendering adalah proses akhir dari keseluruhan proses permodelan

ataupun animasi komputer. Dalam rendering, semua data yang

sudah dimasukan dalam proses modeling, animasi, teksturing

tertentu akan diterjemahkan dalam sebuah bentuk output. Dalam

standar sistem NTSC karena hasil video yang dihasilkan lebih

halus, dengan resolusi sebuah render adalah 640 x 480 pixels.

Langkah rendering pertama yaitu pilih option render dengan

settingan berikut : tekan F10 pada keyboard dan ubah time output

ke active segmen 0 to 800.

116

Gambar 4.39 Render setup

Kemudian scroll ke bawah dan klik Files pada render output lalu

letakan File di tempat yang telah disediakan. Ubah save as type

menjadi .AVI. kemudian klik save setelah memberi nama pada File

lalu render.

Gambar 4.40 Penyimpanan File

f. Pembuatan rotasi objek 3D

Setelah jadi objek 3D jadi maka membuat rotasi pada macromedia

director dengan menggunakan lingo script yang ada pada tombol

navigasi.

117

Gambar 4.41 Tombol Navigasi

Pada tombol panah atas menggunakan script

on mouseenter mepuppetsound 3,"pling"end

on mousewithin memember("rangka").model[1].rotate(1, 0, 0)updatestageend

Pada tombol panah bawah mengunakan script

on mouseenter mepuppetsound 3,"pling"

end

on mousewithin memember("rangka").model[1].rotate(-1, 0, 0)updatestageend

Pada tombol panah kiri mengunakan script

on mouseenter me puppetsound 3,"pling"end

on mousewithin me

118

member("rangka").model[1].rotate(0, 0, -1) updatestageend

Pada tombol panah kanan mengunakan script


on mousewithin memember("rangka").model[1].rotate(0, 0, 1)

updatestageend

Pada tombol reset menggunakan script


on mouseUp me member("rangka").resetWorld()end

Pada tombol zoom in menggunakan script


on mousewithin me sprite(2).camera.translate(0,0,-10) updatestageend

Pada tombol zoom out menggunakan script

on mouseenter me puppetsound 3,"pling"

119

end

on mousewithin me sprite(2).camera.translate(0,0,10) updatestageend

4.3 Pengujian

Pada tahap ini penulis melakukan pengujian (testing) terhadap program

aplikasi yang dibuat. Pertama-tama dilakukan pengujian secara modular untuk

memastikan apakah hasilnya seperti yang diinginkan. Pengujian selanjutnya

dilakukan pada komputer lain dengan tujuan untuk mengetahui apakah program

aplikasi dapat berjalan dengan baik.

Adapun spesifikasi komputer yang digunakan untuk pengetesan yaitu:

1. Intel Pentium 4

2. Memori 1 GB

3. DVD-RW

4. VGA card 128

5. Monitor dengan resolusi 1024 x 768

6. Keyboard

7. Mouse

8. Sound card

9. Active speaker

120

Tabel 4.5 Pengujian Black-Box

No. Rancangan ProsesHasil yang diharapkan

Hasil Keterangan

1.Klik “Masuk”

pada video introMenampilkan

halaman menu utamaOk Lampiran 2

Halaman menu utama

Gambar 2

2. Klik “Home” pada menu utama

Menampilkan halaman utama Ok Lampiran 2

Halaman pilihan menu

Gambar 2

3.Klik “Visualisasi 3D” pada menu

utama

Menampilkan halaman visualisasi

3DOk Lampiran 2

Halaman visualisasi 3D

Gambar 3

4. Klik “Panah atas” pada navigasi 3D

Gambar 3D rangkaberputar ke atas Ok Gambar 3D rangka

berputar ke atas

5.Klik “Panah bawah” pada navigasi 3D

Gambar 3D rangkaberputar ke bawah Ok Gambar 3D rangka

berputar ke bawah

6.Klik “Panah kanan” pada navigasi 3D

Gambar 3D rangkaberputar ke kanan Ok Gambar 3D rangka

berputar ke kanan

7.Klik “Panah kiri” pada navigasi 3D

Gambar 3D rangkaberputar ke kiri Ok Gambar 3D rangka

berputar ke kiri

121

8. Klik “Reset” pada navigasi 3D

Gambar 3D rangkakembali ke posisi

semulaOk Gambar 3D rangka

kembali ke posisi semula

9.Klik “zoom in”

pada navigasi 3D

Gambar 3D rangka membesar / mendekat

Ok Gambar 3D rangka membesar / mendekat

10.Klik “zoom out” pada navigasi 3D

Gambar 3D rangka mengecil / menjauh Ok Gambar 3D rangka

memngecil / menjauh

11.Klik “Materi”

pada menu utama

Menampilkan halaman materi Ok

Lampiran 2 Halaman materi

Gambar 4

12.Klik “gambar

tengkorak” pada menu materi

Menampilkan materi tengkorak Ok


tengkorak Gambar 5

13.Klik “Gambar Rusuk” pada menu materi

Menampilkan materi rusuk Ok


rusuk Gambar 8

14.Klik “gambar

tulang belakang” pada menu materi

Menampilkan materi tulang belakang Ok

Lampiran 2 Halaman materi tulang belakang

Gambar 11

15.Klik “gambar

ekstemitas atas” pada menu materi

Menampilkan materi ekstremitas atas Ok

Lampiran 2 Halaman materi ekstremitas atas

Gambar 14

122

16.Klik “gambar

ekstemitas bawah” pada menu materi

Menampilkan materi ekstremitas bawah Ok


ekstremitas bawahGambar 17

17.Klik “Penjelasan”

pada materi tengkorak

Tampilkan penjelasan tengkorak Ok

Lampiran 2 Halaman penjelasan

tengkorak Gambar 5

18.Klik “gambar”

pada materi tengkorak

Tampilkan gambar-gambar tengkorak Ok Lampiran 2

Halaman gambar-gambar tengkorak

Gambar 6

19.Klik “Video” pada materi tengkorak

Tampilkan video tengkorak Ok Lampiran 2

Halaman video tengkorak Gambar 7

20.Klik “Penjelasan” pada materi rusuk

Tampilkan penjelasan rusuk Ok


rusuk Gambar 8


pada materi rusuk

Tampilkan gambar-gambar rusuk Ok Lampiran 2

Halaman gambar-gambar rusuk

Gambar 9

22.Klik “Video”

pada materi rusuk

Tampilkan video rusuk Ok Lampiran 2

Halaman video rusuk

Gambar 10

123


pada materi tulang belakang

Tampilkan penjelasan tulang

belakangOk


tulang belakangGambar 11


pada materi tulang belakang

Tampilkan gambar-gambar tulang

belakangOk Lampiran 2

Halaman gambar-gambar tulang

belakang Gambar 12

25.Klik “Video” pada materi

tulang belakang

Tampilkan video tulang belakang Ok Lampiran 2

Halaman video tulang belakang

Gambar 13


pada materi ekstremitas atas

Tampilkan penjelasan

ekstremitas atasOk


ekstremitas atasGambar 14


pada materi ekstremitas atas

Tampilkan gambar-gambar ekstremitas

atasOk Lampiran 2

Halaman gambar-gambar ekstremitas

atas Gambar 15

28.Klik “Video” pada materi

ekstremitas atas

Tampilkan video ekstremitas atas Ok Lampiran 2

Halaman video ekstremitas atas

Gambar 16

124


pada materi ekstremitas

bawah

Tampilkan penjelasan

ekstremitas bawahOk

Lampiran 2 Halaman penjelasan ekstremitas bawah

Gambar 17


pada materi ekstremitas

bawah

Tampilkan gambar-gambar ekstremitas

bawahOk Lampiran 2

Halaman gambar-gambar ekstremitas

bawah Gambar 18

31.Klik “Video” pada materi ekstremitas

bawah

Tampilkan video ekstremitas bawah Ok Lampiran 2

Halaman video ekstremitas bawah

Gambar 19

32Klik “help” pada

menu utama

Menampilkan halaman bantuan Ok

Lampiran 2 Halaman bantuan

Gambar 20

.33Klik “profil” pada

menu utama

Menampilkan halaman profil Ok Lampiran 2

Halaman profilGambar 21

Setelah proses pengujian selesai, dapat dilakukan analisa hasil pengujian.

Hasil yang diperoleh dari pengujian memperlihatkan bahwa program berjalan

dengan baik. Semua tombol navigasi berfungsi dengan sempurna. Pada navigasi

tombol hanya konten gambarnya saja yang bisa dipilih.

125

4.4 Distribusi

Setelah melakukan pengujian tahap yang terakhir adalah distribution.

Tahap ini merupakan tahap penggandaan dan penyebaran aplikasi kepada

radiografer. Penggandaan aplikasi dapat dilakukan dengan menggunakan CD-

RW. Visualisasi 3 Dimensi Struktur Rangka Pada Manusia diberikan agar dapat

digunakan sebagai media pembelajaran kepada radiografer.

Pada evaluasi dengan membagikan kuesioner kepada 30 pengguna dari

radiografer untuk mendapatkan hasil evaluasi terhadap aplikasi yang dibuat.

Untuk lebih rincinya dapat dilihat pada lampiran.

Dari hasil kuesioner yang telah dilakukan, maka dapat disimpulkan:

a. Aplikasi ini menarik dalam segi tampilan dan animasinya.

b. Aplikasi ini mudah digunakan.

c. Informasi yang disajikan oleh visualisasi 3 dimensi ini sudah cukup jelas

serta dapat memberikan informasi yang jelas terkait rangka / struktur tulang

pada manusia

d. Penggunaan media 3 dimensi dalam aplikasi ini berupa objek struktur tulang

manusia sangat membantu para pengguna dalam mengenal bagian-bagian

tulang dalam tubuh manusia.

126

BAB V

PENUTUP

Dalam bab terakhir dari penulisan ini, penulis berusaha untuk memberikan

kesimpulan serta saran-saran bagi pihak-pihak yang ingin mengembangkan aplikasi ini.

5.1. Kesimpulan

Dari pembahasan yang telah diuraikan sebelumnya, maka penulis dapat menarik

kesimpulan, yaitu:

1. Berdasarkan kuisioner aplikasi ini mudah digunakan (user friendly),

informasi yang diberikan sudah cukup jelas, dan bagus dalam tampilannya

sehingga dapat meningkatkan minat para responden.

2. Keuntungan dari penggunaan teknik 3 dimensi dalam pembuatan proyek ini

adalah dapat menjelaskan secara detail tentang struktur rangka pada manusia.

5.2. Saran

1. Kepada pihak pengguna disarankan untuk menggunakan spesifikasi

komputer yang dianjurkan atau lebih tinggi spesifikasinya untuk

mendapatkan kelancaran kinerja dari aplikasi yang dibuat.

2. Dalam proses modeling pada objek 3 dimensi ini diupayakan untuk lebih

mendetail lagi,

3. Agar aplikasi ini dikembangkan ke materi-materi lainnya.

Daftar Pustaka

Al-Bahra bin Ladjamuddin. B, 2005. Analisis dan Desain Sistem Informasi,Yogyakarta : Graha Ilmu.

Arafik. 2010. Visualisasi 3 Dimensi Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.

Ballinger, Philip W. 1995. Merril's Atlas of Radiographic Positions and Radiologic Procedures. Missouri :Mosby.

Basuki, Achmad. 2009. Grafik 3 Dimensi, Surabaya: Politeknik Elektronika Negeri Surabaya

Binanto, Iwan. 2010, Multimedia Digital Dasar Teori dan Pengembangannya. Yogyakarta : Penerbit Andi.

Cahyaning Tyas, Ratna. 2010. Aplikasi Pembelajaran dengan Global Illumination(Pencahayaan Realistik) Menggunakan V-ray Pada Alat Pencernaan Manusia Berbasis 3D, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.

De Graaff, Van. 2001. Human Anatomy, Sixth Edition. New York : The McGraw-Hill Companies

Djalle, Zaharuddin. 2008. The Making Of 3D Animation Movie. Bandung :Penerbit Informatika.

Feneis, Heinz, dkk. 2000. Pocket Atlas of Human Anatomy. New York :Thieme Stuttgart.

Fitria, Yuni. 2010. Perancangan dan Implementasi Computer Assisted Instruction Mata Pelajaran Biologi Virus Berbasis Multimedia 3 Dimensi, Jakarta : UniversitasIslam Negeri Syarif Hidayatullah

Fitriyani. 2008. Aplikasi Pembelajaran perkembangan Tumbuhan Berbasis Multimedia, Jakarta : Universitas Islam Negeri Syarif Hidayatullah

Hendratman, Hendi. 2008. The Magic Macromedia Director. Bandung :Penerbit Informatika.

Hendratman, Hendi. 2008. The Magic Of 3D Studio MAX. Bandung :Penerbit Informatika.

Heriyani, Nofitri. 2010. Aplikasi Pembelajaran Interaktif Fauna Indonesia Berbasis Multimedia 3 Dimensi, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.

Kowal, James. 1998. Analyzing Systems, New Jersey : Prentice Hall.

Marliana, Isna. 2010. Aplikasi Pembelajaran HTML Berbasis Multimedia dengan Metode Computer Assisted Instruction untuk SMA 1 Barunawati Jakarta, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.

Nandi. 2006. Penggunaan Multimedia Interaktif Dalam Pembelajaran Geografi Di Persekolahan. Bandung: Jurnal “GEA” Jurusan Pendidikan Geografi.http://file.upi.edu/Direktori/FPIPS/JUR._PEND._GEOGRAFI/197901012005011NANDI/Artikel_di_Jurnal_GEA.pdf__Penggunaan_Multimedia__Interaktif.pdfdiakses pada tanggal 28 maret 2011

Nalwan, A. 1998. Pemrograman Animasi dan Game Profesional. Jakarta: Elex Media Komputindo.

Nazir, Moh. 2005. Metode Penelitian. Jakarta : Ghalia Indonesia.

Prayudi, Yudi. 2004. Permodelan wajah 3D berbasis foto diri menggunakan maya embedded language (MEL) script. Yogyakarta. Universitas IslamIndonesia.

Pressman, Roger. 2002. Rekayasa Perangkat Lunak. Yogyakarta : Penerbit Andi

Saudi, Madihah M. dkk. 2008. Worm Analysis through Computer Simulation (WAtCoS). London : WCE.http://www.iaeng.org/publication/WCE2008/WCE2008_pp538-542.pdf diakses pada tanggal 29 maret 2011

Scanlon, Valerie C. 2007. Essentials of Anatomy and Physiology. Philadelphia:F.A. Davis Company.

Seeley, Rod, dkk. 2004, Skeletal System: Gross Anatomy. New York: The McGraw-Hill Companies.

Simarmata, Janner. 2007. Grafika Komputer. Yogyakarta: Penerbit Andi

Sutopo, Ariesto Hadi. 2003. Multimedia Interaktif dengan Flash. Yogyakarta: Graha Ilmu.

Suyanto, M. 2003. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing. Yogyakarta : Penerbit Andi.

Tri Purwanti, Deni. 2010. Analisis dan perancangan teknik 3 dimensi pada pembuatan iklan produk jam tangan tagheuer berbasisi multimedia, Jakarta : UniversitasIslam Negeri Syarif Hidayatullah.

Vaughan, Tay. 2004. Multimedia. Making It Work, Sixth Edition. New York : McGraw Hill.

Violita Wardhani, Friska. 2010. Visualisasi Edukatif Sistem Pencernaan Manusia Sebagai Alat Bantu Ajar Biologi Berbasis Multimedia, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.

LAMPIRAN

L1

Lampiran I: Wawancara

Wawancara dengan Dr. Saraswati, MARS. selaku kepala Rumah Sakit Setia Mitra pada tangal 10 Januari 2011

Q : apakah di rumah sakit ini mempunyai alat peraga rangka manusia?

A : Ada, kami mempunyai 2 alat peraga rangka manusia dan juga gambar – gambar sistem rangka manusia

Q : menurut anda apakah alat peraga tersebut sudah mewakilkan ?

Y : Kurang efektif, ketika menggunakan alat peraga itu bentuknya sangat besar jadi kadang susah di bawa kemana sedangkan untuk gambar kurang medetail jadi susah untuk di jelaskan ke pasien awam dan untuk dipelajari oleh mahasiswa yang training disini.

Q : Apa kegiatan para mahasiswa yang training disini?

Y : tugasnya membantu dan mempelajari untuk bekal mereka ketika lulus nanti yang kemudian akan jadi pengalaman yang berharga.

L2

Lampiran II: Interface Aplikasi

1. Tampilan Intro

2. Tampilan Menu Utama

L3

3. Tampilan Visualisasi 3D

4. Tampilan Materi

L4

5. Tampilan Materi Tengkorak

6. Tampilan Materi Gambar Tengkorak

L5

7. Tampilan Materi Video Tengkorak

8. Tampilan Materi Rusuk

L6

9. Tampilan Materi Gambar Rusuk

10. Tampilan Materi Video Rusuk

L7

11. Tampilan Materi Tulang Belakang

12. Tampilan Materi Gambar Tulang Belakang

L8

13. Tampilan Materi video Tulang Belakang

14. Tampilan Materi Ekstremitas Atas

L9

15. Tampilan Materi Gambar Ekstremitas Atas

16. Tampilan Materi video Ekstremitas Atas

L10

17. Tampilan Materi Ekstremitas Bawah

18. Tampilan Materi Gambar Ekstremitas Bawah

L11

19. Tampilan Materi Video Ekstremitas Atas

20. Tampilan Bantuan

L12

21. Tampilan Profil

L13

Lampiran III: Source Code

Macromedia Director MX – Lingo ScriptButton Intro on mouseup me go to "menu_1" end

Menu Home on mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"sound1"end

on mouseleave me sprite(the currentspritenum).blend=70end

on mouseup me go to "menu_1" end

Menu Visualisasion mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"sound1"end



Menu Materion mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"sound1"end


L14


Menu Bantuanon mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"sound1"end



Menu Profil

on mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"sound1"end


on mouseup me go to"menu_5" beep end

Button Panah Atas


on mousewithin me member("rangka").model[1].rotate(1, 0, 0) updatestageend

L15

Button Panah Bawahon mouseenter me puppetsound 3,"pling"end

on mousewithin me member("rangka").model[1].rotate(-1, 0, 0) updatestageend

Button Panah Kirion mouseenter me puppetsound 3,"pling"end

on mousewithin me member("rangka").model[1].rotate(0, 0, -1) updatestageend

Button Panah Kananon mouseenter me puppetsound 3,"pling"end

on mousewithin memember("rangka").model[1].rotate(0, 0, 1)

updatestageend

Button Reseton mouseenter me puppetsound 3,"pling"end

on mouseUp me member("rangka").resetWorld()end

Button Zoom Inon mouseenter me puppetsound 3,"pling"end

on mousewithin me

L16

sprite(2).camera.translate(0,0,-10) updatestageend

Button Zoom Out on mouseenter me puppetsound 3,"pling"end

on mousewithin me sprite(2).camera.translate(0,0,10) updatestageend

Button Materi Tengkorakon mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"pling"end


on mouseUp me go "1-1"end

Button Materi Rusukon mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"pling"end



L17

Button Materi Tulang Belakangon mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"pling"end



Button Ekstermitas Atason mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"pling"end



Button Ekstermitas Bawahon mouseenter me sprite(the currentspritenum).blend=100 puppetsound 3,"pling"end



Button Materi Gambar Tengkorakon mouseenter me sprite(the currentspritenum).blend=100end

L18


on mouseup me go "1-2"end

Button Materi Video Tengkorakon mouseenter me sprite(the currentspritenum).blend=100end



Button Materi Gambar Rusuk on mouseenter me sprite(the currentspritenum).blend=100end



Button Materi Video Rusuk on mouseenter me sprite(the currentspritenum).blend=100end


L19


Button Materi Gambar Tulang Belakang on mouseenter me sprite(the currentspritenum).blend=100end



Button Materi Video Tulang Belakangon mouseenter me sprite(the currentspritenum).blend=100end



Button Materi Gambar Ekstremitas Atason mouseenter me sprite(the currentspritenum).blend=100end



L20

Button Materi Video Ekstremitas Atason mouseenter me sprite(the currentspritenum).blend=100end



Button Materi Gambar Ekstremitas Bawahon mouseenter me sprite(the currentspritenum).blend=100end



Button Materi Video Ekstremitas Bawahon mouseenter me sprite(the currentspritenum).blend=100end



L21

Adobe Flash Actionscript2Button SoundSound OFFon (release) {

tellTarget ("../sound") {stopAllSounds();

}}on (release) {

nextFrame();}

Sound ONon (release) {

tellTarget ("../sound") {nextFrame();

}}on (release) {

prevFrame();}

Materi GambarFrame 1

photo_filename = new Array();photo_thumbnail = new Array();photo_description = new Array();

filepath = "photos/";

// Load the photos XMLvar flash_xml = new XML();flash_xml.ignoreWhite = true;flash_xml.onLoad = function(){

var nodes:Array = this.firstChild.childNodes;for(var i=0;i<nodes.length;i++){

photo_filename.push(nodes[i].attributes.filename);photo_thumbnail.push(nodes[i].attributes.thumbnail);

L22

photo_description.push(nodes[i].attributes.description);}

}flash_xml.load(filepath + "photos.xml");

Frame 5x_middle = Stage.width/2;y_middle = Stage.height/2;

tn_group.tn._visible = false;tn_group.setMask( tn_area );tn_group._alpha = 0;tn_alpha_default = 60;tn_spacing = 4;tn_speed = 5;p = 0;

//menampilkan foto thumnailfor( var i = 0; i < photo_thumbnail.length; i++ ){

tn_group.tn.duplicateMovieClip("tn"+i, i);

tn_group["tn"+i].tn_pic.loadMovie( filepath + photo_thumbnail[i] );

tn_group["tn"+i]._x = i * (tn_group.tn._width + tn_spacing);tn_group["tn"+i]._y = tn._y;tn_group["tn"+i].tn_pic._alpha = tn_alpha_default;tn_group["tn"+i].tn_no = i;

tn_group["tn"+i].tn_button.onRollOver = function() {

this._parent.tn_pic._alpha = 100;}tn_group["tn"+i].tn_button.onRollOut = function() {

this._parent.tn_pic._alpha = tn_alpha_default;}tn_group["tn"+i].tn_button.onRelease = function() {

L23

_root.p = this._parent.tn_no;_root.play();

}}//menampilkan Headertn_group.onEnterFrame = function(){

if( _ymouse > tn_group._y - 30 and _ymouse < tn_group._y + tn_group._height ){

if(tn_group._alpha < 100 ) tn_group._alpha += tn_speed * 2;

x_speed = ( _xmouse - x_middle ) / 30;

if( _xmouse > x_middle ){

if( tn_group._x > tn_area._width - tn_group._width + tn_area._x )

tn_group._x-=x_speed;}else{

if( tn_group._x < tn_area._x )tn_group._x-=x_speed;

}}else if(tn_group._alpha > 0 )

tn_group._alpha -= tn_speed * 2;

if( _ymouse < pic_desc._height )desc_speed = pic_desc._y / tn_speed;

elsedesc_speed = ( pic_desc._height + pic_desc._y ) / tn_speed;

pic_desc._y -= desc_speed;

}

Frame 10pic._alpha = 0;pic.loadMovie(filepath + photo_filename[p]);

L24

pic_desc.txt = photo_description[p];

old_p = p;

preloader._width = 0;preloader._visible = preloader_bg._visible = true;//menampilkan gambarpreloader.onEnterFrame = function(){

percent = Math.round( pic.getBytesLoaded() / pic.getBytesTotal() * 100 );

if( percent == "NaN" )percent = 0;

txt = percent + "%";preloader._width = percent * 3;

if( percent == 100 ){

txt = "";preloader._visible = preloader_bg._visible = false;_root.play();delete this.onEnterFrame;

}else{

_root.gotoAndStop("start");}

}

Frame 12stop();

fit_width = Stage.width;fit_height = Stage.height;

orginal_width = pic._width;original_height = pic._height;

double_width = orginal_width * 2;

L25

double_height = original_height * 2;

triple_width = orginal_width * 3;triple_height = original_height * 3;

current_width = fit_width; // the default widthcurrent_height = fit_height; // the default height

pic_speed = 5;//memperbesar gamabarpic_desc.bt0.onRelease = function(){

current_width = fit_width;current_height = fit_height;

}

pic_desc.bt1.onRelease = function(){

current_width = orginal_width;current_height = original_height;

}pic_desc.bt2.onRelease = function(){

current_width = double_width;current_height = double_height;

}pic_desc.bt3.onRelease = function(){

current_width = triple_width;current_height = triple_height;

}

pic.onEnterFrame = function(){

if(this._alpha < 100 )this._alpha+=pic_speed;

if( pic._width < fit_width )pic._x = ( fit_width - pic._width ) / 2;

else

L26

pic._x = pic._x - ( _xmouse * ( ( pic._width - Stage.width ) / Stage.width ) + pic._x ) / pic_speed;

if( pic._height < fit_height )pic._y = ( fit_height - pic._height ) / 2;

elsepic._y = pic._y - ( _ymouse * ( ( pic._height - Stage.height ) / Stage.height

) + pic._y ) / pic_speed;

if( pic._width != current_width )pic._width -= ( pic._width - current_width ) / pic_speed;

if( pic._height != current_height )pic._height -= ( pic._height - current_height ) / pic_speed;

}

Frame 40 gotoAndPlay("start");

photos.xml

<?xml version="1.0" encoding="utf-8"?>

<photos>

<photo filename="1.jpg" thumbnail="s_1.jpg" description=" " />

<photo filename="2.jpg" thumbnail="s_2.jpg" description="This photo size is 640x480." />





</photos

L27

Lampiran 4: Kuisioner Evaluasi

Nama:

Umur:

1. Apakah aplikasi ini mudah digunakan (user friendly)?

A. Mudah

B. Cukup mudah

C. Kurang mudah

2. Bagaimana munurut Anda tampilan aplikasi ini bila dilihat secara

keseluruhan?

A. Menarik

B. Cukup menarik

C. Tidak menarik

3. Bagaimana kesan animasi, teks, suara dan gambar pada aplikasi ini?

A. Menarik

B. Cukup menarik

C. Tidak menarik

KUISIONER EVALUASI

(Untuk Melengkapi Kebutuhan Skripsi UIN Syarif Hidayatullah Jakarta)

L28

4. Apakah menurut Anda, materi yang diberikan dalam aplikasi ini sudah

jelas?

A. Jelas

B. Cukup jelas

C. Kurang jelas

5. Apakah menurut Anda, informasi yang disediakan sudah lengkap?

A. Lengkap

B. Cukup lengkap

C. Tidak lengkap

6. Apakah program ini menjawab kebutuhan Anda dalam mendapatkan

informasi yang Anda butuhkan?

A. Ya

B. Kurang

C. Tidak

7. Apa pendapat Anda setelah melihat dan menggunakan aplikasi ini secara

keseluruhan?

A. Bagus

B. Cukup bagus

C. Tidak bagus

L29

Hasil Pengolahan Data

1. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram di

bawah ini:

Tabel Hasil Kuisioner Evaluasi Pertanyaan No.1

Jawaban RespondenJumlah

RespondenJumlah Penjawab Presentase (%)

a. Mudah 30 18 60%

b. Cukup Mudah 30 9 30%

c. Kurang Mudah 30 3 10%

Gambar Diagram kemudahan menjalankan program

Berdasarkan hasil evaluasi dapat diketahui bahwa program ini mudah

digunakan. Hal ini berarti program yang dirancang memenuhi kriteria (user

friendly).


bawah ini:

Tabel Hasil Kuesioner Evaluasi Pertanyaan No.2

Jawaban RespondenJumlah

RespondenJumlah Penjawab Presentase (%)

a. Menarik 30 16 53%

0%10%20%30%40%50%60%70%

a. Mudah b. Cukup Mudah

c. Kurang Mudah

Mudah Digunakan

Responden

L30

b. Cukup Menarik 30 13 44%

c. Tidak Menarik 30 1 3%

Berdasarkan hasil evaluasi dapat diketahui bahwa tampilan program

secara keseluruhan menarik. Artinya kebutuhan pengguna akan unsur menarik

dalam program terpenuhi.


bawah ini:


Jawaban Responden Jumlah Responden Jumlah PenjawabPresentase

(%)

a. Menarik 30 19 64%

b. Cukup menarik 30 9 30%

c. Tidak menarik 30 2 6%

0%

20%

40%

60%

a. Menarik b. Cukup Menarik

c. Kurang Menarik

Tampilan Aplikasi Secara Keseluruhan

Responden

L31

Berdasarkan hasil evaluasi dapat diketahui bahwa kesan animasi, teks,

suara, dan gambar yang ditampilkan pada program menarik. Ini berarti program

yang dirancang sudah memenuhi kriteria multimedia yang baik dan sudah dapat

meningkatkan minat para responden.


bawah ini:


Jawaban Responden

Jumlah Responden Jumlah Penjawab Presentase (%)

a. Jelas 30 16 54%

b. Cukup Jelas 30 10 33%

c. Kurang Jelas 30 4 13%

0%20%40%60%80%

a. Menarik b. Cukup Menarik

c. Kurang Menarik

Kesan Animasi, Teks, Suara dan Gambar pada Aplikasi

Responden

0%

20%

40%

60%

a. Jelas b. Cukup Jelas c. Kurang Jelas

Kejelasan Materi dalam Aplikasi

Responden

L32

Berdasarkan hasil evaluasi dapat diketahui bahwa informasi yang

diberikan dalam program sudah cukup jelas. Artinya informasi yang diberikan di

program ini secara umum dapat dikatakan jelas.

5. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram

dibawah ini:


Jawaban Responden

Jumlah

Responden

Jumlah Penjawab Presentase (%)

a. Lengkap 30 16 54%

b. Cukup Lengkap

30 8 26%

c. Kurang Lengkap

30 6 20%

Berdasarkan hasil evaluasi dapat diketahui bahwa informasi yang

diberikan dalam program sudah cukup lengkap. Artinya kebutuhan pengguna akan

informasi dalam program terpenuhi


dibawah ini:

0%10%20%30%40%50%60%

a. Lengkap b. Cukup Lengkap

c. Kurang Lengkap

Kelengkapan Informasi

Responden

L33


Jawaban Responden


a. Ya 30 18 60%

b. Kurang 30 8 27%

c. Tidak 30 4 13%

Berdasarkan hasil evaluasi dapat diketahui bahwa program ini sudah

menjawab kebutuhan pengguna dalam mendapatkan informasi yang dibutuhkan.


dibawah ini:


Jawaban Responden


a. Bagus 30 20 66

b. Cukup Bagus 30 8 27

c. Kurang Bagus 30 2 7

0%

20%

40%

60%

80%

a. Ya b. Kurang c. Tidak

Kesesuaian dengan Informasi yang Dibutuhkan

Responden

L34

Berdasarkan hasil evaluasi dapat diketahui bahwa secara keseluruhan

aplikasi ini bagus. Artinya, aplikasi yang dirancang ini sudah dapat dikategorikan

bagus bagi pengguna dan sudah dapat meningkatkan minat para responden.

0%20%40%60%80%

a. Bagus b. Cukup Bagus

c. Kurang Bagus

Tampilan Aplikasi Secara Keseluruhan

Responden

SKRIPSI VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA...

Documents

Transcript of SKRIPSI VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA...