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
i
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)
v
KATA PENGANTAR
Assalamu’alaikum Wr. Wb. Dengan memanjatkan puji dan syukur kehadirat Allah SWT yang telah memberikan Rahmat dan Hidayah-Nya hingga penulis dapat menyelesaikan dan menyusun skripsi berjudul Visualisasi 3 struktur rangka pada manusia. Shalawat serta salam senantiasa tercurahkan kepada Nabi Muhammad SAW, beserta keluarga, sahabat serta orang-orang yang istiqomah mengemban risalahnya hingga akhir zaman. Dalam menyusun skripsi ini, penulis menyadari bahwa skripsi ini tidak dapat terlaksana dengan baik tanpa bantuan dan bimbingan dari semua pihak. Pada kesempatan ini, perkenankan mengucapkan terima kasih kepada : 1. Prof. Dr. Komarudin Hidayat, selaku Rektor Universitas Islam Negeri Syarif Hidayatullah Jakarta, Dr. Ir. Syopiansyah Jaya Putra, M.Sis, selaku Dekan Fakultas Sains dan Teknologi. 2. Yusuf Durrachman, M.Sc, MIT selaku ketua dan Viva Arifin, MMSI selaku Sekretaris Program Studi Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif Hidayatullah Jakarta. 3. Yusuf Durrachman, M.Sc, MIT selaku Dosen Pembimbing I dan Elsy Rahajeng selaku Dosen Pembimbing II yang telah memberikan kesempatan, waktu, kesabaran dan perhatiannya untuk membimbing dalam menyelesaikan skripsi ini. 4. Bakri La Katjong, MT, M.Kom selaku Dosen Penguji I dan Arini, MT selaku Dosen Penguji II.
vi
5. Keluarga tercinta Bapak dan Mama , para kakak dan sodara tercinta yang telah memberikan perhatian, do’a, kesabaran menunggu penyelesaian skripsi ini. Serta dukungannya baik materi ataupun non materi. 6. Terima kasih kepada Melia Rizka yang telah membantu dan meminjamkan Laptopnya untuk bimbingan. 7. Rekan-rekan TI 2006 : Hendry, Ardiyan, Sari, Vera, Riski, Luluk, Iche, Joa, Kosasih. Dan semua teman-teman yang tidak bisa disebutkan satu persatu, terima kasih atas segala motivasi dan dukungannya. Penulis berharap semoga penulisan skripsi ini dapat memberikan manfaat bagi pembaca dan penulis sendiri, serta pihak-pihak lain yang berkepentingan dengan laporan ini. Akhir kata kepada semua pihak yang telah membantu terwujudnya tugas akhir ini semoga Allah SWT selalu melimpahkan Rahmat dan Karunia-Nya. Amin.
Jakarta September 2011
Anom Try Putranto 206091004027
vii
DAFTAR ISI
ABSTRAK KATA PENGANTAR
i
DAFTAR ISI
iv
DAFTAR GAMBAR
vii
DAFTAR TABEL
xi
DAFTAR LAMPIRAN
xii
BAB I
PENDAHULUAN 1.1 Latar Belakang Masalah
1
1.2 Perumusan Masalah
2
1.3 Batasan Masalah
2
1.4 Tujuan Penelitian
3
1.5 Manfaat Penelitian
3
1.6 Metode Penelitian
4
1.6.1 Metode Pengumpulan Data
4
1.6.2 Metode Pengembangan Aplikasi Multimedia
5
1.7 Sistematika Penulisan
6
BAB II LANDASAN TEORI 2.1 Visualisasi
8
2.2 Grafika Komputer
8
iv
2.2.1 Sistem Koordinat
9
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
v
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
9
Gambar 2.2 Proses Translasi 2D
10
Gambar 2.3 Proses Scaling 2D
11
Gambar 2.4 Proses Rotasi 2D
11
Gambar 2.5 Proses Translasi 3D
12
Gambar 2.6 Rotasi Terhadap Sumbu X
13
Gambar 2.7 Rotasi Terhadap Sumbu Y
13
Gambar 2.8 Rotasi Terhadap Sumbu Z
14
Gambar 2.9 Proses Penskalaan 3D
14
Gambar 2.10 Polygon Modeling
16
Gambar 2.11 NURBS Modeling
16
Gambar 2.12 Teknik Pencahayaan
18
Gambar 2.13 Anatomi Bentuk Font
20
Gambar 2.14 Gambar Bitmap
23
Gambar 2.15 Gambar Vektor
23
Gambar 2.16 Gambar Animasi
25
Gambar 2.17 Siklus Pengembangan Aplikasi Multimedia
31
Gambar 2.18 Contoh Storyboard
33
Gambar 2.19 Struktur Navigasi Linier
33
Gambar 2.20 Struktur Navigasi Hierarkis
34
Gambar 2.21 Struktur Navigasi Nonlinier
34
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
x
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
1
BAB 1 PENDAHULUAN
1.1
Latar Belakang Masalah Perkembangan dunia teknologi informasi saat ini semakin pesat dan
merambah ke berbagai sisi kehidupan manusia untuk dapat berperan aktif dalam teknologi informasi, tidak terkecuali pada pelajar yang memanfaatkan penggunaan perangkat lunak multimedia dalam proses belajar mengajar akan lebih meningkatkan efisien, menigkatkan motivasi, memfasilitasi belajar eksperimental, konsisten dengan belajar yang berpusat pada siswa atau mahasiswa dan mampu belajar lebih baik. (Suyanto, 2003;340) Dalam radiologi, seorang radiografer penting sekali memahami struktur rangka. Sering kali pelajar radiografer kesulitan dalam memahaminya, karena memang struktur rangka manusia termasuk ke dalam salah satu sistem dalam tubuh manusia yang cukup rumit untuk dipelajari. Untuk mudahkan radiografer memahami dan mempelajari struktur rangka dalam tubuh manusia. Dengan memanfaatkan teknologi informasi ini, maka dibuat aplikasi visualisasi struktur rangka manusia menggunakan 3 dimensi. Dengan menggunakan visualisasi 3 dimensi, radiografer dapat melihat dan mempelajari bagaimana struktur tulang manusia secara jelas. Atas dasar pemikiran tersebut penulis berusaha untuk menghadirkan sebuah aplikasi pembelajaran multimedia yang berbentuk perangkat ajar untuk radiografer yang menghadirkan model 3 dimensi yaitu struktur rangka manusia
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.
2
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.
3
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 :
4
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.
6
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.
7
8
BAB II LANDASAN TEORI
2.1
Visualisasi Visualisasi adalah rekayasa dalam pembuatan gambar, diagram atau
animasi untuk penampilan suatu informasi. Secara umum, visualisasi dalam bentuk gambar baik yang bersifat abstrak maupun nyata telah dikenal sejak awal dari peradaban manusia. Contoh dari hal ini meliputi lukisan di dinding-dinding gua dari manusia purba, bentuk huruf hiroglip Mesir, sistem geometri Yunani, dan teknik pelukisan dari Leonardo da Vinci untuk tujuan rekayasa dan ilmiah, dll. (Herbert and James, 1998) Pada saat ini visualisasi telah berkembang dan banyak dipakai untuk keperluan ilmu pengetahuan, rekayasa, visualisasi disain produk, pendidikan, multimedia interaktif, kedokteran, dll. Pemakaian dari grafika komputer merupakan perkembangan penting dalam dunia visualisasi, setelah ditemukannya teknik garis perspektif pada zaman Renaissance. Perkembangan bidang animasi juga telah membantu banyak dalam bidang visualisasi yang lebih kompleks dan canggih. 2.2
Grafika Komputer Menurut Janner (2007) Grafika komputer pada dasarnya adalah suatu
bidang komputer yang mempelajari cara-cara untuk meningkatkan dan memudahkan komunikasi antara manusia dan mesin (komputer) dengan jalan
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
9
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)
y
x
z
Gambar 2.6 Rotasi terhadap sumbu X
y
z
x
Gambar 2.7 Rotasi terhadap sumbu Y
13
y
z
x
Gambar 2.8 Rotasi terhadap sumbu Z 3) Penskalaan Proses pembesaran atau perkecil gambar. Penskalaan bisa dilaksanakan ke arah x saja, ke arah y saja, ke arah z saja, atau kombinasi ketiga-tiganya.
Diperkecil
Diperbesar
Gambar 2.9 Proses penskalaan 3D
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
2
JPEG (Joint Fotogrphic Expert Group)
3
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)
4
Portable Network Graphics (.PNG)
Format yang standar dan sering digunakan di internet untuk menampilkan gambar atau pengiriman gambar. Ukuran file ini cukup kecil dan setara dengan ukuran gif dengan kualitas yang bagus. Namun tidak mendukung animasi (gambar bergerak).
5
PSD (Photoshop Document)
Format file ini merupakan format asli dokumen Adobe Photoshop. Format ini mampu menyimpan informasi layer dan alpha channel yang terdapat pada sebuah gambar, sehingga suatu saat dapat dibuka kembali. Format ini juga mampu menyimpan gambar dalam beberapa mode warna yang disediakan Photoshop dan dapat menyimpan dengan format file ini jika ingin mengeditnya kembali.
6
AI (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
2
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
3
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
4
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
6
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
7
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
8
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
9
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
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
1
Background
Gambar
PSD
Buatan Sendiri
2
Tombol
Gambar
PSD
Buatan Sendiri
Animasi
JPG
Buku Kedokteran
Navigasi 3
Gambar Rangka
4
Intro
Animasi
SWF
Buatan Sendiri
5
Video Rangka
Video
FLV
Buatan Sendiri
6
Backsound
Audio
MP3
Internet
7
Rangka 3D
Shockwave 3D
W3D
Buatan Sendiri
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 buat—biasanya 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
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
9
30%
c. Kurang Mudah
30
3
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
1
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
9
30%
c. Tidak menarik
30
2
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
4
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
8
26%
30
6
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
8
27%
c. Tidak
30
4
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
8
27
c. Kurang Bagus
30
2
7
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
