02
Jul

Puzzle Slide

Written by admin


Tutorial ini merupakan pengembangan dari Drag & Drop Puzzle. Biasanya pecahan-pecahan puzzle letaknya di acak tapi kali ini kita akan membuat pecaha-pecahan puzzle berada di dalam sebuah slideshow.

1. Buatlah sebuah flash document.

2. Tekan Ctrl+R. Pada panel yang muncul cari gambar yang diinginkan lalu tekan ok.

3. Setelah gambar berada di stage, seleksi gambar tersebut dan tekan Ctrl+B.

4. Setelah gambar menjadi berbentuk shape bagilah gambar menjadi 4 bagian dan pisah-pisahkan.

5. Seleksi bagian 1 dan tekan F8. Pada panel yang muncul masukkan part1 sebagai name dan movie clip sebagai type serta titik registrationnya berada di tengah-tengah lalu tekan ok.

6. Seleksi bagian 2 dan tekan F8. Pada panel yang muncul masukkan part2 sebagai name dan movie clip sebagai type serta titik registrationnya berada di tengah-tengah lalu tekan ok.

7. Seleksi bagian 3 dan tekan F8. Pada panel yang muncul masukkan part3 sebagai name dan movie clip sebagai type serta titik registrationnya berada di tengah-tengah lalu tekan ok.

8. Seleksi bagian 4 dan tekan F8. Pada panel yang muncul masukkan part4 sebagai name dan movie clip sebagai type serta titik registrationnya berada di tengah-tengah lalu tekan ok.

9. Seleksi movie clip part1 di stage dan tekan Ctrl+F3. pada panel properties yang muncul masukkan target1 sebagai instance name dan ubah Colornya menjadi Alpha 40%

10. Seleksi movie clip part2 di  stage dan pada panel properties yang ada masukkan target2 sebagai instance name dan ubah Colornya menjadi Alpha 40%

11. Seleksi movie clip part3 di  stage dan pada panel properties yang ada masukkan target3 sebagai instance name dan ubah Colornya menjadi Alpha 40%

12. Seleksi movie clip part3 di  stage dan pada panel properties yang ada masukkan target3 sebagai instance name dan ubah Colornya menjadi Alpha 40%

14. Atur kembali letak-letak movie clip part1 sampai part4 sehingga membentuk gambar sebelum dipecah.

wf-alpha

15. Buatlah sebuah persegi dengan tanda silang di dalamnya seperti gambar di bawah ini. Seleksi persegi tersebut dan tekan F8. Pada panel yang muncul masukkan slideshow sebagai name dan movie clip sebagai type serta titik registration yang berada di tengah-tengah lalu tekan ok.

slidsho

16. Seleksi movie clip slideshow di  stage dan pada panel properties masukkan slideshow sebagai instance name.

17. Buatlah sebuah objek seperti gambar di bawah ini. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan ganti_btn sebagai name dan button sebagai type serta titik registration yang berada di tengah-tengah lalu tekan ok.

panah

18. Seleksi ganti_btn dan tekan Ctrl+D sekali. Seleksi hasil duplikasi lalu pilih Modify>Transform>Flip Horizontal

19. Seleksi ganti_btn yang ujungnya menghadap ke kanan dan pada panel properties masukkan selanjutnya sebagai instance name.

20. Seleksi ganti_btn yang ujungnya menghadap ke kiri dan pada panel properties masukkan sebelumnya sebagai instance name.

21. Buatlah sebuah dynamic text di  stage, seleksi dynamic text tersebut dan pada panel proprties masukkan partTxt sebagai Var.

22. Atur letak seluruh objek yang di buat tadi seperti gambar di bawah ini :

letak-puzzlide

23. Buka panel library dengan menekan Ctrl+L. Klik kanan movie clip part1 di library dan pilih Linkage. Pada panel yang muncul berikan tanda centang/contreng pada Export for ActionScript dan masukkan part1 sebagai Idntifier lalu tekan ok.

