skip to:

masputih.com - OLD SITE

01 January 2008 in ActionScript 3, Tutorial | permalink

DisplayList dan AS3 rendering model

Salah satu perbedaan mendasar antara AS3/FlashPlayer9 dengan versi sebelumnya adalah mengenai bagaimana object ditampilkan (rendering model ). Dalam AS1/2, rendering model terfokus pada MovieClip dengan menggunakan attachMovie(), duplicateMovieClip(), dan createEmptyMovieClip().

Setiap kali kita membuat MovieClip, secara otomatis MovieClip tersebut ditambahkan ke dalam sebuah container ( root atau sebuah MovieClip lain). MovieClip yang dibuat tidak bisa dipindahkan dari satu container ke container yang lain. Yang bisa kita lakukan adalah menghapus MovieClip yang bersangkutan dan membuat MovieClip baru.

AS3 memiliki rendering model yang 100% berbeda, tidak kaku, mudah dimanipulasi, dan terfokus pada DisplayList. Objek yang ingin ditampilkan harus ditambahkan ke dalam DisplayList. Dengan kata lain, semua objek yang tidak ada dalam DisplayList tidak akan ditampilkan.

DisplayList

DisplayList adalah objek yang berisi susunan hierarkis semua objek yang ditampilkan dalam sebuah movie (.swf). Setiap .swf memiliki satu DisplayList yang berisi 3 buah elemen visual :

  • stage
  • DisplayObjectContainer
  • DisplayObject

stage

stage adalah root dari DisplayList. Setiap movie memiliki satu objek stage yang berisi semua elemen visual yang tampak di layar. Untuk mengakses objek stage, kita menggunakan properti stage yang dimiliki oleh semua DisplayObject yang ada dalam DisplayList.

DisplayObjectContainer

DisplayObjectContainer adalah objek yang bisa “diisi” dengan DisplayObject. Stage, MovieClip, Sprite, dan Shape adalah DisplayObjectContainer .

DisplayObject

DisplayObject adalah objek visual. Sprite, MovieClip, Shape, TextField, dsb adalah contohnya. Sebuah DisplayObject tidak akan ditampilkan di layar sampai ia ditambahkan ke dalam DisplayList.

Menambahkan Object dari Library

Silakan donlod file display_starter.fla. Di dalamnya ada sebuah layer bernama “script” dan 4 buah MovieClip di dalam Library yaitu Bintang, Lingkaran, Segiempat, dan Segilima.

Pertama, kita set Linkage dari keempat MovieClip tersebut. Caranya, buka Library Panel ( Ctrl+L ) -> klik kanan pada salah satu MovieClip -> pilih Linkage. Aktifkan opsi “Export for ActionScript” dan klik OK. Lakukan pada semua MovieClip yang ada di Library Panel.

setting up linkage property

Catatan – Anda bisa mengisi field “Class” dengan sebarang nama class, tapi sebaiknya Anda samakan dengan nama MovieClip di Library Panel . Walaupun Anda akan menggunakan class tersebut untuk membuat objek, Anda tidak perlu membuat class sendiri, compiler akan melakukannya untuk Anda.

Oke, sekarang kita tulis skrip pada layer “script”. Kita coba buat objek Bintang.

Actionscript:
  1. var bintang:Bintang = new Bintang();
  2. bintang.x = 200;
  3. bintang.y = 100;

Coba tes movie yg kita buat. Kita akan melihat layar kosong, karena kita belum menambahkan objek Bintang ke dalam DisplayList. Untuk itu kita tambahkan satu baris kode : addChild(bintang); dan tes movie sekali lagi. Kita lihat sebuah objek Bintang di layar. Gampang sekali!

Sekarang coba tampilkan semua objek.

Actionscript:
  1. //buat objek Bintang
  2. var bintang:Bintang = new Bintang();
  3. bintang.x = 200;
  4. bintang.y = 100;
  5. //buat objek Segilima
  6. var segilima:Segilima = new Segilima();
  7. segilima.x = 200;
  8. segilima.y = 100;
  9. //buat objek Segiempat
  10. var kotak:Segiempat = new Segiempat();
  11. kotak.x = 200;
  12. kotak.y = 100;
  13. //tambahkan semua objek ke dalam DisplayList
  14. addChild(bintang);
  15. addChild(segilima);
  16. addChild(kotak);

Tes movie.

Children dan Depth

Berbeda dengan AS1/2, pada AS3 kita tidak bisa dengan bebas menambahkan objek ke dalam depth atau level tertentu karena dalam AS3 tidak boleh ada depth yang kosong. Jadi, jika kita menambahkan objek pada depth 2, kita harus yakin bahwa depth 1 sudah ada isinya. Kita tidak bisa menambahkan objek ke depth 2 jika depth 1 masih kosong.

