Warung Flash

Anda tentunya pernah melihat atau bahkan memainkan banner yang berbentuk game flash. Prinsip dasarnya hanyalah sebuah mini game. Jika anda menang maka akan membuka situs pengiklan, jika kalah maka permainan diulang. Kali ini kita akan membuat banner game flash. Game yang akan kita buat adalah game mengedipkan mata yang mana anda harus mengedipkan mata sebanyak 20 kali untuk memenangkan game.

1. Buatlah sebuah flash document dengan panjang 728px serta lebar 90px dan juga 12fps sebagai frame rate

2. Buatlah 3 buah layer dan berikan nama berikut pada masing-masing layer : label, core, background.

3. Insert blank keyframe pada frame 7 dan 14 di layer label. Berikan game, menang, kalah sebagai frame label pada frame 1, 7, dan 14

4. Insert blank keyframe pada frame 7 dan 14 di layer core.

5. Insert frame pada frame 18 di layer background. Sehingga timeline akan tampak seperti di bawah ini:

Gambar Timeline

6. Klik frame 1 pada layer core kemudian buatlah gambar seperti di bawah ini :

Gambar pertama lawan

7. Seleksi gambar tersebut lalu tekan F8. Pada kotak dialog yang muncul masukan lawan_mc sebagai Name dan Movie clip sebagai Type lalu tekan OK

8. Klik Movie clip lawan_mc dan tekan Ctrl+F3. Pada panel properties yang muncul berikan lawan sebagai Instance name. Kemudian klik dua kali Movie clip lawan_mc untuk masuk ke dalam stage movie clip tersebut.

9. Setelah masuk ke stage Movie clip lawan_mc, klik kanan frame 10 dan pilih Insert Blank Keyframe lalu buatlah gambar seperti di bawah ini:

Gambar kedua lawan

10. Pastikan anda masih menyeleksi frame 10, lalu tekan F9 dan masukan script berikut pada kotak actions yang muncul:

1
2

//score lawan ditambah 1
_root.score_lawan += 1;

11. Klik kanan frame 15 lalu pilih Insert Keyframe. Jika sudah tekan Ctrl+E untuk kembali ke stage scene 1

12. Pastikan anda masih di frame 1 layer core, buatlah gambar seperti di bawah ini :

Gambar pertama pemain

13. Seleksi gambar tersebut lalu tekan F8. Pada kotak dialog yang muncul masukan player_mc sebagai Name dan Movie clip sebagai Type lalu tekan OK

14. Klik Movie clip player_mc dan tekan Ctrl+F3. Pada panel properties yang muncul berikan player sebagai Instance name. Kemudian klik dua kali Movie clip player_mc untuk masuk ke dalam stage movie clip tersebut.

15. Setelah masuk ke stage Movie clip lawan_mc, klik frame 1 lalu tekan F9. Pada kotak actions yang muncul berikan scipt berikut:

1

stop();

16. klik kanan frame 4 dan pilih Insert Blank Keyframe lalu buatlah gambar seperti di bawah ini:

Gambar kedua pemain

17. klik kanan frame 8 dan pilih Insert Keyframe jika sudah tekan Ctrl+E untuk kembali ke stage scene 1

18. Buatlah 2 buah dynamic text dan berikan score_lawan dan score_player pada masing-masing Var. Seleksi 2 buah dynamic text tadi dan tekan Ctrl+F3 aktifkan Show border around text.

19. Buatlah sebuah static text dengan tulisan kedip. Gambarlah sebuah persegi panjang dengan luas sama dengan luas text. Tempatkan persegi panjang tersebut di tengah-tengah test kedip. Seleksi text dan persegi panjang lalu tekan F8. Pada kotak dialog yang muncul masukan kedip_btn sebagai Name dan Button sebagai Type lalu tekan OK

20. Seleksi kedip_btn lalu tekan F9. Pada kotak actions yang muncul berikan script berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//ketika tekanan pada mouse dilepaskan setelah ditekan
on (release) {
	//mainkan frame 2 movie clip player
	player.gotoAndPlay(2);
	//score player ditambah 1
	score_player += 1;
	//jika score player lebih dari atau sama dengan 20
	if (score_player>=20) {
		//buka url
		getURL("http://warungflash.com", "_blank");
		//mainkan frame berlabel menang
		gotoAndStop("menang");
		//score player menjadi 0
		score_player = 0;
	}
}

