Belajar Flash : Dasar Penulisan Action Script Pada Adobe Flash

Hallo semua selamat datang di blog DencikArt, kali ini kita akan belajar Adobe Flash. Kita akan membahas Action Script yang ada di flash. Akan dijelaskan secara detail mengenai Action Script secara lengkap dan mudah di mengerti.

Adobe Flash memiliki fasilitas berupa Action Script, yang dapat kita manfaatkan sebagai media dalam membuat suatu program aplikasi, multimedia, CD interaktif bahkan game. Adobe 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, sehingga seluruh action pada tutorial di dalam buku ini ditulis dalam mode expert.

Pilihan mode expert dalam flash

 

 

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.

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

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.

Frame pada symbol

berada tepat di atasnya. Down menunjukan kondisi tombol saat ditekan dan Hit
merupakan area penekanan (sensor) tombol tersebut.

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.

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”);
}

 7. Jalankan movie dengan menekan tombol Ctrl+Enter. Tekan tombol tersebut, maka akan mucul 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. 

Pola Penulisan Action Script pada MovieclipCara 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 objek pada 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.

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

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

Pola Penulisan Action Script pada Frame
Kedua cara penulisan script diatas yaitu penulisan script di dalam button dan di dalam movieclip, dapat ditulis dalam bentuk lain yang mana penulisan scriptnya diletakan didalam sebuah frame. Hal utama yang harus diingat dalam penulisan action pada frame adalah instance name. Instance name merupakan salah satu identitas yang terpenting dalam flash yang membedakan antara obyek satu dengan obyek yang lain.

Properties sebuah symbol

Aturan pemberian nama instance name antara lain adalah :
1. Nama intansi boleh sama dengan nama symbol.
2. Tidak boleh menggunakan spasi, titik, dan tanda baca yang lain.
3. Tidak boleh menggunakan nama yang sama dengan suatu perintah dalam flash misalnya : obyek, level, break dan sebagainya.
4. Tidak boleh menggunakan angka saja untuk nama akan tetapi sebuah nama instansi boleh diikuti dengan angka. Contoh yang salah :12, 13, dan sebagainya, contoh yang benar : bola1, bola_2 dan sebagainya.
5. Tidak boleh ada nama instansi yang sama.
6. Untuk mempermudah proses penulisan script, dapat ditambahkan “_mc” untuk symbol bertipe movieclip dan “_btn” untuk symbol bertipe button. Contoh : “bola1_mc”, “tombol1_btn” dan sebagainya.
7. Dua atau lebih symbol yang sama boleh dipakai, tetapi harus memiliki nama instansi yang berbeda.

Cara penulisan action pada movieclip adalah sebagai berikut :
1. Buatlah sebuah obyek lingkaran dengan menggunakan oval tool. 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

2. Klik symbol bola tersebut, kemudian buka panel instance dan ketikan nama “bola” pada instance name.

Properties movieclip bola

3. Buatlah sebuah layer baru dan ubah namanya menjadi layer action. Penambahan layer action akan mempermudah kita dalam penulisan action pada frame, sehingga tidak akan mengganggu obyek yang lain.

Layer action

4. Klik frame 1 layer action, dan dalam kondisi frame 1 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).

bola.onEnterFrame = function() {
//menggerakan bola kekanan
this._x += 10;
};
 
5. Jalankan Movie dengan menekan tombol Ctrl+Enter, maka kita akan melihat hasil yang sama dengan dengan cara penulisan action pada movieclip.

Penjelasan pola penulisan action script pada frame adalah sebagai berikut :
1. Sebuah penulisan script di frame memiliki 3 tipe penulisan yaitu penulisan di dalam suatu blok movie event atau mouse event, contoh onEnterframe = function(){} dan penulisan tanpa movie event atau mouse event, tipe penulisan yang ke tiga adalah kombinasi dari keduanya, contohnya akan kita dapati pada program di bab selanjutnya
2. Pada dasarnya penulisan action pada frame sama dengan penulisan pada movieclip maupun pada button. Hanya saja pada frame terdapat script function() dan penggunaan nama instansi .
3. Perhatikan perbedaan antara penulisan pada frame dan penulisan pada moviclip berikut

4. Apabila ingin menuliskan action button pada frame, maka yang harus di ubah adalah movie event diubah menjadi mouse event. contoh : tombol.onRelease = function(){}

Keuntungan penulisan script pada frame :
1. Dibandingkan dengan menulis action di movieclip, penulisan script di dalam movieclip cenderung lebih rumit, akan tetapi bagi programmer yang familiar dengan bahasa pemrograman seperti C++, Java, Delphi atau V basic, penulisan pada frame akan menjadi lebih mudah.
2. Lebih mudah dalam menuliskan function tertentu atau perintah berulang yang sering dipakai.
3. Karena seluruh script biasanya dituliskan pada frame, maka mengecek action seluruh obyek yang ada akan lebih mudah, tanpa harus ke masing-masing obyek.