24. Klik kanan movie clip part2 di library dan pilih Linkage. Pada panel yang muncul berikan tanda centang/contreng pada Export for ActionScript dan masukkan part2 sebagai Idntifier lalu tekan ok.

25. Klik kanan movie clip part3 di library dan pilih Linkage. Pada panel yang muncul berikan tanda centang/contreng pada Export for ActionScript dan masukkan part3 sebagai Idntifier lalu tekan ok.

26. Klik kanan movie clip part4 di library dan pilih Linkage. Pada panel yang muncul berikan tanda centang/contreng pada Export for ActionScript dan masukkan part4 sebagai Idntifier lalu tekan ok.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

partTampil = 1;
Tampil();
for (i=1; i<=4; i++) {
	_root["terpasang"+i] = false;
}
selanjutnya.onRelease = function() {
	if (partTampil<=3) {
		partTampil += 1;
		Tampil();
	}
};
sebelumnya.onRelease = function() {
	if (partTampil>1) {
		partTampil -= 1;
		Tampil();
	}
};
function Tampil() {
	for (i=1; i<=4; i++) {
		_root["part"+i].removeMovieClip();
	}
	if (partTampil == 1 && !terpasang1) {
		part1 = attachMovie("part1", "part1", _root.getNextHighestDepth(), {_x:slideshow._x, _y:slideshow._y});
		part1.xawal = part1._x;
		part1.yawal = part1._y;
	}
	part1.onPress = function() {
		this.startDrag();
		this.swapDepths(1);
	};
	part1.onRelease = function() {
		this.stopDrag();
		if (eval(this._droptarget) == target1) {
			this._visible = false;
			terpasang1 = true;
			target1._alpha = 100;
		} else {
			this._x = this.xawal;
			this._y = this.yawal;
		}
	};
	if (partTampil == 2 && !terpasang2) {
		part2 = attachMovie("part2", "part2", _root.getNextHighestDepth(), {_x:slideshow._x, _y:slideshow._y});
		part2.xawal = part2._x;
		part2.yawal = part2._y;
	}
	part2.onPress = function() {
		this.startDrag();
		this.swapDepths(1);
	};
	part2.onRelease = function() {
		this.stopDrag();
		if (eval(this._droptarget) == target2) {
			this._visible = false;
			terpasang2 = true;
			target2._alpha = 100;
		} else {
			this._x = this.xawal;
			this._y = this.yawal;
		}
	};
	if (partTampil == 3 && !terpasang3) {
		part3 = attachMovie("part3", "part3", _root.getNextHighestDepth(), {_x:slideshow._x, _y:slideshow._y});
		part3.xawal = part3._x;
		part3.yawal = part3._y;
	}
	part3.onPress = function() {
		this.startDrag();
		this.swapDepths(1);
	};
	part3.onRelease = function() {
		this.stopDrag();
		if (eval(this._droptarget) == target3) {
			this._visible = false;
			terpasang3 = true;
			target3._alpha = 100;
		} else {
			this._x = this.xawal;
			this._y = this.yawal;
		}
	};
	if (partTampil == 4 && !terpasang4) {
		part4 = attachMovie("part4", "part4", _root.getNextHighestDepth(), {_x:slideshow._x, _y:slideshow._y});
		part4.xawal = part4._x;
		part4.yawal = part4._y;
	}
	part4.onPress = function() {
		this.startDrag();
		this.swapDepths(1);
	};
	part4.onRelease = function() {
		this.stopDrag();
		if (eval(this._droptarget) == target4) {
			this._visible = false;
			terpasang4 = true;
			target4._alpha = 100;
		} else {
			this._x = this.xawal;
			this._y = this.yawal;
		}
	};
}
onEnterFrame = function () {
	partTxt = "Bagian "+partTampil;
};

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

