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 Aplikasi 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
75
teksturing pada tangga pura, bangunan pura, rumput, jalan, pohon, langit dan patung agar terlihat menyerupai aslinya.
Gambar 4.1 Tampilan 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 Tampilan Menu Animation
Mengklik menu yang berwarna merah untuk mulai merekam alur jalan pergerakan animasi.
Gambar 4.4 Tombol 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 Tampilan Format Video
78
Terakhir mengklik menu Animation dan proses rendering akan segera berjalan, tunggu sampai proses rendering selesai.
Gambar 4.8 Tombol Animation
4.5 Pembuatan Aplikasi 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 Tampilan 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 Tombol dan membuat tombol navigasinya dengan cara menggambar bentuk tombolnya mengklik kanan convert to symbol memilih button memberi nama selesai.
Gambar 4.15 Gambar Layer Tombol
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 Tombol
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 Tombol Masuk
Setelah selesai mengedit tombol, maka keluarlah dari Edit In Place dengan cara mengklik 2x di luar area tombol, duplicate Tombol Masuk dan ganti namanya menjadi Keluar.
Gambar 4.19 Gambar Tombol Keluar
Sekarang pindah ke frame 2 pada layer Tombol dan menekan F6 untuk membuat keyframe baru kemudian membuat tombol-tombol seperti berikut.
Gambar 4.20 Gambar Tombol Menu
82
Membuat keyframe pada frame 3 layer Tombol 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
Tombol 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 Pengujian 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. Pengujian Terhadap Jendela Pembuka Tabel 4.1 Skenario Pengujian Jendela Pembuka
No 1
Antar Muka Yang Diuji Jendela Pembuka
Bagian Dari Antar Muka Yang Diuji Tombol Mulai
Status
Scenario
Hasil Yang
Aplikasi
Pengujian
Diharapkan
Aplikasi
User Mengklik
Muncul
Sudah
Tombol Mulai
Tampilan
Berjalan
Jendela Menu Utama
B. Pengujian Terhadap Jendela Menu Utama Tabel 4.2 Skenario Pengujian Jendela Menu Utama
No 1
Antar Muka Yang Diuji Jendela Menu
Bagian Dari Antar Muka Yang Diuji Tombol Biaya
Utama 2
3
Status
Scenario
Hasil Yang
Aplikasi
Pengujian
Diharapkan
Aplikasi
User Mengklik
Muncul
Sudah
Tombol Biaya
Informasi
Jendela Menu
Tombol
Berjalan Aplikasi
User Mengklik
Biaya Muncul
Utama
Denah
Sudah
Tombol Denah
Informasi
Jendela Menu
Tombol Akses
Berjalan Aplikasi
User Mengklik
Denah Muncul
Sudah
Tombol Akses
Informasi
Utama
Berjalan
Akses
87
No
4
5
6
7
8
9
10
11
12
13
Antar Muka Yang Diuji Jendela Menu Utama Jendela Menu Utama
Bagian Dari Antar Muka Yang Diuji
Status
Scenario
Hasil Yang
Aplikasi
Pengujian
Diharapkan
User Mengklik
Muncul
Tombol Tips
Informasi Tips
Aplikasi Tombol Tips
Sudah Berjalan Aplikasi
Tombol Ritual
Jendela Menu
Tombol
Utama
Pakaian
Jendela Menu
Tombol
Utama
Sejarah
Jendela Menu
Tombol Jenis
Utama
Pura
Jendela Menu
Tombol
Utama
Penginapan
Jendela Menu
Tombol Jam
Utama
Buka
Jendela Menu
Tombol No
Utama
Penting
Jendela Menu
Tombol
Utama
Gallery
Jendela Menu
Tombol
Utama
Model 3D
Sudah
User Mengklik Tombol Ritual
Muncul Informasi
Berjalan Aplikasi
User Mengklik
Ritual Muncul
Sudah
Tombol
Informasi
Berjalan Aplikasi
Pakaian User Mengklik
Pakaian Muncul
Sudah
Tombol
Informasi
Berjalan Aplikasi
Sejarah User Mengklik
Sejarah Muncul
Sudah
Tombol Jenis
Informasi Jenis
Berjalan Aplikasi
Pura User Mengklik
Pura Muncul
Sudah
Tombol
Informasi
Berjalan Aplikasi
Penginapan User Mengklik
Penginapan Muncul
Sudah
Tombol Jam
Informasi Jam
Berjalan Aplikasi
Buka User Mengklik
Buka Muncul
Sudah
Tombol No
Informasi No
Berjalan Aplikasi
Penting User Mengklik
Penting
Sudah
Tombol
Berjalan Aplikasi
Gallery User Mengklik
Sudah
Tombol Model
Berjalan
3D
Muncul Video Gallery Muncul Video Model 3D
88
C. Pengujian Terhadap Masing-Masing Jendela Tabel 4.3 Skenario Pengujian Terhadap Masing-Masing Jendela
No 1
2
3
4
5
6
7
Antar Muka Yang Diuji Jendela Biaya
Jendela Denah
Jendela Akses
Jendela Tips
Jendela Ritual
Jendela Pakaian
Jendela Sejarah
Bagian Dari
Scenario
Hasil Yang
Pengujian
Diharapkan
Aplikasi Sudah
User Mengklik
Muncul
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu
Antar Muka
Status Aplikasi
Yang Diuji Tombol Kembali
Tombol
Aplikasi Sudah
User Mengklik
Utama Muncul
Kembali
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu
Tombol
Aplikasi Sudah
User Mengklik
Utama Muncul
Kembali
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu
Tombol
Aplikasi Sudah
User Mengklik
Utama Muncul
Kembali
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu
Tombol
Aplikasi Sudah
User Mengklik
Utama Muncul
Kembali
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu
Tombol
Aplikasi Sudah
User Mengklik
Utama Muncul
Kembali
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu
Tombol
Aplikasi Sudah
User Mengklik
Utama Muncul
Kembali
Berjalan
Tombol
Tampilan
Kembali
Jendela Menu Utama
No
Antar Muka
Bagian Dari
Status
Scenario
Hasil Yang
Yang Diuji
Antar Muka
Aplikasi
Pengujian
Diharapkan
89
8
Jendela Jenis Pura
9
10
13
Aplikasi
User Mengklik
Muncul
Kembali
Sudah
Tombol
Tampilan
Berjalan
Kembali
Jendela Menu
Jendela
Tombol
Aplikasi
User Mengklik
Utama Muncul
Penginapan
Kembali
Sudah
Tombol
Tampilan
Berjalan
Kembali
Jendela Menu
Tombol
Aplikasi
User Mengklik
Utama Muncul
Kembali
Sudah
Tombol
Tampilan
Berjalan
Kembali
Jendela Menu
Jendela Jam Buka
11
12
Yang Diuji Tombol
Jendela No
Tombol
Aplikasi
User Mengklik
Utama Muncul
Penting
Kembali
Sudah
Tombol
Tampilan
Berjalan
Kembali
Jendela Menu
Jendela Gallery
Jendela Model 3D
Tombol
Aplikasi
User Mengklik
Utama Muncul
Kembali
Sudah
Tombol
Tampilan
Berjalan
Kembali
Jendela Menu
Tombol
Aplikasi
User Mengklik
Utama Muncul
Kembali
Sudah
Tombol
Tampilan
Berjalan
Kembali
Jendela Menu Utama
4.6.2 Hasil Pengujian Berikut ini adalah hasil dari pengujian yang dilakukan dengan menggunakan metode black box : A. Hasil Pengujian Jendela Pembuka Tabel 4.4 Hasil Pengujian Jendela Pembuka
No
Antar Muka
Bagian Dari
Status
Scenario
Hasil
90
Yang Diuji 1
Jendela Pembuka
Antar Muka Yang Diuji Tombol Mulai
Aplikasi
Pengujian
Pengujian
Aplikasi
User Mengklik
Sesuai
Sudah
Tombol Mulai
Berjalan B. Hasil Pengujian Jendela Menu Utama Tabel 4.5 Hasil Pengujian Jendela Menu Utama
No 1
2
3
4
Antar Muka
Bagian Dari
Status
Scenario
Hasil
Aplikasi
Pengujian
Pengujian
Aplikasi
User Mengklik
Sesuai
Utama
Sudah
Tombol Biaya
Jendela Menu
Tombol
Berjalan Aplikasi
User Mengklik
Utama
Denah
Sudah
Tombol Denah
Tombol Akses
Berjalan Aplikasi
User Mengklik
Utama
Sudah
Tombol Akses
Jendela Menu
Berjalan Aplikasi
User Mengklik
Sudah
Tombol Tips
Yang Diuji Jendela Menu
Jendela Menu
Antar Muka Yang Diuji Tombol Biaya
Tombol Tips
Utama
Sesuai
Sesuai
Sesuai
Berjalan
No
Antar Muka Yang Diuji
5
Jendela Menu
Bagian Dari Antar Muka Yang Diuji Tombol Ritual
Scenario
Hasil
Aplikasi
Pengujian
Pengujian
Aplikasi Sudah
Utama 6
Status
Jendela Menu
Tombol
Utama
Pakaian
User Mengklik
Sesuai
Tombol Ritual
Berjalan Aplikasi
User Mengklik
Sudah
Tombol
Berjalan
Pakaian
Sesuai
91
7 8
9
10
11
12
13
Jendela Menu
Tombol
Utama
Sejarah
Jendela Menu
Tombol Jenis
Utama
Pura
Jendela Menu
Tombol
Utama
Penginapan
Jendela Menu
Tombol Jam
Utama
Buka
Jendela Menu
Tombol No
Utama
Penting
Jendela Menu
Tombol
Utama
Gallery
Jendela Menu
Tombol
Utama
Model 3D
Aplikasi
User Mengklik
Sudah
Tombol
Sesuai
Berjalan Aplikasi
Sejarah User Mengklik
Sesuai
Sudah
Tombol Jenis
Berjalan Aplikasi
Pura User Mengklik
Sudah
Tombol
Berjalan Aplikasi
Penginapan User Mengklik
Sudah
Tombol Jam
Berjalan Aplikasi
Buka User Mengklik
Sudah
Tombol No
Berjalan Aplikasi
Penting User Mengklik
Sudah
Tombol
Berjalan Aplikasi
Gallery User Mengklik
Sudah
Tombol Model
Berjalan
3D
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
C. Hasil Pengujian Terhadap Masing-Masing Jendela Tabel 4.6 Hasil Pengujian Terhadap Masing-Masing Jendela
No 1
2
Antar Muka Yang Diuji Jendela Biaya
Jendela Denah
Bagian Dari
Status
Scenario
Hasil
Aplikasi
Pengujian
Pengujian
Aplikasi
User Mengklik
Sesuai
Kembali
Sudah
Tombol
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Kembali
Sudah
Tombol
Berjalan
Kembali
Antar Muka Yang Diuji Tombol
Sesuai
92
3
4
5
6
7
8
9
No
10
11
12
Jendela Akses
Tombol
Aplikasi
User Mengklik
Kembali
Sudah
Tombol
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Kembali
Sudah
Tombol
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Kembali
Sudah
Tombol
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Kembali
Sudah
Tombol
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Kembali
Sudah
Tombol
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Kembali
Sudah
Tombol
Jendela
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Penginapan
Kembali
Sudah
Tombol
Berjalan
Kembali
Status
Scenario
Hasil
Aplikasi
Pengujian
Pengujian
Aplikasi
User Mengklik
Sudah
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Sudah
Tombol
Berjalan Aplikasi
Kembali User Mengklik
Sudah
Tombol
Berjalan
Kembali
Jendela Tips
Jendela Ritual
Jendela Pakaian
Jendela Sejarah
Jendela Jenis Pura
Antar Muka Yang Diuji
Jendela Jam Buka
Bagian Dari Antar Muka Yang Diuji Tombol Kembali
Jendela No
Tombol
Penting
Kembali
Jendela Gallery
Tombol Kembali
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
Sesuai
93
13
Jendela Model 3D
Tombol Kembali
Aplikasi
User Mengklik
Sudah
Tombol
Berjalan
Kembali
Sesuai
