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 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:
- Dengan teknik embedding dimana SWF yang berisi aset dikompilasi jadi satu dengan program utama
- 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 :
Also in this category …
- » Scattered Gallery
- » Tracking Aplikasi Flash dengan Google Analytics
- » Auto-scroll Text Area
- » Factory Pattern
- » Facebook AS3 API : The Basics
wah thanks atas sharing ilmunya mas , betul2 baru dari apa yang sy pelajari terutama yang ke 2.
Btw, mas sendiri lebih sering menggunakan yang mana (terutama dalam project yang dikerjakan bareng2)?
lalu dari segi performa apa ada perbedaan?
@Adi, tergantung kebutuhan aja, kalo assetnya ga terlalu banyak ya pake cara pertama (embed).
Ga ada pengaruh dgn performance. Ini cuman masalah organisasi code/library aja.
wah„ masih perlu flash IDE juga ya mas buat bikin assetnya?
padahal saya pengennya totally free
kalo gk salah buat asset bisa diimport dari swf ya?
saya bookmark ya mas…
Kalo mau totally free ya bisa aja asal assetnya berbentuk gambar/sound/video, tapi kondisi real-world di pekerjaan biasanya butuh lebih dari itu. Animasi yg kompleks otomatis masih butuh Flash IDE atau mungkin dynamic assets seperti movieclip di atas yg labelnya bisa diubah2 pada saat runtime & desainnya harus akurat pixel perfect sesuai desain. Mungkin juga aplikasinya harus dibuat dengan ukuran file sekecil mungkin, jadi semua objek visual harus berbentuk vector. Dalam banyak kasus, Flash IDE masih dibutuhkan.
Maksudnya diimport dari swf gimana ?
salam kenal.…
punya tutorial buat flash page flip gak pak…
sent ke email saya yah…
di ahnadhariyanto88@yahoo.com
terima aksih sebelumnya…