Penulisan Action Script pada Movieclip

Pola Penulisan Action Script pada Movieclip

Cara penulisan action pada movieclip adalah sebagai berikut :

1. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool. Perhatikan bahwa sebuah obyek dalam flash memiliki 2 bagian yaitu stoke (garis tepi) dan fill (isi).

Oval tool dan obyek dalam flash

2. Seleksi obyek lingkaran tersebut kemudian convert menjadi symbol dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih movieclip pada option behaviour dan ketikan bola pada name.

Convert to symbol

3. Klik movieclip bola, dan dalam kondisi terseleksi buka panel action ( tekan f9 atau klik menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8).

Kemudian ketikan script sebagai berikut :

onClipEvent (enterFrame) {

// menggerakan obyek kekanan

_x += 10;

}

action pada movieclip

4. Jalankan movie dengan menekan tombol Ctrl+Enter. Maka bola akan bergerak ke kanan sampai hilang dari layar. Tekan tombol Ctrl+W untuk kembali ke stage 

Penjelasan pola penulisan action script pada movieclip adalah sebagai berikut :

1. Action pada movieclip harus dimulai dengan script on() atau onClipEvent()

2. Di dalam tanda kurung () pada scrip on maupun onClipEvent berisi movie event seperti load, enterframe, mouse down, release dan sebagainya. Movie event menyatakan sebuah kejadian yang akan di eksekusi oleh action tersebut. Sebagai contoh : movie event enterFrame berarti perintah dalam blok { } akan dijalankan sepanjang frame tempat movieklip tersebut aktif dan movie event load berarti perintah dalam blok { } akan dijalankan satu kali saja yaitu ketika movieclip di load (ditampilkan) oleh flash player.

3. Tanda { merupakan awal suatu blok script. Yang dimaksud dengan blok scrip adalah suatu kumpulan perintah yang akan dijalankan sepanjang movie event.

4. Tanda // merupakan tanda yang menyatakan komentar. Baris yang memiliki tanda tersebut tidak dianggap sebagai suatu perintah. Meskipun demikian tanda // sangat membantu memberi informasi pada penulisan action scrip kita.

5. Baris _x+=10; merupakan baris perintah. Perintah dalam movieclip harus ditulis didalam sebuah blok movie event. Setiap akhir penulisan sebuah perintah selalu diakhiri dengan tanda ;

6. Tanda } merupakan penutup suatu blok script.

Pola penulisan script pada movieclip

Keuntungan penulisan script pada movieclip :

1. Dibandingkan dengan menulis action diframe, penulisan script di dalam movieclip lebih mudah.

2. Untuk mendeteksi kesalahan satu obyek, pada penulisan ini lebih cepat dibandingkan dengan penulisan action pada frame (dengan catatan apabila suatu saat kita mengolah script dalam jumlah ratusan sampai ribuan baris).

Dasar Penulisan Action Script dalam Flash : Button

     Macromedia Flash memiliki fasilitas berupa Action Script, yang dapat kita manfaatkan sebagai media dalam membuat suatu program aplikasi, multimedia, CD interaktif bahkan game. Macromedia Flash memiliki ratusan script dengan fungsi yang berbeda-bedaakan tetapi yang sering digunakan hanya beberapa script saja, sehingga akan memudahkan kita apabila kita masih awam terhadap Flash maupun Action Script-nya.

     Dalam Flash terdapat dua mode panel penulisan script yaitu mode normal dan mode expert. Pada dasarnya mode expert lebih mudah untuk dipelajari daripada mode normal.

Pola Penulisan Action Script dalam Flash 

Action script dalam flash dapat dituliskan pada 3 tempat yaitu pada button, pada movieclip, dan pada frame dengan aturan yang berbeda. 

Pola Penulisan Action Script pada Button

     Cara penulisan action pada tombol adalah sebagai berikut :

1. Buatlah sebuah kotak dengan menggunakan rectangle tool. Anda juga bisa membuat rounded rectangle dengan memilih option rounded rectangle radius.

