Kamis, 22 Desember 2011

Tutorial Flash - Hujan


Sebelumnya kita pernah membuat animasi hujan. Tetapai pada animasi hujan sebelumnya tidak ada riak air ketika hujan jatuh. Oleh karena itu pada tutorial kali ini kita akan membuat sebuah animasi hujan yang disertai riak air apabila hujan tersebut menyentuh tanah.
1. Buatlah sebuah flash document.
2. Buatlah garis lingkaran berwarna hitam. Seleksi garis lingkaran ini kemudian tekan F8. Pada panel yang muncul masukkan garis_lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
3. Seleksi movie clip garis_lingkaran di stage kemudian tekan F8. Pada panel yang muncul masukkan riak sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
4. Klik kanan movie clip riak kemudian pilih Edit. Anda akan masuk ke dalam stage movie clip riak. Ubah bentuk movie clip garis_lingkaran menjadi seperti di bawah ini :
5. Klik kanan frame 15 kemudian tekan F6. Ubah ukuran movie clip garis_lingkaran pada frame 15 menjadi seperti di bawah ini :
6. Pastikan anda masih menyeleksi movie clip garis_lingkaran di frame 15 kemudian tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Alpha 0%.
7. Klik kanan frame 1 dan pilih Create Motion Tween. Seleksi frame 15 kemudian tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
stop();
8. Tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip riak yang ada di stage.
9. Buatlah sebuah garis miring berwarna hitam. Seleksi garis ini kemudian tekan F8. Pada panel yang muncul masukkan garis_miring sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
10. Seleksi movie clip garis_miring di stage kemudian tekan F8. Pada panel yang muncul masukkan hujan sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
11. Klik kanan movie clip hujan kemudian pilih Edit. Anda akan masuk ke dalam stage movie clip hujan. Ubah bentuk dan posisi movie clip garis_miring menjadi seperti di bawah ini :
12. Klik kanan frame 14 kemudian tekan F6. Ubah letak movie clip garis_miring di frame 14 seperti gambar di bawah ini :
13. Seleksi frame 15 kemudian tekan F7. Pastikan anda masih berada di frame 15 kemudian tekan Ctrl+L. Pada panel library yang muncul drag movie clip riak ke dalam stage dan letakkan ditengah-tengah titik registration seperti gambar di bawah ini :
14. Seleksi movie clip riak di frame 15 kemudian pada panel properties masukkan riak sebagai instance name. Klik frame 15 kemudian pada panel actions masukkan script berikut :
1
stop();
15. Klik kanan frame 1 kemudian pilih Create Motion Tween. Jika sudah tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip hujan yang ada di stage.
16. Klik kanan movie clip hujan yang ada di panel library kemudian pilih Linkage. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan hujan sebagai identifier kemudian tekan ok.
17. Klik frame 1 dan pada panel actions masukkan script berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//membuat variable waktu dengan nilai 0
waktu = 0;
//perintah yang dijalankan ketika frame ini dimainkan
onEnterFrame = function () {
        //nilai variable waktu ditambah 1
        waktu++;
        //jika nilai variable waktu sama dengan 2
        if (waktu == 2) {
               //masukkan movie clip dengan identifier hujan ke dalam stage dengan instance name hujan pada kedalaman paling atas, pada p0sisi x sesuai nilai acak 300 yang ditambah 50 dan posisi y sesuai nilai acak 300 yang ditambah 50
               hujan = attachMovie("hujan", "hujan", _root.getNextHighestDepth(), {_x:random(300)+50, _y:random(350)+50});
               //perintah yang dijalankan ketika frame pada movie clip hujan dimainkan
               hujan.onEnterFrame = function() {
                       //jika movie clip ini berada di frame 10 dan movie clip riak yang terdapat di dalam movie clip ini berada di frame 15
                       if (this._currentframe == 10 && this.riak._currentframe == 15) {
                               //hapus movie clip ini dari stage
                               this.removeMovieClip();
                       }
               };
               //ubah nilai variable waktu menjadi 0
               waktu = 0;
        }
};
18. Tekan Ctrl+Enter untuk melihat hasilnya.

Tutorial Flash - Animasi Gelembung

Animasi yang akan kita buat berikut ini berupa gelembung udara yang bergerak ke atas. Apabila kita menyentuh gelembung udara tersebut dengan kursor mouse maka gelembung udara itu akan otomatis menghilang.
1. Buatlah sebuah flash document berwarna biru.
2. Buatlah sebuah lingkaran berwarna biru dengan putih sebagai warna garisnya dan buatlah juga seperempat garis lingkaran berwarna putih yang ditempatkan ditengah lingkaran tersebut seperti gambar di bawah ini :
3. Seleksi lingkaran dan seperempat garis lingkaran tadi kemudian tekan F8. Pada panel yang muncul masukkan gelembung sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah.
4. Hapus movie clip gelembung dari stage kemudian tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gelembung dan pilih linkage.
5. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan gelembung sebagai idetifier lalu tekan ok.
6. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//perintah yang dijalankan ketika frame ini dimainkan
onEnterFrame = function () {
        //jika nilai acak 10 bernilai 5
        if (random(10) == 5) {
               //masukkan movie clip berlinkage gelembung ke dalam stage dengan posisi x sesuai nilai acak panjang stage dan posisi y sesuai lebar stage ditambah 20
               gelembung = attachMovie("gelembung", "gelembung"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:random(Stage.width), _y:Stage.height+20});
               //membuat variable waktu di dalam movie clip gelembung dengan nilai acak 40
               gelembung.waktu = random(40);
               //perintah yang dijalankan ketika frame di dalam movie clip gelembung dimainkan
               gelembung.onEnterFrame = function() {
                       //koordinat y movie clip ini dikurangi 5
                       //movie clip gelembung bergerak ke atas
                       this._y -= 5;
                       //variable waktu movie clip ini ditambah 1
                       this.waktu++;
                       //jika nilai variable waktu kurang dari 20
                       if (this.waktu<20) {
                               //koordinat x movie clip ini ditambah 1
                               //movie clip gelembung bergerak ke kanan
                               this._x++;
                       }
                       //jika nilai variable waktu lebih dari 20 dan jika nilai variable waktu kurang dari 40
                       if (this.waktu>20 && this.waktu<40) {
                               //koordinat x movie clip ini dikurangi 1
                               //movie clip gelembung bergerak ke kiri
                               this._x--;
                       }
                       //jika nilai variable waktu lebih dari 40
                       if (this.waktu>40) {
                               //ubah nilai variable waktu menjadi 0
                               this.waktu = 0;
                       }
                       //jika koordinat y movie clip ini kurang dari -20
                       if (this._y<-20) {
                               //hapus move clip ini
                               removeMovieClip(this);
                       }
               };
               //ketika mouse berada di atas movie clip gelembung
               gelembung.onRollOver = function() {
                       //hapus movie clip ini
                       removeMovieClip(this);
               };
        }
};
7. Tekan Ctrl+Enter untuk melihat hasilnya.
Coba sentuhkan kursor mouse ke salah satu gelembung.
8. Anda dapat mengembangkan animasi gelembung di atas misalnya dengan menambahkan animasi pecah apabila gelembung disentuh oleh mouse.