SKRIPSI

VISUALISASI 3 DIMENSI STRUKTUR RANGKA PADA

MANUSIA

ANOM TRY PUTRANTO

NIM : 206091004027

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA 2011/1432 H

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

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENARBENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN
SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI
ATAU LEMBAGA MANAPUN.
Jakarta, September 2011

Anom Try Putranto

206091004027

iv

ABSTRAK

Anom Try Putranto, 206091004027. Visualisasi 3 Dimensi Struktur Rangka

Pada Manusia. Di bawah bimbingan Yusuf Durrachman, M.Sc, MIT dan Elsy
Rahajeng, MTI.
Teknologi multimedia merupakan salah satu metode yang digunakan sebagai
media penyampaian informasi dan pembelajaran karena memberikan kemudahan
bagi penggunanya. Struktur rangka tubuh manusia merupakan salah satu sistem
dalam tubuh manusia yang cukup rumit. Untuk memahami struktur rangka tubuh
manusia, dengan memanfaatkan teknologi informasi maka dibuat aplikasi
visualisasi 3 dimensi struktur rangka pada manusia. Dengan menggunakan
visualisasi 3 dimensi, radiografer dapat melihat dan mempelajari bagaimana
struktur rangka manusia secara jelas. Dalam perancangan visualisasi 3 dimensi
struktur rangka pada manusia ini menggunakan metode pengembangan
multimedia menurut Vaughan (2004) dalam Binanto yaitu perencanaan, desain
dan produksi, pengujian dan distribusi. Penulis juga melakukan studi pustaka dan
wawancara untuk mendapatkan data dan informasi dari pihak rumah sakit.
Aplikasi berbasis multimedia ini mengandung elemen-elemen multimedia yang
dikombinasikan dengan teknik 3 dimensi sehingga objek terlihat lebih nyata dan
lebih menarik. Aplikasi multimedia ini menjadi salah satu alternatif sarana
pembelajaran yang berbeda dan mudah digunakan oleh penggunanya. Untuk
pengembangan berikutnya penulis menyarankan agar objek 3 dimensi lebih detail
lagi dan bagi pengguna untuk menggunakan spesifikasi komputer yang lebih
tinggi agar untuk mendapatkan kelancaran kinerja dari aplikasi.
Kata kunci: Struktur rangka, Multimedia, 3 Dimensi, Visualisasi
Jumlah Halaman : V Bab + xvi Halaman + 126 Halaman + 80 Gambar + 11 Tabel
+ Daftar Pustaka + Lampiran
Jumlah Daftar Pustaka : 29 Sumber (Tahun 1995 - Tahun 2010)

KATA PENGANTAR

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

vi

5. Keluarga tercinta Bapak dan Mama , para kakak dan sodara tercinta yang
telah memberikan perhatian, doa, 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 Putranto

206091004027

vii

DAFTAR ISI

ABSTRAK
KATA PENGANTAR

DAFTAR ISI

iv

DAFTAR GAMBAR

vii

DAFTAR TABEL

xi

DAFTAR LAMPIRAN

xii

BAB I

PENDAHULUAN
1.1 Latar Belakang Masalah

1.2 Perumusan Masalah

1.3 Batasan Masalah

1.4 Tujuan Penelitian

1.5 Manfaat Penelitian

1.6 Metode Penelitian

1.6.1 Metode Pengumpulan Data

1.6.2 Metode Pengembangan Aplikasi Multimedia

1.7 Sistematika Penulisan

BAB II LANDASAN TEORI

2.1 Visualisasi

2.2 Grafika Komputer

iv

2.2.1 Sistem Koordinat

2.2.2 2 Dimensi

10

2.2.3 3 Dimensi

12

2.2.4 Permodelan 3D

15
18

2.3 Multimedia

2.4

2.5

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

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

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
55

2.7.1 Skeleton Aksial

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
65

2.8 Studi Sejenis

BAB III METODOLOGI PENELITIAN

3.1 Metode Pengumpulan Data

3.2

70

3.1.1 Studi Kepustakaan

70

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
76

4.2.1 StoryBoard

vi

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

125

Distribusi

BAB V PENUTUP
5.1 Kesimpulan

126

5.2 Saran

126

DAFTAR PUSTAKA
LAMPIRAN

vii

DAFTAR GAMBAR

Gambar 2.1 Sistem Koordinat Kartesian

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

viii

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

ix

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

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

xi

DAFTAR LAMPIRAN

1. Hasil wawancara

L1

2. Interface Aplikasi

L2

3. Source Code

L13

4. Kuisioner dan evaluasi

L27

xii

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

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

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 :

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
5

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.

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.

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

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-olah
seolah olah hanya merupakan gambar
mati. Artinya, tidak dilakukan manipulasi atau pengoperasian tertentu, baik
pada objek maupun pada sistem koordinatnya. (Janner, 2007)
Transformasi 2 dimensi:
1) Translasi adalah perpindahan obyek dari
ri titik P ke titik P secara linier.

