Duplikasi Movie Clip

“Keindahan adalah duplikasi sebuah bentuk yang tertata dengan pola tertentu”

Dalam membuat sebuah aplikasi multimedia, tidak hanya dibutuhkan kemampuan intuisi artistic desain akan tetapi dibutuhkan juga penguasaan bahasa pemrograman yang bisa menjadikan desain Anda jauh lebih fantastis. Apalagi jika kita bermain dalam Flash yang menggunakan Action Script sebagai basis bahasa pemrograman, kita bisa menjadikan objek yang kita buat menjadi sebuah animasi yang lebih realistis dengan memasukkan hukum-hukum fisika. Dan juga lebih akurat dengan memasukkan aturan-aturan matematis geometri.

Sebagai gambaran, perhatikan pola dibawah ini :

Pola di atas terlihat indah namun jika kita amati lebih jauh pola tersebut sebenarnya hanya tersusun dari satu bentuk yang terduplikasi dan tersusun mengukuti aturan tertentu sehingga tampak rapi dan indah.

Pada bagian ini Anda akan kami ajak untuk menciptakan pola-pola keindahan dengan hanya memanfaatkan satu pokok bahasa dalam Action Script (AS) yaitu Duplicate Movie Clip.

Dua Cara Menduplikasi Movie Clip

Untuk menduplikasi Movie Clip (MC) dapat digunakan MovieClip.duplicateMovieClip(“namaMC”, depth) atau bisa juga menggunkaan pemanggilan Movie Clip dari Library dengan perintah attachMovie(“namaID”,depth). Kedua teknik tersebut pada dasarnya sama namun jika kita ingin menyembunyikan objek lebih baik kita menggunkan teknik kedua.

Duplicate Movie Clip

Secara umum penulisan Action Script ini adalah :

myMovieClip.duplicateMovieClip(newname, depth)

Atau bisa juga menggunakan :

duplicateMovieClip(target, newname, depth)

myMovieClip merupakan MC yang akan diduplikat (target). Newname adalah nama untuk MC hasil duplikasi sedangkan depth adalah bilangan bulat yang menunjukkan level dari MC yang baru.

Catatan Penting :

Nilai depth untuk masing-masing MC hasil duplikasi harus berbeda karena setiap level hanya bisa digunakan untuk satu MC hasil duplikasi.

Contoh :

Berikut ini adalah contoh AS untuk menduplikasi objek MC bernama “mc” yang menghasilkan MC bernama “mc1”.

mc.duplicateMovieClip("mc1", 1);

mc1._x = 200;

mc1._y = 200;

Script di atas merupakan script yang dipasang pada Frame yang menduplikasi MC “mc” dengan nama baru “mc1” kemudian “mc1” diposisikan pada koordinat (200,200).

Attach Movie

Dengan menggunakan file latihan sebelumnya, kita akan melakukan penggandaan MC dengan teknik yang lain yakni attachMovie. Sekarang, hapus MC “mc” lalu buka kotak dialog library melalui Windows >> library.

Klik kanan pada MC yang akan di panggil kemudian pilih Linkage.. sehingga muncul kotak dialog Linkage Properties. Beri tanda pada Export for ActionScript lalu berikan nama “mc1” kemudian tekan OK.

Sekarang kita kembali pada kotak dialog Action Frame untuk menuliskan ActionScript pemanggilan MC “mc1” :

attachMovie("mc1","mc",1);

mc._x=200;

mc._y=200;

“mc1” adalah IDname yang sudah kita berikan sebelumnya pada linkage properties, sedangkan “mc” adalah nama untuk MC yang baru.

Duplikasi dan Removing MovieClip dengan Jumlah Lebih Banyak

Untuk menduplikasi MC dengan jumlah yang lebih banyak, kita memerlukan fungsi for untuk memberikan nilai index pada instace name dan juga nilai depth pada MC hasil duplikasi sehingga setiap MC hasil duplikasi memiliki index dan level yang berbeda.

Lebih Jauh Tentang Fungsi for

Secara umum penulisan fungsi ini dalam ActionScript adalah :

for(init; condition; next) {

        statement(s); 

}

Kegunaan utama dari for adalah menyusun bilangan bulat yang terurut. Init merupakan nilai awal yang diberikan, condition merupakan batas, sedangkan next selalu diikuti kode ++ untuk urutan naik dan – untuk urutan turun.

