Page 1
Konsep Object Oriented Actionscript 3.0 [email protected]
1
Konsep Object Oriented Actionscript 3.0
Fadhil Hidayat
email: [email protected] blog: 2persen.wordpress.com
website: 2persen.com
1. Pendahuluan
“See that bird?’ he says. ‘It’s a Spencer’s warbler. (I knew he didn’t know the real name.)
Well, in Italian, it’s a Chutto Lapittida. In Portuguese, it’s a Bom da Peida. In Chinese, it’s
a Chung-long-tah, and in Japanese, it’s a Katano Tekeda. You can know the name of that
bird in all the languages of the world, but when you’re finished, you’ll know absolutely
nothing whatever about the bird. You’ll only know about humans in different places, and
what they call the bird. So let’s look at the bird and see what it’s doing, that’s what
counts.”
—Richard Feynman dalam (Elst, Jacobs, & Yard, 2007)
Dari kutipan di atas, terkadang programer bingung tentang objek yang dimaksud. Pada
dasarnya, objek dari kutipan di atas adalah burung sedangkan nama-nama burung tersebut
merupakan properties nama dari burung tersebut. Burung, selain memiliki properties nama juga
memiliki properties jenis paruh, warna bulu, dan lain-lain. Perhatikan gambar di bawah ini.
Objek adalah bentuk nyata dari suatu class. Class adalah blueprint dari suatu objek. Objek
dibangun berdasarkan class. Perhatikan gambar berikut ini.
Page 2
Konsep Object Oriented Actionscript 3.0 [email protected]
2
Pada objek oriented programming juga dikenal konsep encapsulation. Fungsinya tak lain
“hiding the details”. Perhatikan gambar berikut.
Sebuah mobil telah dikemas sedemikian rupa sehingga penggunanya dapat menyalakan
mobil tersebut tanpa harus tahu proses apa yang terjadi di dalamnya. Demikian pula halnya dengan
konsep OOP, script dapat dibungkus dalam suatu class, dan class tersebut dapat digunakan oleh
siapa saja tanpa harus mengetahui proses di dalam class tersebut.
Konsep selanjutnya adalah polymorphism, "exhibiting similar features”. Perhatikan gambar
berikut.
Perhatikan suatu SPBU, setiap pompa memiliki fitur yang sama yaitu meteran pompa, selang
dan gagang pompa. Pompa tersebut dapat melayani berbagai bentuk mobil menggunakan fitur yang
sama. Hal yang demikian dinamakan sebagai polymorphism. Polymorphism adalah kemampuan
untuk mempunyai beberapa bentuk yang berbeda, namun memiliki fitur yang sama.
Inheritance, “avoid rebuilding the wheel”. Perhatikan penjelasan berikut ini.
Grog roll wheel. Wheel good. Grog doesn’t like rebuilding wheels. They’re heavy, made
of stone, and tend to crush feet when they fall over. Grog likes the wheel that his stone-
age neighbor built last week. Sneaky Grog. Maybe he’ll carve some holes into the wheel
to store rocks, twigs, or a tasty snack. If Grog does this, he’ll have added some-thing new
to the existing wheel.
__(demonstrating inheritance long before the existence of computers). Dalam (Elst,
Jacobs, & Yard, 2007)
Page 3
Konsep Object Oriented Actionscript 3.0 [email protected]
3
2. Encapsulation
“Encapsulation is all about simplification, hiding the details, and distributing the workload.”
(Elst, Jacobs, & Yard, 2007). Untuk lebih memahami konsep encapsulation, berikut ini adalah contoh
program flash menggunakan konsep encaptulation:
1) Buatlah sebuah file flash ActionScript 3.0 baru. Simpan dengan nama Encapsulation.fla.
2) Pada layer 1 - frame 1, buatlah sebuah objek lingkaran.
3) Ubah menjadi symbol objek lingkaran tersebut dengan cara sorot semua lingkaran
menggunakan mouse, klik kanan, convert to symbol. Pilih tipe movieclip, beri nama Bola dan
klik kotak bagian tengah pada registration.
4) Perhatikan panel library, sekarang objek movie clip Bola sudah ada pada panel library
dokumen flash.
“Movie clips are object oriented; they have their own dedicated properties and functions”
(Elst, Jacobs, & Yard, 2007). Untuk memahami pernyataan ini, lanjutkan dengan langkah berikut ini:
5) Klik ganda pada movie clip Bola, sehingga muncul timeline baru di dalam movie clip bola.
Buat sebuah layer pada timeline movie clip bola (Layer 2).
Page 4
Konsep Object Oriented Actionscript 3.0 [email protected]
4
6) Klik pada layer 2 – frame 1, ketikkan script berikut ini pada panel action.
stop();
import flash.events.Event;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(evtObj:Event):void {
trace("Halo, ini onEnterFrame pada Bola");
}
7) Test movie dengan menekan tombol keyboard Ctrl + Enter. Hasilnya akan sesuai seperti
gambar berikut.
8) Berikutnya, perbarui script pada movie clip Bola menjadi script berikut:
stop();
import flash.events.Event;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(evtObj:Event):void {
x++;
y++;
}
9) Test movie, hasil yang akan diperoleh adalah sumbu x dan sumbu y bola akan bertambah
terus menerus karena event onEnterFrame.
Dari langkah-langkah sebelumnya dipahami bahwa movie clip memiliki function dan
propertiesnya sendiri. Karena tiap movie clip memiliki function dan propertiesnya sendiri, maka tiap
movie clip dapat memiliki tingkah laku (behavior) sendiri. Ikuti langkah selanjutnya.
Page 5
Konsep Object Oriented Actionscript 3.0 [email protected]
5
10) Perbarui script pada movie clip Bola dengan script berikut ini untuk meningkatkan fungsi
tingkah laku dari movie clip.
stop();
import flash.events.Event;
var xv:Number=0;
var yv:Number=0;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(evtObj:Event):void {
x+=xv;
y+=yv;
}
function kiri(){
xv=-1;
yv=0;
}
function atas(){
xv=0;
yv=-1;
}
function kanan(){
xv=1;
yv=0;
}
function bawah(){
xv=0;
yv=1;
}
function berhenti(){
xv=0;
yv=0;
}
Page 6
Konsep Object Oriented Actionscript 3.0 [email protected]
6
11) Kembali ke _root Scene 1, kemudian buat layer 2 di atas layer 1. Klik pada layer 2 – frame 1,
kemudian pada panel action ketkkan script berikut:
import flash.events.Event;
stage.addEventListener(KeyboardEvent.KEY_DOWN, behaviorBola);
function behaviorBola(event:KeyboardEvent):void{
switch(event.keyCode){
case 37:
bola_mc.kiri();
break;
case 38:
bola_mc.atas();
break;
case 39:
bola_mc.kanan()
break;
case 40:
bola_mc.bawah();
break;
default:
bola_mc.berhenti();
break;
}
}
12) Lakukan test movie, kemudian perhatikan apa yang terjadi dengan objek lingkaran jika user
menekan tombol keyboard panah (kiri, kanan, atas dan bawah) dan tombol lainnya (misal
tombol spasi).
Dari langkah-langkah di atas, movie clip Bola memiliki tingkah laku (behavior) yang sudah
dibungkus (dienkapsulasi) dan terintegrasi di dalamnya. “Encapsulation may look like a very simple
concept, but it is tremendously powerful when doing object-oriented programming to create clean
and easily reusable code” (Elst, Jacobs, & Yard, 2007).
3. Classes
“Classes are the blueprints upon which objects are based” (Moock, 2007). Penting untuk
diketahui, bahwa nama class harus sama dengan nama filenya, termasuk huruf besar atau huruf
kecilnya. Untuk lebih memahami konsep class, berikut ini adalah contoh program flash
menggunakan konsep class:
Page 7
Konsep Object Oriented Actionscript 3.0 [email protected]
7
1) Buat sebuah actionscript, simpan dengan nama classes.as.
2) Ketikkan script berikut. (bukan pada panel action, perhatikan layar flash sekarang mirip
dengan notepad)
package {
import flash.display.MovieClip;
import flash.events.Event;
public class classes extends MovieClip {
public function classes() {
trace("pesan dari constructor classes");
this.addEventListener(Event.ENTER_FRAME, update);
}
private function updatePosition():void {
this.x++;
this.y++;
}
private function update(evtObj:Event):void {
this.updatePosition();
}
}
}
3) Buat sebuah file flash actionscript 3.0 baru. Simpan pada folder yang sama dengan file
actionscript classes.as, beri nama classes.fla (sama dengan nama file actionscript).
4) Klik pada layer 1 – frame 1. Pada stage, buat sebuah objek lingkaran.
5) Convert to symbol objek lingkaran tersebut dengan tipe movie clip, klik pada bagian tengah
pada registration dan beri nama Lingkaran. Klik pada tombol advance, beri centang pada
export for actionscript. Beri nama pada Class dengan classes (sama dengan nama
constructor pada class classes).
6) Test movie yang telah dibuat dengan cara menekan tombol keyboard Ctrl + Enter.
Perhatikan apa yang terjadi dengan objek lingkaran.
Page 8
Konsep Object Oriented Actionscript 3.0 [email protected]
8
Pada contoh di atas, movie clip Lingkaran akan memanggil class classes pada file classes.as.
Perhatikan kembali script pada file classes.as, pada script tersebut terdapat sebuah function yang
dijalankan otomatis saat class classes dipanggil, yaitu public function classes( ). Function ini memiliki
nama yang sama dengan nama classnya. Function seperti ini dinamakan dengan constructor. Dalam
sebuah class hanya boleh memiliki maksimal sebuah constructor saja. Namun constructor ini bisa
jadi tidak diperlukan dalam sebuah class, dibuat jika diperlukan saja. Langkah berikut ini
menunjukkan cara lain pemanggilan class.
7) Pada layer 1 – frame 1, ketikkan script berikut pada panel action.
import classes;
var haha:classes = new classes();
8) Coba lakukan test movie, dan perhatikan output program. Akan muncul pesan sebanyak 2
kali, yaitu dari objek Lingkaran dan dari variabel haha.
Pada dasarnya, constructor adalah sebuah function. Sifat dasar dari sebuah function adalah
dapat diberi parameter. Demikian pula dengan constructor, programer dapat menambahkan
parameter pada constructor. Namun hal ini memiliki pengecualian, jika contructor tersebut dipanggil
secara otomatis saat sebuah movie clip dijalankan, maka constructor class tersebut tidak dapat
diberikan parameter. Langkah untuk mensiasati hal ini adalah dengan membuat sebuah method
dengan nama lain (biasanya diberi nama dengan init = initialization, namun untuk saat ini function
diberi nama gerak). Ikuti langkah berikut:
9) Ubah script pada classes.as menjadi sebagai berikut.
package {
import flash.display.MovieClip;
import flash.events.Event;
public class classes extends MovieClip {
public var xv:Number=0;
public var yv:Number=0;
public function classes() {
}
public function gerak(a:Number, b:Number):void{
xv=a;
yv=b;
this.addEventListener(Event.ENTER_FRAME, update);
}
private function updatePosition():void {
this.x+=xv;
this.y+=yv;
}
private function update(evtObj:Event):void {
this.updatePosition();
}
}
}
Page 9
Konsep Object Oriented Actionscript 3.0 [email protected]
9
10) Pada file classes.fla, set nstance name dari objek lingkaran dengan nama Lingkaran.
11) Ubah juga script pada file classes.fla menjadi sebagai berikut:
import flash.events.Event;
stage.addEventListener(KeyboardEvent.KEY_DOWN, gerak);
function gerak(event:KeyboardEvent):void{
switch(event.keyCode){
case 37:
Lingkaran.gerak(-1,0);
break;
case 38:
Lingkaran.gerak(0,-1);
break;
case 39:
Lingkaran.gerak(1,0);
break;
case 40:
Lingkaran.gerak(0,1);
break;
default:
Lingkaran.gerak(0,0);
break;
}
}
Perlu diketahui, function di dalam sebuah class pada konsep object oriented programming
dinamakan dengan method. Dengan kata lain, constructor adalah sebuah method yang memiliki
nama yang sama dengan nama class. Untuk lebih menyederhanakan script, ikuti langkah berikut:
Page 10
Konsep Object Oriented Actionscript 3.0 [email protected]
10
12) Ubah script pada classes.as menjadi sebagai berikut.
package {
import flash.display.MovieClip;
import flash.events.Event;
public class classes extends MovieClip {
public var xv:Number=0;
public var yv:Number=0;
public function classes() {
}
public function gerakKiri():void{
xv=-1;
yv=0;
this.gerak();
}
public function gerakAtas():void{
xv=0;
yv=-1;
this.gerak();
}
public function gerakKanan():void{
xv=1;
yv=0;
this.gerak();
}
public function gerakBawah():void{
xv=0;
yv=1;
this.gerak();
}
public function diam():void{
xv=0;
yv=0;
this.gerak();
}
private function updatePosition():void {
this.x+=xv;
this.y+=yv;
}
private function update(evtObj:Event):void {
this.updatePosition();
}
private function gerak(){
this.addEventListener(Event.ENTER_FRAME, update);
}
}
}
Page 11
Konsep Object Oriented Actionscript 3.0 [email protected]
11
13) Ubah juga script pada classes.fla menjadi sebagai berikut.
import flash.events.Event;
stage.addEventListener(KeyboardEvent.KEY_DOWN, gerak);
function gerak(event:KeyboardEvent):void{
switch(event.keyCode){
case 37:
Lingkaran.gerakKiri();
break;
case 38:
Lingkaran.gerakAtas();
break;
case 39:
Lingkaran.gerakKanan();
break;
case 40:
Lingkaran.gerakBawah();
break;
default:
Lingkaran.diam();
break;
}
}
14) Test movie dan perhatikan apa yang terjadi jika user menekan tombol panah (kiri, atas,
kanan dan bawah) dan tombol lainnya.
Teknik lain dalam pemanggilan method suatu class adalah dengan menggunakan anonymous
function. Anonymous function ini adalah function tanpa nama yang bersifat sementara. Karena sifat
sederhana dari anonymous function ini, maka anonymous function ini tidak dapat dijalankan secara
bersamaan karena anonymous satu akan menghentikan anonymous function lainnya.
4. Inheritance
“This is natural inherited behavior in OOP—a class inherits from its parent (not its grandparent).
ActionScript 3.0 provides a special keyword, super, as a reference to its parent class” (Elst, Jacobs, &
Yard, 2007). Dari pernyataan ini dapat disimpulkan bahwa sifat dapat diwariskan dari parent ke child.
Pemanggilan class yang dimiliki oleh parent menggunakan kata kunci super. Untuk lebih memahami
konsep inheritance, ikuti langkah berikut ini:
1) Buat sebuah actonscript file baru, beri nama Mover.as.
Page 12
Konsep Object Oriented Actionscript 3.0 [email protected]
12
2) Ketikkan script berikut ini.
package {
import flash.events.Event;
import flash.display.MovieClip;
public class Mover{
public var targetMC:MovieClip;
public var xVel:Number;
public var yVel:Number;
function Mover(targetMC:MovieClip, xVel:Number, yVel:Number) {
this.targetMC = targetMC;
this.xVel = xVel;
this.yVel = yVel;
}
protected function updatePosition(evtObj:Event):void {
this.targetMC.x += this.xVel;
this.targetMC.y += this.yVel;
}
public function startMoving():void {
this.targetMC.addEventListener(Event.ENTER_FRAME,
this.updatePosition);
}
public function stopMoving():void {
this.targetMC.removeEventListener(Event.ENTER_FRAME,
this.updatePosition);
}
}
}
3) Buat sebuah file flash actionscript 3.0 baru, simpan dengan nama Mover.fla pada folder yang
sama dengan file Mover.as, kemudian pada layer 1 – frame 1 ketikkan script berikut ini.
var myMover:Mover = new Mover(circle,2,3);
myMover.startMoving();
4) Buat sebuah objek lingkaran, kemudian convert menjadi movie clip. Isikan instance name
dengan circle.
5) Lakukan test movie.
Script tersebut merupakan script yang mmiliki tipe sama dengan script sebelumnya. Untuk
memahami lebih lanjut tentang inheritance, ikuti langkah berikut:
6) Buat sebuah actionscript file baru, beri nama Bouncer.as dan simpan pada folder yang sama
dengan Mover.as.
Page 13
Konsep Object Oriented Actionscript 3.0 [email protected]
13
7) Ketikkan script berikut ini:
package {
import flash.display.MovieClip;
import Mover;
public class Bouncer extends Mover {
public function Bouncer(targetMC:MovieClip, xVel:Number,
yVel:Number) {
super(targetMC,xVel,yVel);
}
}
}
8) Ubah script pada Mover.fla menjadi script berikut ini.
var myBouncer:Bouncer = new Bouncer(circle, 2, 3);
myBouncer.startMoving();
9) Text movie, perhatikan class Bouncer memiliki sifat yang diwariskan oleh class Mover.
Perhatikan kembali script ini, class Bouncer melakukan extend pada class Mover.
Constructor class Bouncer memanggil constructor class Mover dengan menggunakan kata kunci
super. Perhatikan pula bahwa class Bouncer melakukan import pada class Mover.
Pada dasarnya, jika suatu class melakukan extend pada class lain, maka setiap method yang
ada pada class yang diextend akan berlaku untuk class yang melakukan extend. Pertanyaannya,
bagaimana jika class yang melakukan extend memiliki nama method yang sama dengan class yang di
extend? Lakukan override terhadap function tersebut. Ikuti langkah berikut:
Page 14
Konsep Object Oriented Actionscript 3.0 [email protected]
14
10) Ubah script pada Bouncer.as menjadi sebagai berikut.
package {
import flash.display.MovieClip;
import Mover;
import flash.events.Event;
public class Bouncer extends Mover {
public function Bouncer(targetMC:MovieClip, xVel:Number,
yVel:Number) {
super(targetMC,xVel,yVel);
}
private function bounceAtBorder():void {
if (this.targetMC.x > this.targetMC.stage.stageWidth
-(this.targetMC.width/2)) {
this.targetMC.x = this.targetMC.stage.stageWidth
-(this.targetMC.width/2);
this.xVel *= -1;
}
if (this.targetMC.y > this.targetMC.stage.stageHeight
-(this.targetMC.height/2)) {
this.targetMC.y = this.targetMC.stage.stageHeight
-(this.targetMC.height/2);
this.yVel *= -1;
}
if (this.targetMC.x < this.targetMC.width/2) {
this.targetMC.x = this.targetMC.width/2;
this.xVel *= -1;
}
if (this.targetMC.y < this.targetMC.height/2) {
this.targetMC.y = this.targetMC.height/2;
this.yVel *= -1;
}
}
override protected function updatePosition(evtObj:Event):void {
super.updatePosition(evtObj);
this.bounceAtBorder();
}
}
}
11) Jalankan Mover.fla. Perhatikan apa yang terjadi dengan objek lingkaran.
Perhatikan script tesebut, class Bouncer melakukan override terhadap function
updatePosition. Dengan melakukan override terhadap function ini, function updatePosition yang
terdapat pada class Boucher dapat memiliki sifat yang sama dengan class Mover. Tekniknya adalah
memanggil function pada class Mover menggunakan kata kunci super diikuti dengan nama
methodnya. Selain itu, pada class Bouncer dapat pula ditambahkan script baru. Konsep semacam ini
dinamakan dengan polymorphism, konsep ini akan dibahas pada bagian berikutnya.
Page 15
Konsep Object Oriented Actionscript 3.0 [email protected]
15
Inheritance hanya berlaku dari parent ke child, langkah berikut adalah contoh melakukan
inheritance dari child class ke child child class.
12) Buat file actionscript baru, kemudian simpan dengan nama Gravity.as dan simpan pada
folder yang sama dengan Bouncer.as.
13) Pada file ini, ketikkan script berikut ini.
package {
import flash.display.MovieClip;
import flash.events.Event;
public class Gravity extends Bouncer {
private var strength: Number;
private var lastPosX: Number;
private var lastPosY: Number;
public function Gravity(targetMC:MovieClip,
xVel:Number,yVel:Number, strength:Number=1) {
super(targetMC, xVel, yVel);
this.strength = strength;
}
override protected function updatePosition(evtObj:Event):
void {
super.updatePosition(evtObj);
this.applyGravity();
this.applyFriction();
this.checkForStop();
}
private function applyGravity():void {
this.yVel += this.strength;
}
private function applyFriction():void {
this.xVel *= 0.98;
this.yVel *= 0.98;
}
private function checkForStop():void {
if(this.targetMC.y ==
this.targetMC.stage.stageHeight
-(this.targetMC.height/2)) {
if(this.targetMC.x == this.lastPosX &&
this.targetMC.y == this.lastPosY) {
this.stopMoving();
}
}
this.lastPosX = this.targetMC.x;
this.lastPosY = this.targetMC.y;
}
}
}
Page 16
Konsep Object Oriented Actionscript 3.0 [email protected]
16
14) Ubah juga script pada Mover.fla dengan script berikut ini.
var myGravity:Gravity = new Gravity(circle, 2, 3, 5);
myGravity.startMoving();
Perhatikan hasil akhir dari script ini, class Mover mewarisi sifatnya kepada class Bouncer,
dan class Bouncer mewarisi sifatnya pada class Grafity. Konsep ini dikenal dengan nama inheritance.
5. Polymorphism
Pada dasarnya, polymorphism merupakan turunan dari konsep inheritance. Pada
pembahasan inheritance telah dibuat 3 class yang saling mewarisi sifat keturunan yaitu class Mover
mewarisi sifatnya kepada class Bouncer, dan class Bouncer mewarisi sifatnya pada class Grafity. Tiga
class ini dapat digunakan pada script actionscript. Dimana telah diketahui sebelumnya, 3 class ini
memiliki method yang berbeda-beda, maka jika suatu objek memanggil masing-masing class ini
behaviornya pun akan sesuai dengan class yang dipanggilnya.
Untuk lebih memperjelas konsep polymorphism, ikuti langkah berikut:
1) Gunakan file Mover.fla. Hapus semua script yang terdapat pada frame 1.
2) Duplikasi lingkaran hingga terdapat 3 lingkaran di dalam stage.
3) Isikan instance name pada masing-masing objek lingkaran dengan nama Lingkaran1,
Lingkaran2, Lingkaran3.
Page 17
Konsep Object Oriented Actionscript 3.0 [email protected]
17
4) Ketikkan script berikut ini pada frame 1.
import Mover;
import Bouncer;
import Gravity;
var myMover:Mover = new Mover(circle1, 2, 3);
var myBouncer:Bouncer = new Bouncer(circle2, 2, 3);
var myGravity:Gravity = new Gravity(circle3, 2, 3, 5);
startClassInstanceMoving(myMover);
startClassInstanceMoving(myBouncer);
startClassInstanceMoving(myGravity);
function startClassInstanceMoving(className:Mover):void {
className.startMoving();
}
5) Perhatikan apa yang terjadi pada msing-masing objek lingkaran.
Perhatikan, perubahan bentuk gerak dari lingkaran ini diakibatkan oleh class child yang
melakukan extend terhadap class parent, melakukan override terhadap method class parent dengan
tujuan menambahkan fitur dari method tersebut. Konsep perubahan bentuk ini disebut dengan
polymorphism.
6. Referensi
1. Elst, P., Jacobs, S., & Yard, T. (2007). Object-Oriented ActionScript 3.0. FriendsofED.
2. Moock, C. (2007). Essential ActionScript 3.0. O’Reilly Media, Inc.
3. Webster, S., Yard, T., & McSharry, S. (2008). Foundation ActionScript 3.0 with Flash CS3 and
Flex. FirendsofED.