Seting dalam membuat kotak

2. Buatlah static text “tombol” tepat diatas kotak yang sebelumnya telah kita buat, caranya klik text tool, kemudian buka properties dan atur jenis huruf, ukuran dan warna. Buka panel properties (apabila belum terbuka pilih menu window>properties). Pastikan option static text pada text type.

 Text tool dan text properties

Bentuk tombol

3. Seleksi kotak dan text tersebut, kemudian konvert menjadi symbol dengan dengan menekan tombol F8 (pilih menu insert>convert to symbol). Pilih button pada option behaviour dan ketikan tombol pada name.

Convert to symbol

4. Double klik tombol tersebut untuk memasuki mode edit. Perhatikan dalam symbol bertipe button terdapat 4 frame yaitu up, over, down dan hit. Up menunjukan kondisi normal suatu tombol. Over menunjukan kondisi tombol saat mouse berada tepat di atasnya. Down menunjukan kondisi tombol saat ditekan dan Hit

merupakan area penekanan (sensor) tombol tersebut.

 Frame pada symbol button

5. Klik frame over kemudian masukan keyframe dengan menekan tombol F6 (pilih menu insert>keyframe). Ubah warna dan ukuran tombol pada frame over tersebut. Untuk frame Down dan Hit biasanya bisa kita abaikan.

Penambahan keyfame pada frame over

Perbedaan warna dan ukuran antara frame up dan frame over

6. Tekan tombol Ctrl-E untuk kembali ke Stage utama. Klik tombol dan dalam kondisi tombol terpilih buka panel action ( tekan F9 atau klik menu windows>action apabila panel action belum terbuka dan pastikan mode penulisan adalah mode expert jika menggunakan flash MX atau Flash 8).

Kemudian ketikan script sebagai berikut :

on (release){

// menampilkan pesan pada output panel saat tombol ditekan

trace(“tombol ditekan”);

}

action pada button

7. Jalankan movie dengan menekan tombol Ctrl+Enter. Tekan tombol tersebut, maka akan muncul tampilan “tombol ditekan” pada output panel. Tekan tombol Ctrl+W untuk kembali ke stage

Penjelasan pola penulisan action script pada button adalah sebagai berikut :

1. Action pada button harus dimulai dengan script on()

2. Di dalam tanda kurung () pada scrip on berisi mouse event seperti release, press, dragover, rollout dan sebagainya. Mouse event menyatakan sebuah kejadian yang akan di eksekusi oleh action tersebut saat mouse melakukan kegiatan tertentu. Sebagai contoh : mouse event release berarti perintah dalam blok { } akan dijalankan ketika mouse menekan tombol.

3. Tanda { merupakan awal suatu blok script. Yang dimaksud dengan blok scrip adalah suatu kumpulan perintah yang akan dijalankan sepanjang movie event.

4. Tanda // merupakan tanda yang menyatakan komentar. Baris yang memiliki tanda tersebut tidak dianggap sebagai suatu perintah. Meskipun demikian tanda // sangat membantu memberi informasi pada penulisan action scrip kita.

5. Baris trace(“tombol ditekan”); merupakan baris perintah. Perintah dalam button harus ditulis didalam sebuah blok mouse event. Setiap akhir penulisan sebuah perintah selalu diakhiri dengan tanda ;

6. Tanda } merupakan penutup suatu blok script.

Button Symbol

 Button Symbol

Symbol Button memiliki empat frame tersendiri dalam timeline. Tiga frame pertama mendefinisikan state tombol yaitu: up, over, dan down. Frame pertama adalah Up state, yang merupakan tampilan tombol pada kondisi normal. Frame kedua adalah Over state, yang inisialisasi ketika user menempatkan mouse di atas tombol tersebut. Frame ketiga adalah Down state, yang merupakan tampilan tombol ketika user menekan tombol tersebut dengan menggunakan mouse. Frame ke empat yang mendefinisikan active area. Area ini merupakan area dimana user harus menempatkan mouse untuk mengaktifkan state lain dari tombol ini. Anda dapat menempatkan action ke instance dari button yang akan memberitahukan apa yang harus dilakukan Flash ketika tombol di tekan.

  Membuat sebuah Button