Contoh :

Untuk membuat urutan bilangan dari 1 sampai dengan 100 kita menggukan script berikut :

for(i=1; i<=100; i++) {

        trace(i);

}

Lakukan test movie untuk melihat output hasil. Kita juga bisa melakukan modifikasi urutan bilangan, sebagai contoh kita akan menyusun deret dengan nilai beda 2 dimulai dari bilangan 2. Lakukan perubahan script sebagai berikut :

for(i=1; i<10; i++) {

        deret = i*2;

        trace(deret);

}

Jika Anda melakukan test movie maka output yang dihasilkan adalah deret bilangan 2, 4, 6, 8, dst. Cara kerja dari program di atas adalah :

(1*2), (2*2), (3*2), (4*2), dst..

Jika kita perhatikan urutan bilangan di atas kita menemukan urutan yang konstan yakni 1, 2, 3,4, dst. Urutan tersebut adalah nilai index yang bisa kita manipulasi sesuai dengan kebutuhan. Perhatikan contoh script berikut :

for (i=1; i<=100; i++) {

        sum = sum + i;

        trace(sum);

}

Lakukan test movie maka akan menghasilkan output berupa deret bilangan : 1, 3, 6, 10, 15, … . cara kerja program diatas adalah :

(1+0=1), (2+1=3), (3+3=6), (4+6=10), (5+10=15), …

Deret bilangan di atas sebenarnya memiliki index yang selalu konstan kemudian dijumlahkan dengan bilangan sebelumnya.

Duplicate MovieClip dalam Fungsi for

Sekarang kita akan menjadikan duplicate MovieClip sebagai statement dalam fungsi for sehingga hasil duplikasi menjadi lebih banyak. Perhatikan contoh berikut :

for (i=1; i<=10; i++) {

        mc.duplicateMovieClip("mc"+i, i);

        allMc = eval("mc"+i);

        allMc._x = 100+(30*i);

        allMc._y = 200;

}

Fungsi for pada Script di atas menghasilkan deret bilangan dari 1 s.d 10 yang ditunjukkan oleh variable i. Kemudian movie clip dengan nama “mc” diduplikat menghasilkan nama baru yakni “mc1”, “mc2”, “mc3”, dst oleh script dengan kode penulisan “mc”+i. Selanjutnya agar hasil duplikasi terlihat jelas maka kita perlu melakukan positioning pada movie clip hasil duplikasi. Untuk melakukan positioning, pertama kita harus memberikan variable yang bisa mengakses setiap movie clip hasil duplikasi. Ada dua cara untuk melakukan ini yaitu dengan menggunakan kode eval(variable) dan setProperty(target,property, nilai).

Untuk script di atas, kode allMc = eval("mc"+i); berarti setiap movie clip hasil duplikasi dapat di akses menggunakan variable allMc. Sehingga kode yang hanya terdiri dari satu baris itu sama halnya ketika ketika kita menuliskan kode panjang seperti berikut :

mc1._x=130; mc2._x=160; mc3._x=190, dst… 

Sekarang kita akan mengupas lebih jauh mengenai positioning. Kode untuk melakukan positioning ini adalah allMc._x = 100+(30*i); dan allMc._y = 200;. Kode pertama mendefinisikan nilai koordinat x untuk masing-masing movie clip :

mc1._x= 100+(30*1) ; mc2._x = 100+(30*2) ; mc3._x = 100+(30*3) ; dst… 

Sehingga movie clip hasil duplikat diposisikan secara horizontal ke kanan diawali dari koordinat (130,200). 

(Tampilkan file swf : duplikat dalam for.swf dan link download duplikat dalam for.fla)

Selain menggunakan kode eval (variable) kita juga bisa menggunakan kode setProperty. Kode berikut akan menghasilkan positioning yang sama dengan sebelumnya :

for (i=1; i<=10; i++) {

        mc.duplicateMovieClip("mc"+i, i);

        setProperty("mc"+i,_x,100+(30*i));

        setProperty("mc"+i,_y,200);

}

Remove Movie Clip

