Part 1 - Perkenalan & Setup
Halo, reijubv di sini akan mencoba memberikan tutorial bagaimana caranya membuat sebuah game berbasis Flash, dengan menggunakan FlashDevelop sebagai software utama untuk melakukan coding dan Adobe Flash sebagai visual IDE untuk membuat dan menaruh aset-aset yang akan digunakan nanti, sekaligus sebagai compilernya.
Saat artikel ini ditulis, software yang digunakan adalah FlashDevelop versi 4.0.1 RTM dan Adobe Flash Professional CS5.5 apabila anda tidak memiliki versi yang sama, tetap bisa mengikuti tutorial ini tapi mungkin harus ada sedikit perubahan yang dilakukan.
Selama proses tutorial ini, versi ActionScript yang digunakan adalah versi ActionScript 3, dan untuk mengikuti tutorial ini setidaknya anda sudah mengerti dasar-dasar ActionScript 3 karena saya tidak akan menjelaskan secara detil setiap bagian code yang nantinya akan diberikan.
Part 1.1 - Instalasi
Pertama-tama pastikan anda sudah mengInstall FlashDevelop terlebih dahulu, apabila belum, silahkan download di sini, setelah ter download silahkan jalankan installernya dan ikuti instruksi yang diberikan. Pada salah satu bagian installer akan ditanyakan apa saja yang akan di install, 3 diantaranya adalah Flex SDK, AIR SDK, dan Flash Debugger, ketiga pilihan itu akan otomatis di download apabila instalasi selesai, jadi pastikan koneksi internet anda siap untuk mendownload. Apabila anda sudah mendownload Flex SDK / AIR SDK / Flash debugger sebelumnya, silahkan jangan dicentang pilihan-pilihan tersebut dan bisa di setting nanti.
Apabila anda sudah menginstall FlashDevelop dan mendownload ketiga file diatas secara otomatis melalui Installer, lewati bagian di bawah dan langsung pindah ke Part 1.2. Disarankan untuk bagian ini, apabila anda mendownload file-file yang disebutkan di bawah untuk di simpan di lokasi yang mudah dicari nantinya.
Untuk mendownload Flash debugger, silahkan di download di sini dan cari versi yang bertuliskan Project content debugger, download sesuai dengan OS yang anda pakai.
Sekarang buka FlashDevelop anda dan navigasi ke Tools > Program Settings lalu pilih AS3Context pada list disebelah kiri, setelah itu cari Installed Flex SDK, klik icon yang ada dikanannya untuk mengedit dan saat terbuka window baru klik path di bagian kanan dan ganti jadi path dimana anda mengekstrak Flex SDK tadi. Apabila path nya betul maka list dibawahnya akan otomatis berubah sesuai versi Flex dan AIR yang ada.
Masih pada menu Program Settings, pilih FlashViewer di list sebelah kiri, dan set path pada External Player Path ke lokasi dimana anda mendownload Flash debugger sebelumnya.
Sekarang FlashDevelop anda siap digunakan :)
Part 1.2 - Setup Flash IDE
Buka Tools > Program Settings apabila anda belum melakukannya dan pilih ASCompletion dari list di sebelah kiri, lalu ganti Path to Flash IDE ke lokasi dari Flash.exe dimana anda sudah menginstall software Adobe Flash.
Sekarang buat project baru untuk testing atau sebagai template anda dimasa depan nanti. Klik menu Project > New project, meski di situ ada pilihan untuk menggunakan Flash IDE Project, tapi kita akan memilih AS3 Project untuk template project kita. Flash IDE Project tidak dipilih karena itu hanya template kosong dengan settingan compile yang diarahkan ke Flash IDE, sedangkan kita menggunakan AS3 Project karena sudah disediakan folder-folder dan main class yang berguna untuk kita gunakan nantinya.
Jadi pilih AS3 Project dan beri nama kepada project ini melalui input box dibawah, silahkan apabila anda ingin memberi nama package, package berguna untuk menjadi folder dimana nanti code yang anda buat akan di simpan di dalam folder src. Jadi apabila package anda bernama reijubv, maka semua code actionscript yang dibuat nanti ditaruh di src/reijubv.
Pastikan checkbox Create directory for project tercentang agar project nantinya dibuatkan folder sendiri.
Setelah selesai akan muncul 3 folder utama yaitu bin, lib, dan src. Folder src adalah yang akan paling banyak kita gunakan nantinya.
Sekarang buka Adobe Flash milikmu dan buat project flash AS3 baru dengan memilih File > New > ActionScript 3.0. Set resolusi ke 640x480 dan frame rate 30. Sekarang langsung saja save dengan menekan Ctrl + S atau File > Save, dan simpan ke tempat dimana tadi project FlashDevelop-mu dibuat. Beri nama sama dengan project FlashDevelop-nya. Bila sudah, lihat window Properties, bila tidak ada, klik Window > Properties atau tekan Ctrl + F3. Klik Publish Settings dan pindah path dari output file ke folder bin yang ada di folder project kita agar lebih terorganisir. Klik OK bila sudah selesai.
Masih di window Properties, apabila menggunakan Flash CS5.5, klik icon wrench di sebelah kanan dropdown Script. Pindah ke tab Source, dan klik entry pertama pada list yang hanya berupa icon folder dan titik (.) lalu klik Browse to Path lalu browse ke folder src di dalam folder project kita. Cara lain adalah klik 2x entry pertama tersebut dan ketikkan saja ".\src" tanpa tanda kutip.
Cara kedua ini lebih baik karena apabila nanti project anda pindah ke folder lain tidak perlu melakukan setting lagi path untuk source. Setelah itu kembali ke window Properties pada box Class ketikkan "Main", tanpa tanda kutip. Apabila anda tadi sudah meng-set nama package saat membuat project FlashDevelop, maka ketiklah seperti ini : "namapackage.Main", pada tutorial ini karena nama package saya adalah "reijubv", maka saya masukkan "reijubv.Main".
Setelah selesai Save lah kembali.
Sekarang kembali ke FlashDevelop dan buka class Main yang ada di dalam package tadi, apabila anda menggunakan package. Sekarang ubah function init dari
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
menjadi private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
trace("project berhasil dijalankan!");
}
setelah itu klik Project > Properties , ganti dropdown Compilation menjadi Other IDE dan di bagian Test Project ganti menjadi External Player.Sekarang save lagi dan coba run project ini dari FlashDevelop. Apabila berhasil maka dari Flash IDE akan muncul window flash player dan pada window outputnya muncul tulisan "project berhasil dijalankan!".
Selamat, sekarang anda telah berhasil melakukan setup FlashDevelop agar bisa bekerja sama dengan Flash IDE !!.
Sekian part 1 dari tutorial ini, tunggu part selanjutnya dan mohon maaf jika ada kesalahan tulis :D
File akhir dari tutorial part 1 ini dapat di download di sini.
To Do :
Sekarang setelah mengikuti tutorial part 1 ini, ada beberapa hal yang mungkin berguna untuk anda lakukan, cari tahu, dan pelajari, diantaranya adalah :
- Mengganti theme dari flashdevelop agar sesuai dengan yang anda sukai
- Merubah resolusi dan warna background dari project flash kita melalui code (bukan dari IDE)