Gambar 2.2 Proses translasi 2D (Basuki, 2009)

2) Scaling adalah adalah perpindahan obyek dari titik P ke titik P, dimana
jarak titik P adalah m kali titik P.
P

10

Gambar 2.3 Proses Scaling 2D (Basuki, 2009)

3) Rotasi adalah perpindahan obyek dari titik P ke titik P, yang berupa
pemindahan berputar sebesar sudut .

Gambar 2.4 Proses Rotasi 2D (Basuki, 2009)

11

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. Terapanterapan 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)

12

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)

Gambar 2.6 Rotasi terhadap sumbu X

Gambar 2.7 Rotasi terhadap sumbu Y

13

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

14

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

15

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

16

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.

17

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
18

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.

19

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.

20

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.

21

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.

22

Piksel
(15 x 16 piksel)
Gambar
Diperbesar

Gambar
Asli
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
Diperbesar
Gambar
Asli

Gambar
Asli

Gambar
Diperbesar

Gambar 2.15 Gambar Vektor (

Tabel 2.1 merupakan beberapa jenis format digital untuk gambar/ grafik
yang dibuat.
Tabel 2.1 Format Gambar Digital
NO
1

JENIS
FORMAT
Bitmap
(.BMP)

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

23

JPEG (Joint
Fotogrphic
Expert
Group)

GIF (Graphic Format GIF ini berukuran kecil dan mendukung

gambar yang terdiri dari banyak frame sehingga bisa
Interchange
disebut sebagai gambar animasi (gambar bergerak).
Format)

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

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.

AI (Adobe
Illustrator
Artwork)

Format file ini merupakan format asli dari adobe

Illustrator. Berfungsi sama dengan PSD tetapi file AI
dapat mengolah membuat gambar menjadi vektor lebih
baik di bandingkan PSD.

Format JPG merupakan format yang paling terkenal

sekarang ini. Hal ini karena sifatnya yang berukuran
kecil (hanya puluhan/ratusan KB saja), dan bersifat
portable.

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.

24

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.

25

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)

26

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)

27

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

28

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.

29

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

30

memungkinkan berkomunikasi
berkomunikasi dengan orang lain yang berbe
berbeda pada
lokasi geografis yang berbeda.
j. Virtual Reality (VR)
Bidang ini biasanya menggunakan alat-alat
alat khusus, misalnya kacamata,
helm, sarung tangan, dan antarmuka pengguna yang tidak lazim, dan
berusaha untuk menempatkan penggunanya
penggun nya di dalam pengalaman yang
nyata.
Dalam VR, lingkungan yang diciptakan
dici
sebenarnya
nya merupakan ribuan
objek
ek 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 Multimedia

Menurut Vaughan dalam Binanto (2010), pengembangan mu
multimedia

dilakukan melalui empat tahap, yaitu perencanaan, desain dan produksi, pengujian,
dan distribusi, seperti gambar 2.17 di bawah ini:

Perencanaan
Desain dan Produksi
Pengujian
Pendistribusian
Gambar 2.17 Siklus Pengembangan Aplikasi Multimedia (Binanto, 2010)

31

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)

32

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)

33

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.

34

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.

35

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

36

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

37

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

38

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 (
perubahan state disimbolkan dengan (

) dan transisi state atau

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

39

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)

40

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,

41

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

42

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 bersamasama tampil pada satu saat dan penggunaan button sebagai alat interaktif.
Panel Timeline

Stage

Panel Tool
Panel Properties

Panel Library

Gambar 2.24 Tampilan Adobe Flash CS3

43

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 layerlayer 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,

44

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

45

A:

Menu

Bar,

berisi

perintah

utama

untuk

mengubah

ukuran

gambar,

filter

dan

keyboard

shortcut

seperti:

New

(Ctrl+N),

membuka

lain-lain.

file,

Juga

Open

save,

ditampilkan

(Ctrl+O),

dan

lain-lain.
B:

Option,

dipilih

berisi

pilihan

kuas/brush,

maka

dari

tool

yang

ukuran/diameter

Anda

juga

pilih.

opacity

Misalnya
brush

ada

di sini.
C:

Gambar,

menampilkan

besar

kanvas

atau

gambar

yang

sedang

dibuka, diedit atau dibuat.

D:

Pallete

resets

dan

Well,

cara

cepat

Layer

Comps.

untuk

Juga

mengakses

dapat

digunakan

palet

brushes,

untuk

tool

meletakkan

palet yang sering digunakan.

E:

Toolbox,

berisi

tool-tool

untuk

menyeleksi

dan

memodifikasi

gambar.

Gambar 2.26 Tool-tool pada Adobe Photoshop CS3

46

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.

47

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

48

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

Tool Pallete

Score

Property Inspector

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

49

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

50

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.

51

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 volume

berlebihan.

52

Draw Tool

Untuk modifikasi sample

individual.

Zoom Tool

Untuk memperbesar atau

memper- kecil 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 berulangulang.
Untuk merekam suara/musik. Track
baru akan terekam dimulai dari posisi
kursor.

