PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUAL ANIMASI DI DINAS KEBUDAYAAN DAN PARIWISATA ACEH BESAR SKRIPSI Diajukan untuk melengkapi Tugas dan memenuhi syarat-syarat guna memperoleh gelar Sarjana Komputer STMIK U’Budiyah Indonesia
Oleh : RIZAL AIYUBI 08111062
PROGRAM STUDI S1 TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER STMIK U’BUDIYAH INDONESIA BANDA ACEH 2012
1
LEMBAR PENGESAHAN
PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUAL ANIMASI 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, MBA NIDN: 0113108204
2. Anggota
Faisal Tifta Zany, M. Sc NIDN: 0127038103
3. Anggota
Zalfie Ardian, S Kom
2
PERANCANGAN WEBSITE PARIWISATA BERBASIS VISUAL ANIMASI DI DINAS KEBUDAYAAN PARIWISATA PEMUDA DAN OLAH RAGA KABUPATEN ACEH BESAR
SKRIPSI
Oleh : RIZAL AIYUBI 08111062 Disetujui, Penguji I
Penguji II
(Faisal Tifta Zany, M. Sc) NIDN : 0127038103
( Zalfie Ardian, S kom )
Ka. Prodi S1 Teknik Informatika
Pembimbing
( Agustiar, ST.MT ) NIDN : 1122334491
( ImaDwitawati, MBA) NIDN: 0113108204 Mengetahui, Ka. STMIK U’Budiyah Indonesia
( Drs. Alfian Ibrahim, MS) NIP. 0011064701 3
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 Aiyubi 08111062
4
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. 5
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
6
ABSTRAK Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar ini adalah Instansi pemerintah yang bergerak dibidang Kebudayaan, bidang Pariwisata, bidang Kepemudaan dan bidang Keolahragaan Kota Aceh Besar. Saat ini, Dinas Kebudayaan, Pariwisata, Pemuda dan Olah Raga Kabupaten Aceh Besar masih menggunakan Bloger dalam mempublikasi Objek Wisata yang ada di kawasan Aceh Besar. Tugas akhir ini bertujuan untuk membuat suatu website Pariwisata Berbasis Visual Animasi di Dinas Kebudayaan dan Pariwisata Aceh Besar yang dinamis. Dalam pembuatan website Pariwisata menggunakan software Adobe flash CS3, maka website Pariwisata berbasis Visual Animasi akan lebih praktis dan mudah. Adapun link atau menu-menu yang dipakai dalam pembuatan website ini yakni menu Home, Menu About, Menu Objek Wisata, Menu book, dan Menu Contact. Semua link atau menu diatas digunakan untuk fasilitas yang diperlukan dalam mengunakan website Pariwisata berbasis Visual Animasi di Dinas Kebudayaan dan Pariwisata Aceh Besar. Kata kunci Pariwisata dan Adobe flash CS3
ABSTRACT Department of Culture, Tourism, Youth and Sports Aceh Besar District is a government agency engaged in the Culture, Tourism field, field and field of Sport Youth City of Aceh Besar. Currently, the Department of Culture, Tourism, Youth and Sports in Aceh Besar district still uses Bloggers to publish attractions that exist in Aceh Besar district. This final project aims to create a website based Tourism Visual Animation in the Department of Culture and Tourism of dynamic Aceh Besar. In Tourism website creation using Adobe Flash CS3 software, the web-based Tourism Visual Animation will be more practical and easier. As for the link 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 above to facilities needed in using Visual Animation website based Tourism in the Department of Culture and Tourism of Aceh Besar. Keywords Tourism and Adobe Flash CS3
7
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
8
2.7 PengertianWebsite .............................................................................
11
2.8 MacromediaDreamweaver................................................................
11
2.9 Extended Markup Language (XML).................................................
13
2.10 Cascading Style Sheet (CSS) ............................................................
14
2.11 Guide 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).... 4.1.2.1
Perancangan Format file Shock Wave Flash (SWF) Menu .............................................................
4.1.2.2
24
25
Rancangan Format file Shock Wave Flash (SWF) Slide Intro..................................................................
9
25
4.1.2.3
Pancangan Format file Shock Wave Flash (SWF) Text............................................................................
4.1.2.4
Perancangan Format file Shock Wave Flash (SWF) Objek Wisata .................................................
4.1.2.5
31
Perancangan Format file Shock Wave Flash (SWF) Map ...............................................................
4.1.2.9
30
Perancangan Format file Shock Wave Flash (SWF) Book...............................................................
4.1.2.8
29
Perancangan Format file Shock Wave Flash (SWF) Gallery...........................................................
4.1.2.7
28
Perancangan Format file Shock Wave Flash (SWF) Newsy ............................................................
4.1.2.6
27
32
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..........................................................................
10
35
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
11
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
12
BAB I PENDAHULUAN
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
13
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. 14
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.
15
BAB II TINJAUAN 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 masingmasing 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
16
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. 17
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
18
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 InBetween). 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
19
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
20
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)
21
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).
22
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.
23
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)
24
BAB III METODE 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)
25
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.
26
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.
27
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.
28
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
29
3.5
Struktur Perancangan Website
Pengumpulan Data dan Pembuatan Skenario
Rancangan Sistem
Pembuatan Website
Hasil
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.
30
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 jawabanjawaban 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.
31
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 32
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 33
Besar. Disini juga menampilkan link yang menerima jasa pemandu jalan ke lokasi objek wisata yang ada Aceh Besar. 3.7
Jadwal Penelitian
2012
No
Kegiatan
Maret
April
2 3 4 1 2 3 4 1 1
Mei
Literatur Analisa Data
3
Perancangan Sistem
4
Implementasi
5
Evaluasi
6
Penulisan Laporan
Gambara 3. 2 Jadwal Penelitiaan
34
Juli
2 3 4 1 2 3 4 1 2 3 4
Studi
2
Juni
BAB IV HASIL 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.
35
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)
36
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
37
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.
38
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.
39
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
40
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.
41
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. 42
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.
43
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
44
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.
45
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
46
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 47
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
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
48
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.
49
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
50
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
51
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
52
BAB V PENUTUP
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.
53
DAFTAR PUSTAKA Chandra, 2007. Flash CS3 Untuk Orang Awam. Palembang : Maxikom Candra.
2012. Evolusi Javascript. [Online] www.web.id/2012/03/17/evolusi-javascript/. [30 Mei 2012]
Tersedia:
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 Animasi Diversiti. [online] Tersedia : http://ceritarara.wordpress.com/tinjauanmultimedia-dalam-pembelajaran/#more-25. [1 Maret 2012] Suyanto, M, 2005. Multimedia Alat Untuk Meningkatkan Keunggulan Bersaing. Yogyakarta : Andi Wahana Komputer, 2006. Membuat Website Interaktif dengan Macromedia Dreamweaver 8. Yogyakarta : Andi
54
XML Menu <menuPrimary id="1" url_config="xml/configuration_menu.xml">
-
-
-
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Configuration Menu XML
paddingUpSubitem="10" paddingDownSubitem="10"> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Configuration_Text XML
0x000000,0 0x00CCFF 0xFFFFFF 40 40 20
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
57
Configuration Gallery XML
true 80 60 <TIMESLIDE>1000 0x000000,0 0x00CCFF,100 100 70 0xFFFFFF,100 0x00CCFF,100 0xFFFFFF,100 MORE INFO... 0X000000,80 58
0xFFFFFF,70 0XFF0000,0 0xFFFFFF,0 0X000000,70 0xFFFFFF,100 xml/configuration_flv_gallery.xml <TIME_INTRO>1000 <TIME_EXIT>100 player_flv.swf 0Xff0000,100 0x6D706D 0x404240 true 1 59
<MARGIN_HORIZONTAL_BIG_IMAGE>0<MARGIN_VERTICAL_BIG_IMAGE>0 <MARGIN_HORIZONTAL_THUMB>200 <MARGIN_VERTICAL_THUMB>200 <TITLE_COLOR_THUMB>0xFFFFFF <SPACE_X_THUMB>5 <SPACE_Y_THUMB>5 <SMOOTHING>true /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Configuration Newsy XML
0x000000,0
60
0xFFFFFF <SCROLL_COLOR>0x00CCFF 0xFFFFFF ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Configuration Contact XML
0x000000,0 0Xff0000,0 0XA0C02A,0 0x999B99,100 0x373A36,0
61
php/url_send.php <SENDTRUE>sendTrue <SENDFALSE>sendFalse <SENDPROGRESS>sendProgress send reset <SPACEY>14 L <TITLECOLOR>0xFFFFFF 0xFFFFFF 62
0xFFFFFF <ERRORBORDERCOLOR>0xFF0000,0 0xFFFFFF 0xFFFFFF 265 75 <SENDTO>[email protected] Hello !
63
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
64
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; }
65
/////////////////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); }; 66
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 }
67
//////////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){ 68
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){ 69
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
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;
71
//////////////// 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_); 72
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(""); 73
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/////////////////////////////////////////////////////////////////
74
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
75
/////////////////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) 76
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) } }; } 77
//////////////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() } 78
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; 79
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) } }; }
80
////////////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) 81
///// 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;
82
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 83
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] } 84
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
85
