Multi Media

MULTIMEDIA II Page i

KATA PENGANTAR

Flash merupakan salah satu aplikasi yang populer digunakan dalam

pembuatan animasi dan web. Seiring perkembangan, Adobe Flash CS3 memiliki

beberapa fitur baru dibandingkan versi terdahulu, yaitu Macromedia Flash MX.

Salah satunya dengan penambahan Filter yang memungkinkan penambahan efek

pada objek.

Modul ini disusun untuk menjadi panduan belajar bagi mahasiswa dalam

memahami pembuatan multimedia, terutama dalam penggunaan Aplikasi Flash

dan pemahaman ActionScript. Konsep dan materi dasar dalam modul diarahkan

agar dapat dipraktekan dan dikembangkan untuk membuat animasi, galeri foto,

e-book, company profile bahkan game interaktif.

Dalam perkembangannya, belum banyak buku-buku yang membahas

secara rinci mengenai ActionScript. Sehingga pembahasan materi dalam modul

disertai dengan contoh-contoh untuk mempermudah pemahaman mengenai

materi yang disampaikan. Dengan penyusunan modul ini diharapkan dapat

memenuhi antusiasme mahasiswa untuk mengenal lebih jauh mengenai Flash

dan ActionScript 2.0. Kritik dan saran sangat diharapkan sebagai masukan untuk

perbaikan modul pada masa yang akan datang.

Bandung, 11 Oktober 2011

Penulis

MULTIMEDIA II Page 1

DAFTAR ISI

KATA PENGANTAR ....................................................................................................... ....... i

DAFTAR ISI ......................................................................................................................... ii

1 PENERAPAN APLIKASI MULTIMEDIA .......................................................................... 5

1.1 Membuat Symbol dan Instance .......................................................................... 6

1.1.1 Simbol Graphic ............................................................................................... 6

1.1.2 Simbol Button ................................................................................................ 8

1.1.3 Simbol Movieclip .......................................................................................... 12

1.2 Bekerja dengan Efek ......................................................................................... 16

1.2.1 Drop Shaddow ............................................................................................. 16

1.2.2 Blur .............................................................................................................. 17

1.2.3 Glow ............................................................................................................. 17

1.2.4 Bevel ............................................................................................................ 18

1.2.5 Gradient Glow .............................................................................................. 18

1.2.6 Gradient Bevel ............................................................................................. 19

1.2.7 Adjust Color.................................................................................................. 20

2 JENIS-JENIS ANIMASI ................................................................................................ 22

2.1 Frame by Frame ............................................................................................... 22

2.2 Tween Animation ............................................................................................. 26

2.2.1 Shape Tween ................................................................................................ 27

2.2.2 Motion Tween ............................................................................................. 28

14) Tekan Ctrl+Enter untuk melihat hasil animasi motion guide. ........................... 37

3 PEMBUATAN ANIMASI KARAKTER ........................................................................... 38

3.1 Menggambar Karakter Lebah ........................................................................... 38

3.2 Menggambar Objek Keranjang ......................................................................... 50

3.3 Menggambar Objek Bunga ............................................................................... 53

3.4 Menganimasikan Karakter Lebah ..................................................................... 56


4 ACTIONSCRIPT .......................................................................................................... 68

4.1 Method dan Properties ..................................................................................... 68

4.2 Struktur Bahasa ActionScript ............................................................................ 68

4.3 Variabel dan Tipe Data ..................................................................................... 69

4.4 String dan Expression ....................................................................................... 69

4.5 Operator ........................................................................................................... 70

4.5.1 Arithmetic Operator ..................................................................................... 70

4.5.2 Assignment Operator ................................................................................... 70

4.5.3 Bitwise Operator .......................................................................................... 71

4.5.4 Comparison Operator .................................................................................. 71

4.5.5 Logical Operator .......................................................................................... 72

4.5.6 Miscelanous Operator ................................................................................. 72

4.6 Dasar Pemrograman ......................................................................................... 72

4.6.1 Kondisi ......................................................................................................... 73

4.6.2 Pengulangan (Looping) ................................................................................ 74

4.6.3 Statement function ...................................................................................... 76

4.7 Mengenal Panel Action..................................................................................... 78

4.8 Menggunakan Code Hint .................................................................................. 80

4.9 Absolute Path dan Relative Path ...................................................................... 81

4.10 Navigasi ............................................................................................................ 82

4.11 Movieclip Properties ......................................................................................... 83

4.12 Movieclip Method ............................................................................................ 84

4.13 Event Handler ................................................................................................... 86

4.13.1 Clip Event ..................................................................................................... 87

4.13.2 Key Object .................................................................................................... 90

4.13.3 Mouse Object ............................................................................................... 91

5 MEMANGGIL FILE EKSTERNAL .................................................................................. 94

5.1 Memanggile File Image .................................................................................... 94

5.2 Memanggil File Suara ....................................................................................... 94

5.3 Publikasi ........................................................................................................... 97


6 MENAMPILKAN DATA DALAM FORMAT XML ......................................................... 101

6.1 Struktur Data XML (Extensible Makup Language) .......................................... 101

6.2 Menyimpan Data dalam Format XML............................................................. 101

6.3 Menampilkan Data XML dengan Adobe Flash ................................................ 103

7 PEMBUATAN ANIMASI DENGAN ADOBE FLASH ..................................................... 111

7.1 Membuat Banner pada Website .................................................................... 111

7.2 Membuat Teks Berjalan (Ticker) ..................................................................... 121

7.3 Galeri Foto ...................................................................................................... 124

7.3.1 Membuat Interface Galeri Foto ................................................................. 124

7.3.2 Membuat Tombol Navigasi ........................................................................ 128

7.3.3 Memanggil File Image Eksternal ................................................................ 131

7.4 Membuat Efek Transisi ................................................................................... 137

7.4.1 Mengatur Timeline dan ActionScript ......................................................... 141

8 MEMBUAT WEBSITE DENGAN FLASH ..................................................................... 145

8.1 Pengaturan Dokumen dan Title ...................................................................... 145

8.2 Membuat Menu Utama .................................................................................. 147

8.3 Menambahkan Image sebagai Background ................................................... 151

8.4 Membuat Konten Home ................................................................................. 153

8.5 Membuat Konten Profile ................................................................................ 160

8.6 Membuat Konten Promo Tour ....................................................................... 162

8.7 Membuat Konten Promo Tour Jakarta-China ................................................. 168

8.8 Membuat Konten Jakarta-Vietnam-Kamboja ................................................. 174

8.9 Membuat Konten Jakarta-Eropa .................................................................... 176

8.10 Membuat Konten Contact .............................................................................. 178

8.11 Membuat Preloader ....................................................................................... 180

8.12 Publish HTML .................................................................................................. 183

8.13 Upload Konten Website.................................................................................. 185

DAFTAR PUSATAKA ....................................................................................................... 193


LAMPIRAN

LAMPIRAN A : BANNER DENGAN PENGGABUNGAN IMAGE DI PHOTOSHOP

LAMPIRAN B : CONTOH-CONTOH TAMPILAN EFEK

LAMPIRAN C : CONTOH MOTION TWEEN WITH GUIDE

LAMPIRAN D : MOVIECLIP LEBAH

LAMPIRAN E : ANIMASI LEBAH MENGAMBIL MADU

LAMPIRAN F : PENGGUNAAN XML PADA FILE XML_TOUR.FLA

LAMPIRAN G : CONTOH ANIMASI BANNER PADA WEBSITE

LAMPIRAN H : GALERI FOTO

LAMPIRAN I : FAMOUS TOUR COMPANY PROFILE


1 PENERAPAN APLIKASI MULTIMEDIA

Bidang multimedia telah menjadi tren yang berkembang dimasyarakat, bahkan telah menjadi gaya hidup terutama bagi sebagian besar masyarakat yang tinggal didaerah perkotaan. Unsur-unsur multimedia yang mengandung teks, gambar, suara, video, maupun animasi, menghasilkan tampilan-tampilan multimedia yang atraktif.

Pernahkah Anda melihat reka ulang (kronologis) suatu perisiwa ditelevisi yang disajikan dalam bentuk animasi? Tampilan presentasi dengan animasi transisi antar slide? Website yang menampilkan banner dengan animasi tertentu? Maupun website yang menyediakan akses untuk galeri foto atau video, suara atau lagu yang dimainkan dengan menekan sebuah tombol? Seorang anak yang asyik memainkan game interaktif? Profil perusahaan yang dipresentasikan oleh seorang pegawai marketing untuk memperkenalkan produk dan layanan perusahaan tersebut? Suatu website yang terkesan atraktif dengan gerakan-gerakan animasi yang “memanjakan” mata pengunjung? Serta orang yang mengakses informasi melalui sebuah alat yang dilengkapi dengan komputer dan layar sentuh (kiosk) di lobi hotel maupun bandara?

Fakta-fakta di atas menjadi bukti bahwa bidang multimedia telah menjadi tren dan gaya hidup bagi sebagian besar masyarakat. Semua aktivitas tersebut melibatkan aplikasi yang diolah menggunakan software multimedia. Sebagian diantaranya mungkin dibuat dengan Adobe Flash.

Adobe Flash merupakan salah satu software yang sering digunakan untuk membuat animasi maupun aplikasi multimedia.

Modul ini akan langsung membahas aspek-aspek yang lebih spesifik pada penggunaan aplikasi Adobe Flash. Pengenalan Adobe Flash seperti pengenalan area kerja, format grafik (vektor dan bitmap), konsep layer, konsep storke dan fill, model penggambaran (merge dan object drawing model), serta teknik masking, telah dibahas pada Modul Multimedia I. Sehingga untuk mempelajari modul ini, Anda disarankan untuk memahami istilah-istilah di atas. Dalam modul ini, istilah “movie” digunakan untuk menyebut file yang dibuat dengan Adobe Flash.

BAB

1

TUJUAN :

Mahasiswa memahami contoh penerapan aplikasi multimedia pada aktivitas sehari-hari. Serta memahami konsep symbol (graphic, button, movieclip), instance, serta penggunaan efek pada Adobe Flash.


1.1 Membuat Symbol dan Instance

Dalam pembuatan movie terdapat kasus dimana objek yang sama dipakai secara berulang-ulang. Supaya objek yang dibuat dapat digunakan secara berulang-ulang tanpa harus membuatnya kembali, objek tersebut harus diubah menjadi symbol. Symbol dibedakan menjadi 3 kategori, yaitu graphic, button dan movieclip. Symbol merupakan aset pada Flash yang dapat dianimasikan, khusus untuk button dan movieclip dapat menerima event dalam penggunaan ActionScript. Turunan symbol yang digunakan pada area kerja disebut instance. Semua symbol merupakan aset yang secara otomatis tersimpan pada Panel Library. Jika kita mengubah objek didalam suatu symbol maka semua instance dari symbol tersebut akan ikut berubah.

1.1.1 Simbol Graphic

Simbol graphic biasanya digunakan untuk objek yang tidak akan diubah selama movie dijalankan, misal logo. Berikut ini adalah contoh mengubah Logo CCDP menjadi simbol graphic.

1) Buat dokumen baru : File > New > Flash File (ActionScript 2.0).

2) Masukkan image logo : File > Import > Import to Library kemudian masukkan direktory tempat file Logo CCDP berada. Secara otomatis logo akan tersimpan pada Panel Library sebagai objek bitmap.

Gambar 1.1 Image Logo CCDP tersimpan pada Library

3) Drag icon Logo CCDP pada Panel Library kedalam area kerja.


Gambar 1.2 Logo CCDP

4) Pastikan semua objek logo terseleksi, klik kanan pada logo lalu pilih Convert to Symbol. Atau tekan F8 untuk menampilkan kotak dialog Convert to Symbol.

5) Beri nama symbol “logo”, pilih Graphic, pilih titik registration di tengah lalu tekan OK.

Gambar 1.3 Kotak Dialog Convert to Symbol pada Graphic Logo


Gambar 1.4 Logo CCDP yang telah diubah menjadi Simbol Graphic

1.1.2 Simbol Button

Simbol button digunakan sebagai tombol interaksi antara movie dengan user untuk memicu suatu aksi. Misalnya ketika tombol Copy ditekan, objek bola diduplikat muncul seperti contoh berikut :

1) Buat dokumen baru : File > New > Flash File (ActionScript 2.0)

2) Buat objek bola menggunakan oval tool. Klik ganda pada objek bola, ubah properti width menjadi 80, height 80, storke color #000000 (hitam), storke style solid dan storke height 2.

Gambar 1.5 Properti Objek Bola

3) Klik icon fill color pada Panel Color, pilih Type Radial lalu ubah komposisi warna gradien #FFFFFF (putih) dan #02A6EC (biru).

Gambar 1.6 Properti Fill Color Bola pada Panel Color


4) Pilih icon Gradient Transform Tool pada Panel Tools, klik area fill bola lalu pindahkan Center Point Handler ke kanan atas.

Gambar 1.7 Hasil Edit menggunakan Gradient Transform Tool

5) Buat layer baru kemudian ganti nama layer baru menjadi “button” dan layer sebelumnya menjadi “bola”.

6) Buat simbol button dengan mengklik rectangle primitive tool. Ubah properti width menjadi 100, height 30, rectangle corner radius 10, fill color #E10000 (merah terang), storke color #990000 (merah tua), storke style solid dan stork height 2.

Gambar 1.8 Shape yang akan diubah menjadi Button

7) Klik ganda pada objek, klik kanan lalu pilih Convert to Symbol. Beri nama “duplikat_btn”, pilih Button, klik Registration di tengah lalu tekan OK.

Gambar 1.9 Kotak Dialog Convert to Symbol pada Button duplikat_btn

Center Point Handler


8) Klik ganda pada button, kemudian muncul timeline button. Buat layer baru, ganti namanya menjadi “teks” dan layer sebelumnya menjadi “btn”.

9) Pastikan layer aktif adalah layer teks, klik icon Text Tool, ketik “Copy”. Ubah properti pada Panel Properties menjadi Static Text, font Tahoma, font size 18, fill color #FFFFFF (putih), font style bold, align center. Tempatkan teks ditengah objek button.

Gambar 1.10 Image Logo CCDP tersimpan pada Library

Gambar 1.11 Properti Text

10) Klik frame Over layer teks pada timeline, tekan Shift lalu klik frame Over layer teks (frame dibawahnya), kemudian klik kanan, pilih Insert Keyframe. Atau tekan F6 untuk membuat keyframe. Ulangi untuk frame Down hingga terbentuk keyframe dibawah ini.

Gambar 1.12 Timeline pada Button duplikat_btn

11) Klik frame Over layer btn, ganti fill color menjadi #FF0099 (pink). Klik frame Over layer teks, ganti fill color #FFCCFF (pink muda).

Gambar 1.13 Tampilan Frame Over pada duplikat_btn


12) Klik ganda pada Stage 1 untuk kembali ke stage utama, klik kanan pada frame 2 layer btn, pilih Insert Frame. Klik kanan pada frame 2 layer bola, tekan F6 untuk membuat keyframe.

Gambar 1.14 Tampilan Timeline pada Layer button dan bola

13) Klik ganda objek bola, klik kanan Copy, klik kanan pada area kerja kosong pilih Paste in Place. Klik ganda objek bola, pindahkan ke kanan sehingga terdapat dua buah objek bola.

Gambar 1.15 Tampilan objek pada Frame 2

14) Buat layer baru di atas layer teks, ganti nama layer menjadi “action”. Klik kanan pada frame 2 layer action, pilih Insert Blank Keyframe. Klik Panel Action, masukkan ActionScript sbb :

stop();

15) Klik simbol button, klik Panel Action hingga muncul Panel Action. Pastikan tombol Script Assist tidak aktif. Lalu masukkan ActionScript dibawah ini :

on (release) {

gotoAndPlay(2);

}


Gambar 1.16 Panel Action pada Button duplikat_btn

16) Lihat hasilnya dengan menekan Ctrl+Enter.

Hasil tampilan movie di atas terdapat sebuah objek bola dan Button Copy. Movie berhenti di frame 1 karena kita telah memberikan action stop() pada frame 1. Dengan demikian, saat ini playhead (indikator frame pada timeline) berada di frame 1. Jika Button Copy diklik, Flash akan membaca ActionScript pada duplikat_btn. On (release) artinya ketika button ditekan, maka Flash akan menjalankan instruksi selanjutnya, yaitu gotoAndPlay(2). Instruksi ini akan membuat playhead menjalankan frame 2 kemudian berhenti di frame tersebut setelah membaca action stop() pada frame 2. Tampilan movie sekarang terdapat 2 buah objek bola seolah-olah objek bola telah diduplikat.

Jika diperhatikan timeline pada simbol button berbeda dengan timeline biasa (lihat Gambar 1.12). Frame pada timeline tersebut terdiri dari up, over, down dan hit.

1. Up : tampilan pada saat button belum ditekan.

2. Over : tampilan pada saat pointer mouse berada pada area button.

3. Down : tampilan pada saat button ditekan.

4. Hit : merupakan area tekan button dan tidak akan ditampilkan pada saat movie dijalankan.

Ketika membuat button, frame over, down dan hit boleh dikosongkan. Tetapi ketika membuat button transparan, dimana frame up tidak berisi objek apapun, frame hit harus diisi objek untuk area tekan button.

1.1.3 Simbol Movieclip

Movieclip digunakan untuk objek yang akan dianimasikan dan digunakan berberulang-ulang pada saat movie dijalankan. Misalnya objek apel yang akan kita ubah menjadi movieclip.



2) Buat bentuk dasar apel menggunakan Pen Tool. Pada Panel Tools aktifkan option smooth, pastikan Object Drawing tidak aktif. Dengan selection tool ubah lingkaran tersebut menjadi bentuk dasar apel.

Gambar 1.17 Object Drawing dan Mode Smooth pada Panel Properties

Gambar 1.18 Bentuk Dasar Apel menggunakan Pen Tool

3) Klik ganda bentuk dasar tersebut, kemudian klik kanan Copy > Paste. Balikkan posisi hasil duplikat tadi, pilih Modify > Transform > Flip Horizontal. Lalu pindahkan posisinya hingga terbentuk apel.

Gambar 1.19 Bentuk Dasar yang telah diduplikat

4) Buat tangkai apel menggunakan line tool, ubah bentuknya menggunakan selection tool seperti gambar berikut.

Object Drawing


Gambar 1.20 Tangkai Apel digambar menggunakan Line Tool

5) Seleksi tangkai apel dan tempatkan dibelakang bentuk dasar apel. Hapus bagian yang tidak diperlukan dengan menyeleksi bagian tersebut dan tekan Delete. Hingga terbentuk apel seperti gambar berikut.

Gambar 1.21 Bentuk Dasar dan Tangkai Apel yang telah disatukan

6) Warnai bentuk dasar apel dengan memilih Paint Bucket Tool lalu klik bagian tengah apel. Klik ganda bagian tengah apel, pada Panel Color ubah properti type menjadi Radial, komposisi fill color apel menjadi #EFCBCB (merah muda) dan #B10101 (merah), storke #640202 (merah tua). Pada Panel Properties ubah line height menjadi 2.

Gambar 1.22 Panel Color pada Bentuk Dasar Apel

7) Pilih Gradient Transform Tool pada Panel Tools, klik area fill apel lalu pindahkan Center Point Handler ke kanan atas. Tarik area radius gradien menjadi oval.


Gambar 1.23 Radial Gradien Apel yang telah diubah

8) Warnai tangkai apel dengan memilih Paint Bucket Tool lalu klik bagian tengah tangkai. Klik ganda bagian tengah tangkai, lalu ubah properti fill color menjadi #108602 (hijau) dan storke color #025C01 (hijau tua) dan line height menjadi 2.

Gambar 1.24 Tangkai apel yang telah diwarnai

9) Seleksi semua bagian apel, jadikan movieclip dengan menekan F8, ganti namanya menjadi “apel”, pilih movieclip, Registration ditengah, lalu tekan OK.

Gambar 1.25 Kotak Dialog Convert to Symbol pada Movieclip Apel

Center Point Handler

Tarik area radius gradien kearah dalam


Gambar 1.26 Hasil Pembuatan Movieclip Apel

10) Simpan dokumen dengan nama “Apel.fla” dengan memilih File < Save atau dengan menekan Ctrl + S.

1.2 Bekerja dengan Efek

Adobe Flash CS3 menerapkan fungsi baru dengan adanya fasilitas filter untuk menambahkan efek pada objek. Dengan fasilitas ini memungkinkan objek-objek seperti teks, button dan movieclip terlihat lebih menarik dengan adanya penambahan efek.

Kita dapat menambahkan beberapa efek pada suatu objek, dan menghapus efek yang telah kita buat sebelumnya. Kita juga dapat membuat filter setting library untuk memudahkan ketika memerlukan setting efek yang sama

pada objek lainnya dengan memilih icon kemudian pilih menu Presets.

Untuk menambahkan efek, seleksi objek kemudian buka Panel Properties,

klik icon untuk menampikan menu popup, lalu pilih efek yang diinginkan.

Berikut ini beberapa efek yang telah didukung Adobe Flash CS3 adalah sebagai berikut :

1.2.1 Drop Shaddow

Efek drop shaddow mensimulasikan tampilan suatu objek dengan memantulkan bayangan pada suatu permukaan.

Gambar 1.27 Panel Filter pada Efek Drop Shaddow

1. Blur X dan Blur Y : digunakan untuk mengatur lebar area (dalam pixel) bayangan yang terlihat blur.

2. Strength : mengatur persentase kepekatan warna bayangan (shaddow color).

3. Quality : mengatur kualitas warna bayangan.


4. Shaddow Color : mengatur warna bayangan.

5. Anggle : mengatur sudut datang cahaya.

6. Distance : mengatur lebar area bayangan.

7. Knockout : mengubah warna objek menjadi putih, sehingga hanya terlihat bayangan pada pinggiran objek.

8. Inner Shaddow : menampilkan bayangan didalam area objek.

9. Hide Object : menyembunyikan objek, sehingga hanya terlihat bayangannya saja.

1.2.2 Blur

Efek blur menghaluskan (soften) garis tepi dan detail objek. Efek ini memberi kesan seolah-olah objek berada dibelakang objek lain atau terlihat seolah-olah bergerak.

Gambar 1.28 Panel Filter pada Efek Blur

1. Blur X dan Blur Y : digunakan untuk mengatur lebar area (dalam pixel) bagian pinggir objek yang terlihat blur.

2. Quality : mengatur kualitas warna blur.

1.2.3 Glow

Efek glow digunakan untuk memberikan cahaya disekitar garis tepi suatu objek.

Gambar 1.29 Panel Filter pada Efek Glow 1. Blur X dan Blur Y : digunakan untuk mengatur lebar area (dalam pixel)

cahaya yang terlihat blur.

2. Strength : mengatur persentase kepekatan warna cahaya.

3. Quality : mengatur kualitas warna cahaya.

4. Shaddow Color : mengatur warna cahaya.


5. Knockout : mengubah warna objek menjadi putih, sehingga hanya terlihat bayangan pada pinggiran objek.

6. Inner Glow : menampilkan cahaya didalam area objek.

1.2.4 Bevel

Efek bevel memberi highligt pada objek dan menimbulkan seolah-olah objek terlihat timbul kepermukaan (bevel).

Gambar 1.30 Panel Filter pada Efek Bevel

1. Blur X dan Blur Y : digunakan untuk mengatur lebar area (dalam pixel) bayangan yang terlihat blur.

2. Strength : mengatur persentase kepekatan warna bayangan (shaddow color).

3. Quality : mengatur kualitas warna bayangan.

4. Shaddow Color : mengatur warna bayangan.

5. Highlight Color : mengatur warna cahaya (highlight).


7. Distance : mengatur lebar area highlight dan bayangan.

8. Knockout : mengubah warna objek menjadi putih, sehingga hanya terlihat highlight dan bayangan pada pinggiran objek.

9. Type : mengatur tipe bevel yang dihasilkan, terdiri dari :

a) Inner : menampilkan bevel didalam area objek

b) Outer : menampilkan bevel diluar area objek

c) Full : menampilkan bevel didalam dan diluar area objek.

1.2.5 Gradient Glow

Efek gradient glow menghasilkan cahaya gradasi disekitar garis tepi suatu objek. Efek ini menggunakan dua warna, dimana warna awal ditetapkan transparan dengan alpha bernilai nol.

Gambar 1.31 Panel Filter pada Efek Gradient Glow


1. Blur X dan Blur Y : digunakan untuk mengatur lebar area (dalam pixel) cahaya yang terlihat blur.




5. Distance : mengatur lebar area cahaya.

6. Knockout : mengubah warna objek menjadi putih, sehingga hanya terlihat cahaya pada pinggiran objek.


a) Inner : menampilkan cahaya didalam area objek

b) Outer : menampilkan cahaya diluar area objek

c) Full : menampilkan cahaya didalam dan diluar area objek.

1.2.6 Gradient Bevel

