15
Mar

Drag & Drop Puzzle

Written by admin


Drag & drop puzzle adalah jenis puzzle dimana ada beberapa pecahan/bagian gambar yang dapat didrag kemudian anda dapat melepaskan drag tersebut ke tempat yang sudah disediakan. Contoh game yang menggunakan drag & drop misalnya Jigsaw Puzzle ataupun dari game yang kami buat yaitu Sphere Puzzle :D . Drag & drop puzzle ini juga cocok bagi yang ingin membuat game interaktif. Berikut ini adalah tutorial bentuk dasarnya :

1. Buatlah sebuah objek seperti gambar di bawah ini :

kepala

Gambar objek

2. Seleksi objek tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan kepala sebagai Name dan Movie clip sebagai Type lalu tekan OK.

3. Seleksi movie clip tadi dan tekan Ctrl+F3. Pada panel properties yang muncul, berikan lingkaran sebagai Instance name.

4. Tekan Ctrl+L untuk membuka panel Libary. Drag movie clip kepala ke stage.

5. Seleksi movie clip yang baru saja di drag tadi dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran_target sebagai Instance Name dan ubah Color menjadi Alpha 10%.

6. Letakan movie clip lingkaran di sebelah kiri dan movie clip lingkaran_target di sebelah kanan.

7. Klik frame 1 dan tekan F9. Pada kotak 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
35
36
37
38
//membuat variable xawal dengan nilai koordinat x movie clip lingkaran pertama kali
xawal = lingkaran._x;
//membuat variable yawal dengan nilai koordinat y movie clip lingkaran pertama kali
yawal = lingkaran._y;
//ketika movie clip lingkaran ditekan
lingkaran.onPress = function() {
	//movie clip ini dapat didrag
	this.startDrag();
	//movie clip ini berada di posisi paling atas
	this.swapDepths(1);
};
//ketika tekanan pada movie clip lingkaran dilepaskan
lingkaran.onRelease = function() {
	//movie clip ini tidak dapat didrag
	this.stopDrag();
	//jika posisi movie clip lingkaran berada di sekitar movie clip lingkaran_target
	if (eval(this._droptarget) == lingkaran_target) {
		//posisi x movie clip ini sama dengan posisi x movie clip lingkaran_target
		this._x = _root.lingkaran_target._x;
		//posisi y movie clip ini sama dengan posisi y movie clip lingkaran_target
		this._y = _root.lingkaran_target._y;
	//jika tidak
	} else {
		//posisi x movie clip ini sama dengan nilai variable xawal
		this._x = xawal;
		//posisi y movie clip ini sama dengan nilai variable yawal
		this._y = yawal;
	}
};
//ketika tekanan pada movie clip dilepaskan dan kursor mouse tidak berada di movie clip lingkaran
lingkaran.onReleaseOutside = function() {
	//movie clip ini tidak dapat didrag
	this.stopDrag();
	//posisi x movie clip ini sama dengan nilai variable xawal
	this._x = xawal;
	//posisi y movie clip ini sama dengan nilai variable yawal
	this._y = yawal;
};

8. Sebagai tamabahan agar terlihat lebih jelas. Buatlah 2 buah static text masing-masing diberi tulisan objek dan target. Tempatkan static text bertuliskan objek di atas movie clip lingkaran dan static text bertuliskan target di atas movie clip lingkaran_target.

9. Tekan Ctrl+Enter untuk melihat hasilnya.

Drag movie clip yang berada di bawah tulisan objek ke movie clip di bawah tulisan target

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

