animasi (part 3) konsep object oriented … · dasarnya, objek dari kutipan di atas adalah burung...
TRANSCRIPT
ANIMASI (PART 3) KONSEP OBJECT ORIENTED ACTIONSCRIPT 3.0
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.
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)
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).
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.
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;
}
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:
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.
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(); }
} }
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:
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); }
} }
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.
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.
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:
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.
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;
} }
}
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.
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.