Record

Pause

Untuk menghentikan sementara

proses recording atau proses playing
musik/lagu yang sedang di- mainkan.
Tekan tombol Pause kembali untuk
melanjutkan.

53

Stop

Untuk mengakhiri proses recording

atau playing. Tombol ini harus ditekan
jika Anda ingin mengaplikasikan efek,
menyimpan, atau mengexport file.

Skip To End

Untuk memindakan kursor ke akhir

lagu/track.

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

54

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.

55

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

56

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

57

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.

58

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

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.

59

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

60

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

61

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.

62

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

63

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)

64

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

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

66

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.

67

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,

68

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.

69

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.

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

Perencanaan
Desain dan Produksi
Pengujian
Pendistribusian
Gambar 3.1 Siklus Pengembangan Aplikasi Multimedia
3.2.1

Perencanaan
Tahap perencanaan mencakup tentang siapa pengguna program. Elemen
E

elemen multimedia yang digunakan,

di
banyak waktu yang digunakan untuk
membuat program tersebut, dan bagaimana produk akhir didistribusikan.
3.2.2

Desain dan Produksi

roduksi
Desain adalah tahap membuat spesifikasi mengenai arsitektur program,

gaya, tampilan dan kebutuhan material/ bahan untuk program.

program. Yang dilak
dilakukan
yaitu membuat storyboard,
storyboard mendesain struktur navigasi, mendesain
endesain Antarmuka
Antarmuka,
dan Pengumpulan / pencarian isi
isi.
Setelah desain selesai
sel
produksi dimulai, rencana proyek menjadi panduan
instruksi langkah demi langkah pembuatan produk. Produksi merupakan tahap
ketika proyek multimedia benar-benar
benar
dirender menghasilkan suatu produk.
3.2.3

Pengujian
Pengujian program wajib dilakukan untuk memeriksa dan memastikan
m

bahwaa program yang dibuat sudah benar

benar-benar
benar sesuai dengan keperluan
pengguna. Penulis menggunakan pengujian Black-box.

72

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.

73

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

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.

75

Tabel 4.2 Rencana Kerja Pembuatan Proyek Skripsi

No
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.2

Bulan Ke- Bulan Ke- Bulan Ke- Bulan Ke1

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

Kegiatan
Membuat peta
navigasi
Storyboard
merancang
Antarmuka
(interface)
pencarian dan
pengumpulan isi
3D modeling
mendigitalkan Audio
dan video
merevisi desain
membuat grafis
membuat animasi
asemmbly
(pemrograman)
produksi
pengujian
memperbaiki bug
distribusi

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:

76

375). Secara umum rancangan storyboard dalam visualisasi 3 dimensi

ensi struktur
rangka pada manusia.
Tabel 4.3 Storyboard
Visual

Scene
1

Sound
Sound1.
mp3
drivin
dat
funky
daisy.m
p3

Form Name
Link
Keterangan

: Intro
: Scene 2
: Menampilkan halaman pembuka

77

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name
Link
gan
Keterangan

: Home
: Scene 3,4,5,6
::Menampilkan Penjelasan secara umum
tentang sistem rangka manusia

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3
Pling.m
p3

Form Name : Visualisasi 3D

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

78

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3
Pling.m
p3

Form Name : Materi

Link
: Scene 2,3,5,6,7,8,9,10,11
Keterangan : Menampilkan materi tentang struktur rangka
dan bagian-bagiannya
Tampilan menu rangka diwakili dengan kotakkotak.
5

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name : Bantuan

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

79

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name : Profil

Link
: Scene 2,3,4,5
Keterangan : Menampilkan profil dari penulis sekaligus
pembuat visualisasi 3D struktur rangka ini.
ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name : Materi Tengkorak

Link
: Scene 2,3,4,5,6,11,12,13
Keterangan : Menampilkan materi tengkorak secara khusus
yang dilengkapi dengan teks, gambar, dan
video 3D

80

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name : Materi Rusuk

Link
: Scene 2,3,4,5,6,14,15,16
Keterangan : Menampilkan materi tengkorak secara khusus
yang dilengkapi dengan teks, gambar, dan
video 3D
ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name : Materi Tulang Belakang

Link
: Scene 2,3,4,5,6,17,18,19
Keterangan : Menampilkan materi tengkorak secara khusus
yang dilengkapi dengan teks, gambar, dan
video 3D

81

10

ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

Form Name : Materi Ektremitas Atas

Link
: Scene 2,3,4,5,6,20,21,22
Keterangan : Menampilkan materi tengkorak secara khusus
yang dilengkapi dengan teks, gambar, dan
video 3D
ChuckB
rown_N
ovember
.mp3
Sound1.
mp3

11

Form Name : Materi Ekstremitas Bawah

Link
: Scene 2,3,4,5,6,23,24,25
Keterangan : Menampilkan materi tengkorak secara khusus
yang dilengkapi dengan teks, gambar, dan
video 3D

82