Efek gradient bevel membuat objek terlihat bercahaya dan memberi kesan seolah-olah objek timbul di atas background dengan warna gradasi yang melintas pada permukaan yang timbul tersebut (bevel). Efek ini menggunakan tiga warna, dimana warna tengah ditetapkan transparan dengan alpha bernilai nol.

Gambar 1.32 Panel Filter pada Efek Gradient Bevel

1. Blur X dan Blur Y : digunakan untuk mengatur lebar area (dalam pixel) cahaya yang terlihat blur.




5. Distance : mengatur lebar area cahaya.

6. Knockout : mengubah warna objek menjadi putih, sehingga hanya terlihat cahaya pada pinggiran objek.


a) Inner : menampilkan cahaya didalam area objek

b) Outer : menampilkan cahaya diluar area objek

c) Full : menampilkan cahaya didalam dan diluar area objek.


1.2.7 Adjust Color

Digunakan untuk mengatur komponen warna objek, seperti contrast,

brightness, saturation dan hue. Caranya dengan mengklik tombol Add Filter , Adjust Color, kemudian drag slider, atau dengan memasukkan nilai pada atribut yang bersesuaian. Komponen warna yang dapat diubah terdiri dari :

Gambar 1.33 Panel Filter pada Adjust Color

1. Contrast : mengatur highlight, bayangan (shaddow), dan warna diantaranya (midtones) suatu image.

2. Brightness : mengatur kecerahan (brightness) suatu image.

3. Saturation : mengatur intensitas warna.

4. Hue : mengatur tingkat warna (shade).

Untuk mengembalikan komponen warna ke semula, gunakan tombol Reset pada Panel Filter. Contoh tampilan efek-efek di atas dapat kita lihat pada movieclip apel sebagai berikut.


Gambar 1.34 Contoh-contoh Tampilan Efek

Sedangkan contoh tampilan adjust color adalah sebagai berikut.

Gambar 1.35 Panel Filter pada Adjust Color


2 JENIS-JENIS ANIMASI

Terdapat dua teknik animasi pada Flash, yaitu animasi frame by frame dan animasi tween. Perbedaan kedua teknik tersebut terletak pada cara pembuatan animasinya.

2.1 Frame by Frame

Pada animasi frame by frame, setiap perubahan objek disimpan pada setiap frame. Hal ini membuat ukuran file menjadi lebih besar karena setiap frame menyimpan informasi objek secara lengkap. Teknik animasi ini banyak digunakan dalam pembuatan film kartun.

Contoh animasi frame by frame dapat kita lihat pada animasi kupu-kupu sederhana yang mengepakan sayap, sebagai berikut : 1) Buat titik-titik kurva untuk membuat bentuk dasar sayap atas kupu-kupu

menggunakan pen tool. Klik icon pen tool pada Panel Tools, klik pada stage sehingga membentuk 5 buah titik kurva.

Gambar 2.1 Hasil Penggambaran Titik Kurva dengan Pen Tool

2) Ubah bentuk kurva menjadi sayap atas kupu-kupu. Gunakan Selection Tool pada Panel Tools, dekatkan pointer mouse pada garis hingga muncul garis lengkung Drag hingga membentuk garis lengkung. Ulangi langkah ini untuk setiap garis.

Gambar 2.2 Langkah-langkah Membentuk Sayap Atas Kupu-kupu

BAB

2

TUJUAN : Mahasiswa memahami jenis-jenis animasi (frame by frame dan tween animation. Serta dapat membuat animasi dengan teknik frame-dan-frame, serta tween animation, yaitu shape tween dan motion tween.


3) Buat titik-titik kurva untuk membuat bentuk dasar sayap bawah kupu-kupu menggunakan pen tool. Klik icon pen tool pada Panel Tools, klik pada stage sehingga membentuk 5 buah titik kurva.

Gambar 2.3 Hasil Penggambaran Titik Kurva dengan Pen Tool

4) Dekatkan sayap atas dan sayap bawah seperti gambar dibawah. Buat duplikat gambar. Seleksi semua bagian gambar, tekan Ctrl lalu drag ke kanan.

Gambar 2.4 Sayap Atas dan Sayap Bawah

5) Buat duplikat gambar. Seleksi semua bagian gambar, tekan Ctrl lalu drag ke kanan.

Gambar 2.5 Sayap yang telah diduplikat

6) Buat cerminan gambar hasil duplikat, sehingga diperoleh gambar kupu-kupu. Seleksi semua gambar yang telah diduplikat, pilih Modify > Transform > Flip Horizontal. Atur posisi gambar seperti dibawah ini.

Gambar 2.6 Hasil duplikat setelah di Flip Horizontal


7) Beri warna gradasi pada area fill. Klik icon Paint Bucket Tool pada Panel Tools, klik pada bagian dalam gambar kupu-kupu. Pilih warna gradasi pada Panel Color, ubah Type menjadi Radial, beri warna gradasi #FD2D2D dan #990000.

Gambar 2.7 Panel Color setelah diberi Warna Gradasi

Kemudian ubah warna storke. Double click pada garis tepi gambar, pilih storke color pada Panel Properties, ubah storke color menjadi #990000.

Gambar 2.8 Storke Color pada Panel Properties

Gambar 2.9 Kupu-kupu setelah diberi Warna Gradasi

8) Jadikan gambar kupu-kupu menjadi simbol movieclip. Seleksi semua bagian kupu-kupu, lalu klik kanan pada area gambar, pilih Convert to Symbol. Atau tekan F8. Ubah name menjadi “kupu_kupu”, pilih type movieclip, dan titik registration di tengah.


Gambar 2.10 Jendela Convert to Symbol pada Movieclip Kupu-kupu

9) Buat movieclip menjadi animasi frame by frame. Double click movieclip kupu_kupu, hingga memasuki timeline movieclip.

Gambar 2.11 Timeline Movieclip Kupu-kupu

10) Buat simbol graphic dari gambar kupu-kupu. Seleksi semua bagian kupu-

kupu, lalu tekan F8. Ubah name menjadi “kupu01”, pilih type graphic, dan titik registration di tengah.

Gambar 2.12 Jendela Convert to Symbol pada Graphic Kupu-kupu

11) Buat keyframe pada frame 3. Klik kanan pada frame 3, pilih Insert Key Frame. Atau tekan F6. Tambahkan frame sampai frame 4. Klik kanan pada frame 4, pilih Insert Frame.


Gambar 2.13 Timeline setelah Penambahan Keyframe

12) Kecilkan ukuran kupu-kupu di keyframe 3. Seleksi gambar kupu-kupu, klik

icon Free Transform Tool pada Panel Tools, tekan Shift, lalu drag sudut kanan atas titik handle kedalam, sehingga ukuran gambar menjadi lebih kecil.

Gambar 2.14 Ukuran Kupu-kupu yang telah diperkecil dengan Free Transform Tool

13) Simpan file dengan nama “kupu-kupu.fla”. Tekan Ctrl+Enter untuk melihat

hasil animasi.

Gambar 2.15 Hasil Animasi Frame By Frame

2.2 Tween Animation

Terdapat dua jenis animasi tween, yaitu shape tween dan motion tween. Pada animasi tween, perubahan objek disimpan pada frame awal dan frame akhir. Kemudian Flash akan men-generate frame-frame transisi diantara kedua frame tersebut. Hal ini membuat ukuran file menjadi lebih kecil karena informasi lengkap dari objek hanya disimpan pada frame awal dan frame akhir saja.

Berdasarkan objek yang dianimasikan, terdapat dua jenis animasi tween, yaitu shape tween dan motion tween.


2.2.1 Shape Tween

Pada animasi shape tween objek yang dianimasikan berupa bentuk dasar (shape). Teknik animasi ini dapat men-generate perubahan posisi, ukuran, warna, dan bentuk. Berbeda dengan motion tween, perubahan warna dan bentuk hanya dapat dilakukan dengan animasi shape tween. Berikut ini adalah contoh animasi shape tween perubahan bentuk penghapus menjadi pensil :

1) Buat dokumen baru. 2) Buat shape penghapus dengan menggunakan Line Tool dan Rectangle Tool.

Gambar 2.16 Shape Penghapus

3) Klik kanan pada frame 25, Insert Blank Keyframe. Buat objek pensil dengan menggunakan Line Tool dan Rectangle Tool.

Gambar 2.17 Shape Pensil

4) Pilih salah satu frame diantara frame 1-25, lalu pilih Tween: Shape pada Panel Properties.


Gambar 2.18 Tampilan Shape Tween pada Work Area

2.2.2 Motion Tween

Pada animasi motion tween, objek yang dianimasikan berupa simbol, yaitu movieclip, button dan graphic. Teknik animasi ini dapat men-generate perubahan posisi dan ukuran. Contoh animasi motion tween dapat kita lihat pada animasi gerakan kupu-kupu yang terbang dengan mengepakan sayap sebagai berikut :

1) Buka file kupu-kupu.fla pada contoh animasi frame by frame. Pilih File > Open pilih directory tempat “kupu-kupu.fla” berada.

TIPS :

Tekan Ctrl+T untuk mengubah ukuran image. Lalu tekan Enter untuk mengakhiri mode edit. Usahakan untuk tidak membesarkan gambar yang telah dikecilkan ukurannya. Karena ketika ukuran image dikecilkan, ada bagian detail yang hilang.

Tekan Ctrl+D untuk menghilangkan seleksi pada gambar.

Gunakan icon Mata pada Panel Layer untuk menampilkan atau menyembunyikan objek pada layer. Hal ini sangat berguna ketika meng-edit file dengan banyak layer.


Gambar 2.19 Tampilan File kupu-kupu.fla

2) Simpan file dengan nama kupu_motion.fla. Pilih File > Save As, kemudian ganti nama file menjadi “kupu_motion.fla”.

3) Rotasi objek kupu-kupu 900 kearah kiri berlawanan arah jarum jam (counter clockwise). Seleksi objek kupu-kupu, pilih Modify > Transform > Rotate 900

CCW.

Gambar 2.20 Objek Kupu-kupu setelah dirotasi

4) Buat keyframe baru sebagai akhir animasi. Klik kanan pada frame 20, pilih Insert Keyframe.

Gambar 2.21 Tampilan Timeline setelah penambahan Keyframe Baru


5) Buat shape tween. Klik pada salah satu frame diantara frame 1 dan 20, pilih Motion pada Panel Properties.

Gambar 2.22 Motion Tween pada Panel Properties

6) Atur posisi objek kupu-kupu pada frame awal dan frame akhir. Klik frame 1,

gunakan selection tool untuk memindahkan posisi objek kupu-kupu ke bagian kanan diluar stage. Lalu klik frame 20, pindahkan posisi objek kupu-kupu ke bagian kiri diluar stage.

Gambar 2.23 Posisi Objek Kupu-kupu pada Frame 1

Gambar 2.24 Posisi Objek Kupu-kupu pada Frame 20


7) Tekan Ctrl+Enter untuk menampilkan hasil animasi.

Gambar 2.25 Hasil Animasi Motion Tween pada Objek Kupu-kupu

2.2.2.1 Motion Tween with Guide

Ketika menganimasikan suatu objek, untuk membuat animasi lebih terlihat natural kita dapat membuat objek yang dianimasikan bergerak mengikuti alur tertentu. Pada teknik ini ditambahkan suatu path guide sehingga objek yang dianimasikan bergerak mengikuti path tersebut. Misalnya animasi kupu-kupu yang mengepakan sayap dan berputar-putar sebagai berikut :

1) Buka file kupu_motion.fla pada contoh animasi motion tween. Pilih File >

Open pilih directory tempat “kupu_motion.fla” berada.


Gambar 2.26 Tampilan File kupu-kupu.fla

2) Simpan file dengan nama kupu_motionguide.fla. Pilih File > Save As,

kemudian ganti nama file menjadi “kupu_ motionguide.fla”. 3) Ganti nama layer sesuai objeknya. Double click Layer 1, ganti namanya

menjadi “kupu-kupu”. Buat layer baru dengan cara klik kanan pada layer kupu-kupu, lalu pilih Insert Layer. Ganti nama layer baru menjadi “image”.

Pindahkan posisi layer image sehingga posisi layer adalah sebagai berikut :

Gambar 2.27 Posisi Layer kupu-kupu dan Layer Image

4) Import image sebagai background. Pada Menu Bar pilih File > Import >

Import to Stage, kemudian pilih image.


Gambar 2.28 Submenu Import to Stage pada Menu Bar

5) Ubah ukuran stage sesuai dengan ukuran image. Klik image, sesuaikan ukuran stage dengan lebar (width) dan tinggi (height) image. Simpan image pada koordinat X=0 dan Y =0.

Gambar 2.29 Ukuran Image pada Panel Properties

6) Klik area kosong pada stage, klik button Document Properties pada Panel

Properties. Isi ukuran stage sesuai ukuran image.


Gambar 2.30 Tombol Document Properties pada Panel Properties

Gambar 2.31 Ukuran Stage yang telah disesuaikan dengan Ukuran Image

7) Buat layer guide. Klik kanan pada layer kupu-kupu, pilih Add Motion Guide.

Gambar 2.32 Hasil Penambahan Layer Guide

8) Sembunyikan semua layer kecuali layer guide. Klik titik dibawah icon mata

pada layer kupu-kupu dan layer image.


Gambar 2.33 Layer kupu-kupu dan Layer Image yang telah disembunyikan

9) Gambar path pada layer guide. Gunakan line tool pada Panel Tools, buat 6 titik sehingga terbentuk path sebagai berikut.

Gambar 2.34 Garis pada Stage

10) Ubah path menjadi garis lengkung. Pilih selection tool, dekatkan ke tengah garis hingga muncul pointer mouse. Drag sedemikian rupa sehingga terbentuk path sebagai berikut :

Gambar 2.35 Garis yang telah dibentuk menggunakan Selection Tool


11) Pindahkan posisi kupu-kupu sesuai path pada layer guide. Klik tanda silang pada Layer kupu-kupu. Klik frame 1 layer kupu-kupu, pindahkan posisi objek kupu-kupu tepat di ujung garis. Klik frame 20, pindahkan posisi objek kupu-kupu tepat di ujung garis lainnya.

Gambar 2.36 Posisi Kupu-kupu pada Frame 1

Gambar 2.37 Posisi Kupu-kupu pada Frame 20

12) Panjangkan durasi animasi. Klik salah satu frame pada bagian tengah layer

guide, tekan Shift, klik frame yang sejajar pada layer image, kemudian tekan F5 hingga bagian akhir animasi berada pada frame 60.


Gambar 2.38 Hasil Penambahan Frame pada Timeline

13) Atur posisi kupu-kupu selama mengikuti path, sehingga objek kupu-kupu terlihat natural. Klik salah satu frame pada Layer kupu-kupu. Pilih Orient to Path pada Panel Properties. Tambahkan keyframe dan atur rotasi dan ukuran kupu-kupu menggunakan Free Transform Tool pada Panel Tools.

Gambar 2.39 Pilihan Orienth to Path pada Panel Properties

Gambar 2.40 Posisi dan Ukuran Kupu-kupu yang telah diatur mengikuti Path

14) Tekan Ctrl+Enter untuk melihat hasil animasi motion guide.


3 PEMBUATAN ANIMASI KARAKTER

3.1 Menggambar Karakter Lebah

Pada bab ini akan dibahas teknik menggambar sebuah karakter kartun dan beberapa objek 2 dimensi sebagai dasar untuk mempelajari pembuatan karakter animasi. Dengan mempelajari contoh ini diharapkan dapat dikembangkan untuk membuat karakter-karakter lainnya. Sebagai contoh berikut ini adalah cara menggambar karakter lebah.


2) Pada Panel Properties klik tombol Document Properties, ubah dimensi movie menjadi 1024 x 768 pixel, ubah frame rate menjadi 12 pfs. kemudian tekan OK.

3) Buat movieclip kosong dengan nama lebah. Pada Menu Bar pilih Insert > New Symbol > beri nama “lebah”.

4) Klik ganda pada Layer 1, ubah nama layer menjadi “muka”.

5) Gambar muka lebah menggunakan Oval Tool, ubah width menjadi 145 dan height 85 pada Panel Properties. Gunakan Selection Tool untuk mengubah menjadi bentuk dasar muka sebagai berikut. Hapus storke dengan cara seleksi garis pinggir objek lalu tekan Delete. Ganti fill color menjadi #FDE3AA.

Gambar 3.1 Bentuk Dasar Objek Muka

6) Ubah bentuk dasar tersebut menjadi movieclip dengan nama “muka”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu

BAB

3

TUJUAN : Mahasiswa dapat menggunakan Panel Tools untuk menggambar karakter serta dapat menerapkan teknik animasi untuk menganimasikan karakter tersebut.


pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 27, Strength 150%, Blur Quality low, Shadow Color #DA8824, Filter angle 262, Filter distance 5, dan pilih Inner Shadow.

Gambar 3.2 Movieclip Muka dengan Efek Drop Shaddow

Gambar 3.3 Tabulasi Filters Movieclip Muka Panel Properties

7) Buat layer baru diatas layer muka. Ubah nama layer menjadi “mata kiri”.

8) Buat bola mata menggunakan Oval Tool, tekan tombol Shift + Alt untuk memperoleh bentuk lingkaran yang proporsional. Ubah properti width dan height menjadi 70, storke height 2, storke color hitam. Ubah fill color menjadi putih, pilih type radial dengan komposisi warna #FFFFFF, #F0FCFD dan #BFE4F7.

Gambar 3.4 Bentuk Dasar Objek Mata

9) Pilih Transform Gradient Tool, lalu geser center point handler ke kiri atas sebagai berikut.

Gambar 3.5 Hasil Penggeseran Area Gradien pada Objek Mata


Gambar 3.6 Komposisi Warna Gradien Objek Mata pada Panel Color

10) Buat lingkaran tengah mata menggunakan oval tool, ubah properti width dan height menjadi 18, fill color #1E1E1E (hitam). Buat 2 buah lingkaran kecil berwarna putih. Seleksi semua objek lalu jadikan group dengan menekan Ctrl+G. Kemudian tempatkan objek tersebut dibagian bawah bola mata sebagai berikut.

Gambar 3.7 Pengolahan Objek Mata

11) Tambahkan alis di atas bola mata menggunakan Line Tool. Ubah properti storke color menjadi hitam, dan storke height 5. Lalu bentuk menjadi alis menggunakan selection tool.

Gambar 3.8 Penambahan Objek Alis pada Mata

12) Buat layer baru dengan nama “mata kanan”, tempatkan dibawah layer “mata kiri”. Duplikat semua objek pada layer mata kiri, lalu tempatkan pada layer mata kanan dengan posisi sebagai berikut.


Gambar 3.9 Hasil Duplikat Objek Mata

13) Buat layer baru dengan nama “mulut”, tempatkan layer paling atas. Dengan line tool buat garis, ubah properti width menjadi 33, storke color #000000 (hitam), dan storke height 2. Lalu ubah bentuknya menggunakan selection tool sebagai berikut.

Gambar 3.10 Pengolahan Objek Mulut

14) Tempatkan objek mulut pada muka karakter seperti gambar di bawah.

Gambar 3.11 Penggabungan Objek Muka

15) Buat layer baru dengan nama “pipi”, tempatkan di bawah layer mata kanan. Buat lingkaran pipi menggunakan oval tool, ubah properti width dan height menjadi 26. Pada Panel Color, pilih type radial dengan komposisi warna #FFF7F7 dan #FCB19C. Pada komposisi warna kedua ubah alpha menjadi 82%.


Gambar 3.12 Komposisi Warna Gradien Objek Pipi pada Panel Color

16) Ubah gambar pipi tersebut menjadi movieclip dengan nama “pipi”. Duplikat objek tersebut, lalu tempatkan pada gambar sebagai berikut.

Gambar 3.13 Warna Gradien pada Objek Pipi

Gambar 3.14 Hasil Penambahan Objek Pipi pada Muka Lebah

17) Buat layer baru dengan nama “badan”, tempatkan layer paling bawah. Buat badan lebah menggunakan pencil tool, pastikan icon smooth aktif. Gunakan selection tool dan icon smooth pada bagian bawah Panel Tools hingga terbentuk badan lebah. Dengan menggunakan paint bucket tool isi warna fill dengan warna #FDE3AA. Lalu hapus storke hingga diperoleh gambar sebagai berikut.

Gambar 3.15 Pengolahan Bentuk Dasar Objek Badan


18) Ubah badan menjadi movieclip dengan nama “badan”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 79, Strength 190%, Blur Quality low, Shadow Color #DA8824, Filter angle 220, Filter distance 10, dan pilih Inner Shadow.

Gambar 3.16 Objek Badan dengan Efek Drop Shaddow

Gambar 3.17 Tabulasi Filters Objek Badan pada Panel Properties

19) Tempatkan badan sesuai gambar di bawah.

Gambar 3.18 Penambahan Objek Badan Lebah

20) Buat layer baru dengan nama “motif”, tempatkan di atas layer badan. Gunakan line tool untuk membuat motif badan lebah. Kunci layer badan selama menggambar sehingga objek badan tidak berubah. Gunakan selection tool untuk membentuk motif badan, isi warna fill dengan #000000 (hitam), lalu hapus storke.


Gambar 3.19 Pembuatan Motif pada Badan Lebah

Gambar 3.20 Hasil Pengolahan Motif pada Badan Lebah

21) Buat layer baru dengan nama “leher”, tempatkan di bawah layer muka. Gunakan pencil tool untuk menggambar bentuk dasar leher, lalu gunakan selection tool untuk memperbaiki bentuk. Isi fill color ganti warnanya menjadi #FED945, hapus storke seperti gambar di bawah ini.

Gambar 3.21 Pengolahan Bentuk Dasar Leher

22) Ubah leher menjadi movieclip dengan nama “leher”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 39, Strength 190%, Blur Quality low, Shadow Color #EB6829, Filter angle 265, Filter distance 8, dan pilih Inner Shadow. Tempatkan objek leher sebagai berikut.

Gambar 3.22 Movieclip Leher dengan Efek Drop Shaddow


Gambar 3.23 Penambahan Objek Leher Lebah

23) Buat layer baru dengan nama “kaki kanan”, tempatkan layer paling atas. Gunakan pencil tool untuk menggambar bentuk dasar kaki, perbaiki bentuk dengan selection tool. Isi fill color menggunakan paint bucket tool, ubah fill color menjadi #FDE3AA, lalu hapus storke.

Gambar 3.24 Bentuk Dasar Kaki

24) Ubah objek kaki menjadi movieclip dengan nama kaki kanan. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 5, Strength 100%, Blur Quality low, Shadow Color #DA8824, Filter angle 323, Filter distance 5, dan pilih Inner Shadow. Tempatkan objek kaki kanan sebagai berikut.

Gambar 3.25 Movieclip Kaki Kanan dengan Efek Drop Shaddow


Gambar 3.26 Penambahan Kaki Kanan Lebah

25) Buat layer baru dengan nama “kaki kiri”, tempatkan di belakang layer badan. Duplikat movieclip kaki kanan pada Panel Library, ganti nama movieclip menjadi “kaki kiri”. Pastikan layer kaki kiri terseleksi, drag movieclip kaki kiri ke area kerja. Kemudian tempatkan sebagai berikut.

Gambar 3.27 Penambahan Kaki Kiri Hasil Duplikat

26) Buat layer baru dengan nama “tangan kanan’, tempatkan di bawah layer leher. Gunakan pencil tool untuk menggambar bentuk dasar kaki, perbaiki bentuk dengan selection tool. Isi fill color menggunakan paint bucket tool, ubah fill color menjadi #FDE3AA, lalu hapus storke.

Gambar 3.28 Pengolahan Bentuk Dasar Tangan Kanan


27) Ubah objek tangan menjadi movieclip dengan nama kaki kanan. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 5, Strength 100%, Blur Quality low, Shadow Color #DA8824, Filter angle 346, Filter distance 5, dan pilih Inner Shadow. Tempatkan objek tangan kanan sebagai berikut.

Gambar 3.29 Penambahan Objek Tangan Kanan Lebah

28) Buat layer baru dengan nama “tangan kiri”, tempatkan layer paling bawah. Duplikat movieclip tangan kanan pada Panel Library, ganti nama movieclip menjadi “tangan kiri”. Pastikan layer tangan kiri terseleksi, drag movieclip tangan kiri ke area kerja. Kemudian tempatkan sebagai berikut.

Gambar 3.30 Penambahan Objek Tangan Kiri Hasil Duplikat

29) Buat layer baru dengan nama “sayap kanan’, tempatkan di bawah layer badan. Gunakan pencil tool untuk menggambar bentuk dasar sayap, perbaiki bentuk dengan selection tool. Isi fill color menggunakan paint bucket tool, ubah fill color menjadi #FDE3AA, lalu hapus storke.


Gambar 3.31 Bentuk Dasar Objek Sayap

