Aset media dengan FlashDevelop #2 (haXe)

Kalo terakhir itu masukin buat Flex (AS3), sekarang buat haXe. Sama gampangnya, cuma beda dikit cara2nya. Nanti di akhir artikel ada langkah-langkah kalo mau menyertakan asset secara manual (gak lewat FD), yang juga tak kalah gampangnya (FD itu cuman mempermudah ato melakukannya behind the scene, aturannya tetap sama). Tenang aja.. :)

Langkah-langkah dengan FD

Buatlah proyek baru. Pilih Empty Project di bagian haXe, isikan nama proyek dan lokasinya dimana saja.

Pada panel Project, buatlah kelas baru, kita namakan saja "Test". Set agar kelas ini jadi Main Class pada Project Properties, juga targetkan untuk Flash9.

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. Klik kanan pada gambar yang baru saja ditambahkan, dan pilih Options...

Berbeda dengan AS3, haXe tidak mengenal tag Embed, maka kita langsung saja beri ID pada asset tersebut. Biasanya FD auto-generate ID gambar tersebut, ya kita tinggal matikan checkbox yang bersangkutan, dan kasih nama sendiri. Disini kita kasih nama "Daun". Konsep ID gini memang mirip ama Linkage di FlashIDE.

Perhatikan bahwa kini di akhir nama asset, ada ID.

Setelah itu, kita sertakan di dalam kode. Caranya agak mirip, yaitu dengan mendeklarasikan kelas dengan menggunakan ID yang kita buat tadi. Seperti ini:

class Daun extends Sprite {}

Kemudian, kita coba tampilkan, dengan terlebih dahulu menyiapkan metode Main dan property turunan kelas Daun.

Selanjutnya, tinggal addChild pada flash.Lib.current dan compile :).

Kalo tadi perhatian, ada perbedaan cukup signifikan pada penyertaan asset. Tau gak? Ya, tipe data yang dipake buat asset tersebut bukan Bitmap, melainkan Sprite. Tapi kenapa?

Ini tentu saja berkaitan dengan cara FD memasukkan asset gambar tersebut ke dalam haXe. Oh, jadi tidak memakai kompiler haXe untuk masukin gambar? Yup, betul.. Hal itu bisa dijelaskan dengan langkah-langkah manual di bawah ini.

Langkah-langkah manual (menggunakan SWFMill)

SWFMill adalah kompiler SWF yang dipake buat masuk-masukin asset ke dalam SWF. Semacam, pengganti fungsi Library di FlashIDE, yang opensource (tentunya). Nah, FD itu menyertakan SWFMill di dalamnya, dan memang menggunakan SWFMill untuk mengelola asset dengan haXe.

Tapi kenapa tetap pake Sprite, dan bukan Bitmap? Ya itu, karena SWFMill memang cuma support beberapa tipe data, yakni Sprite ato MovieClip, Sound dan Font. Cuma, untuk urusan Sound ini spesifikasi MP3 yang bisa diterima SWFMill hingga berjalan lancar sangat spesifik dan rada tricky. Nah, ini yang makanya kenapa FD gak mau masukin suara sebagai asset library. Jadi terpaksa harus manual kan. Eniwei, mari kita lanjut...

Pertama, unduh SWFMill terbaru (pada saat artikel ini ditulis, versi terbaru adalah 0.2.12). Ekstrak ke direktori mana saja yang disuka. Agar kita dapat memanggil SWFMill dari lokasi mana saja di sistem, maka daftarkan path SWFMill ke Environment Variables pada Windows seperti halnya ketika kita instal haXe dan Neko (lihat artikel ini, pada bagian 'Instalasi' kalo lupa).

Lalu kita bikin proyek baru, pake seting yang sama dengan yang pertama

Kemudian, pada panel proyek, kita tambahkan file XML. File ini dipake buat konfigurasi compile SWFMill.

Isikan dengan format seperti ini:

<?xml version="1.0" encoding="utf-8" ?> <movie width="10" height="10" framerate="12" version="9"> <background color="#ffffff"/> <frame> <library> <clip id="Daun" import="daun.jpg"/> </library> </frame> </movie>

Perhatikan tag clip di dalam tag library, ini yang menjadikan file pada atribut import (daun.jpg) berubah menjadi Sprite ato MovieClip dengan ID "Daun". Kira-kira jadi paham kan isi dari mekanisme penggunaan ID di FD :). Untuk Font gunakan tag font, dan untuk Sound gunakan tag sound

