Monday, December 13, 2010

Membuat Animasi Gelembung

Animasi gelembung ini bergerak ke atas, jika kita sentuh gelembung udara tersebut dengan kursor mouse maka yang terjadi adalah gelembung tersebut akan menghilang seperti seolah-olah pecah seperti nyata.

Langkah-langkahnya :

1. Buatlah sebuah flash document dengan background berwarna biru (disini saya pakai Adobe Flash CS3).

2. Buatlah sebuah objek lingkaran berwarna biru dengan warna putih sebagai warna garisnya. Buat juga garis melengkung yang di tempatkan di sisi dalam lingkaran seperti berikut :

3. Kita seleksi objek lingkaran dan garis melengkung yang tadi kita buat dan tekan F8. Pada panel properties yang muncul beri “gelembung” sebagai name dan movie clip sebagai type kemudian pilih titik registrationnya yang berada di tengah-tengah.

4. Hapus movie clip gelembung dari stage lalu tekan Ctrl+L. Kemudian pada panel library yang muncul klik kanan movie clip gelembung dan pilih linkage.

5. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan “gelembung” sebagai idetifier lalu tekan ok. (biasanya sudah otomatis terisi sama dengan nama pada panel properties jika kita contreng pada Export for ActionScript).

6. Klik pada frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

//berisi perintah2 yang akan dijalankan ketika frame dimainkan
onEnterFrame = function () {
//kondisi jika nilai acak(random) 10 bernilai 5
if (random(10) == 5) {
//masukkan movie clip berlinkage gelembung ke dalam stage dengan posisi sumbu x sesuai nilai acak panjang stage dan posisi sumbu y sesuai lebar stage ditambah 20
gelembung = attachMovie(“gelembung”, “gelembung”+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:random(Stage.width), _y:Stage.height+20});
//membuat agar variabel waktu di dalam movie clip gelembung dengan nilai acak 40
gelembung.waktu = random(40);
//berisi perintah2 yang akan dijalankan ketika frame di dalam movie clip gelembung dimainkan
gelembung.onEnterFrame = function() {
//membuat koordinat sumbu y movie clip ini dikurangi 4 dan movie clip gelembung bergerak ke atas
this._y -= 4;
//variable waktu movie clip ini ditambah 1
this.waktu++;
//jika nilai variable waktu kurang dari 20
if (this.waktu<20) {
//membuat koordinat sumbu x movie clip ini ditambah 1 dan movie clip gelembung bergerak ke kanan
this._x++;
}
//jika nilai variable waktu lebih dari 20 dan jika nilai variable waktu kurang dari 40
if (this.waktu>20 && this.waktu<40) {
//membuat koordinat x movie clip ini dikurangi 1 dan movie clip gelembung bergerak ke kiri
this._x–;
}
//jika nilai variable waktu lebih dari 40
if (this.waktu>40) {
//untuk mengubah nilai variable waktu menjadi 0
this.waktu = 0;
}
//jika koordinat sumbu y movie clip ini kurang dari -20
if (this._y<-20) {
//digunakan untuk menghapus move clip ini
removeMovieClip(this);
}
};
//jika mouse berada di atas movie clip gelembung
gelembung.onRollOver = function() {
//digunakan untuk menghapus movie clip ini
removeMovieClip(this);
};
}
};

7. Tekan Ctrl+Enter untuk melihat hasilnya. Coba arahkan kursor mouse anda ke gelembung-gelembung yang muncul.

Animasi ini juga bisa di tambah objek atau animasi lain seperti ikan berenang atau hiasan akuarium tergantung dari kreasi anda sendiri.

source: http://cingciripit.com/archives/membuat-animasi-gelembung#more-666

0 comments:

Post a Comment