30) Ubah objek sayap menjadi movieclip dengan nama sayap kanan. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 27, Strength 100%, Blur Quality low, Shadow Color #92CFD0, Filter angle 318, Filter distance 10, dan pilih Inner Shadow. Tempatkan objek sayap kanan sebagai berikut.

Gambar 3.32 Movieclip Sayap dengan Efek Drop Shaddow

Gambar 3.33 Penambahan Sayap Kanan Lebah

31) Buat layer baru dengan nama “sayap kiri”, tempatkan di bawah layer sayap kiri. Duplikat movieclip sayap kanan pada Panel Library, ganti nama movieclip menjadi “sayap kiri”. Pastikan layer sayap kiri terseleksi, drag movieclip sayap kiri ke area kerja. Kemudian tempatkan sebagai berikut.


Gambar 3.34 Urutan Layer pada Movieclip Lebah

Gambar 3.35 Penambahan Sayap Kiri Hasil Duplikat

32) Simpan file dengan memilih File > Save pada menu bar. Simpan dengan nama file “lebah.fla”. Tekan Ctrl+Enter untuk melihat gambar karakter.


3.2 Menggambar Objek Keranjang

Pada subbab ini kita akan membuat objek keranjang sebagai latihan dalam menggambar objek.


2) Pada Panel Properties klik tombol Document Properties, ubah dimensi movie menjadi 1024 x 768 pixel, pastikan frame rate 12 pfs. kemudian tekan OK.

3) Buat movieclip kosong dengan nama keranjang. Pada Menu Bar pilih Insert > New Symbol > beri nama “keranjang”.

4) Buat badan keranjang dengan oval tool, ubah properti width menjadi 128, height 88, fill color #FAB774 dan hilangkan storke.

Gambar 3.36 Bentuk Dasar Objek Keranjang

5) Ubah objek oval menjadi movieclip dengan nama “badan keranjang”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 24, Strength 100%, Blur Quality low, Shadow Color #AC6C1E, Filter angle 247, Filter distance 8, dan pilih Inner Shadow.

TIPS :

Pastikan icon Object Drawing pada Panel Tools Option tidak aktif selama menggambar objek.

Jika perlu gunakan subselection tool dan pen tool untuk mengatur titik-titik handle pada objek. Subselection tool dapat digunakan untuk mengubah bentuk objek, memindahkan atau menghapus titik handle. Sedangkan pen tool untuk menambahkan titik handle pada suatu objek.

Gunakan icon smooth pada Panel Properties untuk menghasilkan garis yang lebih halus.

Gunakan icon zoom untuk membantu melihat objek pada area kerja.

Gunakan titik handle seminim mungkin untuk menghasilkan ukuran File Flash yang lebih kecil.


Gambar 3.37 Movieclip Keranjang dengan Efek Drop Shaddow

6) Buat bayangan di atas badan keranjang dengan oval tool, ubah properti width menjadi 94, height 26, fill color #A66504 dan hilangkan storke. Ubah menjadi movieclip dengan nama “bayangan”. Kemudian tempatkan di atas badan keranjang.

Gambar 3.38 Bayangan Keranjang

Gambar 3.39 Penambahan Bayangan Keranjang

7) Buat tangkai keranjang menggunakan pencil tool. Perbaiki bentuknya dengan selection tool hingga terbentuk tangkai keranjang. Isi fill color dengan #FAB774, kemudian hapus storke.

Gambar 3.40 Pengolahan Objek Tangkai Keranjang

8) Ubah menjadi movieclip dengan nama “tangkai keranjang”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 5, Strength 100%, Blur Quality low, Shadow Color #AC6C1E, Filter angle 203, Filter distance 5, dan pilih Inner Shadow.


Gambar 3.41 Movieclip Tangkai Keranjang dengan Efek Drop Shaddow

Gambar 3.42 Bentuk Dasar Objek Muka

9) Buat hiasan menggunakan pencil tool. Perbaiki bentuknya dengan selection tool hingga terbentuk hiasan seperti di bawah. Isi fill color dengan #FDEE71, kemudian hapus storke.

Gambar 3.43 Pengolahan Bentuk Dasar Hiasan

10) Ubah menjadi movieclip dengan nama “hiasan”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 5, Strength 100%, Blur Quality low, Shadow Color #DD9133, Filter angle 294, Filter distance 5, dan pilih Inner Shadow.

Gambar 3.44 Movieclip Hiasan dengan Efek Drop Shaddow

11) Tempatkan hiasan seperti gambar berikut.

Gambar 3.45 Penambahan Hiasan pada Keranjang


12) Simpan file dengan memilih File > Save pada menu bar. Simpan dengan nama file “keranjang.fla”. Tekan Ctrl+Enter untuk melihat gambar karakter. Tekan Ctrl+Enter untuk melihat hasilnya.

3.3 Menggambar Objek Bunga

Pada subbab ini kita akan menggambar objek bunga sebagai latihan lain untuk menggambar objek 2 Dimensi.



3) Buat movieclip kosong dengan nama bunga. Pada Menu Bar pilih Insert > New Symbol > beri nama “bunga”.

4) Buat kelopak bunga menggunakan pencil tool. Perbaiki bentuknya dengan selection tool hingga terbentuk kelopak bunga, ubah properti width menjadi 376 dan height 300. Isi fill color dengan #F9BBD6, kemudian hapus storke.

Gambar 3.46 Pengolahan Bentuk Dasar Objek Kelopak Bunga

5) Ubah menjadi movieclip dengan nama “kelopak”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 36, Strength 100%, Blur Quality low, Shadow Color #EA80A4, Filter angle 241, Filter distance 12, dan pilih Inner Shadow.

TIPS :

Untuk mengatur posisi suatu movieclip pilih Modify > Arrange pada Menu Bar.

Gunakan Ctrl+Up untuk menempatkan suatu movieclip di depan movieclip lainnya.

Gunakan Ctrl+Down untuk menempatkan suatu movieclip di belakang movieclip lainnya.


Gambar 3.47 Movieclip Kelopak dengan Efek Drop Shaddow

6) Buat buat serbuk sari menggunakan oval tool, ubah properti width menjadi 155, height 83, fill color #FFF785, kemudian hapus storke. Gunakan free transform tool, ubah kemiringannya seperti gambar berikut.

Gambar 3.48 Bentuk Dasar Serbuk Sari

7) Buat titik-titik serbuk sari menggunakan brush tool, ubah pilih brush shape bulat dan brush size sebagai berikut.

Gambar 3.49 Ukuran Brush yang dipilih

8) Ubah fill color menjadi #FFD737 dan pilih properti smooth 100, sehingga terbentuk titik-titik serbuk sari. Seleksi titik-titik tersebut, tekan Ctrl+G untuk mengubah objek tersebut menjadi group, kemudian tempatkan pada serbuk sari sebagai berikut.

Brush Size

Brush Shape

Ukuran Brush Size yang dipilih


Gambar 3.50 Titik-titik Serbuk Sari digambar dengan Brush Tool

9) Ubah menjadi movieclip dengan nama “serbuk”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 33, Strength 100%, Blur Quality low, Shadow Color #ED9B13, Filter angle 247, Filter distance 11, dan pilih Inner Shadow.

Gambar 3.51 Movieclip Serbuk Sari dengan Efek Drop Shaddow

10) Kemudian tempatkan pada movieclip kelopak sebagai berikut.

Gambar 3.52 Penambahan Serbuk Sari Objek Bunga

11) Buat tangkai bunga menggunakan line tool. Perbaiki bentuknya dengan selection tool hingga terbentuk tangkai bunga, ubah properti width menjadi 51 dan height 234. Isi fill color dengan #ACD787, kemudian hapus storke.

Gambar 3.53 Pengolahan Objek Tangkai Bunga


12) Ubah menjadi movieclip dengan nama “tangkai”. Lalu beri efek bayangan dengan mengklik Panel Filters, klik icon Add Filter lalu pilih Drop Shaddow. Ubah properti Blur X dan Blur Y menjadi 24, Strength 100%, Blur Quality low, Shadow Color #057344, Filter angle 50, Filter distance 11, dan pilih Inner Shadow.

Gambar 3.54 Movieclip Tangkai dengan Efek Drop Shaddow

13) Kemudian tempatkan pada movieclip kelopak dan serbuk sebagai berikut.

Gambar 3.55 Penambahan Tangkai pada Objek Bunga

14) Simpan file dengan memilih File > Save pada menu bar. Simpan dengan nama file “bunga.fla”. Tekan Ctrl+Enter untuk melihat gambar karakter. Tekan Ctrl+Enter untuk melihat hasilnya.

3.4 Menganimasikan Karakter Lebah

Seperti telah dibahas pada bab sebelumnya, animasi pada dasarnya membuat suatu gambar seolah-olah bergerak. Demikian halnya pada subbab ini, kita akan menggabungkan karakter lebah, objek keranjang dan objek bunga menjadi animasi lebah yang sedang mengumpulkan madu.



3) Simpan dokumen dengan nama “animasi.fla”.


4) Masukkan movieclip bunga dengan membuka file “bunga.fla”, klik kanan pada movieclip bunga, pilih Copy kemudian pindahkan ke dokumen baru yang kita buat, klik kanan pada area kosong pada area kerja lalu pilih Paste.

5) Ganti nama layer dengan nama “bunga”.

6) Dengan cara yang sama masukkan pula movieclip lebah dari file “lebah.fla”. Tempatkan pada layer baru di atas layer bunga, ganti nama layer menjadi “lebah”. Sehingga tampilan stage menjadi sebagai berikut.

Gambar 3.56 Movieclip Lebah, Bunga dan Serbuk Sari

7) Duplicate movieclip lebah, ganti nama movieclip menjadi “lebah_madu”. Kemudian hapus karakter lebah pada stage, ganti dengan movieclip yang baru diduplikat, kemudian tempatkan seperti semula.

Gambar 3.57 Movieclip Lebah yang diganti menjadi lebah_madu


8) Masukkan movieclip keranjang dari file “keranjang.fla”. Pindahkan objek keranjang kedalam movieclip lebah_madu. Klik ganda pada movieclip lebah_madu, buat layer baru di bawah layer tangan kanan, ganti nama layer menjadi “keranjang”. Sehingga tampilan stage menjadi sebagai berikut.

Gambar 3.58 Penambahan Movieclip Keranjang dari File keranjang.fla

Gambar 3.59 Penambahan Layer keranjang pada Timeline

9) Untuk mengelompokkan movieclip pada Panel Library. Kelompokkan movieclip-movieclip yang membentuk bunga dengan cara tekan Ctrl, lalu pilih icon bunga, kelopak, serbuk dan tangkai. Kemudian klik kanan pada salah satu movieclip tersebut, pilih Move to Folder, ganti nama folder menjadi “bunga mekar”.


10) Kelompokkan juga movieclip-movieclip yang membentuk karakter lebah. Ganti nama folder menjadi “lebah madu”.

11) Kelompokkan juga movieclip-movieclip yang membentuk objek keranjang. Ganti nama folder menjadi “ember keranjang”, sehingga tampilan pada Panel Library adalah sebagai berikut.

Gambar 3.60 Pengelompokan Movieclip pada Panel Library

12) Klik ganda pada movieclip lebah_madu, panjangkan frame sampai frame 40. Klik pada frame 40 layer teratas, tekan Shift lalu klik pada frame 40 layer terbawah, klik kanan pada frame yang terseleksi, pilih Insert Frame.


Gambar 3.61 Penambahan Frame 40 pada Semua Layer

13) Pada layer tangan kanan buat keyframe pada frame 5 dengan menekan F6. Pilih salah satu frame diantara frame 1-5, klik kanan lalu pilih Create Motion Tween, sehingga tampilan timeline menjadi sebagai berikut.


14) Pada frame 5, pindahkan objek tangan kanan menggunakan tombol panah pada keyboard 4 pixel ke kanan, dan 4 pixel ke atas.

Gambar 3.63 Movieclip Tangan Kanan yang dipindahkan pada Frame 5

15) Pada layer tangan kiri buat keyframe pada frame 5 dengan menekan F6. Pilih salah satu frame diantara frame 1-5, klik kanan lalu pilih Create Motion Tween, sehingga tampilan timeline menjadi sebagai berikut.



16) Pada frame 5, pindahkan objek tangan kiri menggunakan tombol panah pada keyboard 5 pixel ke kiri, dan 5 pixel ke bawah.

Gambar 3.64 Movieclip Tangan Kiri yang dipindahkan pada Frame 5

17) Buat beberapa keyframe pada layer tangan kanan. Tekan F6 pada frame 11, 15, 21, dan 25.

18) Copy objek tangan kanan pada frame 1, lalu pilih objek tangan kanan di frame 11, kemudian klik kanan > Paste. Sehingga posisi objek tangan kanan pada frame 1 sama dengan posisi objek pada frame 11. Ulangi cara ini hingga diperoleh posisi objek yang sama pada frame 1, 11, dan 21, sehingga terlihat tangan kanan sedang mengumpulkan madu.

19) Buat motion tween diantara semua keyframe tersebut.

Gambar 3.65 Tampilan Timeline pada Layer Tangan Kanan


20) Ulangi langkah no. 17-19 pada layer tangan kiri, hingga diperoleh posisi objek yang sama pada frame 1, 11, dan 21.

21) Buat Keyframe pada frame 29 dan 34 layer tangan kanan. Seleksi objek pada frame 34, pindahkan objek tangan kanan 9 pixel kekiri dan 13 pixel kebawah. Buat motion tween diantara kedua frame tersebut.

Gambar 3.66 Tampilan Timeline pada Layer Tangan Kiri

22) Ulangi langkah no. 21 di atas sehingga diperoleh objek sebagai berikut.

23) Buat keyframe pada frame 5 layer mulut, mata kiri, mata kanan, pipi dan muka. Klik pada frame 5 layer mulut, tekan Shift lalu klik pada frame 5 layer muka, klik kanan pada frame yang terseleksi, tekan F6.

24) Buat motion tween pada semua frame tadi. Klik salah satu frame diantara

frame 1-5 layer mulut, tekan Shift lalu pilih frame yang sama pada layer muka, klik kanan lalu pilih Create Motion Tween, sehingga tampilan timeline menjadi sebagai berikut.

Gambar 3.67 Tampilan Timeline pada Layer Mulut, Mata Kiri, Mata Kanan, Pipi dan Muka

25) Pilih semua frame 5 dari layer-layer tadi. Klik frame 5 layer mulut, tekan Shift lalu klik frame 5 layer muka, hingga semua objek pada layer terseleksi.

26) Pindahkan semua objek yang terseleksi tersebut. Klik salah satu objek yang terseleksi, pindahkan objek menggunakan tombol panah pada keyboard 4 pixel ke bawah, dan 4 pixel ke kanan.


Gambar 3.68 Tampilan Muka Lebah pada Frame 5

27) Buat beberapa keyframe pada layer mulut sampai layer muka. Tekan F6 pada frame 11, 15, 21, dan 25.

28) Copy objek mulut pada frame 1, lalu pilih objek mulut di frame 11, kemudian klik kanan > Paste. Sehingga posisi objek tangan kanan pada frame 1 sama dengan posisi objek pada frame 11. Ulangi cara ini hingga diperoleh posisi objek yang sama pada frame 1, 11, dan 21.

29) Ulangi langkah no. 28 untuk layer mata kiri, mata kanan, pipi dan muka.

30) Buat motion tween diantara semua keyframe tersebut. Sehingga diperoleh tampilan timeline sebagai berikut.

Gambar 3.69 Tampilan Timeline pada Layer Mulut, Mata Kiri, Mata Kanan, Pipi dan Muka

31) Buat beberapa keyframe pada layer motif dan badan. Tekan F6 pada frame 11, 15, 21, dan 25.

32) Seleksi objek badan pada frame 5, gunakan fasilitas Scale and Rotate dengan memilih Modify > Transform > Scale and Rotate pada Menu Bar, isi Scale 100% dan Rotate 10%. Sehingga diperoleh posisi objek sebagai berikut.

Gambar 3.70 Posisi Badan setelah dirotasi 10%


Gambar 3.71 Dialog Scale and Rotate

33) Copy objek badan pada frame 5, lalu pilih objek badan di frame 15, kemudian klik kanan > Paste. Ulangi langkah ini untuk objek badan di frame 25. Sehingga diperoleh posisi objek yang sama pada frame 5, 15, dan 25.

34) Ulangi langkah no. 31-33 untuk layer motif.

35) Buat motion tween diantara semua keyframe tersebut. Sehingga diperoleh tampilan timeline sebagai berikut.

Gambar 3.72 Tampilan Timeline pada Layer Badan dan Motif

36) Buat keyframe pada layer badan, tekan F6 pada frame 29.

37) Seleksi objek badan pada frame 29. Seleksi objek badan menggunakan Free Transform Tool. Pindahkan bulatan di tengah objek (sumbu rotasi) ke titik handle dikanan tengah.

Gambar 3.73 Titik Handle yang Digeser pada Objek Badan

38) Buat keyframe pada layer motif dan badan. Tekan F6 pada frame 34. Seleksi objek di frame 34. Gunakan fasilitas Rotate and Skew dengan memilih Modify > Transform > Rotate and Skew pada Menu Bar. Geser titik handle disebelah kiri tengah objek badan, lalu geser sedikit ke atas.


Gambar 3.74 Penggunaan Rotate and Skew

39) Kecilkan objek dengan menggeser titik handle di sebelah kiri tengah ke bagian dalam objek. Sehingga diperoleh bentuk objek sebagai berikut.

Gambar 3.75 Penggunaan Free Transform Tool untuk mengecilkan Objek Badan

40) Buat motion tween diantara kedua keyframe tersebut sehingga diperoleh tampilan timeline sebagai berikut.

Gambar 3.76 Timeline Layer Badan setelah penambahan Motion Tween

41) Ulangi langkah no. 36-40 untuk layer motif, sehingga diperoleh tampilan objek sebagai berikut.

Gambar 3.77 Timeline Layer Badan setelah penambahan Motion Tween


Gambar 3.78 Timeline Layer Motif setelah penambahan Motion Tween

42) Buat layer baru, ganti nama layer menjadi “madu”. Tempatkan layer di atas layer keranjang.

43) Buat objek madu dengan Pencil Tool. Ubah fill color menjadi #F4C402 pada Panel Properties. Hilangkan storke lalu ubah objek menjadi movieclip dengan nama “madu” hingga terbentuk objek madu sebagai berikut.

Gambar 3.79 Objek Madu

44) Buat beberapa keyframe pada layer madu. Tekan F6 pada frame 5, 15, dan 25. Hapus objek madu di frame 1, lalu ubah ukuran objek madu pada frame 15 dan 25 sehingga madu terlihat membesar seperti terlihat pada gambar berikut.

Gambar 3.80 Objek Madu Terlihat Membesar pada Frame 5, 15, dan 25

Gambar 3.81 Timeline Layer madu pada Frame 5, 15, dan 25

45) Buat beberapa keyframe pada layer madu. Tekan F6 pada frame 29, 34, 36 dan 39.

46) Seleksi objek madu pada frame 34, pindahkan posisi objek 28 pixel kekanan dan 89 kebawah, hingga madu terlihat berada di atas keranjang.

47) Buat motion tween diantara frame 29 dan 34.


48) Seleksi objek madu pada frame 39, pindahkan posisi objek 37 pixel kebawah, hingga madu terlihat dijatuhkan kedalam keranjang.

49) Buat motion tween diantara frame 36 dan 39.

Gambar 3.82 Timeline Layer madu pada Frame 29, 34, 36 dan 39

50) Simpan dokumen dengan menekan Ctrl + S. Simpan dengan nama “animasi lebah.fla”.

51) Tekan Ctrl + Enter untuk melihat hasilnya.

Gambar 3.83 Tampilan Animasi Lebah Mengambil Madu

Pada Flash Player akan terlihat lebah yang sedang mengambil madu dan memasukkannya kedalam keranjang.


4 ACTIONSCRIPT

Flash memiliki keunggulan dibandingkan dengan aplikasi animasi lain dengan adanya kemampuan untuk mengontrol movie menggunakan ActionScript. ActionScript berfungsi sebagai bahasa pemrograman sehingga movie yang dihasilkan dapat menerima event (aksi) serta memproses output (reaksi) sesuai interaksi user. ActionScript terutama sangat berperan dalam pembuatan movie yang kompleks seperti pembuatan game.

4.1 Method dan Properties

Objek terdiri dari gambar, teks, maupun suara. Supaya objek-objek

tersebut dapat digunakan berulang-ulang selama pembuatan movie, maka objek

harus diubah menjadi simbol. Simbol dapat berupa movieclip, button atau

graphic. Simbol ini disimpan sebagai aset yang terdapat pada Panel Properties.

Sedangkan turunan simbol yang kita gunakan pada area kerja disebut instance.

Instance diberi nama supaya dapat dikenali oleh ActionScript.

Setiap instance movieclip dan button memiliki properti yang mengatur tampilan instance ketika movie dijalankan, seperti _x, _y, _width, _height, _visible, _alpha, dsb. Selain itu, instance tersebut juga dapat melakukan suatu pekerjaan seperti startDrag, stopDrag, onRelease, onRollOver, dsb.

4.2 Struktur Bahasa ActionScript

Flash menggunakan struktur bahasa dot syntax. Misalnya untuk mendefinisikan bahwa movieclip dengan nama “kotak” memiliki panjang 30 pixel, lebar 15 pixel, maka ditulis sebagai berikut :

kotak._width = 30;

kotak._height = 15;

BAB

4

TUJUAN : Mahasiswa dapat memahami dan menggunakan ActionScript untuk mengontrol movieclip, terutama movieclip interaktif.


Sedangkan untuk membuat kotak dapat di-drag mengikuti mouse digunakan

method startDrag sebagai berikut :

kotak.startDrag();

Tanda kurung buka dan kurung tutup pada statement di atas menunjukkan bahwa startDrag adalah method.

4.3 Variabel dan Tipe Data

Variabel digunakan untuk menampung data. Nilai yang terkandung dalam suatu variabel dapat berubah-ubah. Terdapat empat jenis tipe data, yaitu :

Tabel 4.1 Tipe Data

Tipe Data Keterangan Contoh

Number Berisi angka A = 5

String Berisi kumpulan karakter seperti angka atau huruf atau gabungan dari keduanya, dan diapit oleh tanda petik (“).

myAddress = “Jl. ABC No. 45”

Boolean Berisi nilai true atau false. Dapat juga berisi nilai 1 atau 0.

radioButton = true radioButton = false

Object Tipe data yang lebih kompleks. myMovie = new Object()

Setiap nama variabel ditulis tanpa spasi dan bersifat case sensitive, sehingga nama variabel “myBook” dan “mybook” berbeda. Selain itu terdapat kata-kata keyword tidak dapat digunakan sebagai nama variabel, seperti void, return, if, else, switch, case, break, for, while, this, with, true, false, dsb.

4.4 String dan Expression

String merupakan kumpulan karakter yang terdiri dari huruf, angka atau gabungan keduanya. Misalnya :

nama = “Adi Nugraha”;

telp = “022 7883452”;

alamat = “Jl. Cemara No. 21”;

Pada baris kedua di atas variabel telp bertipe string, karena angka-angka didalamnya diapit oleh tanda kutip dan tidak akan digunakan dalam perhitungan. Begitu juga dengan variabel alamat, isinya merupakan gabungan angka dan huruf.


Selain itu string dapat digabungkan sebagai berikut :

namadepan = “Adi”;

namabelakang = “Nugroho”;

nama = “Nama lengkap adalah” + namadepan + namabelakang;

Hasil ActionScript di atas adalah Adi Nugroho.

Expression adalah statement yang harus dievaluasi dulu sebelum Flash dapat menentukan nilainya. Biasanya berupa formula atau rumus matematika, misal :

A = 5;

B = 10;

C = A + B;

4.5 Operator

Nilai suatu variabel dapat dimodifikasi sesuai dengan kondisi yang diinginkan dengan menambahkan operator, seperti kali, bagi, tambah, kurang, mengganti nilainya menjadi true atau false, dsb. Berikut ini terdapat beberapa jenis operator yang sering digunakan, yaitu :

4.5.1 Arithmetic Operator

Terdiri dari simbol-simbol yang digunakan dalam aritmatika sebagai berikut :

Tabel 4.2 Arithmatic Operator

Simbol Nama Keterangan

+ Addition Penambahan

- Minus Pengurangan

* Multiplication Perkalian

/ Division Pembagian

% Modulo Sisa pembagian. Misal : 10%3 hasilnya adalah 1

4.5.2 Assignment Operator

Operator ini digunakan untuk menetapkan nilai pada suatu variabel.


Tabel 4.3 Assignment Operator


+= Addition Assignment Menambahkan suatu nilai pada variabel. x += 2 artinya x = x + 2

-= Minus Assignment Mengurangi suatu nilai pada variabel. x -= 2 artinya x = x - 2

*= Multiplication Assignment

Mengalikan suatu nilai pada variabel. x *= 2 artinya x = x * 2

