Tips & Tutorial

Membuat Animasi Hujan Menggunakan Script Pada Adobe Flash CS 5

Tutorial kali ini membahas cara membuat efek hujan. Ada beragam cara cara membuatnya diantaranya dengan menggunakan animasi tween. Tapi pada tutorial ini kita akan menggunakan Actionscript untuk membuatnya. Dalam tutorial kali ini saya menggunakan Action script 2.0. Oke! langsung simak tutorialnya!

Hasil akhir yang akan kita buat

http://news.palcomtech.com/ftp/ARTIKEL-2012/jhonsen-kuis.swf

Langkah 1

Buatlah sebuah flash document.

Langkah 2

Tekan Ctrl+F3, pada panel properties yang muncul ubah warna Background menjadi berkode #000033.

Langkah 3

Klik frame 1/layer 1 dan tekan F9. Pada panel properties yang muncul masukkan script berikut :

Anda bisa dapatkan scriptnya disini :

//membuat sebuah movie clip kosong yang berisi jatuh
_root.createEmptyMovieClip("jatuh", 1);
//mengatur width sama dengan width stage dikali 2.5
width = Stage.width*2.5;
with (jatuh) {
//membuat garis
lineStyle(1, 0xFFFFFF, 100);
lineTo(2, 10);
}
//membuat variable i dengan nilai kurang dari 250
for (i=0; i //duplikasi jatuh dengan nama baru garis_hujan+i
duplicateMovieClip(jatuh, "garis_hujan"+i, 10+i);
//posisi x garis_hujan sama dengan nilai acak panjang stage
_root["garis_hujan"+i]._x = random(Stage.width);
//posisi y garis_hujan sama dengan nilai acak lebar stage
_root["garis_hujan"+i]._y = random(Stage.height);
//nilai variable kecepatan garis hujan sama dengan nilai acak 30 ditambah 10
_root["garis_hujan"+i].kecepatan = random(30)+10;
//nilai alpha`garis hujan sama dengan nilai acak 80 ditambah 20
_root["garis_hujan"+i]._alpha = random(80)+20;
}
onEnterFrame = function () {
//membuat variable i dengan nilai kurang dari 250
for (i=0; iStage.width) {
//posisi x garis hujan berada di nilai acak width dikurangi panjang stage dibagi 2
_root["garis_hujan"+i]._x = random(width)-Stage.width/2;
//posisi y garis hujan berada di koordinat 0
_root["garis_hujan"+i]._y = 0;
}
//jika posisi y garis hujan lebih dari lebar stage
if (_root["garis_hujan"+i]._y>Stage.height) {
//posisi y garis hujan berada di koordinat 0
_root["garis_hujan"+i]._y = 0;
//posisi x garis hujan berada di nilai acak width dikurangi panjang stage dibagi 2
_root["garis_hujan"+i]._x = random(width)-Stage.width/2;
}
}
};

langkah 4

Tekan Ctrl+Enter untuk melihat hasilnya.

http://news.palcomtech.com/ftp/ARTIKEL-2012/hujan-animasi.swf

Langkah 5

Buatlah layer baru, diatas layer 1. Dan kreasikan animasi hujannya.

Hasil Akhir

http://news.palcomtech.com/ftp/ARTIKEL-2012/jhonsen-kuis.swf

Oke selamat mencoba! jangan lupa “like this yo!”

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s