Archive for 2007

Wekeke… ini masakan saking dirumah dah ga ada bahan makanan. Tinggal dendeng ama telor, ya udah di balado ajah

Tutorial kali ini adalah tentang pembuatan aplikasi Image Slider untuk menampilkan sekumpulan gambar secara dinamis dengan menggunakan ActionScript 3.0.

Kalau Anda ingin mengikuti step-by-step, silaken donlod file berikut ini: ImageSlider_starter.tar.gz
Hasil akhirnya bisa didonlod di sini : ImageSlider_final.tar.gz

Starter Files

Ekstrak imageslider_starter.tar.gz. Di dalamnya ada sebuah file .fla bernama ImageSlider, Main.as, dan sebuah folder berisi beberapa gambar dengan nama file 1.jpg, …, 8.jpg. Gambar-gambar ini yang akan kita muat ke dalam aplikasi. Kenapa saya menamai file-file tersebut dgn angka? Alasannya hanya satu, untuk menyederhanakan tutorial ini.

Buka file ImageSlider.fla. Di Stage sudah ada beberapa object yaitu :

  • imageContainer ( movieclip )
  • info_txt (dynamic textfield )
  • nextButton (simplebutton )
  • prevButton (simplebutton)

nextButton dan prevButton adalah 2 buah instance dari satu simbol yang sama yaitu “nav button”. Simbol ini bertipe SimpleButton dan memiliki 3 tampilan berbeda untuk state up, over, dan down.

Nggak ada yg spesial sampai di sini.

Document Class

AS3 tidak mengenal statemen include, jadi untuk membuat skrip eksternal kita harus membuat sebuah Document class . Silakan klik bagian kosong di Stage dan lihat Property Panel. Pada field Document _class (Gambar 1), isikan “Main” (tanpa tanda kutip). “Main” ini adalah nama class yang “mewakili” dokumen .fla yg kita buat. Dalam file inilah nanti kita menulis semua skrip.

Document class

Kenapa saya pakai file eksternal dan bukan menulis skrip langsung pada timeline? Jawabannya adalah : Editor actionscript yg dimiliki Flash IDE adalah editor paling bodoh yang pernah saya temui. Dengan menuliskan skrip dalam file eksternal, saya bisa menggunakan editor lain yg jauh lebih cerdas. Favorit saya adalah FlashDevelop dan ini yg selalu saya gunakan.

Sebelum kita mulai menulis skrip ada satu hal lain yg perlu kita ubah. Buka panel “Publish Settings”, klik tab “Flash”, lalu klik tombol “setting di sebelah kanan ActionScript3” (Gambar 2). Hilangkan tanda centang pada bagian “Automatically declare stage instances” (Gambar 3).

publish settings
auto stage instances

Dengan menghilangkan tanda centang pada gambar 3 di atas, berarti kita harus mendeklarasikan semua object yang ada di Stage sebagai public var dalam Document Class. Memang sedikit merepotkan, tapi dengan begini Document Class yang kita buat akan lebih mudah dibaca .

Main.as

Oke, sekarang kita buka file Main.as. Di dalamnya sudah ada skrip berikut.

Actionscript:
  1. package  {
  2.         import flash.display.*;
  3.         import flash.net.URLRequest;
  4.         import flash.text.*;
  5.         import flash.events.*;
  6.         public class Main extends Sprite{
  7.                 public var imageContainer:MovieClip;
  8.                 public var info_txt:TextField;
  9.                 public var nextButton:SimpleButton;
  10.                 public var prevButton:SimpleButton;
  11.                 public function Main() {
  12.                         init();
  13.                 }
  14.                 private function init():void {   
  15.                 }
  16.         }
  17. }

Lihat bagian 4 buah public var di atas. Nama variabelnya sama dengan nama instance object yang ada di Stage. Tipe datanya sama dengan tipe data masing-masing object.

Catatan – Kalau kita tidak menghilangkan tanda centang pada “Automatically declare stage instance”, keempat variabel ini tidak boleh kita deklarasikan lagi.