/= Division Assignment Membagi suatu nilai pada variabel. x /=2 artinya x = x / 2

= Assignment Memberikan suatu nilai pada variabel.

%= Modulo Assignment Menambahkan nilai modulo pada variabel. x %= y artinya x = x % y

4.5.3 Bitwise Operator

Digunakan untuk menghitung dua expression atau variabel menggunakan format binary (0 dan 1).

4.5.4 Comparison Operator

Digunakan untuk membandingkan dua expression atau variabel untuk menghasilkan nilai true atau false.

Tabel 4.4 Comparison Operator


!= Inequality Mengecek apakah nilai suatu variabel tidak sama dengan variabel yang lain.

!== Strict inequality Mengecek apakah nilai dan tipe data suatu variabel tidak sama dengan variabel yang lain.

< Less than Mengecek apakah suatu variabel kurang dari variabel yang lain.

<= Less than or equal to

Mengecek apakah suatu variabel kurang atau sama dengan variabel yang lain.


== Equality Mengecek dua variabel apakah memiliki kesamaan nilai.


=== Strict equality Mengecek dua variabel apakah memiliki kesamaan nilai dan tipe data.

> Greater than Mengecek apakah suatu variabel lebih dari variabel yang lain.

>= Greater than or equal to

Mengecek apakah suatu variabel lebih atau sama dengan variabel yang lain.

4.5.5 Logical Operator

Operator ini digunakan pada operasi Boolean, seperti NOR, AND, dan OR.

Tabel 4.5 Logical Operator


! NOT Membalikan nilai suatu variabel. Misal : (A&B) nilainya true, maka !(A&B) nilainya false.

&& AND Nilai expression dua atau lebih variabel adalah true jika semua variabel true.

|| OR Nilai expression dua atau lebih variabel adalah true jika salah satu variabel true.

4.5.6 Miscelanous Operator

Tabel 4.6 Miscelanous Operator


++ Increment Menambahkan nilai dengan 1 (increment). Misal x++ artinya x = x+1.

-- Decrement Mengurangi nilai dengan 1 (decrement). Misal x—artinya x = x–1;

?: Conditional Jika variabel 1 nilainya true, maka nilai yang dihasilkan sama dengan variabel 2, jika tidak nilainya sama dengan varabel 3. Formatnya var1 ? var2 : var3 Misalnya : x = 2 y = 3 z = (x<4)? y : 6, maka z = 3

4.6 Dasar Pemrograman

Penggunaan ActionScript sangat berkaitan dengan bahasa pemrograman. Sebelum mengenal ActionScript lebih jauh, ada baiknya kita mengenal struktur dasar penggunaan statement dalam ActionScript.


Terdapat beberapa statement penting yang sering digunakan seperti kondisi, pengulangan dan function.

4.6.1 Kondisi

Kondisi digunakan untuk menyeleksi suatu pernyataan. Jika statement ini dieksekusi terdapat 2 kemungkinan, dimana hasil seleksi dapat bernilai benar (true) atau salah (false). Terdapat dua statement kondisi, yaitu if … else dan switch … case.

4.6.1.1 Statement if … else

Struktur penggunaan statement if … else adalah sebagai berikut.

if (condition) {

<statement>

…

} else {

<statement>

…

}

Contoh di bawah menyeleksi kode daerah. Jika kode daerah “BDG” akan ditampilkan kalimat “Dalam Kota” pada Panel Output. Jika tidak maka akan ditampilkan kalimat “Luar Kota”. Struktur penggunaan statement if … else adalah sebagai berikut.

if (kode == “BDG”) {

trace (“Dalam Kota”);

} else {

trace (“Luar Kota”);

}

Jika terdapat beberapa kondisi bersarang (nested) maka ditulis sbb:

if (kode == “BDG”) {

daerah = “Bandung”;

} else if (kode == “SBY”) {

daerah = “Surabaya”;

} else if (kode == “JKT”) {

daerah = “Jakarta”;

}


4.6.1.2 Statement switch … case

Struktur penggunaan statement switch … case adalah sebagai berikut :

switch (<variabel>) {

case : <statement1>

…

break;

case : <statement2>

…

break;

default :

break;

}

Jika contoh menyeleksi kode daerah di atas dituliskan dalam statement

switch ... case maka penulisannya sbb.

switch (kode) {

case “BDG” :

daerah = “Bandung”;

break;

case “SBY” :

daerah = “Surabaya”;

break;

case “JKT” :

daerah = “Jakarta”;

break;

default :

break;

}

4.6.2 Pengulangan (Looping)

Pengulangan digunakan untuk mengeksekusi blok statement secara berulang-ulang (looping). Terdapat beberapa statement pengulangan, yaitu for, while dan do … while.

4.6.2.1 Statement For

Statement for digunakan untuk melakukan pengulangan blok statement yang sudah jelas jumlah pengulangannya. Init adalah nilai awal pengulangan, condition adalah batas pengulangan, dan next adalah interval pengulangan. Pada struktur di bawah, statement akan dieksekusi berulang-ulang sebanyak batas pengulangan.


Struktur penggunaan statement for adalah sebagai berikut :

for (init; condition; next) {

<statement>

…

}

Pada contoh di bawah kita akan menghitung deret 5. Hasil penjumlahan deret disimpan pada variabel jml. Sehingga nilainya adalah hasil penjumlahan 1+2+3+4+5, yaitu 15.

jml = 0;

for ( i=1 ; i<6; i++) {

jml = jml + i;

}

4.6.2.2 Statement While

Statement while digunakan untuk melakukan pengulangan blok statement sesuai kondisi yang diberikan. Pada statement ini diberikan nilai variabel terlebih dahulu sebagai awal pengulangan.

Struktur penggunaan statement while adalah sebagai berikut :

while (condition) {

<statement>

…

}

Pada statement ini, contoh mengitung deret 5 di atas ditulis sebagai berikut.

jml = 0;

i = 1;

while ( i<6 ) {

jml = jml + i;

i = i+1;

}

4.6.2.3 Statement do … while

Statement do … while hampir sama penggunaannya dengan statement while. Struktur penggunaan statement do … while adalah sebagai berikut :

do {

<statement>

…


} while (condition)

Pada statement ini, contoh mengitung deret 5 di atas ditulis sebagai berikut.

jml = 0;

i = 1;

do {

jml = jml + i;

i = i+1;

} while ( i<6 );

4.6.3 Statement function

Statement function digunakan untuk mengeksekusi blok statement pada bagian lain. Biasanya function digunakan pada blok statement yang harus dipanggil berulang-ulang. Ketika menemukan function, Flash akan menghentikan eksekusi pada statement tersebut, untuk mengeksekusi blok statement pada function yang diletakkan ditempat lain. Setelah selesai, Flash akan melanjutkan eksekusi untuk statement di bawah function.

Struktur penggunaan statement function adalah sebagai berikut :

function ([parameter]) {

<statement>

…

}

Pada contoh ini, nilai a = 5 dan b = 4 akan dijumlah dengan memanggil function jumlah sebagai berikut.

function jumlah() {

c = a + b

}

a = 5;

b = 4;

jumlah();

trace (“c = ”+ c);

Pertamakali Flash akan membaca nilai a, nilai b :

a = 5;

b = 4;

Lalu memanggil function jumlah() :

jumlah();

function jumlah() menerima variabel a dan b, menjumlahkannya dan menyimpan hasil penjumlahan di variabel c :


function jumlah() {

c = a + b

}

Kemudian Flash melanjutkan eksekusi baris selanjutnya di bawah function, yaitu mencetak nilai c pada Panel Output.

trace (“c = ”+ c);

Penulisan function dapat dideklarasikan sebelum dipanggil, seperti contoh di atas, atau dideklarasikan setelah dipanggil (ditulis setelah statement trace).

Function juga dapat memiliki parameter, misalnya jika contoh penjumlahan diatas menggunakan parameter, maka penulisannya menjadi sebagai berikut.

function jumlah (n1, n2) {

n3 = n1 + n2;

}

jumlah(5,4);

trace("nilai3 = " + n3);

Pertamakali Flash akan memanggil function jumlah dan mengirimkan nilai 5

dan 4 :

jumlah(5,4);

Function jumlah menerima nilai 5 sebagai isi parameter pertama yaitu n1 dan

nilai 4 sebagai isi parameter kedua yaitu n2. Kemudian menjumlahkannya serta

menyimpan hasil penjumlahannya di variabel n3.

function jumlah (n1, n2) {

n3 = n1 + n2;

}

Kemudian Flash akan melanjutkan eksekusi dengan mencetak n3 pada Panel

Output.

trace("nilai3 = " + n3);


4.7 Mengenal Panel Action

Panel Action digunakan untuk menuliskan ActionScript. Jika Panel Action

belum ada, pada Menu Bar pilih Window > Actions. Pada panel ini terdapat

beberapa fungsi sebagai berikut.

Gambar 4.1 Panel Action pada Normal Mode

Action Toolbox berisi semua kategori action. Action toolbox digunkan untuk memilih kategori action ketika kita menuliskan ActionScript pada normal mode. Sedangkan Script Pane merupakan jendela editor yang digunakan untuk menuliskan ActionScript. Pada expert mode, ActionScript ditulis pada bagian ini.

Gambar 4.2 Panel Action pada Expert Mode

Keterangan : a) Add a new item to the script, digunakan untuk menambahkan action.

Ketika icon ini diklik akan ditampilkan kategori action (akan dibahas lebih lanjut pada subbab selanjutnya).

b) Find, digunakan untuk menemukan karakter tertentu pada ActionScript yang sedang ditulis.

Script Pane

Action Toolbox

a o

c d

e f

g h i j k b l

m n


c) Insert a target path, digunakan untuk menuliskan posisi movieclip pada ActionScript.

d) Check syntax, digunakan untuk mengecek syntax pada ActionScript. e) Auto format, digunakan untuk merapikan posisi blok ActionScript. Syntax

dalam blok tertentu akan ditulis menjorok kedalam. Hal ini untuk memudahkan dalam membaca ActionScript dan pencarian ketika terjadi kesalahan (error).

f) Show code hint, digunakan untuk menampilkan semua properti atau method pada objek tertentu (akan dibahas lebih lanjut pada subbab berikutnya).

g) Debug options, digunakan untuk membantu memeriksa kesalahan pada syntax yang ditulis.

h) Collapse between braces, digunakan untuk menyembunyikan ActionSript pada salah satu blok yang ditandai dengan tanda curly braces atau “{ }”

i) Collapse section, digunakan untuk menyembunyikan ActionScript pada bagian yang diseleksi

j) Expand all, digunakan untuk menampilkan semua ActionScript. k) Apply block comment, digunakan untuk memberi komentar pada blok

atau beberapa baris action yang diseleksi. Baris yang diberi komentar tidak akan dieksekusi ketika kita menjalankan movie.

l) Apply line comment, digunakan untuk memberi komentar pada baris yang diseleksi. Hampir sama dengan di atas, tetapi icon ini membuat komentar pada satu baris saja.

m) Remove comment, digunakan untuk menghilangkan komentar sehingga baris action diaktifkan kembali.

n) Show/hide toolbox, digunakan untuk menampilkan atau menyembunyikan toolbox yang ada di sebelah kiri Panel Action.

Terdapat dua cara untuk menuliskan ActionScript, yaitu :

1) Expert Mode Expert mode biasanya digunakan oleh pengguna (user) yang sudah terbiasa dengan bahasa pemrograman. Penulisan ActionScript dengan cara ini memungkinkan user untuk mengetikan semua instruksi secara manual dalam Script Pane.

2) Normal Mode Sedangkan normal mode biasanya digunakan oleh pengguna pemula yang belum terbiasa dengan bahasa pemrograman. Penulisan ActionScript dilakukan dengan memilih kategori action pada Action Toolbox, dan mengisi parameter-parameter yang dibutuhkan untuk setiap instruksi. Untuk beralih dari normal mode ke expert mode atau sebaliknya, klik

tombol Script Assist .


4.8 Menggunakan Code Hint

Code Hint adalah alat bantu untuk menuliskan ActionScript di Panel Action, biasanya digunakan pada expert mode. Secara default, code hint akan muncul otomatis, misal ketika kita menuliskan suatu clip event on ( maka sesaat kemudian akan muncul code hint, kemudian kita pilih salah satu event yang sesuai, lalu tekan Enter. Maka Flash akan menuliskan event tersebut.

Gambar 4.3 Code Hint pada Clip Event

Gambar 4.4 Bentuk Lain dari Code Hint

Untuk menampilkan code hint dapat dilakukan dengan menekan Ctrl +

Space Bar atau klik icon Show Code Hint pada Panel Action. Code hint juga dapat digunakan ketika menuliskan method atau

properties dari instance objek tertentu, tapi instance tersebut harus memiliki akhiran khusus sesuai dengan jenis instance-nya. Misal akhiran _mc pada instance bola.

Gambar 4.5 Code Hint untuk Action Instance

Akhiran untuk masing-masing kelas objek ditampilkan pada tabel berikut :


Tabel 4.7 Nama Instance dan Akhirannya

Akhiran Objek

_mc Movie Klip

_array Array

_str String

_btn Button

_txt Text Field

_fmt Text Format

_date Date

_sound Sound

_xml XML

_color Color

_video Video

4.9 Absolute Path dan Relative Path

Dalam membuat movie Flash, seringkali kita harus mengubah atau memerintahkan objek untuk melakukan sesuatu. Misalnya jika kita menginginkan movieclip kotak yang terletak di timeline utama (scene 1) terlihat transparan. Untuk melakukan hal tersebut, kita harus mendefinisikan posisi objek terlebih dahulu, kemudian menambahkan method atau properti yang diinginkan.

Terdapat 2 cara untuk menyebut objek tertentu pada Flash, yaitu absolute path dan relatif path.

1) Absolute Path

Pada absolute path, posisi objek didefinisikan secara relatif terhadap timeline utama (_root). Misalnya jika pada timeline utama terdapat 2 buah movieclip, yaitu movieclipA dan movielclipB. Dan didalam movieclipA terdapat 2 buah movieclipA1 dan movieclipA2.

Gambar 4.6 Posisi MovieclipA dan MovieclipB pada Timeline Utama


Maka jika ingin membuat movieclipA2 terlihat transparan sebesar 40%, dapat ditulis sbb :

_root.movieclipA.movieclipA2._alpha = 40;

2) Relative Path

Pada relative path, posisi objek didefinisikan secara relatif terhadap movieclip dimana kita menempatkan ActionScript (sedang aktif). Untuk memanggil movieclip satu level di atas movieclip sekarang digunakan _parent. Untuk menyebut movieclip yang sedang aktif digunakan this. Misal pada contoh absolute path di atas, jika posisi kita sekarang berada di moviclipA2, dan ingin memindahkan posisi movieclipB ke koordinat x = 20 pixel, maka ditulis sbb :

_parent._parent.movieclipB._x = 20;

Sedangkan jika kita berada di movieclipA, dan ingin memindahkan posisi movieclipA1 ke koordinat y = 30, maka ditulis sbb:

this.movieclipA1._y = 30;

4.10 Navigasi

Salah satu fungsi ActionScript adalah membuat navigasi movie Flash. Navigasi akan membantu user untuk menjelajah atau memasuki bagian-bagian tertentu pada movie, misalnya frame atau scene tertentu. Flash seringkali digunakan untuk membuat menu navigasi pada web, seperti pada pembuatan menu utama. Untuk navigasi standar, terdapat beberapa action yang sering digunakan yaitu : 1) play

Digunakan untuk menjalankan movie. Penulisannya adalah sebagai berikut:

play();

2) stop

Digunakan untuk menghentikan movie. Penulisannya adalah sebagai berikut:

stop();

3) gotoAndPlay

Digunakan untuk menjalankan movie mulai frame tertentu pada suatu scene. Misal :

gotoAndPlay(2);


Action di atas mengirimkan playhead ke frame 2, sekaligus memainkan movie. Jika akan memainkan frame 2 pada Scene 1, maka action ditulis sebagai berikut :

gotoAndPlay(“Scene 1”, 2);

4) gotoAndStop

Digunakan untuk menghentikan movie pada frame tertentu pada suatu scene. Misal :

gotoAndStop(2);

Action di atas mengirimkan playhead ke frame 2, sekaligus menghentikan movie. Jika akan memainkan frame 2 pada Scene 1, maka action ditulis sebagai berikut :

gotoAndStop(“Scene 1”, 2);

4.11 Movieclip Properties

Properti movieclip merupakan sifat-sifat yang dimiliki dan secara keseluruhan mempengaruhi tampilan suatu movieclip. Beberapa properti dapat diubah sesuai kebutuhan pada Panel Properties, atau diubah melalui ActionScript yang hasilnya akan terlihat pada saat movie dijalankan. Berikut ini adalah beberapa properti movieclip yang sering digunakan : Tabel 4.8 Properti Movieclip

Properti Keterangan

_alpha Mengatur transparansi movieclip, berkisar antara 0-100. Nilai aplha semakin 0 berarti semakin transparan.

_currentframe Menampilkan posisi playhead saat ini pada frame movieclip.

_enabled Mengaktifkan atau menonaktifkan movieclip. Properti ini bernilai boolean.

_width Untuk mengatur lebar movieclip.

_height Mengatur ketinggian movieclip.

hitArea Mengatur movieclip lain menjadi area tekan (hit area) dari suatu movieclip.

_name Menampilkan nama instance suatu movieclip.

_parent Referensi untuk menyebut movieclip yang terletak satu level di atas movieclip yang sedang aktif sekarang.


_rotation Mengatur posisi rotasi suatu movieclip. Nilai 90 berarti rotasi 900 searah jarum jam, nilai -90 berarti rotasi 900 berlawanan arah jarum jam.

_visible Menampilkan atau menyembunyikan movieclip.

_x Mengatur posisi koordinat x.

_xmouse Mengatur posisi koordinat x mouse pada movieclip.

_xscale Mengatur skala lebar movieclip. Nilai 50 berarti lebar movieclip diperkecil 50%. Nilai 200 berarti lebar moviclip diperbesar 200%.

_y Mengatur posisi koordinat y.

_ymouse Mengatur posisi koordinat y mouse pada movieclip.

_yscale Mengatur skala ketinggian movieclip. Nilai 50 berarti tinggi movieclip diperkecil 50%. Nilai 200 berarti tinggi moviclip diperbesar 200%.

Cara penggunaan properti di atas adalah dengan menyebut alamat movieclip terlebih dahulu disertai nama properti yang akan diubah. Misal jika akan mengubah posisi x dan y dari movieclip yang bernama lingkaran, maka :

lingkaran._x = 40;

lingkaran._y = 50;

4.12 Movieclip Method

Movieclip method digunakan untuk mengatur perilaku movieclip.

Misalnya movieclip yang dapat di drag mengikuti gerakan mouse, dan diletakkan

ditempat tertentu. Berikut ini beberapa movieclip method yang sering digunakan,

yaitu :

Tabel 4.9 Movieclip Method

Method Keterangan

attachAudio Menspesifikasikan alamat sumber suara yang akan dimainkan.

attachBitmap Memasukkan image bitmap pada movieclip.

attachMovie Mengambil symbol dari library dan memasukkannya kedalam movieclip.


beginBitmapFill Mengisi suatu area gambar dengan image bitmap.

beginFill Mendefinisikan posisi awal mulai pengisian area gambar.

clear Menghapus semua grafik yang dihasilkan oleh drawing method, termasuk Movieclip.lineStyle().

createEmptyMovieClip Membuat movieclip kosong, sebagai child dari movieclip yang telah ada dimana method ini dibuat.

createTextField Membuat text kosong, sebagai child dari movieclip dimana method ini dibuat.

duplicateMovieclip Membuat instance (duplikat) suatu movieclip tertentu selama movie dijalankan.

endFill Mengisi area dari garis atau kurva sebagai akhir dari method beginFill atau beginGradientFill yang telah dipanggil sebelumya.

getDepth Menampilkan level kedalaman (depth) suatu instance movieclip.

getInstaceAtDepth Menampilkan nama instance movieclip pada depth level tertentu.

getNextHighestDepth Menampilkan depth level tertinggi dari suatu movieclip.

Method Keterangan

getURL Menampilkan dokumen dari alamat (URL) tertentu kedalam jendela yang telah ditentukan.

gotoAndPlay Mulai memainkan movie pada frame tertentu.

gotoAndStop Menghentikan movie pada frame tertentu.

hitTest Mendeteksi jika suatu movieclip menyentuh area movieclip lain.

lineStyle Menetapkan jenis, warna, transparansi dari garis yang akan digambar. Digunakan bersama dengan method lineTo() atau curveTo().

lineTo Menggambar garis pada koordinat tertentu.


loadMovie Menampilkan file SWF, JPEG, GIF, atau PNG kedalam suatu movieclip ketika movie dijalankan.

loadVariables Membaca sekumpulan nilai variabel dari file external kedalam movieclip.

moveTo Berpindah ke koordinat tertentu untuk mulai menggambar.

nextFrame Mengirim playhead untuk memainkan frame selanjutnya, dan berhenti diframe tersebut.

play Memainkan playhead pada timeline movieclip yang sedang aktif.

prevFrame Mengirim playhead untuk memainkan frame sebelumnya, dan berhenti diframe tersebut.

removeMovieClip Menghapus suatu instance movieclip yang telah dibuat sebelumnya dengan method duplicateMovieClip() atau attachMovie().

setMask Membuat suatu movieclip menjadi mask dari movieclip lainnya.

startDrag Membuat movieclip dapat didrag mengikuti gerakan mouse.

stop Menghentikan playhead pada timeline movieclip yang sedang aktif.

stopDrag Meletakkan movieclip yang telah didrag sebelumnya dengan method startDrag().

Method Keterangan

swapDepths Menukar depth level suatu movieclip dengan depth level movieclip tertentu.

unloadMovie Menghapus content suatu movieclip tertentu.

4.13 Event Handler

Event adalah action yang terjadi saat movie dijalankan, misalnya ketika mouse ditekan, tombol keyboard ditekan, pointer mouse berada di atas area suatu movieclip. Event digunakan untuk memicu reaksi tertentu pada movie. Misal ketika button diklik ditampilkan hasil perhitungan, atau ketika pointer mouse berada di atas area suatu button maka button berubah warna, dsb. Untuk itu diperlukan event handler agar movie dapat dikendalikan sesuai dengan yang diinginkan. Event Handler dapat digolongkan menjadi 3 kategori, yaitu clip event, key event dan mouse event.


4.13.1 Clip Event

Clip event mengacu pada event yang terjadi pada movieclip. Terdapat beberapa clip event yang sering digunakan, yaitu :

Tabel 4.10 Clip Event

Clip Event Keterangan

onData Dijalankan ketika movieclip menerima data dari method Movieclip.loadVariables()

onDragOut Dijalankan ketika mouse ditekan dan digeser keluar (roll outside) movieclip.

onDragOver Dijalankan ketika pointer mouse di drag di atas area movieclip.

onEnterFrame Dijalankan secara berulang setiap kali playhead memasuki frame pada movieclip. Frame rate 12 berarti dalam satu detik event ini dijalankan sebanyak 12 kali.

onKeyDown Dijalankan ketika tombol keyboard ditekan pada saat playhead berada pada movieclip.

onKeyUp Dijalankan ketika tombol keyboard telah ditekan dan dilepaskan (release) pada saat playhead berada pada movieclip.

onLoad Dijalankan ketika movieclip telah diinisialisasi dan ditampilkan pada movie.

Clip Event Keterangan

onMouseDown Dijalankan ketika mouse ditekan

onMouseMove Dijalankan ketika mouse digerakkan.

onMouseUp Dijalankan ketika mouse telah ditekan dan dilepaskan (release).

onPress Dijalankan ketika mouse ditekan dan pointer mouse berada pada area movieclip.

onRelease Dijalankan ketika mouse telah ditekan dan dilepaskan dimana pointer mouse berada pada area movieclip.

onReleaseOutside Dijalankan ketika mouse telah ditekan dan dilepaskan diluar area movieclip.

onRollOut Dijalankan ketika pointer mouse digerakan keluar area movieclip.


onRollOver Dijalankan ketika pointer mouse digerakan pada area movieclip.

onUnload Dijalankan ketika playhead berada pada frame pertama sesaat setelah movieclip dihapus (removed) dari timeline.

Contoh penggunaan clip event dapat kita lihat, misalnya ketika akan membuat sebuah apel yang dibuang ke tempat sampah sebagai berikut :

1) Buka dokumen pada contoh subbab sebelumnya (Symbol Movieclip halaman 28).

2) Simpan dokumen dengan nama lain misalnya “Dragable_Apple.fla”

3) Ganti nama Layer 1 menjadi “apel”.

4) Klik movieclip apel, ganti nama instance menjadi “apel”.

Gambar 4.7 Objek Apel

Gambar 4.8 Instance Name diubah menjadi Apel

5) Buat layer baru, tempatkan di bawah layer apel. Ganti nama layer menjadi “tempatsampah”.