Kita simpan file ini (misal saja kita namakan "compileSWFMill.xml"), kopikan daun.jpg ke direktori yang sama, kemudian buka Command Prompt dan jalankan perintah ini (di direktori tempat asset berikut file xml ini berada):

swfmill -v simple compileSWFMill.xml assets.swf

Sudah dapat dipastikan kalo akan ada file baru bernama assets.swf.

Sekarang tambahkan file/kelas "Test" di FD. Bisa dikopikan dari yang tadi, ato tulis ulang :). Atur pula seting pada proyek kita seperti yang sudah-sudah.

Kali ini, untuk menghubungkan assets.swf untuk digunakan di haXe, kita buka Project Properties..., dan pada tab Compiler Options, isikan pada Additional Compiler Options dengan parameter seperti ini:

-swf-lib assets.swf

Coba compile. Oke kan?

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 - #3 (haXe)

haXe adalah bahasa pemrograman baru yang tujuan dibuatnya adalah untuk mengakomodir segala kebutuhan web dengan 1 bahasa. Bagi yang memiliki ketertarikan terhadap pengembangan aplikasi di web, kita tentu tau kalo web terbentuk oleh banyak platform dan teknologi baik itu server maupun klien. Untuk server, ada beberapa yang terkenal seperti PHP, Perl, Phyton, Ruby on Rails, JSP, ASP, ColdFusion, dll. Dan untuk klien pun ada beberapa seperti JavaScript, Flash, Shockwave, Applet, SilverLight, etc. Banyak ya, udah gitu beda-beda lagi. Tapi dengan haXe, kebutuhan akan teknologi server dan klien ada pada 1 bahasa. Mantap :).

Out of the box, haXe bisa target ke 3 platform: Neko (untuk server), JavaScript, dan Flash (dari versi 6 hingga 9). Versi Flash dari 6 hingga 8 menggunakan API AS2, dan selebihnya menggunakan API AS3. Memang ada beberapa hal yang beda jauh dari ActionScript namun tentu saja tidak dapat dijelaskan semuanya dalam satu saat. Tapi jangan khawatir, seiring berjalannya waktu dan apabila diberi kesempatan, akan kusempatkan untuk menjelaskan semuanya :).

Instalasi

Unduh haXe terbaru (pada saat artikel ini ditulis sudah versi 1.19) dan gunakan yang zip. Ekstrak pada direktori mana saja yang dikehendaki. haXe membutuhkan NekoVM, sehingga unduh itu juga dan ekstrak pada direktori mana saja yang dikehendaki (pada saat ini versi 1.7.0).

UPDATE: Agar haXe dan neko dapat dikenali instalasinya oleh windows, lakukan langkah berikut:

1. Klik kanan pada My Computer dan buka Properties.
2. Buka tab Advanced dan klik pada Environment Variables
3. Pada bagian System variables tekan New dan isikan:
   Variable Name: HAXEPATH, Variable value: direktori tempat haXe diekstrak (misal C:\haXe\). Tekan OK.
4. Tekan New sekali lagi, dan isikan:
   Variable Name: NEKOPATH, Variable value: direktori tempat neko diekstrak (misal C:\neko\). Tekan OK.
5. Pada daftar System Variables, cari nama variabel Path, dan tekan Edit. Pada Variable Value, tambahkan pada akhir kalimat dengan: %HAXEPATH%;%NEKOPATH%; dan tekan OK.
6. Tekan OK dua kali sampai window System Properties tertutup (tapi jangan pake tanda silang di kanan atas atau diclose).
7. Untuk cek apakah haXe sudah terinstal dengan baik, buka Command Prompt dan ketik haXe lalu tekan Enter, apabila tampil daftar panjang dengan penjelasan penggunaan haXe maka instalasi sudah benar

Konfigurasi

Nyalakan FD, kemudian buka Tools > Program Settings.... Pilih HaXeContext pada daftar Plugins. Cari HaXe Path pada bagian haXe dan isi dengan direktori tempat haXe berada. Tekan Enter dan klik Close. Sudah, hanya itu! :)

Tes koding

