Tutorial Macromedia 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.

Sourcenya dapat di download di sini

Sumber : https://warungflash.com

Contreng Silang

Berikut ini kita akan membuat animasi tanda contreng dan silang. Kita akan menggunakan Mask untuk membuatnya. Animasi ini bisa anda pakai pada kuis untuk memberitahu kepada user/pemain apakah jawaban yang dipilih benar atau salah.

Animasi Contreng

1. Buatlah sebuah flash document.

2. Klik kanan frame 2 dan pilih Insert Blank KeyFrame. Pastikan anda aktif di frame 2 lalu buatlah sebuah tanda contreng seperti gambar di bawah ini :

3. Tekan sekali tombol Insert Layer pada timeline sehingga muncul layer baru bernama Layer 2. Klik kanan frame 2 Layer 2 dan pilih Insert Blank KeyFrame.

4. Pastikan anda aktif di frame 2 Layer 2 kemudian buatlah sebuah lingkaran berwarna merah. Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

5. Letakkan movie clip lingkaran di frame 2 Layer 2 ini seperti gambar di bawah ini :

6. Klik kanan frame 20 layer 1 dan pilih Insert Frame. Klik kanan frame 10 Layer 2 dan pilih Insert KeyFrame. Ubah bentuk dan letak movie clip lingkaran di frame 10 Layer 2 menjadi seperti gambar di bawah ini :

7. Klik kanan frame 20 Layer 2 dan pilih Insert KeyFrame. Ubah bentuk dan letak movie clip lingkaran di frame 20 Layer 2 ini hingga menutupi seluruh tanda contreng seperti gambar di bawah ini :

8. Klik kanan frame 2 Layer 2 dan pilih Create Motion Tween. Klik kanan frame 10 Layer 2 dan pilih Create Motion Tween. Klik kanan Layer 2 dan pilih Mask.

9. Tekan Ctrl+Enter untuk melihat hasilnya.

Animasi Silang

1. Buatlah sebuah flash document.

2. Tekan tombol Insert Layer sebanyak 4 kali sehingga muncul 4 buah layer baru masing-masing bernama Layer 2, Layer 3, Layer 4, Layer 5.

3. Klik kanan frame 2 Layer 2 dan pilih Insert Blank KeyFrame. Pastikan anda masih aktif di frame 2 Layer 2 kemudian buatlah sebuah garis miring seperti gambar di bawah ini :

4. Klik kanan frame 2 Layer 3 dan pilih Insert Blank KeyFrame. Pastikan anda masih aktif di frame 2 Layer 3 kemudian buatlah sebuah lingkaran berwarna merah.

5. Seleksi lingkaran ini lalu tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

6. Atur letak dan besar movie clip lingkaran tadi seperti gambar di bawah ini :

7. Klik kanan frame 10 Layer 2 dan pilih Insert Frame. Klik kanan frame 10 Layer 3 dan pilih Insert KeyFrame.

8. Ubah bentuk dan letak movie clip lingkaran di frame 10 Layer 3 sehingga menutupi garis yang berada di Layer 2 seperti gambar di bawah ini :

9. Klik kanan frame 11 Layer 4 dan pilih Insert Blank KeyFrame. Pastikan anda masih aktif di frame 11 Layer 4 ini kemudian buatlah sebuah garis miring seperti gambar di bawah ini :

10. Pastikan garis yang anda gambar di frame 11 Layer 4 ini apabila digabungkan dengan garis yang ada di Layer 2 akan berbentuk tanda silang.

11. Klik kanan frame 11 Layer 5 dan pilih Inser Blank KeyFrame. Pastikan anda masih aktif di frame 11 Layer 5 ini kemudian tekan F11. Pada panel library yang muncul drag movie clip lingkaran yang ada di panel library ke dalam stage.

12. Atur letak dan bentuk movie clip lingkaran yang baru dikeluarkan dari panel library seperti gambar di bawah ini :

13. Klik kanan frame 2 Layer 2 kemudian pilih Copy Frames. Klik kanan frame 11 Layer 1 dan pilih Paste Frames.

14. Klik kanan frame 19 Layer 1 dan pilih Insert Frame. Klik kanan frame 19 Layer 4 dan pilih Insert Frame. Klik kanan frame 19 Layer 5 dan pilih Insert KeyFrame. Ubah ltak dan bentuk movie clip lingkaran di frame 19 Layer 5 menjadi seperti gambar di bawah ini :

15. Klik kanan frame 2 Layer 3 dan pilih Create Motion Tween. Klik kanan frame 11 Layer 5 dan pilih Create Motion Tween. Klik kanan Layer 3 dan pilih Mask. Klik kanan Layer 5 dan pilih Mask.

16. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Sumber : https://warungflash.com

Mengatur Volume Pada Beberapa Sound

Untuk mengatur volume suara di flash, kita menggunakan script setVolume. Bagi sebagian pengguna flash yang masih pemula, mereka biasanya hanya mengetahui bahwa setVolume ini digunakan untuk mengatur suara secara keseluruhan (volume pada suara tidak dapat di atur satu per satu). Melalui tutorial ini kami beritahukan bahwa sebenarnya setVolume dapat digunakan untuk mengatur volume suara satu per satu. Caranya dangan memasukan movie clip kosong ke dalam sound objek.

Berikut ini contoh script yang biasa digunakan untuk mengatur seluruh sound :

1
2
3
4

musik = new Sound();
musik.attachSound("musik");
musik.setVolume(50);
musik.start(0, 1);

Sedangkan di bawah ini contoh script untuk mengatur sound secara satu per satu :

1
2
3
4
5

msk_mc = this.createEmptyMovieClip("msk_mc", this.getNextHighestDepth());
musik = new Sound(msk_mc);
musik.attachSound("musik");
musik.setVolume(50);
musik.start(0, 1);

Untuk contoh penggunaanya silahkan lihat di bawah ini :
1. Buatlah sebuah flash document.

2. Pilih menu bar File>Import>Import to Library. Pada panel yang muncul silahkan cari 2 buah suara yang akan digunakan. Kalau bisa suaranya berupa musik. Setelah itu silahkan seleksi kedua buah suara tersebut dan tekan open.

3. Tekan Ctrl+L, pada panel library yang muncul anda akan melihat dua buah suara yang baru saja anda import tadi.

4. Klik kanan suara pertama pada panel library kemudian pilih Linkage. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript lalu masukkan musik1 di dalam kotak identifier lalu tekan ok.

5. Klik kanan suara kedua pada panel library kemudian pilih Linkage. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript lalu masukkan musik2 di dalam kotak identifier 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

//-----||-----//
//membuat movie clip kosong bernama msk1_mc pada kedalam paling atas
msk1_mc = this.createEmptyMovieClip("msk1_mc", this.getNextHighestDepth());
//membuat variable bernama musik1 menjadi sound object sekaligus memasukkan movie clip msk1_mc ke dalam musik1 tersebut
musik1 = new Sound(msk1_mc);
//memasukkan suara dari library dengan identifier musik1 ke dalam sound object musik1
musik1.attachSound("musik1");
//mengatur volume  suara pada sound object musik1 menjadi 100
musik1.setVolume(100);
//mainkan suara yang ada pada sound object musik1 sebanyak 999 kali
musik1.start(0, 999);
//-----||-----//
//membuat movie clip kosong bernama msk2_mc pada kedalam paling atas
msk2_mc = this.createEmptyMovieClip("msk2_mc", this.getNextHighestDepth());
//membuat variable bernama musik2 menjadi sound object sekaligus memasukkan movie clip msk2_mc ke dalam musik2 tersebut
musik2 = new Sound(msk2_mc);
//memasukkan suara dari library dengan identifier musik2 ke dalam sound object musik2
musik2.attachSound("musik2");
//mengatur volume  suara pada sound object musik2 menjadi 50
musik2.setVolume(50);
//mainkan suara yang ada pada sound object musik2 sebanyak 999 kali
musik2.start(0, 999);
//-----||-----//

7. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Sumber : https://warungflash.com

Spektrum suara

Spektrum suara yang kita buat ini tidak sinkron dengan musik (hanya untuk hiasan saja). Teknik pembuatanya akan menggunakan animasi frame.

1. Buatlah sebuah flash document.

2. Pada frame 1, buatlah sebuah garis lurus di tengah-tengah stage seperti gambar di bawah ini.

3. Klik kanan frame 10 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 10.

4. Klik kanan frame 11 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 11.

5. Klik kanan frame 12 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 12.

6. Klik kanan frame 13 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 13.

7. Klik kanan frame 14 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 14.

8. Klik kanan frame 15 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 15.

9. Klik kanan frame 16 dan pilih Insert Keyframe. Gambarlah garis seperti gambar di bawah ini pada frame 16.

10. Klik kanan frame 17 dan pilih Insert Blank Keyframe. Pastikan anda masih menyeleksi frame 17, lalu tekan F9 pada keyboard. Pada panel actions yang muncul masukkan script berikut :

1
2

//mainkan frame sesuai nilai acaka 7 yang kemudian ditambah 10
gotoAndPlay(random(7)+10);

11. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Sumber : https://warungflash.com