BAB IV. IMPLEMENTASI SISTEM
A. Implementasi Antarmuka dan Dialog
1. Halaman Pembuka ( Intro )
Halaman Intro merupakan tampilan halaman paling awal setelah menjalankan aplikasi ini. Fasilitas-fasilitas yang disediakan pada halaman
Intro ini antara lain : melihat profil pembuat aplikasi, link masuk untuk
menuju ke halaman Utama, link untuk menampilkan halaman Bantuan, menghidupkan atau mematikan suara, dan link untuk keluar dari aplikasi. Berikut ini adalah tampilan antarmuka dan dialog dari halaman Intro.
a. Halaman Preloader. Halaman ini merupakan halaman yang pertama kali ditampilkan setelah masuk halaman Intro. Halaman ini berfungsi untuk loading aplikasi (lihat Gambar 4.1).
Gambar 4.1 Tampilan Halaman Preloader
b. Halaman Intro Bagian Awal. Halaman ini tampil setelah halaman
Preloader mencapai angka loading aplikasi 100%. Halaman ini
berfungsi sebagai halaman pembuka dari aplikasi, yang menampilkan informasi sekilas tentang aplikasi yang akan digunakan, dalam bentuk gambar, teks, dan animasi sederhana (lihat Gambar 4.2). Pada halaman ini terdapat tombol untuk melihat profil Pembuat aplikasi, tombol untuk masuk ke halaman Utama, tombol pengaturan suara, tombol Bantuan, dan tombol untuk keluar dari aplikasi.
Gambar 4.2 Tampilan Halaman Intro bagian Awal
c. Tombol Profil Pembuat. Tombol ini berfungsi untuk menampilkan profil singkat dari Pembuat aplikasi. Informasi yang disediakan antara lain : foto dan nama Pembuat, alamat e-mail, dan nomor kontak. Informasi tersebut (lihat Gambar 4.3b) akan tampil jika Pengguna mengarahkan cursor mouse pada tombol Profil (lihat Gambar 4.3a). Dan jika cursor mouse diarahkan diluar jendela informasi Profil tersebut, maka jendela informasi tersebut akan kembali ke posisi tombol semula.
(a) (b)
Gambar 4.3 Tampilan Tombol Profil
d. Tombol Masuk. Tombol ini berfungsi sebagai link untuk menuju ke halaman selanjutnya yaitu halaman Utama (lihat Gambar 4.4).
Gambar 4.4 Tampilan Tombol Masuk
e. Tombol Suara. Tombol ini berfungsi untuk pengaturan suara musik latar belakang pada aplikasi, yaitu untuk menghidupkan atau mematikan suara musik latar belakang. Tapi fungsi tersebut tidak diterapkan pada tombol, hanya diterapkan pada suara musik latar belakang. Sehingga walaupun musik dimatikan, suara tombol tetap terdengar. Posisi tombol pada Gambar 4.5a berarti musik dalam keadaan sedang dimainkan. Jika tombol ditekan pada posisi tersebut, maka musik akan mati, dan menampilkan tombol seperti pada Gambar 4.5b, yang berarti musik dimatikan sementara.
(a) (b)
Gambar 4.5 Tampilan Tombol Suara (a) Saat suara berbunyi; (b) saat suara tidak berbunyi.
f. Tombol Bantuan. Tombol ini berfungsi untuk menampilkan jendela Bantuan panduan penggunaan aplikasi (lihat Gambar 4.6).
g. Tombol Keluar. Tombol ini berfungsi untuk keluar dari aplikasi atau menutup aplikasi (lihat Gambar 4.7). Tombol ini terletak di pojok kanan atas dari halaman Intro.
Gambar 4.7 Tampilan Tombol Keluar 2. Halaman Utama
Halaman ini merupakan halaman utama dari aplikasi Peta Digital Wisata Kuliner Jogja. Halaman ini hanya bisa ditampilkan dari tombol Masuk yang berada di halaman Intro. Fungsi dari halaman ini adalah menampilkan peta digital beserta dengan menu dan navigasinya. Fasilitas-fasilitas yang disediakan pada halaman Utama antara lain : menampilkan objek wisata kuliner dan beberapa fasilitas umum pada peta, menampilkan informasi objek wisata kuliner yang dipilih melalui tombol, menampilkan katalog objek wisata kuliner, menampilkan legenda peta, pengaturan navigasi peta, menampilkan jalur trayek bus TransJogja, link untuk menampilkan halaman Bantuan, link untuk menampilkan halaman Intro, dan link untuk keluar dari aplikasi.
a. Halaman Utama Bagian Awal. Halaman ini tampil setelah tombol Masuk di halaman Intro ditekan. Halaman ini berfungsi untuk menampilkan peta digital beserta dengan menu dan navigasinya. Pada halaman ini terdapat peta digital beserta dengan informasi dan tombol-tombol didalamnya, informasi objek wisata kuliner, menu Katalog Kuliner, Legenda Peta, menu Navigasi peta, menu jalur trayek bus TransJogja, tombol Geser tampilan peta, arah angin, waktu, tombol link
untuk kembali ke halaman Intro, tombol pengaturan suara, tombol link
untuk menampilkan halaman Bantuan, dan tombol untuk keluar dari aplikasi (lihat Gambar 4.8).
Gambar 4.8 Tampilan Halaman Utama bagian Awal
b. Menu Katalog Kuliner. Menu ini menampilkan nama objek wisata kuliner di Jogja dalam bentuk tombol-tombol dan disusun dalam bentuk menu. Jika tombol nama objek wisata kuliner tersebut ditekan, maka
objek yang akan dicari akan ditampilkan di jendela peta. Pada menu ini juga terdapat tombol navigasi halaman menu. Setiap halaman menu yang sedang aktif ditandai (lihat Gambar 4.9).
Gambar 4.9 Tampilan Menu Katalog Kuliner
c. Legenda Peta. Bagian ini berfungsi untuk menampilkan penjelasan tentang objek-objek yang ada dalam peta digital (lihat Gambar 4.10).
d. Peta Digital. Objek-objek yang menyusun tampilan peta digital (lihat Gambar 4.11) yang digunakan pada aplikasi ini antara lain tombol objek wisata kuliner, tombol fasilitas umum, jalur dan nama jalan, sungai, dan jalur kereta api. Selain objek-objek tersebut, juga ditampilkan menu Navigasi peta, menu jalur trayek bus TransJogja, tombol Geser tampilan peta dan arah angin.
Gambar 4.11 Tampilan Peta Digital
Objek didalam peta seperti tombol objek wisata kuliner dan tombol fasilitas umum dapat memberikan informasi tentang nama objek jika
cursor mouse diarahkan ke setiap tombol tersebut (lihat Gambar 4.12).
Hanya saja yang dapat memberikan informasi lengkap dan menampilkan informasi tersebut pada jendela informasi yang dapat ditutup dan ditampilkan kembali (lihat Gambar 4.13) adalah tombol objek wisata kuliner.
(a) (b)
Gambar 4.12 Tampilan Objek pada Peta Digital (a) Tombol fasilitas umum; (b) tombol objek wisata kuliner.
Gambar 4.13 Tampilan Jendela Informasi Objek Wisata Kuliner e. Menu Navigasi Peta. Menu ini berfungsi untuk mengatur tampilan peta
dengan memperbesar atau memperkecil ukuran tampilan peta, serta untuk mengatur tampilan objek wisata kuliner pada peta berdasarkan jam makan (pagi, siang, sore, malam) atau menampilkan semua objek wisata kuliner tersebut.
Menu Navigasi akan muncul setelah menu tersebut telah diaktifkan (lihat Gambar 4.14b). Untuk mengaktifkan menu Navigasi digunakan tombol Navigasi (lihat Gambar 4.14a) dengan mengarahkan cursor
mouse ke tombol tersebut. Maka menu Navigasi akan muncul dengan sendirinya.
(a) (b)
Gambar 4.14 Tampilan Tombol dan Menu Navigasi Peta (a) Tombol Navigasi awal; (b) menu navigasi.
f. Menu TransJogja. Menu ini berfungsi untuk menampilkan pilihan jalur trayek bus TransJogja dalam bentuk radio-button. Kemudian
radio-button tersebut digunakan untuk memilih jalur trayek dan
menampilkannya di peta. Menu TransJogja akan muncul setelah menu tersebut diaktifkan (lihat Gambar 4.15b). Untuk mengaktifkan menu TransJogja digunakan tombol TransJogja (lihat Gambar 4.15a) dengan mengarahkan cursor mouse ke tombol tersebut. Maka menu TransJogja akan muncul dengan sendirinya.
(a) (b)
Gambar 4.15 Tampilan Tombol dan Menu TransJogja (a) Tombol TransJogja awal; (b) menu TransJogja.
g. Tombol Geser. Tombol ini berfungsi untuk menggeser tampilan peta ke arah kiri, kanan, atas, dan bawah. Tombol ini terletak disetiap samping peta. Dengan mengarahkan cursor mouse kepada tombol ini, maka peta akan bergeser dengan sendirinya, sesuai dengan arah yang dipilih (lihat Gambar 4.16).
Tombol Geser bekerja dengan menerapkan analogi kamera video. Analogi tersebut adalah arah geser berlawanan dengan objek (dalam hal ini peta). Misalnya jika digeser kekiri, maka seolah-olah objek dibelakangnya bergerak berlawan kekanan. Dengan analogi ini akan membuat Pengguna tidak kebingungan untuk menggunakan tombol geser ini, karena sesuai dengan yang dialami dalam kehidupan nyata.
(a) (b)
Gambar 4.16 Tampilan Tombol Geser
(a) Sebelum cursor mouse diarahkan; (b) setelah cursor mouse diarahkan. h. Tombol Suara. Seperti halnya pada tombol pengaturan suara yang ada
di halaman Intro, tombol ini berfungsi untuk pengaturan suara musik latar belakang pada aplikasi, yaitu untuk menghidupkan atau mematikan suara musik latar belakang. Tapi fungsi tersebut tidak diterapkan pada tombol, hanya diterapkan pada suara musik latar belakang. Sehingga walaupun musik dimatikan, suara tombol tetap terdengar. Posisi tombol pada Gambar 4.17a berarti musik dalam keadaan sedang dimainkan. Jika tombol ditekan pada posisi tersebut, maka musik akan mati, dan menampilkan tombol seperti pada Gambar 4.17b, yang berarti musik dimatikan sementara.
(a) (b)
Gambar 4.17 Tampilan Tombol Suara (a) Saat suara berbunyi; (b) saat suara tidak berbunyi.
i. Tombol Depan. Tombol ini berfungsi untuk menampilkan halaman
Intro atau sebagai link untuk menuju ke halaman Intro (lihat Gambar
4.18).
Gambar 4.18 Tampilan Tombol Depan
j. Tombol Bantuan. Seperti halnya pada tombol Bantuan yang ada di halaman Intro, tombol ini berfungsi untuk menampilkan jendela Bantuan panduan penggunaan aplikasi (lihat Gambar 4.19).
Gambar 4.19 Tampilan Tombol Bantuan
k. Tombol Keluar. Seperti halnya pada tombol Keluar yang ada di halaman Intro, tombol ini berfungsi untuk keluar dari aplikasi atau menutup aplikasi (lihat Gambar 4.20). Tombol ini terletak di pojok kanan atas dari halaman Utama.
Gambar 4.20 Tampilan Tombol Keluar 3. Halaman Bantuan
Halaman Bantuan berfungsi untuk menampilkan halaman panduan penggunaan aplikasi Peta Digital Wisata Kuliner Jogja. Halaman ini dapat
diakses dari halaman Intro maupun halaman Utama. Informasi yang ditampilkan antara lain penjelasan sekilas tentang aplikasi, penggunaan halaman bantuan, penggunaan halaman Intro, penggunaan halaman Utama, dan sejarah pengembangan aplikasi. Dengan didukung oleh fasilitas menu Bantuan, Navigasi Halaman panduan, dan tombol untuk menutup halaman Bantuan.
Berikut ini adalah tampilan antarmuka dan dialog dari halaman Bantuan. a. Halaman Bantuan Bagian Awal. Halaman ini tampil setelah tombol
Bantuan yang ada di halaman Intro dan halaman Utama ditekan. Atau halaman ini merupakan halaman awal dari halaman Bantuan. Halaman Bantuan berfungsi untuk menampilkan panduan penggunaan aplikasi. Fasilitas yang terdapat pada halaman bantuan ini antara lain : menu daftar Bantuan, tombol Navigasi Halaman Panduan, dan tombol untuk menutup halaman Bantuan ini (lihat Gambar 4.21).
b. Menu Bantuan. Menu ini digunakan untuk menampilkan daftar bantuan yang disediakan. Setiap menu yang sedang aktif, akan diindikasi dengan terpilihnya menu tersebut (lihat Gambar 4.22). Menu yang disediakan antara lain : halaman awal (lihat Gambar 4.21), Sekilas Aplikasi, Jendela Bantuan, Jendela Intro, Jendela Utama, dan Sejarah Aplikasi.
Gambar 4.22 Tampilan Menu Bantuan
1). Sekilas Aplikasi; menampilkan penjelasan singkat tentang aplikasi Peta Digital Wisata Kuliner Jogja dan kebutuhan minimal perangkat keras dan perangkat lunak yang dibutuhkan untuk mengoptimalkan kinerja aplikasi (lihat Gambar 4.23). Halaman bantuan Sekilas Aplikasi terdiri dari 3 halaman.
Gambar 4.23 Tampilan Halaman Bantuan Sekilas Aplikasi 2). Jendela Bantuan; menampilkan panduan untuk menggunakan
halaman Bantuan (lihat Gambar 4.24). Halaman bantuan Jendela Bantuan terdiri dari 3 halaman.
Gambar 4.24 Tampilan Halaman Bantuan Jendela Bantuan 3). Jendela Intro; menampilkan panduan untuk menggunakan halaman
Intro (lihat Gambar 4.25). Halaman bantuan Jendela Intro terdiri dari
Gambar 4.25 Tampilan Halaman Bantuan Jendela Intro 4). Jendela Utama; menampilkan panduan untuk menggunakan halaman
Utama (lihat Gambar 4.26). Halaman bantuan Jendela Utama terdiri dari 7 halaman.
Gambar 4.26 Tampilan Halaman Bantuan Jendela Utama 5). Sejarah Aplikasi; menampilkan rekaman sejarah pengembangan
aplikasi Peta Digital Wisata Kuliner Jogja (lihat Gambar 4.27). Halaman informasi Sejarah Aplikasi terdiri dari 1 halaman.
Gambar 4.27 Tampilan Halaman Bantuan Sejarah Aplikasi c. Navigasi Halaman. Untuk memilih halaman yang akan ditampilkan
dari setiap menu bantuan, digunakan Navigasi Halaman. Navigasinya berupa tombol nomor halaman dari setiap menu bantuan. Setiap halaman yang sedang aktif atau yang sedang dipilih, nomor halamannya ditandai (lihat Gambar 4.28).
Gambar 4.28 Tampilan Navigasi Halaman Bantuan
d. Tombol Tutup. Tombol ini berfungsi untuk menutup halaman atau jendela Bantuan, dan kembali ke halaman sebelumnya yang sedang aktif, baik halaman Intro ataupun halaman Utama (lihat Gambar 4.29).
B. Implementasi Action Script
Dalam pembangunan aplikasi Peta Digital Wisata Kuliner Jogja menggunakan Macromedia Flash MX 7.0, bahasa pemrograman Action Script diterapkan dalam
frame yang ditandai dengan simbol “α” (lihat Gambar 4.30), dan pada objek simbol
(lihat Gambar 4.31) seperti Movie Clip, Button (tombol), dan Graphic (grafis).
Gambar 4.30 Penerapan Action Script pada Frame
Gambar 4.31 Penerapa Action Script pada Objek Simbol
Sedangkan scene yang digunakan ada 2 (dua) yaitu scene “intro” dan scene
“utama” (lihat Gambar 4.32). Scene “intro” digunakan untuk menempatkan halaman
Gambar 4.32 Penerapan Scene
Variabel yang digunakan merupakan variabel global. Sehingga variabel tersebut dapat diakses dari frame, layer, dan scene yang berbeda. Untuk penamaan objek, menggunakan Instance Name untuk objek yang ada di frame (lihat Gambar 4.33) dan menggunakan Identifier untuk objek yang berada di Library (lihat Gambar 4.34). Penamaan objek digunakan untuk pemanggilan objek dalam Action Script.
Gambar 4.33 Penamaan Objek menggunakan Instance Name
Berikut ini merupakan implementasi Action Script dalam aplikasi Peta Digital Wisata Kuliner Jogja pada halaman Intro, halaman Utama, dan halaman Bantuan.
1. Halaman Intro
a. Action Script Awal stop();
stopAllSounds();
fscommand("allowscale", "false");
var my_sound:Sound = new Sound(); my_sound.attachSound("s_intro");
Action Script ini diletakkan pada frame paling awal dari layer SCRIPT
pada scene Intro. Perintah stop() digunakan untuk menghentikan jalannya playhead atau untuk menghentikan jalannya aplikasi.
Sedangkan perintah stopAllSounds() digunakan untuk mematikan semua suara musik latar belakang yang sedang dibunyikan, untuk menghindari tabrakan suara pada halaman Intro dengan suara yang sedang dibunyikan dari halaman sebelumnya, misalnya dari halaman Utama.
Perintah fscommand(“allowscale”, “false”), berfungsi untuk merubah ukuran skala tampilan aplikasi. Karena diset nilainya menjadi
false, maka pada saat ukuran tampilan aplikasi dirubah jendela aplikasi
akan tetap pada ukuran yang sama.
Perintah var my_sound:Sound = new Sound(), merupakan perintah untuk membuat variabel objek baru berbentuk suara dengan nama
my_sound. Sedangkan perintah my_sound.attachSound("s_intro"), digunakan untuk mengisi variabel my_sound dengan objek suara yang memiliki nama Identifier "s_intro".
b. Preloader
Gambar 4.35 Movie Clip “Preloader” onClipEvent (load) { total = _root.getBytesTotal(); } onClipEvent (enterFrame) { loaded = _root.getBytesLoaded(); percent = int(loaded/total*100); gotoAndStop(percent); if (loaded == total) { _root.gotoAndPlay(2); } }
Perintah diatas berada pada Movie Clip “Preloader”. Pada perintah onClipEvent(load), yaitu pada saat frame dimana “Preloader” berada sedang di-load, maka variabel total diisi dengan total ukuran file aplikasi yang akan di-load.
Kemudian pada perintah onClipEvent(enterFrame), yaitu pada saat
playhead memasuki frame dimana “Preloader” berada secara
berulang-ulang, maka variabel loaded diisi dengan ukuran file yang sudah
sudah di-load, dan diisi dengan nilai integer dari hasil bagi variabel
loaded dengan variabel total dibagi dengan nilai 100.
Kemudian jika variabel loaded sama dengan variabel total, berarti proses loading file selesai, dan dilanjutkan dengan menjalankan scene
intro pada frame ke- 2. Maka setelah proses loading selesai, aplikasi
dijalankan kembali. c. Objek Suara my_sound.start(); my_sound.setVolume(100); my_sound.onSoundComplete = function () { my_sound.start(); }
Script diatas digunakan untuk menjalankan atau membunyikan objek
suara yang sudah di-load pada bagian awal. Dengan perintah
my_sound.start(), berarti objek suara dijalankan. Dan volume suara
diset menjadi 100 menggunakan perintah my_sound.setVolume(100). Perintah tersebut digunakan untuk menghindari tidak bunyinya suara yang dijalankan pada scene intro ini. Dan juga karena jika pada scene
sebelumnya, misalnya scene utama, volume suara diset menjadi 0, maka saat masuk pada scene intro dan volume tidak diset menjadi 100, suara tidak akan berbunyi.
Untuk mengulang bunyi suara terus-menerus, digunakan perintah
my_sound.onSoundComplete. Jika objek suara my_sound berhenti
d. Tombol Suara
Tombol Suara (lihat Gambar 4.17), digunakan untuk mematikan atau membunyikan kembali suara musik latar belakang. Karena ada 2 tampilan tombol yaitu saat suara berbunyi dan tidak berbunyi, maka tombol Suara berbentuk Movie Clip untuk memudahkan pengaturan tampilan. Untuk setiap frame (lihat Gambar 4.36) diisi dengan perintah
stop(). Gunanya untuk mengatur agar movie clip “sound_control”
tidak jalan berulang terus-menerus.
Gambar 4.36 Tampilan Timeline dari Movie Clip “sound_control” on (release) {
gotoAndPlay(2);
_root.my_sound.setVolume(0); }
Untuk tombol Suara pada frame ke- 1, digunakan perintah diatas. Pada frame ini suara masih dibunyikan. Pada perintah on(release), jika tombol Suara pada frame ini dilepaskan setelah sebelumnya ditekan lebih dulu, maka akan berpindah ke frame 2 menggunakan perintah
gotoAndPlay(2) dan volume objek suara my_sound diset menjadi 0
on (release) { gotoAndPlay(1);
_root.my_sound.setVolume(100); }
Untuk tombol suara pada frame ke- 2, digunakan perintah diatas. Jika
frame ini yang aktif, berarti suara dalam keadaan tidak berbunyi. Maka
tombol Suara pada frame ini digunakan untuk membunyikan suara kembali, dengan berpindah ke frame ke- 1 dengan perintah gotoAndPlay(1), dan volume objek suara my_sound diset menjadi 100 menggunakan perintah _root.my_sound.setVolume(100).
e. Jendela Bantuan
Perintah dibawah ini diterapkan pada movie clip“mc_bantuan”, dimana
movie clip tersebut merupakan jendela Bantuan. Jendela Bantuan hanya
dapat ditampilkan dengan menggunakan tombol Bantuan. Maka untuk menghindari tampilnya jendela Bantuan sebelum menekan tombol Bantuan, maka diperlukan perintah dibawah ini.
onClipEvent (load) { this._visible = false; }
Pada saat frame dimana “mc_bantuan” berada di-load, maka
“mc_bantuan” disembunyikan tampilannya atau visibility dari
“mc_bantuan” diset menjadi false menggunakan perintah
this._visible = false.
f. Tombol Bantuan on (release) {
mc_bantuan._visible = true; T_bantuan._visible = false; }
Perintah diatas digunakan tombol Bantuan dengan instance name
“T_bantuan” untuk menampilkan “mc_bantuan” atau halaman
Bantuan. Pada saat tombol “T_bantuan” dilepas setelah sebelumnya
ditekan, “mc_bantuan” ditampilkan menggunakan perintah
mc_bantuan._visible = true, dan tombol “T_bantuan”
disembunyikan menggunakan perintah T_bantuan._visible = false. Hal tersebut dilakukan agar tombol Bantuan tidak muncul saat halaman Bantuan ditampilkan.
g. Tombol Profil
Tombol profil berbentuk movie clip dengan instance name
“mc_T_profil”. Dan instance name dari tombol Profil sendiri adalah
“T_profil”.
on (rollOver) { gotoAndPlay("s1"); }
Untuk proses awal menampilkan profil pembuat, untuk “T_profil”
menggunakan perintah diatas. Saat “T_profil” dilewati oleh cursor
mouse pada frame ke- 1, maka jalankan frame yang memiliki label “s1”,
yaitu frame ke- 2. Sehingga pada saat berhenti pada frame 12, maka profil pembuat aplikasi ditampilkan.
on (rollOver) { gotoAndPlay("s2"); }
Pada frame 12, perintah untuk tombol “T_profil” berubah menjadi perintah diatas. Saat “T_profil” dilewati oleh cursor mouse, maka jalankan frame yang memiliki label “s2”, yaitu frame ke- 13. Tampilan tombol Profil kembali seperti semula, dan profil pembuat aplikasi disembunyikan.
h. Tombol Masuk on (release) {
gotoAndPlay("utama", 1); }
Perintah diatas merupakan perintah untuk tombol Masuk. Setelah tombol Masuk ditekan dan dilepaskan, maka selanjutnya akan berpindah dari scene Intro ke scene Utama pada frame ke- 1 menggunakan perintah gotoAndPlay(“utama”, 1).
i. Tombol Keluar on (release) {
fscommand("quit", "true"); }
Perintah diatas digunakan tombol Keluar untuk menutup atau keluar dari aplikasi menggunakan perintah fscommand(“quit”, “true”), setelah tombol Keluar ditekan dan kemudian dilepaskan.
j. Action Script Akhir
Untuk mengakhiri jalannya scene intro, digunakan perintah stop() yang diletakkan di frame terakhir. Perintah tersebut digunakan agar
scene intro tidak diulangi setelah mencapai frame terakhir atau setelah
sceneintro selesai dijalankan.
2. Halaman Utama