Jika sebuah movie clip bisa diduplikasi maka ia juga bisa dihilangkan. Akan tetapi hanya movie clip tertentu saja yang bisa dihilangkan yaitu movie clip hasil duplikasi atau movie clip hasil attachMovie. Kode untuk menghilangkan movie clip adalah removeMovieClip(). Untuk memahami kode ini, kita akan meduplikasi sebuah movie clip kemudian setelah movie clip tersebut di klik maka akan hilang. Duplikasi movie clip lalu di dalam movie clip berikan script berikut :

// actionscript pada movie clip “mc”

onClipEvent (enterFrame) {

        this.onRelease = function() {

               this.removeMovieClip();

        };

}

Script di atas akan menghilangkan movie clip setelah movie clip di klik. 

Lebih Jauh Tentang Positioning

Membuat Gradasi Warna

Sekarang kita akan memposisikan duplikat movie clip sedemikian rupa sehingga penataan dalam formasi horizontal lebih presisi (secara otomatis menyesuaikan ukuran lebar movie clip) serta membuat nilai transparasi movie clip hasil duplikasi perlahan membesar hingga menghilang pada movie clip terakhir. Gunakan file sebelumnya dan lakukan penambahan script sebagai berikut :

for (i=0; i<=10; i++) {

        mc.duplicateMovieClip("mc"+i, i);

        allMc = eval("mc"+i);

        allMc._x = 100+(mc._width*i);

        allMc._y = 200;

        allMc._alpha=100-(10*i);

        mc._visible=false;

};

Script mc._width*i secara otomatis akan memposisikan movie clip secara horizontal. Jika ingin memberikan jarak (gap) antar movie clip sisipkan nilai lebar gap dalam satuan pixel pada script (mc._width+nilai_gap)*i. Script di atas juga menghilangkan MC “mc” dengan kode mc._visible = false; serta memberikan nilai transparasi yang selalu berkurang dari _alpha = 100% untuk “mc1” hingga _alpha = 0% untuk “mc10” oleh kode allMc._alpha=100-(10*i);. Tampilan hasil duplikasi di atas adalah :

Menyusun Formasi Lingkaran

Desain formasi lingkaran yang akan kita buat adalah sebagai berikut :

Untuk mendistribusikan duplikat movie clip dalam formasi lingkaran, kita memerlukan pengetahuan tambahan mengenai aturan matematis lingkaran sebagai berikut :

Memposisikan movie clip dalam formasi lingkaran berarti menempatkan movie clip pada koordinat Q (a,b). Oleh karena itu kita memerlukan formula Matematika untuk menemukan koordinat tersebut berdasarkan sudut dan panjang jari-jari lingkaran. Formula matematika yang sangat membantu dalam pekerjaan ini adalah aturan sinus dan cosines. Seperti pada gambar di atas, dalam sebuah lingkaran dapat di buat sebuah segitiga siku-siku dimana sisi miringnya adalah panjang jari-jari lingkaran. Untuk titik Q, nilai koordinat x sama dengan panjang PR (a = PR) sedangkan nilai koordinat y adalah panjang QR (b = QR).

Untuk mencari panjang QR (nilai koordinat b) kita bisa memakai aturan sinus sebagai berikut :

Sehingga , dengan PQ adalah radius.

Sedangkan untuk mencari panjang PR (nilai koordinat a) kita bisa memakai aturan cosines berikut :

Sehingga

Sekarang kita akan menerapkan kosep tersebut dalam Actionscript. Perhatikan langkah berikut :

Pada salah satu frame di lembar kerja utama isikan script berikut :

total_dot=20;

radius=100;

for (i=1; i<=total_dot; i++) {

        dots.dot.duplicateMovieClip("mc"+i, i);

        sudut = 360/total_dot*i;

        pos = eval(dots["mc"+i]);

        pos._x = Math.cos(sudut*(Math.PI/180))*radius/2;

        pos._y = Math.sin(sudut*(Math.PI/180))*radius/2;

        dots.dot._visible = false;

}

Karena movie clip yang akan diduplikat ada di dalam movie clip dots maka perintah yang digunakan adalah dots.dot.duplicateMovieClip("mc"+i, i). Nilai sudut bergantung pada berapa banyak movie clip akan digandakan (nilai i), oleh karena itu perintah yang digunakan untuk mendefinisikan nilai sudut adalah sudut = 360/total_dot*i sehingga nilai sudut untuk setiap movie clip akan berbeda dan posisinya pun menjadi berbeda secara teratur dengan movie clip lainnya.

