10
Aug

Perbedaan Gambar

Written by admin


Kerangka game yang akan kita buat kali ini adalah perbedaan gambar. Dalam kerangka game ini kita akan membandingkan gambar A dengan gambar B. Cara memainkannya sangat mudah, apabila pada gambar bagian A berbeda dengan gambar bagian B, maka tekan bagian yang berbeda pada gambar bagian A tersebut.

1. Buatlah sebuah flash document.

2. Buatlah 1 buah static text yang bertuliskan Carilah  perbedaan yang terdapat pada gambar A dengan yang ada di gambar B. Klik langsung bagian gambar A yang menurut anda berbeda dengan bagian di gambar B.

3. Buatlah 2 buah objek seperti di bawah ini :

gambar-objek

4. Buatlah sebuah lingkaran dengan garis berwarna hitam dan bagian dalam lingkaran berwarna putih alpha 10%.

5. 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.

6. Klik kanan movie clip lingkaran di stage kemudian pilih Edit untuk masuk ke dalam stage movie clip lingkaran.

7. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1
2

//menghentikan frame agar tidak bergerak ke frame berikutnya
stop();

8. Klik kanan frame 1 dan pilih Copy Frames. Klik kanan frame 2 dan pilih Paste Frame.

9. Ubah warna garis lingkaran di frame 2 menjadi berwarna merah. Jika sudah tekan Ctrl+E untuk kembali ke stage scene 1.

10. Seleksi movie clip lingkaran di stage kemudian tekan Ctrl+D sebanyak 3 kali sehingga terdapat 4 buah movie clip lingkaran.

11. Seleksi movie clip lingkaran pertama dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran1 sebagai instance name.

12. Berikan instance name pada lingkaran yang lain sesuai nomornya. Sehingga di stage terdapat 4 buah movie clip yang masing-masing berinstance name lingkaran1, lingkaran2, lingkaran3, lingkaran4.

13. Atur posisi 4 buah movie clip lingkaran tadi seperti gambar di bawah ini :

letak-movie-clip

14. Jika ukuran movie clip lingkaran terlalu besar maka kecilkanlah dengan menggunakan Free Transform Tool.

15. Buatlah 3 buah static text masing-masing bertuliskan A, B, perbedaan lagi.

16. Buatlah sebuah dynamic text dan pada panel properties masukkan jumlah sebagai Var.

17. Buatlah sebuah dynamic text dengan tulisan RESET dan pada panel properties aktifkan tombol Show border around text.

18. Seleksi dynamic text bertuliskan RESET dan tekan F8. Pada panel yang muncul masukkan reset_btn sebagai name dan button sebagai type lalu tekan ok.

19. Seleksi button reset_btn dan pada panel properties masukkan reset_btn sebagai instance name.

20. Atur letak seluruh objek yang dibuat seperti gambar di bawah ini :

letak-objek-frame-1

21. Klik tombol Insert layer pada timeline sehingga memunculkan layer baru bernama Layer 2. Klik dan drag Layer 2 ke bawah sehingga berada di bawah layer 1

22. Klik frame 1 layer 2 dan buatlah sebuah invisible button dengan panjang dan lebar sama dengan panjang dan lebar kotak yang memuat gambar A.

23. Letakkan invisible button tersebut tepat di tengah-tengah gambar A.

24. Klik frame 1 layer 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
23
24
25
26
27
28
29
30
31

