14
Nov

Jigsaw

Written by admin


Pada tutorial yang lalu kita pernah membuat sebuah puzzle drag n drop atau dasar dari jigsaw puzzle. Tetapi jika anda menggunakan script pada tutorial tersebut, tentunya script yang anda tulis akan menjadi panjang jika kepingan yang anda buat banyak. Oleh karena itu, ditutorial ini kami membuat versi dengan script yang lebih pendek. Bila anda tertarik untuk membuat sebuah game semacam jigsaw silahkan gunakan tutorial berikut.

1. Buatlah sebuah flash document.

2. Buatlah beberapa objek seperti gambar dibawah ini :

3. Tekan Ctrl+R dan pada panel yang muncul cari gambar yang diinginkan kemudian tekan Open.

4. Seleksi gambar yang baru dimport tadi, kemudian tekan Ctrl+B untuk membuat gambar bitmap menjadi shape.

5. Jika sudah gambarlah garis pada gambar tadi. Buatlah garis yang membuat gambar tadi menjadi berkeping-keping.

6. Pada tutorial ini, kami membagi gambarnya menjadi 4 keping dengan garis sebagai berikut :

7. Seleksi kepingan pertama (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian1 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.

8. Seleksi movie clip Bagian1 kemudian tekan Ctrl+F3. Pada panel properties yang muncul ketikkan Bagian1 pada kotak Instance Name.

9. Seleksi kepingan kedua (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian2 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.

10. Seleksi movie clip Bagian2 dan pada panel properties ketikkan Bagian2 pada kotak Instance Name.

11. Seleksi kepingan ketiga (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian3 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.

12. Seleksi movie clip Bagian3 dan pada panel properties ketikkan Bagian3 pada kotak Instance Name.

13. Seleksi kepingan keempat (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian4 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.

14. Seleksi movie clip Bagian4 dan pada panel properties ketikkan Bagian4 pada kotak Instance Name.

15. Jika semua kepingan sudah menjadi movie clip, hapus garis-garis yang digunakan untuk membuat kepingan tadi.

16. Letakkan keempat kepingan tadi seperti gambar dibawah ini :

17. Jika seandainya kotak yang dibuat pada Tutorial Nomor 2 terlalu kecil, anda dapat membesarkannya.

18. Seleksi keempat keping movie clip kemudian tekan Ctrl+C untuk mengcopynya.

19. Jika sudah tekan Ctrl+V untuk menduplikasinya. Letakkan kepingan hasil duplikasi sepeti gambar dibawah ini :

20. Pastikan anda masih menyeleksi kepingan hasil duplikasi. Lalu pada panel propeties anda ganti Color menjadi Alpha 10%.

21. Jika sudah, seleksi salah satu kepingan hasil duplikasi kemudian pada panel properties tambahkan kata Target pada kotak instance name.

22. Lakukan Tutorial Nomor 21 pada ketiga keping duplikasi lainnya.

23. Sehingga nantinya Instance Name pada masing-masing keping duplikasi menjadi menjadi TargetBagian1, TargetBagian2, TargetBagian3, TargetBagian4

24. Sekarang acak kepingan pada keping asli seperti gambar dibawah ini :

25. Buatlah sebuah dynamic text. Seleksi dynamic text tersebut kemudian pada panel properties anda ketikkan pesan di kotak Var.

26. Letakkan dynamic text tadi seperti gambar dibawah ini :

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

//jumlah kepingan puzzle
//sesuaikan nilai variable jumlahBagian dengan jumlah kepingan yang anda buat
jumlahBagian = 4;
for (i=1; i<=jumlahBagian; i++) {
	_root["Bagian"+i].id = i;
	//bila kepingan puzzle ditekan
	_root["Bagian"+i].onPress = function() {
		//buat posisi kepingan berada di paling atas
		this.swapDepths(_root.getNextHighestDepth());
		//kepingan dapat didrag
		startDrag(this);
	};
	//bila kepingan tidak ditekan
	_root["Bagian"+i].onRelease = _root["Bagian"+i].onReleaseOutside=function () {
		//kepingan tidak dapat ditekan
		stopDrag();
		target_mc = _root["TargetBagian"+this.id]
		//jika kepingan berada di sekitar target
		if (eval(this._droptarget) == target_mc) {
			//letakan kepingan di target
			this._x = target_mc._x;
			this._y = target_mc._y;
			//kepingan tidak bisa ditekan
			this.enabled = false;
			//kurangi variable jumlahBagian
			jumlahBagian--
			//jika variable jumlahBagian bernilai 0
			if (jumlahBagian == 0) {
				//tampilkan tulisan Puzzle Komplit pada dynamic text pesan
				pesan = "Puzzle Komplit";
			}
		}
	};
}

28. Tekan Ctrl+Enter untuk melihat hasilnya.

Letakanlah kepingan-kepingan puzzle pada tempatnya

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 - Game Komplit

30 Responses to “Jigsaw”

  1. Herwin Says:
    November 16th, 2011 at 13:04

    mantappp pak.. kereeennn… :yeye:

  2. Elang Says:
    November 20th, 2011 at 00:04

    Gan, bagaimana cara/ tambah scriptnya bila gambarnya bisa sekalian dibolak-balik. Nuwun

  3. koodisk Says:
    November 22nd, 2011 at 14:37

    mas/mb, saya mau tanya berhubungan dengan hitTest, knapa ya kok kalau pemainnya sudah menabrak musuh,fungsi yang lain atau berikutnya tidak bisa jalan, misal fungsi gotoAndStop..
    terima kasih..

  4. Christofher Says:
    November 23rd, 2011 at 22:00

    gan knapa jigsaw ini klo dimasukkan di web yg dibuat dengan flash puzzlenya g hilang tetapi muncul terus ??

  5. Christofher Says:
    November 23rd, 2011 at 22:48

    gan req tutorial yg gamenya keren yg lain dnk buat bljr :hope: :I: ;))

  6. TITAN Says:
    November 29th, 2011 at 10:11

    KEREN ABIESZ UM……………..!!!!!!!!!!!!!!!!!!!!!!!!

    Minta tutorial game komplit……..

  7. mas mas Says:
    December 1st, 2011 at 09:29

    bang admin minta totorial game coloring book yang klo jadi bisa lansung di print makasih ane tunggu buat sarapan terimakasih
    <:-P :respect: :respect:

  8. gray Says:
    December 10th, 2011 at 07:46

    bang admin,,yang ane qo gmbar nya gx bsa d tarik ya,,,salah nya dri mana kalau gtu…

  9. idrep Says:
    December 18th, 2011 at 11:39

    gan kalo script buat karakter bisa menembak gimana ya :-?

  10. ucit Says:
    December 19th, 2011 at 18:55

    mas admin,gmna sih caranya supaya puzzle’y ganti dgn puzzle baru setelah puzzle pertamanya komplit ?
    Mohon bantuannya :)

  11. rizki Says:
    December 27th, 2011 at 13:41

    mas admin. gmn caranya kalo kita pencet huruf “S” di keyboard pindah frame.action scriptnya kaya gmn!! :-? :-?

  12. Irhas Says:
    January 15th, 2012 at 06:13

    mas admin .. saya mau tanya gimana caranya , menggabungkan 2 game ..

    Misal game 1 dan game 2 menyatu , kalau mau ke game 1 misal di klik next ?? Tu gimana caranya ya ?? :-?

  13. jul Says:
    January 26th, 2012 at 06:35

    Hai.. warung flash..
    BISA NGGAK BUAT BENDA YANG BERGERAK KEATAS LALU BALIK KEBAWAH..

    JADI GINI, contohnya…

    ADA ALFABET YANG BERBARIS URUT DARI A-Z..
    LALU SAAT DI KLIK HURUF “A” , MAKA HURUF “A” ITU KEATAS..
    LALU SAAT HURUF “B” DI KLIK. HURUF “A” KEBAWAH DAN HURUF “B” KEATAS.. BEGITU SETERUSNYA SAMPAI SELESAI…
    saya buatnya bingung pake action_screep.. hehe …

    boleh dung dikirim ke email saya::
    bauunaga@gmail.com
    terimakasih :)

  14. Miftah Alfian Syah Says:
    January 28th, 2012 at 12:18

    Wiihh,,, kereen… 8->

  15. prabha Says:
    February 4th, 2012 at 21:27

    kk, kok ada yang error kayak gini

    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 3: Statement must appear within on/onClipEvent handler
    jumlahBagian = 4;

    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Statement must appear within on/onClipEvent handler
    for (i=1; i<=jumlahBagian; i++) {

    Total ActionScript Errors: 2 Reported Errors: 2, mohon penjelasannya saya masih newbie :D

  16. bagus Says:
    February 10th, 2012 at 19:00

    bang admin tolong doank .. aku tidak bisa memotong nya ,
    untuk yg nomer 7 yang kurang ngerti /stress 8->
    7. Seleksi kepingan pertama (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian1 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.
    di bagian ini aku yang tidak bisa.

  17. pika Says:
    March 3rd, 2012 at 00:01

    Waaah, keren !!!

    kalau saya, tulisan pas puzzle beres ga tampil bang..

  18. mukmuk Says:
    March 5th, 2012 at 15:04

    saya nyoba dan berhasil tapi untuk AS2 tombol Reset belum bisa mohon pencerahannya trimakasih

  19. Irham Says:
    March 19th, 2012 at 11:02

    wahh bagus nihh flash nya bisa interaktif

  20. tri wibowo Says:
    April 29th, 2012 at 23:06

    ane gak bisa di drag ini bang admiiiiinnnnn :(( :(( :((

  21. ronny Says:
    June 14th, 2012 at 22:55

    mas
    mau nanya nih,gmn ya buat menu yang kaya di ipad gitu…
    pke kaya touch screen gitu lahjadi memilih menu bukan statis tampil kaya biasa.

  22. neeni Says:
    June 28th, 2012 at 16:11

    mas, klo buat puzle mengurutkan angka yang digeser2 gmna mas??? mohon bantuannya.

  23. coki saputra Says:
    July 16th, 2012 at 19:41

    mas admin, mau minta tolong,
    jika puzzlenya di drag ke target, dan apabila sudah tepat pada target, biar ada notif suaranya, itu gmn caranya ?

    jadi ketika puzzlenya sudah dicocokkan maka ada keluar suaranya, mohon bantuannya dengan sangat, terima kasih

  24. Gilang PJ Says:
    July 17th, 2012 at 21:52

    gan kenapa gambar target puzzle stelah jadi ga ilang2 ? selalu ada disetiap frame kalo udah jadi? mohon infonya gan ASAP ya ane deadline bbrp hr lg… :hope:

  25. djooo Says:
    November 1st, 2012 at 08:58

    mas bro ajarin buat games monopoly donk?

  26. gamgumal Says:
    November 3rd, 2012 at 23:52

    ko pesannya muncul duluan ya sebelum gamenya di mulai?
    mohon bantuannya /berkaca

  27. andreas Says:
    November 19th, 2012 at 09:14

    Mas, ada tutorial ttg gini ga?

    Misal setelah menyelesaikan puzzle pertama, dia akan lanjut ke level berikutnya.

    Trims ya

  28. Andini Says:
    January 20th, 2013 at 17:57

    hatur thank you buat semua tutorialnya ..
    sangat membantu sekali untuk tugas saya :D

  29. Irman Says:
    February 15th, 2013 at 06:53

    mntapp..

  30. hario Says:
    March 28th, 2013 at 03:14

    bg admin, mau tanya nih
    biasanya kan kalo mau menggerakan objek di flash masih menggunakan tombol keyboard up, down, left and right.
    nah, itu kalo d jalankan d layar touchscren kan g bs gerak bg admin.
    nah, pertanyaan saya bisa g kode2 script untuk menggerakan sebuah objek yg menggunakan tombol keyboard diganti dengan tombol yg dibuat sndiri di flash,?
    tolong bantuannya bg admin, berikan contohnya
    ^^

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.