skip to:

masputih.com

29 December 2007 in ActionScript 3, Tutorial | permalink

Membuat Image Slider

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.

Comments [4]

1. Fajar , 359 days ago #

Mas Tutorialnya Bagus… tapi saya ada bbrp pertanyaan buat anda.
1. apakah penjelasan dari “init” yg terdapat di :“public function Main() {
init();{” apakah untuk mendeklarasikan var yg ada…?

2. bagaimana cara penggunaan “Aray” saya menggunakan aray di taruh di Flash IDE, untuk menarik script yg ada di eksternal, ini cthnya:

var aContentClips:Array = new Array(mShop, mSponsor, mAbout, mResource, mContact, mExpedition);
var aButtonClips:Array = new Array(bShop, bSponsor, bAbout, bResource, bContact, bExpedition);
var aLabel:Array = new Array(“SHOP”,“SPONSORS”,“ABOUT”,“RESOURCES”,“CONTACT”,“EXPEDITIONS”);

setUpContent(aContentClips);
setUpButtons(aButtonClips,aLabel);
clearAllContent();

bagaimana caranya kl saya pindahkan ke AS Eksternal ?

3. saya mengikuti saran anda menggunakan FlashDevelop, yg ternyata sangat bagus sekali… tapi apakah ada Versi untuk Mac OS(macintosh)? krn saya mengunakan Macintosh untuk di kantor…

Terima kasih Sebelumnya…

2. anggie bratadinata (author) , 358 days ago #

Fajar,

#1. Ya. Seperti yg sudah saya jelaskan di atas, init adalah function di mana proses inisialisasi dilakukan termasuk pendefinisian instance variabel.

#2. Maaf, lebih tepat kalau Anda memposting pertanyaan itu ke babaforum atau milis babaflash atau milis id-flash.

#3. FD hanya bisa dipake di Windows karena butuh .NET 2.0. Ada alternatif untuk OS yg lain, namanya FDT, berupa plugin untuk Eclipse IDE. Sayangnya FDT nggak gratis, harganya sekitar $200 – 300.

3. andi , 357 days ago #

mau dong bagi fla cara bikin scroll nya, thanks yak

4. Fajar Sylvana , 357 days ago #

ok mas Thx atas jawabannya… BTW Tutorial anda Bgs2 semuanya.
Keep a good works Dude.
Oia Mas.. gak ada niatan bikin Video Tutorial Buat Actionscript 3.0 ?

Commenting is closed for this article.