Mengatur Besar Diameter secara Otomatis

Sekarang kita akan membuat nilai radius diatur secara otomatis berdasarkan banyaknya duplikat. Semakin banyak duplikat maka semakin besar pula radiusnya. Caranya hanya dengan mendefinisikan nilai radius dalam aturan sinus. Perhatikan tambahan script dibawah ini :

total_dot=20;

for (i=1; i<=total_dot; i++) {

        dots.dot.duplicateMovieClip("mc"+i, i);

radius = Math.floor((dots.dot._width/4)/Math.sin((360/n)/Math.PI/180));

        sudut = 360/total_dot*i;

        pos = eval(dots["mc"+i]);

        pos._x = Math.cos(sudut*(Math.PI/180))*radius/2;

        pos._y = Math.sin(sudut*(Math.PI/180))*radius/2;

        dots.dot._visible = false;

}

Coba lakukan test movie dan atur nilai total_dot untuk melihat perbedaannya.

Memberikan Efek Animasi Putaran

Karena duplikat movie clip berada di dalam movie clip dots maka untuk menganimasikan seluruh movie clip duplikat, cukup dengan menganimasikan movie clip dots yang kita gunakan sebagai ‘semacam wadah’ untuk semua duplikat. Sehingga kita hanya perlu menambahkan script dots._rotation+=5; seperti berikut ini :

total_dot=20;

_root.onEnterFrame=function(){

        for (i=1; i<=total_dot; i++) {

                dots.dot.duplicateMovieClip("mc"+i, i);

radius = Math.floor((dots.dot._width/4)/Math.sin((360/n)/Math.PI/180));

                sudut = 360/total_dot*i;

                pos = eval(dots["mc"+i]);

                pos._x = Math.cos(sudut*(Math.PI/180))*radius/2;

                pos._y = Math.sin(sudut*(Math.PI/180))*radius/2;

                dots.dot._visible = false;

                dots._rotation+=5;

        }

}

Menyusun Formasi Grid Menggunakan Array();

Melalui sebuah movie clip kita bisa menduplikasi kemudian menyusunnya dalam formasi grid seperti pada gambar berikut :

positioning grid.swf

Formasi di atas menduplikasi movie clip “mc” dengan script sebagai berikut :

//actionscript grid positioning

ordo = 6;

totalMC = ordo*ordo;

for (i=0; i<totalMC; i++) {

        far = new Array(50, 100, 150, 200, 250, 300);

        n = i%ordo;

        mc.duplicateMovieClip("mc"+i, i);

        pos = eval("mc"+i);

        pos._x = far[n];

        pos._y = 50*((i-n)/ordo);

        trace(n);

}

mc._visible=false;

Untuk membuat formasi ini kita membutuhkan kode tambahan berupa Array() dan simbol modulo (%). Berikut ini penjelasan lebih lanjut mengenai masing-masing kode :

Lebih Jauh tentang Array (object)

Penulisan Array()

Kode Array(object) memungkinkan bagi kita untuk memanipulasi susunan. Standar penulisan kode ini adalah seperti pada contoh berikut :

buah = new Array();

buah [0]= “Apel”;

buah [1]=”Mangga”;

buah [2]=”Pepaya”;

trace(buah[2]);

Jika kita melakukan test movie maka output akan menghasilkan teks “Pepaya”. Bilangan 0, 1, 2, dst dalam Array menunjukkan nilai index sehingga ketika kita menuliskan kode buah[2] maka output yang dihasilkan adalah elemen yang ada pada Array() dengan nilai index 2 yaitu “Pepaya”.

Dengan hasil yang sama, metode penulisan Array() seperti di atas bisa juga ditulis dalam bentuk berikut :

buah = new Array("Apel", "Mangga", "Pepaya");

trace(buah[2]);

Menambahkan Element Array()

Menambah dan menghapus element Array() akan sangat membantu dalam pembuatan sample project “Game Doble Number” yang akan dibahas pada akhir Bab ini. Ada dua cara menambahkan element pada Array() yang sudah ada yaitu dengan myArray.splice(index,jumlah index yang dihapus, “elemen1”, “elemen2”, dst…) dan myArray.unshift(element). Perhatikan contoh berikut :

