Bekerja dengan FlashDevelop, Flex SDK, dan Flash

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

Di sini, Flash IDE saya gunakan untuk mem­buat library ber­isi objek visual, atau biasa disebut asset library. SWF yg saya buat dengan Flash IDE hanya ber­isi sedikit kode atau malah nggak ada kode sama sekali. Kode program utama saya buat dengan FlashDevelop dan saya kom­pilasi dengan Flex com­piler.

Ada 2 cara untuk meng­gabungkan asset library dengan program utama yaitu:

1. Dengan tek­nik embedding dimana SWF yang ber­isi aset dikom­pilasi jadi satu dengan program utama
2. Run­time asset dimana SWF yang ber­isi aset dibuat ter­pisah dari program utama dan nanti dimuat pada saat program dijalankan.

Kalo Anda ingin nyoba sen­diri, pas­tikan dulu instalasi FlashDevelop sudah benar & path Flex SDK sudah diset melalui menu Tools->Program Settings->AS3 Context.

Ber­ikut ini direk­tori project yang saya buat di FlashDevelop.

Embedding

Di dalam direk­tori /embedded/ saya buat sebuah file .fla yang ber­isi asset yang akan saya gunakan.

Ada dua MovieClip di dalam­nya, masing-masing punya dynamic textfield dengan nama instance label­Txt. Keduanya juga saya beri lin­kage name sesuai dengan nama symbolnya.

Setelah saya publish file embed-library.fla, FlashDevelop bisa meng­enali lin­kage kedua sym­bol tersebut.

Kemudian saya buat class BlueSquare dengan labelTxt ber­tipe flash.text.TextField, sama per­sis dengan instance yang saya buat di Flash.

Saya letakkan cur­sor di atas baris public class ... , lalu saya klik kanan sim­bol Blue di project folder dan klik Insert into document. Hasil­nya seperti berikut:

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

Saya buat instance kedua class ter­sebut 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);

		}
	}
}

Hasil­nya:

Run­time Asset

Saya buat file xtlibrary.fla di dalam folder /src/ di FD. SWF hasil kom­pilasi file ini ber­isi aset yang akan saya muat pada saat runtime.

Di dalam file ini ada dua sim­bol mirip dengan file embed-library.fla, tapi ber­warna merah dan hitam. Masing-masing sim­bol saya hubungkan dengan class di dalam folder /flashlib/ — sering disebut Bound Class. Karena kedua class ini ber­hubungan dengan sim­bol di .fla, maka saya nggak perlu meng­gunakan tag [Embed ...] seperti con­toh sebelumnya.

Ber­ikut ini seting lin­kage dari kedua sim­bol tersebut.

Supaya sim­bol ter­sebut bisa dikenali oleh SWF utama, saya harus meletakkan keduanya di stage dan mem­berinya nama instance seperti ini:

File xtlibrary.fla saya publish ke dalam folder di mana SWF utama dari project ini ( fd.swf ) ber­ada yaitu di folder /bin/. Hasil­nya seperti gam­bar berikut:

Saya tam­bahkan beberapa baris kode ke dalam Main class untuk memuat file xtlibrary.swf dan meng­ak­ses sim­bol di atas serta mem­buat objek Black & Red lalu menam­pil­kan­nya ( 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 meng­ak­ses instance kedua sim­bol melalui nama stage instance mereka seperti ini :

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

Hasil test movie :

Oke, gitu cara saya kerja kalo saya perlu pakai aset yang dibuat dengan Flash.
Semoga ber­man­faat. Con­toh project­nya bisa diun­duh di bawah ini :

Also in this category …

• » Class Generator Flash Extension
• » How to Enable ANT view on FlashBuilder 4.5
• » Isometric Helper Flash Extension
• » Array Paginator Class
• » Scat­tered Gallery

Share and Enjoy

Tagged as: actionscript, practice

Like this post? Post Comment, Download and Subscribe RSS