Dalam artikel kali ini saya jelaskan cara bekerja dengan FlashDevelop, Flex SDK, dan Flash CS3/4. Flex SDK saya pakai untuk kompilasi proyek karena jauh lebih cepat daripada compiler bawaan Flash IDE.

Di sini, Flash IDE saya gunakan untuk membuat library berisi objek visual, atau biasa disebut asset library. SWF yg saya buat dengan Flash IDE hanya berisi sedikit kode atau malah nggak ada kode sama sekali. Kode program utama saya buat dengan FlashDevelop dan saya kompilasi dengan Flex compiler.

Ada 2 cara untuk menggabungkan asset library dengan program utama yaitu:

1. Dengan teknik embedding dimana SWF yang berisi aset dikompilasi jadi satu dengan program utama
2. Runtime asset dimana SWF yang berisi aset dibuat terpisah dari program utama dan nanti dimuat pada saat program dijalankan.

Kalo Anda ingin nyoba sendiri, pastikan dulu instalasi FlashDevelop sudah benar & path Flex SDK sudah diset melalui menu Tools->Program Settings->AS3 Context.

Berikut ini direktori project yang saya buat di FlashDevelop.

Embedding

Di dalam direktori /embedded/ saya buat sebuah file .fla yang berisi asset yang akan saya gunakan.

Ada dua MovieClip di dalamnya, masing-masing punya dynamic textfield dengan nama instance labelTxt. Keduanya juga saya beri linkage name sesuai dengan nama symbolnya.

Setelah saya publish file embed-library.fla, FlashDevelop bisa mengenali linkage kedua symbol tersebut.

Kemudian saya buat class BlueSquare dengan labelTxt bertipe flash.text.TextField, sama persis dengan instance yang saya buat di Flash.

Saya letakkan cursor di atas baris public class ... , lalu saya klik kanan simbol Blue di project folder dan klik Insert into document. Hasilnya seperti berikut:

Insert into Document

Kemudian saya buat juga class GreenSquare dengan langkah-langkah sama seperti di atas, tapi yang di–embed adalah simbol Green.

Saya buat instance kedua class tersebut di Main.as.

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	public class Main extends Sprite{

		public function Main():void{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			var blue:BlueSquare = new BlueSquare();
			blue.labelTxt.text = "I'm blue";
			addChild(blue);

			var green:GreenSquare = new GreenSquare();
			green.x = blue.width + 10;
			green.labelTxt.text = "I'm green";
			addChild(green);

		}
	}
}

Hasilnya:

Test Movie di FD

Runtime Asset

Saya buat file xtlibrary.fla di dalam folder /src/ di FD. SWF hasil kompilasi file ini berisi aset yang akan saya muat pada saat runtime.

Di dalam file ini ada dua simbol mirip dengan file embed-library.fla, tapi berwarna merah dan hitam. Masing-masing simbol saya hubungkan dengan class di dalam folder /flashlib/ — sering disebut Bound Class. Karena kedua class ini berhubungan dengan simbol di .fla, maka saya nggak perlu menggunakan tag [Embed ...] seperti contoh sebelumnya.

Berikut ini seting linkage dari kedua simbol tersebut.

Export Setting

Linkage dan Bound Class

Supaya simbol tersebut bisa dikenali oleh SWF utama, saya harus meletakkan keduanya di stage dan memberinya nama instance seperti ini:

Stage Instance

File xtlibrary.fla saya publish ke dalam folder di mana SWF utama dari project ini ( fd.swf ) berada yaitu di folder /bin/. Hasilnya seperti gambar berikut:

Library SWF

Saya tambahkan beberapa baris kode ke dalam Main class untuk memuat file xtlibrary.swf dan mengakses simbol di atas serta membuat objek Black & Red lalu menampilkannya ( mulai baris 36 ).

package
{
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.system.ApplicationDomain;
	import flash.system.LoaderContext;
	import flash.utils.getDefinitionByName;
	import flash.utils.getQualifiedClassName;
	import flashlib.BlackSquare;
	import flashlib.RedSquare;

	public class Main extends Sprite{

		public function Main():void{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			var blue:BlueSquare = new BlueSquare();
			blue.labelTxt.text = "I'm blue";
			addChild(blue);

			var green:GreenSquare = new GreenSquare();
			green.x = blue.width + 10;
			green.labelTxt.text = "I'm green";
			addChild(green);

			var ctx:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);

			var ldr:Loader = new Loader();
			ldr.contentLoaderInfo.addEventListener(Event.INIT, onLoadInit);
			ldr.load(new URLRequest("xtlibrary.swf"), ctx);

		}

		private function onLoadInit(e:Event):void {

			var assetLib:MovieClip = LoaderInfo(e.target).content as MovieClip;

			var redClassName:String = getQualifiedClassName(assetLib['red']);
			var redClassRef:* = getDefinitionByName(redClassName);

			var red:RedSquare = new redClassRef() as RedSquare;
			red.labelTxt.text = "I'm red";
			red.y = 100;
			addChild(red);

			var blackClassName:String = getQualifiedClassName(assetLib['black']);
			var blackClassRef:* = getDefinitionByName(blackClassName);

			var black:BlackSquare = new blackClassRef() as BlackSquare;
			black.labelTxt.text = "I'm black";
			black.y = 100;
			black.x = red.width + 10;
			addChild(black);
		}
	}
}

Di dalam kode di atas, saya mengakses instance kedua simbol melalui nama stage instance mereka seperti ini :

assetLib['red']
assetLib['black']

Hasil test movie :

Test Movie dgn library eksternal

Oke, gitu cara saya kerja kalo saya perlu pakai aset yang dibuat dengan Flash.
Semoga bermanfaat. Contoh projectnya bisa diunduh di bawah ini :