Pada bagian constructor yaitu Main() , hanya ada satu baris kode yaitu pemanggilan terhadap init() dimana semua proses inisialisasi akan dilakukan.

Instance Variables

Selanjutnya, kita butuh beberapa instance variable sebagai berikut:

  • private var _baseURL:String;
  • private var _fileExt:String;
  • private var _lastID:uint;
  • private var _firstID:uint;
  • private var _numImages:uint;
  • private var _curImageID:uint;
  • private var _imageLoader:Loader;
  • private var _image:Bitmap;

Value dari masing-masing variabel di atas adalah:

  • _baseURL : url dari direktori yang berisi gambar
  • _fileExt : ekstensi file gambar
  • _lastID : nama file terakhir yang ingin ditampilkan
  • _firstID : nama file pertama yg ingin ditampilkan
  • _numImages: banyaknya gambar
  • _curImageID : nama file gambar yang sedang ditampilkan
  • _imageLoader : nama object Loader yang akan kita gunakan untuk memuat gambar
  • _image : Bitmap object untuk menampung gambar yang dimuat oleh _imageLoader

Inisialisasi variabel di atas dilakukan dalam init() , kecuali untuk variabel _curImageID, _imageLoader, dan _image. Kita inisialisasi variabel sebagai berikut :
_baseURL = “gambar”
_fileExt = “jpg”
_lastID = 6
_firstID = 2
_numImages = _lastID – _firstID + 1

Function loadImage()

Function loadImage() adalah function yang akan kita gunakan untuk memuat gambar. Function ini memiliki satu parameter yaitu id dengan tipe data String.

Dalam function ini kita buat sebuah object bernama “request” dgn tipe data flash.net.URLRequest. Properti yang paling penting dari object ini adalah properti url yang, sesuai dengan namanya, kita gunakan untuk menampung alamat/url sebuah resource eksternal.

Untuk memuat sebuah file eksternal secara dinamis, kita gunakan Loader class ( dalam AS3 tidak ada lagi loadMovie(), loadMovieNum(), dan MovieClipLoader ) .

Actionscript:
  1. private function loadImage(id:uint):void {
  2.         //simpan id dari image yang ditampilkan
  3.         _curImageID = id;
  4.         //buat objek URLRequest
  5.         var request:URLRequest = new URLRequest();
  6.         //isi properti url dengan alamat gambar yg akan ditampilkan
  7.         request.url = _baseURL +"/" + String(id) + "." +  _fileExt;
  8.         //buat objek Loader
  9.         _imageLoader = new Loader();
  10.         //daftarkan listener untuk Event.INIT
  11. _imageLoader.contentLoaderInfo.addEventListener(Event.INIT, loadInitListener);
  12.         //daftarkan listener untuk ProgressEvent.PROGRESS
  13. _imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgressListener);
  14.         //daftarkan listener untuk IOErrorEvent.IO_ERROR
  15. _imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadErrorListener);
  16.         //load gambar yang dimaksud
  17.         _imageLoader.load(request);
  18. }

Dalam listing di atas, kita daftarkan listener untuk 3 buah event yang di-broadcast oleh _imageLoader yaitu:

  • Event.INIT : event pada saat gambar siap ditampilkan di stage
  • ProgressEvent.PROGRESS : event yang dibroadcast selama proses loading
  • IOErrorEvent.IO_ERROR : event pada saat proses loading gagal

Untuk menangani ketiga event ini kita buat 3 buah function yaitu :