3 baris addChild() pada kode di atas akan menempatkan objek Bintang pada depth atau level 0, segilima pada depth 1, dan kotak pada depth 2.

Untuk melihatnya dengan lebih jelas, tulis function berikut ini:

Actionscript:
  1. function getChildren(p:DisplayObjectContainer):Array{
  2.         var a:Array = [];
  3.         for(var i=0;i < p.numChildren;i++){
  4.                 a.push(p.getChildAt(i));
  5.         };     
  6.         return a;
  7. };

Dan, lakukan trace() untuk nilai balik function tersebut setelah addChild() seperti berikut ini :

Actionscript:
  1. addChild(bintang);
  2. trace("isi DisplayList : " + getChildren(this));
  3. addChild(segilima);
  4. trace("isi DisplayList : " + getChildren(this));
  5. addChild(kotak);
  6. trace("isi DisplayList : " + getChildren(this));

Tes movie lagi dan lihat output panel. Di sana akan tampak objek apa saja yang ada dalam DisplayList setelah addChild().

Untuk menambahkan objek ke dalam depth tertentu kita gunakan addChildAt(). Sebagai contoh, kode berikut ini membuat sebuah objek Lingkaran dan menampilkannya pada depth 3.

Actionscript:
  1. var lingkaran:Lingkaran = new Lingkaran();
  2. lingkaran.x = 200;
  3. lingkaran.y = 100;
  4. addChildAt(lingkaran,3);

Kita bisa menambahkan sebuah objek ke dalam depth yang sudah berisi objek lain. Dalam hal ini, objek yang tadinya berada pada depth tersebut akan dipindahkan ke depth yang lebih tinggi. Sebagai contoh, jika kita menambahkan objek lingkaran ke depth 2 yang sudah berisi kotak, maka objek kotak akan dipindahkan ke depth 3, sedangkan depth 2 akan diisi objek lingkaran.

Menghapus Object

Untuk menghapus sebuah objek dari DisplayList, kita bisa menggunakan removeChild() atau removeChildAt().

Untuk menghapus objek Bintang dari DisplayList kita gunakan salah satu dari kode berikut: removeChild(bintang) atau removeChildAt(0).

Saat sebuah objek dihapus dari DisplayList , indeks objek di atasnya akan berubah. Sebagai contoh, setelah eksekusi removeChild(bintang), objek segilima yang berada di depth 1, akan “turun” ke depth 0, objek kotak ke depth 1, dan seterusnya.

Catatan – Objek yang sudah dihapus dari DisplayList, tidak otomatis dihapus dari memori. Jika Anda ingin menampilkan kembali objek tersebut, Anda tinggal menambahkannya ke dalam DisplayList dengan addChild() atau addChildAt(). Untuk benar-benar menghapus objek, kita bisa menghapus semua reference ke objek yang bersangkutan dengan memberi nilai “null”, tapi itu juga nggak menjamin objek tsb diangkut oleh Garbage Collector .

Memindahkan Object (reparenting)

Hmm … keliatannya tutorial ini sudah terlalu panjang. Jadi, topik reparenting akan saya buat sebagai tulisan tersendiri.

Oke. Selamat mencoba!

Comments [2]

1. Bagus Hutomo , 1454 days ago #

Great tutorial..
That explains a lot of things.
Been playing with AS2 for eons. Maybe its good time to use AS3. :)

2. Ruddy , 1271 days ago #

Nice tutorial, tapi pak, saya ada problem lain nih, saya coba posting disini, yah mungkin aja ada yg bisa bantu soal addChild ini …

ok aku punya MovieClip di flash sebut aja button (symbol/class name) dan aku bermaksud menampilkan nya di stage dengan bantuan addChild plus array …cuma kok ga bisa akses property di dalem Mc nya ya …ok script nya spt ini …

var btn:Array = new Array

for(var i:int=0; i<5; i++) {
btn.push(new button());
btn[i].name=“button”+i
addChild(btn[i])

btn[i].y=i*40
//trace(movieclips[i].name)
btn[i].addEventListener(MouseEvent.CLICK,mclick)
}

function mclick(event:MouseEvent){ trace(this.name)
// kok keluarnya “root1” ya …gimana cara ngeluarin “btn1,2,dst”

}

saya jadi bingung cara buat mengakses property dr object ini … (name, xposition, yposition dll)

mohon pencerahannya , Thx a lots

Ruddy

Commenting is closed for this article.