23.4.08

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?

22.4.08

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

Memulai dengan FlashDevelop - #1 (AS2)

Bagi yang udah lama koding di FlashIDE, mungkin beberapa di antara kita mulai menyadari bahwa editor skrip di FlashIDE bener-bener SUX. Untungnya ada segelintir orang yang telah berbaik hati mau menyumbangkan pikiran dan kemampuan mereka untuk masa depan Flash yang lebih baik :). Yang saya maksud tentu saja adalah editor Flash paling oke: FlashDevelop.

Instalasi

FlashDevelop tinggal diunduh dari situsnya yang berbentuk forum. Cari grup forum 'Releases' dan buka yang terbaru (saat artikel ini ditulis sudah sampai versi 3 beta 7). Walaupun versi 3 masih dibilang beta, namun semuanya sudah fungsional dan berjalan baik. Kalo mo pake rilis terakhir (versi 2),.. mm.. mending gak usah deh.. percayalah, terlalu kuno dan saya ragu artikel ini bisa tetap relevan :).

Kalau sudah diunduh, pastikan untuk mengunduh dan menginstal .Net Framework 2.0 dan JDK 1.6 terlebih dahulu. Memang agak merepotkan, tapi menurut saya it's worth it.

Konfigurasi

Tidak perlu konfigurasi :). Karena FD sudah menyertakan MTASC di dalamnya.

Tes koding

Mari kita coba sesuatu yang mudah, "Halo Dunia" di AS2. Saya asumsikan FD sudah terbuka dan hanya menampilkan halaman pembuka.

Pertama, buka Project > New Project..

Biarkan seting "Installed Templates" pada ActionScript 2 > Empty Project. Isi nama proyeknya "HaloDuniaAS2" dan tempatkan pada lokasi direktori yang dikehendaki. Klik OK.

Pada panel Project, klik kanan pada nama proyek (HaloDuniaAS2), kemudian pilih Add > New Class... Isi nama kelas sebagai "Test.as", dan tekan OK. Pada panel Project, seharusnya sudah terlihat cabang dibawah nama proyek dengan ikon file dan nama kelas kita, Test.as. Kalo belum ada, klik ganda nama proyeknya. Klik kanan pada Test.as, dan set Always Compile. Ini akan menjadi kelas utama proyek kita, artinya kelas ini yang dicompile terlebih dahulu.

Kita tulis kelas "Test" kita, kodenya seperti ini:
class Test { public function Test() { var tf:TextFormat = new TextFormat("Arial", 14); var tt:TextField = _root.createTextField("tt", _root.getNextHighestDepth(), 0, 0, 300, 40); tt.text = "Halo Dunia"; tt.setTextFormat(tf); } }

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

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

Oops.. ternyata gagal. Di bagian status bar tertulis Build Failed. Kalau kita buka Output Panel, kita mendapati pesan seperti Main entry point not found. Ini berarti kita belum menyertakan sebuah fungsi khusus agar bisa jalan dengan benar.

Fungsi itu adalah fungsi main. FD sudah tau kelas apa yang harus dijalankan pertama kali namun dia butuh menjalankan fungsi main dari kelas itu, sehingga kita tambahkan saja sehingga menjadi:
class Test { public function Test() { var tf:TextFormat = new TextFormat("Arial", 14); var tt:TextField = _root.createTextField("tt", _root.getNextHighestDepth(), 0, 0, 300, 40); tt.text = "Halo Dunia"; tt.setTextFormat(tf); } public static function main():Void { var test:Test = new Test(); } }

Compile ulang, sudah bisa kan?

21.4.08

OpenSource Flash

Flash memang keren.. teknologi multimedia pada platform web yang paling banyak dikenal di seluruh dunia (baca: 98% browser di seluruh dunia memiliki plugin flashplayer). Yang awalnya hanya buat animasi splash, kini sudah mulai merambah ke aplikasi di web (RIA -- Rich Internet Applications) dan juga game.

Gak bisa dipungkiri, banyak yang mulai meniti karir sebagai developer game spesialis game flash, karena waktu pengembangan yang lumayan singkat dan pendapatan yang rata-rata lebih dari sekedar cukup :). Terlebih sekarang kita tidak perlu lagi mengembangkan flash dengan FlashIDE dari Adobe (saat artikel ini ditulis, FlashIDE terbaru adalah versi CS3), dengan alat-alat opensource pun kita bisa mengembangkan konten flash, baik itu aplikasi maupun game.

Di bawah ini adalah daftar beberapa alat opensource yang bisa dipakai untuk mengembangkan konten flash:

Kompiler

Dipakai untuk mengubah kode menjadi SWF.

  • MTASC
    Disingkat dari 'Motion-Twin Action Script Compiler', merupakan kompiler konsol pertama yang dapat mengubah kode AS2 menjadi SWF. Dikembangkan oleh Nicolas Cannasse, dan sudah dianggap selesai (tidak dapat dikembangkan lagi).
  • SWFMill
    Dengan menggunakan file XML, kita dapat membungkus media (gambar, font, suara/musik dan juga SWF) ke dalam sebuah SWF. SWF hasil SWFMill biasanya dipakai untuk mengganti peran Library di FlashIDE.
  • Flex
    Adobe mengembangkan kompiler konsol AS3 yang pangsa pasarnya menembak kalangan pengembang RIA, namun kita bisa juga menggunakannya untuk keperluan lain (seperti game).
  • haXe
    Selepas dari MTASC, Nicolas mengembangkan bahasa baru yang khusus untuk keperluan web, yakni haXe. Bahasa yang dapat dijalankan di webserver, di klien sebagai JavaScript, dan juga sebagai flash (versi 6 hingga 9). haXe memiliki sintaks yang mirip dengan AS (karena sama2 berdasarkan ECMAScript)

Editor

Dipakai untuk menuliskan kode dan juga memudahkan di dalam pengelolaannya.

  • FlashDevelop
    Editor yang khusus dibuat untuk developer Flash. Editor ini berbeda dengan FlashIDE dimana tidak tersedianya timeline, sehingga semua dikendalikan melalui kode.

Tertarik? Selamat mencoba-coba :).