1.     Klik menu Insert, lalu klik New Symbol.

2.     Pilih option Button.

3.     Klik OK

4.     Masukkan artwork pada keyframe di frame pertama yang mewakili Up state dari button

5.     Klik menu Insert, kemudian Timeline, lalu klik Keyframe untuk menambah sebuah keyframe pada frame kedua (Over state).

6.     Ubah artwork atau tambah artwork baru di frame ini.

7.     Klik menu Insert, kemudian Timeline, lalu klik Keyframe untuk menambah sebuah keyframe pada frame ketiga (Down state).

8.     Ubah artwork atau tambah artwork baru pada frame ini.

9.     Klik menu Insert, kemudian Timeline, lalu klik Keyframe untuk menambah sebuah keyframe pada frame ke empat (active area).

10. Tambahkan sebuah graphic sederhana (sebuah rectangle atau oval) untuk mendefinisikan active area.

11. Klik menu Control, lalu klik Test Movie untuk menguji movie anda.

Pengaturan Posisi Button

Anda dapat mengatur posisi dari beberapa button sekaligus pada sepanjang sumbu vertikal pada Stage dengan memanfaatkan panel Align.

1.    Pada Timeline, dengan layer Copy terseleksi, buat layer baru dengan nama Buttons. Lock semua layer kecuali layer Button.

2.    Pada menu pop-up Stage View yang ada pada kanan atas Stage, perbesar view Stage anda menjadi 150%. Kemudian scroll ke sebelah kanan bawah Stage.

3.    Drag Button 1 dari panel Library buttons.fla dan pilih lokasi yang anda inginkan pada Stage.

4.    Ulangi langkah 3 hingga terbentuk beberapa button yang saling berdampingan pada stage.

5.    Drag mouse untuk menyeleksi seluruh button dengan menggunakan Arrow tool.

6.    Untuk membuka panel Align, pilih Window > Align. Pastikan bahwa To Stage tidak terseleksi jika anda tidak ingin mengatur posisi button relatif terhadap Stage. Klik Align Vertical Center, kemudian klik Distribute Horizontal Center.

Menambahkan Action pada Button

Untuk mengontrol pergerakan playhead dalam Timeline, anda dapat menggunakan ActionScript yang merupakan bahasa scripting pada Flash.

1.    Tambahkan sebuah layer baru pada Button Animation Timeline dan beri nama Actions.

2.    Pada layer Actions, tambahkan keyframe ke Frame 15.

3.    Jika Actions panel tidak terbuka, pilih Window > Actions.

4.    Dengan Action layer Frame 15 terpilih, pilih kategori Actions > Movie Control pada toolbox Actions dan klik ganda stop. Action stop membantu anda mengatur agar playhead berhenti ketika telah mencapai Frame 15.

Dalam Button Animation Timeline, Frame 15 pada layer Actions menampilkan a kecil, yang mengindikasikan bahwa sebuah action sudah ditambahkan pada frame tersebut.

 Menambahkan Navigasi Button

Untuk menambahkan navigasi yang mengarahkan button agar membuka Web site, anda dapat menggunakan action getURL.

1.    Pilih Edit > Edit Document atau klik Scene 1 untuk kembali ke movie utama.

2.    Pada Stage, klik Button 1.

3.  Dalam Actions panel, pilih Actions > Browser/Network dan klik ganda pada getURL.

4. Dalam text box URL, masukkan sebuah URL lengkap, seperti misalnya http://www.macromedia.com.

5.  Pada menu pop-up Window, pilih _blank untuk membuka window browser baru apabila user meng-klik Button 1.

6.   Simpan file anda, kemudian pilih Control > Test Movie untuk menguji file anda. Klik Button 1 untuk menuju ke Web site yang telah anda berikan pada langkah ke 4.

