Membuat Animasi Efek Mouse

Membuat Animasi Efek Mouse
Membuat Animasi Efek Mouse


Salam blogger.
Di bulan Ramadhan ini saya akan membagi tutorial tentang Membuat Animasi Efek Mouse. Sebenarnya animasi efek terjadi ketika kita mengklik mouse. Efek bintang akan keluar dengan jumlah yang banyak dan bintang-bintang berhamburan jatuh kebawah.

Pembuatan efek animasi kali ini menggunakan Adobe Flash cs dengan bahasa pemgrograman Actionscript 2.0. Untuk lebih jelasnya lihat tutorial dibawah ini:

1. Buka lembar kerja Flash cs.
2. Pada lembar kerja Anda gunakan ukuran 400x400 pixel, dan untuk FPS gunakan 20.



3. Pilih Rectangle tool, dan buatlah pilihlah warna hitam.
4. Buatlah Background berwarna hitam seperti pada gambar di bawah ini. Kemudian ubahlah kebentuk movie clip. Caranya tekan F8 pada keyboard Anda.


5. Pada instance name ketikkan "latar".


6. Buatlah objek bintang seperti gambar dibawah ini:


7. Kemudian ubahlah objek bintang ke bentuk movie clip. Caranya tekan F8 untuk convert to symbol, kemudian pilih Movie clip.


8. Pilih Ok.
9. Selanjutnya arahkan kursor ke panel Properties di sebelah kanan Anda. Pada instance name ketikkan "bintang".



10. Tekan F9 (untuk menampilkan panel actionscript) di layer background, frame 1.


11. Kemudian ketikan script dibawah ini:

//membuat variable bernama gravitasi dengan nilai 30
gravitasi = 30;
//membuat variable bernama jumlah_bintang dengan nilai 100
jumlah_bintang = 50;
//membuat variable bernama ukuran_bintang dengan nilai 2
ukuran_bintang = 2;
//membuat variable bernama angka dengan nilai 100
angka = 100;
//membuat array bernama warna berisi kumpulan kode warna
warna = new Array("0xFF0000", "0xFFFFFF", "0xFFFF00", "0xFF9900", "0xFFCC33", "0xFFFFFF");
//ketika movie clip latar di tekan
latar.onPress = function() {
    //nilai variable angka ditambah jumlah_bintang yang sebelumnya ditambah 10 terlebih dahulu
    angka += jumlah_bintang+10;
    for (i=angka; i<(angka+jumlah_bintang); i++) {
        //duplikasi movie clip bintang dengan nama baru bintang+i
        duplicateMovieClip("bintang", "bintang"+i, i);
        //koordinat x bintang+i sama dengan koordinat x mouse
        _root["bintang"+i]._x = _root._xmouse;
        //koordinat y bintang+i sama dengan koordinat y mouse
        _root["bintang"+i]._y = _root._ymouse;
        //nilai variable posX bintang+i sama dengan nilai acak panjang stage dikurangi 200 dibagi 35
        _root["bintang"+i].posX = ((random(Stage.width)-200)/35);
        _root["bintang"+i].posY = ((random(Stage.height/2)-150)/35);
        _root["bintang"+i].onEnterFrame = function() {
            //ubah warna bintang+i sesuai kode warna pada array warna yang diacak
            new Color(this).setRGB(warna[random(warna.length)]);
            //koordinat x movie clip ini ditambah nilai variable posX movie clip ini dikali 0.6
            this._x += this.posX*0.6;
            //koordinat y movie clip ini ditambah nilai variable posY movie clip ini dikali 1
            this._y += this.posY*1;
            //nilai transparansi movie clip ini dikurangi 1
            this._alpha -= 1;
            //nilai variable posY movie clip ini di tambah nilai acak variable gravitasi dibagi 100
            this.posY += random(gravitasi)/100;
            //jika koordinat y movie clip ini lebih dari lebar stage atau jika nilai transparansi movie clip ini kurang dari 0
            if (this._y>Stage.height || this._alpha<0) {
                //hapus movie clip ini dari stage
                this.removeMovieClip();
            }
        };
    }
};



12. Test animasi dengan cara tekan ctrl+Enter.

Hasil efek bintang
Hasil efek bintang

Membuat Animasi Efek Mouse Membuat Animasi Efek Mouse Reviewed by Ardy S on June 20, 2015 Rating: 5

No comments:

Powered by Blogger.