Actionscript:
  1. private function loadInitListener(e:Event):void {
  2.         //simpan gambar yang telah dimuat oleh _imageLoader
  3.         _image = Bitmap(_imageLoader.content);
  4.         //tambahkan ke dalam DisplayList sebagai child dari
  5.         //imageContainer
  6.         imageContainer.addChild(_image);
  7.         //hapus image sebelumnya dari
  8.         //daftar children imageContainer
  9. imageContainer.removeChildAt(imageContainer.getChildIndex(_image) - 1);
  10.         //isi info_txt dengan informasi
  11.         //gambar ke … dari total gambar
  12.         info_txt.text = _curImageID-_firstID+1 +"/" + _numImages;
  13. }
  14. private function loadProgressListener(e:ProgressEvent):void {
  15.         //variabel untuk menyimpan persentase byte yang
  16.         //sudah di download
  17.         var pct:Number = e.bytesLoaded / e.bytesTotal * 100;
  18.         //tampilkan load progress pada info_txt
  19.         info_txt.text = "loading image " + pct.toFixed(0)+"%";
  20. }
  21. private function loadErrorListener(e:IOErrorEvent):void {
  22.         //jika terjadi error, tampilkan pesan ini
  23.         info_txt.text = "Unable to load image";
  24. }

Button Events

Kembali ke function init(), kita daftarkan listener untuk prevBtn dan nextBtn. Listener adalah function yang akan dieksekusi ketika sebuah event terjadi, dalam hal ini MouseEvent.CLICK. Event ini akan “disiarkan” (broadcasted) pada saat sebuah Interactive Object di-klik.

Actionscript:
  1. prevButton.addEventListener(MouseEvent.CLICK, prevBtnListener);
  2. nextButton.addEventListener(MouseEvent.CLICK, nextBtnListener);

Sehingga function init() menjadi :

Actionscript:
  1. private function init():void {
  2.         _baseURL = "gambar";
  3.         _fileExt = "jpg";
  4.         _lastID = 6;
  5.         _firstID = 2;
  6.         _numImages = _lastID - _firstID + 1;
  7.         prevButton.addEventListener(MouseEvent.CLICK, prevBtnListener);
  8.         nextButton.addEventListener(MouseEvent.CLICK, nextBtnListener);
  9. }

Kita buat dua buah function untuk menangani button events di atas:

Actionscript:
  1. private function nextBtnListener(e:MouseEvent):void {
  2.         //jika proses loading sedang berjalan,
  3.         //batalkan proses itu
  4.         if(isLoading) closeStream();
  5.         //load gambar berikutnya
  6.         loadImage(getNextImage());
  7. }
  8. private function prevBtnListener(e:MouseEvent):void {
  9.         //jika proses loading sedang berjalan,
  10.         //batalkan proses itu
  11.         if(isLoading) closeStream();
  12.         //load gambar sebelumnya
  13.         loadImage(getPrevImage());
  14. }
  15. private function getNextImage():uint {
  16.         //jika gambar yang sedang ditampilkan
  17.         //bukan gambar terakhir,
  18.         //isi variabel next dengan ID gambar berikutnya
  19.         //tapi jika gambar yg sedang ditampilkan
  20.         //adalah gambar terakhir,
  21.         //isi next dengan ID gambar pertama
  22.         var next:uint = (_curImageID < _lastID ) ?  _curImageID+1 : _firstID ;
  23.         return next;
  24. }
  25. private function getPrevImage():uint {
  26.         //jika gambar yang sedang ditampilkan
  27.         //bukan gambar pertama,
  28.         //isi variabel prev dengan ID gambar sebelumnya
  29.         //tapi jika gambar yg sedang ditampilkan
  30.         //adalah gambar pertama,
  31.         //isi prev dengan ID gambar terakhir
  32.         var prev:uint = (_curImageID > _firstID ) ?  _curImageID-1 : _lastID;
  33.         return prev;
  34. };
  35. private function closeStream():void {
  36.         //batalkan proses loading
  37.         _imageLoader.close();
  38.         //buang event listener utk Event.INIT
  39. _imageLoader.contentLoaderInfo.removeEventListener(Event.INIT, loadInitListener);
  40. }
  41. private function get isLoading():Boolean {
  42.         //jika _imageLoader sedang melakukan
  43.         //proses loading, b bernilai true
  44.         var b:Boolean = _imageLoader.contentLoaderInfo.bytesLoaded < _imageLoader.contentLoaderInfo.bytesTotal;
  45.         return b;
  46. }