6) Buat objek tempat sampah, kemudian ubah menjadi movieclip dengan nama “tempatsampah”.

7) Klik movieclip tempatsampah, ganti nama instance menjadi “tempatsampah”.

Gambar 4.9 Objek Tempat Sampah


Gambar 4.10 Instance Name diubah menjadi tempatsampah

8) Buat layer baru, tempatkan layer paling atas, lalu ganti nama layer menjadi “action”.

9) Tambahkan ActionScript sebagai berikut :

apel.onPress = function() {

awal_x = apel._x;

awal_y = apel._y;

this.startDrag();

}

apel.onRelease = function() {

this.stopDrag();

if (apel.hitTest(tempatsampah)) {

apel._visible = false;

}

} else {

apel._x = awal_x;

apel._y = awal_y;

}

mouseListener.onMouseDown = function() {

trace(“Mouse ditekan”);

Mouse.hide();

}

10) Jalankan movie dengan menekan Ctrl+Enter.

Gambar 4.11 Dragable_Apple.fla ketika Movie dijalankan


Hasilnya jika apel di drag akan mengikuti gerakan mouse, dan ketika apel diletakkan dan menyentuh tempat sampah maka apel akan disembunyikan. Tetapi jika apel diletakkan ditempat lain, maka apel akan dikembalikan ke posisi semula.

4.13.2 Key Object

Key object digunakan untuk mendeteksi tombol keybord yang ditekan. Contoh penulisan key object biasanya disertai dengan method yang sering digunakan yaitu isDown :

Key.isDown(Key.ENTER);

Penulisan ENTER di atas dapat juga diganti menggunakan kode ASCII sbb :

Key.isDown(13);

Penggunaan key object biasanya dikombinasikan dengan conditional if, dan method isDown. Contoh penulisannya adalah sbb:

if (Key.isDown(Key.ENTER)) {

play();

}

Berikut ini tabel dari properti keyboard yang sering digunakan :

Tabel 4.11 Properti pada Key Object

Properti Key Code (ASCII)

BACKSPACE 8

CAPSLOCK 20

CONTROL 17

DELETEKEY 46

DOWN 40

END 35

ENTER 13

ESCAPE 27

HOME 26

INSERT 45

LEFT 37

PGDN 34


PGUP 33

RIGHT 39

SHIFT 16

SPACE 32

TAB 9

UP 38

Terdapat 2 event pada Key Object, yaitu :

Tabel 4.12 Event pada Key Object

Event Keterangan

onKeyDown Dijalankan ketika tombol keyboard ditekan.

onKeyUp Dijalankan ketika tombol keyboard dilepaskan.

Sedangkan beberapa method yang terdapat pada Key Object terdiri dari :

Tabel 4.13 Method pada Key Object

Method Keterangan

addListener Membuat suatu objek dapat menerima event onKeyDown dan onKeyUp.

getAscii Menampilkan kode ASCII dari tombol yang terakhir ditekan (press) atau dilepaskan (release).

getCode Menampilkan kode dari tombol yang terakhir ditekan, seperti ENTER, PGDN, dsb.

isDown Bernilai true jika tombol keyboard sesuai dengan key code yang telah didefinisikan. Bernilai false jika sebaliknya.

isToggled Bernilai true jika Caps Lock atau Num Lock diaktifkan. Bernilai false jika sebaliknya.

removeListener Menghapus method listener yang telah didefinisikan sebelumnya menggunakan method Key.addListener().

4.13.3 Mouse Object

Objek mouse dapat menerima event, dimana mouse event digunakan untuk mendeteksi event yang terjadi pada mouse. Misal ketika tombol mouse ditekan, dilepaskan, atau pointer mouse melalui area tertentu, dsb.


Berikut ini terdapat beberapa mouse event sebagai berikut :

Tabel 4.14 Mouse Event

Mouse Event Keterangan

onMouseDown Dijalankan ketika mouse ditekan.

onMouseMove Dijalankan ketika mouse digerakan.

onMouseUp Dijalankan ketika mouse dilepaskan.

onMouseWheel Dijalankan ketika user menggerakkan roda scroll pada mouse.

Berikut ini terdapat beberapa method pada Mouse, yaitu :

Tabel 4.15 Method pada Mouse

Method Keterangan

addListener Mendefinisikan objek agar dapat menerima Mouse Event, seperti : onMouseDown, onMouseUp, dst.

hide Menyembunyikan pointer mouse ketika movie dijalankan.

removeListener Menghapus method listener yang telah didefinisikan sebelumnya menggunakan method addListener().

show Menampilkan pointer mouse ketika movie dijalankan.

Berikut ini adalah contoh penggunaan method addListener pada objek Mouse.

mouseListener = new Object();

mouseListener.onMouseDown = function() {

trace(“Mouse ditekan”);

Mouse.hide();

}

mouseListener.onMouseUp = function() {

trace(“Mouse dilepaskan”);

Mouse.show();

}

Mouse.addListener(mouseListener);


Pada contoh di atas, ketika movie dijalankan tidak akan ditampilkan apa-apa. Jika mouse ditekan pada area stage dalam Flash Player, akan ditampilkan teks “Mouse ditekan” pada Panel Output dan pointer mouse akan disembunyikan. Kemudian jika mouse dilepaskan akan ditampilkan teks “Mouse dilepaskan” pada Panel Output dan pointer mouse akan ditampilkan kembali.


5 MEMANGGIL FILE EKSTERNAL

Ketika bekerja dengan Adobe Flash, untuk membuat suatu movie yang

utuh, seringkali kita harus melibatkan file eksternal seperti image, dan suara. File-file eksternal ini merupakan file yang telah dibuat sebelumnya menggunakan aplikasi lain diluar Adobe Flash. Berikut ini cara memanggil file-file eksternal tersebut pada Adobe Flash.

5.1 Memanggile File Image

Flash dapat mengunakan objek yang dibuat menggunakan program aplikasi lain. Kita dapat meng-impor berbagai format file grafik vektor maupun image bitmap ke dalam dokumen Flash, seperti JPEG, GIF dan BMP. Selain itu kita juga dapat mengimpor video maupun file sound ke dalam dokumen Flash.

Gambar 5.1 Tampilan Menu Import File

Untuk mengimpor objek, klik Menu File > Import > Import to Library (masukkan file image yang akan di-impor).

Terdapat beberapa pilihan untuk meng-impor objek, yaitu :

1. Import to Stage : untuk meng-impor objek langsung ke dalam stage.

2. Import to Library : untuk meng-impor objek ke dalam library sebagai list elemen yang dapat dimasukan ke dalam stage berulang kali.

3. Open External Library : untuk membuka library yang telah disimpan dalam dokumen FLA lain.

4. Import Video : untuk meng-impor objek yang berupa file video.

5.2 Memanggil File Suara

Flash dapat memainkan suara dengan dua cara, yaitu event sound dan stream sound. Untuk event sound, suara harus di-download secara lengkap

BAB

5

TUJUAN : Mahasiswa memahami cara memanggil file eksternal seperti image, dan suara. Serta melakukan publish file kedalam berbagai format file.


sebelum mulai dimainkan, dan suara tersebut terus-menerus dimainkan sampai menerima intruksi untuk berhenti.

Stream sound mulai dimainkan segera setelah terdapat cukup data untuk beberapa frame pertama yang telah di-download.

Biasanya stream sound disinkoronkan dengan timeline untuk dimainkan pada suatu website. Format Suara yang dapat dimainkan pada Flash adalah WAV dan MP3. Terdapat beberapa cara untuk memasukkan suara ke dalam suatu file Flash, yaitu :

a) Suara yang disimpan pada library, yaitu :

1) Pastikan terdapat Keyframe pada Frame 1 Layer 1

2) Import file suara, tekan File > Import > Import to Library (masukkan file suara .mp3 atau .wav) > Open

3) Drag file suara pada library ke dalam Work Area untuk memasukkan file suara ke dalam frame.

4) Untuk menambahkan efek suara, tekan Edit pada Panel Properties, lalu pilih salah satu efek, misal Fade Out.

5) Tekan Ctrl+Enter. Karena file suara disimpan pada frame, maka suara akan dimainkan selama frame tersebut dijalankan.

Gambar 5.2 Dialog Edit Suara

a) Untuk mengubah titik awal dan titik akhir suara, drag kontrol Time In dan Time Out pada Edit Envelope.

b) Untuk mengubah volume, drag handle pada envelope untuk mengubah level volume (garis envelope menunjukan besarnya volume ketika suara dimainkan. Untuk menambahkan titik handle, klik envelope line, untuk menghapus titik handle drag titik handle tersebut keluar dari window.


c) Satuan waktu yang dipakai dapat diubah antara seconds dan frames.

Gambar 5.3 Dialog Edit Suara

Pada jendela Edit Envelope terdapat beberapa pilihan Effect, yaitu:

1) None : suara dimainkan sesuai aslinya (tanpa efek) 2) Left Channel : suara hanya dimainkan pada channel kiri 3) Right Channel : suara hanya dimainkan pada channel kanan 4) Fade Left to Right : suara dimainkan dari channel kiri ke channel

kanan 5) Fade Right to Left : suara dimainkan dari channel kanan ke channel

kiri 6) Fade In : suara dimainkan dari volume kecil ke volume besar 7) Fade Out : suara dimainkan dari volume besar ke volume kecil 8) Custom : dengan custom effect kita dapat mengatur volume dan

channel yang dimainkan dengan mengubah Edit Envelope.

b) Suara disimpan sebagai file eksternal Ketika movie dimainkan kita dapat memanggil file suara yang disimpan sebagai file eksternal, dengan menempatkan ActionScript berikut ini pada Panel Action. Ini adalah contoh memainkan file suara yang dikontrol oleh sebuah button, asumsi file suara harus berada pada folder yang sama dimana kita menyimpan file Flash (.fla) : 1) Pada frame 1, buat dua buah button (lihat cara membuat button). 2) Pada Panel Properties beri nama instance masing-masing button tersebut

start_btn dan stop_btn. 3) Klik frame 1 pada timeline, buka Panel Actions lalu masukkan ActionScript

berikut :

var my_sound:Sound = new Sound();

my_sound.loadSound("song1.mp3", false);

start_btn.onRelease = function() {

my_sound.start();

};


stop_btn.onRelease = function() {

my_sound.stop();

};

4) Jalankan movie dengan menekan Ctrl + Enter. Hasilnya ketika movie dijalakankan, tekan button start untuk memainkan suara dan tekan button stop untuk menghentikan suara. Contoh di atas memainkan file suara dengan cara event sound. Untuk memainkan suara dengan stream sound, kita hanya mengganti sebagian ActionScript sbb:


my_sound.loadSound("song1.mp3", true);

Jika file suara berada ditempat lain, misal file latihan.fla berada pada direktori Data, sedangkan file suara song1.mp3 berada pada direktori Suara.

Gambar 5.4 Letak File latihan.fla dan song1.mp3

Maka ActionScript kita ubah menjadi :


my_sound.loadSound("Suara/song1.mp3", true);

5.3 Publikasi

Untuk melakukan publikasi dokumen, secara default Flash menyimpan dokumen Flash dengan format FLA (fla) dan HTML (html). Ketika dokumen Flash dieksekusi akan terbentuk file SWF (swf) yang merupakan format file yang dapat dibuka oleh Flash Player dan Browser. Flash Player secara otomatis telah di-instal ketika kita melakukan instalasi Adobe Flash CS3. Jika kita menginginkan dokumen Flash dapat dibuka dimana saja tanpa tergantung format file, pilih ekstensi EXE (exe). Flash juga dapat membuat publikasi dengan format data yang lain, seperti GIF (gif), JPG (jpg), PNG (png), dan MOV (mov).


Gambar 5.5 Tabulasi Formats pada Dialog Publish Setting

Pada tabulasi Flash terdapat berbagai pilihan publish setting untuk versi Flash Player yang akan digunakan yaitu Flash Player 9, 8, 7, 6 dst. Kita juga dapat mengatur kualitas gambar bitmap dan suara yang di-ekspor.


Gambar 5.6 Tabulasi Flash pada Dialog Publish Setting

Pada tabulasi HTML terdapat berbagai pilihan untuk publikasi dalam format HTML. Ganti pilihan Template menjadi Flash with Named Anchor.


Gambar 5.7 Tabulasi HTML dengan Template Flash with Named Anchors


6 MENAMPILKAN DATA DALAM FORMAT XML

Extensible Makup Language (XML) adalah adalah bahasa markup yang digunakan untuk menyimpan data dan tidak tergantung dengan tools tertentu (seperti editor, DMS, compiler, dsb). 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.

6.1 Struktur Data XML (Extensible Makup Language)

Format penulisan dokumen pada XML menggunakan tag yang mirip dengan penulisan HTML. Bedanya tag-tag yang digunakan pada XML bukan merupakan kata-kata yang telah ditentukan. Tag ini merupakan kata-kata bebas yang dipilih sendiri oleh pembuat dokumen XML. Berikut ini adalah contoh dokumen XML :

<kenalan>

<rekan_kerja>

<nama> Andi </nama>

<alamat> Jl. Anugerah No. 5 Bandung </alamat>

<telp>08675434568</telp>

</rekan_kerja>

<rekan_kerja>

<nama> Leni </nama>

<alamat> Perum. Bumi Asri Blok 7A No. 45 Bandung </alamat>

<telp>08675434568</telp>

</rekan_kerja>

</kenalan>

6.2 Menyimpan Data dalam Format XML

Sebelum menampilkan XML dengan Adobe Flash, perlu dipelajari cara mengorganisasikan data real kedalam format XML. Untuk membuat file XML,

BAB

6

TUJUAN : Mahasiswa memahami struktur data XML, mengerti cara menyimpan data dalam format XML, serta dapat menampilkan data XML dengan Adobe Flash.


dapat menggunakan teks editor seperti Notepad. Misalnya jika terdapat sekumpulan data mengenai paket tour. Dimana untuk setiap paket tour, yang perlu disimpan adalah data-data mengenai nama paket, rute tour, jadwal keberangkatan dan hotel tempat menginap (akomodasi), maka kita dapat merepresentasikan kumpulan data tersebut sebagai berikut : 1. Buka dokumen baru pada Notepad. Pilih File > New pada menu bar di

Notepad.

Gambar 6.1 Menu New untuk Membuka Dokumen Baru di Notepad

2. Ketik data sebagai berikut : <tour>

<tujuan>

<paket gbr="img/singapura.jpg" namapaket="Singapura (3 hari 2

malam)" rute="Singaphore City (Little India, China Town, Orchad Road) -

Sentosa Island (Underwater World, Lagoon, Musical Fountain, The

Merlion" jadwal="26-29 Desember 2010, 5-7 Februari 2011"

akomodasi="Suntec City Hotel"></paket>

<paket gbr="img/armsterdam.jpg" namapaket="Paket Tour Eropa (10

hari 9 malam)" rute="Hongkong - Shenzen - Macau - Zhuhai - Macau"

jadwal="30 Desember 2010 -3 Januari 2011" akomodasi="Mandarin

Oriental Hotel"></paket>

<paket gbr="img/hongkong.jpg" namapaket="Hongkong, Shenzen,

Macau Tour (4 hari 3 malam)" rute="Jakarta - Frankfurt - Cologne -

Armsterdam - Brussels - Paris" jadwal="20-30 Januari 2011"

akomodasi="Holiday Inn Armsterdam Schipol Hotel"></paket>

</tujuan>

</tour>

3. Simpan file dengan memilih File > Save As, lalu pilih All Files, isi nama file menjadi “paket tour.xml”.


Gambar 6.2 File paket tour.xml pada Windows Explorer

6.3 Menampilkan Data XML dengan Adobe Flash

Untuk memahami penggunaan XML untuk merepresentasikan data, berikut ini adalah contoh penggunaan XML untuk menampilkan paket tour luar negeri. Data yang ditampilkan berupa image, nama paket, rute tour, jadwal keberangkatan dan hotel tempat menginap (akomodasi).

1. Buka dokumen baru pada Adobe Flash. Pilih File > New > Action Script 2.0 pada Menu Bar.

2. Ubah dimensi movie, klik tombol document properties pada Panel Properties, lalu ubah dimensi movie menjadi 1024 x 768 pixel dan frame rate 24 fps.

3. Import image sidney.jpg. Pilih File > Import > Import to Stage lalu pilih image sidney.jpg. Ubah image menjadi movieclip dengan menekan F8, lalu ubah nama menjadi “LN_motion0”, pastikan pilihan symbol adalah movieclip, dengan registration point di sudut kiri atas. Simpan posisi movieclip di stage dengan X= 0 dan Y= 0.

Gambar 6.3 Movieclip LN_motion0


4. Ubah kembali movieclip di atas menjadi movieclip. Seleksi movieclip, tekan F8 ubah nama menjadi “LN_mc”, pastikan pilihan symbol adalah movieclip, dengan registration point di sudut kiri atas.

5. Animasikan image. Double klik movieclip LN_mc, lalu ubah nama Layer 1 menjadi “image”. Buat keyframe dengan menekan tombol F6 pada frame 24. Pilih salah satu frame diantara frame 1-24, klik kanan lalu pilih Create Motion Tween. Klik frame 1, klik movieclip LN_motion0 lalu pindahkan posisi menjadi X=0 dan Y= -768, hingga movieclip berada di bagian atas stage.

Gambar 6.4 Motion Tween pada Layer Image

Gambar 6.5 Posisi Movieclip LN_motion0 di atas Stage

6. Buat layer baru dengan nama “LN_Motion1” Buat segiempat menggunakan

rectangle tool. Ubah properti menjadi W= 670, H= 340, X= 77, Y= 235. Ubah


warna menjadi gradasi linear 3 warna, yaitu #AEF20D, #D4F87F (alpha 57%), dan #D1F876.

Gambar 6.6 Pengaturan Warna Gradasi pada Panel Color

Gambar 6.7 Movieclip LN_Motion1

7. Animasikan movieclip di atas. Pindahkan keyframe, klik frame 1 di layer LN_Motion1, lalu drag dan lepaskan pada frame 26. Buat keyframe pada frame 41 dengan menekan F6, pilih salah satu frame diantara frame 26-41, klik kanan lalu pilih Create Motion Tween. Klik frame 26, pindahkan posisi movieclip menjadi X= -780 dan Y= 235.

Gambar 6.8 Keadaan Timeline setelah Penambahan Motion Tween LN_Motion 1

8. Buat movieclip kosong sebagai target untuk menempatkan image. Buat layer baru dengan nama “target”. Buat keyframe dengan menekan F6 pada


frame 43. Pilih Insert New Symbol, isi nama menjadi “target”, dan symbol= movieclip. Tarik dan drag movieclip target dari Panel Library ke area stage. Simpan pada posisi X= 125 dan Y= 285. Pastikan movieclip diseleksi, isi instance name dengan nama “target”.

Gambar 6.9 Panel Properties pada Movieclip Target

9. Buat layer baru dengan nama “title & btn”. Buat keyframe dengan menekan F6 pada frame 43. Buat dynamic text menggunakan text tool. Isi dengan teks “<Nama Paket>”, ubah properti di Panel Properties menjadi text type= dynamic text, instance name= namapaket_txt, font= Candara, size= 16, color= #003300, bold, left align. Pastikan icon Render as HTML diaktifkan. Simpan pada posisi X= 554, Y= 288 pixel.

Gambar 6.10 Icon Render as HTML

10. Duplikat teks di atas. Seleksi teks di atas, tekan Ctrl lalu drag ke bagian bawah, sehingga terdapat duplikat teks. Isi teks dengan “<Rute>”, ubah instance name menjadi “rute_txt”, dan font size= 14. Simpan pada posisi X= 554, Y= 322.6 pixel.

11. Ulangi langkah no. 10, duplikat teks rute_txt, isi teks dengan “Jadwal Keberangkatan :”, lalu ubah text type= static text. Simpan pada posisi X= 554, Y= 379.6 pixel.

12. Ulangi langkah no. 11, duplikat static text lalu isi teks dengan “Akomodasi :”, pastikan text type= static text. Simpan pada posisi X= 554, Y= 409.6 pixel.

13. Ulangi langkah no. 10, duplikat rute_txt, isi teks dengan “<Jadwal Keberangkatan>”. Simpan pada posisi X= 706.3, Y= 379.6 pixel.

14. Ulangi langkah no. 10, duplikat rute_txt, isi teks dengan “<Akomodasi>”. Simpan pada posisi X= 706.3, Y= 409.6 pixel.

15. Tambahkan button untuk menampilkan gambar. Pilih Window > Common Libraries > Button, lalu pada Panel Library – Button, pilih Playback Rounded, kemudian Rounded Green Play. Beri nama instance name “btn_next”. Buat


copy button dengan menyeleksi button, tekan Ctrl+C, lalu tekan Ctrl+V. Pastikan button diseleksi, pilih Modify > Transform > Flip Horizontal. Beri nama instance name “btn_prev”.

Gambar 6.11 Menu Button pada Submenu Common Libraries

Gambar 6.12 Pilihan Rounded Green Play


Gambar 6.13 Teks dan Button pada Stage

16. Tambahkan actionscript untuk memanggil data pada XML. Buat layer baru dengan nama “action”. Buat keyframe dengan menekan F6 pada frame 43. Isi actionscript sebagai berikut :

stop();

function loadXML (loaded) {

if (loaded) {

xmlNode = this.firstChild;

gbr = new Array();

namapaket = new Array();

rute = new Array();

jadwal = new Array();

akomodasi = new Array();

total = xmlNode.firstChild.childNodes.length;

trace("total:"+total);

for (i=0; i<total; i++) {

gbr[i] = xmlNode.firstChild.childNodes[i].attributes.gbr;

namapaket[i] =

xmlNode.firstChild.childNodes[i].attributes.namapaket;

rute[i] = xmlNode.firstChild.childNodes[i].attributes.rute;

jadwal[i] = xmlNode.firstChild.childNodes[i].attributes.jadwal;

akomodasi[i] =

xmlNode.firstChild.childNodes[i].attributes.akomodasi;

}

loadMovie(gbr[0],"target");

namapaket_txt.htmlText = ''+namapaket[0]+'';

rute_txt.htmlText = ''+rute[0]+'';

jadwal_txt.htmlText = ''+jadwal[0]+'';

akomodasi_txt.htmlText = ''+akomodasi[0]+'';

}

}

xmlData = new XML();

xmlData.ignoreWhite = true;

xmlData.onLoad = loadXML;

xmlData.load("paket tour.xml");//("Aplikasi/Excellent Tour/paket tour.xml"

n=0;


btn_prev.onRelease = function() {

if (n>0) n--;

loadMovie(gbr[n],"target");


color="#003300">'+namapaket[n]+'';


color="#003300">'+rute[n]+'';


color="#003300">'+jadwal[n]+'';


color="#003300">'+akomodasi[n]+'';

}

btn_next.onRelease = function() {

if (n<total-1) n++;

loadMovie(gbr[n],"target");


color="#003300">'+namapaket[n]+'';


color="#003300">'+rute[n]+'';


color="#003300">'+jadwal[n]+'';


color="#003300">'+akomodasi[n]+'';

}

17. Rapikan frame pada timeline LN_mc sehingga semua layer tetap ada hingga frame 43. Untuk menambahkan frame tekan F5, sedangkan untuk mengurangi frame tekan Shift+F5.

Gambar 6.14 Keadaan Timeline LN_mc setelah Penambahan Layer Action

18. Simpan file dengan menekan Ctrl+S, lalu simpan dengan nama “xmltour.fla”. Tekan Ctrl+Enter untuk menjalankan movie.


Gambar 6.15 Tampilan File xmltour.fla


7 PEMBUATAN ANIMASI DENGAN ADOBE FLASH

Penggunaan animasi pada website sering digunakan untuk membuat tampilan website yang terkesan modern dan dinamis. Dengan animasi perhatian pengunjung tertuju pada objek yang dianimasikan. Sehingga pengunjung dapat menikmati tampilan website yang lebih hidup dan tidak monoton. Beberapa bentuk animasi pada website yaitu header banner, banner iklan, teks berjalan (ticker), dan galeri foto.

Banner sering dimanfaatkan dalam pembuatan iklan website. Dengan menampilkan animasi pada banner iklan diharapkan dapat menarik perhatian pengunjung pada iklan yang dipasang. Selain itu penggunaan animasi juga dapat menghemat area tampilan karena pesan dapat disampaikan secara lengkap dalam bentuk teks atau image secara bergantian. Hal ini merupakan solusi terutama pada banner dengan area terbatas.

Pembuatan header banner maupun banner iklan pada prinsipnya sama. Sehingga pada bab ini akan dibahas contoh pembuatan header banner.

7.1 Membuat Banner pada Website

Banner pada website merupakan suatu area khusus untuk menampilkan grafik (gambar), maupun teks. Secara umum banner pada website biasa digunakan sebagai header banner atau iklan. Header banner ditempatkan pada bagian atas website. Sedangkan banner iklan digunakan untuk menyampaikan pesan/iklan serta link, sehingga ketika banner diklik browser akan menampilkan alamat website tertentu.