4.2.2 Flowchart
Perancangan flowchart menggambarkan tahapan proses dari suatu sistem,
termasuk sistem multimedia. (Suyanto,2003:364)

Keterangan
A: Halaman menu utama

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.

83

Keterangan
A: Halaman menu utama
B: Halaman materi

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

84

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

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

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

85

proses tersebut maka akan terhubung ke menu yang diinginkan dan jika tidak
maka pengguna bisa memilih menu lainnya atau keluar dari program.

Keterangan
C: Halaman sub menu materi
tengkorak

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.

86

Keterangan

D: Halaman sub menu materi

rusuk
Tampilkan Layar
Rusuk

Pilih Penjelasan

Ya

Tampilkan
Penjelasan Rusuk

Ya

Tampilkan
Gambar Rusuk

Tidak

Pilih Gambar

Tidak
Ya
Pilih Video

Tampilkan Video
Rusuk

Tidak

Keluar

Gambar 4.5 Flowchart Sub Menu Materi Rusuk

Gambar 4.5 flowchart ini menjelaskan bahwa dalam sub menu materi
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.

87

Keterangan
E: Halaman sub menu materi
Tulang belakang

Gambar 4.6 Flowchart Sub Menu Materi Tulang Belakang

Gambar 4.6 flowchart ini menjelaskan bahwa dalam sub menu materi
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.

88

Keterangan
F: Halaman sub menu materi
Ekstremitas atas

Gambar 4.7 Flowchart Sub Menu Materi Ektremitas Atas

Gambar 4.7 flowchart ini menjelaskan bahwa dalam sub menu materi
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.

89

Keterangan
G: Halaman sub menu materi
Ekstremitas bawah

Gambar 4.8 Flowchart Sub Menu Materi Ektremitas Bawah

Gambar 4.8 flowchart ini menjelaskan bahwa dalam sub menu materi
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.

90

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

91

4.2.4 Perancangan State Diagram Transition (STD)

1. Rancangan Struktur Intro

Menu Utama

Klik Mulai
Tampilkan halaman
menu utama

Intro

Gambar 4.10 Rancangan STD Intro

2. Rancangan Struktur Menu Utama

Visualisasi
3D

Materi

Klik Visualisasi 3D
Tampilkan halaman
Visualisasi 3D

Klik Materi
Tampilkan halaman
Materi
Klik Home
Tampilkan halaman
menu utama

Klik Home
Tampilkan halaman
menu utama

Menu Utama
(HOME)

Klik Home
Tampilkan halaman
menu utama
Klik Bantuan
Tampilkan halaman
Bantuan

Klik Home
Tampilkan halaman
menu utama
Klik Profil
Tampilkan halaman
Profil

Bantuan

Profil

Gambar 4.11 Rancangan STD Menu Utama

92

3. Rancangan menu visualisasi 3D

Gambar 4.12 Rancangan Menu Visualisasi 3D

4. Rancangan menu materi

Gambar 4.13 Rancangan STD Menu Materi

93

5. Rancangan menu tengkorak

Materi
Gambar
Klik tengkorak
Tampilkan Tengkorak

Penjelasan

Klik Gambar
Tampilkan Gambar
Klik tengkorak
Tampilkan Tengkorak
Tengkorak
Klik tengkorak
Tampilkan Tengkorak
Klik Video
Tampilkan Video

Klik Penjelasan
Tampilkan pejelasan
Klik tengkorak
Tampilkan Tengkorak

Video

Gambar 4.14 Rancangan Menu Tengkorak

6. Rancangan menu rusuk

Gambar 4.15 Rancangan Menu Rusuk

94

7. Rancangan menu tulang belakang

Gambar 4.16 Rancangan Menu Tulang Belakang

8. Rancangan menu ekstremitas atas

Gambar 4.17 Rancangan Menu Ekstremitas Atas

95

9. Rancangan menu ekstremitas bawah

Gambar 4.18 Rancangan Menu Ekstremitas Bawah

10. Rancangan menu Bantuan

Gambar 4.19 Rancangan STD Menu Bantuan

96

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.

97

Gambar 4.21 Rancangan Pembukaan Program

rogram
2. Rancangan layar menu utama
Rancangan ini berfungsi sebagai tampilan utama program yang
menyediakan 6 tombol menu yaitu : home, visualisasi 3D, materi,
bantuan, profil. Pada tampilan menu ini juga terdapat tombol on / off
music dan exit. Pada tampilan berisikan tentang sekilas seputa
seputar
struktur rangka manusia.

98

Gambar 4.22 Rancangan Menu Utama

3. Rancangan layar visualisasi 3D
Pada rancangan visualisasi 3D ini berfungsi menampilkan struktur
rangka dengan 3 dimensi. Di rancangan ini terdapat 8 tombol yaitu :
panah atas, panah bawah, panah kiri, panah kanan, reset, zoom in, dan
zoom out.
Pada tombol panah berfungsi merotasi 3 dimensi struktur rangka.
rangka
Tanda zoom in dan zoom out berfungsi untuk memperbesar
memper
dan
memperkecil objek 3 dimensi struktur rangka dan untuk tombol reset
digunakan untuk mengembalikan 3 dimensi struktur rangka ke posisi
semula.