24 Responses to “Puzzle Slide”

  1. edri Says:
    July 2nd, 2009 at 14:00

    pak suhu… edri mau tanya lagi nehh… :hope:

    gimana yah pak suhu…
    script untuk berganti ganti layer aktif sementara layer yang lain nggak aktif en nggak nampak

    misalnya ada layer 1 sampe layer 5, kelima layer tersebut di beri motion tween. dan setiap animasi pada kelima layer itu di mulai dari frame 2 dan berhenti di frame 15. masing 2x animasi nya berbeda.
    nah jadi pak suhu…

    ketika ada sebuah tombol di frame 1 layer 6…ketika di klik maka layer yang no 1 yang berjalan sementara layer yang lain nggak muncul.

    … tapi ini nggak pake movieclip pak suhu…
    gimana yah pak suhu .. edri dah strees neh buatnya.. ~x(

    please yah.. entar edri dimarahin boz lagi… :hope: entar sajen nya edri tambah deh.. :,:

  2. admin Says:
    July 2nd, 2009 at 16:40

    Nggak bisa :|/: . Setahu kami Layer nggak bisa dimatikan. Kalau kasusnya seperti itu kami lebih menyarankan memakai movie clip.

    Alternatif lainya, karena anda menggunakan motion tween berarti menggunakan movie clip kan? Atau hanya graphic? Jika menggunakan movie clip saat motion tween maka gunakan script _alpha untuk mengakalinya.

  3. Anhar Tasman Says:
    July 4th, 2009 at 04:24

    Wahahahahahhaaa lucu sekali artikelnya!!! :))

    Keren!!!

  4. edri Says:
    July 4th, 2009 at 09:39

    @anhar tasman… jangan begitu lah bang anhar kalo bilang keren jangan di tertawakan… :|/:

    … yah.. maklum lah bang anhar saya ini baru kenal internet en pemograman. maka pak suhu pun ngasih nya yang biasa2x aja untuk saya..

    walaupun agak susah… #:-S
    saya biasanya selalu belajar sendiri semuanya..

    tapi sekarang saya udah ada yang ngajarin action script flash… saya senang banget bang anhar… ternyata masih banyak orang yang bersedia mendengar segala keluhan kita en ngasih solusinya tanpa kita harus mengeluarkan uang sepeser pun… salut saya sama pak suhu… =D> en saya sangat berterima kasih sekali… :respect:

    mudah-mudahan situs ini tetap terus ada, makin baik en makin berkembang… :)

  5. edri Says:
    July 4th, 2009 at 10:11

    pak suhu… saya mau tanya lagi… he hehe..
    boleh yah pak suhu…

    saya bingung .. gimana yah program nulis data txt dari flash trus variable yang terdapat di file txt tadi di ambil oleh movie clip atau file lain… lalu di tampilkan…

    misal yang sederhana sebuah tombol di klik trus nilainya diisi satu di file test.txt, trus nilai yang tadi di ambil lalu di tampilkan…
    gimana yah pak suhu… kalo gitu .. bisa nggak yah..? :hope:

  6. admin Says:
    July 4th, 2009 at 13:36

    Mungkin besok senin kami buatkan tutorial dasar mengambil data dari format .txt ;)

  7. Tresna Says:
    July 11th, 2009 at 21:49

    bos, pada langkah awal, motong gambar jadi empat gimana caranya?
    ga bisa sama ukurannya? :-o

  8. admin Says:
    July 16th, 2009 at 04:24

    Pertama gambarnya diimport (Ctrl+R) dulu ke stage. Lalu buat tanda + dengan menggunakan line tool dan tempatkan di tengah-tengah gambar. Untuk mengatur posisinya coba gunakan align. Kalau sudah klik dan drag gambar yang sudah terpisah oleh garis lalu ubah menjadi movie clip (F8). Jadi deh :peace:

  9. rvien Says:
    July 28th, 2009 at 15:56

    om admin tanya donk.!! boleh ya.!!!??? :hope:

    klo bikin game puzzle.nya dibuat seperti model puzzle slide pada umumnya (ada 9 atau 4 kotak, dan 1 kotak tidak terisi/kosong untuk dapat memindahkan bagian2 dari puzzle). Setelah itu apabila susunan gambarnya sesuai dengan gambar yg diinginkan maka nilai=100 dan permainan berakhir.

    Oiya Tetapi di mainkannya/menggesernya menggunakan keyboard(arah panah yg ada pada keyboard).

    bisa ga ya om .???? 8-> :idontknow: Saya mohon bantuannya.!! :hope: :hope: :hope: :respect:

    Terima Kasih. :) :peace:

  10. Anhar Tasman Says:
    September 25th, 2009 at 10:15

    @ edri

    Waduh kayaknya saya kena marah nih sama om edri

    Maksud saya gamenya lucu dan artikelnya keren

    Semoga warung flash tambah sukses!!!

    Amin….

  11. Dhek DhyCha Says:
    January 19th, 2010 at 08:08

    Kueereeennn Abieezz

  12. bayu sukma Says:
    May 12th, 2010 at 09:41

    GAMENYA KEREN2 COCOK UNTUK DI COBA N EDUKATIF.

  13. Edy Bardat Says:
    May 25th, 2010 at 07:01

    Toturnya kereeeeeen abizzzzzzzzz

  14. emboy Says:
    June 17th, 2010 at 23:37

    om saya pemula, Boleh nanya ya om.

    kalau gambarnya dipotong dulu pakai photoshop gimana om supaya potongannya bisa dibentuk.
    model puzzle slide pada umumnya kita menyusun potong-potongan yang telah diacak menjadi utuh kembali tapi potongannya kelihatan semua,

    mohon pencerahannya

    terima kasih

  15. DADAN Says:
    September 4th, 2010 at 11:12

    nuhun. ma kasih pisan. atas bantuannya. suaangat bermanfaat sekali!… punya gak artikel lengkap yang telah dibukukan, Raden Suhu?
    sakali lagi makasih buangent. Saya masih harus belajar dari anda.

  16. wahyu Says:
    December 15th, 2010 at 08:23

    jika dalam slideshownya diberikn kondisi gimna caranya?
    jika slideshow kosong maka goto ke frame lain…

  17. devy Says:
    March 29th, 2011 at 21:21

    mas misal mau nanya” gitu gmn? /??
    ak lg ngerjain game utk tugas akhir nihh..
    tapi ak msh baru bgt dgn flash :respect:
    gmn doooooonk??? /berkaca
    /stress

  18. seal Says:
    April 5th, 2011 at 17:57

    @devy

    game seperti apa dev?
    mungkin bisa saya bantu

  19. arie Says:
    May 8th, 2011 at 20:53

    nanya bisa g dibuat button untuk menambahkan gambar yg di potong kita masukan sendiri… ;)) ;))

  20. dewi Says:
    June 29th, 2011 at 12:17

    admin..need u help.. :((
    aq dah make puzzle slide ini buat program aq..tp kok pas dijalanin klo lum didrag gambarnya dan aq mw ke menu lain kok gambar slidenya masih muncul y…
    ada solusinya ga admin..
    tolong bgd yaa…

  21. chusny Says:
    July 13th, 2011 at 04:33

    nanya om admin
    kalo ngasih sound pas bener n salah ndek mana bwt nambahi scriptnya??
    mkc :hope: :hope: :hope: :hope:

  22. bimbim Says:
    August 5th, 2011 at 16:42

    matur tengkyu om admin…saya bisa belajar dari sini…GBU

  23. eross Says:
    August 8th, 2011 at 10:35

    mau nanya cara biar random keluarnya bisa ga om admin??
    saya udah utak atik biar setiap kali kita mainin posisi keluarnya beda2.. ada yg bs kasih masukan ga yah ??? NEED HELPPP BGD NIH……. ane udah /pusing: /pusing: /pusing:

  24. dina Says:
    February 2nd, 2012 at 16:23

    keyeeeeen /berkaca /berkaca /berkaca /berkaca /berkaca /berkaca /berkaca /berkaca /berkaca /berkaca

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.