flash efek salju
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
Posted by Unknown
Senin, 12 Maret 2012
0
komentar
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.
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 ).
Kemudian convert gambar tersebut menjadi MovieClip dengan nama Snow, beri tanda centang pada opsi Expost for Actionscript.
Pertama, kita import dulu class yang akan digunakan.
Langkah 7 – Fungsi
Fungsi ini digunakan untuk mengacak koordinat X salju yang akan dibuat.
Langkah 8 – Fungsi
Fungsi ini digunakan untuk membuat perbedaan transparansi warna untuk setiap salju yang dibuat.
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 ).
Kemudian convert gambar tersebut menjadi MovieClip dengan nama Snow, beri tanda centang pada opsi Expost 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; |
Langkah 5 – Setting Variabel
Ketikkan variabel-variabel berikut.1 2 3 4 5 6 7 8 | var snows: Array = new Array (); var swidth: Number = stage.stageWidth; var sheight: Number = stage.stageHeight; var maxSnow: Number = 50 ; // total salju yang akan dibuat var maxSize: Number = 1.5 ; // ukuran salju terbesar yang diinginkan var minSize: Number = . 5 ; // ukuran salju terkecil yang diinginkan var speed: Number = 3 ; // kecepatan maksimal salju turun var maxWindSpeed: Number = 2 ; // kecepatan angin maksimal |
Langkah 6 – Fungsi Inisialisasi
Bagian ini ada kode utama untuk menampilkan salju pada stage.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | function init(): void { for ( var i: int = 0 ; i<maxSnow; i++) { var snow:Snow = new Snow(); snow.x = generateXPosition(); // mengacak koordinat X salju snow.y = -sheight / 2 + Math.random() * ( 1.500000 * sheight); snow.alpha = generateAlpha(); // untuk membuat perbedaan transparansi warna pada salju snow.scaleX = snow.scaleY = generateScale(); // untuk membuat perbedaan ukuran salju snow.velocity = generateVelocity(); // untuk membuat perbedaan percepatan gravitasi snow.wind = generateWind(); // untuk membuat perbedaan kecepatan dan arah angin if (Math.random() > . 5 ) { snow.rot = 1 + Math.random() * 2 ; } else { snow.rot = 1 + Math.random() * - 2 ; } addEventListener(Event.ENTER_FRAME, mover); addChild(snow); snows.push(snow); // simpan salju kedalam array } } |
Langkah 7 – Fungsi generateXPosition()
Fungsi ini digunakan untuk mengacak koordinat X salju yang akan dibuat.1 2 3 | function generateXPosition(): Number { return Math.random() * ( 1.5 * swidth); } |
Langkah 8 – Fungsi generateAlpha()
Fungsi ini digunakan untuk membuat perbedaan transparansi warna untuk setiap salju yang dibuat.1 2 3 | function generateAlpha(): Number { return . 3 + (Math.random() * . 7 ); } |
Langkah 9 – Fungsi generateScale()
Fungsi ini digunakan untuk membuat perbedaan ukuran salju yang dibuat.1 2 3 | function generateScale(): Number { return minSize + ((maxSize - minSize) * Math.random()); } |
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 2 3 | function generateVelocity(): Number { return (Math.random() * speed) + 0.5 ; } |
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 2 3 4 5 6 7 | function generateWind(): Number { if (Math.random() > . 5 ) { return Math.random() * maxWindSpeed; } else { return Math.random() * -maxWindSpeed; } } |
Langkah 12 – Fungsi mover()
Fungsi ini digunakan untuk menggerakkan salju sesuai dengan parameter-parameter yang sudah ditetapkan dalam funsiinit()
. Juga digunakan untuk me-reset posisi salju jika salju sudah mencapai posisi diluar area stage.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function mover(e:Event): void { for ( var i: int = 0 ; i<snows.length; i++) { snows[i].x += snows[i].wind; snows[i].y += snows[i].velocity; snows[i].rotation += snows[i].rot; // jika salju berada diluar area stage, pindahkan salju ke posisi diatas stage if (snows[i].x > swidth + 50 || snows[i].x < - 50 || snows[i].y > sheight + 50 ) { snows[i].x = generateXPosition(); snows[i].y = - 20 ; snows[i].scaleX = snows[i].scaleY = generateScale(); snows[i].alpha = generateAlpha(); snows[i].velocity = generateVelocity(); snows[i].wind = generateWind(); } } } |
Langkah 13 – Jalankan fungsi init()
Agar coding yang dibuat dapat dijalankan dan efek yang diharapkan dapat kita lihat, panggil fungsiinit()
pada baris terakhir.1 | init(); |
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!
http://www.nurwahyudin.com/flash/membuat-efek-hujan-salju-dengan-flash-dan-actionscript-3-0#axzz1oxVqPmQERead more: http://www.nurwahyudin.com/flash/membuat-efek-hujan-salju-dengan-flash-dan-actionscript-3-0#ixzz1oxWuyuZW
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: flash efek salju
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2012/03/flash-efek-salju.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
0 komentar:
Posting Komentar