99

Gambar 4.23
4. Rancangan Menu Visualisasi 3 Dimensi
imensi
4. Rancangan layar materi
Pada rancangan menu materi ini berfungsi untuk menampilkan materi
seputar struktur rangka manusia. Pada menu ini juga disajikan tombol
menu untuk mengakses tiap bagian struktur rangka yaitu: tengkorak,
rusuk, tulang belakang, ekstremitas atas dan ekstremit
ekstremitas
as bawah.

100

Gambar 4.24 Rancangan Menu Materi

5. Rancangan layar sub menu materi
Pada rancangan ini berfungsi sebagai pemberi keterangan dari tiap
masing-masing
masing bagian dari struktur rangka pada manusia. Tombol
yang disediakan
sediakan pada rancangan ini yaitu : materi, gambar dan video.
Pada materi berisi berupa teks yang menjelaskan bagian-bagian
bagian dari
materi yang terdapat
erdapat pada menu materi. Pada tombol gambar berupa
visualisasi gambar dari materi yang telah dipi
dipilih
lih dan gambar tersebut
bisa diperbesar
perbesar agar pengguna dapat melihatnya dengan jelas struktur
tulang pada manusia. Dan pada tombol video menampilkan video 3
dimensi tentang materi yang dipilih
di
oleh pengguna.

101

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.

102

Gambar 4.26 Rancangan Menu Bantuan

7. Rancangan layar profil
Rancangan ini berfungsi untuk menampilkan informasi tentang
penulis.

Gambar 4.27 Rancangan Menu Penulis

103

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

Format
yang
digunakan

Sumber

Background

Gambar

PSD

Buatan Sendiri

Tombol

Gambar

PSD

Buatan Sendiri

Animasi

JPG

Buku Kedokteran

Navigasi
3

Gambar
Rangka

Intro

Animasi

SWF

Buatan Sendiri

Video Rangka

Video

FLV

Buatan Sendiri

Backsound

Audio

MP3

Internet

Rangka 3D

Shockwave 3D

W3D

Buatan Sendiri

104

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.

105

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.

106

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.

107

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

108

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
buatbiasanya berupa File jpg yang sudah di siapkan oleh penulis,
drag gambar objek tersebut dan letakan pada plane. Aktifkan seethrough pada objek property agar cylinder menjadi transparan agar
mudah di bentuk sesuai gambar pada plane. Kemudian select
cylinder dan lakukan convert ka editable poly.

109

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

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 abuabu disamping pilihan difuse. Lalu pilih bitmap, browse dan pilih
material rangka yang digunakan. Kemudian tarik material slot ke
arah permukaan layar rangka.

111

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.

112

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

113

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.

114

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

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.

116

Gambar 4.41 Tombol Navigasi

Pada tombol panah atas menggunakan script
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(1, 0, 0)
updatestage
end
Pada tombol panah bawah mengunakan script
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(-1, 0, 0)
updatestage
end
Pada tombol panah kiri mengunakan script
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
117

member("rangka").model[1].rotate(0, 0, -1)
updatestage
end
Pada tombol panah kanan mengunakan script
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(0, 0, 1)
updatestage
end
Pada tombol reset menggunakan script
on mouseenter me
puppetsound 3,"pling"
end
on mouseUp me
member("rangka").resetWorld()
end

Pada tombol zoom in menggunakan script

on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
sprite(2).camera.translate(0,0,-10)
updatestage
end

Pada tombol zoom out menggunakan script

on mouseenter me
puppetsound 3,"pling"

118

end
on mousewithin me
sprite(2).camera.translate(0,0,10)
updatestage
end
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

119

Tabel 4.5 Pengujian Black-Box

No.

Rancangan Proses

Hasil yang
diharapkan

Hasil

Keterangan

1.

Klik Masuk
pada video intro

Menampilkan
halaman menu utama

Ok

Lampiran 2
Halaman menu
utama
Gambar 2

2.

Klik Home
pada menu utama

Ok

Lampiran 2
Halaman pilihan
menu
Gambar 2

3.

Klik Visualisasi
3D pada menu
utama

Menampilkan
halaman visualisasi
3D

Ok

Lampiran 2
Halaman visualisasi
3D
Gambar 3

4.

Klik Panah atas

pada navigasi 3D

Gambar 3D rangka
berputar ke atas

Ok

Gambar 3D rangka
berputar ke atas

5.

Klik Panah
bawah pada
navigasi 3D

Gambar 3D rangka
berputar ke bawah

Ok

Gambar 3D rangka
berputar ke bawah

6.

Klik Panah
kanan pada
navigasi 3D

Gambar 3D rangka
berputar ke kanan

Ok

Gambar 3D rangka
berputar ke kanan

7.

Klik Panah kiri

pada navigasi 3D

