Membuat Efek Hujan Salju dengan Flash

dan Actionscript 3.0

Tutorial kali ini kita akan membuat efek hujan salju dengan menggunakan Flash dan
Actionscript 3.0.

Hasil Akhir
Berikut adalah efek salju yang akan kita buat.

Langkah 1 – Persiapan
Buka Flash dan buatlah dokumen baru (actionscript 3.0).

Set ukuran stage menjadi 500 x 400 px.

Buat dua layer dan beri nama background dan script.

Langkah 2 – Background
Carilah background yang bertemakan winter atau salju (banyak koq di google). Saya
menggunakan gambar gratis dari softonic.

Setelah mendapat gambar yang cocok, import gambar tersebut ke stage.

Tempatkan gambar pada layer background.

Langkah 3 – Membuat Gambar Salju

Buatlah gambar salju seperti berikut dengan ukuran 15 x 15 px.

Jika sulit untuk membuat gambar salju seperti diatas, cukup buat gambar yang sederhana
saja dengan lingkaran dan warna gradasi putih (yang penting ada gambar buat salju :D).

Kemudian convert gambar tersebut menjadi MovieClip dengan namaSnow, beri tanda
centang pada opsi Export for Actionscript.
Langkah 4 – Mulai Coding
Klik frame 1 layer script, kemudian buka panel action dengan menekan tombol F9.

Pertama, kita import dulu class yang akan digunakan.

1 import flash.events.Event;
2

##Langkah 5 – Setting Variabel

Ketikkan variabel-variabel berikut.

1 var snows:Array = new Array();
2 var swidth:Number = stage.stageWidth;
3 var sheight:Number = stage.stageHeight;
4 var maxSnow:Number = 50; // total salju yang akan dibuat
5 var maxSize:Number = 1.5; // ukuran salju terbesar yang diinginkan
6 var minSize:Number = .5; // ukuran salju terkecil yang diinginkan
7 var speed:Number = 3; // kecepatan maksimal salju turun
8 var maxWindSpeed:Number = 2; // kecepatan angin maksimal
9

Langkah 6 – Fungsi Inisialisasi

Bagian ini ada kode utama untuk menampilkan salju pada stage.

1 function init():void {
2 for (var i:int=0; i<maxSnow; i++) {
3 var snow:Snow = new Snow();
4
5 snow.x = generateXPosition(); // mengacak koordinat X salju
6 snow.y = -sheight / 2 + Math.random() * (1.500000 * sheight);
7
8 snow.alpha = generateAlpha(); // untuk membuat perbedaan transparansi warna pada salju
9 snow.scaleX = snow.scaleY = generateScale(); // untuk membuat perbedaan ukuran salju
10
11 snow.velocity = generateVelocity(); // untuk membuat perbedaan percepatan gravitasi
12 snow.wind = generateWind(); // untuk membuat perbedaan kecepatan dan arah angin
13
14 if (Math.random() > .5) {
15 snow.rot = 1 + Math.random() * 2;
16 } else {
17 snow.rot = 1 + Math.random() * -2;
18 }
19
20 addEventListener(Event.ENTER_FRAME, mover);
21
22 addChild(snow);
23 snows.push(snow); // simpan salju kedalam array
24 }
25 }
26

Langkah 7 – Fungsi generateXPosition()

Fungsi ini digunakan untuk mengacak koordinat X salju yang akan dibuat.
1 function generateXPosition():Number {
2 return Math.random() * (1.5 * swidth);
3}
4

Langkah 8 – Fungsi generateAlpha()

Fungsi ini digunakan untuk membuat perbedaan transparansi warna untuk setiap salju
yang dibuat.

1 function generateAlpha():Number {
2 return .3 + (Math.random() * .7);
3}
4

Langkah 9 – Fungsi generateScale()

Fungsi ini digunakan untuk membuat perbedaan ukuran salju yang dibuat.

1 function generateScale():Number {
2 return minSize + ((maxSize - minSize) * Math.random());
3}
4

Langkah 10 – Fungsi generateVelocity()

Fungsi ini digunakan untuk membuat perbedaan percepatan gravitasi salju. Dengan
fungsi ini, salju akan terlihat ada yang lebih berat sehingga lebih cepat jatuh, ada pula
yang lebih ringan sehingga lebih lama jatuh.

1 function generateVelocity():Number {
2 return (Math.random() * speed) + 0.5;
3}
4

Langkah 11 – Fungsi generateWind()

Fungsi ini digunakan untuk membuat efek angin sehingga salju ada yang bergerak ke
kanan ataupun ke kiri. Dengan pergerakan ini salju seolah terbawa oleh angin sehingga
bergerak ke suatu arah.

1 function generateWind():Number {
2 if (Math.random() > .5) {
3 return Math.random() * maxWindSpeed;
4 } else {
5 return Math.random() * -maxWindSpeed;
6 }
7}
8

Langkah 12 – Fungsi mover()

Fungsi ini digunakan untuk menggerakkan salju sesuai dengan parameter-parameter yang
sudah ditetapkan dalam funsi init(). Juga digunakan untuk me-reset posisi salju jika salju
sudah mencapai posisi diluar area stage.
1 function mover(e:Event):void {
2 for (var i:int=0; i<snows.length; i++) {
3 snows[i].x += snows[i].wind;
4 snows[i].y += snows[i].velocity;
5 snows[i].rotation += snows[i].rot;
6
7 // jika salju berada diluar area stage, pindahkan salju ke posisi diatas stage
8 if (snows[i].x > swidth + 50 || snows[i].x < -50 || snows[i].y > sheight + 50) {
9 snows[i].x = generateXPosition();
10 snows[i].y = -20;
11
12 snows[i].scaleX = snows[i].scaleY = generateScale();
13 snows[i].alpha = generateAlpha();
14
15 snows[i].velocity = generateVelocity();
16 snows[i].wind = generateWind();
17 }
18 }
19 }
20

Langkah 13 – Jalankan fungsi init()

Agar coding yang dibuat dapat dijalankan dan efek yang diharapkan dapat kita lihat,
panggil fungsi init() pada baris terakhir.

1 init();
2

Langkah 14 – Test Movie

Coding selesai, sekarang cobalah men-test movie dengan cara menekan
tombol ctrl + enter.

Kesimpulan
Cobalah merubah-rubah parameter pada variabel yang ada dan lihat hasilnya. Coba juga
untuk membuat bentuk-bentuk salju yang lain.

Challenge!
Cobalah membuat beberapa jenis salju untuk ditampilkan. Hasil akhir dapat seperti
berikut.