Tutorial Flash Jigsaw

0 komentar

Jigsaw

 

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

0 komentar:

Langganan: Postingan (Atom)