Gambar 3D rangka
berputar ke kiri

Ok

Gambar 3D rangka
berputar ke kiri

Menampilkan
halaman utama

120

8.

Klik Reset pada

navigasi 3D

Gambar 3D rangka
kembali ke posisi
semula

Ok

9.

Klik zoom in
pada navigasi 3D

Gambar 3D rangka
membesar /
mendekat

Ok

10.

Klik zoom out

pada navigasi 3D

Gambar 3D rangka
mengecil / menjauh

11.

Klik Materi
pada menu utama

Menampilkan
halaman materi

12.

Klik gambar
tengkorak pada
menu materi

Menampilkan materi
tengkorak

13.

Klik Gambar
Rusuk pada
menu materi

Menampilkan materi
rusuk

14.

Klik gambar
tulang belakang
pada menu materi

Menampilkan materi
tulang belakang

15.

Klik gambar
ekstemitas atas
pada menu materi

Menampilkan materi
ekstremitas atas

Ok

Gambar 3D rangka
kembali ke posisi
semula

Gambar 3D rangka
membesar /
mendekat

Gambar 3D rangka
memngecil /
menjauh

Ok

Lampiran 2
Halaman materi
Gambar 4

Ok

Lampiran 2
Halaman materi
tengkorak
Gambar 5

Ok

Lampiran 2
Halaman materi
rusuk
Gambar 8

Ok

Lampiran 2
Halaman materi
tulang belakang
Gambar 11

Ok

Lampiran 2
Halaman materi
ekstremitas atas
Gambar 14

121

16.

Klik gambar
ekstemitas
bawah pada
menu materi

Menampilkan materi
ekstremitas bawah

Ok

Lampiran 2
Halaman materi
ekstremitas bawah
Gambar 17
Lampiran 2
Halaman penjelasan
tengkorak
Gambar 5

17.

Klik Penjelasan
pada materi
tengkorak

Tampilkan
penjelasan tengkorak

Ok

18.

Klik gambar
pada materi
tengkorak

Tampilkan gambargambar tengkorak

Ok

Lampiran 2
Halaman gambargambar 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

21.

Klik gambar
pada materi rusuk

Tampilkan gambargambar rusuk

Ok

Lampiran 2
Halaman gambargambar rusuk
Gambar 9

22.

Klik Video
pada materi rusuk

Tampilkan video
rusuk

Ok

Lampiran 2
Halaman video
rusuk
Gambar 10

Lampiran 2
Halaman penjelasan
rusuk
Gambar 8

122

Lampiran 2
Halaman penjelasan
tulang belakang
Gambar 11

23.

Klik Penjelasan
pada materi
tulang belakang

Tampilkan
penjelasan tulang
belakang

Ok

24.

Klik gambar
pada materi
tulang belakang

Tampilkan gambargambar tulang

belakang

Ok

Lampiran 2
Halaman gambargambar tulang
belakang
Gambar 12

25.

Klik Video
pada materi
tulang belakang

Tampilkan video
tulang belakang

Ok

Lampiran 2
Halaman video
tulang belakang
Gambar 13

26.

Klik Penjelasan
pada materi
ekstremitas atas

Tampilkan
penjelasan
ekstremitas atas

Ok

27.

Klik gambar
pada materi
ekstremitas atas

Tampilkan gambargambar ekstremitas

atas

Ok

Lampiran 2
Halaman gambargambar ekstremitas
atas
Gambar 15

28.

Klik Video
pada materi
ekstremitas atas

Ok

Lampiran 2
Halaman video
ekstremitas atas
Gambar 16

Tampilkan video
ekstremitas atas

Lampiran 2
Halaman penjelasan
ekstremitas atas
Gambar 14

123

29.

30.

Klik Penjelasan
pada materi
ekstremitas
bawah

Klik gambar
pada materi
ekstremitas
bawah

Ok

Tampilkan gambargambar ekstremitas

bawah

Ok

Lampiran 2
Halaman gambargambar ekstremitas
bawah
Gambar 18

Ok

Lampiran 2
Halaman video
ekstremitas bawah
Gambar 19

Klik Video
pada materi
ekstremitas
bawah

Tampilkan video
ekstremitas bawah

32

Klik help pada

menu utama

Menampilkan
halaman bantuan

Ok

.33

Klik profil pada

menu utama

Menampilkan
halaman profil

Ok

31.

Lampiran 2
Halaman penjelasan
ekstremitas bawah
Gambar 17

Tampilkan
penjelasan
ekstremitas bawah

Lampiran 2
Halaman bantuan
Gambar 20

Lampiran 2
Halaman profil
Gambar 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.

124

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

125

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 McGrawHill 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 : Universitas
Islam 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/197901012
005011NANDI/Artikel_di_Jurnal_GEA.pdf__Penggunaan_Multimedia__
Interaktif.pdf
diakses 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 Islam
Indonesia.

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

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.

L1

Lampiran II: Interface Aplikasi

1. Tampilan Intro

2. Tampilan Menu Utama

