76
Tabel 4.2 Rencana Kerja Pembuatan Proyek Skripsi
4.2 Desain dan Produksi
Dalam tahap ini penulis melakukan pembuatan storyboard, struktur navigasi, mendesain interface antarmuka, pengumpulan dan pencarian isi, dan
produksi.
4.2.1 Storyboard
Storyboard merupakan deskripsi tiap scene
tampilan, dengan mencantumkan semua objek multimedia dan link ke scene lain Suyanto, 2003:
No Kegiatan
Bulan Ke- 1
Bulan Ke- 2
Bulan Ke- 3
Bulan Ke- 4
1 2
3 4
1 2
3 4
1 2
3 4
1 2
3 4
1 Membuat peta
navigasi 2
Storyboard 3
merancang Antarmuka
interface
4 pencarian dan
pengumpulan isi 5
3D modeling 6
mendigitalkan Audio dan video
7 merevisi desain
8 membuat grafis
9 membuat animasi
10 asemmbly
pemrograman 11
produksi 12
pengujian 13
memperbaiki bug 14
distribusi
375. Secara umum rancangan rangka pada manusia.
Scene 1
Form Name Link
Keterangan umum rancangan storyboard dalam visualisasi 3 dimensi
Tabel 4.3 Storyboard
Visual
: Intro : Scene 2
: Menampilkan halaman pembuka
77
ensi struktur
Sound Sound1.
mp3 drivin
dat funky
daisy.m p3
2
Form Name Link
Keterangan :
3
Form Name : Visuali Link
: Keterangan : Menampilkan visuali
: Home : Scene 3,4,5,6
gan :Menampilkan Penjelasan secara umum tentang sistem rangka manusia
: Visualisasi 3D : Scene 2,4,5,6
: Menampilkan visualisasi 3 dimensi struktur rangka manusia dan pengguna bisa merotasi dan
membesar dan mengecilkan objek 3 dimensi
78
ChuckB rown_N
ovember .mp3
Sound1. mp3
rotasi dan ChuckB
rown_N ovember
.mp3
Sound1. mp3
Pling.m p3
4
Form Name : Link
: Keterangan : Menampilkan mat
5
Form Name : Bantuan Link
: Keterangan : Menampilkan b
: Materi : Scene 2,3,5,6,7,8,9,10,11
: Menampilkan materi tentang struktur rangka dan bagian-bagiannya
Tampilan menu rangka diwakili dengan kotak- kotak.
: Bantuan : Scene 2,3,4,6
: Menampilkan bantuan dari tombol navigasi yang ada pada visualisasi 3 dimensi ini.
79
ChuckB rown_N
ovember .mp3
Sound1. mp3
Pling.m p3
ChuckB rown_N
ovember .mp3
Sound1. mp3
80
6
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
ChuckB rown_N
ovember .mp3
Sound1. mp3
81
8
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
ChuckB rown_N
ovember .mp3
Sound1. mp3
82
10
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
ChuckB rown_N
ovember .mp3
Sound1. mp3
83
4.2.2 Flowchart
Perancangan flowchart menggambarkan tahapan proses dari suatu sistem, termasuk sistem multimedia. Suyanto,2003:364
Gambar 4.1 Rancangan Flowchart Intro
Gambar 4.1 menjelaskan halaman awal dari aplikasi. Jika pengguna memilih masuk maka akan menuju halaman menu utama. Jika pengguna memilih
keluar maka aplikasi akan tertutup.
Keterangan A: Halaman menu utama
84
Gambar 4.2 Rancangan Flowchart Menu Utama
Gambar 4.2 flowchart ini menjelaskan bahwa halaman menu utama berisi 5 proses, yakni untuk menuju menu utama, visualisasi 3 dimensi, materi, bantuan
dan profil. Jika pengguna memilih materi maka akan terhubung ke menu materi
Keterangan A: Halaman menu utama
B: Halaman materi
85
dan jika tidak makan pengguna bisa memilih menu lainnya atau keluar dari program.
Gambar 4.3 Flowchart Menu Materi
Gambar 4.3 flowchart ini menjelaskan bahwa dalam menu materi terdapat 5 proses, yakni materi tengkorak, materi rusuk, materi tulang belakang, materi
ekstremitas atas dan materi ekstremitas bawah. Jika pengguna memilih salah satu
Keterangan B: Halaman menu materi
C: Halaman sub menu materi tengkorak
D: Halaman sub menu materi rusuk
E: Halaman sub menu materi Tulang belakang
F: Halaman sub menu materi Ekstremitas atas
G: Halaman sub menu materi Ekstremitas bawah
86
proses tersebut maka akan terhubung ke menu yang diinginkan dan jika “tidak” maka pengguna bisa memilih menu lainnya atau keluar dari program.
Gambar 4.4 Flowchart Sub Menu Materi Tengkorak
Gambar 4.4 flowchart ini menjelaskan bahwa dalam sub menu materi tengkorak berisi 3 proses, yakni sub menu penjelasan tengkorak, sub menu
gambar tengkorak, dan sub menu video tengkorak. Jika pengguna memilih salah satu proses maka akan dilakukan dan jika “tidak” maka pengguna bisa memilih
sub menu lainnya atau keluar dari program.
Keterangan C: Halaman sub menu materi
tengkorak
87
D
Pilih Penjelasan
Pilih Gambar
Pilih Video Tampilkan
Penjelasan Rusuk
Tampilkan Gambar Rusuk
Tampilkan Video Rusuk
Ya Tidak
Ya Tidak
Ya Tampilkan Layar
Rusuk
Keluar Tidak
Gambar 4.5 Flowchart Sub Menu Materi Rusuk
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.
Keterangan D: Halaman sub menu materi
rusuk
88
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.
Keterangan E: Halaman sub menu materi
Tulang belakang
89
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.
Keterangan F: Halaman sub menu materi
Ekstremitas atas
90
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.
Keterangan G: Halaman sub menu materi
Ekstremitas bawah
91
4.2.3 Perancangan Struktur Navigasi
Struktur navigasi yang digunakan adalah hierarkis model karena lebih mudah digunakan oleh pengguna. Pada model ini dapat dilihat penggunaan setiap
scene yang dihubungkan dengan scene lainnya. Untuk lebih jelasnya dapat dilihat pada Gambar 4.9.
Gambar 4.9 Rancangan Struktur Navigasi
92
4.2.4 Perancangan State Diagram Transition STD
1. Rancangan Struktur Intro
Intro Klik “Mulai”
Tampilkan halaman menu utama
Menu Utama
Gambar 4.10 Rancangan STD Intro
2. Rancangan Struktur Menu Utama
Menu Utama HOME
Bantuan Profil
Materi Visualisasi
3D
Klik “Home” Tampilkan halaman
menu utama Klik “Materi”
Tampilkan halaman Materi
Klik “Visualisasi 3D” Tampilkan halaman
Visualisasi 3D
Klik “Home” Tampilkan halaman
menu utama Klik “Bantuan”
Tampilkan halaman Bantuan
Klik “Home” Tampilkan halaman
menu utama Klik “Profil”
Tampilkan halaman Profil
Klik “Home” Tampilkan halaman
menu utama
Gambar 4.11 Rancangan STD Menu Utama
93
3. Rancangan menu visualisasi 3D
Gambar 4.12 Rancangan Menu Visualisasi 3D
4. Rancangan menu materi
Gambar 4.13 Rancangan STD Menu Materi
94
5. Rancangan menu tengkorak
Tengkorak Materi
Gambar Penjelasan
Video Klik “tengkorak”
Tampilkan Tengkorak Klik “tengkorak”
Tampilkan Tengkorak Klik “Gambar”
Tampilkan Gambar Klik “Penjelasan”
Tampilkan pejelasan Klik “tengkorak”
Tampilkan Tengkorak Klik “tengkorak”
Tampilkan Tengkorak Klik “Video”
Tampilkan Video
Gambar 4.14 Rancangan Menu Tengkorak
6. Rancangan menu rusuk
Gambar 4.15 Rancangan Menu Rusuk
95
7. Rancangan menu tulang belakang
Gambar 4.16 Rancangan
Menu Tulang Belakang
8. Rancangan menu ekstremitas atas
Gambar 4.17 Rancangan
Menu Ekstremitas Atas
96
9. Rancangan menu ekstremitas bawah
Gambar 4.18 Rancangan
Menu Ekstremitas Bawah
10. Rancangan menu Bantuan
Gambar 4.19 Rancangan STD Menu Bantuan
97
11. Rancangan menu Profil
Gambar 4.20 Rancangan STD Menu Profil 4.2.5
Mendesain Antarmuka interface
Rancangan antarmuka pemakai user interface yang akan ditampilkan pada aplikasi multimedia ini akan disesuaikan dengan kebutuhan pengguna dan
pengetahuan pengguna. Pada program visualisasi 3D struktur rangka pada manusia terdapat 7 rancangan layar, yaitu:
1. Rancangan layar intro Rancangan ini merupakan tampilan awal sebelum masuk ke tampilan
utama. Pada tampilan intro ini terdapat tombol untuk melanjutkan ke menu utama yaitu tombol mulai untuk memulai program.
2. Rancangan layar me Rancangan ini
menyediakan bantuan, profil.
music dan exit. struktur rangka
Gambar 4.21 Rancangan Pembukaan Program
ngan layar menu utama ngan ini berfungsi sebagai tampilan utama program
menyediakan 6 tombol menu yaitu : home, visualisasi 3D, n, profil. Pada tampilan menu ini juga terdapat tombol
dan exit. Pada tampilan berisikan tentang sekilas struktur rangka manusia.
98
rogram
program yang visualisasi 3D, materi,
tombol on off sekilas seputar
3. Rancangan layar visuali Pada rancangan
rangka dengan panah atas, panah
zoom out. Pada tombol
Tanda zoom memperkecil objek
digunakan untuk semula.
Gambar 4.22 Rancangan Menu Utama
ngan layar visualisasi 3D rancangan visualisasi 3D ini berfungsi menampilkan
dengan 3 dimensi. Di rancangan ini terdapat 8 tombol atas, panah bawah, panah kiri, panah kanan, reset, zoom
tombol panah berfungsi merotasi 3 dimensi struktur zoom in dan zoom out berfungsi untuk memper
perkecil objek 3 dimensi struktur rangka dan untuk tombol digunakan untuk mengembalikan 3 dimensi struktur rangka
99
pilkan struktur 8 tombol yaitu :
reset, zoom in, dan
struktur rangka. memperbesar dan
untuk tombol reset rangka ke posisi
Gambar 4.
4. Rancangan layar ma Pada rancangan
seputar struktur menu untuk mengakses
rusuk, tulang bel
Gambar 4.23 Rancangan Menu Visualisasi 3 Dimensi
ngan layar materi rancangan menu materi ini berfungsi untuk menampilkan
struktur rangka manusia. Pada menu ini juga disajikan untuk mengakses tiap bagian struktur rangka yaitu: tengkorak,
rusuk, tulang belakang, ekstremitas atas dan ekstremitas bawah.
100
imensi
menampilkan materi disajikan tombol
yaitu: tengkorak, as bawah.
5. Rancangan layar sub me Pada rancangan
masing-masing yang disediaka
Pada materi berisi materi yang
visualisasi gambar bisa diperbesar
tulang pada manusia. dimensi tentang materi yang di
Gambar 4.24 Rancangan Menu Materi
ngan layar sub menu materi rancangan ini berfungsi sebagai pemberi keterangan
masing bagian dari struktur rangka pada manusia. sediakan pada rancangan ini yaitu : materi, gambar dan
materi berisi berupa teks yang menjelaskan bagian-bagian yang terdapat pada menu materi. Pada tombol gambar
si gambar dari materi yang telah dipilih dan gambar perbesar agar pengguna dapat melihatnya dengan jelas
pada manusia. Dan pada tombol video menampilkan nsi tentang materi yang dipilih oleh pengguna.
101
keterangan dari tiap manusia. Tombol
gambar dan video. bagian dari
gambar berupa gambar tersebut
dengan jelas struktur menampilkan video 3
102
Gambar 4.25 Rancangan Sub Menu Materi
6. Rancangan layar bantuan Rancangan ini berisi untuk menampilkan informasi cara penggunaan
program. Rancangan ini akan ditampilkan secara singkat agar bisa memenuhi kebutuhan pengguna dan mempermudah pengguna dalam
menggunakan program ini.
103
Gambar 4.26 Rancangan Menu Bantuan
7. Rancangan layar profil Rancangan ini berfungsi untuk menampilkan informasi tentang
penulis.
Gambar 4.27 Rancangan Menu Penulis
104
4.2.6 Pengumpulan Pencarian Isi
Pegumpulan pencarian isi bahan berupa File-File audio, video, gambar, foto, teks dilakukan dengan cara mengambil dari berbagai sumber dan
membuatnya sendiri. Bahan yang berupa File gambar diambil dari buku koleksi pribadi. File audio penulis mendapatkannya dari internet. Sedangkan File video,
animasi, dan 3D dibuat sendiri oleh penulis.
Tabel 4.4 Tabel File yang Digunakan
No Nama File
Jenis Format
yang digunakan
Sumber
1 Background
Gambar PSD
Buatan Sendiri 2
Tombol Navigasi
Gambar PSD
Buatan Sendiri
3 Gambar
Rangka Animasi
JPG Buku Kedokteran
4 Intro
Animasi SWF
Buatan Sendiri 5
Video Rangka Video
FLV Buatan Sendiri
6 Backsound
Audio MP3
Internet 7
Rangka 3D Shockwave 3D
W3D Buatan Sendiri
105
4.2.7 Produksi
Dalam pembuatan visualisasi 3 dimensi struktur rangka pada manusia ini dibutuhkan spesifiksi perangkat lunak sebagai berikut:
1. Spesifikasi perangkat lunak Untuk mengembangkan aplikasi ini penulis membutuhkan spesifikasi
perangkat lunak sebagai berikut : a. Adobe Photoshop CS3, dengan spesifikasi Intel Pentium 4,
Microsoft Windows XP with Service Pack 2, Java Runtime Environment 1.5, Ram 2 Gb atau lebih. Photoshop digunakan
sebagai perangkat lunak untuk mempekecil ukuran File foto yang digunakan dalam aplikasi serta untuk mendesain gambar tampilan
layar program, editing gambar atau foto. b. 3Ds Max 2009, dengan spesifikasi Intel Pentium IV , 512 MB
RAM, 500 MB penyimpanan hardisk. 3D max digunakan sebagai perangkat lunak untuk perancangan bunga kering tiga dimensi dan
untuk menganimasikan bunga tiga dimensi menggunakan animasi kamera.
c. Adobe Flash CS3, dengan spesifikasi Intel Pentium 4, Microsoft Windows XP with Service Pack 2, Java Runtime Environment 1.5,
Ram 2 Gb atau lebih. Flash digunakan sebagai perangkat lunak untuk pengembangan animasi interaktif, juga animasi tombol yang
diperlukan dalam program ini.
106
d. Macromedia Director MX, dengan spesifikasi Intel Pentium III 600 MHz, 128 MB RAM, 200 MB penyimpanan memori. Director
digunakan sebagai perangkat lunak utama yang berfungsi menggabungkan semua komponen program yang telah dibuat
dengan menggunakan perangkat lunak ini maupun perangkat lunak pengembangan lainnya.
e. Audacity, Windows 2000, XP, RAM 512 MB digunakan sebagai perangkat lunak untuk mengedit audio agar lebih menarik.
2. Spesifikasi perangkat keras Untuk mengembangkan sistem ini penulis membutuhkan spesifikasi
perangkat keras, yaitu : a. Processor intel Pentium 4, berfungsi untuk memberikan proses
kinerja, kreativits dan produktivitas yang lebih tinggi. b. Memory 2048 Mbytes berfungsi untuk mempercepat proses
publish, rendering video dan juga objek 3 dimensi. Sekaligus sebagai tempat penyimpanan sementara perangkat lunak dan data.
c. Graphic Card 128 Mbytes berfungsi mempercepat penampilan gambar pada layar.
d. DVD-RW, berfungsi untuk penyimpanan program ke dalam bentuk kepingan CD.
e. Mouse, berfungsi sebagai alat interaksi penggunaan perangkat lunak pengembangan dan secara umum sebagai alat interaksi yang
penting dalam pembuatan aplikasi ini.
107
f. Keyboard, berfungsi untuk penulisan listing program dan secara
umum sebagai alat interaksi yang penting pada pembuatan program ini.
g. Active Speaker, berfungsi untuk mendengarkan suara pada program ini.
h. Monitor 14”, berfungsi sebagai media interface antarmuka atau penghubung antara pengguna dengan komputer sehingga tampilan
program dapat dilihat penulis. i.
Hard disk 80 GB berungsi untuk menyediakan tempat bagi program perangkat lunak dan menyediakan tempat penyimpanan
untuk keperluan program yang akan dibuat. Setelah spesifikasi pengembangan dapat dipenuhi tahap selanjutnya adalah
pembuatan program. Dalam proses pembuatan desain gambar latar penulis menggunakan Adobe Photoshop CS3, desain menggunakan kombinasi warna dan
langkah awal penulis mendesain tampilan halaman intro. Untuk mendapatkan tampilan yang diinginkan penulis memakai tampilan didominasi dengan warna
hijau yang melambangkan kesegaran yang identik dengan kedokteran dan warna putih yang melambangkan kebersihan atau streril. Dalam pembuatan ini memakai
resolusi 1024 x 768 karena agar kualitas gambarnya tinggi.
108
Gambar 4.28 Tampilan Background
Tampilan button, teks dan efek-efek lainnya penulis menggunakan aplikasi Adobe Flash CS3, yang setelah jadi File disimpan berformat .swf. kemudian File
tersebut penulis gabungkan dengan macromedia director MX. Untuk File button, menu, teks title dan tampilan setiap halaman penulis
menggunakan adobe photosop CS3. File tersebut penulis buat agar telihat menarik dan disimpan dengan format File .psd. kemudian File tersebut di
animasikan agar terlihat menarik dengan menggunakan adobe flash CS3 dan di simpan dengan File berformat .swf
Gambar 4.29 Tampilan Button
109
File suara penulis peroleh dari koleksi pribadi dan mencari di internet. Semua File suara berformat .mp3.
File teks yang diperoleh berupa informasi yang berkaitan dengan struktur rangka berupa bahasa inggris yang kemudian dirangkum dan ditranslate sehingga
menjadi inti sari untuk disajikan dalam program. Objek 3 dimensi yang penulis desain sendiri menggunakan 3D max 2009.
Berikut ini adalah pembuatan modeling 3 dimensi struktur rangka: hal yang paling mendasar pada proses 3D adalah modeling yang artinya membuat objek 3 dimensi
yang nantinya akan digunakan pada program. 3. Modeling 3D
Beberapa tahapan penting selama pengembangan program ini akan dibahas di bawah ini.
a. Pada pembuatan rangka mula-mula masukan gambar yang ingin di buat—biasanya berupa File jpg yang sudah di siapkan oleh penulis,
drag gambar objek tersebut dan letakan pada plane. Aktifkan see- through pada objek property agar cylinder menjadi transparan agar
mudah di bentuk sesuai gambar pada plane. Kemudian select cylinder dan lakukan convert ka editable poly.
110
Gambar 4.30 Tampilan Kerja Objek Saat Memasukan Objek
Tahap selanjutnya penulis mengatur vertex sehingga menyerupai objek yang sesuai dengan image yang di masukan sebelumnya.
Lakukan seakurat mungkin sehingga benar-benar menyerupai objeknya.
Gambar 4.31 Tampilan Objek Setelah Dibentuk
Penulis membuat model satu per satu dahulu dengan cara yang sama seperti di atas lalu kemudian nanti digabung menjadi satu.
111
Proses modeling memakan waktu yang cukup lama untuk membuat semua modeling 3 dimensi dari struktur rangka tersebut.
Gambar 4.32 Objek 3 Dimensi Struktur Rangka
b. Pemberian texture dan material Proses pemberian material pada rangka ini menetukan karakteristik
sebuah material objek dari segi texture. Texture bisa digunakan untuk membuat berbagai variasi warna, tingkat kehalusan atau
kekasaran sebuah lapisan objek secara detail. Untuk mengakses material, tekan M untuk memunculkan material
editor. Kemudian pilih slot map yang kosong lalu klik kotak abu- abu disamping pilihan difuse. Lalu pilih bitmap, browse dan pilih
material rangka yang digunakan. Kemudian tarik material slot ke arah permukaan layar rangka.
112
Gambar 4.33 Tampilan Material
Penulis memberikan material pada objek dengan material yang telah yang telah penulis buat menggunakan adobe photosop CS3.
c. Proses export 3D Pada proses renderasi penulis merender ke File .W3D Shockwave
3D scene export. Pilih File pada menu bar kemudian export.
113
Gambar 4.34 Tampilan Export Shockwave 3D
Keuntungan dari .W3D adalah kita bisa merotasi objek secara bebas tanpa dibatasi. Jadi lebih bisa lebih jelas ketika menpelajari
struktur rangka.
Gambar 4.35 Tampilan Shockwave 3D Setelah Diexport
114
d. Pembuatan animasi 3D Animasi yang buat seluruhnya dengan menggunakan aplikasi 3D
max 2009. Dimungkinkan untuk menghidupkan posisi, rotasi dan skala dari suatu objek, dan hampir semua pengaturan parameter
yang mempengaruhi bentuk benda dan permukaan. Untuk membuat animasi 3D mula-mula penulis menentukan panjang
durasi animasi per frame pada time configuration. Penulis disini menggunakan 800 frame mengisi end time dengan 800 agar video
yang di render tampak halus ketika di putar.
Gambar 4.36 Time Configuration
Kemudian Key menentukan keadaan sebuah benda pada waktu tertentu. Animasi diciptakan sebagai objek bergerak. Control key
ini terletak di sebalah kiri time control. Kemudian penulis memilih obejek pada frame ke- 0.
115
Gambar 4.37 Auto Key
Klik frame ke-100 kemudian pilih objek dan di rotasi 90 derajat. Lakukan hal yang sama tiap 100 frame seperti gambar berikut:
Gambar 4.38 Pengaturan Frame Pada Objek
e. Proses rendering Rendering adalah proses akhir dari keseluruhan proses permodelan
ataupun animasi komputer. Dalam rendering, semua data yang sudah dimasukan dalam proses modeling, animasi, teksturing
tertentu akan diterjemahkan dalam sebuah bentuk output. Dalam standar sistem NTSC karena hasil video yang dihasilkan lebih
halus, dengan resolusi sebuah render adalah 640 x 480 pixels. Langkah rendering pertama yaitu pilih option render dengan
settingan berikut : tekan F10 pada keyboard dan ubah time output ke active segmen 0 to 800.
116
Gambar 4.39 Render setup
Kemudian scroll ke bawah dan klik Files pada render output lalu letakan File di tempat yang telah disediakan. Ubah save as type
menjadi .AVI. kemudian klik save setelah memberi nama pada File lalu render.
Gambar 4.40 Penyimpanan File
f. Pembuatan rotasi objek 3D
Setelah jadi objek 3D jadi maka membuat rotasi pada macromedia director dengan menggunakan lingo script yang ada pada tombol
navigasi.
117
Gambar 4.41 Tombol Navigasi
Pada tombol panah atas menggunakan script on
mouseenter me
puppetsound 3
, pling
end on
mousewithin me
member rangka
. model
[ 1
]. rotate
1 ,
, updatestage
end Pada tombol panah bawah mengunakan script
on mouseenter
me puppetsound
3 ,
pling end
on mousewithin
me member
rangka .
model [
1 ].
rotate -
1 ,
, updatestage
end Pada tombol panah kiri mengunakan script
on mouseenter
me puppetsound
3 ,
pling end
on mousewithin
me
118
member rangka
. model
[ 1
]. rotate
, , -
1 updatestage
end Pada tombol panah kanan mengunakan script
on mouseenter
me puppetsound
3 ,
pling end
on mousewithin
me member
rangka .
model [
1 ].
rotate ,
, 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
, ,-
10 updatestage
end
Pada tombol zoom out menggunakan script on
mouseenter me
puppetsound 3
, pling
119
end on
mousewithin me
sprite 2
. camera
. translate
, ,
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
120
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 Menampilkan
halaman 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
121
8. Klik “Reset” pada
navigasi 3D Gambar 3D rangka
kembali ke posisi semula
Ok Gambar 3D rangka
kembali ke posisi semula
9. Klik “zoom in”
pada navigasi 3D Gambar 3D rangka
membesar mendekat
Ok Gambar 3D rangka
membesar mendekat
10. Klik “zoom out”
pada navigasi 3D Gambar 3D rangka
mengecil menjauh Ok
Gambar 3D rangka memngecil
menjauh
11. Klik “Materi”
pada menu utama Menampilkan
halaman materi Ok
Lampiran 2 Halaman materi
Gambar 4
12. Klik “gambar
tengkorak” pada menu materi
Menampilkan materi tengkorak
Ok Lampiran 2
Halaman materi tengkorak
Gambar 5
13. Klik “Gambar
Rusuk” pada menu materi
Menampilkan materi rusuk
Ok Lampiran 2
Halaman materi rusuk
Gambar 8
14. Klik “gambar
tulang belakang” pada menu materi
Menampilkan materi tulang belakang
Ok Lampiran 2
Halaman materi tulang belakang
Gambar 11
15. Klik “gambar
ekstemitas atas” pada menu materi
Menampilkan materi ekstremitas atas
Ok Lampiran 2
Halaman materi ekstremitas atas
Gambar 14
122
16. Klik “gambar
ekstemitas bawah” pada
menu materi Menampilkan materi
ekstremitas bawah Ok
Lampiran 2 Halaman materi
ekstremitas bawah Gambar 17
17. Klik “Penjelasan”
pada materi tengkorak
Tampilkan penjelasan tengkorak
Ok Lampiran 2
Halaman penjelasan tengkorak
Gambar 5
18. Klik “gambar”
pada materi tengkorak
Tampilkan gambar- gambar tengkorak
Ok Lampiran 2
Halaman gambar- gambar tengkorak
Gambar 6
19. Klik “Video”
pada materi tengkorak
Tampilkan video tengkorak
Ok Lampiran 2
Halaman video tengkorak
Gambar 7
20. Klik “Penjelasan”
pada materi rusuk Tampilkan
penjelasan rusuk Ok
Lampiran 2 Halaman penjelasan
rusuk Gambar 8
21. Klik “gambar”
pada materi rusuk Tampilkan gambar-
gambar rusuk Ok
Lampiran 2 Halaman gambar-
gambar rusuk Gambar 9
22. Klik “Video”
pada materi rusuk Tampilkan video
rusuk Ok
Lampiran 2 Halaman video
rusuk Gambar 10
123
23. Klik “Penjelasan”
pada materi tulang belakang
Tampilkan penjelasan tulang
belakang Ok
Lampiran 2 Halaman penjelasan
tulang belakang Gambar 11
24. Klik “gambar”
pada materi tulang belakang
Tampilkan gambar- gambar tulang
belakang Ok
Lampiran 2 Halaman gambar-
gambar tulang belakang
Gambar 12
25. Klik “Video”
pada materi tulang belakang
Tampilkan video tulang belakang
Ok Lampiran 2
Halaman video tulang belakang
Gambar 13
26. Klik “Penjelasan”
pada materi ekstremitas atas
Tampilkan penjelasan
ekstremitas atas Ok
Lampiran 2 Halaman penjelasan
ekstremitas atas Gambar 14
27. Klik “gambar”
pada materi ekstremitas atas
Tampilkan gambar- gambar ekstremitas
atas Ok
Lampiran 2 Halaman gambar-
gambar ekstremitas atas
Gambar 15
28. Klik “Video”
pada materi ekstremitas atas
Tampilkan video ekstremitas atas
Ok Lampiran 2
Halaman video ekstremitas atas
Gambar 16
124
29. Klik “Penjelasan”
pada materi ekstremitas
bawah Tampilkan
penjelasan ekstremitas bawah
Ok Lampiran 2
Halaman penjelasan ekstremitas bawah
Gambar 17
30. Klik “gambar”
pada materi ekstremitas
bawah Tampilkan gambar-
gambar ekstremitas bawah
Ok Lampiran 2
Halaman gambar- gambar ekstremitas
bawah Gambar 18
31. Klik “Video”
pada materi ekstremitas
bawah Tampilkan video
ekstremitas bawah Ok
Lampiran 2 Halaman video
ekstremitas bawah Gambar 19
32 Klik “help” pada
menu utama Menampilkan
halaman bantuan Ok
Lampiran 2 Halaman bantuan
Gambar 20
.33 Klik “profil” pada
menu utama Menampilkan
halaman profil Ok
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.
125
4.4 Distribusi
Setelah melakukan pengujian tahap yang terakhir adalah distribution. Tahap ini merupakan tahap penggandaan dan penyebaran aplikasi kepada
radiografer. Penggandaan aplikasi dapat dilakukan dengan menggunakan CD- RW. Visualisasi 3 Dimensi Struktur Rangka Pada Manusia diberikan agar dapat
digunakan sebagai media pembelajaran kepada radiografer. Pada evaluasi dengan membagikan kuesioner kepada 30 pengguna dari
radiografer untuk mendapatkan hasil evaluasi terhadap aplikasi yang dibuat. Untuk lebih rincinya dapat dilihat pada lampiran.
Dari hasil kuesioner yang telah dilakukan, maka dapat disimpulkan: a.
Aplikasi ini menarik dalam segi tampilan dan animasinya. b.
Aplikasi ini mudah digunakan. c.
Informasi yang disajikan oleh visualisasi 3 dimensi ini sudah cukup jelas serta dapat memberikan informasi yang jelas terkait rangka struktur tulang
pada manusia d.
Penggunaan media 3 dimensi dalam aplikasi ini berupa objek struktur tulang manusia sangat membantu para pengguna dalam mengenal bagian-bagian
tulang dalam tubuh manusia.
126
BAB V PENUTUP
Dalam bab terakhir dari penulisan ini, penulis berusaha untuk memberikan kesimpulan serta saran-saran bagi pihak-pihak yang ingin mengembangkan aplikasi ini.
5.1. Kesimpulan
Dari pembahasan yang telah diuraikan sebelumnya, maka penulis dapat menarik kesimpulan, yaitu:
1. Berdasarkan kuisioner aplikasi ini mudah digunakan user friendly, informasi yang diberikan sudah cukup jelas, dan bagus dalam tampilannya
sehingga dapat meningkatkan minat para responden. 2. Keuntungan dari penggunaan teknik 3 dimensi dalam pembuatan proyek ini
adalah dapat menjelaskan secara detail tentang struktur rangka pada manusia.
5.2. Saran
1. Kepada pihak pengguna disarankan untuk menggunakan spesifikasi
komputer yang dianjurkan atau lebih tinggi spesifikasinya untuk mendapatkan kelancaran kinerja dari aplikasi yang dibuat.
2. Dalam proses modeling pada objek 3 dimensi ini diupayakan untuk lebih mendetail lagi,
3. Agar aplikasi ini dikembangkan ke materi-materi lainnya.
Daftar Pustaka
Al-Bahra bin Ladjamuddin. B, 2005. Analisis dan Desain Sistem Informasi, Yogyakarta : Graha Ilmu.
Arafik. 2010. Visualisasi 3 Dimensi Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.
Ballinger, Philip W. 1995. Merrils Atlas of Radiographic Positions and Radiologic Procedures. Missouri :Mosby.
Basuki, Achmad. 2009. Grafik 3 Dimensi, Surabaya: Politeknik Elektronika Negeri Surabaya
Binanto, Iwan. 2010, Multimedia Digital Dasar Teori dan Pengembangannya. Yogyakarta : Penerbit Andi.
Cahyaning Tyas, Ratna. 2010. Aplikasi Pembelajaran dengan Global Illumination Pencahayaan Realistik Menggunakan V-ray Pada Alat Pencernaan Manusia
Berbasis 3D, Jakarta : Universitas Islam Negeri Syarif Hidayatullah.
De Graaff, Van. 2001. Human Anatomy, Sixth Edition. New York : The McGraw- Hill Companies
Djalle, Zaharuddin. 2008. The Making Of 3D Animation Movie. Bandung : Penerbit Informatika.
Feneis, Heinz, dkk. 2000. Pocket Atlas of Human Anatomy. New York :Thieme Stuttgart.
Fitria, Yuni. 2010.
Perancangan dan Implementasi Computer Assisted Instruction Mata Pelajaran Biologi Virus Berbasis Multimedia 3 Dimensi, Jakarta : Universitas
Islam Negeri Syarif Hidayatullah