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