7.   Tutup browser dan juga file SWF, kemudian kembali pada lingkungan kerja Flash. Jika mau, anda dapat memilih button-button yang lain untuk memberikan navigasi ke web site yang berbeda-beda dengan mengulangi langkah 3 sampai 7. Setelah selesai membuat link pada button¸ tutup Actions panel.

Teks Pada Flash

 Text pada Flash

Dalam Flash anda dapat membuat text field yang dapat digunakan sebagai text display statis atau untuk objek teks dinamis dengan menggunakan Text tool. Pada menu Text terdapat beberapa attribut yang dapat dipilih seperti Font type, size, color, identation dan orientation. Juga termasuk prosedur pemformatan umum seperti kerning, tracking, dan anti-alias. Karena text field dapat diedit, anda dapat mengubah attributnya setelah text field dibuat.

Gunakan command Break Apart untuk memecah text field menjadi shape sehingga dapat diedit menggunakan selection tool atau pen modifier. Hal ini berguna untuk membuat bentuk font baru dan juga memungkinkan anda mengimplementasikan shape tween.

Menambahkan Teks Dinamis

Untuk menambahkan teks pada Stage, langkah-langkah yang dilakukan antara lain:

1.    Pilih tool Text dari panel Tools dan klik pada Stage. Kemudian sebuah field text akan muncul.

2.    Sebelum mulai menulis, anda dapat mengatur tool Text terlebih dahulu melalui Property Inspector.

3.    Setelah itu, anda dapat mengetikkan teks yang dikehendaki.

4.    Jika diperlukan, anda dapat mengatur letak tulisan anda dengan klik tool Selection pada panel Tools dan mulai mengatur letak teks pada Stage.

 Membuat field Dynamic Text

Dynamic text dapat menampilkan teks dari sumber eksternal pada saat runtime. Selanjutnya anda akan membuat dynamic text field yang terhubung dengan file teks eksternal.

1.  Pada Timeline, pilih layer Dynamic Text. Gunakan tool Selection dan klik pada workspace untuk deselect objek.

2.    Pilih Text tool pada panel Tools.

3.    Pada Text Property Inspector, atur pilihan-pilihan berikut :

·         Pilih Dynamic Text pada menu pop-up Text Type

·         Pada Text Attributes, tentukan jenis dan ukuran teks (font)

·         Pada Line Type, pilih Multiline untuk memastikan teks terbungkus dengan benar

·         Klik text color box dan pilih warna dari teks yang ingin anda tampilkan

·         Pilih atribut paragraf yang anda inginkan (alignment)

4.    Drag mouse pada Stage untuk membuat text field pada area antara dua buah garis horisontal.

5. Dalam text box Instance Name pada Property inspector, berikan nama yang anda inginkan untuk dynamic text field. ActionScript yang ada dalam dokumen ini me-load file teks eksternal, yang berada di dalam folder yang sama dengan dokumen anda. ActionScript dibuat untuk me-load teks ke dalam sebuah field dengan nama sesuai dengan yang anda maksudkan.

Menggunakan Action LoadVariables

Action loadVariables mengandung sebuah parameter yang akan menunjuk pada path dari variabel teks anda.

      1.    Tambahkan sebuah layer baru ke dalam Timeline dan beri nama Actions. Bila perlu, drag layer Actions ke bagian teratas Timeline.

Meletakkan actions pada bagian teratas Timeline merupakan perlakuan yang baik.

       2.    Jika panel Actions tidak terbuka, pilih Window > Actions.

Tipe panel Actions yang ditampilkan tergantung pada objek yang anda tambahkan action-nya. Misalnya jika anda memilih sebuah frame, panel Actions menampilkan action untuk frame. Jika anda memilih sebuah button, panel Actions akan menampilkan action untuk button.

3.    Dalam Actions toolbox, pilih Actions > Browser/Network, kemudian klik ganda loadVariables.

4.    Dalam text box URL, ketikkan path dari file teks anda, misal: ../assets/copy.txt.