Tampilan banner ada yang menampilkan gambar diam (statis) dan ada juga yang menampilkan animasi (dinamis). Berikut ini akan dibahas pembuatan header banner dinamis menggunakan flash.

Pada latihan ini kita akan menganimasikan header banner dari latihan subbab sebelumnya (Menggabungkan Beberapa Image pada BAB III). Sebelum mengolah animasi, terlebih dahulu kita harus membuat masing-masing image menjadi bagian terpisah dengan format PNG. Langkah-langkah memisahkan bagian image adalah sebagai berikut :

BAB

7

TUJUAN : Mahasiswa dapat memahami dan membuat beberapa bentuk animasi seperti banner, banner iklan, teks berjalan (ticker), dan galeri foto yang umum diimplementasikan pada website.


1) Buka file banner.psd pada Adobe Photoshop. File > Open pilih directory

tempat “banner.psd” berada.

Gambar 7.1 Tampilan File banner.psd

2) Sembunyikan semua layer kecuali layer globe. Klik icon mata pada semua layer kecuali layer globe, sehingga pada area kerja hanya terlihat image globe saja.

Gambar 7.2 Tampilan Image globe pada Area Kerja

Gambar 7.3 Tampilan File banner


3) Simpan image globe dalam format PNG. Pilih File > Save As, pilih format PNG dan simpan file dengan nama globe.png.

4) Ulangi langkah no. 2 dan 3 untuk masing-masing layer, sehingga diperoleh file hp.png, monitor.png, bg.png dan gedung.png.

Gambar 7.4 globe.png

Gambar 7.5 hp.png

Gambar 7.6 monitor.png

Gambar 7.7 bg.png

Gambar 7.8 gedung.png

5) Buka dokumen baru pada Adobe Flash. File > New > Flash File (ActionScript 2.0). Atur ukuran stage menjadi 785 x 160 pixel, dengan klik tombol


Document Properties pada Panel Properties. Isi dimensi dokumen sesuai ukuran diatas, ubah frame rate menjadi 24 fps.

Gambar 7.9 Pengaturan Dokumen pada Document Properties

6) Masukkan semua image dalam format PNG yang telah diolah di Adobe Photoshop ke Panel Library. Pilih File > Import > Import to Library, lalu pilih image globe.png, hp.png, monitor.png, bg.png dan gedung.png.

7) Ubah image globe.png menjadi movieclip. Buat layer baru dengan nama “globe”. Drag icon globe.png pada Panel Library ke area stage, tekan F8, isi nama dengan “globe”, symbol movieclip dan registration point kiri atas.

Gambar 7.10 Pengaturan Movieclip globe pada Jendela Convert to Symbol

8) Ubah masing-masing image menjadi movieclip. Ulangi langkah no. 7 untuk semua image lainnya. Beri nama masing-masing image dan layer menjadi “hp, monitor, bg, dan gedung”. Atur urutan layer sesuai gambar di bawah:


Gambar 7.11 Urutan Layer pada Panel Timeline

Gambar 7.12 Movieclip Masing-masing Image pada Panel Library

9) Buat background dengan warna gradasi. Buat layer baru dengan nama “background”, simpan layer di urutan paling bawah. Buat segiempat menggunakan rectangle tool sesuai ukuran stage. Hapus storke (jika ada). Pilih type Linear, dengan komposisi warna #729BFC, #C0E3FA, dan #88BFF7 dengan pengaturan sebagai berikut :


Gambar 7.13 Pengaturan Warna Gradasi pada Panel Color

Gambar 7.14 Tampilan Banner setelah Penambahan Background Gradasi

10) Buat segiempat dengan warna gradasi. Buat layer baru dengan nama “sidebox”. Buat segiempat menggunakan Rectangle Tool, ubah ukurannya menjadi 228 x 160 pixel. Pilih type Linear pada Panel Color, dengan komposisi warna #064DF0 dan #C0E3FA.

Gambar 7.15 Pengaturan Warna Gradasi pada Segiempat “sidebox”


Gambar 7.16 Tampilan Segiempat “sidebox”

11) Buat garis lengkung pada layer baru dengan nama “line”. Gunakan line tool untuk menggambar garis seperti terlihat pada gambar di bawah. Klik selection tool dekatkan pada bagian tengah garis hingga pointer mouse berubah menjadi tanda lengkung. Drag kebawah hingga terbentuk garis lengkung. Duplikat garis tadi hingga diperoleh bentuk sbb:

Gambar 7.17 Proses Pembuatan Garis Lengkung

12) Seleksi semua bagian garis tempatkan ditengah segiempat seperti gambar di bawah.

13) Buat kurva tertutup dan beri warna gradasi. Buat garis dengan line tool dan tempatkan seperti gambar dibawah. Gunakan paint bucket tool, lalu klik bagian tengah kurva untuk mengisi warna. Pilih type Linear pada Panel Color, dengan komposisi warna #2858BC dan #9AD1F5. Gunakan gradient transform tool pada Panel Tool untuk mengatur warna gradasi.


Gambar 7.18 Pengisian Warna Gradasi pada Kurva Tertutup

14) Hapus storke/garis pinggir kurva dan bagian lain yang tidak diperlukan dengan menyeleksi bagian dan tekan tombol delete.

Gambar 7.19 Tampilan Kurva setelah Sebagian Kurva Dihilangkan

15) Buat layer baru dengan nama “title”. Tambahkan image untuk logo perusahaan, dengan memilih File > Import > Import to Stage, lalu pilih logo.png.

16) Pada layer yang sama, tambahkan teks “INDOTECH” dengan font Bodoni MT Condensed, ukuran font 52, warna #003399. Tambahkan juga teks “Terdepan dalam Teknologi” dengan font Futura Md BT, ukuran font 16, warna #0000AA. Seleksi semua objek pada layer title, dan ubah menjadi movieclip dengan nama “title” dengan registration point ditengah. Tempatkan pada stage sebagai berikut.

Gambar 7.20 Tampilan Header Banner

17) Pastikan urutan layer sesuai gambar di bawah, buat animasi motion tween pada banner. Klik frame 20 pada layer globe, tekan Shift lalu klik frame 20 pada layer bg, sehingga frame terseleksi sejajar pada frame 20. Klik kanan


pada salah satu frame yang terseleksi, pilih Insert Keyframe. Sehingga semua semua frame tersebut menjadi keyframe.

Gambar 7.21 Urutan Layer dan Keyframe pada Frame 20

18) Klik salah satu frame ditengah layer globe misal frame 10, tekan Shift lalu klik frame 10 pada layer bg. Klik kanan pada salah satu frame yang terseleksi, sehingga frame terseleksi sejajar pada frame 10. Klik kanan pada salah satu frame yang terseleksi, pilih Create Motion Tween.

Gambar 7.22 Keadaan Layer setelah ditambahkan Motion Tween

19) Jadikan semua movieclip pada frame 1 menjadi transparan. Klik frame 1 layer globe, tekan Shift lalu klik frame 1 layer bg. Klik kanan pada salah satu frame yang terseleksi, isi Color Alpha 13% pada Panel Properties.

Gambar 7.23 Pengaturan Alpha pada Objek-objek di Frame 1


20) Atur posisi dan tambahkan frame sedemikian rupa seperti dibawah ini.

Gambar 7.24 Timeline setelah Pengaturan Posisi dan Penambahan Frame

21) Tambahkan layer baru, beri nama “action”. Klik kanan pada frame sekian, pilih Insert Keyframe. Tekan F9 untuk menampilkan Window Action. Ketik actionscript stop(); supaya tampilan banner berhenti dimainkan pada frame tersebut.

Gambar 7.25 Timeline setelah Penambahan Layer Action

Simpan file dengan nama banner_anime.fla. Tekan Ctrl + Enter untuk melihat animasi banner.

TIPS :

Seleksi semua objek pada stage, klik kanan lalu pilih Distribut to Layers untuk memindahkan masing-masing objek kedalam layer tersendiri.


7.2 Membuat Teks Berjalan (Ticker)

Ketika membuat website sering kali kita melihat teks berjalan (ticker). Teks tersebut dapat berupa berita atau pesan yang ingin disampaikan kepada pengunjung website. Berikut ini akan dibahas cara membuat teks suatu berita berjalan dari bawah ke atas.

1) Buat dokumen baru pada Adobe Flash. Pilih File > New > Flash File (ActionScript 2.0). Ubah dimensi stage, klik area kosong pada stage, klik tombol Size pada Panel Properties, ubah dimensi menjadi 190 x 240 pixel, dan frame rate 24 fps.

Gambar 7.26 Tampilan Jendela Document Properties

2) Buat teks judul. Buat layer baru dengan nama “title”. Gunakan text tool, ketik teks “TEKNOLOGI TERBARU :”. Ubah properti font Tw Cen MT, font size 14, font color #00356A, font style bold, X = 6.8 dan Y = 0.

3) Buat segiempat sebagai background. Buat layer baru dengan nama “bg”. Buat segiempat menggunakan rectangle tool. Ubah properti width 190, height 208, X = 0.7 dan Y = 29.5, fill color #00356A, alpha 10%, dan storke color #A2B5FF.

4) Buat teks yang akan dijadikan ticker. Buat layer baru dengan nama “ticker”. Gunakan text tool, ubah properti font Tw Cen MT, font size 14, font color #00356A, dan font style regular. Lalu ketik teks di bawah ini :


Gambar Teks pada Layer Ticker

5) Simpan teks pada posisi X= 6, Y= 238. Ubah teks pada layer ticker menjadi movieclip. Tekan F8, isi name “teks_ticker”, type movieclip, dan registration point di kiri atas. Beri nama instance pada Panel Properties menjadi “teks_ticker”.

Gambar 7.27 Jendela Convert to Symbol pada Movieclip teks_ticker

Gambar 7.28 Penambahan Instance Name teks_ticker pada Panel Properties

6) Buat teks berjalan dengan motion tween. Double click movieclip teks_ticker. Seleksi teks dengan selection tool, tekan F8 lalu ubah name menjadi “teks_inside”, type movieclip, dan registration point di kiri atas.

7) Pastikan posisi timeline berada pada movieclip teks_ticker. Klik frame 558 pada layer 1, klik kanan > Insert Keyframe atau tekan F6. Pilih salah satu frame ditengah, klik kanan lalu pilih Create Motion Tween.


8) Pindahkan posisi teks ke bagian atas pada keyframe terakhir. Klik keyframe 558, ubah posisi teks menjadi X= 0, Y= -490.

Gambar 7.29 Tampilan Stage pada Keyframe 558

9) Buat segiempat sebagai masking. Klik Scene 1 untuk kembali ke timeline utama. Buat layer baru dengan nama “mask”, simpan tepat diatas layer ticker. Buat segiempat menggunakan rectangle tool, ubah properti W= 190, H= 190, X= 0, Y= 38. Seleksi segiempat, ubah menjadi movieclip. Tekan F8, isi nama menjadi “mask_ticker”, type movieclip, dan registration point ditengah. Klik kanan pada layer mask, pilih Mask.

Gambar 7.30 Layer Mask yang telah diberi Efek Masking

10) Simpan file dengan nama “ticker”. File > Save, simpan file dengan nama “ticker.fla”.

11) Tekan Ctrl+Enter untuk melihat hasilnya.


Gambar 7.31 Hasil Teks Berjalan (Ticker)

7.3 Galeri Foto

Pada pembahasan ini galeri foto digunakan untuk menampilkan beberapa foto atau image pada website. Foto galeri dilengkapi dengan beberapa tombol, yaitu :

1. Next : menampilkan foto berikutnya

2. Previous : untuk menampilkan foto sebelumnya

3. Slideshow : untuk menampilkan foto secara otomatis

Supaya tampilan lebih atraktif, kita juga dapat menambahakan efek transisi. Pada contoh ini akan dibahas pembuatan galeri foto yang dapat ditampilkan secara slide show dan beberapa tombol untuk menampilkan image, yaitu tombol prev, 1,2,3,4 dan next.

7.3.1 Membuat Interface Galeri Foto

1) Buat dokumen baru pada Adobe Flash. Pilih File > New > ActionScript 2.0. Atur ukuran stage menjadi 445 x 335 pixel dan frame rate 24 fps. Simpan file dengan nama galeri_foto.fla.


Gambar 7.32 Pengaturan Dimensi dan Frame Rate pada Document Properties

2) Ganti nama Layer 1 menjadi layer “border” Buat teks “GALLERY” menggunakan text tool, ubah properti teks menjadi font Tw Cen MT, font size 15, font color #00356A, dan font style bold. Simpan pada posisi X= 0 dan Y= 0.

3) Copy teks, ganti teks menjadi “iPhone” pada layer yang sama. Ubah posisi teks menjadi X= 397 Y= 16.

4) Buat segiempat menggunakan rectangle primitive tool. Ubah properti W= 445, H= 330, X= 0, Y= 35, rectangle corner radius 5 pixel dan storke color #006699. Hapus bagian fill, double click objek segiempat, klik bagian tengah segiempat, lalu tekan delete.


Gambar 7.33 Background Galeri Foto

Gambar 7.34 Pengaturan Rectangle Corner Radius

5) Pastikan berada pada timeline Drawing Object. Buat garis pemisah diantara segiempat. Gunakan line tool, buat garis melintang diantara kotak seperti gambar di bawah. Tekan Shift ketika membuat garis, sehingga terbentuk garis lurus. Simpan garis pada posisi X= 0, Y= 337.

Gambar 7.35 Timeline Drawing Objek


Gambar 7.36 Background Galeri Foto setelah Penambahan Garis

6) Tambahkan fill color pada bagian bawah garis pembatas. Gunakan paint bucket tool, klik area pada bagian bawah garis pembatas. Ganti fill color menjadi #006699.

Gambar 7.37 Background setelah Penambahan Fill Color


7.3.2 Membuat Tombol Navigasi

1) Buat tombol untuk menampilkan image pertama. Buat layer baru dengan nama “navigasi”. Buat segiempat menggunakan rectangle primitive tool. Hapus storke color dan ubah properti menjadi W= 20, H= 20, fill color #006699.

2) Ubah segiempat menjadi simbol button. Tekan F8, beri nama “btn_1”, type button, dan registration point kiri atas. Double click button sehingga masuk ke timeline button.

Gambar 7.38 Pengaturan Button btn_1

3) Ganti nama Layer 1 menjadi “box”. Buat layer baru dengan nama “teks”. Buat teks lalu ketik “1” menggunakan text tool. Ubah properti teks menjadi font Tw Cen MT, font size 13, dan font color #FFFFFF.

4) Buat keadaan awal button menjadi transparan. Klik frame “up” pada layer box, klik segiempat lalu ubah properti alpha pada Panel Color menjadi 0%.

5) Tambahkan keyframe pada frame “over”. Klik kanan pada layer “box”, pilih Insert Keyframe atau tekan F6. Ubah fill color menjadi #037CAF.

6) Tambahkan keyframe pada frame “down”. Klik kanan pada layer box, pilih Insert Keyframe atau tekan F6. Ubah fill color menjadi #006699.

7) Tambahkan frame pada layer teks. Klik kanan pada frame “down” layer teks, pilih Insert Frame.

Gambar 7.39 Timeline btn_1

8) Klik Scene 1, lalu klik button tambahkan instance name pada Panel Properties menjadi “btn_1”.


Gambar 7.40 Scane 1 dan Instance Name

9) Duplikat button untuk membuat tombol kedua. Klik kanan icon button btn_1 pada Panel Library, lalu pilih Duplicate. Isi name dengan “btn_2”, type button.

Gambar 7.41 Menu Popup Duplikat btn_1


Gambar 7.42 Pengaturan Movieclip btn_2

10) Klik Scene 1 (untuk memastikan kita berada pada timeline utama). Drag icon btn_2 dari Panel Library ke stage. Tambahkan instance name “btn_2” pada Panel Properties. Double click button, ganti teks menjadi “2”.

Gambar 7.43 Instance btn_2 yang dipindahkan ke Stage

11) Ulangi langkah no. 9-10 untuk membuat tombol ketiga, keempat, previous dan next. Ganti nama simbol menjadi “btn_3”, “btn_4”, “btn_prev”, dan “btn_next”.

12) Satukan semua tombol menjadi movieclip. Seleksi semua button, tekan F8, isi name menjadi “navigasi”. Tambahkan instance name menjadi “navigasi” pada Panel Properties.


Gambar 7.44 Movieclip Navigasi

Gambar 7.45 Instance Name Navigasi

7.3.3 Memanggil File Image Eksternal

1) Masukkan semua image yang akan digunakan ke Panel Library. Pilih File > Import > Import to Library, lalu pilih image iPhone0.png, iPhone1.png, iPhone2.png dan iPhone3.png.


Gambar 7.46 Menu Import to Library

Gambar 7.47 Panel Library setelah Penambahan Image iPhone

2) Buat kontent galeri pertama. Buat layer baru dengan nama “galeri”. Drag icon iPhone0.png dari Panel Library ke stage.

3) Buat teks menggunakan text tool dengan properti font Tw Cen MT, font size 15, font color #00356A. Ketik isi teks seperti gambar di bawah.


Gambar 7.48 iPhone0.png dan Teks setelah ditambahkan ke Stage

4) Seleksi teks dan image, tekan F8, isi nama dengan “galeri0”, type movieclip.

Gambar 7.49 Pengaturan Movieclip galeri0

5) Duplikat movieclip. Klik kanan icon galeri0 dari Panel Library, pilih Duplicate, ganti nama menjadi “galeri1”, type movieclip.


Gambar 7.50 Menu Popup Duplikat galeri0

Gambar 7.51 Pengaturan Movieclip galeri1

6) Sesuaikan image dan teks pada movieclip galeri1. Doubleclick movieclip galeri1. Seleksi image, klik tombol Swap pada Panel Properties, pilih iPhone1.png, lalu tekan OK. Ganti teks sesuai gambar berikut.


Gambar 7.52 Tombol Swap pada Panel Properties

Gambar 7.53 Movieclip galeri1 pada Jendela Swap Symbol

Gambar 7.54 Movieclip galeri1

7) Ulangi langkah no. 5 dan 6 untuk membuat movieclip “galeri2”, dan “galeri3” seperti gambar dibawah.




8) Tambahkan frame untuk layer border dan navigasi, sehingga semua objek tetap ada hingga frame terakhir. Klik kanan pada frame 80 layer border, tekan Shift, lalu klik kanan pada frame 80 layer navigasi. Klik kanan pada salah satu frame yang terseleksi, pilih Insert Frame.


Gambar 7.57 Keadaan Timeline setelah Penambahan Frame

7.4 Membuat Efek Transisi

1) Buat pengaturan transisi movieclip sehingga movieclip yang dipilih seolah-olah muncul dari kanan luar stage. Delete movieclip galeri3, sehingga area tengah stage menjadi kosong. Buat layer baru, ubah nama layer menjadi “galeri”. Tempatkan movieclip galeri0, tarik icon movieclip galeri0 dari Panel Library. Simpan di sebelah kanan luar stage pada posisi X=445 dan Y=53.

Gambar 7.58 Posisi Movieclip galeri0 disebelah Kanan Luar Stage

2) Atur posisi akhir movieclip, buat motion tween sehingga movieclip bergerak dari kanan luar ke tengah stage. Buat keyframe pada frame 20, simpan posisi movieclip di tengah galeri foto pada posisi X=53 dan Y=53. Klik salah satu frame diantara frame 1 sampai 20, klik kanan lalu pilih Create Motion Tween.


Gambar 7.59 Penambahan Motion Tween untuk Movieclip galeri0

Gambar 7.60 Posisi galeri0 ditengah Galeri Foto pada Frame 20

3) Copy frame animasi tadi untuk membuat gerakan serupa pada movieclip galeri1. Klik frame 1 layer galeri, tekan Shift lalu klik frame 20 pada layer yang sama. Klik kanan pada salah satu frame yang diseleksi, pilih Copy Frames. Klik frame 21, lalu klik kanan dan pilih Paste Frames.

Gambar 7.61 Penambahan Motion Tween untuk Movieclip galeri1

4) Ganti movieclip galeri0 dengan galeri1. Klik keyframe 21, pilih tombol Swap pada Panel Properties, pilih movieclip galeri1, lalu tekan tombol Open. Lakukan langkah yang sama pada keyframe 40. Klik keyframe 40, pilih tombol Swap pada Panel Properties, pilih movieclip galeri1, lalu tekan tombol Open.



Gambar 7.63 Movieclip galeri1 pada Jendela Swap Symbol

5) Ulangi langkah no. 3 dan 4 untuk membuat motion tween untuk movieclip galeri2 pada frame 41-60, dan movieclip galeri3 pada frame 61-80.

Gambar 7.64 Motion Tween dan Keadaan Movieclip pada Frame 80

6) Batasi area galeri foto yang dapat dilihat user. Buat layer baru, ubah nama layer menjadi “mask”. Buat segiempat dengan ukuran sedikit lebih besar dari


movieclip, misal width = 400 dan height = 280. Klik kanan pada layer mask, lalu pilih Mask. Tambahkan frame untuk layer mask, klik kanan pada frame 80, pilih Insert Frame.

Gambar 7.65 Pengaturan Masking

7) Buat highlight sebagai tanda movieclip yang sedang ditampilkan pada galeri foto. Double klik movieclip navigasi, ubah nama layer yang mengandung button menjadi “btn”. Buat layer baru dibawah layer btn dengan nama “light”, lalu buat segiempat dengan rectangle primitive tool, ubah properti width dan height menjadi 20 px, rectangle corner radius 5 px, fill color #037CAF, hapus storke. Klik segiempat, tekan F8, ubah name menjadi “light”, type movieclip dan registration point di sudut kiri atas. Tempatkan movieclip light dibawah btn_1. Ubah nama instance name menjadi “light”.


Gambar 7.66 Movieclip light dibelakang btn_1

7.4.1 Mengatur Timeline dan ActionScript

1) Tambahkan layer action untuk mengatur gerakan setiap movieclip. Buat layer baru, ubah nama layer menjadi “action”, pastikan frame 1 terseleksi, isi nama frame menjadi “iPhone0”, lalu klik sembarang pada area kosong di luar stage. Tekan F9 untuk menampilkan Window Action, lalu isi actionscript berikut :

n=0;

navigasi.highlight._x = 58;

Gambar 7.67 Actionscript pada Frame 1 di Jendela Action

2) Tambahkan actionscript pada setiap akhir posisi motion tween. Klik kanan pada frame 20, pilih Insert Blank Keyframe, isi nama frame menjadi “iPhone1”, lalu klik sembarang pada area kosong di luar stage. Tekan F9 untuk menampilkan Window Action, lalu isi actionscript stop(); agar Flash berhenti menjalankan movie pada frame tersebut.


Gambar 7.68 Nama Frame 20 setelah diganti iPhone1

3) Ulangi langkah no. 2 pada frame 40, 60, dan 80. Lalu isi nama frame berturut-turut menjadi “iPhone2” dan “iPhone3”.

Gambar 7.69 Layer Action setelah Penambahan Keyframe

4) Tambahkan actionscript pada button-button navigasi. Double klik movieclip navigasi, klik btn_prev, tekan F9 lalu isi actionscript sebagai berikut :

on (release) {

if (this._parent.n>0) {

if (this._parent.n==1) {

light._x = 58;

this._parent.gotoAndPlay(1);

} else if (this._parent.n==2) {

light._x = 81;



light._x = 104;



light._x = 127;


}

this._parent.n -= 1;

}

}

5) Klik btn_next, tekan F9 lalu isi actionscript sebagai berikut :

on (release) {

if (this._parent.n<3) {

if (this._parent.n==0) {


light._x = 81;



light._x = 104;



light._x = 127;


}

this._parent.n += 1;

}

}

6) Klik btn_1, tekan F9 lalu isi actionscript sebagai berikut :

//Actionscript pada btn_1

on (release) {

light._x = 58;

this._parent.n=0;

if (this._parent.currentFrame != 20) {


}

}

7) Ulangi langkah no. 6 isi masing-masing actionscript pada btn_2, btn_3 dan btn_4 sebagai berikut :


on (release) {

light._x = 81;

this._parent.n=1;



}

}


on (release) {

light._x = 104;

this._parent.n=2;



}

}


on (release) {

light._x = 127;

this._parent.n=3;




}

}

Agar movieclip light berada pada posisi yang sesuai, simpan koordinat X masing-masing button btn_1 di 58, btn_2 di 81, btn_3 di 104 dan btn_4 di 127. Ubah properti alpa=0, pada objek segiempat setiap frame 1 masing-masing button (btn_1, btn_2, btn_3, dan btn_4).

8) Simpan file dengan menekan Ctrl+S. Tekan Ctrl+Enter untuk menjalankan movie.