L2

3. Tampilan Visualisasi 3D

4. Tampilan Materi

L3

5. Tampilan Materi Tengkorak

6. Tampilan Materi Gambar Tengkorak

L4

7. Tampilan Materi Video Tengkorak

8. Tampilan Materi Rusuk

L5

9. Tampilan Materi Gambar Rusuk

10. Tampilan Materi Video Rusuk

L6

11. Tampilan Materi Tulang Belakang

12. Tampilan Materi Gambar Tulang Belakang

L7

13. Tampilan Materi video Tulang Belakang

14. Tampilan Materi Ekstremitas Atas

L8

15. Tampilan Materi Gambar Ekstremitas Atas

16. Tampilan Materi video Ekstremitas Atas

L9

17. Tampilan Materi Ekstremitas Bawah

18. Tampilan Materi Gambar Ekstremitas Bawah

L10

19. Tampilan Materi Video Ekstremitas Atas

20. Tampilan Bantuan

L11

21. Tampilan Profil

L12

Lampiran III: Source Code

Macromedia Director MX Lingo Script
Button 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=70
end
on mouseup me
go to "menu_1"
end
Menu Visualisasi
on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"sound1"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go to "menu_2"
end

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

L13

on mouseup me
go to "menu_3"
end
Menu Bantuan
on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"sound1"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go to "menu_4"
end
Menu Profil

on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"sound1"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go to"menu_5"
beep
end

Button Panah Atas

on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(1, 0, 0)
updatestage
end

L14

Button Panah Bawah

on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(-1, 0, 0)
updatestage
end
Button Panah Kiri
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(0, 0, -1)
updatestage
end
Button Panah Kanan
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
member("rangka").model[1].rotate(0, 0, 1)
updatestage
end
Button Reset
on mouseenter me
puppetsound 3,"pling"
end
on mouseUp me
member("rangka").resetWorld()
end
Button Zoom In
on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me

L15

sprite(2).camera.translate(0,0,-10)
updatestage
end

Button Zoom Out

on mouseenter me
puppetsound 3,"pling"
end
on mousewithin me
sprite(2).camera.translate(0,0,10)
updatestage
end

Button Materi Tengkorak

on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"pling"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseUp me
go "1-1"
end
Button Materi Rusuk
on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"pling"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseUp me
go "2-1"
end

L16

Button Materi Tulang Belakang

on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"pling"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseUp me
go "3-1"
end
Button Ekstermitas Atas
on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"pling"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseUp me
go "4-1"
end
Button Ekstermitas Bawah
on mouseenter me
sprite(the currentspritenum).blend=100
puppetsound 3,"pling"
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseUp me
go "5-1"
end
Button Materi Gambar Tengkorak
on mouseenter me
sprite(the currentspritenum).blend=100
end

L17

on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "1-2"
end
Button Materi Video Tengkorak
on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "1-3"
end
Button Materi Gambar Rusuk
on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "2-2"
end
Button Materi Video Rusuk
on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end

L18

on mouseup me
go "2-3"
end

Button Materi Gambar Tulang Belakang

on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "3-2"
end
Button Materi Video Tulang Belakang
on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "3-3"
end
Button Materi Gambar Ekstremitas Atas
on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "4-2"
end

L19

Button Materi Video Ekstremitas Atas

on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "4-3"
end
Button Materi Gambar Ekstremitas Bawah
on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "5-2"
end
Button Materi Video Ekstremitas Bawah

on mouseenter me
sprite(the currentspritenum).blend=100
end
on mouseleave me
sprite(the currentspritenum).blend=70
end
on mouseup me
go "5-3"
end

L20

Adobe Flash Actionscript2

Button Sound
Sound OFF
on (release) {
tellTarget ("../sound") {
stopAllSounds();
}
}
on (release) {
nextFrame();
}

Sound ON
on (release) {
tellTarget ("../sound") {
nextFrame();
}
}
on (release) {
prevFrame();
}
Materi Gambar
Frame 1
photo_filename = new Array();
photo_thumbnail = new Array();
photo_description = new Array();
filepath = "photos/";
// Load the photos XML
var 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);

L21

photo_description.push(nodes[i].attributes.description);
}
}
flash_xml.load(filepath + "photos.xml");
Frame 5
x_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 thumnail
for( 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()
{

L22

_root.p = this._parent.tn_no;
_root.play();
}
}
//menampilkan Header
tn_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;
else
desc_speed = ( pic_desc._height + pic_desc._y ) / tn_speed;
pic_desc._y -= desc_speed;
}
Frame 10
pic._alpha = 0;
pic.loadMovie(filepath + photo_filename[p]);

L23

pic_desc.txt = photo_description[p];
old_p = p;
preloader._width = 0;
preloader._visible = preloader_bg._visible = true;
//menampilkan gambar
preloader.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 12
stop();
fit_width = Stage.width;
fit_height = Stage.height;
orginal_width = pic._width;
original_height = pic._height;
double_width = orginal_width * 2;