//membuat variable jumlah dengan nilai 4
jumlah = 4;
//membuat variable i dengan nilai i=1, i=2, i=3, i=4
for (i=1; i<=4; i++) {
	//nilai transparansi lingkaran+i menjadi 0
	_root["lingkaran"+i]._alpha = 0;
	//ketika lingkaran+i ditekan
	_root["lingkaran"+i].onPress = function() {
		//jika lingkaran+i berada di frame 1
		if (this._currentframe == 1) {
			//variable jumlah dikurangi 1
			jumlah--;
			//nilai transparansi lingkaran+i menjadi 100
			this._alpha = 100;
			//mainkan frame 2 lingkaran+i
			this.gotoAndStop(2);
		}
	};
}
//ketika reset_btn ditekan
reset_btn.onPress = function() {
	//membuat variable i dengan nilai i=1, i=2, i=3, i=4
	for (i=1; i<=4; i++) {
		//mainkan frame 1 lingkaran+i
		_root["lingkaran"+i].gotoAndStop(1);
		//nilai transparansi lingkaran+i menjadi 0
		_root["lingkaran"+i]._alpha = 0;
		//nilai variable jumlah menjadi 4
		jumlah = 4;
	}
};

25. Tekan Ctrl+Enter untuk melihat hasilnya.

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

Posted in Flash - Kerangka Game

42 Responses to “Perbedaan Gambar”

  1. erwin Says:
    August 10th, 2009 at 18:37

    wah om dah sukses /wow , lanjutin om biar makin bagus ntar web ini aku kenalin ke tmn2 ku di facebook biar banyak yang masuk dan makin terkenal /bos

  2. erwin Says:
    August 11th, 2009 at 12:32

    mas klo bikin berlevel-level (banyak levelnya) script nya gimana / script yang harus ditambahkan agar bisa ke frame berikutnya saat semua perbedaan tertebak.thnx

    ohya om kalo untuk memberi waktu pada gamenya gimanaya om aku nyoba2 yang aku tau gak bisa2 /stress

  3. admin Says:
    August 11th, 2009 at 18:31

    tambahkan script ini di frame 1:

    1
2
3
4
5

    onEnterFrame = function () {
	if (jumlah == 0) {
		nextFrame();
	}
};

    Untuk timernya coba baca tutorial berikut http://warungflash.com/2009/03/membuat-timer/
    Hasil waktunya memang tidak berjalan sesuai waktu di dunia nyata tapi mendekati.

  4. erwin Says:
    August 12th, 2009 at 13:19

    om admin tapi script buat kalo waktunya habis truss ke frame tertentu gimana om :hope:

  5. admin Says:
    August 12th, 2009 at 14:58 
    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

    fps = 0;