35 Responses to “Drag & Drop Puzzle”

  1. Chan Says:

    Wah menarik nih :lol: ,
    tapi kalau gambarnya diganti kabel dan salah satu ujung kabel di Drag&Drop, dan ujung satunya tidak ikut keDrag dan kabel tidak putus gimana caranya ?
    Sebelumnya maaf kata2nya ribet :oops:

  2. admin Says:

    Apakah seperti ini : http://warungflash.com/2009/03/garis-yang-mengikuti-kotak/

  3. Chan Says:

    Mas mau tanya tentang drag drop puzle, jika setelah selesai drop maka muncul movie baru caranya gimana 8->

  4. admin Says:

    Movie baru ini maksudnya seperti apa? Bisa lebih diperjelas ;;)

  5. Chan Says:

    Maksudnya terdapat 2 file,misal drag n drop dan file.swf,setelah posisi drop akan memanggil file.swf, setelah file.swf selesai berjalan kembali lagi ke drag n drop tetapi dlm posisi drop di lingkaran target. :(
    Wah, maaf ribet yang nulis juga bingung mau jelasin ~x(

  6. admin Says:

    Movienya ini isinya apa dan digunakan untuk apa ya? Biar bikinnya agak mudah ;)

  7. chan Says:

    misalnya saja :-$ RAM di drag dimasukkan ke Slot RAM(file drag n drop), setelah masuk ke slot muncul animasi ram masuk ke slot kemudian animasi itu selesai kembali lagi ke file drag n drop #-o Di file drag n drop posisi ram sudah ada ke slot tidak kembali ke posisi awal sebelum di drag :-*
    Sekali lagi maaf ya mas o:-) 8-}

  8. admin Says:

    OK. Kami coba buatkan dulu ;)

  9. admin Says:

    @chan : tutorialnya dapat dilihat di sini : http://warungflash.com/2009/04/drag-drop-puzzle-2/

  10. pum Says:

    Mas, tanya yah. Bisa nggak ya objek didrop ke objek yang lainnya yang pintunya terbuka, terus kalau pintu objek kedua ditutup nanti objek pertama ikut masuk juga?
    makasih :peace:

  11. admin Says:

    Bisa lebih diperjelas lagi pertanyaannya

  12. andre Says:

    ada Sourcenya (Sphere Puzzle http://www.newgrounds.com/portal/view/451414) ngak :hope: ??

    boleh juga tu buat TA,,, kan ada unsur educatoinnya jg…

    kirim ke anorganik_alpokat@yahoo.com..

  13. admin Says:

    Wah maaf :respect: Sphere Puzzle itu game yang sudah kami jual keluar negeri jadi sourcenya tidak bisa disebarluaskan.

  14. andre Says:

    owh,,, yaudah kk,, ngk pa2 koq… sekarang saya ngambil judul TA ” Rancang bangun Game Pesawat Menggunakan Macromedia Flash MX” =D>

    bisa bantu2 ngk ??? tentang Kekurangan Flash MX,,, dan Kekurangan Flash MX,, Juga Komponen Flash Mx tu apa aj sih,,,???? :peace:

    kelebihan nya juga,,,, :D

  15. admin Says:

    Kelebihannya :
    1. Softwarenya lebih cepat loadingnya dibandingkan dengan flash versi yang lebih baru.
    2. Dibandingkan dengan flash versi yang lebih lama, flash mx memiliki fitur baru yaitu : video codec (Sorenson Spark), Unicode, v1 UI Components, compression, ActionScript vector drawing API

    Kekurangnnya :
    1. Masih menggunakan actionscript 1
    2. Masih menggunakan flash player 6

    Waduh komponennya lupa tuh :p
    Coba buka flash mx kemudian buat sebuah flash dokumen. Jika sudah tekan Ctrl+F7 maka panel Components akan muncul.

  16. game maker Says:

    kalo bikin game kayak pizza frenzy tu caraNya gmna yah???
    :-o

  17. beni Says:

    Mas bisa bantu,kalo bikin highscore n banyak level gitu gimana yak? 8-}

  18. Widia Says:

    ada game Yang Laen Gagh??????? :hope:

  19. admin Says:

    Coba buka link berikut :
    http://warungflash.com/category/flash-game-komplit/
    http://warungflash.com/category/flash-kerangka-game/

  20. e12vin Says:

    sya mau tanya ni…
    gmna si cra’y menbuat high score pada game puzzel??
    thx ya..

  21. admin Says:

    Silahkan lihat di sini : http://warungflash.com/2009/06/sort-score/

  22. jafar Says:

    bang….
    kalo bisa tutorialnya pake video

  23. ndoelz Says:

    admin klo targetnya banyak gmn???

  24. Nico Says:

    maav,saya mau tanya Qlo cara input nama di highscore itu kn pake data base ya,cara ny gmn ya,bisa beritahu saya ga…??? TerimaKasih

  25. yogi Says:

    mohn bantuan kl drop dan drag sudah cocok lalu dapet score ada ga script dan contohnya?jadi ada tombol submit untuk cek cocok apa tidak. mksh

  26. yusuf Says:

    bagaimana caranya kalo setelah berhasil di gabungin ada tulisan berhasil, mohon balasannya :hope:

  27. qurotun Says:

    kalo mau bikin drag n drop untuk bikin animasi tata nama senyawa kimia ky alkana, dll.. biar anak2 bisa latihan sendiri gmn caranya ya?

    makasih banget artikelnya… =DV =DV =DV

  28. eka Says:

    mas, mau tanya…
    mau masukkin sound ke target dalam game drag n drop”na gamana cara”na ??
    trimakasih =DV

  29. Mahdizzo Says:

    om, kalo saat objek “A” di drag trus objek “B” nya ngikut gimana ya?
    mohon bantuanya om admin

  30. jo'i Says:

    mas mohon tutorialnya.sy ingin membuat sliding puzzle spt ini:ada 3bidang di stage, utk keping puzle, untuk menempelkan puzle&unuk keterangan.kalau dua atau beberapa keping puzzle dipasang ke bidang tempelan puzzle maka muncul keterangan di bidang keterangan.
    mohon tutorialnya pliiiiiiisss…. trimakasih sebelumnya :respect:

  31. adi Says:

    mas, mau tanya…
    mau masukkin sound ke target dalam game drag n drop”na gamana cara”na ??
    trimakasih =DV

  32. elfishendri Says:

    mas tolong buatkan script tombol reset untuk file ini mas , insyaAllah nanti saya kirim uang lelah buat mas. terima kasih semoga mas sukses dan memperoleh pahala yang setimpal. amin

    filenya disini mas http://www.mediafire.com/download/8pjyyl68p606c8c/tombolreset.fla

  33. ardan Says:

    mas maunanya kalo misalkan pas object menyentuh target langsung pindah scene atau frame gimana cara nya ya? :((

  34. Oktavian Says:

    mau tanya, aku kan lagi buat game puzzle belajar huruf. jadi sistemnya pakai drag and drop. jadi contohnya huruf a didrag ke tempat yang sudah disediakan. Nah aku udah bikin sampai huruf z, dan ketika dimainkan dan dicek bisa masuk ke frame selanjutnya yang tulisannya “berhasil” tapi kenapa huruf z yang ada di frame game itu terus muncul sampai akhir ya? mohon bantuannya…

  35. rinaldi Says:

    mas mau tanya, kalo udah di drag ke tempatnya langsung muncul tanda benar gmna ya caranya??

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.