commit to user
25
3.5.4 Desain Rancang menu Video mode
Desain rancangan tampilan menu video ditunjukan pada gambar 3.12. Menu Galeri berisi konten galeri video kota solo
Gambar 3.12 Desain rancang Menu Video mode
3.6 Perancangan Ujicoba
Aplikasi ini akan dicoba pada media online dengan
web browser
sebagai media utama aplikasi ini serta pada sistem operasi
smart phone.
Adapun web browser yang akan digunakan sebagai media untuk uji coba adalah sebagai
berikut :
Mozilla firefox
versi
11
Google chrome
versi 20.0
Internet explorer
versi 7 Sedang media smartphone yang akan digunakan adalah smartphone
dengan sistem operasi
Android
Footer
Video mode
home HEADER
galeri Video mode
Peta solo
commit to user
26
3.7 Perancangan Evaluasi
Perancangan evaluasi berupa kuisioner yang akan ditanyakan kepada masyarakat adapun isi pertanyaan yang akan ditanyakan pada kuisioner
adalah sebagai berikut : 1.
Bagaimana tampilan dari Aplikasi “Peta kota solo berbasis
Flash
dan
XML volume II
Baik sekali baik
cukup kurang
2. Apakah informasi yang disajikan pada peta anda rasa sudah cukup
memenuhi kebutuhan akan informasi Sangat cukup
cukup belum cukup
sangat kurang 3.
Media apa yang menurut anda perlu ditambhakan dalam aplikasi ini tuliskan
4. Apakah menurut Anda Program aplikasi ini layak digunakan untuk
masyarakat: Sangat layak
layak cukup layak
tidak layak
commit to user
27
BAB IV IMPLEMENTASI DAN ANALISA
4.1 Spesifikasi Pengguna
Aplikasi peta kota solo ini ditujukan untuk digunakan oleh semua pihak yang ingin mencari dan mengetahui lokasi letak daerah di kota solo
dan memberi informasi wisata dan tempat sebagai sarana pendukung lainya seperti informasi penginapan, informasi rumah sakit dan lain-lain.
4.2 Tampilan Program
Tampilan dari Progran ini hanya terdiri dari satu
platform
, yaitu dari
client
tampilan menggunakan browser yang terkoneksi dalam internet.Berikut ini beberapa gambar tampilan Program.
4.2.1 Tampilan Halaman Awal
Tampilan halaman awal adalah tampilan awal pada saat pengguna mengakses program. Tampilan awal program dapat dilihat pada gambar
berikut :
Gambar 4.1 halaman awal
Desain tampilan halaman awal di dominasi warna biru
. Header
menjelaskan nama dari program yaitu “Solo Map”.pada bagian bawah
commit to user
28 header terdapat menu untuk mengakses halaman selanjutnya, menu pada
header akan ada pada setiap halaman. Konten di dominasi oleh warna putih, isi konten adalah pilihan kategori “galeri, peta kota solo,info wisata
dan video. Desain untuk pilihan kategori berupa sebuah folder yang berisi konten kategori tersebut. Isi pada
footer
adalah menu musik dan panduan pengoperasian program.
4.2.2 Tampilan Halaman Galeri
Halaman galeri adalah halaman yang berisi galeri foto kota solo yang dilengkapi dengan judul dan keterangan dari foto tersebut. Berikut adalah
tampilan dari halaman galeri kota solo.
Gambar 4.2 halaman galeri
Untuk menampilkan halaman galeri kota solo digunakan pemrograman
Javascript J-query
guna mempercantik
tampilan. sengaja
dipilih pemrograman dengan
j-query
agar ukuran file berukuran kecil.
4.2.3 Tampilan Halaman Peta Solo
commit to user
29 Halaman peta kota solo adalah halaman utama dari program yang
berisi konten peta kota solo. Berikut tampilan peta kota solo
Gambar 4.3 peta kota solo Peta kota solo berisi konten peta dari kota solo yang berisi informasi
nama tempat, jalan, dan nama lokasi yang dibutuhkan secara umum selayaknya sebuah peta. Peta kota solo adalah sebuah file . didalam peta
kota solo terdapat beberapa fitur seperti : Fitur
Search
: fitur untuk mencari nama lokasi Fitur info tempat : fitur keterangan yang berguna bagi
pengguna untuk menunjukan nama tempat, informasi tempat dilengkapi gambar dan video agar lebih menarik
Fitur legenda : fitur yang berisi keterangan dari simbol-simbol didalam peta
4.2.4 Tampilan Halaman video mode
commit to user
30 Halaman video mode adalah halaman yang menampilkan peta kota
solo dalam mode video, halaman video mode dapat dilhat pada gambar 4.5
Gambar 4.4 halaman video mode
4.2.5 Tampilan halaman admin
Halaman admin berisi
form input
untuk
input
data galeri yang berguna bagi admin untuk menambahkan dan mengedit data pada halaman
galeri. Berikut adalah tampilan halaman awal admin
Gambar 4.5 halaman awal admin
4.3 Script program
Berikut adalah script program dari peta kota solo berbasis flash dan xml
4.3.1 Script Program peta kota solo berbasis flash dan xml
commit to user
31
a. Script program
zooming tool
muncul dan hilang
root.kamera.koor._visible = true; _root.kamera.garis._visible = true;
_root.kamera.oksrc._visible= false
; menyembunyikan fungsi search
_
root.kamera.navmenu._alpha = 25;
mengatur alpha navmenu kode inti untuk menyembunyikan button
Mouse.hide; kamera.onMouseMove = function
{ if_root.zoomin | | _root.zoomout | | _root.dragme {
this.toolzoom._x = this._xmouse; this.toolzoom._y = this._ymouse;
updateAfterEvent; }
};
b. Scrip
t program untuk membuat
zooming tool
var klik = 0; _root.zoomin = false;
_root.zoomout = false; _root.dragme = false;
function zoommc, faktor, waktu {
type = mx.transitions.easing.Strong.easeOut; besarx = new mx.transitions.Tweenmc, _xscale, type, mc._xscale,
mc._xscale faktor, wa ktu, true; besary = new mx.transitions.Tweenmc, _yscale, type, mc._yscale,
mc._yscale faktor, wa ktu, true; geserx = new mx.transitions.Tweenmc, _x, type, mc._x,
_root._xmouse, waktu, true; gesery = new mx.transitions.Tweenmc, _y, type, mc._y,
_root._ymouse, waktu, true; }
map.indo.onRelease = function {
if dragme {
commit to user
32
if _root.zoomin klik 5 {
zoomkamera,0.5,1; klik+ + ;
} if _root.zoomout klik 0
{ zoomkamera,2,1;
klik--; }
} this.stopDrag;
}; map.indo.onPress = function
{ if dragme
{ map.startDrag;
} };
kode pada layer zoom button: for i = 1; i = 3; i + = 1
{ buttonmenu = _root.kamera.navmenu[b + i];
buttonmenu.id = i; buttonmenu.onRelease = function
{ _root.kamera.papan._visible = false; menhilangkan papan
keterangan _root.kamera.papan.gotoAndStopfungsi; mengfungsikan kembali
button _root.cursorMovieClip = true;
_root.kamera.oksrc._visible = false; menghilangkan form search _root.kamera.bsearch0._visible = true; Memunculkan button search
_root.map[tanda + i]._visible = false;menghilangkan marker if this.id = = 1
{ _root.kamera.toolzoom.gotoAndStop2;
_root.zoomin = true; _root.zoomout = false;
_root.dragme = false;
commit to user
33
} if this.id = = 2
{ _root.kamera.toolzoom.gotoAndStop3;
_root.zoomout = true; _root.zoomin = false;
_root.dragme = false; }
if this.id = = 3 {
_root.kamera.toolzoom.gotoAndStop4; _root.dragme = true;
_root.zoomin = false; _root.zoomout = false;
} updateAfterEvent;
}; buttonmenu.onRollOver = function
{ _root.kamera.toolzoom.gotoAndStop1;
_root.kamera.navmenu._alpha = 100; zoom transparant 100 _root.cursorMovieClip = true;
}; buttonmenu.onRollOut = function
{ _root.kamera.navmenu._alpha = 25; zoom transparant 25
tugelmode; };
} function tugelmode
{ if _root.zoomin
{ _root.kamera.toolzoom.gotoAndStop2;
} else if _root.zoomout
{ _root.kamera.toolzoom.gotoAndStop3;
} else if _root.dragme
{ _root.kamera.toolzoom.gotoAndStop4;
}
commit to user
34
else if _root.cursorMovieClip {
_root.kamera.toolzoom.gotoAndStop1; }
}
c. Script untuk Load dan kontrol fungsi xml
Kategori