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


(SWF) Objek Wisata ................................................. 28


(SWF) Newsy ............................................................ 29


(SWF) Gallery........................................................... 30


(SWF) Book............................................................... 31


(SWF) Map ............................................................... 32


(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


Gallery.......................................................................... 35

11


Book.............................................................................. 37


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


<configuration>



<FULL_SCREEN_FOR_MOVE>true</FULL_SCREEN_FOR_MOVE>



<THUMB_WIDTH>80</THUMB_WIDTH>



<THUMB_HEIGHT>60</THUMB_HEIGHT>



<TIMESLIDE>1000</TIMESLIDE>



<BACKGROUND_THUMBS>0x000000,0</BACKGROUND_THUMBS>



<COLOR_FRAME>0x00CCFF,100</COLOR_FRAME>



<ALPHA_OVER>100</ALPHA_OVER>

<ALPHA_OUT>70</ALPHA_OUT>



<COLOR_PRELOADER_CURRENT>0xFFFFFF,100</COLOR_PRELOA

DER_CURRENT>

<COLOR_BCG_PRELOADER>0x00CCFF,100</COLOR_BCG_PRELOADER



<COLOR_BUTTON_CLOSE_DESC>0xFFFFFF,100</COLOR_BUTTON

_CLOSE_DESC>



<LABEL_BTN_DESC>MORE INFO...</LABEL_BTN_DESC>



<COLOR_BCG_DESC>0X000000,80</COLOR_BCG_DESC>

59

<COLOR_SLIDE_CIRCLE>0xFFFFFF,70</COLOR_SLIDE_CIRCLE>



<COLOR_BCG_BIG_IMAGE>0XFF0000,0</COLOR_BCG_BIG_IMAGE



<COLOR_BCG_THUMB>0xFFFFFF,0</COLOR_BCG_THUMB>



<COLOR_BACKGROUND_BUTTON>0X000000,70</COLOR_BACKGR

OUND_BUTTON>

<COLOR_SYMBOL_BUTTON>0xFFFFFF,100</COLOR_SYMBOL_BUT

TON>

<URL_CONFIG_FLV>xml/configuration_flv_gallery.xml</URL_CONFIG

_FLV>

<TIME_INTRO>1000</TIME_INTRO>

<TIME_EXIT>100</TIME_EXIT>



<URL_PLAYER_FLV>player_flv.swf</URL_PLAYER_FLV>



<COLOR_BCG_PLAYER>0Xff0000,100</COLOR_BCG_PLAYER>



<COLOR_ROL>0x6D706D</COLOR_ROL>



<COLOR_OUT>0x404240</COLOR_OUT>



<ROTATE_THUMB>true</ROTATE_THUMB>

<COLUMNS_LENGTH></COLUMNS_LENGTH>



<ROWS_LENGTH>1</ROWS_LENGTH>

<POSITION_NETWORK_X></POSITION_NETWORK_X>

60

<POSITION_NETWORK_Y></POSITION_NETWORK_Y>



<POSITION_IMAGE_X></POSITION_IMAGE_X>

<POSITION_IMAGE_Y></POSITION_IMAGE_Y>



<MARGIN_HORIZONTAL_BIG_IMAGE>0</MARGIN_HORIZONTAL_BI

G_IMAGE><MARGIN_VERTICAL_BIG_IMAGE>0</MARGIN_VERTICAL_BI

G_IMAGE>

<MARGIN_HORIZONTAL_THUMB>200</MARGIN_HORIZONTAL_THUMB>

<MARGIN_VERTICAL_THUMB>200</MARGIN_VERTICAL_THUMB>



<TITLE_COLOR_THUMB>0xFFFFFF</TITLE_COLOR_THUMB>



<SPACE_X_THUMB>5</SPACE_X_THUMB>

<SPACE_Y_THUMB>5</SPACE_Y_THUMB>



<SMOOTHING>true</SMOOTHING>

</configuration>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Configuration Newsy XML


<configuration>



<BACKGROUND_COLOR_NEWSY>0x000000,0</BACKGROUND_COL

OR_NEWSY>

61

<BACKGROUND_SCROLL_COLOR>0xFFFFFF</BACKGROUND_SCR

OLL_COLOR>

<SCROLL_COLOR>0x00CCFF</SCROLL_COLOR>



<COLOR_SEP>0xFFFFFF</COLOR_SEP>

</configuration>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Configuration Contact XML


<configuration>



<BACKGROUND_COLOR>0x000000,0</BACKGROUND_COLOR>



<COLOR_BORDER_ERROR>0Xff0000,0</COLOR_BORDER_ERROR>



<COLOR_BORDER_SELECT>0XA0C02A,0</COLOR_BORDER_SELECT>



<BACKGROUND_INPUT_TEXT>0x999B99,100</BACKGROUND_INPUT_TE

XT>



<BUTTON_BCG_COLOR>0x373A36,0</BUTTON_BCG_COLOR>

62



<URLSEND>php/url_send.php</URLSEND>



<SENDTRUE>sendTrue</SENDTRUE>



<SENDFALSE>sendFalse</SENDFALSE>



<SENDPROGRESS>sendProgress</SENDPROGRESS>



<BUTTONSEND>send</BUTTONSEND>



<BUTTONRESET>reset</BUTTONRESET>



<SPACEY>14</SPACEY>



<ALIGNBUTTON>L</ALIGNBUTTON>



<TITLECOLOR>0xFFFFFF</TITLECOLOR>



<INPUTCOLOR>0xFFFFFF</INPUTCOLOR>

63

<INPUTBACKGRONDCOLOR></INPUTBACKGRONDCOLOR>



<BORDERCOLOR>0xFFFFFF</BORDERCOLOR>



<ERRORBORDERCOLOR>0xFF0000,0</ERRORBORDERCOLOR>



<ALERTCOLOR>0xFFFFFF</ALERTCOLOR>



<BUTTONTEXTCOLOR>0xFFFFFF</BUTTONTEXTCOLOR>



<BUTTONBACKGROUNDCOLOR></BUTTONBACKGROUNDCOLOR>



<POSITION_X>265</POSITION_X>



<POSITION_Y>75</POSITION_Y>



<SENDTO>[email protected]</SENDTO>



<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;


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)//////////////////////////////