buah = new Array("Apel", "Mangga", "Pepaya");

buah.splice(1,0,”Jambu”, “Pisang”);

//output : Apel, Jambu, Pisang, Mangga, Pepaya

Script di atas berarti element “jambu” dan “pisang” akan ditambahkan mulai dari index ke 1 tanpa ada element yang di hapus. Untuk menambahkan element pada Array() bisa juga menggunakan myArray.unshift() akan tetapi kode ini hanya menambahkan satu element saja pada index ke-0. Perhatikan contoh berikut :

buah = new Array("Apel", "Mangga", "Pepaya");

buah.unshift(“Pisang”)

//output : Pisang, Apel, Mangga, Pepaya

Dalam grid positioning, fungsi Array() inilah yang kita gunakan untuk mendefinisikan posisi koordinat x movie clip hasil duplikasi. Secara sederhana cara kerja program ini dijelaskan pada contoh duplikasi dan positioning movie clip “mc” berikut :

for(i=0;i<=3;i++){

        mc.duplicateMovieClip("mc"+i,i);

        posisi = new Array(100,200,300,400);

        mcP=eval("mc"+i);

        mcP._x=posisi[i];

        mc._visible=false;

}

Script di atas membuat mc0._x memiliki nilai sama dengan nilai yang di definisikan pada posisi[0] yakni 100 dan seterusnya hingga “mc3”.

Modulo

Dalam Actionscript modulo merupakan operator bilangan yang menghitung sisa dari pembagian dua bilangan yang dioperasikan. Kode penulisan operator ini adalah menggunakan tanda persent (%). Perhatikan contoh berikut :

n=12%5; trace(n);

Script di atas akan menghasilkan output berupa bilangan 2 karena sisa operasi 12 / 5 adalah 2. Sekarang kita akan memasukkan operator modulo ini kedalam fungsi for untuk menghasilkan bilangan yang selalu berulang sesuai dengan modulo yang diberikan. Perhatikan contoh berikut :

for(i=0;i<=20;i++){

n=i%5;

trace(n);

}

Lakukan test movie maka script di atas akan menghasilkan bilangan yang selalu berulang 0,1,2,3,4,0,1,… yang kemudian, dalam grid positioning, digunakan sebagai nilai index untuk Array(). Perhatikan ilustrasi berikut :

Pada Actionscript Grid Positioning posisi koordinat x mc hasil duplikasi didefinisikan dengan pos._x = far[n]. sehingga untuk kasus “mc6”, misalnya, nilai mc6._x = far[0] yang nilainya didefinisikan oleh far = new Array() bernilai 50. Sementara itu posisi koordinat y secara umum didefinisikan dengan pos._y = 50*((i-n)/ordo) sehingga untuk “mc6” nilai koordinat y adalah 50*(6/6) = 50.

Menyusun Formasi Grid pada Movie Clip “Wadah”

Sekarang kita akan menyusun grid yang secara otomatis menyesuaikan ukuran wadahnya. Nilai yang bisa di atur dalam script ini adalah jumlah kolom, baris, dan ukuran movie clip “wadah”. Sebelum menuliskan script buatlah terlebih dahulu dua buah movie clip yaitu “mc” dan “wadah” dimana posisi objek di dalam movie clip berada pada koordinat 0,0. Untuk mengaturnya, masuklah kedalam movie clip lalu ubah koordinat x dan y pada properties menjadi 0.

Sehingga tampilan movie clip pada lembar kerja utama jika di seleksi adalah seperti pada gambar berikut :

Selanjutnya tulislah script di bawah ini pada frame 1.

//actionscript grid otomatis

grid = new Array();

kolom = 8;

baris = 5;

gap = 5;

totalMC = kolom*baris;

startX = wadah._x+(gap/2);

startY = wadah._y+(gap/2);

mc._width = (wadah._width/(kolom))-gap;

mc._height = (wadah._height/baris)-gap;

jarakX = mc._width+gap;

jarakY = mc._height+gap;

//menentukan nilai koordinat x

for (j=0; j<kolom; j++) {

        grid.unshift(jarakX*j);

        grid.sort();

}

//duplikasi dan positioning 

