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

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<50; 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</em>
_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; i<50; i++) {
//posisi x garis hujan ditambah variable kecepatan
_root["garis_hujan"+i]._y += _root["garis_hujan"+i].kecepatan;
//posisi y garis hujan ditambah variable kecepatan yang dibagi 4
_root["garis_hujan"+i]._x += _root["garis_hujan"+i].kecepatan/4;
//jika posisi x garis hujan lebih dari panjang stage
if (_root["garis_hujan"+i]._x>Stage.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</em>
_root["garis_hujan"+i]._x = random(width)-Stage.width/2;
}
}
};

langkah 4

Tekan Ctrl+Enter untuk melihat hasilnya.

Langkah 5

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

Hasil Akhir

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

Jhonsen

Jhonsen

Jhonsen adalah seorang Alumni STMIK PalComTech tahun 2015. Saat ini bekerja sebagai Desainer Grafis dan Jurnalistik Media Online di PalComTech
Jhonsen

33 comments

  1. mantap nang
    lanjutkan son ehhh jhon tw jhon_son
    uwahahahahaha :cendol

  2. hahaahah tugas waktu itu e?

  3. wew,,,,,,keren2… :2thumbup

  4. :2thumbup Mantap.. Lanjutkan.. :toast

  5. lucuuu sen suka dech :angel

  6. hehheheee…kayak nya ga asing dg tugas ini deh….
    mantap…lanjutkan!!!

  7. palcomtech palembang ya kak?

    :)

    saya anak unsri… salam kenal ya
    bagus animasinya…

    boleh nempah buatin animasi gak kak?

    dibalas ya kak…

    makasih.. ^_^

  8. bagus kak :)
    tapi tolong donk bisa diperjelas lagi ngga ??
    bisa bikin apa aja kak ??
    ajari aku donk, aku juga sekolah di SMK jurusan animasi, aku pengen bisa bikin karya-karya animasi, bagi ilmunya yaa kak :)

  9. .muantap …
    .cba bkn animasi yg d grkn sendiri …!!!

  10. salut ma Om Jhon.. !!! rate 5 ah . .

    :rate

  11. **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 12: ‘;’ expected
    duplicateMovieClip(jatuh, “garis_hujan”+i, 10+i);

    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 21: Unexpected ‘}’ encountered
    }

    Total ActionScript Errors: 2 Reported Errors: 2

    ..kog eror gini gimana gan..

  12. kk minta bentuk file flashnya kk..boleh?buat jadi contoh ane..
    tolong kasih linknya ya gan

  13. kalo garis ujannya diganti Bintang” bisa g gan…

  14. mantab gan…… sip…

  15. :mewek sangat membantu sekali untuk UTS saya

  16. wow…..bagus…..

Leave a Reply

Your email address will not be published. Required fields are marked *

*

[+] kaskus emoticons nartzco

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Yuk kita share...