5.    Ujilah movie anda (Ctrl+Enter).

Flash : Lanjutan (2)

Membuat dan Menguji Efek dalam Movie

Untuk menambah kreasi vector art dalam Flash, anda dapat mengimpor image-image bitmap yang menggunakan pixel untuk menampilkan grafik ke dalam movie, dan juga mengaplikasikan berbagai efek pewarnaan.

 Mengimpor Image  ke dalam Library

Jika anda ingin mengimpor sebuah file ke dalam Flash, anda dapat melakukannya langsung ke dalam library.

1.    Tambahkan sebuah layer baru pada Timeline.

2.    Pilih File > Import to Library.

Jika anda memilih Import to Library dan bukan Import, image akan diletakkan terlebih dahulu pada Stage sebelum dimunculkan.

3.    Buka file yang ingin anda impor ke dalam library.

4.    Pada dialog box Fireworks PNG Import Settings, klik Import as a Single Flattened Bitmap, kemudian klik OK.

        Memodifikasi Kompresi Bitmap

Ketika anda mengimpor suatu image, anda dapat meninjau dan memodifikasi setting yang mengkompresi image. Kompresi image dapat mengurangi ukuran file dari movie anda, namun dapat mempengaruhi pula kualitas image yang ditampilkannya; tujuan utamanya adalah untuk memberi keseimbangan antara setting kompresi dengan kualitas image.

1. Jika panel Library tidak terbuka, pilih Window > Library. Anda dapat melihat file-file yang telah anda impor.

2. Klik ganda pada salah satu file. JPEG compression merupakan pilihan default kompresi.

3. Pada menu pop-up Compression, pilih Lossless (PNG/GIF) untuk mendapatkan kualitas image yang lebih baik.

4. Untuk menguji bagaimana image ditampilkan dengan setting yang baru, klik Test. Jika perlu, drag image ke dalamview pada window preview. Setelah selesai mem-preview image, klik OK.

5. Kembali pada panel Library. Klik ganda pada file yang selanjutnya dan ulangi langkah 3, kemudian klik OK.

Membuat dan melihat Symbols Movie Clips

Symbol Movie Clip beroperasi secara tersendiri pada Timeline utama. Ketika anda menginginkan sebuah animasi yang berulang-ulang pada sebuah frame dalam Timeline, anda dapat menyimpan animasi ini pada Timeline di dalam sebuah Movie Clip pada frame tersebut.

Instance Movie Clip dapat memiliki action yang diaplikasikan kepadanya dan dapat di kontrol darimana saja di dalam movie Flash menggunakan ActionScript. Isinya dapat berupa animasi, kontrol interaktif, sound, dan bahkan movie clip lain. Tidak seperti symbol Graphic, anda hanya dapat melihat frame pertama dari movie clip pada timeline utama.

1.     Klik menu Insert, lalu klik New Symbol untuk membuat symbol yang baru atau Insert > Convert to Symbol (F8) untuk membuat suatu image menjadi symbol.

2.     Klik option Movie Clip.

3.     Klik OK

4.     Tambahkan content anda pada timeline Movie Clip.

5.     Kembali ke Timeline utama dengan meng-klik tombol Back atau nama Scene pada Edit bar

6.     Drag symbol movie clip yang anda baru buat ke Stage dari Library

7.     Klik menu Control, lalu klik Test Movie untuk menjalankannya.

Membuat Keyframe

Keyframe adalah frame dimana kita hendak menentukan titik perubahan pada animasi yang hendak dibuat. Pada animasi (frame by frame) semua frame yang ingin kita buat berubah merupakan keyframe. Untuk membuat keyframe caranya:

1.    Pilih frame yang hendak diberi keyframe

2.    Klik kanan pada frame tersebut

3.    Pilih Insert Keyframe

Animasi dengan Motion Tweening