21. Klik 2 kali kedip_btn untuk masuk ke dalam stage button tersebut. Klik kanan frame Over dan pilih Insert Keyframe. Ubah warna huruf kedip di frame Over menjadi lebih muda.

22. Klik kanan frame Down dan pilih Insert Keyframe. Ubah warna huruf kedip di frame Down menjadi lebih tua. Lalu tekan Ctrl+E untuk kembali ke stage scene 1

23. Klik layer background lalu buatlah persegi panjang dengan luas sama dengan luas stage. Berikan warna radial merah dan merah tua pada persegi panjang tersebut.

24. Pastikan anda masih di layer background. Buatlah sebuah static text dengan tulisan lihat situs untuk detailnya. Seleksi tulisan 24. tersebut, lalu tekan tekan F8. Pada kotak dialog yang muncul berikan site_btn sebagai Name dan Button sebagai Type lalu tekan OK

25. Seleksi site_btn dan tekan F9. Pada kotak actions yang muncul masukan script berikut:

1
2
3
4
5

//ketika tekanan pada mouse dilepaskan setelah ditekan
on (release) {
	//buka url
	getURL("http://warungflash.com", "_blank");
}

26. Klik 2 kali site_btn tadi maka anda akan masuk ke dalam stage button tadi. Klik kanan frame Hit dan pilih Insert Blank Keyframe. Gambarlah sebuah persegi panjang dengan luas sama dengan luas text tadi dan tempatkan di tengah-tengah titik registration. Jika sudah tekan Ctrl+E

27. Tata objek-objek yang dibuat tadi seperti gambar di bawah ini:

Letak objek frame 1

28. Klik frame 1 layer core dan masukan script berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13

stop();
stop();
score_player = 0;
score_lawan = 0;
onEnterFrame = function () {
	//jika score lawan lebih dari atau sama dengan 20
	if (score_lawan>=20) {
		//mainkan frame berlabel kalah
		gotoAndStop("kalah");
		//score lawan menjadi 0
		score_lawan = 0;
	}
};

29. Klik frame 7 layer core. Gambarlah 2 buah static text dengan masing-masing diberi tulisan Anda Menang !!! dan Klik Sini

30. Gambarlah sebuah persegi panjang dengan luas sama dengan luas stage. Seleksi persegi panjang tersebut lalu tekan F8. Pada kotak dialog yang muncul masukan invs_btn sebagai Name dan Button srbagai Type lalu tekan OK

31. Seleksi invs_btn lalu tekan F9. Pada kotak actions yang muncul masukan script berikut:

1
2
3
4
5

//ketika tekanan pada mouse dilepaskan setelah ditekan
on (release) {
	//buka url
	getURL("http://warungflash.com", "_blank");
}

32. Klik 2 kali invs_btn maka anda akan masuk ke dalam stagenya. Drag Keyframe di frame Up ke frame Hit. Jika sudah tekan Ctrl+E. Ubah letak objek-objek di frame 7 layer core seperti pada gambar di bawah ini:

Letak objek frame 7

33. Klik frame 14 layer core dan tekan F9. Pada kotak actions yang muncul masukan script berikut:

1
2
3
4
5
6
7
8
9
10

waktu = 0;
onEnterFrame = function () {
	//waktu ditambah 1 terus menerus
	waktu++;
	//jika waktu lebih dari atau sama dengan 30
	if (waktu>=30) {
		//mainkan frame berlabel game
		gotoAndStop("game");
	}
};

34. Pastikan anda aktif di frame 14 layer core kemudian buatlah static text dengan tulisan Anda Kalah, Coba Lagi dan letakan seperti gambar di bawah ini:

Letak objek frame 14

35. Tekan Ctrl+Enter untuk melihat hasilnya

Kedipkan mata sebanyak 20 kali

Sourcenya dapat di download di sini