for (i=0; i<totalMC; i++) {

        n = i%kolom;

        mc.duplicateMovieClip("mc"+i, i);

        pos = eval("mc"+i);

        pos._x = startX+grid[n];

        pos._y = startY+(jarakY*((i-n)/kolom));

        mc._visible = false;

}

Lakukan test movie untuk melihat hasilnya kemudian lakukan perubahan ukuran movie clip “wadah” maka ukuran grid secara otomatis akan menyesuaikan ukuran wadah.

Efek Animasi

Sekarang kita akan memperbagus tampilan movie clip hasil duplikasi dengan efek-efek animasi. Untuk menghasilkan efek animasi kita perlu mengetahui berbagai macam Movie Clip Property seperti _alpha, _tint, _width, _height, dan sebagainya. 

Memberikan efek animasi pada movie clip sebenarnya hanyalah memberikan nilai yang selalu berubah pada movie clip property. Misalnya ketika kita berikan nilai koordinat x=100 untuk movie clip “mc” maka “mc” akan diam pada posisi x=100. Namun jika kita memberikan nilai koordinat x yang selalu bertambah 1 pixel (degan kode mc._x+=1) maka koordinat “mc” akan selalu bertambah, sehingga terkesan “mc” bergerak konstan.

Selain movie clip property,kita juga membutuhkan beberapa metode untuk menggambar misalnya ketika kita ingin membuat garis penghubung antar movie clip hasil duplikasi.

Deteksi Benturan Antar Movie Clip

Deteksi benturan antar movie clip sering digunakan dalam pembuatan game-game Flash. Dalam kasus benturan antar dua movie clip kita cukup menggunakan myMC.hitTest(target) atau menggunakan deteksi jarak pada movie clip bentuk lingkaran. Deteksi benturan ini bisa membuat movie clip tampak tersusun dan jika movie clip di bawahnya di ambil (dengan cara di drag) maka movie clip di atasnya akan jatuh ke bawah. Demikian juga jika kita menaruh sebuah movie clip di atas movie clip lain, maka akan tertahan sehingga interaktifitas yang terjadi seperti ketika kita menyusun bola-bola.

duplikat dalam for.swf

Uantuk membuat interaktifitas semacam ini kita memerlukan sebuah kode yang bisa mendeteksi benturan untuk semua movie clip. Berikut ini contoh Actionscript untuk deteksi antar movie clip hasil duplikasi dengan hasil seperti terlihat pada ilustrasi di atas.

// Actionscript duplikasi movie clip pada frame

for(i=1;i<=10;i++){

mc.duplicateMovieClip("mc"+i,i);

pos=eval("mc"+i);

pos._y=200+(mc._width*i);

pos._x=0;

}

// actionscrip pada movie clip untuk deteksi benturan antar movie clip duplikasi

onClipEvent (enterFrame) {

// membuat movie clip menjadi dragable

this.onPress = function() {

this.startDrag(false);

draging = true;

};

this.onRelease = function() {

stopDrag();

draging = false;

};

// memberikan kondisi ketika movie clip tidak di drag

if (!draging) {

_y += 5;

if (_y>=300) {

_y = 300;

}

for (i=1; i<=10; i++) {

delX = _x-_root["mc"+i]._x;

delY = _y-_root["mc"+i]._y;

jarak = Math.sqrt((delX*delX)+(delY*delY));

if (this._name<>_root["mc"+i]._name && jarak<=_width) {

_y -= 5;

}

}

}

}

Kode deteksi benturan ditunjukkan oleh if (this._name<>_root["mc"+i]._name && jarak<=_width) dengan terlebih dahulu mendefinisan jarak dengan rumus Math.sqrt((delX*delX)+(delY*delY)). Script di atas berarti jika nama movie clip tidak sama dengan ‘dirinya’ dan ‘jaraknya’ dengan movie clip lain kurang dari atau sama dengan ukuran ‘lebarnya’ maka nilai _y akan selalu berkurang 5 px. Karena secara umum nilai y sudah dibuat selalu bertambah 5 px dengan kode _y += 5; maka jika terjadi benturan, kedua movie clip tersebut akan berhenti (gaya dorong ke bawah 5, gaya dorong ke atas 5 sehingga resultan gaya menjadi 0).

Artikel Selanjutnya :

Sample Project : Membuat Game Doble Number!

Identitas Penulis :