PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUAL … · teknologi serta wacana bagi mahasiswa/i STMIK...
Transcript of PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUAL … · teknologi serta wacana bagi mahasiswa/i STMIK...
1
PERANCANGAN WEBSITE PARIWISATA BERBASISVISUAL ANIMASI DI DINAS KEBUDAYAAN DAN
PARIWISATA ACEH BESAR
SKRIPSI
Diajukan untuk melengkapi Tugas danmemenuhi syarat-syarat guna memperoleh gelar Sarjana Komputer
STMIK U’Budiyah Indonesia
Oleh :
RIZAL AIYUBI08111062
PROGRAM STUDI S1 TEKNIK INFORMATIKASEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
STMIK U’BUDIYAH INDONESIABANDA ACEH
2012
2
LEMBAR PENGESAHAN
PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUALANIMASI DI DINAS KEBUDAYAAN PARIWISATA PEMUDA DAN
OLAH RAGA KABUPATEN ACEH BESAR
Tugas Akhir ini oleh RIZAL AIYUBI ini telah dipertahankan didepan Dewan
Penguji pada Tanggal 21 Agustus 2012.
DewanPenguji :
1. Ketua Ima Dwitawati, MBANIDN: 0113108204
2. Anggota Faisal Tifta Zany, M. ScNIDN: 0127038103
3. Anggota Zalfie Ardian, S Kom
3
PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUALANIMASI DI DINAS KEBUDAYAAN PARIWISATA PEMUDA DAN
OLAH RAGA KABUPATEN ACEH BESAR
SKRIPSI
Oleh :
RIZAL AIYUBI08111062
Disetujui,
Penguji I Penguji II
(Faisal Tifta Zany, M. Sc) ( Zalfie Ardian, S kom )NIDN : 0127038103
Ka. Prodi S1 Teknik Informatika Pembimbing
( Agustiar, ST.MT ) ( ImaDwitawati, MBA)NIDN : 1122334491 NIDN: 0113108204
Mengetahui,
Ka. STMIK U’Budiyah Indonesia
( Drs. Alfian Ibrahim, MS)NIP. 0011064701
4
LEMBAR PERNYATAAN
Saya menyatakan bahwa skripsi yang saya susun, sebagai syarat memperoleh
gelar sarjana merupakan hasil karya tulis saya sendiri. Adapun bagian-bagian
tertentu dalam penulisan skipsi ini yang saya kutip dari hasil karya orang lain
telah dituliskan sumbernya secara jelas sesuai dengan norma, kaidah, dan etika
penulisan ilmiah. Saya bersedia menerima sanksi pencabutan gelar akademik yang
saya peroleh dan sanksi-sanksi lainnya sesuai dengan peraturan yang berlaku,
apabila dikemudian hari ditemukan yaplagiat dalam skipsi ini.
Banda Aceh, 08 Agustus 2012
Rizal Aiyubi08111062
5
KATA PENGANTAR
Assalamualaikumwr.wb
Pujisyukur kami panjatkankehadirat Allah SWT, atas banyaknya berkah,
rahmat dan hidayah-Nya sehingga tugas akhir ini dapat terselesaikan dengan baik.
Selawat dan salam kepada Rasulullah Muhammad SAW sebagai suritauladan
yang telah menghantarkan kita selalu menuntut ilmu untuk bekal dunia dan
akhirat.
Akhirnya penyusunan tugas akhir yang berjudul “Perancangan Website
Pariwisata Berbasis Visual Animasi Di Dinas Kebudayaan Dan Pariwisata
Aceh Besar” dapat dirampungkan. Skripsi ini merupakan salah satu syarat
memperoleh gelar sarjana S1 Teknik Informatika pada STMIK U’Budiyah Banda
Aceh.
Penghargaan dan ucapan terima kasih kepada kedua orang tua penulis,
terimakasih atas doa dan sumber inspirasi, moril dan materil Sehingga Penulis
dapat melakukan yang terbaik. Taklupa penulis menyampaikan terima kasih dan
penghargaan yang setinggi-tingginya kepada semua pihak yang telah memberikan
bimbingan dan petunjuk, terutama kepada :
1. Ibu Ima Dwitawati, MBA selaku pembimbing yang telah banyak
memberikan dorongan, semangat, saran dan bimbingan dalam penyusunan
tugas akhir ini.
2. Bapak Agustiar, ST. MT selaku Ketua Prodi S1 Teknik Informatika.
6
3. Bapak Drs. Alfian Ibrahim, MS selaku Ketua STMIK U’Budiyah Indonesia
4. Seluruh dosen STMIK U’Budiyah Banda Aceh yang telah memberikan bakal
ilmu dan pendidikan kepada penulis selama kuliah di STMIK U’Budiyah
Banda Aceh.
5. Kepada seluruh Keluarga Besar yang telah banyak memberikan semangat
kepada penulis.
6. Kepada seluruh teman-teman seperjuangan, khususnya “TI 08” yang tiada
duanya yang memberikan spirit, kebersamaan dan persaudaraan hingga saat
ini.
7. Serta semua pihak yang telah membantu yang tidak dapat kami sebutkan satu
persatu.
Semoga bantuan dan dukungan yang telah di berikan mudah-mudahan
mendapat kanridhaan dan balasan dari Allah SWT. Penulis sadar bahwa tugas
akhir ini masih banyak kekurangan, namun penulis berharap tugas akhir ini
memberikan kontribusi sekecil apapun bagi kemajuan ilmu pengetahuan dan
teknologi serta wacana bagi mahasiswa/i STMIK U’Budiyah Banda Aceh. Akhir
kata semoga tugas akhir ini dapat bermanfaat bagi semua pihak dan semoga Allah
SWT senantiasa melimpahkan rahmat dan karunia-Nya, Amin.
Banda Aceh, Agustus 2012
Penulis
7
ABSTRAK
Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar iniadalah Instansi pemerintah yang bergerak dibidang Kebudayaan, bidangPariwisata, bidang Kepemudaan dan bidang Keolahragaan Kota Aceh Besar. Saatini, Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten AcehBesar masih menggunakan Bloger dalam mempublikasi Objek Wisata yang ada dikawasan Aceh Besar. Tugas akhir ini bertujuan untuk membuat suatu websitePariwisata Berbasis Visual Animasi di Dinas Kebudayaan dan Pariwisata AcehBesar yang dinamis. Dalam pembuatan website Pariwisata menggunakan softwareAdobe flash CS3, maka website Pariwisata berbasis Visual Animasi akan lebihpraktis dan mudah. Adapun link atau menu-menu yang dipakai dalam pembuatanwebsite ini yakni menu Home, Menu About, Menu Objek Wisata, Menu book, danMenu Contact. Semua link atau menu diatas digunakan untuk fasilitas yangdiperlukan dalam mengunakan website Pariwisata berbasis Visual Animasi diDinas Kebudayaan dan Pariwisata Aceh Besar.
Kata kunciPariwisata dan Adobe flash CS3
ABSTRACT
Department of Culture, Tourism, Youth and Sports Aceh Besar District is agovernment agency engaged in the Culture, Tourism field, field and field of SportYouth City of Aceh Besar. Currently, the Department of Culture, Tourism, Youthand Sports in Aceh Besar district still uses Bloggers to publish attractions thatexist in Aceh Besar district. This final project aims to create a website basedTourism Visual Animation in the Department of Culture and Tourism of dynamicAceh Besar. In Tourism website creation using Adobe Flash CS3 software, theweb-based Tourism Visual Animation will be more practical and easier. As for thelink or the menus used in making this website the Home menu, Menu About,Attraction Menu, Menu book, and Menu Contact. All links or use the menu aboveto facilities needed in using Visual Animation website based Tourism in theDepartment of Culture and Tourism of Aceh Besar.
KeywordsTourism and Adobe Flash CS3
8
DAFTAR ISI
Halaman
HALAMAN JUDUL ............................................................................................ i
HALAMAN PENGESAHAN.............................................................................. ii
LEMBAR PERSETUJUAN ................................................................................ iii
LEMBAR PENYATAAN .................................................................................... iv
KATA PENGANTAR.......................................................................................... v
ABSTRAK ............................................................................................................ vi
DAFTAR ISI ........................................................................................................ vii
DAFTAR GAMBAR............................................................................................ x
BAB I PENDAHULUAN .................................................................................... 1
1.1 Latar Belakang ..................................................................................... 1
1.2 Perumusan Masalah ............................................................................. 2
1.3 Ruang Lingkup Masalah ...................................................................... 3
1.4 Tujuan .................................................................................................. 3
BAB II TINJAUAN PUSTAKA.......................................................................... 4
2.1 DefinisiMultimedia ........................................................................... 5
2.2 Komponen Penting Multimedia ........................................................ 6
2.3 Pentingnya Multimedia ..................................................................... 7
2.4 Konsep Animasi ................................................................................ 8
2.5 Adobe Flash CS3............................................................................... 8
2.6 ActionScript....................................................................................... 10
9
2.7 PengertianWebsite ............................................................................. 11
2.8 MacromediaDreamweaver................................................................ 11
2.9 Extended Markup Language (XML)................................................. 13
2.10Cascading Style Sheet (CSS) ............................................................ 14
2.11Guide Book........................................................................................ 14
BAB III METODE PENELITIAN ..................................................................... 15
3.1 Tempat dan Waktu Penelitian ......................................................... 15
3.2 Alat dan Bahan yang digunakan...................................................... 15
3.3 Prosedur Kerja ................................................................................. 16
3.4 Struktur PerancanganWebsite .......................................................... 18
3.5 PerencanaandanPerancangan........................................................... 19
3.6 Jadwal Penelitian ............................................................................. 22
BAB IV HASIL DAN PEMBAHASAN ............................................................ 15
4.1 Rancangan Website Pariwisata berbasis Visual Animasi di Dinas
Kebudayaan dan Pariwisata Aceh Besar........................................... 23
4.1.1 Mengatur body text, warna, ukuran border, dan margin
mengunakan Cascading Style Sheet (CSS) .............................. 23
4.1.2 Perancangan menggunakan softwareAdobe Flash CS3
untuk menghasilkan Format file Shock Wave Flash (SWF).... 24
4.1.2.1 Perancangan Format file Shock Wave Flash
(SWF) Menu ............................................................. 25
4.1.2.2 Rancangan Format file Shock Wave Flash (SWF)
Slide Intro.................................................................. 25
10
4.1.2.3 Pancangan Format file Shock Wave Flash (SWF)
Text ............................................................................ 27
4.1.2.4 Perancangan Format file Shock Wave Flash
(SWF) Objek Wisata ................................................. 28
4.1.2.5 Perancangan Format file Shock Wave Flash
(SWF) Newsy ............................................................ 29
4.1.2.6 Perancangan Format file Shock Wave Flash
(SWF) Gallery........................................................... 30
4.1.2.7 Perancangan Format file Shock Wave Flash
(SWF) Book............................................................... 31
4.1.2.8 Perancangan Format file Shock Wave Flash
(SWF) Map ............................................................... 32
4.1.2.9 Perancangan Format file Shock Wave Flash
(SWF) Contact .......................................................... 33
4.1.2.10 MembuatDokumenExtended Markup Language
(XML) .......................................................................
4.1.3 Membuat Dokumen Extended Markup Language (XML)....... 34
4.1.3.1 Dokumen Extended Markup Language (XML)
Menu............................................................................. 34
4.1.3.2 Dokumen Extended Markup Language (XML) Text ... 35
4.1.3.3 Dokumen Extended Markup Language (XML)
Gallery.......................................................................... 35
11
4.1.3.4 Dokumen Extended Markup Language (XML)
Book.............................................................................. 37
4.1.3.5 Dokumen Extended Markup Language (XML)
Contact ......................................................................... 38
4.1.4 Memuat File Extended Markup Language (XML) ke Flash
mengunakan Action Script ....................................................... 39
4.2 Masalah dan Solusi dalam perancangan Website Pariwisata
berbasis Visual Animasi di Dinas Kebudayaan dan Pariwisata
Aceh Besar ........................................................................................ 39
BAB V PENUTUP................................................................................................ 41
5.1 Simpulan ........................................................................................... 41
5.2 Saran.................................................................................................. 41
DAFTAR PUSTAKA
LAMPIRAN
BIODATA PENULIS
12
Daftar Gambar
Halaman
Gambar 2. 1 Adobe Flash CS3 Profesional ........................................................... 9
Gambar 3. 1 Struktur Perancangan Website .......................................................... 18
Gambar 3. 2 Jadwal Penelitian............................................................................... 22
Gambar 4. 1 Mengatur Body Text, Ukuran Border, dan Margin ........................... 24
Gambar 4.2 Rancangan Menu Website Mengunakan Adobe Flash Cs3................ 25
Gambar 4.3 Tampilan Rancangan Slide Intro....................................................... 26
Gambar 4. 4 Tampilan Rancangan Shock Wave Flash (SWF) Text ...................... 27
Gambar 4.5 Tampilan Rancangan Shock Wave Flash (SWF) Objek Wisata ........ 28
Gambar 4. 6 Tampilan Rancangan Shock Wave Flash (SWF) Newsy .................. 29
Gambar 4.7 Tampilan Rancangan Shock Wave Flash (SWF) Gallery ................. 30
Gambar 4. 8 Tampilan Rancangan Shock Wave Flash (SWF) Book ..................... 31
Gambar 4. 9 Tampilan Rancangan Shock Wave Flash (SWF) Map ...................... 32
Gambar 4.10 Tampilan Rancangan Shock Wave Flash (SWF) Contact............... 33
Gambar 4.11 Tampilan Rancangan Extended Markup Language (XML) Menu .. 34
Gambar 4.12 Tampilan Rancangan Text yang Berformat XML............................ 35
Gambar 4.13 Tampilan Rancangan File XML Gallery ........................................ 36
Gambar 4.14 Rancangan File XML Untuk Book................................................... 37
Gambar 4.15 Forder Pages................................................................................... 38
Gambar 4.16 Perancangan File XML untuk Contact ............................................ 38
13
BAB IPENDAHULUAN
1.1 Latar Belakang
Aceh besar dengan luas wilayah ± 2.686 km2 ini memiliki banyak tempat
objek wisata yang menarik. Akibat terjadinya berbagai permasalahan dan
pengelolaan yang keliru (mismanatgement) pada masa lalu, maka telah memberi
dampak negatif pada upaya pencapaian keberhasilan pengembangan pariwisata
Aceh Besar masa kini. Bedasarkan data yang diperoleh Badan Pusat Statistik
(BPS) Kabupaten Aceh Besar, indikasi kemunduran pariwisata Aceh Besar dapat
dirasakan penurunan jumlah wisatawan Nusantara dan Mancanegara yang
berkunjung ke Aceh Besar selama lima tahun terakhir (2005-2010).
Terjadinya penurunan kunjungan wisatawan tersebut menunjukkan bahwa
kondisi pariwisata Aceh Besar secara umum belum memberikan dampak positif
dalam upaya menciptakan pemberdayaan ekonomi masyarakat, menciptakan
lapangan pekerjaan dan mengentaskan kemiskinan, bila dibandingkan dengan
daerah-daerah tujuan wisata unggulan lainnya yang ada di Aceh.
Wisata Alam (Ekowisata), Budaya dan Tsunami dianggap Perlu di
Promosikan karena:
a. Aceh Besar memiliki kekayaan dan keanekaragaman hayati dan ekowisata
yang bertumpu pada sumberdaya alam sebagai atraksi,
b. Ekowisata menitik beratkan pada pelibatan masyarakat lokal yang
mencerminkan dua prinsip utama, edukasi dan wisata. Aceh Besar juga
14
memiliki keanekaragaman budaya dan istiadat yang memiliki nilai jual
dan menarik minat wisatawan.
c. Aceh Besar memiliki potensi objek wisata yang belum terpublikasi,
banyak tempat Pariwisata yang belum terekspos dengan baik.
Kondisi tersebut telah menimbulkan keprihatinan karena pada satu sisi Aceh
Besar memiliki keragaman objek wisata yang menarik untuk dikunjungi di satu
sisi lagi Dinas Pariwisata Aceh Besar belum memiliki Website untuk
mempromosikan objek-objek wisata tersebut secara online.
Berdasarkan latar belakang dari hasil uraian di atas, penulis mencoba untuk
membuat suatu website Wisata di Dinas Kebudayaan, Pariwisata, Pemuda dan
Olah Raga Kabupaten Aceh Besar, yang nantinya akan memberikan informasi
mengenai tempat-tempat wisata, sehingga diharapkan wisatawan Nusantara dan
Mancanegara dapat mengenal lebih jauh tempat-tempat wisata yang ada di Aceh
Besar, guna mengalakan program Pemerintah Aceh untuk Visit To Aceh.
1.2 Perumusan Masalah
Dari latar belakang permasalahan yang telah diuraikan diatas, maka dapat
dirumuskan suatu permasalahan yaitu “Bagaimana Proses Perancangan website
Pariwisata berbasis Visual Animasi di Dinas Kebudayaan dan Pariwisata Aceh
Besar”, sehingga dengan adanya tampilan Website Interaktif dan Ekspersif akan
menghasilkan website kompatibel, Visual dan Digital Grafik sehingga
memungkinkan terjadinya daya tarik wisatawan local dan Mancanegara
mengunjungi situs web ini, sehingga akan berdampak pada peningkatan
Pariwisata Aceh Besar nantinya.
15
1.3 Ruang Lingkup Masalah
Agar penelitian dalam tugas akhir ini lebih terarah dan memudahkan dalam
pembahasan, maka perlu adanya pembatasan masalah, yaitu:
1. Website yang di buat adalah Website Pariwisata untuk Dinas Kebudayaan
Pariwisata Pemuda dan Olah Raga Kabupaten Aceh Besar.
2. Software yang di pakai adalah Adobe Flash CS3
3. Isi website mengenai Informasi Objek Wisata yang belum terpublikasi
1.4 Tujuan
Adapun tujuan dari penelitian ini yaitu untuk membuat Website Pariwisata
Aceh Besar berbasis Visual Animasi yang dapat menghasilkan Digital Grafik
Website dengan tampilan dinamis dan profesional, sehingga menghasilkan website
kompatibel dengan semua browser (Internet Explorer, Mozilla, Google Chrome,
Opera dll). Pada setiap halamannya di gambarkan proses tentang sesuatu yang
nantinya proses tersebut terlihat bergerak atau beranimasi, sehingga teks, gambar,
video dan audio juga bisa disisipkan supaya nantinya bermanfaat bagi Pariwisata
Aceh Besar, dan membantu Pemerintahan Aceh Besar dalam mempromosikan
Visit to Aceh Besar.
16
BAB IITINJAUAN PUSTAKA
2.1 Definisi Multimedia
Secara harfiah, Multimedia dapat diartikan sebagai lebih dari satu media.
Media tersebut dapat berupa kombinasi antara teks, grafik, animasi, suara, dan
video. Multimedia memiliki berbagai definisi, tergantung sudut pandang masing-
masing diantaranya:
1. Multimedia adalah penggunaan berbagai bentuk media dalam sebuah
presentasi
2. Multimedia adalah kombinasi penggunaan beberapa media, seperti film,
musik, slide dan pencahayaan, khususnya digunakan dalam pendidikan dan
hiburan
3. Multimedia merupakan informasi dalam bentuk grafik, audio, video maupun
film. Dokumen multimedia berisi unsur media maupun plain text .
4. Multimedia merupakan program komputer yang terdiri dari teks yang
berhubungan dengan minimal salah satu dari unsur berikut: audio atau suara,
music, video, gambar, grafik 3D, animasi maupun grafik beresolusi tinggi
(Rachma, Rara .2000)
Dari beberapa definisi multimedia di atas yang digunakan untuk penulisan
Tugas akhir ini yaitu, Multimedia merupakan program komputer yang terdiri dari
teks yang berhubungan dengan minimal salah satu dari unsur berikut: audio atau
suara, music, video, gambar, grafik 3D, animasi maupun grafik beresolusi, karena
17
menurut penulis definisi ini lebih keprinsip dasar multimedia, berupa kombinasi
antara teks, grafik, animasi, suara, dan video.
2.2 Komponen Penting Multimedia
Adapun elemen-elemen Multimedia, seperti yang dijelaskan Karyadinata
(2006) yaitu terdiri dari :
1. Teks; teks merupakan simbol kata atau kalimat yang berfungsi menjelaskan
tentang isi dan materi multimedia. Kebutuhan teks bergantung pada kegunaan
aplikasi multimedia.
2. Gambar; gambar dalam multimedia dapat berupa foto, gambar ilustrasi, dan
gambar hasil sketsa tangan. Gambar-gambar tersebut mempunyai peran dalam
menyampaikan informasi.
3. Grafik; grafik dalam multimedia juga berfungsi sebagai penyampai informasi
yang berhubungan dengan fakta, data statistik, dan gagasan-gagasan dalam
matematika.
4. Suara; dengan menggunakan suara aplikasi lebih terintegrasi, pemakai dapat
merasakan kenyamanan terhadap suara yang mewakili aplikasi tersebut
sehingga suatu informasi dapat disampaikan lebih cepat.
5. Video; video dapat diambil dan kejadian sebenarnya yang direkam, yang
berguna untuk menambah daya tarik dan memperjelas informasi yang akan
disampaikan.
6. Animasi; animasi dapat diartikan sebagai objek yang bergerak, animasi
berguna untuk mensimulasikan konsep tentang hal-hal yang melibatkan
gerakan. Misalnya pergerakan kerangka acuan dalam gerak.
18
7. Interaktif; interaktif adalah adanya komunikasi antara pengguna dengan
komponen yang terdapat di dalam komputer. Komunikasi dapat
melalui keyboard, mouse, atau alat input lainnya. Dalam hal ini pengguna
dapat memilih apa yang akan dikerjakan selanjutnya, bertanya dan
mendapatkan jawaban yang mempengaruhi komputer untuk mengerjakan
fungsi selanjutnya. (Rachma, Rara .2000)
2.3 Pentingnya Multimedia
Kelebihan Multimadia adalah menarik indera dan menarik minat, karena
merupakan gabungan antara pandangan, suara dan gerakan. Lembaga riset dan
penerbitan komputer yaitu, Computer Technology Reseach (CTR), menyatakan
bahwa orang hanya mampu mengingat 20% dari yang dilihat dan 30% dari yang
didengar. Tetapi orang dapat mengingat 50% dari yang dilihat dan didengar dan
30% dari yang dilihat, didengar dan dilakukan sekaligus; Bedasarkan uraian
diatas, maka multimedia sangat efektif untuk pengabungan teks, grafik, audio,
animasi dan video dengan menggunakan link dan tool yang memungkinkan
pemakai melakukan Nafigasi, berinteraksi, berekreasi dan berkomunikasi.
(Suyanto. M, 2005)
2.4 Konsep Animasi
Pengertian animasi pada dasarnya adalah menggerakkan objek agar tampak
lebih dinamis. Sebelum Era komputerisasi seperti sekarang, animasi merupakan
proses yang rumit dan menyita banyak waktu dan tenaga. Film-film animasi
terdahulu menggunakan ratusan sampai ribuan gambar sketsa tangan untuk
19
membuat sebuah animasi pergerakan satu persatu. Tiap gambar bergerak tersebut
dikenal dengan frame. Untuk membuat animasi yang halus pergerakannya maka
dibutuhkan makin banyak gambar.
Setelah Era komputer grafik seperti sekarang, proses animasi tidak lagi
merupakan suatu proses yang terlalu rumit. Seorang animator 2D atau 3D cukup
menganimasikan frame awal dan akhir dari suatu pergerakan animasi, selebihnya
komputer akan mengkalkulasi gerakan diantaranya (dikenal dengan istilah In-
Between). Informasi pergerakan sebuah objek dicatat komputer dengan informasi
berupa keyframe. Jumlah keyframe dan frame diantaranya inilah yang
menentukan halus atau tidaknya sebuah pergerakan animasi. (Dwiyanto, 2006)
2.5 Adobe Flash CS3
Adobe Flash Cs3 Professional merupakan salah satu software bagian dari
keluarga Adobe, yang sekarang menjadi salah satu standar untuk industri animasi
dan web yang banyak digunakan. Perangkat lunak “Adobe Flash” yang
selanjutnya disebut Flash dulunya bernama “Macromedia Flash” adalah software
multimedia unggulan yang dulunya dikembangkan oleh Macromedia, tetapi
sekarang dikembangkan dan didistribusikan oleh “Adobe System”. Sejak tahun
1996, Flash menjadi metode popular untuk animasi dan interaktif website,
dikarenakan software ini memiliki banyak kelebihan, diantaranya :
1. Tehnologi Vector Grafik yang dimiliki Adobe Flash CS3 memungkinkan
sebuah movie atau gambar diubah ukuranya tampa mengurangi kualitas
animasi atau gambar tersebut
20
2. Waktu akses animasi atau gambar cepat dibandingkan dengan program
pembuat animasi yang lai seperti animasi Gifs maupun Java Applet.
3. Bersifat Open Integrated Development Environment (IDE) sehingga dapat
berinteraksi dengan beberapaprogram pengelolaan web seperti
Dreamweaver dan Fireworks.
4. Mampu membuat animasi secara streaming sehingga sebuah movie atau
animasi akan langsung dimainkan sekalipun proses loading belum selesai
seluruhnya.
5. Mampu membuat desain web yang interaktif. User dapat berinteraksi
mengunakan mouse dan keyboard untuk berpindah dari satu halaman web ke
halaman web lain.
6. Mempunyai fasilitas yang lengkap dan fleksibel untuk menunjang para
disainer web membuat karyanya.
7. Mempunyai kemudahan dalam melakukan impor video clip dalam banyak
pilihan format file.
8. Memudahkan desainer membuat animasi mask dengan menempatkan movie
clip pada layer mask.
Flash juga berisi bahasa skrip yang diberinama ActionScript. Beberapa
produk software, system dan device dapat membuat dan menampilkan isi Flash.
Flash dijalankan dengan Adobe Flash Player yang dapat ditanam pada browser,
telephone celuler, atau software lain. Format file Flash adalah SWF, biasanya
disebut “Shock Wave Flash” movie. “Flash movie” atau “Flash game”, biasanya
file berektensi . Swf dapat dijalankan melalui web, secara stand alone pada “Flash
21
Player” atau dijalankan di Windows secara langsung dengan membuatnya dalam
format ekstensi exe. (Chandra, 2007).
Gambar 2.1 Adobe Flash CS3 Profesinal
2.6 Action Script
Adobe Action Script merupakan bahasa pemrograman yang bekerja di dalam
platform Adobe Flash. Adobe Action Script memang dibangun sebagai cara untuk
mengembangkan pemrograman interaktif secara efisien menggunakan platform
aplikasi adobe Flash Action Script mulai dari animasi yang sederhana sampai
dengan yang kompleks sekalipun, penggunaan data, dan aplikasi interface yang
interaktif. Action Script merupakan bahasa pemrograman berorientasi objek
didasarkan pada European Computer Manufacture Association (ECMA) Script
standar yang sama yang menjadi dasar JavaScript dan memberikan hasil yang luar
biasa dalam kinerja dan produktifitas pengembang. ActionScript 2, versi Action
Script yang telah digunakan dalam Adobe Flash. (Lukman, 2006)
22
2.7 Pengertian Website
Website adalah salah satu media yang berbasis teknologi informasi yang
berkembang saat ini. Website merupakan sistem yang didalamnya terdapat
kumpulan file (index) yang saling berhubungan (dalam sebuah website) dan
sekumpulan file lain yang dicantumkan didalamnya sebagai informasi kepada
pengunjung sebuah website.
Pada dasarnya jenis website ada dua, yaitu website statis dan website
dinamis. Website statis merupakan website pengguna halamanya hanya untuk
ditampilkan dan dibaca saja tanpa memberi kesempatan pada user untuk
berinteraksi, sedangkan website dinamis merupakan website yang memungkinkan
user berinteraksi (Wahana Komputer, 2006).
2.8 Macromedia Dreamweaver
Adobe dreamweaver merupakan salah satu progam aplikasi yang digunakan
untuk membuat dan membangu sebuah website, baik secara grafis maupun dengan
menuliskan kode sumber secara langsung. Adobe dreamweaver memudahkan
pengembang website untuk mengelola halaman-halaman website dan aset aset
yang ada dalam website itu sendiri, baik gambar, animasi flash, video, suara dan
lain sebagainya. Selain itu adobe dreamweaver juga menyediakan fasilitas untuk
melakukan pemrograman Scripting seperti, Active Server Page (ASP), Java
Server Page (JSP), Hypertext Preprocessor (PHP), Java Scripts, Cold Fusion,
Cascading Style Sheet (CSS), Extensible Markup Languange (XML). (Wahana
Komputer, 2006).
23
2.9 Extended Markup Language (XML)
XML adalah merupakan suatu bahasa markup. Markup yaitu bahasa yang
berisikan kode-kode berupa tanda-tanda tertentu dengan aturan tertentu untuk
memformat dokumen teks dengan tag sendiri agar dapat dimengerti. Markup yang
digunakan untuk menyimpan data (tidak ada program) dan tidak tergantung
dengan tools tertentu (seperti editor, compiler, dsb).
Keuntungan XML
1. Ekstensibilitas : dapat ditukar/digabung dengan dokumen XML lain.
2. Memungkinkan pemrograman yang lebih baik:
3. maka dibuat suatu software pengolah XML.
4. Memisahkan data dan presentasi, yang akan direpresentasikan dalam XML
Pencarian data cepat karena XML merupakan data dalam format yang
terstruktur.
5. Plain Text dan platform independent. Untuk pertukaran data. (Efendy,
2010).
2.10 Cascading Style Sheet (CSS)
CSS merupakan salah satu bahasa pemograman web untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih teruktur dan
serangam. Sama halnya styles dalam aplikasi pengolahan kata seperti microsoft
wolrd yang dapat menagatur beberapa style, misalnya heading, subbab, body text,
footer, image, dan style lainya untuk dapat digunakan bersama-sama dalam
beberapa file.
24
CSS dapat mengendalikan ukuran gambar, warna body text, warna table,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar
paragraph, spasi antar teks, margin (kiri, kanan,atas dan bawah) dan parameter
lainya. (Poh, Kevin. 2011)
2.11 Guide Book
Guide Book adalah salah satu jenis animasi yang dibuat dari setumpuk kertas
menyerupai buku tebal, pada setiap halamannya digambarkan proses tentang
sesuatu yang nantinya proses tersebut terlihat bergerak atau beranimasi. Misalnya
kita mau membuat daun jatuh, maka pada setiap lembaran guide book di
gambarkan proses jatuhnya daun secara perlahan-lahan hingga pada akhirnya
sampai ke tanah, setelah gambar selesai, lalu dibalikkan (flip) dan akan terlihat
hasilnya. (Efendy, 2010)
25
BAB IIIMETODE PENELITIAN
3.1 Tempat dan Waktu Penelitian
Pembuatan Website Pariwisata berbasis Visual Animasi di Dinas
Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar ini
beralamat jln T. Bahtiar Polem. SH Kota Jantho, ini berlangsung terhitung mulai
dari bulan Maret 2012 sampai Juni 2012.
3.2 Alat dan Bahan yang digunakan
Alat dan bahan dalam Pembuatan Website Pariwisata berbasis Visual
Aniamsi di Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten
Aceh Besar, adalah:
a. Hardware
1. (satu) unit laptop Intel® Core 2 Duo 2,0 Ghz sebagai alat untuk bekerja.
2. Scanner sebagai media pengambilan data brosur
b. Software
1. Adobe Flash CS3 sebagai software utama dalam Pembuatan website
wisata Aceh Besar.
2. Macromedia Dreamweaver sebagai software untuk membuat Scripting
Language Cascading Style Sheet (CSS), Extended Markup Language
(XML)
26
3.3 Prosedur Kerja
Pembuatan Website Pariwisata berbasis Viasual Animasi di Dinas
Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar ini
melalui beberapa tahapan kerja yaitu:
3.3.1 Riset Lapangan
Riset lapangan dimaksudkan untuk memperoleh informasi secara langsung
dari Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh
Besar. Adapun teknik pengumpulan data yang digunakan adalah:
a. Pengamatan, yaitu pengumpulan data secara langsung pada Dinas
Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar. Data
yang diperoleh adalah yang menyangkut seputar data tempat-tempat
pariwisata yang ada di Kabupaten Aceh Besar.
b. Melakukan wawancara dengan staf Bidang Pariwisata pada Dinas
Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar, yaitu
Bapak Drs. Abdullah untuk lebih mengetahui secara rinci data yang
berhubungan dengan materi pembahasan. Hasil dari wawancara di lapangan
yaitu mendapatkan informasi tentang banyak Objek wisata yang belum
terespos ke publik, dalam wawancara ini Dinas Kebudayaan, Pariwisata,
Pemuda dan Olah Raga Kabupaten Aceh Besar membutuhkan website untuk
membantu publikasi tempat-tempat Pariwisata yang selama ini belum banyak
yang tahu.
27
3.3.2 Studi Pustaka
Data diperoleh melalui buku-buku literatur yang berhubungan dengan
masalah yang akan diteliti sebagai bahan referensi bagi penulis.
3.3.3 Perancangan Sistem
Merancang tampilan, halaman, struktur file, prosedur tampilan dan
perangkat lunak yang diperlukan untuk mendukung perancangan
3.3.4 Pembangunan dan Testing Sistem
Membangun perangkat lunak yang diperlukan untuk mendukung sistem dan
melakukan testing secara akurat. Melakukan instalasi dan testing terhadap
perangkat keras dan mengoperasikan perangkat lunak.
3.3.5 Operasi dan Perawatan
Mendukung operasi sistem informasi dan melakukan perubahan atau
tambahan fasilitas.
3.3.6 Evaluasi Sistem
Mengevaluasi sejauh mana sistem telah dibangun dan seberapa bagus sistem
telah dioperasikan.
28
3.4 Implementasi Website Pariwisata
Website ini memuat informasi mengenai objek Wisata yang ada di Aceh
Besar, yang terdiri :
a. Wisata Alam
Wisata alam yang ada dalam Website ini memuat informasi mengenai sepuluh
objek wisata yang belum terekspos ke publik seperti :
1. Cagar Alam Jantho
2. Taman Hutan Raya Pocut Meurah Intan
3. Pusat Pelatihan Gajah Saree
4. Krueng Jreu
5. Pucok Krueng
6. Air Terjun Kuta Malaka
7. Air Terjun Suhom
8. Waduk Keliling
9. Pantai Lhok Mata Ie
10. Pantai Lhok Me
Dari banyaknya objek wisata Aceh besar, penulis hanya memuat sepuluh
informasi mengenai objek wisata alam, dikarenakan ke sepuluh objek wisata
tersebut belum terpublikasi secara global, sehingga menurut penulis perlu untuk
mempublikasinya.
29
b. Wisata Sejarah
Aceh besar memiliki banyak wisata sejarah, dalam website wisata ini
penulis hanya mengangkat delapan objek wisata yang menurut penulis lebih
mengandung nilai sejarah tinggi dan pengaruh sejarah nya kuat dalam
pengembangan aceh besar. Adapun informasi mengenai delapan objek wisata
sejarah yang ada di aceh besar ini yaitu :
1. Makam Teungku Panglima Polem
2. Perpustakaan Kuno Tanoh Abee
3. Benteng Iskandar Muda
4. Benteng Inong Balee
5. Benteng Indra Patra
6. Makam Teungku Cik Di Tiro
7. Mesjit Tua Indra Puri
8. Museum Cut Nyak Dhien
30
3.5 Struktur Perancangan Website
Gambara 3. 1 Struktur Perancangan Website
1. Langkah pertama untuk memulai pembuatan website ini adalah dengan
melakukan pengumpulan data-data yang berkaitan dengan penulisan.
2. Setelah data-data sudah terkumpul, maka langkah selanjutnya mulai
membuat skenario untuk perancangan yang akan dibuat.
3. Setelah skenario tersusun, kemudian mulai membuat perancangan
sistem yang akan didesain.
4. Hasil dari perancangan sistem dilanjutkan dengan pembuatan flash
presentasi sesuai skenario yang telah di buat.
Pengumpulan Data danPembuatan Skenario
Rancangan Sistem
Pembuatan Website
Hasil
31
3.6 Perencanaan dan Perancangan
Dalam membangun sebuah website diperlukan sebuah persiapan,
perencanaan yang baik, tujuan pembuatan yang jelas dan percobaan yang
dilakukan secara berulang-ulang karena hal ini menyakut semua elemen yang
membentuk website. Sebelum membangun website, kita perlu melakukan
beberapa identifikasi awal, seperti:
1. Website apa yang akan dibuat.
2. Siapa saja yang akan mengunjungi website tersebut.
3. Apa yang ingin dicapai dalam pembuatan website tersebut.
Dengan menjawab serangkaian petenyaan diatas, maka akan semakin
memperjelas dan mempermudah dalam membangun website karena dari jawaban-
jawaban diatas sangat membantu mempermudah dalam membangun dan
mengembangkan website tersebut lebih lanjut. Berdasarkan website yang akan
dibuat, maka jawaban untuk pertanyaan-pertanyaan diatas adalah sebagai berikut :
1. Website yang akan dibuat adalah website wisata Aceh Besar berbasis
Visual Animasi yang dapat menghasilkan animasi dan digital grafik
dengan tampilan dinamis dan profesional, sehingga menghasilkan website
kompatibel dengan semua browser (Internet Explorer, Mozilla, Google
Chrome, Opera).
2. Pengunjung dari website tersebut adalah masyarakat luas yang ingin tahu
tentang informasi objek wisata yang ada di Aceh Besar.
32
3. Target yang ingin dicapai dari website tersebut adalah pengunjung
mendapatkan segala informasi mengenai tempat wisata yang ada di Aceh
Besar.
Untuk selanjutnya adalah membuat skema dari website tersebut. Cara yang
digunakan yaitu dengan membuat skema tampilan dan halaman. Adanya skema
tampilan dan halama tersebut sangat membantu dalam menggambarkan isi dari
setiap halaman website seperti dibawah ini:
1. Background
Background merupakan tampilan latar belakang halama, baik berupa warna,
gambar, dan musik. background website ini nantinya akan menampilkan
gambar objek wisata Aceh Besar disetiap halamanya.
2. Home
Home adalah halama awal di sebuah website. Bagian home ini nantinya akan
menampilkan background gambar objek wisata dan sebuah animasi text yang
bergerak dari kiri ketengah ditampilkan dengan efek visual zoom out.
3. About
Halaman ini berisikan latar belakang Aceh Besar. Halaman about ini nantinya
akan menampilkan text dan photo thumbnail yang muncul ketika kursor
mouse digerakkan kesisi kiri halaman about.
4. Objek Wisata
Objek wisata adalah halaman yang berisi list Photo tujuan wisata di seluruh
Aceh Besar. halaman ini nantinya akan menapilkan text, photo thumbnail yang
33
ketika kursor mouse di klik pada objek akan mehasilkan sebuah halama baru
yang menjelaskan tentang keterangan mengenai objek wisata yang dimaksud.
5. Gallery
Halaman ini berisikan gambar, video dan keterangan. Halaman ini nantinya
akan menapilkan text, photo thumbnail dan video thumbnail yang ketika
kursor mouse di klik pada objek tersebut maka akan merubah menjadi
tampilan gambar atau video penuh satu halaman.
6. Guide Book
Guide book adalah salah satu jenis animasi yang dibuat dari setumpuk kertas
menyerupai buku tebal, pada setiap halamannya digambarkan proses tentang
sesuatu yang nantinya proses tersebut terlihat bergerak atau beranimasi. pada
setiap halamannya ini akan disisipkan gambar-gambar objek wisata Aceh
Besar.
7. Map
Halaman ini akan menampilkan Peta Aceh Besar yang ketika kursor mouse di
klik pada objek wisata maka akan menampilkan Denah lokasi objek wisata
yang yang dimaksut, sehingga nantinya bagi pengunjung website ini dapat
mengetahui secara detail lokasi objek wisata yang ada di Aceh Besar.
8. Contact
Halaman ini akan menampilkan alamat email, fax, dan telephone, nantinya
bagi pengunjung website ini dapat mengirim komentar dan pesan bagi yang
butuh informasi lebih lanjut mengenai lokasi objek wisata yang ada di Aceh
34
Besar. Disini juga menampilkan link yang menerima jasa pemandu jalan ke
lokasi objek wisata yang ada Aceh Besar.
3.7 Jadwal Penelitian
No Kegiatan
2012
Maret April Mei Juni Juli
2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
1 Studi
Literatur
2 Analisa Data
3 Perancangan
Sistem
4 Implementasi
5 Evaluasi
6 Penulisan
Laporan
Gambara 3. 2 Jadwal Penelitiaan
35
BAB IVHASIL DAN PEMBAHASAN
4.1 Rancangan Website Pariwisata berbasis Visual Animasi di Dinas
Kebudayaan dan Pariwisata Aceh Besar
Perancangan Website Pariwisata berbasis Visual Animasi di Dinas Kebudayaan
dan Pariwisata Aceh Besar menggunakan tampilan atau test movie dengan
software Adobe Flash CS3. Rancangan website Visual Animasi full flash
membutuhkan beberapa tahapan dalam membuat halaman yang didalamnya
terdapat banyak animasi yang terhubung satu sama lain.
4.1.1 Mengatur body text, warna, ukuran border, dan margin mengunakan
Cascading Style Sheet (CSS)
Mengatur komponen web mengunakan Cascading Style Sheet (CSS) akan lebih
teruktur dan serangam, sehingga setiap isi halam menu lainya untuk dapat
digunakan bersama-sama dalam beberapa file dan style dimana semua halaman
website akan jadi lebih praktis dan ukuran file akan lebih kecil, sehingga load file
akan lebih cepat.
36
Gambar 4. 1 Mengatur Body Text, Ukuran Border, dan Margin
Pada gambar 4.1 Tampilan rancangan untuk mengendalikan beberapa komponen
dalam setiap halaman website, sehingga tampilan akan lebih teruktur.
4.1.2 Perancangan Menggunakan software Adobe Flash CS3 untuk
menghasilkan Format file Shock Wave Flash (SWF)
Tahapan perancangan ini untuk membuat Symbol Button, yaitu symbol untuk
membuat tombol yang bersifat diam ada juga symbol movie clip untuk digunakan
sebagai objek animasi dan graphic untuk digunakan kepada objek yang tidak
beranimasi, sehingga ditahapan ini akan menghasilkan Shock Wave Flash (SWF)
37
yang berguna untuk dipanggil mengunakan mengunakan Extended Markup
Language (XML) dengan cara
4.1.2.1 Perancangan Format file Shock Wave Flash (SWF) Menu
Gambar 4.2 Rancangan Menu Website Mengunakan Adobe Flash Cs3
Pada gambar 4.2 tampilan menu utama yang memiliki lima halama yang terdiri
dari halaman Home, About, Objek wisata, Gallery, Book, Contact. Halaman utama
ini memiliki tiga layer yang berjalan secara bersamaan, frame rate yang
digunakan sebesar 30 fps. Ukuran layar animasi yang digunakan sebesar 1200 x
600 pixels. Sedangkan untuk untuk mehubungkan setiap halaman mengunakan
Extended Markup Language (XML)
4.1.2.2 Rancangan Format file Shock Wave Flash (SWF) Slide Intro
Pembuatan animasi slinde intro di sebuah website full flash merupakan skenario
yang bertujuan untuk menghasilkan rancangan untuk slide pembuka dimana disaat
38
membuka website pertama kali akan terdapat text yang beranimasi, sehingga
menimbulkan kesesuaan dengan halaman Home.
Gambar 4.3 Tampilan Rancangan Slide Intro
Pada gambar 4.3 Tampilan rancangan slide Intro merupakan slide
pembuka pada menu utama dari website Wisata Aceh Besar ini. Slide tersebut
terdiri dari 11 layer yang mempunyai tugas yang berbeda. Pada slide ini terdapat
pemakaian frame rate sebesar 30 fps dan panjang timeline 580 frame, dengan
ukuran layar animasi 1200 x 600 pixels membuat tampilan aplikasi terlihat
memanjang. Pada layer 1, merubah text menjadi Create Motion Tween dengan
menganti rotate menjadi auto sehingga akan menghasilkan slide yang movieclip
terhadap background secara transparan yang nantinya akan menghasilkan text
yang bergerak secara zoom out. Tampilan text tersebut juga akan mengalami drop
shadow dan inner shadow secara terus sewaktu intro yang sedang berjalan.
39
4.1.2.3 Pancangan Format file Shock Wave Flash (SWF) Text
Gambar 4. 4 Tampilan Rancangan Shock Wave Flash (SWF) Text
Pada gambar 4. 4 tampilan slide ini akan menghasilkan Shock Wave Flash (SWF)
berupa layar kosong yang dikarenakan isi berupa text tersimpan dalam format file
Extended Markup Language (XML) yang nantinya dipanggil mengunakan
perintah identitas (ID) sehingga memiliki parameters external xml file = file
config.xml. File config.xml ini bertujuan untuk konfigurasi meng-upload dari
folder xml yang berisi text.. Sehingga website Pariwisata berbasis Visual Animasi
di Dinas Kebudayaan dan Pariwisata Aceh Besar bersifat dinamis, yang tujuannya
agar dapat di-update tanpa harus mengantikan file Adobe Flash (FLA) mentahnya.
Tampilan slide ini memiliki 3 layer yang yang terdiri dari template dan
actionsrips , frame rate yang digunakan sebesar 30 fps. Ukuran layar animasi
yang digunakan sebesar 1200 x 600 pixels.
40
4.1.2.4 Perancangan Format file Shock Wave Flash (SWF) Objek Wisata
Gambar 4.5 Tampilan Rancangan Shock Wave Flash (SWF) Objek Wisata
Pada gambar 4.5 tampilan rancangan ini mengunakan animasi symbol movie clip,
melalui menu Utama Objek Wisata selanjutnya membuat dua layer terdiri dari
layer carousel, movieclip dan layer action script, di dalam library gambar yang
menghasikan gerakan di mask, maka dengan mudah dapat menerapkan gerakan
rotasi melalui pilihan metion time untuk peputarannya. sehingga menghasilkan
SWF efek hidup pada gambar.
Gambar tersebut nantinya akan memutar kemana kursor mouse digerakkan baik
kiri maupun kanan. Dalam animasi ini terdapat dua gambar yang di dalam area
gambar tersebut tedapat animasi text yang menampilkan text Wisata Alam dan
text Wisata Sejarah.. Halaman ini akan memanggil parameters external xml file.
Didalam XML akan member perintah memanggil menu SWF yang berada dalam
41
satu forder. SWF yang di panggil untuk Halaman Objek Wisata adalah
“newsy.swf dan text.swf”
4.1.2.5 Perancangan Format file Shock Wave Flash (SWF) Newsy
Gambar 4. 6 Tampilan Rancangan Shock Wave Flash (SWF) Newsy
Gambar 4.6 Tampilan rancangan ini mengunakan tiga layer, include,
action script dan background . Layer include, di frame rate terdapat action script
yang memeritahkan add tween mengerakkan include "lmc_tween.as untuk import
text field style sheet ke import mx.transitions.tween dan import
mx.transitions.easing. pada library terdapat fonts Cascading Style Sheet (CSS)
untuk Mengatur komponen fonts website dan ukuran fonts tersebut, sehingga
akan menghasilkan SWF yang berupa gambar thumbnail yang menampilkan
animasi terang ketika kursor mouse di bawa diatas gambar thumbnail tersebut.
Tampilan rancangan ini akan memanggil parameters external xml file yang berada
di forder newsy1.xml.
42
4.1.2.6 Perancangan Format file Shock Wave Flash (SWF) Gallery
Gambar 4.7 Tampilan Rancangan Shock Wave Flash (SWF) Gallery
Pada gambar 4.7 ditunjukan tampilan rancangan Format file Shock Wave Flash
(SWF) Gallery , hanya ada tiga layer yang berjalan di dalamnya, full screen,
include dan , action script. Di setiap layer terdapat frame yang didalam leyer
memilikit action script sebagai peritah untuk mengatur isi dari halaman gallery.
Layer full screen merupakan tempat animasi membuat objek menjadi penuh satu
layar, dengan frame rate 12 fps sedangkan ukuran layar animasi 1200x 600 pixels.
Pada pada library terdapat fonts Cascading Style Sheet (CSS) untuk Mengatur
komponen gambar, fonts website dan ukuran fonts. Pada pada library juga
terdapat komponet gambar icon untuk dijadikan tombol button NextView dan
PrevView, sehingga dengan mengeklik gambar tersebut akan mengontrol gambar
objek wisata terus maju atau kembali kebelakang.
43
4.1.2.7 Perancangan Format file Shock Wave Flash (SWF) Book
Gambar 4. 8 Tampilan Rancangan Shock Wave Flash (SWF) Book
Pada gambar 4.8 tampilan di timeline hanya ada layer action script yang berjalan
di dalamnya, ini dikarenakan semua pembuatanya di atur dan di control
mengunakan coding yaitu action script. Animasi Guide Book yang menghasilkan
tampilan animasi klasik seperti layaknya buku dibuka secara manual, serta
halamannya dapat dibuka dengan meng-klik atau men-drag ujung halaman book
sampai terbuka halaman selanjutnya. Jika user memindah halaman book ini dapat
digunakan juga tombol keyboard kiri dan kanan. Tombol prev page, next page
memakai frame rate pada slide ini yaitu sebesar 30 fps, normalnya suatu slide
frame rate adalah 12 fps sehingga halaman katalog lebih cepat dibuka jika
menekan tombol prev page, next page bergerak dan user juga bisa menggunakan
keyboard untuk melanjutkan baik halaman sebelunya maupun sesudahnya.
44
Tombol zoom in, zoom out memiliki fungsi memperbesar memperkecil halaman
baik halaman sebelah kiri maupun halaman sebelah kanan, sehingga user dapat
memperbesar halaman guide book dengan meng-klik yang diinginkan dan jika
user ingin mengembalikan area halaman katalog tersebut user dapat menggunakan
tombol zoom auto sehingga halaman area halaman menjadi seperti semula. Tidak
hanya itu guide book juga bisa show all pege sehingga semua page terlihat di
halaman sejara berderitan.
Guide book Website Pariwisata berbasis Visual Animasi di Dinas Kebudayaan dan
Pariwisata Aceh Besar ini juga terdapat tombol Print Page dan download all page
bertujuan untuk mencetak atau medownload halaman guide book tersebut.
4.1.2.8 Perancangan Format file Shock Wave Flash (SWF) Map
Perancangan menu Map di Website Pariwisata berbasis Visual Animasi di Dinas
Kebudayaan dan Pariwisata Aceh Besar memiliki tiga layer yaitu, include, tombol
dan background. Layer include, merupakan layer yang nantinya menandai objek
yang akan di klik oleh kursor mouse.
Gambar 4. 9 Tampilan Rancangan Shock Wave Flash (SWF) Map
45
Layer tombol terdapat Symbol Button, yang memeritahkan supaya kursor mouse
berfunsi ketika di klik. Layer background dengan ukuran layar animasi 1200 x 600
pixels membuat tampilan aplikasi ini terlihat memanjang dan menutupi halaman
ketika di jalankan.
4.1.2.9 Perancangan Format file Shock Wave Flash (SWF) Contact
Gambar 4.10 Tampilan Rancangan Shock Wave Flash (SWF) Contact
Pada tampilan rancangan gambar 4.10 terdapat dua layer, yaitu layer pertama
adalah background berguna untuk meletakkan background button supaya bisa di
isi Extended Markup Language (XML) untuk menhidupkan tombol button send
dan button reset. Layer adalah layer action script. Dimana disini terdapat sript
yang mengarahkan perintah memanggil text area view supaya text yang berada
dalam XML dapat mengisi halaman contact. Frame yang cuma ada 1 (satu) ini
merupakan tempat animasi berjalan dengan perintah action script ,dengan frame
rate 12 fps sedangkan ukuran layar animasi 1200 x 600 pixels.
46
4.1.3 Membuat Dokumen Extended Markup Language (XML)
Membuat file Extended Markup Language (XML) yang kemudian dibaca oleh
flash ini menggunakan notepad sebagai tempat penulisan kode atau isi dari XML
yang kemudia di save dengan format.xml. XML berfungsi sebagai tempat menulis
text dan perintah memuat data ke flash.
4.1.3.1 Dokumen Extended Markup Language (XML) Menu
File XML Menu merupakan dokumen yang di buat di XML yang nantinya
dipanggil oleh action script untuk di tempatkan didalam Shock Wave Flash
(SWF) Menu. file XML Menu menjadi wadah untuk XML lain, seperti XML text,
XML Gallery, XML Book da XML Contact .
Gambar 4.11 Tampilan Rancangan Extended Markup Language (XML) Menu
47
4.1.3.2 Dokumen Extended Markup Language (XML) Text
File text merupakan dokumen yang di buat di XML yang nantinya dipanggil oleh
action script untuk di tempatkan didalam Shock Wave Flash (SWF) text.
Gambar 4. 12 Tampilan Rancangan Text yang Berformat Extended Markup
Language (XML)
Gambar 4.12 Tampilan rancangan ini menggunakan aturan-aturan standar dalam
pembuatan tag-tag format dokumen, notepad sebagai wadah untuk membuat file
XML untuk data text. Didalam file XML text terdapat perintah memanggil
dokumen configuration_text.xml. Dokumen configuration_text.xml yaitu dokumen
XML yang membuat tata letak dari text dalam file XML text menjadi teratur
ketika berada dalam Shock Wave Flash (SWF) text.
4.1.3.3 Dokumen Extended Markup Language (XML) Gallery
File Extended Markup Language (XML) gallery merupakan dokumen yang di
buat di XML yang akan dipanggil oleh action script untuk di tempatkan didalam
Shock Wave Flash (SWF) gallery. Didalam file XML gallery terdapat perintah
48
memanggil dokumen configuration gallery xml. Dokumen configuration_form
xml yaitu dokumen XML yang membuat tampilan menjadi penuh atau fullscreen,
disini juga mengatur tata letak dari time slide, color background button, dalam
file XML gallery menjadi teratur ketika berada dalam SWF gallery. File XML
gallery akan memanggil file gambar yang berada di forder lain menggunakan
perintah <item picsmall= "image_ gallery/1_. jpg" picbig= "image_
gallery/1.jpg"> yang nantinya dokumen XML gallery akan di ditampilkan di
SWF gallery. Dokumen XML gallery juga bisa disisipkan text kedalam XML
sehingga dapat langsung di tampilkan besama gambar.
Gambar 4.13 Tampilan Rancangan File Extended Markup Language (XML)
Gallery
49
4.1.3.4 Dokumen Extended Markup Language (XML) Book
Gambar 4.14 Rancangan File Extended Markup Language (XML) Untuk Book
Pada gambar 4.14 Tampilan rancangan untuk mengendalikan file XML book
merupakan dokumen yang di buat di XML yang akan dipanggil oleh action script
untuk di tempatkan didalam SWF Book. Didalam File XML book terdapat
perintah memanggil data text, gambar, Shock Wave Flash (SWF) yang berada
dalam forder pages. Forder pages merupakan tempat meletakan data gambar, text
dan SWF, forder ini harus berada satu forder dengan dokumen XML supaya di
saat pemanggilan script tidak mengalami eror atau terjadi halaman di SWF book
jadi kosong.
50
Gambar 4.15 Forder Pages
4.1.3.5 Dokumen Extended Markup Language (XML) Contact
Gambar 4.16 Perancangan File Extended Markup Language (XML) untuk
Contact
Pada gambar 4.16 tampilan rancangan file XML contact merupakan dokumen
yang di buat di XML yang di dalamnya terdapat file text yang akan dipanggil oleh
51
action script untuk di tempatkan didalam Shock Wave Flash (SWF) contact.
Didalam file XML contact terdapat perintah memanggil data
configuration_form.xml. Dokumen configuration_form.xml yaitu dokumen XML
yang membuat tataletak dari text dalam file XML contact menjadi teratur ketika
berada dalam SWF contact.
4.1.4 Memuat File Extended Markup Language (XML) ke Flash mengunakan
Action Script
Proses meintegrasikan file Extended Markup Language (XML) ke flash
menggunakan objek action script sehingga website ini nantinya akan lebih
fleksibel dan kaya akan fitur. Program yang dibuat me-load data XML, sehingga
program nantinya tidak hanya berjalan statis saja, akan tetapi lebih dinamis
dengan isi yang dapat diperbaharui (up date) tanpa membuka file FLA.
4.2 Masalah dan Solusi dalam perancangan website Pariwisata berbasis
Visual Animasi di Dinas Kebudayaan dan Pariwisata Aceh Besar
Dalam Pembuatan katalog multimedia PT. Dunia Barusa kota Banda Aceh
ini terdapat beberapa masalah yaitu:
1. Ketika Menggunakan XML dengan Flash: Terkadang saat membuat
aplikasi Flash, kita perlu menyediakan beberapa pengguna fleksibilitas
untuk menyesuaikan Widget Flash tanpa mengacaukan dengan
ActionScript itu sendiri, sehingga kita mengekspos semua properti
disesuaikan tersebut melalui XML untuk memastikan pengguna dapat
52
mengubah parameter masukan, sementara menempel struktur data
standar.
2. Pada saat membuat animasi, apabila animasi dikehendaki berhenti
pada saat berada di tengah, maka harus dimasukkan script pada frame
keberapa animasi yang diinginkan itu berhenti dan script yang digunakan
adalah stop( ).
3. Animasi yang dihasilkan akam menbuat website full flash menjadi
menjadi berat dan mengalami koneksi yang sedikit lambat, maka dengan
membuat forder yang terpisah sehingga dan dengan funsi function akan
meringankan dalam mejalankan website full flash
53
BAB VPENUTUP
5.1 Simpulan
Berdasarkan hasil dan pembahasan pada Pembuatan Website Pariwisata
berbasis Visual Animasi di Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga
Kabupaten Aceh Besar ini, maka dapat di ambil beberapa kesimpulan diantaranya:
1. Website Pariwisata berbasis Visual Animasi di Dinas Kebudayaan, Pariwisata,
Pemuda dan Olah Raga Kabupaten Aceh dirancang dengan menggunakan
software Adobe Flash CS3 sehingga bersifat dinamis. Website Pariwisata ini
berisi tentang objek wisata yang berada di Aceh Besar.
2. Pembuatan Website Pariwisata berbasis Visual Animasi di Dinas Kebudayaan,
Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar ini dilalui beberapa
tahapan yaitu perancangan dan tampilan atau test movie.
5.2 Saran
Desain dan Website Pariwisata berbasis Visual Animasi di Dinas
Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar ini masih
belum sempurna disebabkan perlunya pengembangan atau update aplikasi
sehingga diharapkan dapat dikembangkan dengan lebih baik lagi oleh para user
yang bertujuan untuk mengikuti Zamannya Teknologi dan menghasilkan manfaat
yang lebih besar daripada aplikasi yang sudah dirancang.
54
DAFTAR PUSTAKA
Chandra, 2007. Flash CS3 Untuk Orang Awam. Palembang : Maxikom
Candra. 2012. Evolusi Javascript. [Online] Tersedia:www.web.id/2012/03/17/evolusi-javascript/. [30 Mei 2012]
Dwiyanto, 2006. Mempelajari Animasi Flash. Bandung : Media Grafika
Efendy, 2010. Adobe Flash + Xml = Rich Multimedia Application. Yogyakarta :Andi
Lukman, Ridwan, 2006. Mengenal ActionScript. Jakarta : PT Elex Media .Kompuindo
Poh, Kevin. 2011. Belajar Bikin Web Makin Asyik Dengan CSS!. [Online]Tersedia: www.cssasyik.com/post/14652819565/mengenal-css-specificity.[17 Mei 2012]
Rachma, Rara .2000 . Tinjauan Multimedia Dalam Pembelajaran AnimasiDiversiti. [online] Tersedia : http://ceritarara.wordpress.com/tinjauan-multimedia-dalam-pembelajaran/#more-25. [1 Maret 2012]
Suyanto, M, 2005. Multimedia Alat Untuk Meningkatkan KeunggulanBersaing. Yogyakarta : Andi
Wahana Komputer, 2006. Membuat Website Interaktif dengan MacromediaDreamweaver 8. Yogyakarta : Andi
55
XML Menu
<?xml version="1.0" ?>
<menuPrimary id="1" url_config="xml/configuration_menu.xml">
<item id="5557" label="HOME" background="background/9.jpg"template="intro.swf" height="0" container="center"/>
<item id="7" label="ABOUT" background="background/2.jpg" template="text"xml="xml/text1.xml"/>
<item id="1002" label="OBJECK WISATA" background="background/5.jpg"template="carousel" xml="xml/team_one.xml"><item id="1637" visible="false" label="Team 1"background="background/5.jpg" template="newsy" xml="xml/newsy1.xml"/><item id="1638" visible="false" label="Team 2"background="background/5.jpg" template="list" xml="xml/team_two.xml">
<item id="117" visible="false" label="Management 1"background="background/3.jpg" template="text" xml="xml/one_team_1.xml"/><item id="118" visible="false" label="Management 2"background="background/3.jpg" template="text" xml="xml/one_team_2.xml"/><item id="119" visible="false" label="Management 3"background="background/3.jpg" template="text" xml="xml/one_team_3.xml" /><item id="120" visible="false" label="Management 4"background="background/3.jpg" template="text" xml="xml/one_team_4.xml"/><item id="121" visible="false" label="Management 5"background="background/3.jpg" template="text" xml="xml/one_team_5.xml"/><item id="122" visible="false" label="Management 6"background="background/3.jpg" template="text" xml="xml/one_team_6.xml"/><item id="123" visible="false" label="Management 7"background="background/3.jpg" template="text" xml="xml/one_team_7.xml"/><item id="124" visible="false" label="Management 8"background="background/3.jpg" template="text" xml="xml/one_team_8.xml"/>
</item></item>
<item id="10" label="GALLERY"><item id="12" label="IMAGE WISATA ALAM" background=""template="gallery" xml="xml/gallery1.xml"/><item id="14" label="IMAGE WISATA SEJARAH" background=""template="gallery" xml="xml/gallery3.xml"/><item id="13" label="VIDEO WISATA ALAM" background=""template="gallery" xml="xml/gallery2.xml"/>
56
<item id="1412" label="VIDEO WISATA SEJARAH" background=""template="gallery" xml="xml/gallery_single2.xml"/></item>
<item id="45" label="BOOK" background="background/book.png"template="book" xml="xml/book.xml"/>
<item id="46" label="CONTACT" background="background/6.jpg"template="form" xml="xml/form.xml"/>
</menuPrimary>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Configuration Menu XML
<?xml version="1.0" ?>
<data backgroundColorMenuItem="0x000000"
alphaBackgroundItem="50"
paddingItemH="28"
heightItem="60"
align="L"
textColorOut_Item="0xFFFFFF"
textColorRol_Item="0xFFFFFF"
rectangleRol="0x00CCFF"
rectangleAlpha="100"
spaceItem="10"
backgroundColorMenuSubitem="0x000000"
alphaBackgroundSubItem="50"
textColorOut_Subitem="0xFFFFFF"
textColorOver_Subitem="0x00CCFF"
rectangleRolSubitem="0x000000"
rectangleAlphaSubitem="0"
spaceSubitem="0"
57
paddingUpSubitem="10"
paddingDownSubitem="10">
</data>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Configuration_Text XML
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<BACKGROUND_COLOR>0x000000,0</BACKGROUND_COLOR>
<COLOR_SCROLL>0x00CCFF</COLOR_SCROLL>
<COLOR_SCROLL_BACKGROUND>0xFFFFFF</COLOR_SCROLL_BA
CKGROUND>
<PADDING_BACKGROUND_HORIZONTAL>40</PADDING_BACKGR
OUND_HORIZONTAL>
<PADDING_BACKGROUND_VERTICAL>40</PADDING_BACKGROU
ND_VERTICAL>
<PADDING_SCROLL>20</PADDING_SCROLL>
</configuration>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
58
Configuration Gallery XML
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<!-- fullscreen for move -->
<FULL_SCREEN_FOR_MOVE>true</FULL_SCREEN_FOR_MOVE>
<!-- thumb width -->
<THUMB_WIDTH>80</THUMB_WIDTH>
<!-- thumb height -->
<THUMB_HEIGHT>60</THUMB_HEIGHT>
<!-- time slide [ms] ( 1s=1000ms ) -->
<TIMESLIDE>1000</TIMESLIDE>
<!-- BACKGROUND_THUMBS -->
<BACKGROUND_THUMBS>0x000000,0</BACKGROUND_THUMBS>
<!-- COLOR_FRAME -->
<COLOR_FRAME>0x00CCFF,100</COLOR_FRAME>
<!-- alpha thumb -->
<ALPHA_OVER>100</ALPHA_OVER>
<ALPHA_OUT>70</ALPHA_OUT>
<!-- preloader image -->
<COLOR_PRELOADER_CURRENT>0xFFFFFF,100</COLOR_PRELOA
DER_CURRENT>
<COLOR_BCG_PRELOADER>0x00CCFF,100</COLOR_BCG_PRELOADER
<!-- color button close descriptions -->
<COLOR_BUTTON_CLOSE_DESC>0xFFFFFF,100</COLOR_BUTTON
_CLOSE_DESC>
<!-- label button desc -->
<LABEL_BTN_DESC>MORE INFO...</LABEL_BTN_DESC>
<!-- color background descriptions -->
<COLOR_BCG_DESC>0X000000,80</COLOR_BCG_DESC>
<!-- color slide circle -->
59
<COLOR_SLIDE_CIRCLE>0xFFFFFF,70</COLOR_SLIDE_CIRCLE>
<!-- color background big image -->
<COLOR_BCG_BIG_IMAGE>0XFF0000,0</COLOR_BCG_BIG_IMAGE
<!-- color background thumb -->
<COLOR_BCG_THUMB>0xFFFFFF,0</COLOR_BCG_THUMB>
<!-- color background button -->
<COLOR_BACKGROUND_BUTTON>0X000000,70</COLOR_BACKGR
OUND_BUTTON><!-- color symbol button -->
<COLOR_SYMBOL_BUTTON>0xFFFFFF,100</COLOR_SYMBOL_BUT
TON><!-- URL_CONFIG_FLV -->
<URL_CONFIG_FLV>xml/configuration_flv_gallery.xml</URL_CONFIG
_FLV><!-- time intro big image-->
<TIME_INTRO>1000</TIME_INTRO><!-- time exit big image-->
<TIME_EXIT>100</TIME_EXIT>
<!-- URL FOR_PLAYER_FLV -->
<URL_PLAYER_FLV>player_flv.swf</URL_PLAYER_FLV>
<!-- color background player move ( full area ) -->
<COLOR_BCG_PLAYER>0Xff0000,100</COLOR_BCG_PLAYER>
<!-- color over thumb -->
<COLOR_ROL>0x6D706D</COLOR_ROL>
<!-- color out thumb-->
<COLOR_OUT>0x404240</COLOR_OUT>
<!-- rotate thumb onRollOver -->
<ROTATE_THUMB>true</ROTATE_THUMB><!-- COLUMNS LENGTH
( if value empty its automatic columns length ) -->
<COLUMNS_LENGTH></COLUMNS_LENGTH>
<!-- ROWS LENGTH ( if value empty its automatic rows length ) -->
<ROWS_LENGTH>1</ROWS_LENGTH><!-- POSITION NETWORK X
nad Y ( if value its empty ==> center align )-->
<POSITION_NETWORK_X></POSITION_NETWORK_X>
60
<POSITION_NETWORK_Y></POSITION_NETWORK_Y>
<!-- POSITION X AND Y BIG IMAGE / VIDEO -->
<POSITION_IMAGE_X></POSITION_IMAGE_X>
<POSITION_IMAGE_Y></POSITION_IMAGE_Y>
<!-- MARGIN VERTICAL AND HORIZONTAL BIG IMAGE -->
<MARGIN_HORIZONTAL_BIG_IMAGE>0</MARGIN_HORIZONTAL_BI
G_IMAGE><MARGIN_VERTICAL_BIG_IMAGE>0</MARGIN_VERTICAL_BI
G_IMAGE><!-- MARGIN VERTICAL AND HORIZONTAL THUMB -->
<MARGIN_HORIZONTAL_THUMB>200</MARGIN_HORIZONTAL_THUMB>
<MARGIN_VERTICAL_THUMB>200</MARGIN_VERTICAL_THUMB>
<!-- TITLE_COLOR_THUMB -->
<TITLE_COLOR_THUMB>0xFFFFFF</TITLE_COLOR_THUMB>
<!-- SPACE X AND Y THUMB -->
<SPACE_X_THUMB>5</SPACE_X_THUMB>
<SPACE_Y_THUMB>5</SPACE_Y_THUMB>
<!-- smoothing all image -->
<SMOOTHING>true</SMOOTHING>
</configuration>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Configuration Newsy XML
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<!-- background color and alpha -->
<BACKGROUND_COLOR_NEWSY>0x000000,0</BACKGROUND_COL
OR_NEWSY> <!-- background scroll -->
61
<BACKGROUND_SCROLL_COLOR>0xFFFFFF</BACKGROUND_SCR
OLL_COLOR>
<SCROLL_COLOR>0x00CCFF</SCROLL_COLOR>
<!-- color separator list -->
<COLOR_SEP>0xFFFFFF</COLOR_SEP>
</configuration>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Configuration Contact XML
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<!-- BACKGROUND FORM -->
<BACKGROUND_COLOR>0x000000,0</BACKGROUND_COLOR>
<!-- color border error -->
<COLOR_BORDER_ERROR>0Xff0000,0</COLOR_BORDER_ERROR>
<!-- color border select -->
<COLOR_BORDER_SELECT>0XA0C02A,0</COLOR_BORDER_SELECT>
<!-- background input text -->
<BACKGROUND_INPUT_TEXT>0x999B99,100</BACKGROUND_INPUT_TE
XT>
<!-- background color button send and reset -->
<BUTTON_BCG_COLOR>0x373A36,0</BUTTON_BCG_COLOR>
62
<!-- pathway php file -->
<URLSEND>php/url_send.php</URLSEND>
<!-- alert send==true -->
<SENDTRUE>sendTrue</SENDTRUE>
<!-- alert send = false -->
<SENDFALSE>sendFalse</SENDFALSE>
<!-- alert send==progress -->
<SENDPROGRESS>sendProgress</SENDPROGRESS>
<!-- button send -->
<BUTTONSEND>send</BUTTONSEND>
<!-- button reset -->
<BUTTONRESET>reset</BUTTONRESET>
<!-- space y row -->
<SPACEY>14</SPACEY>
<!-- align button R OR L -->
<ALIGNBUTTON>L</ALIGNBUTTON>
<!-- title color -->
<TITLECOLOR>0xFFFFFF</TITLECOLOR>
<!-- input color -->
<INPUTCOLOR>0xFFFFFF</INPUTCOLOR>
<!-- input background -->
63
<INPUTBACKGRONDCOLOR></INPUTBACKGRONDCOLOR>
<!-- border color input -->
<BORDERCOLOR>0xFFFFFF</BORDERCOLOR>
<!-- error color -->
<ERRORBORDERCOLOR>0xFF0000,0</ERRORBORDERCOLOR>
<!-- alert color -->
<ALERTCOLOR>0xFFFFFF</ALERTCOLOR>
<!-- button text color -->
<BUTTONTEXTCOLOR>0xFFFFFF</BUTTONTEXTCOLOR>
<!-- color background button -->
<BUTTONBACKGROUNDCOLOR></BUTTONBACKGROUNDCOLOR>
<!-- position x -->
<POSITION_X>265</POSITION_X>
<!-- position y -->
<POSITION_Y>75</POSITION_Y>
<!-- your e-mail -->
<SENDTO>[email protected]</SENDTO>
<!-- headline e-mail -->
<HEADLINE>Hello !</HEADLINE>
</configuration>
64
ActionScript Menu
import submenu_v2.mvcsubmenu.SubMenu;
import submenu_v2.Configuration
///////////////////////// Jalur Untuk File XML ///////////////////////////////////////////////////////////
var date_menu:String="xml/menuPrimary.xml"
/////////////////////////////Memuat Menu/////////////////////////////////////////////////////////////
function ini(xml_:XML,config_,item_,subitem_) {
//trace("init = "+xml_)
var attrib=config_.firstChild.attributes
var array_=XML_.getArrayObject(xml_.firstChild);
var mc:MovieClip = this.createEmptyMovieClip("mc_submenu", 1);
mc._x = 0;
mc._y = 0;
var submenu:SubMenu = new SubMenu(mc);
model = submenu.__model;
model.__xml=xml_
model.width=Stage.width
model.__backgroundColorMenuItem=attrib.backgroundColorMenuItem
model.__alphaBackgroundItem=Number(attrib.alphaBackgroundItem)
model.__paddingItemH=Number(attrib.paddingItemH)
model.__heightItem=Number(attrib.heightItem)
model.__align=attrib.align
65
model.__textColorOut_Item=attrib.textColorOut_Item
model.__textColorRol_Item=attrib.textColorRol_Item
model.__rectangleRol=attrib.rectangleRol
model.__rectangleAlpha=attrib.rectangleAlpha
model.__spaceItem=Number(attrib.spaceItem)
model.__backgroundColorMenuSubitem=attrib.backgroundColorMenuSubitem
model.__alphaBackgroundSubItem=Number(attrib.alphaBackgroundSubtem)
model.__textColorOut_Subitem=attrib.textColorOut_Subitem rollout
model.__textColorOver_Subitem=attrib.textColorOver_Subitem font rollover
model.__rectangleRolSubitem=Number(attrib.rectangleRolSubitem)
model.__rectangleAlphaSubitem=Number(attrib.rectangleAlphaSubitem)
model.__spaceSubitem=Number(attrib.spaceSubitem)
model.__paddingUpSubitem=Number(attrib.paddingUpSubitem)
model.__paddingDownSubitem=Number(attrib.paddingDownSubitem)
addEventListener("onPressRow", this);
var item = (item_!=undefined) ? item_ : _level0.item;
var subitem = (subitem_!=undefined) ? subitem_ : _level0.subitem;
model.__currentItem = item;
model.__currentSubItem = (subitem != "") ? item+","+subitem : undefined;
model.__menuItem = array_;
//if(_root==this){
model.Start()
//}
return model;
}
66
/////////////////Memanggil onPressRow///////////////////////////////////////////////////////
function onPressRow(obj) {
var mc = obj.target;
var selectedItem = mc.selectedItem;
var label = selectedItem.label;
}
////////////////////////Memuat Data Untuk File XML///////////////////////////////////////////////
function loadXML(){
dane = new XML();
dane.ignoreWhite = true;
dane.onLoad = function() {
var url=this.firstChild.attributes.url_config
loadConfig(url)
};
dane.load(date_menu);
}
///////////////////////////Memuat Configuration Untuk Menu//////////////////////////
function loadConfig(url_) {
date_config = new XML();
date_config.ignoreWhite = true;
date_config.onLoad = function() {
ini(dane,this);
};
67
date_config.load(url_);
}
if(_root==this){
loadXML()
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ActionScript Text
import TextField.StyleSheet;
import templateLoader.mvctemplate.LoaderModel
var loader_mdel:LoaderModel=LoaderModel.getInstance()
function onResize(){
var model_loader=LoaderModel.getInstance()
var w=model_loader.widthContent
var h=model_loader.heightContent
mcArea.width=850
mcArea.height=250
containerText._x=-20//w-(mcArea.width+mcArea.spaceBackground*2)
containerText._y=0//(h/2)-(mcArea.height/2+mcArea.spaceBackground*1)
mcArea.text=mcArea.text
}
68
//////////Memanggil onExitStart////////////////////////////////////////////////////
function onExitStart(){
}
//////////////Memanggil onIntroEnd/////////////////////////////////////////////////
function onIntroEnd(){
}
/////////////Text/////////////////////////////////////////////////////////////////////////////
function ini(date_:XML,config_:XML) {
config=config_
if(_root==this){
style_=date_.firstChild.attributes.css
my_styleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
if (success) {
var
ref=create(date_.firstChild.lastChild.firstChild.nodeValue,this);
}
};
my_styleSheet.load("css/global_styles.css");
}else{
create(date_.firstChild.lastChild.firstChild.nodeValue,this);
}
addTitle(date_)
}
/////////Menambah Judul /////////////////////////////////////////////////////////////////
function addTitle(date_,style_){
if(_root!=this){
69
containerText.title.styleSheet=LoaderModel.getInstance().getCss()
}else{
containerText.title.styleSheet=style_
}
containerText.title.embedFonts=true
containerText.title.htmlText=date_.firstChild.firstChild.firstChild.nodeValue
}
/////////Mendapatkan Text/////////////////////////////////////////////////////////////////
function getinstance(){
return containerText.attachMovie("_text", "_text", 2);
}
//////////////Memuat text///////////////////////////////////////////////////////////
function create(txt_:String,style_:StyleSheet) {
var global_css=LoaderModel.getInstance().getCss()
mcArea=getinstance()
mcArea.t.autoSize=false
mcArea.spaceBackground=Number(getAttrib("PADDING_BACKGROUND
_HORIZONTAL"))
mcArea.spaceBackgroundVertical=Number(getAttrib("PADDING_BACKG
ROUND_VERTICAL"))
mcArea.styleSheet = (_root==this) ? style_ : global_css
mcArea.background = false;
mcArea.backgroundColor = 0x000000;
/////////////////////Ruang scroll
mcArea.spaceXScroll=Number(getAttrib("PADDING_SCROLL"))
////////////////////Warna scrolll
if(getAttrib("COLOR_SCROLL").length){
70
mcArea.colorScroll=getAttrib("COLOR_SCROLL")
}
///////////////////Warna Scroll Untuk Background
if(getAttrib("COLOR_SCROLL_BACKGROUND").length){
mcArea.colorScrollBackground=getAttrib("COLOR_SCROLL_BACKGRO
UND")
}
////////////////////Area Warna Background
var colorBcg=getAttrib("BACKGROUND_COLOR")
mcArea.setColorBcg(colorBcg.split(",")[0],colorBcg.split(",")[1])
mcArea.setSize(800,420);
mcArea.border = false
mcArea.borderColor = 0xCCCCCC;
mcArea.__speedScroll = 3;
mcArea.text = txt_;
return mcArea;
}
function getAttrib(name_:String){
for(var i=0;i<config.firstChild.childNodes.length;i++){
var node:XMLNode=config.firstChild.childNodes[i]
if(name_==node.nodeName){
return node.firstChild.nodeValue
}
}
}
///////////////Memuat XML ///////////////////////////////////////////////////////////
function loadXML() {
date = new XML();
date.ignoreWhite = true;
71
date.onLoad = function() {
loadConfig()
};
var url = (_level0.url_date.length) ? _level0.url_date : "xml/text1.xml";
date.load(url);
}
//////////Memuat Configuration XML///////////////////////////////////////////////////////////////////
function loadConfig(){
config=new XML()
config.ignoreWhite=true
config.onLoad=function(){
var ref=ini(date,config);
}
config.load(date.firstChild.attributes.url_config)
}
///////////Template Text (SWF )//////////////////////////////////////////////////
if (_root == this) {
loadXML();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
\
ActionScript Gallery
import templateGallery.mvcgallery.*;
import templateGallery.Configuration;
import templateLoader.mvctemplate.LoaderModel;
import TextField.StyleSheet;
72
//////////////// Perintah Untuk Memanggil Onresize - Optional (Position For Site
Template XML)
function onResize() {
var model_loader = LoaderModel.getInstance();
var w = model_loader.widthContent
var h = model_loader.heightContent;
m.width = (w) ? w : Stage.width;
m.height = (h) ? h : Stage.height;
}
///////// Link Standar Untuk File XML ////////////////////////////////////////////////////////////
var default_date:String = "xml/gallery2.xml";
//////////Memuat XML (Jika Tidak Memuat SWF)//////////////////////////////
if (_root == this) {
Stage.addListener(this);
var url = (_level0.url_date.length) ? _level0.url_date : default_date
loadDate(url);
}
/////////// Kejadian onExitStart /////////////////////////////////
function onExitStart(){
m.__target.__desc._visible=false
m.Stop()
}
////////////Gallery Pertama//////////////////////////////////////////////////////////////
function ini(xml_:XML, config_:XML) {
Configuration.setXml(config_);
73
if(_root==this){
__styleSheet = new StyleSheet();
__styleSheet.onLoad = function(succes) {
if (succes) {
ini2(xml_, config_, this);
}
};
__styleSheet.load("css/global_styles.css");
}else{
var _css=LoaderModel.getInstance().getCss()
ini2(xml_,config_,_css)
}
}
/////////////Memanggil Gallery/////////////////////////////////////////////////////////
function getModel():GalleryModel{
return m;
}
/////////////Gallery Kedua /////////////////////////////////////////////////////////
function ini2(xml_:XML, config_:XML, css_:StyleSheet) {
Configuration.CSS_STYLE = css_;
first_ = xml_.firstChild;
mc = this.createEmptyMovieClip("mc_container", 100);
mc._x = 0;
mc._y = 0
var gallery:Gallery = new Gallery(mc);
m = gallery.__model;
var array = XML_.getArrayObject(first_);
array.unshift("");
74
this.onEnterFrame=function(){
if(m.__configurationFLV.loaded){
m.setData(array);
m.loadThumb(Number(PREFIX_IMAGE));
if(array.length==2){
m.loadImage(1)
}else if(PREFIX_IMAGE!=undefined){
m.loadImage(Number(PREFIX_IMAGE))
}else{
m.loadImage(1)
}
onResize();
delete this.onEnterFrame
}
}
}
//////////Memuat XML Configuration/////////////////////////////////////////////////////////////
function loadConfig(url_) {
var url = url_;
Configuration.load(url);
this.onEnterFrame = function() {
if (Configuration.loaded) {
delete this.onEnterFrame;
ini(date_form, Configuration.__data);
}
};
}
//////////////Memuat XML/////////////////////////////////////////////////////////////////
75
function loadDate(url_) {
date_form = new XML();
date_form.ignoreWhite = true;
date_form.onLoad = function() {
loadConfig(this.firstChild.attributes.url_config);
};
date_form.load(url_);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ActionScript Book
#include "lmc_tween.as"
import templateBook.mvctemplate.Book
import templateBook.mvctemplate.BookModel
import templateBook.Configuration
import flash.geom.Rectangle;
import TextField.StyleSheet;
import templateLoader.mvctemplate.LoaderModel
import mx.transitions.Tween;
Stage.align="TL"
Stage.scaleMode="noScale"
///optional if file its .exe
//fscommand("fullscreen", true);
////////////////////Jalur Untuk File XML
var xmlFile:String=(_level0.book_url_date.length) ? _level0.book_url_date :
"xml/book.xml"
var __xml:XML ////object XML with date
76
/////////////////Menginisialisasi Book////////////////////////////////////////////////
function ini(xml_:XML,config_:XML){
__xml=xml_
Configuration.setXml(config_)
containerBook = this.createEmptyMovieClip("containerBookContainer", 1);
containerBook._x = 0
containerBook._y = 0
//////////////////////////Membuat Mask Jikaukuran Layar Tidak Penuh
if(Configuration.STAGE_WIDTH!="Stage.width"&&Configuration.STAGE_HEI
GHT!="Stage.height"){
maskBook=this.createEmptyMovieClip("maskBook",2)
maskBook._visible=false
Drawing.rectangle(maskBook,0,0,100,100,["0xFF0000",100])
containerBook.setMask(maskBook)
}
//////////////////////////Memuat book
book = new Book(containerBook);
model=book.__model
var lm:LoaderModel=LoaderModel.getInstance()
model.__footerHeightUp = (lm.__footerHeightUp==undefined) ? 0 :
lm.__footerHeightUp
model.__footerHeightHide = (lm.__footerHeightHide==undefined) ? 0 :
lm.__footerHeightHide
model.loader_model=loader_model
model.setStyleCss(my_styleSheet)
model.setDate(xml_)
model.addEventListener("onLoadBackground",this)
model.addEventListener("onResize",this)
77
model.onResize()
model.setBackground(Configuration.BACKGROUND_BOOK) }
/////////////////////////////////Memanggil onResize
function onResize(){
/// if(Stage["displayState"] == "fullScreen"){
//containerBook.setMask(null)
/// }else{
//containerBook.setMask(maskBook)
// maskBook._width=Configuration.STAGE_WIDTH
//maskBook._height=Configuration.STAGE_HEIGHT
/// }
}
/////////////////Memuat Page /////////////////////////////////////////////////////
function onLoadBackground(){
model.shovBook()
}
////////////Memuat Configuration Untuk Book///////////////////////////////////////////////////
function loadConfig(url_) {
var url = url_;
Configuration.load(url);
this.onEnterFrame = function() {
if (Configuration.loaded) {
delete this.onEnterFrame;
Configuration.setXml(Configuration.__data)
loadCssStyle(Configuration.STYLE_SHEET)
}
};
}
78
//////////////Memuat CssStyle///////////////////////////////////////////////////////////////////////
function loadCssStyle(url_:String){
my_styleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
if (success) {
ini(date_form,Configuration.__data)
}
};
my_styleSheet.load(url_);
}
///////////////Memuat Untuk XML////////////////////////////////////////////////////////
function loadXML(xmlFile_) {
date_form = new XML();
date_form.ignoreWhite = true;
date_form.onLoad = function() {
loadConfig(this.firstChild.attributes.url_config);
};
date_form.load(xmlFile_)
}
////////////////start load XML//////////////////////////////////////
if(_root==this){
var url = (_level0.url_date.length) ? _level0.url_date : xmlFile;
loadXML(url)
}
///////////onUpload - removeBook//////////////////////////////////////////////////////////
function onUnload(){
model.dispoze()
}
79
var loader_model:LoaderModel=LoaderModel.getInstance()
loader_model.__target.__footer.onRollOutFooter()
loader_model.addEventListener("onShowFooter",this)
loader_model.addEventListener("onHideFooter",this)
function onShowFooter(){
var tools=model.__container.__tools
tweenTools.stop()
tweenTools= new Tween(tools, "_alpha",
mx.transitions.easing.Elastic.easeOut,tools._alpha, 0, 1, true);
tweenTools.onMotionFinished = function() {
tools._visible=false
};
}
function onHideFooter(){
var tools=model.__container.__tools
tools._visible=true
tweenTools.stop()
tweenTools= new Tween(tools, "_alpha",
mx.transitions.easing.Elastic.easeOut,tools._alpha,100,2, true);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ActionScript Contact
import template_form.mvctemplate.*;
import template_form.mvc.*;
import template_form.*;
import TextField.StyleSheet;
80
import templateLoader.mvctemplate.LoaderModel
////////////////Membuat Perintah Function Onresize - Optional (position for Site
Template XML)
function onResize(){
var model_loader=LoaderModel.getInstance()
var w=model_loader.widthContent
var h=model_loader.heightContent
mcBackground._x=0
mcBackground._y=0
}
function onExitStart(){
//mcBackground.desc.text=""
}
/////////////Memuat configuration untuk Contact ////////////////////////////////////
function loadConfig(url_) {
var url = url_;
Configuration.load(url);
this.onEnterFrame = function() {
if (Configuration.loaded) {
delete this.onEnterFrame;
ini(date_form,Configuration.__data)
}
};
}
81
////////////Memuat XML Untuk Contact /////////////////////////////////////////////////
function loadXML(url_) {
date_form = new XML();
date_form.ignoreWhite = true;
date_form.onLoad = function() {
loadConfig(this.firstChild.attributes.url_config);
};
var url = (_level0.url_date.length) ? _level0.url_date : url_
date_form.load(url);
}
/////////////////Merubah Warna Untuk Background////////////////////////////////////////////
function change_color_bcg(){
NewColor.setColor(mcBackground.background,Configuration.BACKGRO
UND_COLOR.split(",")[0])
mcBackground.background._alpha=Configuration.BACKGROUND_COL
OR.split(",")[1]
}
////////////Memulai Form/////////////////////////////////////////////////////
function ini(date_,config_:XML) {
date_=date_
////////////////////////////Menambahkan Configuration
Configuration.setXml(config_)
////Rubah Color
change_color_bcg()
//// Menambahkan Desc
create_desc(date_.firstChild.lastChild)
82
///// Menambahkan Title
addTitle(date_.firstChild.childNodes[1])
///////View
mc= mcBackground.createEmptyMovieClip("mcContainerForm", 1);
mc._x = Configuration.POSITION_X;
mc._y = Configuration.POSITION_Y;
var form:Form = new Form(mc);
onResize()
//////////////////Variables Untuk XML
form.__model.loader_model=LoaderModel.getInstance()
form.__model.__urlSend = Configuration.URLSEND;
form.__model.__sendTrue = Configuration.SENDTRUE;
form.__model.__sendFalse = Configuration.SENDFALSE;
form.__model.__sendProgress = Configuration.SENDPROGRESS;
form.__model.__buttonSend = Configuration.BUTTONSEND;
form.__model.__buttonReset = Configuration.BUTTONRESET
form.__model.__spaceY = Number(Configuration.SPACEY);
form.__model.__alignButton = Configuration.ALIGNBUTTON;
form.__model.__titleColor = Configuration.TITLECOLOR;
form.__model.__inputColor = Configuration.INPUTCOLOR;
form.__model.__borderColor = Configuration.BORDERCOLOR;
form.__model.__errorBorderColor = Configuration.ERRORBORDERCOLOR;
form.__model.__backgrondColor = Configuration.INPUTBACKGRONDCOLOR;
form.__model.__alertColor = Configuration.ALERTCOLOR;
form.__model.__buttonTextColor = Configuration.BUTTONTEXTCOLOR;
83
form.__model.__buttonBackgroundColor =
Configuration.BUTTONBACKGROUNDCOLOR;
form.__model.__sendTo=Configuration.SENDTO
form.__model.__headline=Configuration.HEADLINE
form.__model.dataProvider(date_);
return form.__model
}
////////////Menambahkan Judul Untuk Contact ////////////////////////
function addTitle(date_){
if(_root==this){
//mcBackground.background.title.styleSheet=LoaderModel.getInstance().
getCss()
//mcBackground.background.title.embedFonts=true
mcBackground.background.title.htmlText=date_.firstChild.nodeValue
}else{
mcBackground.background.title.styleSheet=LoaderModel.getInstance().ge
tCss()
mcBackground.background.title.embedFonts=true
mcBackground.background.title.htmlText=date_.firstChild.nodeValue
}
}
////////////Memuat Description ///////////////////////////////////////////////////////////////////
function create_desc(date_){
if(_root==this){
my_styleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
if (success) {
mcBackground.desc.styleSheet=this
mcBackground.desc.embedFonts=true
84
mcBackground.desc.htmlText=date_.firstChild.nodeValue.split("\n").join(
"")
}
};
var url = (_level0.url_css.length) ? _level0.url_css : style_;
my_styleSheet.load("css/global_styles.css");
}else{
mcBackground.desc.styleSheet=LoaderModel.getInstance().getCss()
mcBackground.desc.embedFonts=true
mcBackground.desc.htmlText=date_.firstChild.nodeValue.split("\n").join(
"")
}
}
//////////////////////Perintah Function Untuk Site Template///////////////////////////////////
if (_root == this) {
loadXML("xml/form.xml");
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ActionScript Memuat File XML
class XML_{
public static function getAtrybut(child,atr){
child.attributes[atr]
}
85
public static function getArrayObject(date_,node_name) {
var node_name;
delete counter
var counter =new Array();
var array = new Array();
var il = date_.childNodes.length;
for (var i = 0; i<il; i++) {
var row = date_.childNodes[i];
if (node_name == row.nodeName || node_name ==
undefined||node_name==0) {
var g =counter.push(1)-1
array[g] = new Object();
for (var b in row.attributes) {
var tt = row.attributes[b];
array[g][b] = tt;
}
array[g].child = row;
}}
return array;
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////