L24

double_height = original_height * 2;
triple_width = orginal_width * 3;
triple_height = original_height * 3;
current_width = fit_width;
current_height = fit_height;

// the default width

// the default height

pic_speed = 5;
//memperbesar gamabar
pic_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

L25

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;
else
pic._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." />
<photo filename="3.jpg" thumbnail="s_3.jpg" description="This photo size is
640x480." />

<photo filename="4.jpg" thumbnail="s_4.jpg" description="This photo size is

640x480." />
<photo filename="5.jpg" thumbnail="s_5.jpg" description="This photo size is
640x480." />
<photo filename="6.jpg" thumbnail="s_6.jpg" description="This photo size is
640x480." />
</photos

L26

Lampiran 4: Kuisioner Evaluasi

KUISIONER EVALUASI
(Untuk Melengkapi Kebutuhan Skripsi UIN Syarif Hidayatullah Jakarta)

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

L27

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

L28

Hasil Pengolahan Data

1. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram di
bawah ini:
Tabel Hasil Kuisioner Evaluasi Pertanyaan No.1
Jumlah

Jawaban Responden

Responden

Jumlah Penjawab

Presentase (%)

a. Mudah

30

18

60%

b. Cukup Mudah

30

30%

c. Kurang Mudah

30

10%

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

Responden

a. Mudah

b. Cukup
Mudah

c. Kurang
Mudah

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).
2. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram di
bawah ini:
Tabel Hasil Kuesioner Evaluasi Pertanyaan No.2
Jawaban Responden
a. Menarik

Jumlah
Responden
30

L29

Jumlah Penjawab

Presentase (%)

16

53%

b. Cukup Menarik

30

13

44%

c. Tidak Menarik

30

3%

Tampilan Aplikasi Secara

Keseluruhan
60%
40%
20%

Responden

0%
a. Menarik

b. Cukup
Menarik

c. Kurang
Menarik

Berdasarkan hasil evaluasi dapat diketahui bahwa tampilan program

secara keseluruhan menarik. Artinya kebutuhan pengguna akan unsur menarik
dalam program terpenuhi.
3. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram di
bawah ini:
Tabel Hasil Kuesioner Evaluasi Pertanyaan No.3
Jawaban Responden

Presentase

Jumlah Responden

Jumlah Penjawab

a. Menarik

30

19

64%

b. Cukup menarik

30

30%

c. Tidak menarik

30

6%

L30

(%)

Kesan Animasi, Teks, Suara

dan Gambar pada Aplikasi
80%
60%
40%
20%
0%

Responden
a. Menarik

b. Cukup
Menarik

c. Kurang
Menarik

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.
4. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram di
bawah ini:
Tabel Hasil Kuesioner Evaluasi Pertanyaan No.4
Jawaban
Responden
a. Jelas

Jumlah Responden

Jumlah Penjawab

Presentase (%)

30

16

54%

b. Cukup Jelas

30

10

33%

c. Kurang Jelas

30

13%

Kejelasan Materi dalam

Aplikasi
60%
40%
20%

Responden

0%
a. Jelas

b. Cukup Jelas

L31

c. Kurang
Jelas

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:
Tabel Hasil Kuesioner Evaluasi Pertanyaan No.5
Jawaban
Responden

Jumlah

Jumlah Penjawab

Presentase (%)

Responden

a. Lengkap

30

16

54%

b. Cukup
Lengkap
c. Kurang
Lengkap

30

26%

30

20%

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

Responden

a. Lengkap

b. Cukup
Lengkap

c. Kurang
Lengkap

Berdasarkan hasil evaluasi dapat diketahui bahwa informasi yang

diberikan dalam program sudah cukup lengkap. Artinya kebutuhan pengguna akan
informasi dalam program terpenuhi
6. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram
dibawah ini:

L32

Tabel Hasil Kuesioner Evaluasi Pertanyaan No.6

Jawaban
Responden
a. Ya

Jumlah Responden

Jumlah Penjawab

Presentase (%)

30

18

60%

b. Kurang

30

27%

c. Tidak

30

13%

Kesesuaian dengan Informasi

yang Dibutuhkan
80%
60%
40%

Responden

20%
0%
a. Ya

b. Kurang

c. Tidak

Berdasarkan hasil evaluasi dapat diketahui bahwa program ini sudah

menjawab kebutuhan pengguna dalam mendapatkan informasi yang dibutuhkan.
7. Hasil presentase jawaban responden dapat dilihat pada tabel dan diagram
dibawah ini:
Tabel Hasil Kuesioner Evaluasi Pertanyaan No.7
Jawaban
Responden
a. Bagus

Jumlah Responden

Jumlah Penjawab

Presentase (%)

30

20

66

b. Cukup Bagus

30

27

c. Kurang Bagus

30

L33

Tampilan Aplikasi Secara

Keseluruhan
80%
60%
40%
20%
0%

Responden
a. Bagus

b. Cukup
Bagus

c. Kurang
Bagus

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.

L34