Flash Menu dengan OOP
Dalam tutorial ini, saya akan coba menjelaskan dasar-dasar OOP dengan ActionScript2 dengan membuat aplikasi sederhana berupa menu untuk memuat file .swf eksternal. Saya juga akan menunjukkan bagaimana cara “menghemat” skrip dengan menggunakan bound class.
Kalau Anda ingin mengikuti tutorial ini step-by-step, silakan donlod file OOP-menu.zip . Hasil akhirnya ada di folder /final dan kalau skrip yg Anda tulis nggak jalan, bandingkan dengan skrip yang ada di folder ini. Di dalam file .zip itu ada sebuah file lain bernama loadedClipTemplate.fla , file ini hanya berisi template untuk membuat .swf yang akan dimuat ke dalam aplikasi. Anda bisa menggunakannya atau membuat .fla sendiri.
Mulai belajar!
Buka file menu-oop-start.fla di folder /starter. Anda lihat di sana ada 4 buah layer, salah satunya bernama script. Di layer ini kita akan menulis kode actionscript. 3 buah layer yang lain berisi, UI assets berupa movieclip dan sebuah kotak sebagai background navigasi. File .fla ini hanya berisi satu frame saja.
Buka panel Library , di dalamnya ada dua symbol yaitu button dan clipHolder . Keduanya adalah symbol untuk menu navigasi dan untuk menampung .swf eksternal yang dimuat.
Catatan – Kalo Anda ingin menggunakan preloader, geser seluruh isi frame 1 ke frame 3 atau lebih. Kenapa? Saya pernah jelaskan dalam sebuah thread di Babaflash forum . Silahkan dibaca.
Di Stage, sudah saya buat sebuah menu berupa movieclip dengan nama instance btnHome_mc. MovieClip ini memiliki sebuah dynamic textfield kosong bernama label yang nantinya akan berisi teks berdasarkan nama instance MovieClip yang bersangkutan. Contohnya, pada saat aplikasi dijalankan, btnHome_mc akan menampilkan teks “Home”, btnAbout_mc menampilkan “About”, dan seterusnya.
Di layer content holder saya letakkan sebuah MovieClip dengan nama clipHolder sama dengan nama symbol -nya
Kita buat 2 buah duplikat btnHome_mc. Letakkan keduanya bersebelahan dengan btnHome_mc. Beri nama btnAbout_mc dan btnStuff_mc. Stage sekarang seperti gambar di bawah ini :
Sekarang klik kanan symbol button di Library . Klik menu Linkage. Aktifkan opsi Export for ActionScript. Isi field Class dengan “UIButton” seperti gambar berikut,
Klik OK.
Sekarang semua button di Stage telah “terhubung” dengan class UIButton.
Class Application
Langkah berikutnya adalah menulis skrip di layer script . Klik frame 1 di layer tersebut dan tulis skrip ini:
- import Application;
- var app:Application = new Application(this);
Application adalah nama class utama yang akan “menjalankan” aplikasi ini. Karena class ini akan mengontrol timeline utama (_root / _level0) , maka kita kirim this sebagai argumen konstruktornya.
Buat sebuah file ActionScript, simpan dengan nama Application.as. Di dalam file ini kita buat class Application, seperti ini:
- class Application{
- //_app adalah referensi ke _root/_level0
- private var _app:MovieClip;
- //konstruktor
- function Application(target:MovieClip){
- trace(“Application :: Constructor”);
- _app = target;
- }
- };
Kalo mau lihat apakah benar _app berisi referensi ke _level0. Tambahkan trace(_app) sebelum kurung tutup konstruktor.
Catatan – konstruktor (sering juga disebut CTOR), adalah function yang pertama kali dieksekusi pada saat sebuah instance dari class dibuat. Function ini tidak boleh memiliki nilai balik ( return value ) , tidak juga Void.
Class UIBUtton
Ok, sekarang kita lanjutkan dengan bound class UIButton.
Buat file ActionScript baru simpan dengan nama UIButton (ingat : nama file .as harus sama dengan nama class ). Dan kita tulis :
- class UIButton extends MovieClip {
- private var label:TextField;
- //constructor
- function UIButton() {
- }
- function onLoad() {
- trace("UIButton :: onLoad()");
- }
- };
Class ini merupakan turunan dari MovieClip. Kenapa MovieClip? Karena bound class hanya bisa digunakan untuk symbol bertipe MovieClip. Untuk membuat turunan sebuah class tertentu, kita menggunakan keyword extends .
Ingat di dalam symbol button, kita punya dynamic textfield bernama label. Agar dapat mengaksesnya, kita perlu mendeklarasikan sebuah variabel dengan nama yang sama dengan nama instance-nya. Dalam hal ini, label. Tipenya adalah TextField .
Keyword private menyatakan variabel ini hanya bisa diakses oleh class ini saja & tidak bisa diakses oleh class lain. Ini adalah salah satu prinsip OOP yang disebut data hiding . Lawan dari private adalah public , tapi mendeklarasikan sebuah variabel sebagai public variable bukan hal yang baik. Kalau Anda ingin membuat variabel yang bisa diakses oleh class lain, gunakan getter & setter atau accessor & mutator , sementara tetap buat variabelnya sebagai variabel private.
Catatan – Pasangan Getter & Setter sedikit berbeda dengan Accessor & Mutator walaupun fungsinya sama. Jika kita menggunakan getter & setter, maka kita menggunakan keyword get dan set . Sebaliknya, kita gunakan function dengan prefiks (awalan) get dan set untuk mengakses variabel dengan Accessor & Mutator . Dalam tutorial ini, saya menggunakan accessor berbentuk sebuah function dengan nama setTargetURL() untuk mengakses variabel private di _class UIButton.
function onLoad()
Function ini , bersama semua function yang dimiliki class MovieClip, otomatis tersedia pada class turunan MovieClip. Function onLoad() dieksekusi pada saat instance yang bersangkutan siap untuk ditampilkan di Stage. Karena kita tidak bisa mengirimkan argumen ke konstruktor bound class , maka function inilah yang akan sering kita gunakan untuk inisialisasi instance .
Dalam aplikasi yang kita buat, kita manfaatkan onLoad() untuk menginisialisasi label button yang ada di menu. Jadi kita tambahkan satu baris skrip sehingga onLoad() menjadi seperti ini:
- function onLoad() {
- trace("UIButton :: onLoad()");
- label.text = this._name.slice(3, this._name.length-3);
- };
Catatan – slice() adalah salah satu function yang dimiliki oleh class String. Baca manual Flash untuk informasi lebih lanjut.
Sekarang coba test Movie. Anda lihat semua button memiliki label berdasarkan nama instance-nya yaitu “Home”, “About”, dan “Stuff” .
Cool, isn’t it?
Coba Anda buat sebuah instance button baru, beri nama misalnya “btnCool_mc” . Maka pada saat test movie, button tersebut akan memiliki label “Cool” .
Really cool. :-)
Callbacks
Masih di class UIButton. Ingat bahwa dengan meng-_extend_ MovieClip, UIButton memiliki onRelease(), onPress(), dll. Dalam aplikasi ini, kita hanya perlu menggunakan onRelease, onRollOver, dan onRollOut.
onRelease akan memuat file .swf eksternal dan menempatkannya ke dalam sebuah container MovieClip. Keduanya (URL dari .swf dan container) kita definisikan dalam class Application. Kenapa ? Supaya class UIButton bisa kita gunakan untuk aplikasi lain.
Jadi, kita perlu membuat callbacks (function yang menghandel function lain) dan meng- assign function tersebut sesudah URL dan container ditentukan oleh Application.
Pertama, yang kita perlukan adalah sebuah function public , yang bisa diakses oleh Application untuk mengirimkan alamat URL dari .swf dan container MovieClip dimana swf itu akan dimuat.
Buat function dengan nama setTargetURL() dengan parameter url dan clipHolder. Dan buat juga variabel private bernama _clipURL bertipe String dan _clipHolder bertipe MovieClip. Maksudnya agar kedua parameter setTargetURL() dapat digunakan oleh function lain dalam UIButton.
- public function setTargetURL(url:String, clipHolder:MovieClip) {
- trace("UIButton :: setTargetURL()"+" : "+url+" : "+clipHolder);
- _clipURL = url;
- _clipHolder = clipHolder;
- };
Perhatikan bahwa kita meng- assign masing-masing parameter ke sebuah variabel private yaitu _clipURL dan _clipHolder.
Selanjutnya, buka kembali file Application.as . Dalam konstruktor, kita tambahkan beberapa baris kode untuk menentukan alamat url .swf dan container untuk masing-masing button.
- function Application(target:MovieClip){
- _app = target;
- _app.btnHome_mc.setTargetURL("home.swf",_app.clipHolder);
- _app.btnAbout_mc.setTargetURL("about.swf",_app.clipHolder);
- _app.btnStuff_mc.setTargetURL("stuff.swf",_app.clipHolder);
- };
Catatan – Kalo Anda mau mencobanya di web, maka Anda harus menggunakan absolute URL untuk alamat .swf , misalnya : “http://someweb.com/about.swf”
Kembali ke UIButton
Kita ingin agar semua button memiliki callback sesudah Application menentukan alamat url dan container. Jadi kita perlu membuat sebuah function yang dipanggil dari setTargetURL() . Kita beri nama function tersebut setCallbacks().
- private function setCallbacks() {
- trace("UIButton :: setCallbacks()");
- onRelease = handleRelease;
- onRollOver = handleOver;
- onRollOut = handleOut;
- };
Dan kita panggil setCallbacks() dari setTargetURL().
- public function setTargetURL(url:String, clipHolder:MovieClip) {
- trace("UIButton :: setTargetURL()"+" : "+url+" : "+clipHolder);
- _clipURL = url;
- _clipHolder = clipHolder;
- setCallbacks();
- };
Terakhir kita buat function untuk memuat .swf ke dalam container . Kita beri nama function tersebut handleRelease().
- private function handleRelease():Void {
- trace("UIButton :: handleRelease()");
- _clipHolder.loadMovie(_clipURL);
- };
Perhatikan bahwa kita memanggil function loadMovie dari clipHolder. Inilah alasannya mengapa kita meng- _assign parameter setTargetURL() ke variabel _clipHolder & _clipURL.
Untuk onRollOver dan onRollOut, Anda bebas menentukan sendiri. Dalam contoh yg saya buat, saya hanya mengubah nilai _alpha dan posisi button.
- private function handleOver():Void {
- this._alpha = 50;
- this._y += 2;
- };
- private function handleOut():Void {
- this._alpha = 100;
- this._y -= 2;
- };
Sekarang coba jalankan Aplikasi dan coba klik masing-masing button. Silahkan lihat file yang ada di folder /final untuk melihat sourcecode lengkapnya.
Bandingkan aplikasi yang Anda buat dengan yang ini:
Demikian, semoga bermanfaat.
Comments [1]
1. samremuner , 1458 days ago #
Salam Kenal
Sy Masih binggung mengenai gabungan Flash dengan Vb. Tolong Dong Jelasin dengan detail!
Tanks,
Commenting is closed for this article.