26
Feb

Banner Game Flash

Written by admin


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:

timeline-fgb

Gambar Timeline

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

lawan1

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:

lawan-2

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 :

player-1

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:

player-2

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:

main

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:

menang

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:

kalah

Letak objek frame 14

35. Tekan Ctrl+Enter untuk melihat hasilnya

Kedipkan mata sebanyak 20 kali

Sourcenya dapat di download di sini





Apakah tutorial di atas menarik atau bermanfaat bagi anda? Bantulah Warung Flash agar tetap ada dan memberikan tutorial-tutorial yang lebih bagus dan bermanfaat lagi. Silahkan klik link berikut ini untuk lebih jelasnya : Bantu Warung Flash



Bookmark and Share

24 Responses to “Banner Game Flash”

  1. cicos Says:

    :-B Thanks a Lot and nice tutorials ! Warung flash the best lah !

  2. admin Says:

    Sama-sama. Silahkan mampir lagi sambil ajak teman :D

  3. Katim Says:

    kereeeeeeeeeeeeen :D

  4. Katim Says:

    om, koreksi dikit nih :p kayaknya yg point 14 salah deh

    Klik Movie clip lawan_mc dan tekan……

    bukannya player_mc ya harusnya? hehehe :D

  5. admin Says:

    Oh iya benar ada kesalahan. Terima kasih atas koreksinya :D

    Sekarang sudah dibetulkan

  6. Syarif Says:

    Wah keren abiez..Thanx om,jd lebih bsa ngerti drpd bca bku ttrialnya..Tp ksh cra bwt game2 yg lbh bnyak ya om?

  7. admin Says:

    Ok, tunggu saja tutorial-tutorial kami berikutnya

  8. cico Says:

    Maaf kalo rada ga nyambung sama judul artikel…bisa dibantu tutorial mengenai pembuatan MAP berformat flash tidak ? seperti google map.. mouse bisa interactive, seperti menarik image peta (kiri,kanan, atas,bawah) dan ketika mouse singgah pada suatu wilayah juga dapat mengeluarkan balon teks sebagai keterangan.. sekali lagi maaf..dan Terima kasih…

  9. rizal Says:

    Makacih bnyk bos…….
    tutorial yg wasyik…..

  10. reza Says:

    bagi pemula kaya saya…Terima kasih banyak…..

  11. Rizaal Says:

    wah, mas keren game bannernya…………….

    mas, kalo buat banner iklan untuk web gimana?????

    makasih atas tutorialnya…………….. =D>

  12. Anhar Tasman Says:

    Bisa gak kalau baner flash yang kita buat kita pasangkan iklan dari mochiads???

  13. wah.. Says:

    gila ni yang bikin web sendiri???

    keren lah….

    lanjutkan perjuangan mu!!!
    :peace:

  14. aries Says:

    mas gimana caranya menggabungkan tampilan awal game dengan game itu sendiri??kalo di dreamweaver kan da link nya. Untuk flash gmn??

  15. admin Says:

    Kalau di flash bisa pakai gotoAndPlay atau gotoAndStop. Seperti pada tutorial berikut ini : http://warungflash.com/2009/03/stop-play-gotoandplay-gotoandstop/

  16. armada Says:

    keren ni situs. =D>
    semoga Allah SWT membalas kebaikan dari pembuatan situs ini. :hope:
    ngebantu banyak orang soalnya..

    jadi ga perlu beli buku…untuk tahap belajar.

    thanks bro..udah mw bagi-bagi ilmu..

  17. admin Says:

    Thanks /thanks
    Amin… :hope:
    Silahkan berkunjung kembali :peace:

  18. Aj Says:

    **Error** C:\Documents and Settings\saprul\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Classes\FP8\TextField.as: Line 7: The name of this class, ‘TextField’, conflicts with the name of another class that was loaded.
    {

    Total ActionScript Errors: 1 Reported Errors: 1

    keluar begini kenapa ya mas admin??

  19. admin Says:

    Coba kirimkan contoh flanya ke warungflash@gmail.com
    Nanti akan kami coba lihat dulu.

  20. Aj Says:

    flash player sama flash 8 misal yang kta pakai ada hub. gak ya mas??gmana mas tau error kenapa tuch??

    action script versi 1 sama yang 2 dan seterusnya itu ada converternya gak ya mas…..saya dapet versi 1 mw ke action script 2 ga ngerti dech mas !!!

    thx buat webnya mas membantu sekali tugas akhir saya…..!!

  21. Jetro Says:

    om mau nanya, kalo pas menang kan kebuka web warungflash.com, kalau mau ganti tujuan webnya gimana gan? Thanks.

  22. agung Says:

    buat game baru lagi kah? :idea:

  23. Eboy Tarmuji Says:

    Waw… gak tau harus bilang apa :respect: ..
    website nya bagus banget..
    Jadi pengen buat sendiri..
    hahaha
    tapi gak tau bisa ap nggak..
    ajarin ea mas broo..
    haahh :))

  24. itel Says:

    mas buat game kuis dong :D =DV =DV =DV

Leave a Reply

B-) =DV <:-P ;)) ;) :yeye: :respect: :peace: :p :idea: :hope: :I: :D :-SS :-? :-/ :)) :) :(( 8-> more »

Komentar yang berisi pertanyaan atau request tutorial kemungkinan besar tidak bisa kami jawab dan penuhi. Hal ini dikarenakan kesibukan kami yang padat . Oleh karena itu kami mohon maaf dan pengertiannya.