TUTORIAL Swf loader Untuk membuat Aplikasi Android yang Dinamis

Ketika aplikasi android yang ingin dibuat ditujukan dapat memberikan informasi yang dinamis atau berubah-ubah, maka diperlukan proses pengunduhan konten dari isi aplikasi dari server yang telah ditentukan. Inilah menjadi keunggulan dari paltform adobe air, dimana seperti aplikasi induknya yaitu adobe flash memiliki fasilitas untuk mengunduh (load) file media seperti jpg, gif, video dan yang paling umum adalah melakukan load terhadap file format swf. Pada tutorial kali ini diperhatikan bahwa diperlukan web server via internet atau server http lokal yang dapat diakses melalui HP Android kamu.

(klik pada gambar untuk memperjelas)

Seperti pada tutorial terdahulu maka kita akan memerlukan adobe flash CS5.5 ke atas untuk mendesain applikasi berbasis adobe air ini. Jadi jika masih bingung harap menuju ke tutorial dasar pada topik GPS. Karena kali ini kita akan berhubungan dengan proses loading, maka kita butuhkan suatu animasi loading yang bebas dapat dirancang dan tentunya dengan flash tidak menjadi masalah. Pada contoh ini dibuat gambar gear yang berputar ketika proses loading. Jika menginginkan proses loading membutuhkan penunjukan persentase  loading maka ditambahkan textfield untuk menulisnya seperti contoh dibawah.

Gambar animasi gear berputar dengan proses tween yang sangat sederhana

 Gambar Textfiled persen loading

Gambar dibawah ini menunjukkan proses pembuatan isi dari file swf yang akan di unduh atau di load oleh aplikasi, kali ini akan dibuat dengan nama " isi.swf ". Format file dapat berupa file media apa saja yang mungkin dapat dikenali oleh flash seperti jpg, gif, mov dan sebagainya. Setelah di compile atau disimpan dalam format dan ukuran yang pas, maka file tersebut harus di upload pada webserver internet atau jika dirumah terdapat komputer yang menggunakan wifi, maka dengan jaringan add-hoc via wifi serta server apache , xampp dan lain sebagainya , file ini dapat diupload secara lokal. Pada contoh ini file yang akan di load berupa file swf dengan alamat : http://www.flexievdo.net/isi.swf

Lanjutkan dengan merancang script pada frame dan layer khusus (tanpa ada bentuk geometri lainnya ) dan buatlah script untuk melakukan load file swf tadi seperti contoh berikut:

var request:URLRequest = new URLRequest("http://www.flexievdo.net/isi.swf"); //ubah sesuai file yg akan di load
var loader:Loader = new Loader() 


loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
loader.load(request); 
addChild(loader);




function onLoaderComplete(event:Event):void
{

loadan.visible=false;
trace("complete");

}

Pada contoh diatas terdapat script yang menunggu Event.COMPLETE sehingga animasi loading gear dapat dihilangkan dari tampilan layar saat file telah selesai diunduh. Jika diperlukan penulisan persentase file yang sudah di load, maka tambahkan event seperti contoh berikut yang akan ditulis pada textfield "persen".

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onload);


function onload(evt:ProgressEvent):void 
{ 
var perc:Number = evt.bytesLoaded / evt.bytesTotal; 
loadan.persen.text = Math.ceil(perc * 100).toString(); 
trace(perc);
} 

Kemudian kalau mengingat bahwa kadang-kadang file swf  atau gambar yang diload terlalu besar atau kekecilan, berdasarkan tutorial gesture sebelumnya maka tambahkan saja script gesture sehingga menjadi lebih menarik. Kali ini kita tambahkan GESTURE_PAN yang merupakan gesture dengan dua jari untuk menggeser layar yang terlihat kegedean ke posisi yang diinginkan. 

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);

function onZoom(evt:TransformGestureEvent):void {
 
 
loader.scaleX *= evt.scaleX;
loader.scaleY *= evt.scaleY;
 
}

function onPan(evt:TransformGestureEvent):void
{
loader.x += evt.offsetX;
loader.y += evt.offsetY;
}

Jangan lupa untuk proses publish menggunakan permission INTERNET karena server akan diakses melalui internet.

TAMBAHAN

Error handling jika file tidak bisa diload karena network error , dapat dilihat seperti contoh berikut

jadi kita membuat tombol yang berisi tulisan bahwa loading error, kemudian akan muncul pilihan retry. Untuk itu ketika awal tombol kita tombol.visible=false; , lalu ketika error terjadi akan dihandle oleh error handling seperti contoh script berikut ini

tomret.visible=false; //tomret nama instance tombol retry

//error handler listener
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loaderIOErrorHandler);
//listener dari tombol
tomret.addEventListener(MouseEvent.CLICK, clicked1);

function clicked1(event:MouseEvent):void
{
tomret.visible=false;

loader.load(request); 
addChild(loader);
}

//jika IO error maka ini yang dipanggil
function loaderIOErrorHandler(evt:IOErrorEvent):void
{
 
 trace("error broo!");
 tomret.visible=true;

 
}

File tutorial selengkapnya dapat di download disini



SELAMAT MENCOBA