Dasar Pemrograman Flash Game

Pengantar Flash
Adobe flash atau sebelumnya Macromedia Flash merupakan software multifungsi. Terlepas dari fungsi awalnya, yaitu mempermudah pembuatan animasi web, ternyata flash berkembang pesat hingga dapat kita manfaatkan sebagai software multi media yang luar biasa. Bahkan Flash dengan action script-nya dapat dimanfaatkan menjadi program pembuat game yang mudah dan efektif. 

Sebelum lebih lanjut mengenai pembuatan game flash, kita harus memahami terlebih dahulu bahwa membuat game flash itu menyenangkan dan menguntungkan. Bagi sebagian orang memainkan game sangat menyenangkan, konsep inilah yang harus kita pegang yaitu kita berusaha untuk menyenangkan orang lain melalui sebuah game. Semakin orang lain menikmati permainan game buatan kita, disitulah letak keberhasilan kita sebagai seorang pembuat game. 

Pemrograman komputer pada umumnya akan sulit dipahami oleh seseorang yang awam terhadap sebuah bahasa pemrograman. Disisi lain membuat game merupakan salah satu penerapan dari ilmu pemrograman komputer. Namun kita tidak perlu berkecil hati, karena flash dan action scriptnya sangat mudah untuk dipelajari dan melalui buku ini saya berusaha membagi sedikit pengetahuan saya tentang membuat game dengan flash. 

Metode Memahami Buku Ini Buku ini 

menjelaskan sebisa mungkin tentang proses pembuatan game secara berurutan. Ikutilah tutorial satu demi satu mulai dari bab awal sampai bab akhir-dan jangan anda lompati sebuah tutorial kecuali anda sudah memahaminya. Apabila anda menemui kesulitan dalam menuliskan script nantinya, anda dapat membuka file pada CD tutorial. Karena action yang dipakai dalam buku ini adalah action dasar, maka action-action pada buku ini dapat bekerja pada Action Script 1.0, 2.0, dan 3.0. 

Area Kerja dalam Flash 

Sebelum memulai proses pembuatan game, akan lebih baik jika kita mengenal siapa dan bagaimana flash itu. Area kerja Flash (mx, mx 2004, dan flash 8) pada dasarnya terdiri atas beberapa komponen yaitu Menu, Toolbox, Timeline, Stage dan Panel.

-Menu berisi kontrol untuk berbagai fungsi seperti membuat, membuka, menyimpan file, dan sebagainya sesuai dengan menu yang ditampilkan.

-Stage adalah area persegi empat yang merupakan tempat dimana kita membuat obyek animasi atau aplikasi yang akan di jalankan.

-Toolbox berisi menu untuk membuat atau menggambar bentuk . Toolbox terbagi menjadi empat bagian yaitu drawing tool, view, color, dan option

-Timeline adalah tempat kita dapat membuat dan mengontrol obyek dan animasi.

-Panel berisi kontrol fungsi yang dipakai dalam Flash yaitu untuk mengganti dan
memodifikasi berbagai properti obyek animasi dengan cepat

Dasar Penulisan Action Script dalam Flash
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, 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.

 

 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 :

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

 

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

 

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