Sangatlah repot jika kita harus membuat animasi secara frame by frame, selain waktu yang lama ukuran file pun akan membengkak. Maka dari itu sangatlah penting bagi kita untuk menggunakan fasilitas Motion Tween pada Macromedia Flash. Dengan ini kita hanya perlu menentukan titik awal dan titik akhir dari animasi yang hendak kita buat.

Animasi Sederhana Motion Tween

Untuk lebih jelasnya maka kita akan membuat animasi sederhana dengan cara motion tween dengan langkah-langkah sebagai berikut :

1.    Buat sebuah movie baru dengan memilih menu File>New. Kemudian simpan dengan nama tween.fla

2.    Pilih frame pertama

3.    Impor gambar ke stage (ctrl + R)

4.    Klik kanan pada keyframe pertama lalu pilih create motion tween

5.    Insert keyframe pada frame 20, lalu pindahkan gambar mobil ke arah kanan.

6.   Untuk melihat hasil dari animasi yang baru saja dibuat, pilih menu Control>Play atau cukup tekan (Ctrl+Enter). Sekarang anda telah menguasai cara membuat animasi sederhana dengan menggunakan motion tweening.

Properti Motion Tween

Untuk pengaturan motion tween, dapat dilakukan melalui Property inspector. Option motion tween dapat diatur ketika frame yang telah diberi tween dipilih.

Properti-properti motion tween adalah sebagai berikut:

·  Tween: Dalam menu ini teradapat pilihan antara motion tween, motion shape, atau tidak kedua-duanya (dalam bahasan kali ini menu yang dipilih adalah motion tween)

·  Scale: tandai menu ini jika terdapat perubahan ukuran dalam animasi

·  Rotate: Menentukan jenis dan frekuensi putaran dalam animasi

· Orient to path: tandai menu ini saat menggunakan layer motion guide. Ini dapat membuat objek mengikuti guide line dengan titik acuan titik tengah objek

·  Sync: tandai menu ini untuk me-synchronizes-kan animasi dalam simbol pada time line yang terdapat didalamnya.

·   Snap: tandai menu ini untuk menyambungkan objek dengan motion guide

·   Ease: digunakan untuk mengatur akselerasi dari sebuah objek dalam motion tween

Motion Guide

Motion guide berfungsi untuk membuat objek yang hendak dianimasikan berjalan sesuai dengan path yang telah ditentukan. Hal ini sangat berguna untuk membuat gerakan-gerakan animasi yang cukup rumit. Disini anda hanya membutuhkan sebuah garis yang akan dijadikan titik acuan gerakan, dan membuatnya menjadi motion guide, maka objek yang akan dianimasikan akan mengikuti garis acuan yang telah dibuat. Untuk lebih jelasnya kita akan membuat sebuah animasi sederhana dengan menggunakan motion guide. Langkah-langkah yang harus dilakukan antara lain:

1.    Buat sebuah movie baru dengan cara memilih menu File>New, kemudian save file tersebut dengan nama motionguide.fla.

2.    Create new symbol kemudian isi Name dengan kupu-kupu dan behavior dengan Graphic

3.    Impor gambar kupu2 ke stage

4.    Buka Library, drag gambar kupu-kupu ke layar kerja.

5.   Ganti nama layer anda dengan kupu-kupu dengan cara mengklik ganda layer1, lalu tekan Enter.

6.   Kemudian buat guide layer-nya dengan cara klik kanan layer kupu2 lalu pilih Add Motion Guide.

7.   Setelah guide layer dibuat, pastikan anda bekerja pada layer tersebut dengan cara klik layer tersebut. Lalu buatlah path seperti berikut :

8.    Pilih frame pertama pada kupu2, klik kanan lalu pilih Create Motion tween.

9.   Insert keyframe pada frame 40 pada Guide layer, dan buat juga keyframe pada frame 40 pada Layer kupu-kupu. Dan Drag kupu-kupu sampai ke ujung path yang telah dibuat.

10.  Uji movie yang telah anda buat dengan cara memilih menu Control>Play (Ctrl+Enter). Kupu-kupu akan berjalan sesuai dengan path yang telah kita gambarkan sebelumnya.