Terakhir, panggil loadImage() dari function init(). Isi argumennya dengan _firstID untuk memuat gambar pertama; loadImage(_firstID).

Main.as selengkapnya:

Actionscript:
  1. package  {
  2.         import flash.display.*;
  3.         import flash.net.URLRequest;
  4.         import flash.text.*;
  5.         import flash.events.*
  6.         public class Main extends Sprite{
  7.                 public var imageContainer:MovieClip;
  8.                 public var info_txt:TextField;
  9.                 public var nextButton:SimpleButton;
  10.                 public var prevButton:SimpleButton;          
  11.                 private var _baseURL:String;       
  12.                 private var _fileExt:String               
  13.                 private var _lastID:uint;                     
  14.                 private var _firstID:uint;                 
  15.                 private var _numImages:uint;       
  16.                 private var _curImageID:uint;      
  17.                 private var _image:Bitmap;                 
  18.                 private var _imageLoader:Loader;       
  19.                 public function Main() {
  20.                         init();
  21.                 }
  22.                 private function init():void {
  23.                         _baseURL = "gambar";
  24.                         _fileExt = "jpg";
  25.                         _lastID = 6;
  26.                         _firstID = 2;
  27.                         _numImages = _lastID - _firstID + 1;
  28.                         prevButton.addEventListener(MouseEvent.CLICK, prevBtnListener);
  29.                         nextButton.addEventListener(MouseEvent.CLICK, nextBtnListener);
  30.                         loadImage(_firstID);
  31.                 }
  32.                 private function loadImage(id:uint):void {
  33.                         _curImageID = id;
  34.                         var request:URLRequest = new URLRequest();
  35.                         request.url = _baseURL +"/" + String(id) + "." +  _fileExt;
  36.                         _imageLoader = new Loader();
  37. _imageLoader.contentLoaderInfo.addEventListener(Event.INIT, loadInitListener);
  38. _imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgressListener);
  39. _imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadErrorListener);
  40.                         _imageLoader.load(request);
  41.                 }
  42.                 private function getNextImage():uint {
  43.                         var next:uint = (_curImageID < _lastID ) ?  _curImageID+1 : _firstID ;
  44.                         return next;
  45.                 }
  46.                 private function getPrevImage():uint {
  47.                         var prev:uint = (_curImageID > _firstID ) ?  _curImageID-1 : _lastID;
  48.                         return prev;
  49.                 }
  50.                 private function nextBtnListener(e:MouseEvent):void {
  51.                         if(isLoading) closeStream();
  52.                         loadImage(getNextImage());
  53.                 }
  54.                 private function prevBtnListener(e:MouseEvent):void {
  55.                         if(isLoading) closeStream();
  56.                         loadImage(getPrevImage());
  57.                 }
  58.                 private function loadInitListener(e:Event):void {
  59.                         _image = Bitmap(_imageLoader.content);
  60.                         imageContainer.addChild(_image);
  61. imageContainer.removeChildAt(imageContainer.getChildIndex(_image) - 1);
  62.                         info_txt.text = _curImageID-_firstID+1 +"/" + _numImages;
  63.                 }
  64.                 private function loadProgressListener(e:ProgressEvent):void {
  65.                         var pct:Number = e.bytesLoaded / e.bytesTotal * 100;
  66.                         info_txt.text = "loading image " + pct.toFixed(0)+"%";
  67.                 }
  68.                 private function loadErrorListener(e:IOErrorEvent):void {
  69.                         info_txt.text = "Unable to load image";
  70.                 }
  71.                 private function closeStream():void {
  72.                         _imageLoader.close();
  73. _imageLoader.contentLoaderInfo.removeEventListener(Event.INIT, loadInitListener);
  74.                 }
  75.                 private function get isLoading():Boolean {
  76.                         var b:Boolean = _imageLoader.contentLoaderInfo.bytesLoaded < _imageLoader.contentLoaderInfo.bytesTotal;
  77.                         return b;
  78.                 }
  79.         }
  80. }

