Flowchart Perancangan Antarmuka Aplikasi

3.3 Flowchart

Flowchart atau diagram alir adalah gambaran yang menampilkan struktur, urutan kegiatan dari suatu program dari awal sampai akhir dan isi halaman per halaman. Dengan adanya flowchart akan sangat membantu untuk memvisualisasikan isi dari setiap halaman aplikasi tersebut. Berikut Gambar 3.5 dan Gambar 3.6 sebagai flowchart dari sistem secara menyeluruh dan flowchart dari sistem halaman AR. Gambar 3.5 Flowchart Sistem Gambar 3.6 Flowchart Sistem Halaman AR

3.4 Perancangan Antarmuka Aplikasi

Tampilan antarmuka perlu dirancang untuk menggambarkan sistem yang akan dibuat dan dapat mempermudah proses pembangunan sistem. Rancangan tampilan sistem dapat dilihat dan akan dijelaskan sebagai berikut. 3.4.1 Rancangan Halaman Main Menu Main Menu pada aplikasi Augmented Clips bertujuan untuk memulai aplikasi dan sekaligus pengenalan awal dari sistem yang dibuat kepada pengguna dalam menggunakan aplikasi. Secara umum Main Page terbagi menjadi tiga bagian yaitu menu Scan Cover untuk melakukan scanning pada marker, menu about untuk melihat profile dari aplikasi yang telah dibuat , menu Language untuk mengganti bahasa dalam penggunaan sistem yang terdiri dari Bahasa Indonesia dan Bahasa Inggris, serta menu Exit untuk keluar dari aplikasi. Gambar rancangan halaman Main Menu terdapat pada Gambar 3.7, serta Tabel 3. untuk keterangan bagian-bagian rancangan dari halaman Main Menu. Gambar 3.7 Rancangan Halaman Main Menu Tabel 3. Keterangan Bagian-Bagian Rancangan Halaman landingPage No Jenis Objek Keterangan 1 Tombol Scan Cover Tombol utama untuk mulai scanning pada cover DVD. 2 Tombol About Tombol popup untuk menampilkan profile tentang aplikasi. 3 Tombol Exit Tombol keluar dari aplikasi. 4 Animasi Animasi DVD yang bergerak berputar. 5 Tombol Language Tombol popup untuk mengganti bahasa. 3.4.2 Rancangan PopUp About Pada Tombol About PopUp pada tombol About dapat dilihat pada Gambar 3.8. tampilan popup memiliki tujuan untuk untuk menampilkan profile tentang aplikasi. Tabel 4. memberikan keterangan bagian bagian dari rancangan popup About. Gambar 3.8 Rancangan PopUp About Tabel 4. Keterangan Bagian-Bagian Rancangan PopUp About No Jenis Objek Keterangan 1 Tombol Close Tombol untuk menutup popup. 2 Text Keterang mengenai profile aplikasi. 3.4.3 Rancangan PopUp Pada Tombol Language Rancangan PopUp pada Gambar 3.9 menampilkan dua buah tombol yaitu tombol English untuk mengubah penggunaan aplikasi ke dalam Bahasa Inggris dan tombol Indonesia untuk mengubah penggunaan aplikasi ke dalam Bahasa Indonesia. Tabel 5. memberikan keterangan bagian bagian dari rancangan popup About. Gambar 3.9 Rancangan PopUp Tombol Laguage Tabel 5. Keterangan Bagian-Bagian Rancangan PopUp Tombol Laguage No Jenis Objek Keterangan 1 Tombol Language Tombol untuk menampilkan PopUp tombol Laguage 2 Tombol English Tombol untuk mengubah penggunaan aplikasi ke dalam Bahasa Inggris. 3 Tombol Indonesia Tombol untuk mengubah penggunaan aplikasi ke dalam Bahasa Indonesia. 3.4.4 Rancangan Halaman Augmented Reality Rancangan halaman Augmented Reality seperti yang terlihat pada Gambar 3.10 memiliki 4 buah tombol yaitu tombol back untuk kembali ke halaman Main Menu, tombol synopsis untuk melihat sinopsis atau rangkuman cerita dari trailer film yang sedang ditampilkan, tombol play yang berfungsi untuk memainkan trailer film, tombol pause untuk menghentikan trailer film untuk sementara, tombol stop untuk menghentikan trailer film dan memulainya dari awal. Selain itu terdapat dua komponen lainnya yaitu bagian help yang menampilkan tata cara penggunaan aplikasi, komponen tampilan Camera View yang berfungsi mendeteksi marker untuk menampilkan objek trailer film. Tabel 6. memberikan keterangan bagian – bagian dari rancangan halaman Augmented Reality. Gambar 3.10 Rancangan Halaman Augmented Reality Tabel 6. Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality No Jenis Objek Keterangan 1 Image Help Gambar yang berisi keterangan tentang cara penggunaan aplikasi 2 Camera View berfungsi mendeteksi marker untuk menampilkan objek trailer film 3 Tombol Synopsis Tombol untuk melihat sinopsis atau rangkuman cerita dari trailer film yang sedang ditampilkan 4 Tombol Pause Tombol untuk menghentikan trailer film untuk sementara 5 Tombol Play Tombol untuk memainkan trailer film 6 Tombol Stop Tombol untuk menghentikan trailer film dan memulainya dari awal 7 Tombol Back Tombol untuk kembali ke halaman Main Menu 8 Zoom inout Slider Slider untuk memperbesar dan memperkecil objek 3.4.5 Rancangan PopUp Pada Tombol Synopsis Rancangan PopUp pada Gambar 3.11 menampilkan PopUp Synopsis yang berisi informasi atau rangkuman cerita dari trailer film yang sedang ditampilkan. Tabel 7. akan memberikan keterangan bagian bagian dari rancangan popup Synopsis. Gambar 3.11 Rancangan PopUp Tombol Synopsis Tabel 7. Keterangan Bagian-Bagian Rancangan PopUp Synopsis No Jenis Objek Keterangan 1 Tombol Synopsis Tombol untuk membuka dan menutup PopUp. 2 Text Keterangan mengenai informasi dan rangkuman cerita dari trailer film yang sedang ditampilkan.

3.5 Perancangan Pembuatan Objek 3D pada Blender