detik = 30;
menit = 2;
onEnterFrame = function () {
	if (menit<10) {
		_root.minute = "0"+menit;
	} else {
		_root.minute = menit;
	}
	if (detik<10) {
		_root.second = "0"+detik;
	} else {
		_root.second = detik;
	}
	fps++;
	//nilai fps harus sama dengan nilai fps yang digunakan di stage
	if (fps == 20) {
		detik -= 1;
		fps = 0;
	}
	if (menit>0 && detik == 0) {
		menit -= 1;
		detik = 59;
	}
	if (menit == 0 && detik == 0) {
		//ganti tulisan angka dgn frame yang anda inginkan
		gotoAndStop(angka);
	}
};

    Atau lihat timer yang kami buat seperti pada http://warungflash.com/2009/07/tembak-balon/

  6. erwin Says:
    August 12th, 2009 at 15:52

    oh tanks om sangat berguna /jempol

  7. erwin Says:
    August 12th, 2009 at 16:01

    om ada lagini kalo cara saat time sedikit ntar bunyi nit nit gimana om admin /??

  8. admin Says:
    August 13th, 2009 at 13:01

    Bunyi nitnya itu dimainkan berapa kali? Cuma sekali atau beberapa kali?
    Kalau dimainkan sekali berarti anda memiliki suara yang berbunyi nit nit nit nit nit
    Kalau dimainkan beberapa kali berarti anda memiliki suara yang berbunyi nit

    Oh ya mumpung belum lupa, ternyata ada scipt yang membuat kursor tidak berubah menjadi tangan.
    Scriptnya : instanceNameButtonAnda.useHandCursor = false

  9. erwin Says:
    August 13th, 2009 at 19:02

    wah ternyata omnya masih ingetnih soal tombol /berpikir
    ohya om saya gak punya suara nitnit di zidu ke popup firefox /nangis om tau gak donlodnya di mana?

  10. admin Says:
    August 13th, 2009 at 19:19

    /kaget2 eeeeeeee
    Nggak punya suaranya?
    Kami juga nggak tahu suara nit nit itu downloadnya dimana.

  11. erwin Says:
    August 13th, 2009 at 20:28

    om aku punyanya sekali bunyi dua tapi bkn nit melainkan dekdek om kasih scriptnya donkyg saat 10 sampai nol
    tiap detik memunculkan suara

    oh ya kalo bisa script suara dek2 nya dipadu kan dgn script saat waktu habis ke frame tertentu atau kalo tidak sempat nanti script bunyinya saja nanti saya yg gabungkan dgn file yg sudah om kasih /kacamata

  12. admin Says:
    August 14th, 2009 at 14:13

    Coba lihat tutorial terbaru hari ini.

  13. aldi Says:
    August 14th, 2009 at 15:49

    e erwin gaya lw sok bapak2 :)) :)) =))

    /pukul /huek /nggaktau /belajar /thanks2 /semangat /jempol /ngantuk /bonyok /keren /maaf /pusing: /cium /laugh /tidak /hore /sarjana /berkaca /wow /sendiri /mati /ngamuk /ngantuk /gigigi /thanks /panas /senang /kebakar /stress /shockberat

    win jadi gk klo dah jadi, gw 1/4 anggit 1/4 lw sisanya mogak? :D

  14. erwin Says:
    August 14th, 2009 at 16:40

    mo donk :D ,haha nah lw belajar pke ni web pengenalan dlu baru mulai membuat game /sarjana ohye anggit jg ksh tau Di, ama om admin gw comen dijawab terus jadi tw banyak hal /bangga thnx om kasih tutor2 yg lebih menarik om biasanya seruan artikel pembuatan game salam erwin /keren

  15. makhdy Says:
    August 20th, 2009 at 14:21

    wah..luar biasa..sangat membantu sekali..ini yang saya butuhkan..terima kasih banyak om admin..sukses selalu buat warung flash nya. O iya, ada request boleh gak ?

    1. gimana membuat puzzle secara acak, dimana setelah puzzle terkumpul semua (atau potongan terakhir), baru akan muncul menu (tombol) lanjut atau next…?

    2. mencari potongan kata dari sebuah gambar secara tersembunyi, sehingga bila di klik semua secara utuh, akan membentuk sebuah kata pribahasa atau lainnya. Contoh : diberitahu dahulu kata yg harus dicari adalah “JANGAN BUANG SAMPAH SEMBARANGAN”, maka pada gambar tersebut harus mencari kata2 yg tersembunyi dari gambarnya, yaitu :
    - jika kita klik gambar rumah, maka muncul kata BUANG
    - jika kita klik gambar sepeda, maka muncul kata JANGAN
    - jika kita klik gambar pohon, maka muncul kata SAMPAH
    …dst (tapi semua gambar itu menjadi satu objek, bukan gambar yg terpisah-pisah, yaitu berupa gambar pemandangan.

    Kiranya itu dulu om admin ide yg tiba2 muncul…atas jawabannya sangat2 saya harapkan….please contact saya yah di web2000aza@gmail.com atau YM! di tertawa_01@yahoo.com

    MAKASIHHHHHH BANGETZZZ…..sukses wat warungflash nya.

  16. admin Says:
    August 20th, 2009 at 15:51

    Untuk request no 2 :
    Lalu bagaimana pemain mengetahui bahwa pada gambar rumah terdapat kata BUANG atau pada gambar sepeda terdapat gambar JANGAN?
    Apakah pemain harus mengklik gambar pemandangannya secara acak?
    Atau akan ada petunjuk yang membantu untuk menemukannya?

  17. makhdy Says:
    August 22nd, 2009 at 08:03

    iya,anak hrus mencari gambarnya secara acak,petunjuknya hanya kata JANGAN BUANG SAMPAH SEMBARANGAN.Jadi jk anak brhasil menemukan smua kata,mndapatkan skor dan kata slamat.Diakhir soal muncul bonus mngumpulkan jeruk sbanyak2nya sampai wkt hbis(sdperti d game varmints).Makasih banyak p admin.

  18. admin Says:
    August 22nd, 2009 at 10:48

    Mengumpulkan jeruk itu kayak apa ya? Maaf kami belum pernah main game varmints seperti yang anda maksudkan.

  19. makhdy Says:
    August 25th, 2009 at 09:19

    maksudnya game jeruk (itu hanya contoh saja kang admin)..intinya mengumpulkan gambar tertentu yang bertebaran dalam sebuah gambar, nah anak harus mengumpulkan gambar tersebut dengan cepat menggunakan keyboard sampai waktunya habis…sehingga bila waktu habis, setiap anak akan berbeda-beda skornya…demikian..semoga bisa menjadi gambaran..makasih om admin…

  20. admin Says:
    August 25th, 2009 at 10:42

    Untuk game jeruknya belum begitu jelas gambaranya. Tetapi kalu mencari kata dalam gambar kami sudah mengerti. Kalau anda punya gambar untuk game mencari kata tolong dikirimkan, kami akan terbantu.

  21. makhdy Says:
    August 28th, 2009 at 12:52

    Alhamdulillah baru sempat ol lagi…alhamdulillah om admin….makasih banyak atas bantuannya. Berikut ini saya send link untuk contoh gambarnya (sebenarnya masih bisa bervariasi untuk gambarnya). Filenya saya letakkkan di http://www.4shared.com/file/128296483/813e1281/taman3.html

    Semoga bisa di download om admin..makasih..

  22. admin Says:
    August 29th, 2009 at 05:57

    Kok gambarnya anak kecil bermain? Kok nggak ada gambar rumah dan sepeda? Kalau begitu peribahasanya diganti apa ya?

  23. makhdy Says:
    August 31st, 2009 at 20:53

    Itu hanya contoh aza om admin…jadi fleksibel aza…bisa juga diganti kata2 lain, misalnya : ANAK SEHAT CERDAS PENUH SEMANGAT…misal seperti itu…makasih

  24. admin Says:
    September 1st, 2009 at 16:51

    Owh oke nanti kami coba buatkan ;)

  25. makhdy Says:
    September 3rd, 2009 at 21:31

    Alhamdulillah…terima kasih banyak om admin…semoga makin sukses deh ente..dan saya akan senantiasa terus belajar untuk perkembangan flash di indonesia…sekalian ada usul nih..boleh gak…?

    1. Tolong diadakan pertemuan antar pengunjung web ini, diharapkan sebagai sarana silaturahim dan tatap muka para penikmat warungflash.

    2. Diadakan pula saran qiuz yang mendukung perkembangan flash, bentuknya bisa sederhana aza, misal : membuat karakter sederhana, membuat animasi dasar sederhana dari yg diajarkan pada web ini, pembuatan program sederhana dll.

    Mungkin itu aza om admin..semoga bermanfaat dan saya ucapkan terima kasih banyak..sukses dan bravo wat warungflash nya.

  26. yin Says:
    October 18th, 2009 at 06:27

    hai mas, saya mau nanya gi mana jika kita sudah habis mencari perbedaan gambar lalu ada bunyi tepukan yang keluar. mau ditambah dimana didalam scriptnya? mohon jawapan kok mas… ;))

  27. admin Says:
    October 18th, 2009 at 07:58

    Coba tambahkan script ini :

    1