Kesalahan Action Script
Seseorang yang baru belajar action script maupun seseorang yang telah mahir menggunakan actionscript tidak pernah terlepas dari sebuah kesalahan. Dalam sebuah pemrograman terdpat 2 jenis kesalahan, yaitu kesalahan penulisan dan kesalahan logika.

Kesalahan Penulisan Action Script
Kesalahan yang paling sering dilakukan oleh orang yang baru belajar scipt adalah kesalahan penulisan script. Untuk mengetahui kesalahan penulisan, flash menyediakan fasilitas check syntax pada panel action.

check syntax

Dengan menekan tombol check syntac tersebut, dapat diketahui apakah scrip yang ditulis benar atau memiliki kesalahan.

2 kemungkinan saat menekan tombol check syntax.

Kesalahan penulisan akan ditampilkan pada output panel. Scene, layer, dan frame tempat kita melakukan kesalahan serta baris ke berapa yang salah akan membantu kita dalam memperbaiki sebuah kesalahan.

Kesalahan yang sering muncul antara lain adalah :
1. Kesalahan penulisan action yang sederhana, contoh : action duplicateMovieClip salah ketik menjadi duplikateMovieClip.
2. Kesalahan penggunaan spasi, menuliskan nama instance atau variabel dengan tanda spasi, contoh : nilai saya = 100; seharusnya ditulis nilai_saya = 100; Tips dari penulis : ketika kita menuliskan sebuah action jangan terlalu sering menggunakan spasi, sebab flash dapat menata script secara otomatis apabila kita menekan tombol auto format.

auto format

3. Kesalahan penggunaan huruf kecil dan huruf besar. Action script flash sebagian besar tidak sensitive case (peka terhadap huruf kecil dan huruf besar). Akan tetpi flash membedakan sebuah teks dengan warna yang berbeda. Ketika kita menuliskan action tanpa memperhatikan huruf kecil dan huruf besar, maka teks tersebut akan berwarna hitam, sedangkan apabila benar maka teks akan berwarna biru gelap. Pembedaan warna teks dalam action script adalah sebagai berikut :
1. Warna biru gelap digunakan sebagai warna action.
2. Warna biru terang digunakan sebagai warna string.
3. Warna abu-abu digunakan sebagai warna komentar.
4. Warna hitam digunakan untuk menuliskan text selain 3 jenis text di atas.

4. Kesalahan penggunaan tanda “{}“. Seorang yang baru belajar flash sering kebingungan dalam menggunakan tanda tersebut. Tanda tersebut merupakan sebuah tanda blok action, dalam artian seluruh action yang berada dalam tanda “{}” berarti masuk kedalam blok tertentu seperti blok movie event, mouse event, function, blok if, blok for dan sebagainya. Jumlah tanda “{“ harus sama dengan jumlah tanda “}”. Tips dari penulis adalah : setelah kita menuliskan tanda “{“, segeralah menuliskan tanda “}”, kemudian letakkan kursor di tengah karakter tersebut dan tekan enter atau langsung tuliskan action yang dibutuhkan di dalamnya.
5. Kesalahan penggunaan tanda “( )“. Berbeda dengan tanda “{}” tanda “( )” bukan menyatakan suatu blok tetapi biasanya merupakan bagian dari penulisan action digunakan. contoh : if (...){ }, trace(...);.. Jumlah tanda “(“ daam satu baris perintah harus sama dengan jumlah tanda “)”.
6. Kesalahan penggunaan tanda = dan tanda ==. Tanda == hanya digunakan pada suatu kondisi. Sedangkan tanda = digunakan untuk mengeset nilai suatu variabel
7. Kesalahan penggunaan titik. Dalam bahasa pemrograman apapun, karakter titik (“.”) adalah karakter yang vital, sehingga harus diperhatikan penggunaannya.

Kesalahan Logika Action Script
Kesalahan logika tidak dapat dideteksi oleh tombol check syntax, karena kesalahan ini berasal dari programmernya. Kesalahan logika sebenarnya adalah kesalahan dalam menyusun dan menggunakan action script, sehingga menyebabkan program yang dibuat berjalan lambat, ada bagian yang seharusnya bergerak menjadi tidak bergerak, memakan memori komputer dan sebagainya yang sering disebut dengan istilah bug.

Untuk memperbaiki bug jalankan terlebih dahulu, kemudian ujilah program tersebut sesering mungkin dan carilah peluang yang dapat terjadi sebanyak mungkin. Ketika menemukan bagian yang salah, kembali ke action dan carilah bagian mana yang menyebabkan kesalahan tersebut, kemudian perbaiki sebisa mungkin.