BAB IV IMPLEMENTASI DAN UJI COBA 4.1 IMPLEMENTASI Pada bab ini akan membahas tentang implementasi dari konsep yang dibuat, serta melakukan demo hasil aplikasi yang dibuat apakah sudah sesuai dengan yang diharapkan. Sebelum di demo kan, terlebih dahulu di paparkan spesifikasi sistem perangkat lunak yang dibutuhkan untuk mendukung program aplikasi yang akan di bangun. 4.1.1 Kebutuhan System Pada bagian spesifikasi kebutuhan sistem ini, dibahas tentang kebutuhan sistem perangkat lunak yang mendukung dalam pembuatan aplikasi. - Perangkat lunak (software) Perangkat lunak (software) yang digunakan untuk mendukung dalam pembuatan aplikasi penyebar informasi Pura Besakih berbasis animasi. 1. Sistem Operasi Sistem operasi yang digunakan adalah Windows 7 Home Edition 64bit. Sistem operasi ini mendukung 3D yang akan digunakan dalam membuat aplikasi penyebar informasi Pura Besakih berbasis animasi. 73
74 2. Adobe Flash CS3 Software flash dikenal sebagai software yang mendukung animasi 2D, digunakan untuk membuat sebuah aplikasi 2D seperti presentasi, animasi bergerak, animasi 2D, media 2D interaktif, membuat objek game dan masih banyak lagi kreasi 2D lainnya. 3. Blender 2.63 Software blender dikenal sebagai software open source yang mendukung animasi 3D, digunakan untuk modelling, texuring, lighting, animasi dan video post processing 3 dimensi. Dengan Blender 3D dapat membuat objek 3D animasi, media 3D interaktif, model dan bentuk 3D profesional, membuat objek game dan masih banyak lagi kreasi 3D lainnya. 4.1.2 Segmen Pengguna ini dibangun untuk kalangan wisatawan. Dimana aplikasi ini disajikan sebagai sarana penyebar informasi yang akan memberikan gambaran tentang objek wisata Pura Besakih kepada para pengguna. 4.2 TAHAP PEMBUATAN PURA Tangga Pura Besakih dibuat berdasarkan bentuk kubus pada aplikasi blender, bagian depan, tengah dan belakang pada pura besakih dibuat menggunakan ekstrud hasil dari tangga pura, pembuatan gerbang pada pura juga menggunakan ekstrud dari kubus yang di modifikasi dan digabungkan sehigga membentuk sebuah gerbang pada pura. Pembuatan patung pura dibuat menggunakan kubus yang di modifikasi dan diberi tekstur agar Nampak menyerupai aslinya, bagian pura persembahan dimodifikasi secara total dari bentuk kubus, dibutuhkan
teksturing pada tangga pura, bangunan pura, rumput, jalan, pohon, langit dan patung agar terlihat menyerupai aslinya. 75 Gambar 4.1 Edit Mode Kubus 4.3 ANIMASI PURA Untuk membuat animasi pada Pura, pertama memilih menu Animation pada menu bar. Gambar 4.2 Menu Animation
76 Kemudian akan muncul tampilan seperti berikut. Gambar 4.3 Menu Animation Mengklik menu yang berwarna merah untuk mulai merekam alur jalan pergerakan animasi. Gambar 4.4 Record Membuat pergerakan kamera dengan memilih objek kamera lalu mengklik pada frame dan gerakan kamera berputar mengitari lokasi Pura, maka hasilnya akan ada garis berwarna kuning yang menandakan kemana arah pergerakan dan berada pada frame berapa saja. Gambar 4.5 Timeline Control Animation
77 4.4 Rendering Animation Tahap terakhir dalam pembutan animasi Pura ini yaitu tahap rendering, memilih menu render dan setting ukuran resolusi video yang akan dibuat. Gambar 4.6 Menu Render Menentukan lokasi output tempat video akan di simpan, lalu memilih format video H264 Gambar 4.7 Format Video
78 Terakhir mengklik menu Animation dan proses rendering akan segera berjalan, tunggu sampai proses rendering selesai. Gambar 4.8 Animation 4.5 Pembuatan Dengan Adobe Flash CS3 Membuka Program Flash yang ada di komputer dengan Double klik shortcut Program Flash pada Desktop atau bisa menggunakan menu Start All Program Adobe Flash Cs3. Gambar 4.9 Gambar Awal Flash Lalu memilih menu flash file (ActionScript 2.0) maka akan muncul tampilan seperti gambar. Gambar 4.10 Gambar Area Kerja
79 Mengubah ukuran Stage pada Properties menjadi 800 x 600 dan FPS=12, dan membuat 3 buah layer Background, membuat framenya sampai ke frame 60 dengan cara mengklik kanan pada frame 60 lalu Insert Frame, atau dengan menekan shortcut keyboard F5, setelah selesai, kuncilah framenya agar objek tidak berubah, atau bergeser. Gambar 4.11 Gambar Frame Gambar 4.12 Gambar Frame Slide Sekarang sudah ada layout berupa background. Langkah selanjutnya memberi title pada background 2 yang terletak pada bagian atas dengan mengisi berupa teks, sebagai berikut : Gambar 4.13 Gambar Judul Header
80 Memindahkan semua garis ke bagian kiri stage dan memasukan gambar Pura ke dalam stage dengan cara memilih menu File Import Import To Stage. Gambar 4.14 Gambar Background Login Sekarang membuat layer baru dengan nama dan membuat tombol navigasinya dengan cara menggambar bentuk tombolnya mengklik kanan convert to symbol memilih button memberi nama selesai. Gambar 4.15 Gambar Layer Gambar 4.16 Gambar Button Cara menganimasikan tombol adalah, memilih tombol yang akan dianimasikan, lalu mengklik kanan Edit in Place, atau tombol itu diklik 2x. Maka masuk ke timeline yang punya Frame : Up, Over, Down, Hit. Up : kondisi netral Over : saat mouse diatasnya Down : saat di klik Hit : area tombol.
81 Gambar 4.17 Gambar Animasi Menggunakan Text Tool dan menulis Masuk pada Frame Up, lalu insert keyframe pada frame Over dan Down, lalu pada Frame Over memperbesar ukuran tulisan dan mengecilkan lagi pada Frame Down. Gambar 4.18 Gambar Masuk Setelah selesai mengedit tombol, maka keluarlah dari Edit In Place dengan cara mengklik 2x di luar area tombol, duplicate Masuk dan ganti namanya menjadi Keluar. Gambar 4.19 Gambar Keluar Sekarang pindah ke frame 2 pada layer dan menekan F6 untuk membuat keyframe baru kemudian membuat tombol-tombol seperti berikut. Gambar 4.20 Gambar Menu
82 Membuat keyframe pada frame 3 layer dan tambahkan kotak untuk tampilan isi konten berwarna biru langin dengan alpha 50% agar menjadi transparan. Gambar 4.21 Gambar Layar Konten Membuat layer baru dengan nama konten isi, lalu isikan keyframe pada frame 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56. Pada keyframe 1 menuliskan isi dari konten home sedangkan pada frame 4, 8, 12 dan seterusnya isikan dengan isi konten masing-masing tombol. Gambar 4.22 Gambar Layer Isi Konten Mengisi konten biaya pada frame 4 dengan isi konten dari biaya. Gambar 4.23 Gambar Halaman Biaya
83 Apabila text yang akan dimasukan terlalu panjang, gunakan Scroll Bar untuk membuat text agar dapat turun ke bawah, pastikan jenis teksnya adalah Dynamic Text dan Multiline, lalu munculkan komponen dengan memilih menu Windows Component dan pilih UI Scroll Bar, tarik dan drag ke bagian Text. Setelah itu melakukan hal yang sama sehingga semua frame terisi oleh konten pada masing-masing tombol. Selanjutnya membuat layer baru dengan nama Action yang akan kita isi dengan ActionScript. Lalu menambahkan Blank keyframe pada frame 1, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, setelah itu menekan tombol f9 dan memasukan script action Stop() tanpa tanda kutip pada masing-masing frame. Gambar 4.24 Gambar Panel Action Gambar 4.25 Gambar Insert Blank Keyframe Langkah terkhir yang harus dilakukan adalah memberikan ActionScript pada masing-masing tombol dengan cara mengklik pada tombol yang akan dipilih, misalkan tombol Mulai, mengklik tombol Mulai lalu tekan tombol F9 dan memasukan script : on (release) { } gotoandstop(2);
84 Gambar 4.26 Gambar ActionScript Mulai Biaya, memilih tombol Biaya F9 memasukan Script. Gambar 4.27 Gambar ActionScript Biaya Melakukan hal yang sama pada setiap tombol yang ada, dan mengganti angka yang ada didalam tanda kurung sesuai dengan frame tempat tombol berada. Setelah semua script berjalan dengan baik, sekarang tiba waktunya untuk memasukan album foto yang sudah di jadikan slide show video dan animasi 3 dimensi Pura Besakih yang juga sudah berbentuk Video untuk penjelasan bisa di lihat pada lampiran. 4.5.1 Membuat File Exe Pada Flash Memilih File Publish Setting lalu ceklish pada kolom Flash, HTML, dan Windows Projector, menentukan output tempat file akan diletakan kemudian memilih tombol Publish.
85 Gambar 4.28 Gambar Publish Setting 4.6 Pada tahap pengujian dilakukan untuk mengetahui apakah aplikasi berjalan sesuai dengan konsep yang telah dibuat. Penulis melakukan pengujian dengan menggunakan metode black box untuk mengetahui hasil testing dari aplikasi yang dibuat, apakah dapat berjalan dengan baik atau tidak. 4.6.1 Metode Black Box Testing Penulis melakukan pengujian dengan menggunakan metode black box untuk menentukan langkah-langkah dalam pengujian dan memeriksa apakah ada bagian-
86 bagian dari aplikasi yang belum di implementasikan, berikut ini beberapa pengujian yang dilakukan dengan menggunakan metode black box : A. Terhadap Jendela Pembuka Tabel 4.1 Skenario Jendela Pembuka No Bagian Dari Status 1 Jendela Pembuka Mulai Scenario Mulai Hasil Yang Diharapkan B. Terhadap Tabel 4.2 Skenario No Bagian Dari Status 1 Biaya 2 Denah 3 Akses Scenario Biaya Denah Akses Hasil Yang Diharapkan Informasi Biaya Informasi Denah Informasi Akses
87 No 4 5 6 7 8 9 10 11 12 13 Bagian Dari Tips Ritual Pakaian Sejarah Jenis Pura Penginapan Jam Buka No Penting Gallery Model 3D Status Scenario Tips Ritual Pakaian Sejarah Jenis Pura Penginapan Jam Buka No Penting Gallery Model 3D Hasil Yang Diharapkan Informasi Tips Informasi Ritual Informasi Pakaian Informasi Sejarah Informasi Jenis Pura Informasi Penginapan Informasi Jam Buka Informasi No Penting Video Gallery Video Model 3D
88 C. Terhadap Masing-Masing Jendela Tabel 4.3 Skenario Terhadap Masing-Masing Jendela No Bagian Dari Yang Scenario Status Diuji 1 Jendela Biaya 2 Jendela Denah 3 Jendela Akses 4 Jendela Tips 5 Jendela Ritual 6 Jendela Pakaian 7 Jendela Sejarah Hasil Yang Diharapkan No Bagian Dari Status Scenario Hasil Yang Diharapkan
89 8 Jendela Jenis Pura 9 Jendela Penginapan 10 Jendela Jam Buka 11 Jendela No Penting 12 Jendela Gallery 13 Jendela Model 3D 4.6.2 Hasil Berikut ini adalah hasil dari pengujian yang dilakukan dengan menggunakan metode black box : A. Hasil Jendela Pembuka Tabel 4.4 Hasil Jendela Pembuka No Bagian Dari Status Scenario Hasil
90 1 Jendela Pembuka Mulai Mulai B. Hasil Tabel 4.5 Hasil No Bagian Dari Status 1 Biaya 2 Denah 3 Akses 4 Tips Scenario Biaya Denah Akses Tips Hasil No 5 6 Bagian Dari Ritual Pakaian Status Scenario Ritual Pakaian Hasil
91 7 8 9 10 11 12 13 Sejarah Jenis Pura Penginapan Jam Buka No Penting Gallery Model 3D Sejarah Jenis Pura Penginapan Jam Buka No Penting Gallery Model 3D C. Hasil Terhadap Masing-Masing Jendela Tabel 4.6 Hasil Terhadap Masing-Masing Jendela No Bagian Dari Status Scenario 1 Jendela Biaya 2 Jendela Denah Hasil
92 3 Jendela Akses 4 Jendela Tips 5 Jendela Ritual 6 Jendela Pakaian 7 Jendela Sejarah 8 Jendela Jenis Pura 9 Jendela Penginapan No 10 Jendela Jam Buka 11 Jendela No Penting 12 Jendela Gallery Bagian Dari Status Scenario Hasil
93 13 Jendela Model 3D