Catatan – Jika ada aplikasi yg Anda buat tidak berjalan dengan semestinya, bandingkan kode yg Anda tulis dengan yang ada di ImageSlider_final.tar.gz.

Selamat mencoba.

Hiks, sepertinya waktu liburan sudah usai, aku kembali tenggelam dalam aktifitas pekerjaanku, dengan kuitansi, nota, Anggaran, Laporan, SPJ, huaaaaaa … gimana yah? hmmm sperti sekarang nih, udah jam 2 pagi ajah, dan tetep aja laporanku blom beres, mana harus buat RAB dan TOR buat th 2008. Hiks hiks… alamat pulang pagi lagi.. padahal besok aku juga kudu nyiapin laporan taunan, ayo semangatt!!! menyemangati diri sendiri boleh kan ya? Ngutekin 10 digit itu bikin pusing kepalaku :(

Hai hai lama tak terkoneksi ke MP, :) ceritanya 3 hari ini kita pulkam alias pulang kampung, ke negeranya suami, hehehehe PONOROGO. Ada yang belum tau ponorogo? wah… sebetulnya itu tempat nan indah, masih penuh dengan sawah dan sepeda onthel, kekeke… Menyenangkan ada disana, damai bener rasanya…Tapi taun ini ada yang berbeda, dari biasa biasanya. Karena sejak berangkat dari Malang, kami diguyur hujan sepanjang perjalanan. Kebetulan rute yang kami ambil adalah rute Malang - Blitar - Tulung Agung - Trenggalek - Ponorogo. Dan, malamnya setelah kami sampai di Balong pun, tetep hujan saja sampai pagi. Alhasil, di pagi hari, nyaris seluruh ponorogo tenggelam dalam banjir.
eh ceritanya masih panjang, ntar lagi yah, gue ngantuk berat…


Mungkin kasus ini sudah tidak hangat lagi, berkisar tentang situs 17 Milyard itu. Pagi tadi secara blogwalkin dan sampai pada tautan situs 17 Milyard itu, semangkin tertawa saja saya ketika melihat situs 17 Milayrd itu berantakan dilihat pake browser firefox saya. Apa harga 17 Milyard itu masih kurang untuk membayar web designer yang bisa membuat situs ini lebih nyaman dibuka dengan browser firefox? Beeeeeeeuuu…….


Hongkong, rencananya sih kami mau berkunjung ke sana. Persiapan sudah dimulai, minimal dari membeli buku tentang Hongkong. Ceritanya sih aku sama sekali tidak tahu di Hongkong ada apa, jadi ingin tahu dulu. Lalu memilih2 tempat yang ingin aku kunjungi dan menandai dengan stabillo di buku ini.

Selain puding Natal yang kubuat di malam Natal, selain minum bir di malam Natal (wah sama sekali tidak berhubungan malah berkesan merusak syahdunya Natal), selain ke Gereja di hari Natal (salah jadwal pula!), berikut beberapa pelengkap kegembiraan Natalku.
Mereka bertiga ini adalah anggota keluarga baru kami.

Tags:

Ya, ya dari banyak orang yang kenal aku, sedikit sekali yang mau percaya aku bisa memasak. Sebagian percaya aku senang memasak, tapi sangat tidak yakin dengan hasilnya. Ada yang sudah lihat hasilnya, tapi tidak percaya dengan rasanya. Ah biarlah, yang penting suamiku mau menyantapnya.
Berikut beberapa hasil yang sempat aku abadikan.
[...]

Mundur sedikit ya…. sudah lama, tapi aku terlupa untuk upload foto ini. Ceritanya suatu hari aku ingin sekali dapat hadiah. Tapi ulang tahunku sudah lewat dan belum ada perayaan lain dekat2 ini. Suatu pagi bangun tidur, suamiku mengejutkanku dengan hadiah kecil. Ya, ya, pasti bertanya2 apa hadiahnya, kan? Mobil2an!!! Hore!!! Aku memang sudah lama ingin [...]

Tags: