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

Posted in Flash - Kerangka Game

24 Responses to “Drag & Drop Puzzle”

  1. Chan Says:
    March 23rd, 2009 at 14:08

    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:
    March 24th, 2009 at 06:05

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

  3. Chan Says:
    April 18th, 2009 at 17:57

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

  4. admin Says:
    April 18th, 2009 at 18:03

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

  5. Chan Says:
    April 19th, 2009 at 09:30

    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:
    April 19th, 2009 at 16:30

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

  7. chan Says:
    April 20th, 2009 at 11:59

    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:
    April 21st, 2009 at 16:22

    OK. Kami coba buatkan dulu ;)

  9. admin Says:
    April 23rd, 2009 at 06:19

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

  10. pum Says:
    May 16th, 2009 at 09:57

    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:
    May 19th, 2009 at 15:24

    Bisa lebih diperjelas lagi pertanyaannya

  12. andre Says:
    July 10th, 2009 at 15:18

    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:
    July 10th, 2009 at 15:37

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

  14. andre Says:
    July 13th, 2009 at 12:05

    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:
    July 16th, 2009 at 06:26

    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:
    October 15th, 2009 at 16:12

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

  17. beni Says:
    October 28th, 2009 at 21:56

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

  18. Widia Says:
    October 30th, 2009 at 07:49

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

  19. admin Says:
    October 30th, 2009 at 12:07

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

  20. e12vin Says:
    July 26th, 2010 at 18:29

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

  21. admin Says:
    August 9th, 2010 at 07:58

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

  22. jafar Says:
    January 21st, 2011 at 22:06

    bang….
    kalo bisa tutorialnya pake video

  23. ndoelz Says:
    July 27th, 2011 at 11:45

    admin klo targetnya banyak gmn???

  24. Nico Says:
    October 28th, 2011 at 11:35

    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

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.