Karena haXe bisa menghasilkan flash setara AS2 dan AS3, maka kita akan coba tuliskan 2 versi "HaloDunia" menggunakan haXe. Ini agar lebih mudah memahami karakteristik haXe, dan perbedaannya dengan ActionScript. Gak sulit kok, tenang saja :)

Pertama, buka Project > New Project

Pilihlah seting HaXe > Empty Project, dan berikan nama proyek kita "HaloDuniaHX". Tempatkan pula ke direktori yang dikehendaki. Klik OK.

Lalu kita lakukan konfigurasi dengan membuka Project > Properties.... Pada tab Platform, gunakan Flash Player 8, dan pada Output, isikan Output file dengan nama file swf, misalnya "haloduniahx.swf". Isikan pula dimensinya sesuai yang dikehendaki, misalnya saja 300 x 300. Tekan OK.

Klik kanan pada nama proyek di panel Project dan kemudian pilih Add > New Class.... Isi nama kelas sebagai "Test.hx", dan tekan OK. Berbeda dengan ActionScript, kita tidak perlu menggunakan Always Compile.

Kita tulis kelas "Test.hx" kita, seperti ini:

package ; import flash.Lib; import flash.TextField; import flash.TextFormat; class Test { public function new() { var tf:TextFormat = new TextFormat("Arial", 14); var tt:TextField = Lib.current.createTextField("tt", Lib.current.getNextHighestDepth(), 0, 0, 300, 20); tt.text = "Halo Dunia F8"; tt.setTextFormat(tf); } public static function main():Void { var t:Test = new Test(); } }

Perhatikan perbedaannya dengan yang versi AS2. Beberapa perbedaannya adalah:

• haXe menggunakan package untuk fungsi yang sama dengan package AS3, namun penulisannya tidak membungkus kelas (seperti pada AS3). Cukup ditulis di baris paling atas sebelum import.
• haXe menggunakan flash.Lib.current untuk _root

Sebelum kita compile, kita buka dulu Project Properties... dan pada tab Compiler Options, liat bagian Main Class dan isikan dengan nama kelas kita yaitu "Test". Sekarang kita compile, tekan F5 atau pada Project > Test Movie.... Berhasil kan?

Ok, kalau tadi masih ingat, haXe bisa output ke beberapa versi Flash, sekarang kita coba buat untuk flash9, namun tanpa membuat kelas baru. Bisakah? Tentu bisa, karena haXe menyediakan yang namanya conditional compilation. Conditional compilation tertulis di dalam kode dan diawali dengan pagar (#).

Kita modifikasi kelas "Test.hx" kita menjadi seperti ini:

package ; import flash.Lib; #if flash8 import flash.TextField; import flash.TextFormat; #else flash9 import flash.text.TextFormat; import flash.text.TextField; #end class Test { public function new() { #if flash8 var tf:TextFormat = new TextFormat("Arial", 14); var tt:TextField = Lib.current.createTextField("tt", Lib.current.getNextHighestDepth(), 0, 0, 300, 20); tt.text = "Halo Dunia F8"; tt.setTextFormat(tf); #else flash9 var tf:TextFormat = new TextFormat("Arial", 14); var tt:TextField = new TextField(); tt.text = "Halo Dunia F9"; tt.setTextFormat(tf); Lib.current.addChild(tt); #end } public static function main():Void { var t:Test = new Test(); } }

Jelas kan? Apabila kita targetkan untuk flash8, maka yang berada di dalam blok conditional compilation flash8 akan dibaca, selebihnya tidak. Begitu juga sebaliknya untuk flash9. Hal ini tentu saja juga dapat diimplementasikan pada platform-platform lain seperti neko dan javascript

Selain itu, coba perhatikan perbedaannya dengan AS3. Beberapa perbedaannya adalah:

• Kelas di haXe untuk flash9 tidak perlu menjadi sub-kelas dari Sprite atau MovieClip.
• Karena itu, menampilkan TextField mirip cara flash8 dan Lib.current-nya, namun flash.Lib.current kali ini merupakan Document class (atau kelas utama, karena AS3 tidak mengenal _root) yang merupakan sub-kelas dari MovieClip sehingga menggunakan metode yang sesuai.

Untuk mencobanya, buka Project > Properties... dan ubahlah Target pada Platform menjadi Flash Player 9.

Compile ulang, dan lihat :). Menarik kan?