Menduplikasi Movie Clip dan Menyusunnya dalam Formasi Lingkaran

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 :

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

Penting!Pertama, buatlah sebuah movie clip lingkaran kecil dan berilah nama “dots”. Di dalam movie clip dots buatlah movie clip lagi dan berikan nama movie clip tersebut dengan nama “dot”. Movie clip “dots” berfungsi sebagai bidang cartesius dengan pusat di titik (dots._x,dots._y) sedangkan movie clip “dot” adalah movie clip yang akan di gandakan. 

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.

 Penting!Dalam menggunakan fungsi Matematika yang berkaitan dengan sudut misalnya Math.sin, Math.Cos, atau Math.atan2 maka nilai yang akan dihitung harus di konversi dalam bentuk radian. Cara mengkonversi seperti pada perintah untuk mendefinisikan nilai koordinat x untuk masing-masing duplikat yaitu pos._x = Math.cos(sudut*(Math.PI/180))*radius/2.

 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;

        }

}