T0__BAB III Institutional Repository | Satya Wacana Christian University: Pengembangan Peta Digital Kota Salatiga Berbasis Animasi T0 BAB III

BAB III
PERANCANGAN SISTEM

3.1

Ruang lingkup aplikasi
Berdasarkan kebutuhan dari pengguna, pembuatan
Animasi

ini

membutuhkan

ditujukan

kepada

masyarakat

yang

informasi tempat – tempat yang menjadi

tujuan pengguna yang dapat dijadikan rekomendasi bagi
mereka sesuai dengan kebutuhan. Penulis juga menyertakan
alamat serta nomor telepon yang dapat dihubungi apabila
masyarakat ingin mendapatkan informasi lebih lanjut.
3.2

Sitemap
Home
MAPS
rumah
sakit
hotel
tempat
ibadah
Gambar 3.1 SiteMap

3.3

Lembar Kerja Tampilan

Perancangan animasi ini menggunakan bantuan
software bernama macromedia flas 8 pofessional yang

digunakan

untuk

membuat

desain

animasi

beserta

pengkodeannya.
Susunan LKT di bawah ini terdiri dari :
a. Coding pembuatan aplikasi.

b. Cara pembuatan Aplikasi
c. Sub folder Aplikasi.

3.3.1 Form tampilan utama peta

Gambar 3.2 LKT tampilan peta
Form tampilan utama berisi jendela tampilan peta Kota
Salatiga berikut tombol navigasi yang ada, arah mata angin,
keterangan tempat dan waktu.

3.3.2 Desain icon
Hal yang dilakukan sebelum pembuatan aplikasi peta
digital adalah membuat desain frame, desain peta, desain icon

rumah sakit, hotel, masjid, dan lain-lain dengan menggunakan
Paint, Corel Draw X6, Photoshop CS5 dan Macromedia Flash
8 Professional

Gambar 3.3 Pembuatan Icon

Gambar 3.4 Pembuatan Frame

Gambar 3.5 Pembuatan Peta
3.3.3 Membuat animasi peta Kota Salatiga
Untuk

pembuatan

aplikasi

peta

Kota

Salatiga

menggunakan Macromedia Flash 8 dengan memasukkan
semua elemen yang dibutuhkan seperti gambar, teks dan icon
– iconnya. Proses pembuatan editing obyek gambar lebih
banyak menggunakan menggunakan CorelDRAW X6.

3.3.4 Membuat Tombol Navigasi

Gambar 3.6 Pembuatan Tombol

Membuat semua tombol navigasi dengan menggunakan
aplikasi CorelDRAW X6. Setelah selesai membuat tombol,
jangan lupa convert gambar suapaya gambar tidak pecah.
Setelah melakukan convert gambar, lalu langkah selanjutnya
adalah mengekspor gambar dalam bentuk PNG. Tujuan dari
proses ini agar background gambar menjadi transparant saat
ditampilkan pada aplikasi. Macromedia Flash 8.

3.3.5 Membuat Tombol Zoom In
Tombol Zoom In berfungsi untuk memperbesar peta.
Jika diklik pada tombol zoom in maka peta akan,
memperbesar, Cara membuatnya:
a.

Masukkan icon yang sudah di format ke PNG,
kemudian Conver To Symbol kemudian pilih

Button.

b.

Agar memperindah bedakan gambar saat di tekan
atau tidak

c.

Klik button tersebut, kemudian ketikan pada
Action Script sebagai berikut :
on (release) {
MAPS._width += 100;;
MAPS._height += 100;;
}

3.3.6 Membuat Tombol Zoom Out
Tombol Zoom Out berfungsi untuk memperkecil peta.
Jika diklik pada tombol zoom out maka peta akan mengecil.
Cara membuatnya:

a.

Masukkan icon yang sudah di format ke PNG,
kemudian Conver To Symbol kemudian pilih
Button.

b.

Agar memperindah bedakan gambar saat di tekan
atau tidak

c.

Klik button tersebut, kemudian ketikan pada
Action Script sebagai berikut:
on (release) {
MAPS._width -= 100;;
MAPS._height -= 100;;
}

3.3.7 Membuat Tombol Refresh
Tombol Refreesh berfungsi untuk me-default peta, yang
dapat dilihat seperti gambar dibawah ini.Cara membuatnya:
a.

Masukkan icon yang sudah di format ke PNG,
kemudian Conver To Symbol kemudian pilih
Button.

b.

Agar memperindah bedakan gambar saat di
tekan atau tidak

c.

Klik button tersebut, kemudian ketikan pada

Action Script sebagai berikut:
on (release) {

MAPS._width =700;
MAPS._height =750;
}