Dengan menggunakan Actionscript, kita juga dapat menampilkan beberapa foto yang disimpan pada directory tertentu. Flash akan menjalankan perintah load untuk mengambil informasi foto yang akan ditampilkan. Dengan cara ini foto disimpan diluar file Flash, sehingga membuat ukuran file menjadi relatif lebih kecil. Cara ini digunakan jika foto yang ditampilkan bersifat dinamis.


8 MEMBUAT WEBSITE DENGAN FLASH

Pada penggunaan Flash pada website terdapat dua jenis website. Yaitu website dengan sebagian Flash dan Website Full Flash. Website dinamis dan website bisnis umumnya menggunakan Flash pada sebagian konten. Hal tersebut dipilih karena beberapa website tidak memerlukan animasi yang atraktif maupun fungsi khusus yang terdapat pada Flash. Biasanya website seperti ini menyisipkan Flash pada area tertentu yang memerlukan interaksi dan fungsi Flash, seperti menampilkan demo produk, video dan banner animasi. Sedangkan Website Full Flash tidak hanya bertujuan untuk menyediakan konten, tetapi juga menampilkan media yang atraktif dalam menyampaikan ide mengenai objek yang ditampilkan kepada pengunjung. Bidang desain dan kreatif sering menggunakan Website Full Flash untuk mendemonstrasikan potensi kreatifnya. Pada pembahasan bab ini akan dibahas pembuatan website menggunakan Flash.

8.1 Pengaturan Dokumen dan Title

1. Buka dokumen baru File > New > Flash File (Action Script 2.0). Simpan dengan nama Famous_Tour.fla. Ubah dimensi movie menjadi 1274x768 pixel, frame rate 24 fps. Klik stage, lalu klik button document properties pada Panel Properties, ubah properti dimensions menjadi 1274 dan 768 pixiel, frame rate 24.

2. Buat background pada stage. Ubah nama Layer 1 menjadi “bg”, gunakan rectangle tool untuk membuat segiempat dengan ukuran yang sama dengan stage. Klik segiempat, ubah properti width= 1274, height= 768, X= 0, dan Y= 0. Hapus storke jika ada, double klik dipinggir segiempat, lalu tekan delete. Ubah warna menjadi gradasi linear, seleksi segiempat lalu ubah warna

BAB

8

TUJUAN : Mahasiswa dapat memahami dan membuat website dengan flash, meliputi preloader, splash (intro), menu utama, memanggil konten dari Library, serta melakukan upload website.


gradasi menjadi gradasi biru #01226D, #0033ED dan #E8E6FF. Gunakan gradient transform tool untuk mengatur agar warna gelap berada dibagian atas, dan warna muda berada dibagian bawah.

Gambar 8.1 Warna Gradasi pada Background

Gambar 8.2 Warna Gradasi pada Panel Color

3. Buat layer baru dengan nama “title famous”. Buat teks “Famous” dengan text tool, ubah properti font= Edwardian Script ITC, size=71, color= #FFFFFF. Simpan posisi pada X= 946.8 dan Y=46.3 pixel. Ubah menjadi movieclip dengan nama “famous” dengan registration point di sudut kiri atas.

Gambar 8.3 Teks “Famous”


4. Buat layer baru dengan nama “title tour”. Buat teks “tour” dengan text tool, ubah properti font= Edwardian Script ITC, size=74, color= #FFFFFF. Simpan posisi pada X= 1028.5dan Y=78 pixel. Ubah menjadi movieclip dengan nama “tour” dengan registration point di sudut kiri atas.

Gambar 8.4 Teks “Famous tour”

8.2 Membuat Menu Utama

1. Buat menu utama yang terdiri dari button Home, Profile, Promo Tour, dan

Contact. Buat layer baru dengan nama “menu”. Buat background button dengan membuat segiempat menggunakan rectangle primitive tool, ubah properti width= 153.8, height= 57, rectangle corner radius= 6.2. Ubah warna menjadi gradasi dengan type= linear, fill color= #02034A, #0139BA dan #030E6B. Simpan warna muda (slider kedua) berada dibagian tengah segiempat.

Gambar 8.5 Background Button

Gambar 8.6 Warna Gradasi pada Background Button


2. Pastikan segiempat telah diseleksi, tekan F8 lalu ubah nama menjadi “btn_home”, type= button dengan registration point di sudut kiri atas.

Gambar 8.7 Pembuatan btn_home pada Jendela Convert to Symbol

3. Double klik btn_home, ubah nama layer menjadi “segiempat”. Buat keyframe pada frame over, geser keatas slider tengah fill color pada Panel Properties, hingga bagian warna muda pada bagian atas segiempat.

Gambar 8.8 Segiempat pada Frame Over

Gambar 8.9 Warna Gradasi Background Button pada Frame Over

4. Buat keyframe pada frame down, copy segiempat pada frame up ke frame down.

5. Tambahkan layer baru, beri nama teks. Gunakan text tool, buat teks “Home”. Ubah font= Edwardian Script ITC, size= 27, fill color= #FFFFFF pada Panel Properti.


Gambar 8.10 Timeline btn_home

Gambar 8.11 btn_home

6. Buat keyframe pada frame over layer teks. Tekan F6 pada frame over layer teks. Ubah size= 29, fill color= #FFFF00.

7. Buat keyframe pada frame down layer teks. Tekan F6 pada frame down layer teks. Ubah size= 29, fill color= #00FFFF.

8. Klik Scene 1, duplikat button. Klik kanan icon btn_home pada Panel Library, pilih duplicate, lalu ubah nama menjadi “btn_profile”. Tarik btn_profile dari Panel Library ke stage. Double klik btn_profile, ubah semua teks pada masing-masing keyframe di layer teks menjadi “Profile”.

Gambar 8.12 Pilihan Duplicate pada Menu Popup


Gambar 8.13 Duplikat btn_profile pada Jendela Duplicate Symbol

Gambar 8.14 btn_profile yang telah diduplikat

9. Ulangi langkah no. 8 untuk membuat “btn_promo” dan “btn_contact”. Ubah teks pada masing-masing button menjadi “Promo Tour” dan “Contact”.

10. Gabungkan semua button menjadi sebuah movieclip. Seleksi semua button, tekan F8, ubah nama menjadi “menu”, symbol movieclip dengan registration point di sudut kiri atas.

Gambar 8.15 Pengaturan Movieclip menu pada Jendela Convert to Symbol


Gambar 8.16 Movieclip Menu

8.3 Menambahkan Image sebagai Background

1. Masukkan image sebagai background. Buat layer baru dengan nama

“singapura”. Pilih File > Import > Import to Stage. Pilih image singapura_edit.png. Pada latihan ini, image telah melalui proses edit di Photoshop. Sebagian gambar dibagian atas dihapus dengan eraser tool dengan pinggiran samar. Sehingga pinggiran image terlihat samar dan menyatu dengan background.

Gambar 8.17 Menu Import to Stage


Gambar 8.18 Image Singapura sebelum dan setelah diedit

2. Ubah image di atas menjadi movieclip. Pastikan hanya image

singapura_edit.png yang diseleksi, tekan F8 lalu ubah type menjadi movieclip dan registration point di sudut kiri atas. Ubah properti color= alpha 12% pada Panel Properties. Simpan pada posisi X= 593, dan Y= 243 pixel.

3. Ulangi langkah no. 1, dan no. 2 untuk image hongkong_edit.png. Simpan dalam layer baru dengan nama “hongkong”. Ubah menjadi movieclip dengan nama “hongkong_mc”. Ubah properti color= alpha 12%. Simpan pada posisi X= 66, dan Y= 310 pixel.

Gambar 8.19 Image Hongkong sebelum dan setelah diedit


Gambar 8.20 Stage setelah penambahan Image Singapura dan Hongkong

8.4 Membuat Konten Home

1. Buat konten sesuai button yang dibuat. Buat layer baru dengan nama

“konten”. Buat segiempat dengan rectangle primitive tool, ubah properti rectangle corner radius= 10.65, W= 724, H= 477. Hapus storke, ubah fill color menjadi gradasi dengan tipe linear 2 warna, yaitu #F7FBFF (beri alpha 17%) dan #C5DCFE (beri alpha 17%).

Gambar 8.21 Rectangle Primitive Tool


Gambar 8.22 Pengaturan Segiempat pada Panel Properties

2. Ubah segiempat di atas menjadi movieclip. Tekan F8 lalu ubah nama menjadi “panel0”, tipe= movieclip dan regsitration point di sudut kiri atas. Beri efek sehingga terlihat timbul. Pasikan movieclip diseleksi, pilih tabulasi Filters pada Panel Properties. Pilih icon , lalu pilih Drop Shaddow. Ubah properti color= #000033, dan strength= 96%.

Gambar 8.23 Pengaturan Movieclip panel0

Gambar 8.24 Pengaturan Efek Drop Shaddow

3. Masukkan image dali_threepagodas.jpg. Pilih File > Import > Import to Stage pada menu utama. Buat segiempat sebagai bingkai menggunakan rectangle tool. Ubah W= 271, H= 181. Pastikan posisi bingkai dibelakang image, Simpan image ditengah bingkai. Seleksi image dan bingkai, pastikan

icon “To Stage” pada Panel Align tidak aktif. Pilih icon dan , sehingga image ditempatkan ditengah. Tekan Ctrl+G, sehingga bingkai dan image bersatu menjadi group. Simpan pada posisi X= 50 dan Y= 55.


Gambar 8.25 Icon-icon yang digunakan pada Panel Align

Gambar 8.26 Bingkai dan Image setelah di Group

4. Buat teks “Dapatkan Harga Promo” menggunakan text tool. Ubah font= Tekton Pro Cond, size= 25, color= #BFBFBF, align= center.

5. Buat segiempat menggunakan primitive rectangle tool. Ubah rectangle corner radius= 10, W=190, H= 100, fill color gradasi linear 3 warna, yaitu #000099, #3435E4, dan #2222A6.

6. Buat teks “DISCOUNT Hingga 40%” menggunakan text tool. Ubah font= Tekton Pro, color= #FFCC00, align= center. Gunakan ukuran font berbeda sebagai variasi. Teks “DISCOUNT” dan “40%” font size= 28. Dan teks “Hingga” font size= 26. Satukan segiempat dan teks “DISCOUNT Hingga 40%” menjadi group. Seleksi segiempat dan teks, tekan Ctrl+G.

7. Buat teks “Untuk Pemesanan 2 Bulan Lebih Awal” menggunakan text tool. Ubah font= Tekton Pro Cond, size= 25, color= #BFBFBF, align= center. Gunakan ukuran font berbeda sebagai variasi. Ubah teks “2 Bulan” menjadi font size= 29 dan color= #000066.

8. Ubah semua objek konten menjadi movieclip. Klik layer konten pada Panel Timeline, tekan F8, lalu ubah nama menjadi “home_in_mc” dengan registration point di sudut kiri atas.


Gambar 8.27 Movieclip home_in_mc

9. Ubah kembali movieclip di atas, menjadi movieclip lain. Pastikan movieclip diseleksi, tekan F8, lalu ubah nama menjadi “home_mc” dengan registration point di sudut kiri atas. Tambahkan linkage, klik checkbox linkage, hingga muncul tanda checklist dan identifier secara otomatis berisi nama movieclip, yaitu “home_mc”. Nama linkage ini yang berfungsi sebagai nama objek, ketika kita panggil melalui actionscript.

Gambar 8.28 Pengaturan Movieclip home_mc dengan Penambahan Linkage


Gambar 8.29 Movieclip home_mc pada Stage

10. Buat animasi konten. Double klik movieclip home_mc, ubah nama Layer 1 menjadi “home_mc”. Buat keyframe di frame 16 dengan menekan F6 pada frame 16. Buat kembali keyframe di frame 23 dengan menekan F6 pada frame 23. Pilih salah satu frame diantara frame 16-23, klik kanan lalu pilih Create Motion Tween. Klik keyframe 23, lalu klik movieclip home_in_mc. Ubah color menjadi alpha 0%.

Gambar 8.30 Movieclip home_mc dengan Penambahan Linkage

11. Buat masking untuk efek transisi pada konten. Tambahkan layer baru

dengan nama “mask”. Buat segiempat dengan rectangle tool, gunakan free

transform tool pada Panel Tools, dekatkan pointer mouse pada bagian sudut kanan bawah segiempat, drag keatas untuk memutar segiempat, sehingga posisi segiempat diagonal terhadap konten. Ubah segiempat menjadi movieclip. Tekan F8, ubah nama menjadi “mask” type= movieclip dengan registration point ditengah.


Gambar 8.31 Posisi Segiempat Diagonal terhadap Konten

12. Buat keyframe pada frame 15 dilayer mask. Tekan F6 pada frame 15, pilih salah satu frame diantara frame 1-15. Klik kanan lalu pilih Create Motion Tween.

Gambar 8.32 Layer Mask setelah dianimasikan

13. Klik frame 15, lalu pindahkan posisi segiempat menutupi seluruh konten. Klik kanan pada layer mask, lalu pilih “Mask”.

Gambar 8.33 Layer setelah Penambahan Mask


Gambar 8.34 Movieclip mask Menutupi Seluruh Konten

14. Tambahkan actionscript untuk mengatur movieclip. Buat layer baru dengan nama “action”, simpan layer pada posisi paling atas. Tekan F6 pada frame 16. Tekan F9, lalu ketik stop();. Tekan F6 pada frame 23. Tekan F9, lalu ketik actionscript sebagai berikut :

stop();

if (this._parent.aktif=="home") {

this._parent.attachMovie("home_mc","home_mc0",0,{_x:301.2,_y:21

2.8});

} else if (this._parent.aktif=="profile") {

this._parent.attachMovie("profile_mc","profile_mc0",0,{_x:301.2,_y:2

12.8});

} else if (this._parent.aktif=="promo") {

this._parent.attachMovie("promo_mc","promo_mc0",0,{_x:301.2,_y:

212.8});

} else if (this._parent.aktif=="contact") {

this._parent.attachMovie("contact_mc","contact_mc0",0,{_x:301.2,

_y:212.8});

}

15. Klik keyframe 16 pada layer action. Isi nama frame pada Panel Properties menjadi “akhir”.

Gambar 8.35 Keyframe pada Layer Action


8.5 Membuat Konten Profile

1. Duplikat movieclip. Kembali ke Scene 1, klik kanan movieclip home_mc pada

Panel Library, ganti nama menjadi “profile_mc”. Tambahkan linkage, checklist pilihan linkage sehingga identifier berisi “profile_mc”.

Gambar 8.36 Pengaturan Movieclip profile_mc pada Jendela Duplicate Symbol

2. Klik movieclip home_mc di stage. Klik tombol Swap pada Panel Properties, pilih movieclip profile_mc. Duplikat movieclip “home_in_mc”, klik kanan movieclip pada Panel Library, pilih duplicate, ubah nama menjadi “profile_in_mc”.

Gambar 8.37 Pengaturan Movieclip profile_in_mc pada Jendela Duplicate Symbol

3. Ganti movieclip home_in_mc menjadi “profil_in_mc”. Klik movieclip home_in_mc di stage. Klik tombol Swap pada Panel Properties, pilih movieclip profil_in_mc.



Gambar 8.39 Pilihan Swap Symbol menjadi profile_in_mc

4. Ganti konten home dengan konten profil. Masukkan image dengan memilih File > Import > Import to Library, lalu pilih image “tourmember.jpg”. Double klik movieclip profil_in_mc, double klik image untuk masuk ke group, klik image lalu klik tombol Swap pada Panel Properties, pilih image “tourmember.jpg”. Sesuaikan ukuran bingkai menjadi W= 266 dan H= 174. Atur posisi image di tengah bingkai, seleksi kedua objek tersebut, pastikan

icon “to stage” tidak aktif pada Panel Align, lalu pilih icon dan .


5. Ganti konten teks. Kembali ke profile_in_mc. Hapus semua objek lain selain image. Buat teks menggunakan text tool. Isi teks sebagai berikut :


PROFILE

Menyediakan paket tour baik didalam maupun luar negeri, seperti

China, Vietnam, Kamboja.

Dengan pengalaman 10 tahun menjadikan Famous Tour menjadi agen

perjalanan terpercaya untuk Anda dan keluarga.

Ubah properti font menjadi Tekton Pro Cond. Untuk judul teks “Profile” size= 27, color= #FFCC00. Sedangkan untuk teks dibawahnya, size= 26 dan color= #CACACA.

Gambar 8.41 Movieclip profile_mc pada stage

8.6 Membuat Konten Promo Tour

1. Duplikat movieclip. Kembali ke Scene 1, klik kanan movieclip profile_mc pada

Panel Library, ganti nama menjadi “promo_mc”. Tambahkan linkage, checklist pilihan linkage sehingga identifier berisi “promo_mc”.


Gambar 8.42 Pengaturan Movieclip promo_mc pada Jendela Duplicate Symbol

2. Klik movieclip profile_mc di stage. Klik tombol Swap pada Panel Properties, pilih movieclip promo_mc. Duplikat movieclip “profile_in_mc”, klik kanan movieclip pada Panel Library, pilih duplicate, ubah nama menjadi “promo_in_mc”.

3. Ganti movieclip profile_in_mc menjadi promo_in_mc. Klik movieclip profile_in_mc di stage. Klik tombol Swap pada Panel Properties, pilih movieclip promo_in_mc.

4. Ganti konten profile dengan konten promo. Double klik movieclip promo_in_mc, double klik image untuk masuk ke group, klik image lalu klik tombol Swap pada Panel Properties, pilih image “dali_threepagodas.jpg”. Sesuaikan ukuran bingkai menjadi W= 271 dan H= 181. Atur posisi image di tengah bingkai, seleksi kedua objek tersebut, pastikan icon “to stage” tidak

aktif, lalu pilih icon dan . Tekan Ctrl+G untuk menggabungkan image.



5. Ganti konten teks. Kembali ke promo_in_mc. Hapus semua objek lain selain image. Buat teks “PROMO TOUR” menggunakan text tool. Ubah font= Tekton Pro Cond, size= 25, color= #BFBFBF.

6. Buat 3 link promo menggunakan button. Buat teks “Jakarta – China”, ubah menjadi button dengan menekan F8, ubah nama menjadi “btn_promo0”, type= button dan registration point di sudut kiri atas. Pastikan objek diseleksi, ubah instance name pada Panel Properties menjadi “btn_promo0”. Double klik btn_promo0, ganti nama Layer 1 menjadi “teks”. Klik teks pada stage, ubah properti font= Tekton Pro Cond, size= 25, dan color= #FF9900. Buat keyframe pada frame over dan down. Klik frame over, lalu tekan F6. Klik teks pada stage, ubah properti color= #CCCC00. Klik frame down, lalu tekan F6. Klik teks pada stage, ubah properti color= #FF0000.

Gambar 8.44 Pengaturan btn_promo0

Gambar 8.45 Warna Teks btn_promo0 pada Frame Up, Over dan Down

7. Buat animasi panah ketika pointer mouse berada di atas button. Buat layer baru dengan nama “panah”. Buat teks “>” menggunakan text tool dengan color= #990000. Tekan Ctrl+B sehingga objek menjadi shape atau bentuk dasar, lalu tekan Ctrl+G sehingga objek berada didalam group. Buat duplikat shape dengan menekan Ctrl lalu klik objek dan drag ke arah kanan. Double klik objek yang telah diduplikat, ubah warna menjadi #FF6600. Kembali ke btn_promo0, seleksi kedua objek panah, tekan F8 lalu ubah nama menjadi “panah_in_mc”, type= movieclip dan registration point di sudut kiri atas.


Gambar 8.46 Pengaturan Movieclip panah_in_mc

Gambar 8.47 Movieclip panah_in_mc

8. Buat keyframe dengan menekan F6 pada frame over layer panah. Tekan F8 pada objek panah, pastikan type= movieclip dan registration point di sudut kiri atas, lalu ubah nama menjadi “panah_in”. Double klik movieclip panah_in, buat keyframe pada frame 4, dan 7. Kemudian buat blank keyframe pada frame 3,6, dan 9. Pastikan posisi objek pada frame 1 menjadi X= 0, frame 4 menjadi X= 6.8, dan frame 7 menjadi X= 10.8.

Gambar 8.48 Timeline pada Movieclip panah_in

9. Buat area tekan button. Buat blank keyframe pada frame hit. Buat segiempat sebagai area hit dengan ukuran W= 168, H= 29, X= -11, dan Y= -5. Kembali ke Scene 1, simpan btn_promo0 pada posisi X= 395 dan Y= 103.

Gambar 8.49 Timeline pada btn_promo0


Gambar 8.50 Objek Segiempat pada Frame Hit di btn_promo0

Gambar 8.51 btn_promo0

10. Duplikat button untuk membuat 2 link lainnya. Klik kanan btn_promo0 pada Panel Library, pilih duplicate, ubah nama menjadi btn_promo1. Drag icon btn_promo1 dari Panel Library ke stage. Simpan pada posisi X= 395 dan Y= 136. Double klik button, ubah semua teks pada masing-masing keyframe pada layer teks menjadi “ Jakarta – Vietnam – Kamboja”.


11. Ulangi langkah no. 48 untuk btn_promo2. Lalu ubah teks menjadi “Jakarta – Eropa”.


12. Buat konten lain pada promo_mc. Buat segiempat mengunakan rectangle primitive tool. Ubah rectangle corner radius= 10, W= 192, H= 100, X= 415, Y= 210, warna gradasi linear 3 warna, yaitu #000099, #3435E4, dan #2222A6. Atur orientasi warna gradasi menjadi diagonal menggunakan gradient transform tool.

Gambar 8.54 Pengaturan Segiempat pada Panel Properties


Gambar 8.55 Pengaturan Gradasi Linear dengan Gradient Transform Tool

13. Buat teks “HEMAT Hingga 40%”, ubah color= #FFCC00. Atur ukuran font masing-masing teks “HEMAT” size= 37, teks “Hingga” size= 26, dan teks “40%” size= 39. Seleksi objek segiempat dan teks “HEMAT Hingga 40%” kedalam group dengan menekan Ctrl+G.

Gambar 8.56 Pengaturan Segiempat dan Teks

14. Buat teks “Untuk Pemesanan 2 Bulan Lebih Awal”. Ubah font= Tekton Pro Cond, size= 25, color= #BFBFBF. Seleksi teks “2 Bulan” ubah size= 29 dan color= #000066.

Gambar 8.57 Pengaturan Teks

Gambar 8.58 Movieclip promo_mc pada Stage


15. Buat konten untuk masing-masing Promo Tour. Kembali ke Scene 1, duplicate movieclip promo_mc. Klik kanan icon movieclip promo_mc, pilih duplicate, ubah nama menjadi “promo_mc0”, checklist pilihan linkage sehingga identifier berisi “promo_mc0”.

8.7 Membuat Konten Promo Tour Jakarta-China

1. Duplikat movieclip promo_in_mc menjadi promo_in_mc0. Klik kanan icon

movieclip promo_in_mc di Panel Libraries, lalu pilih duplicate. Ubah nama menjadi “promo_in_mc0”. Klik movieclip promo_in_mc di stage. Klik tombol Swap pada Panel Properties, pilih movieclip promo_in_mc0.

2. Sesuaikan konten movieclip. Buat animasi untuk menampilkan 3 buah image sesuai promo tour secara bergantian. Double klik movieclip promo_in_mc0, tekan Ctrl+B pada image, untuk menghilangkan group. Tekan F8, ubah nama menjadi “banner0”, symbol= movieclip dengan registration point di sudut kiri atas. Beri nama instance name pada Panel Properties menjadi “banner0”.

3. Double klik movieclip banner0, ganti nama Layer 1 menjadi “bg”. Panjangkan frame dengan cara klik kanan pada frame 90, lalu pilih Insert Frame. Atau tekan F5 pada frame 90.

4. Buat layer baru dengan nama “foto”, pindahkan image kedalam layer tersebut. Sehingga layer bg berisi bingkai dan layer foto berisi image.

5. Masukkan 3 buah image, dali_threepagodas2.jpg, bashui_river.jpg, dan shika_mountain.jpg. Pilih File > Import > Import to Stage, lalu pilih image-image tersebut.

6. Ubah masing-masing image menjadi movieclip. Pastikan hanya image dali_threepagodas2.jpg yang diseleksi, tekan F8 lalu ubah nama menjadi dalipagoda_mc, symbol= movieclip dengan registration point di sudut kiri atas.

7. Ulangi langkah no. 6 untuk membuat movieclip “bashuiriver_mc” dan “shikamountain_mc”.

Gambar 8.59 Movieclip dalipagoda_mc, bashuiriver_mc, shikamountain_mc

8. Hapus movieclip bashuiriver_mc dan shikamountain_mc yang baru saja dibuat. Hapus image dali_threepagodas.jpg yang berada ditengah dibingkai. Simpan movieclip dalipagoda_mc di tengah bingkai. Atur ukuran bingkai sehingga sesuai dengan ukuran movieclip.