Stage.addListener(this);

var url = (_level0.url_date.length) ? _level0.url_date : default_date

loadDate(url);

}

/////////// Kejadian 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/////////////////////////////////////////////////////////////


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 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


/// 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///////////////////////////////////////////////////


var url = url_;





Configuration.setXml(Configuration.__data)

loadCssStyle(Configuration.STYLE_SHEET)

}

};

}

78

//////////////Memuat CssStyle///////////////////////////////////////////////////////////////////////

function loadCssStyle(url_:String){



if (success) {

ini(date_form,Configuration.__data)

}

};

my_styleSheet.load(url_);

}

///////////////Memuat Untuk XML////////////////////////////////////////////////////////

function loadXML(xmlFile_) {





};

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.*;


80


////////////////Membuat Perintah Function Onresize - Optional (position for Site

Template XML)


var model_loader=LoaderModel.getInstance()

var w=model_loader.widthContent

var h=model_loader.heightContent

mcBackground._x=0

mcBackground._y=0

}


//mcBackground.desc.text=""

}

/////////////Memuat configuration untuk Contact ////////////////////////////////////


var url = url_;





ini(date_form,Configuration.__data)

}

};

}

81

////////////Memuat XML Untuk Contact /////////////////////////////////////////////////

function loadXML(url_) {





};

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){



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///////////////////////////////////


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;

};

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

perancangan website pariwisata berbasis visual … · teknologi serta wacana bagi mahasiswa/i stmik...

Documents