Aset media dengan FlashDevelop #1 (AS3)

Konten flash kita seringkali membutuhkan aset media untuk mempercantik penampilan. Apakah itu gambar-gambar, suara atau musik, font, dsb. Kalo yang pake FlashIDE, tentu saja sudah familiar dengan fasilitas Librarynya, namun bagaimana kalo mau menggunakan FlashDevelop dan haXe? Ternyata FD memiliki kemampuan dalam mengelola aset media ato fungsi semacam Library. Caranya cukup mudah, ikuti saja artikel ini.

Langkah-langkah

Buka FlashDevelop, dan buat proyek AS3 baru. Pilih Empty Project, isikan nama proyek dan lokasinya dimana saja.

Pada panel Project, buatlah kelas baru, kita namakan saja "Test". Set agar Always Compile dan juga atur Project Properties dengan seting yang diinginkan.

Untuk memasukkan gambar, klik kanan pada nama proyek kita di Project Panel dan pilih Add > Library Asset...

Pilih any gambar, nanti ada dialog nanyain kalo mo selalu diupdate enggak, pilih Yes. Nanti gambar itu ada di dalam panel Project

Agar bisa dipake di kode, kita gunakan tag Embed. Caranya, kita klik kanan file gambar kita di panel Project, dan pilih Insert Into Document. Tapi pastikan dulu kursor tulis kita ada di area antara nama kelas dengan konstruktornya (lihat gambar di atas).

FD membantu menuliskan tag Embed yang dimaksud. Tag ini nanti digunakan kompiler untuk menyertakan file gambar dan diasosiasikan ke bentuk kelas. Kelas apa dan dimana? Ya kelasnya yang sesuai dengan data yang diembed, kalo gambar ya flash.display.Bitmap, kalo font ya flash.text.Font, kalo SWF ya flash.display.Sprite ato flash.display.MovieClip. Tapi kelasnya mana?.. Nah, kita tuliskan di bawahnya:

private var Daun:Class;

Kemudian kita siapkan variabel untuk instance kelas Daun tadi (yang otomatis jadi kelas Bitmap oleh kompiler Flex, sehingga tipe datanya Bitmap).

Untuk menggunakannya tinggal diturunkan dari kelas Daun, dan letakkan menggunakan addChild

Terakhir, dicompile

Memulai dengan FlashDevelop - #2 (AS3)

Oke, di bagian pertama sudah dijelaskan bagaimana caranya menggunakan FD dengan AS2. Sekarang kita akan beranjak dengan menggunakan AS3.

Instalasi

Berbeda dengan AS2, FlashDevelop tidak menyertakan kompiler FlexSDK di dalam instalasinya sehingga harus diunduh sendiri. Pada saat artikel ini ditulis, versi terbaru Flex adalah Flex3SDK. Kalau sudah diunduh, ekstrak dan taruh ke direktori yang dikehendaki (misal c:\flex_3_sdk\)

Konfigurasi

Nyalakan FD, kemudian buka Tools > Program Settings... Pilih AS3Context pada daftar Plugins. Cari Flex SDK Location pada bagian AS3 dan isi dengan direktori tempat flex berada (dalam contoh ini, c:\flex_3_sdk\). Tekan Enter dan klik Close. Sudah, hanya itu! :)

Tes koding

Seperti yang sudah-sudah, kita coba yang gampang saja. AS3 memiliki sintaks yang tidak terlalu beda dengan AS2, namun APInya yang jauh berbeda (dan lebih baik) dari AS2. Kita akan buat "HaloDunia" dalam AS3. Saya asumsikan FD sudah terbuka dan hanya menampilkan halaman pembuka.

Pertama, buka Project > New Project

Pilihlah seting Action Script 3 > Empty Project, dan berikan nama proyek kita "HaloDuniaAS3". Tempatkan pula ke direktori yang dikehendaki. Klik OK.

Seperti pada AS2, klik kanan pada nama proyek di panel Project dan kemudian pilih Add > New Class... Isi nama kelas sebagai "Test.as", dan tekan OK. Klik kanan pada nama kelas "Test.as" dan klik pada Always Compile.

Kita tulis kelas "Test.as" kita, seperti ini:
package { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFormat; public class Test extends Sprite { public function Test() { var tf:TextFormat = new TextFormat("Arial", 14); var tt:TextField = new TextField(); tt.defaultTextFormat = tf; tt.text = "Halo Dunia"; addChild(tt); } } }

Perhatikan perbedaannya dengan AS2. Yang pertama, kelas dibungkus oleh package, semua kelas di AS3 harus berada di dalam suatu "paket", dan ini digunakan agar scope ato hirarki kelas-kelas kita lebih jelas. Kedua, kelas utama harus sub-kelas dari Sprite ato MovieClip, makanya ada kata extends setelah nama kelas. Karena kelas ini adalah sub-kelas dari Sprite, maka dia bisa menggunakan semua method dari Sprite yang memiliki atribut akses protected ato public. Dalam hal ini, untuk menampilkan turunan dari TextField, cukup dengan menuliskan metode addChild dan menaruhnya pada parameter.

Sebelum dicompile, kita lakukan konfigurasi dengan membuka Project > Properties... Pada tab Output, isikan Output file dengan nama file swf, misalnya "haloduniaas3.swf". Isikan pula dimensinya sesuai yang dikehendaki, misalnya saja 300 x 300. Tekan OK.

Sekarang kita compile, tekan F5 atau pada Project > Test Movie...

Mudah kan? :)