Gambar 8.60 Movieclip dalipagoda_mc di tengah Bingkai

9. Tempatkan movieclip-movieclip tadi pada frame. Buat keyframe pada layer foto dengan menekan F6 pada frame 27, 30, 31, 34, 55, 58, 59, 62, 83, 86, 87,dan 90.

10. Dengan menggunakan tombol Swap pada Panel Properties, atur isi masing-masing frame, sebagai berikut :

Gambar 8.61 Pengaturan Keyframe dan Movieclip pada Layer foto

11. Buat efek transisi transparan untuk setiap pergantian movieclip. Pilih salah satu frame diantara frame 27-30, klik kanan lalu pilih Create Motion Tween. Klik keyframe akhir atau frame 30, klik movieclip pada stage, ubah color= alpha 11% pada Panel Properties.

12. Pilih salah satu frame diantara frame 31-34, klik kanan lalu pilih Create Motion Tween. Klik keyframe awal atau frame 31, klik movieclip pada stage, ubah color= alpha 11% pada Panel Properties.

13. Ulangi langkah no. 63 untuk frame 55-58. Gunakan efek transparan pada keyframe awal atau frame 55.

14. Ulangi langkah no. 64 untuk frame 59-62. Gunakan efek transparan pada keyframe akhir atau frame 62.

15. Ulangi langkah no. 63 untuk frame 83-86. Gunakan efek transparan pada keyframe awal atau frame 83.

16. Ulangi langkah no. 64 untuk frame 87-90. Gunakan efek transparan pada keyframe akhir atau frame 90.


Gambar 8.62 Pengaturan Motion Tween pada Layer Foto

17. Buat background teks. Buat layer baru dengan nama “bg teks”. Buat keyframe dengan menekan F6 pada frame 2. Buat segiempat dengan rectangle tool. Ubah W= 130, H= 17, lalu ubah warna menjadi gradasi linear 3 warna dengan warna yang sama yaitu #FF0000, tetapi tingkat transparansinya (alpha) dibedakan menjadi alpha 60%, 60%, dan 0%.

Gambar 8.63 Objek pada bg teks

18. Buat animasi background teks. Buat keyframe pada layer bg teks dengan menekan F6 pada frame 5. Pilih salah satu frame diantara frame 2-5, klik kanan, pilih Create Shape Tween. Panjangkan frame dengan menekan F5 pada frame 90 layer bg teks.

Gambar 8.64 Pengaturan Motion Tween pada Layer bg teks

19. Buat teks sesuai image yang ditampilkan. Buat layer baru dengan nama teks. Buat keyframe dengan menekan F6 pada frame 6. Buat teks “Dali – Three Pagodas” menggunakan text tool. Ubah font= Tekton Pro Cond, size= 14, color= #FFFFFF.

20. Ulangi langkah no. 19 untuk membuat teks “Bashui River” pada frame 31, teks “Shika Mountain” pada frame 59, dan teks “Dali – Three Pagodas” pada frame 87. Panjangkan frame dengan menekan F8 pada frame 90.


Gambar Tampilan Teks sesuai Image yang ditampilkan pada Frame

21. Buat layer baru dengan nama “action”. Buat keyframe dengan menekan F8

pada frame 90. Tekan F9 untuk menampilkan Window Action, isi actionscript gotoAndPlay(6);.

Gambar 8.65 Penambahan Layer Action pada Timeline banner0

Gambar 8.66 Actionscript pada Panel Action

22. Kembali ke timeline promo_in_mc0. Buat teks menggunakan text tool, ubah properti menjadi font= Tekton Pro Cond, size= 17 dan color= #000000. Isi teks promo adalah sebagai berikut :

3 HARI

JAKARTA-CHINA

Jadwal Keberangkatan : 25 - 27 November 2011

Hari 1 : JAKARTA-KUNMING

Berkumpul di Bandara Soekarno-Hatta bersama-sama menuju Kota Kunming di

Provinsi Yunan.


Hari 2 : KUNMING -DALI

Menggunakan bis menuju Kota Dali, yang merupakan kota sejarah dan

kebudayaan di China untuk mengunjungi Three Pagodas. Yaitu bangunan

yang terdiri dari 3 pagoda yang telah berusia lebih dari 1800 tahun. Kemudian

menuju Shika Mountain.

Hari 3 : DALI-LIJIANG

Mengunjungi Bashui River yang dikenal dengan Blue Moon Valley. Kemudian

menuju Yushui zhai, suatu tempat untuk melihat kehidupan tradisional suku

minioritas Naxi. Kemudian kembali ke Jakarta.

23. Buat button kembali. Klik kanan pada icon btn_promo0, pilih Duplicate, ubah

nama button menjadi “btn_kembali”. Tarik icon btn_kembali ke stage, simpan posisi button dibagian bawah teks. Ganti teks pada setiap keyframe pada layer teks menjadi “Kembali”.

Gambar 8.67 Tampilan Movieclip promo_mc0

24. Kembali ke timeline promo_in_mc0. Seleksi btn_kembali, isi instance name pada Panel Properties menjadi “btn_kembali”.

Gambar 8.68 Timeline promo_in_mc0


Gambar 8.69 Instance Name btn_kembali pada Panel Properties

25. Klik frame 16 pada layer promo_mc. Klik movieclip promo_in_mc, klik tombol Swap pada Panel Properties, pilih movieclip promo_in_mc0.

26. Ulangi langkah no. 25 pada frame 24 untuk mengganti movieclip menjadi “promo_in_mc0”. Klik movieclip pada stage, pilih color= alpha 0%.

27. Tambahkan actionscript. Klik keyframe 1 pada layer action, tekan F9 lalu masukkan actionscript sebagai berikut :

promo_in_mc0.banner0.stop();

28. Klik keyframe 16 pada layer action, tekan F9 lalu masukkan actionscript

sebagai berikut :

stop();

promo_in_mc0.banner0.play();

this.promo_in_mc0.btn_kembali.onRelease = function() {

tmp0 = String(this._parent._parent._parent.getInstanceAtDepth(0));

tmp = [tmp0.substr(8)];

this._parent._parent._parent.aktif = "promo";

this._parent._parent._parent[tmp].gotoAndPlay("akhir");

}

29. Klik keyframe 24 pada layer action, tekan F9 lalu masukkan actionscript

sebagai berikut :

stop();

if (this._parent.aktif=="home") {

this._parent.attachMovie("home_mc","home_mc0",0,{_x:301.2,_y:21

2.8});

} else if (this._parent.aktif=="profile") {

this._parent.attachMovie("profile_mc","profile_mc0",0,{_x:301.2,_y:2

12.8});

} else if (this._parent.aktif=="promo") {

this._parent.attachMovie("promo_mc","promo_mc0",0,{_x:301.2,_y:

212.8});

} else if (this._parent.aktif=="contact") {

this._parent.attachMovie("contact_mc","contact_mc0",0,{_x:301.2,

_y:212.8});

}


Gambar Actionscript pada Layer Action

8.8 Membuat Konten Jakarta-Vietnam-Kamboja

1. Duplicate movieclip. Klik kanan icon promo_mc0, pilih Duplicate lalu ubah

nama movieclip menjadi “promo_mc1”, checklist pilihan linkage sehingga identifier secara otomatis berisi “promo_mc1”.

2. Sesuaikan konten movieclip. Kembali ke Scene 1, klik tombol Swap pada Panel Properties, pilih movieclip “promo_mc1”. Double klik movieclip hingga masuk ke timeline promo_mc1.

3. Duplikat movieclip promo_in_mc0 menjadi “promo_in_mc1”. Klik kanan icon promo_in_mc0, pilih Duplicate, lalu ubah nama movieclip menjadi “promo_in_mc1”. Klik movieclip promo_in_mc0, klik tombol Swap, pilih movieclip “promo_in_mc1”. Beri nama instance name pada Panel Properties menjadi “promo_in_mc1”. Double klik movieclip, hingga masuk ke timeline promo_in_mc1.

4. Duplikat movieclip banner0 menjadi “banner1”. Klik kanan icon banner0, pilih Duplicate, ubah nama movieclip menjadi “banner1”. Klik movieclip banner0 pada stage. Klik tombol Swap pada Panel Properties, pilih movieclip banner1. Isi instance name pada Panel Properties menjadi “banner1”. Double klik movieclip hingga masuk ke timeline banner1.

Gambar 8.70 Timeline banner 1 pada Movieclip promo_mc1

5. Masukkan 3 buah image, royalpalace.jpg, silverpagoda.jpg, dan angkorwat.jpg. Pilih File > Import > Import to Stage, lalu pilih image-image tersebut.

6. Ubah masing-masing image di atas menjadi movieclip royalpalace_mc, silverpagoda_mc, dan angkorwat_mc.


Gambar 8.71 Movieclip royalpalace_mc, silverpagoda_mc, dan angkorwat_mc

7. Sesuaikan image pada layer foto, gunakan tombol Swap untuk mengganti masing-masing movieclip pada frame-frame sebagai berikut :

Gambar 8.72 Movieclip royalpalace_mc, silverpagoda_mc, dan angkorwat_mc

8. Sesuaikan teks pada masing-masing frame di layer teks. Ubah teks menjadi “Royal Palace -Phnom Penh” pada keyframe 6, “Silver Pagoda - Phnom Penh” pada keyframe 31, “Angkor Wat – Kamboja” pada keyframe 59, dan “Royal Palace -Phnom Penh” pada keyframe 87.

Gambar 8.73 Tampilan Teks sesuai Image yang ditampilkan pada Frame

9. Sesuaikan teks promo. Kembali ke timeline promo_in_mc1, ubah teks promo menjadi sebagai berikut :

3 HARI

JAKARTA-VIETNAM-KAMBOJA

Jadwal Keberangkatan : 2 - 4 Desember 2011

Hari 1 : JAKARTA-PHNOM PENH

Berkumpul di Bandara Soekarno-Hatta bersama-sama menuju Kota

Phnom Penh menuju ke hotel dan bersantap malam bersama.


Hari 2 : PHNOM PENH-SIEM REAP

City tour menggunakan bis mengunjungi Royal Palace yang dibangun

tahun 1866, yang dahulu merupakan tempat tinggal raja. Lalu

mengunjungi Silver Pagoda, dan Tuol Sleng Genocide Museum.

Kemudian menuju bandara untuk penerbangan domestik menuju Siem

Reap.

Hari 3 : SIEM REAP-HO CHI MINH

Mengunjungi Angkor Wat yang pernah menjadi lokasi syuting Tomb

Rider. Kemudian melanjutkan penerbangan menuju Ho Chi Minh.

Kemudian mengunjungi Vinh Trang Pagoda, yaitu pagoda tertua

didaerah Mekong Delta dan dibangun pada tahun 1860. Kemudian

kembali ke Jakarta.

Gambar 8.74 Tampilan Movieclip promo_mc1

8.9 Membuat Konten Jakarta-Eropa

1. Ulangi langkah Membuat Konten Jakarta-Vietnam-Kamboja untuk membuat movieclip “promo_mc2”, movieclip “promo_in_mc2”, movieclip “banner2”. Untuk banner2, masukkan 3 buah image venince.jpg, colosseum_roma.jpg, zurich.jpg. Lalu ubah masing-masing menjadi movieclip “venince_mc”, ”roma_mc”, dan “zurich_mc”. Kemudian ubah teks promo pada timeline promo_in_mc2 menjadi sebagai berikut :


Gambar 8.75 Tampilan Teks sesuai Image yang ditampilkan pada Frame

Gambar 8.76 Movieclip promo_mc2

Teks promo pada movieclip promo_in_mc2 adalah sebagai berikut :

3 HARI

JAKARTA-EROPA

Jadwal Keberangkatan : 23 - 25 Desember 2011

Hari 1 : JAKARTA-ZURICH

Berkumpul di Bandara Soekarno-Hatta bersama-sama menuju Switzerland.

Menggunakan bis menuju Swiss untuk mengunjungi Mount Titlis yang terkenal

dengan salju abadi diketinggian 10.000 kaki. Naik ke Puncak Mount Titlis

menggunakan Revolving Cable Car (kereta gantung berputar pertama

didunia).

Hari 2 : ZURICH-VENICE

Perjalanan dilanjutkan menuju Venice, yang terkenal sebagai kota air romantis.

City tour dengan jalan kaki santai mengunjungi pabrik pembuatan gelas kristal

Murano.

Hari 3 : VENICE - ROMA


Mengunjungi Roma, yaitu ibukota Italia. Menikmati keindahan kota Roma,

mengunjugi Colloseum yang menjadi arena pertandingan para gladiator

zaman dulu. Kemudian kembali ke Jakarta.

8.10 Membuat Konten Contact

1. Ulangi langkah Membuat Konten Profile (no. 1-5) untuk membuat duplikat

movieclip menjadi “contact_mc”, “contact_in_mc”, serta ubah teks pada timeline contact_in_mc menjadi sebagai berikut :

Gambar 8.77 Movieclip contact_mc

2. Buat teks pada movieclip contact_mc sebagai berikut :

FAMOUS TOUR

Kantor :

Jl. Belitung No. 59 Bandung

Telp. (022) 4262933, 34

Fax. (022) 4262935

www.famoustour.com

email.famoustour.com

3. Animasikan semua objek pada stage. Kembali ke timeline Scene 1,

panjangkan frame bg dengan menekan F5 pada frame 37 di layer bg. 4. Animasikan teks “famous”. Buat keyframe pada frame 9 dilayer “title

famous” dengan menekan F6 pada frame 9. Pilih salah satu frame diantara frame 1-9, klik kanan pilih Create Motion Tween. Klik frame 1, pindahkan


posisi teks menjadi X= 1135, Y= 46. Pastikan teks diseleksi, pilih color= alpha 12%. Kemudian klik frame 9, pastikan posisi teks berada di X= 946, Y= 46.

5. Animasikan teks “tour”. Pindahkan frame 1 dengan cara klik pada frame 1, drag dan lepaskan pada frame 6. Buat keyframe pada frame 11 dilayer “title tour” dengan menekan F6 pada frame 11. Pilih salah satu frame diantara frame 6-11, klik kanan pilih Create Motion Tween. Klik frame 6, pindahkan posisi teks menjadi X= 1138, Y= 78. Pastikan teks diseleksi, pilih color= alpha 12%. Kemudian klik frame 11, pastikan posisi teks berada di X= 1028, Y= 78.

6. Animasikan movieclip menu. Pindahkan frame 1 dengan cara klik pada frame 1, drag dan lepaskan pada frame 9. Buat keyframe pada frame 17 dilayer “menu” dengan menekan F6 pada frame 17. Pilih salah satu frame diantara frame 9-17, klik kanan pilih Create Motion Tween. Klik frame 9, pindahkan posisi movieclip menu menjadi X= -376, Y= 94. Pastikan movieclip menu diseleksi, pilih color= alpha 12%. Kemudian klik frame 17, pastikan posisi movieclip berada di X= 123, Y= 94. Beri nama instance name “menu”, klik keyframe 9, isi instance name menjadi “menu”. Klik keyframe 17, isi instance name menjadi “menu”.

7. Animasikan movieclip singapura. Pindahkan frame 1 dengan cara klik pada frame 1, drag dan lepaskan pada frame 22. Buat keyframe pada frame 27 dilayer “singapura” dengan menekan F6 pada frame 27. Pilih salah satu frame diantara frame 22-27, klik kanan pilih Create Motion Tween. Klik frame 22. Pastikan movieclip singapura diseleksi, pilih color= alpha 12%.

8. Animasikan movieclip hongkong. Pindahkan frame 1 dengan cara klik pada frame 1, drag dan lepaskan pada frame 32. Buat keyframe pada frame 37 dilayer “hongkong” dengan menekan F6 pada frame 37. Pilih salah satu frame diantara frame 32-37, klik kanan pilih Create Motion Tween. Klik frame 32. Pastikan movieclip hongkong diseleksi, pilih color= alpha 12%.

9. Buat layer baru dengan nama “action”. Buat keyframe pada frame 37 dengan menekan F6. Masukkan actionscript, tekan F9 lalu isi sebagai berikut:

stop();

fscommand("fullscreen","true");

attachMovie("home_mc","home_mc0",0,{_x:301.2,_y:212.8});

this.menu.btn_home.onRelease = function() {

tmp0 = String(this._parent._parent.getInstanceAtDepth(0));


this._parent._parent.aktif = "home";

this._parent._parent[tmp].gotoAndPlay("akhir");

}

this.menu.btn_profile.onRelease = function() {



this._parent._parent.aktif = "profile";



}

this.menu.btn_promo.onRelease = function() {



this._parent._parent.aktif = "promo";


}

this.menu.btn_contact.onRelease = function() {



this._parent._parent.aktif = "contact";


}

Gambar 8.78 Timeline Scene 1 setelah Penambahan Animasi

10. Tekan Ctrl+S untuk menyimpan file. Tekan Ctrl+Enter untuk menjalankan movie.

8.11 Membuat Preloader

1. Tempatkan preloader pada frame 1. Pindahkan semua frame pada Scene 1 ke frame 2. Klik pada frame 1 dilayer action, lalu klik pada frame 37 dilayer bg, drag dan lepaskan frame-frame yang telah diseleksi pada frame 2.


Gambar 8.79 Keadaan Timeline setelah Frame digeser

2. Ubah background menjadi warna gelap. Klik stage, ubah background color menjadi #161616.

Gambar 8.80 Background Color pada Panel Properties

3. Buat layer baru dengan nama “preloader”. Buat segiempat dengan W= 600, H= 5, fill color= #00FF00, storke color= #CCCCCC. Ubah menjadi movieclip dengan nama “preloader_mc”. Isi instance name pada Panel Properties menjadi “preloader_mc”. Simpan dibagian tengah stage.

Gambar 8.81 preloader_mc

4. Buat teks untuk menampilkan persen data yang telah di-load. Buat teks menggunakan text tool, isi teks dengan “100%”. Ubah color= #FFFFFF, type= dynamic text, font= TW Cen MT, size= 16, align= center. Isi instance name pada Panel Properties menjadi “persen_txt”. Simpan di bawah movieclip preloader_mc.

Gambar 8.82 preloader_mc dan presen_txt

5. Buat animasi preloader. Double klik movieclip preloader_mc, lalu buat layer baru dengan nama “fill”. Seleksi bagian fill dari segiempat, pindahkan objek dengan menekan Ctrl+X, klik layer fill, klik kanan pada area kosong di stage, pilih Paste in Place.


6. Seleksi objek pada layer fill, ubah menjadi movieclip dengan nama “bar”. Klik pada frame 50 dilayer fill, lalu tekan F6. Pilih salah satu frame ditengah, klik kanan, lalu pilih Create Motion Tween. Klik pada frame 1, ubah properti width objek fill tersebut menjadi W= 10.6 pixel.

Gambar 8.83 Movieclip bar pada frame 1

Gambar 8.84 Movieclip bar pada frame 50

7. Ubah nama Layer 1 yang berisi storke segiempat menjadi “storke”. Panjangkan frame dengan cara, klik frame 50 pada layer storke, lalu tekan F5.

Gambar 8.85 Objek Storke

8. Buat layer baru dengan nama “action”, klik frame 1, tekan F9 lalu isi actionscript stop();.

9. Kembali ke Scene 1, klik frame 2 dilayer action, klik kanan lalu pilih Insert Blank Keyframe. Klik frame 1 di layer action, tekan F9 lalu isi actionscript sbb:

stop();

loaded = 0;

full = 0;

persen = 0;

_root.onEnterFrame = function() {

loaded = Math.round(_root.getBytesLoaded());

full = Math.round(_root.getBytesTotal());

persen = Math.round((loaded/full)*100);

persen_txt.text = persen+"%";

if (full<=loaded) {

delete this.onEnterFrame;

gotoAndPlay(2);

} else {

_root.preloader_mc.gotoAndStop(persen/2);

}

};


Gambar 8.86 Timeline setelah Penambahan Preloader

10. Tekan Ctrl+S untuk menyimpan file. Tekan Ctrl+Enter sebanyak 2 kali untuk melihat simulasi penggunaan preloader.

8.12 Publish HTML

Supaya company profile di atas dapat kita upload menjadi sebuah website, maka

kita harus membuat file tersebut menjadi format html. Pastikan file company profile

Famous_Tour_Jadi_Preloader.fla telah kita buka.

1. Klik File > Publish Setting pada Menu Bar

TIPS :

Image-image pada latihan di atas dapat diganti sesuai image yang tersedia. Sebagai panduan, ukuran masing-masing image adalah sebagai berikut : singapura_edit.png : 620 x 465 pixel hongkong_edit.png : 600 x 450 pixel dali_threepagodas.jpg : 256 x 166 pixel tourmember.jpg : 250 x 158 pixel dali_threepagodas2.jpg : bashui_river.jpg : shika_mountain.jpg : royalpalace.jpg : 259 x 194 pixel silverpagoda.jpg : 259 x 194 pixel angkorwat.jpg : 259 x 194 pixel


Gambar 8.87 Menu Publish Setting

2. Pilih checklist HTML, lalu tekan tombol Publish. Sehingga muncul

Famous_Tour_Jadi_Preloader.html dan AC_RunActiveContent.js.

Gambar 8.88 Pilihan Format HTML pada Jendela Publish Setting

3. Ganti nama file Famous_Tour_Jadi_Preloader .html tersebut menjadi index.html.


8.13 Upload Konten Website

Setelah konten company profile selesai dibuat, langkah selanjutnya adalah

meng-upload konten tersebut menjadi sebuah website yang dapat diakses

melalui koneksi internet. Dalam pembahasan ini akan dijelaskan cara meng-

upload website melalui hosting gratis www.000webhost.com sebagai berikut :

1. Buka website www.000webhost.com

Gambar 8.89 Tampilan Website www.000webhost.com

2. Klik tombol Order Now pada kolom Free Hosting

http://www.000webhost.com/

http://www.000webhost.com/


Gambar 8.90 Tombol Order Now pada Kolom Free Hosting

3. Isi form order sebagai berikut :

Gambar 8.91 Form Order

Dalam hal ini kita mengisi nama website “famoustour”, dan memilih subdomain

gratis yang dipilihkan secara otomatis, yaitu “web44”.

4. Klik link Resend Email untuk melakukan konfirmasi.


Gambar 8.92 Tombol Resend Email

5. Klik tombol Resend Confirmation Email untuk menerima email konfirmasi.

Gambar 8.93 Tombol Resend Confirmation Email

6. Akan muncul halaman informasi sebagai berikut. Kemudian cek email konfirmasi

pada email yang kita daftarkan tadi. Dalam hal ini [email protected].

mailto:[email protected]


Gambar 8.94 Halaman Informasi

Gambar 8.95 Email Konfirmasi yang dikirim oleh www.000webhost.com

7. Untuk melakukan konfirmasi pendaftaran hosting, buka email tersebut lalu klik link

yang tertera pada email.


Gambar 8.96 Link untuk melakukan Konfirmasi Pendaftaran Hosting

8. Klik link Refresh Status. Pada kolom status akan terlihat status hosting “Building”

lalu menjadi “Active”.

Gambar 8.97 Link Refresh Status

9. Klik link Go to CPanel untuk masuk ke halaman Cpanel.


Gambar 8.98 Link Go to CPanel

10. Klik tombol File Manager untuk memasukkan file konten website yang akan kita

buat.

Gambar 8.99 Tombol File Manager

11. Akan muncul halaman yang menyatakan bahwa session expired, dan kita diminta

untuk mengisi password (yang kita isi pada form order), dalam hal ini password

adalah “famous92”. Lalu klik tombol Continue.


Gambar 8.100 Halaman Login ketika Session Expired

12. Masukkan file konten website yang akan dibuat. Klik folder public html.

Gambar 8.101 Folder Public HTML

13. Klik tombol Upload, lalu pilih file konten website yang akan dimasukkan dengan

menekan tombol Browse. Dalam hal ini index.html dan AC_RunActiveContent.js.

Lalu tekan tombol Submit.

Gambar 8.102 Halaman Upload


14. Jika upload berhasil, maka akan ditampilkan pemberitahuan bahwa upload telah

berhasil.

Gambar 8.103 Pemberitahuan Upload telah Berhasil

15. Jika session expired, maka kita diminta untuk mengisi password kembali. Isi kembali

password dengan “famous92”, lalu klik tombol Continue.

16. Cek hasil upload dengan membuka alamat www.famoustour.web44.net pada

browser.

http://www.famoustour.web44.net/


DAFTAR PUSTAKA

1. Didik Wijaya dan Andar Parulian Hutasoit, Tip dan Trik Macromedia Flash MX dengan ActionScript, Elexmedia Komputindo, Jakarta, 2003

2. Mukhammad Abrori, Solusi Instan Animasi Karakter dengan Adobe Flash, Andi, Yogyakarta, 2009.

3. Zeembry, 123 Trip & Trik Actionscript Flash MX 2004, Elexmedia Komputindo, Jakarta, 2004.

Multi Media

Documents