2
3
4
5
6
7

    tepuktangan = new Sound();
tepuktangan.attachSound("tepuktangan");
onEnterFrame=function(){
     if(jumlah == 0){
        tepuktangan.start(0, 1);
     }
};

    Sebelumnya import suaranya ke panel library terlebih dahulu. Lalu berikan linkage pada suara tersebut dengan tepuktangan sebagai identifiernya.

  28. yin Says:
    October 18th, 2009 at 22:01

    wah…terima kasih ya mas. mas admin baik deh /thanks2

  29. admin Says:
    October 19th, 2009 at 15:17

    Sama-sama /jempol

  30. bayu Says:
    January 13th, 2010 at 08:30

    om, klo mau melakukan input,update,delet (manipulasi data) di flash gmn carana?????? :hope:

  31. admin Says:
    January 14th, 2010 at 05:51

    Kalau database kami tidak bisa membantu soalnya kami tidak mempelajarinya :respect:

  32. rdwanq Says:
    February 9th, 2010 at 11:17

    om kalo mau abis menang terus ada tulisan winernya gmn tambah scriptnya??

  33. admin Says:
    February 15th, 2010 at 08:52

    Di frame 2 buatlah tulisan winner lalu tambahkan script berikut di frame 1 :
    onEnterFrame = function () {
    if (jumlah == 0 && _currentframe == 1) {
    gotoAndStop(2);
    }
    };

  34. ari Says:
    August 10th, 2010 at 08:07

    keren lah om tutornya
    dan mksh atas infonya ok
    :respect:

  35. admin Says:
    August 10th, 2010 at 08:32

    /jempol

  36. Andika Says:
    August 31st, 2010 at 06:41

    Om admin saya mau tanya lagi dong untuk kesekian kalinya hehehe… :D
    sebenrnya di atas sudah ada jawabannya seh cuma saya masih kurang mengerti maklum pemula :p
    Pertanyaannya sama kaya erwin di atas, cuma saya mo lebih spesifikin lagi soalnya masih bingung…
    saya ingin membuat game ini jadi 5 level itu jadinya 5 frame ato 5 scene…????
    baru bisa ke level berikutnya setelah menyelesaikan level yang di mainkan…????setelah selesai 5 level tersebut lalu masuk ke ending atau tulisan selsai dsb…itu masuknya ke frame/scene selanjutnya…???scriptnya seperti apa ya…???abisnya liat jawaban yang buat si erwin masih kosong bingung saya /pusing: … :p
    sebelumnya saya ucapkan terima kasih untuk admin dan web ini, saya merasa terbantu sekali :respect:
    /thanks /jempol

  37. admin Says:
    August 31st, 2010 at 15:41

    Anda buat game di atas menjadi 5 frame. Jadi disetiap frame ada game dan script seperti diatas.
    Lalu di masing-masing frame masukkan script berikut :
    onEnterFrame=function(){
    if(jumlah==0){
    nextFrame();
    jumlah=4
    }
    }

  38. dedi Says:
    January 10th, 2011 at 22:17

    mas gimana ya klo dtambhin script untuk bnyaknya jumlah menekan objek agar pemain tidak sembarangan pencet..

    lalu contoh scriptna gmn ya mas admin??
    please
    :respect:

  39. ARIEF Says:
    May 31st, 2011 at 21:13

    mas admin..
    saya mau nanya tentang game prbedaan gmbar?
    jika gambarnya itu kita ambil dari google(tidak kita buat sndiri).
    kita otomatis mengklik gmbar yang beda itu carannya gmana?
    apakah gambarnya harus di potong2 kita jadikan button or bagaimana?
    toloong mas admin.

  40. mocie Says:
    July 18th, 2011 at 23:33

    agan admin..

    w mw tanya2 nii…

    1.Gmana buat objek peta dengan mengenali setiap wilayah..??
    2.Pewarnaan transpart setiap wilayh..

    trima ksih..

    butuh pencerahann nya..

  41. irwan Says:
    February 20th, 2012 at 09:55

    bang admin tolong di bales ya..mau tanya nih…saya udah sukses buat lever 1 (frame 1) nya tapi setelah buat level kedua di frame 2..selalu gagal..jika ngeklik lingkaran perbedaan yg di level 2mesti yg kebaca yg di level/frame 1..yg di frame 2 seperti diabaikan…trmksh :(( :(( :((

  42. farhan Says:
    March 3rd, 2012 at 13:49

    \jempol trims
    <:-p

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.