Sunday, November 30

[Tutorial] Membuat Game Puzzle Sederhana dengan ActionScript 3.0 Cara Lama


Hai guys gue mau bagiin tutorial tentang gimana bikin game pake flash dengan actionscript 3.0 dan juga pake cara lama. Kenapa gue bilang pake' cara lama? Karena ini bikinnya manual guys. Manual dalam hal motong gambar - gambar nya. Kemaren aku nemu sih situs buat memotong gambar - gambarnya jadi beberapa bagian, tapi cuman sampe' bagian motongnya aja guys. Dan tutorial ini sebenarnya aku kembangin dari tutorial drag and drop dari situs www.bengkelflash.com. Yup segitu dulu ocehan dari gue.


Nah apa aja nih yang kita butuhin :
  1. Adobe flash nya ya guys
  2. PhotoScape (recommend) --> photoscape ini nantinya digunakanuntuk memotong gambar" nya guys
  3. Dan yang pasti sediain gambar apa aja yang mau kita buat jadi puzzle ya (foto sendiri juga boleh :p)

Sekarang kita potong gambarnya ya pake' PhotoScape caranya di bawah ini guys :
  1. Buka PhotoScapenya lalu pilih Split 
  2. Pilih Add buat milih gambar mana yang mau dipotong
  3. Lalu atur berapa banyak potong gambar sesuai dengan keinginan kalian ya guys. Setelah itu tinggal pilih Split.
  4. Jangan lupa disimpannya di tempat yang mudah kita cari  ya. 


Motong gambar beres. Next to Adobe Flash!
  1. Pertama bikin file baru yang actionscript 3.0 ya. Resolusinya bebas asalkan jangan terlalu kecil ya.
  2. Buat 2 layer yang satu di kasih nama puzzle dan yang lain dikasih nama action.
  3. Kita buat halaman utama alias menunya ya guys. Karea ini game puzzle yang sederhana jadi gak ada levelnya guys (alasan padahal belum bisa bikin level). Desainnya sesuai kreasi masing - masing. Sekedar buat contoh : 
  4. Textnya pakai yang static aja ya. Gambar - gambar yang ada di menu ini kita buat jadi button ya. Beri nama 'puzzle1', 'puzzle2' dan 'puzzle3'. Nama instance name nya bisa disamain kaya' waktu ngasih nama di awal.
  5. Block/Seleksi frame 2 di layer 'puzzle' dan 'action' lalu tekan f7 untuk membuat blank keyframe.
  6. Lalu masukin gambar yang udah kita potong sebelumnya dan untuk mempermudah dalam pemberian nama kita susun dulu potongan - potogan gambar hingga menjdi satu gamar yang utuh. Setelah itu masing - masing potongan gambar kita ibaratkan urutan angka, karena disini potongan gambar milik gue yaitu 5 x 5 alias 25 maka angkanya mulai 1-25. Nah pilih potongan gambar yang berada di ujung kiri atas dan rubah menjadi Movie Clip dan beri nama p1_1 (pemberian nama sebenarnya bebas asal kalian nggak lupa guys). Begitupun sampai potongan gambar ke 25 alias yang terakhir dan jangan lupa beri nama instance namenya ya (namanya boleh sama dengan waktu pemberian nama Movie Clip).
  7. Buat sebuah persegi dengan menekan 'r' pada keyboard. Ukuran perseginya harus sesuai dengan ukuran tiap - tiap potongan gambar. Dan kemudian rupah persegi - persegi tersebut menjadi Movie Clip dengan nama yang sama seperti nama potongan gambar yang dijadikan Movie Clip sebelumnya guys tapi, tambahkan kata 'Target' dibagian belakangnya. Dan jangan lupa pemberian instance namenya.
  8. Kemudian atur acak potongan - potongan gambarnya. Dan juga buat button 'menu' untuk kembali menu utama beri saja nama 'menu1'. Lakukan hal yang sama untuk puzzle2 dan puzzle3. Tapi ingat guys pemberian nama pada puzzle 1 dengan yang lain jangan sama ya.

  9. Sekarang pilih frame 1 pada layer 'action' dan kemudian tekan 'f9' untuk mesuk ke action.
  10. Pilih frame 2 pada layer 'puzzle' dan mesuk ke action. 
  11. Dan untuk 'puzzle1' dan 'puzzle2' bisa menggunakan koding untuk 'puzzle1' namun disesuaikan ya guys.


Akhirnya selesai deh ^^. Sampai jumpa di post berikutnya ...
Kalian bisa coba file puzzle swf nya disini Download SWF

[Update] Bisa dicoba game puzzle versi 2 nya di [Tutorial] Game Puzzle Versi II dengan Actionscript 3.0

23 comments:

  1. Replies
    1. Nggak bisa jalan? atau nggak mau di masukkin ke kotak?

      Delete
    2. sama gan kok nggk bisa ya..

      Delete
    3. di koding import ada yang salah gan.. gimana tuh

      Delete
    4. Gue periksa ulang ya. tapi boleh di coba projectnya. gue udah kasih linknya. mungkin bisa di periksa disana kodingnya.

      Delete
  2. gan ko yg saya, dragObjek nya salah terus ya. Itu kenapa?

    ReplyDelete
    Replies
    1. karena untuk koding game ini mengharuskan potongan gambar harus masuk tepat ke kotak seharusnya dan jika bukan letaknya dia gk bakalan mau. coba download projectnya di atas mungkin bisa membantu. gue juga bakalan ngecek lagi kesalahan yang lain juga. :)

      Delete
  3. gan ko yg saya, dragObjek nya salah terus ya. Itu kenapa?

    ReplyDelete
    Replies
    1. karena untuk koding game ini mengharuskan potongan gambar harus masuk tepat ke kotak seharusnya dan jika bukan letaknya dia gk bakalan mau. coba download projectnya di atas mungkin bisa membantu. gue juga bakalan ngecek lagi kesalahan yang lain juga. :)

      Delete
  4. mbk untuk membuat notivikasi kalau semua puzzle sudah terpasang gimana ya

    ReplyDelete
    Replies
    1. secara logikanya sih gini, kita hanya perlu membuat beberapa variable yang berbentuk boolean dengan status awal = false dan sebuah function dimana nanti dia akan melakukan pengecekan apakah semua potongan puzzle sudah terpasang atau belum. Tapi, jumlah variable yang di perlukan adalah sebanyak jumlah potongan gambar.

      atau, menggunakan perhitungan. jadi setiap satu potong gambar yang disusun akan di hitung dan hitungannya ini di simpan dalam sebuah variable yanng berbentuk integer. jadi nilai awal variable ini sesuai jumlah potongan gambar. dan nantinya jika sebuah gambar telah disusun buat agar variable perhitungan ini berkurang -1. nah tinggal buat if else nya, jika si variable perhitungannya udah 0 maka buat notifnya muncul.

      ini masih teorinya sih, aku blum sempat coba. mungkin nanti setelah aku cba bakalan aku taruh di post berikutnya. Terima kasih udah sempet mampir.

      Delete
  5. mbk untuk membuat notivikasi kalau semua puzzle sudah terpasang gimana ya

    ReplyDelete
  6. gimana mbk sudah bisa apa belum

    ReplyDelete
  7. permisii,,
    mau tanya itu projek flash ny Adobe Flash CS brpa ya, kok saya buka di Adobe Flash CS5 tidak bisa jalan

    ReplyDelete
  8. mas, ada script buat nambahin skor nya ?

    ReplyDelete
  9. gak bisa dimasukin kekotak mbak gmn caranya biar bisa ya???

    ReplyDelete
  10. gan gimana caranya ketika berhasil menyusun gmbar mendapatkn hasilatau informasi dari gambar tersebut

    ReplyDelete
  11. kasih tau jawabnya di mail ya gan ty @thoriqfathon36@gmail.com

    ReplyDelete
  12. pada coding
    Pilih frame 2 pada layer 'puzzle' dan mesuk ke action.
    function 15 16 17 eror pada saat check coding

    ReplyDelete
    Replies
    1. Untuk nama variable yang digunakan apa sudah sama? ypos dan xpos nya?

      Delete
  13. Untuk menambahkan susunan puzzle dg gambar berbeda scriptnya tetap sama?

    ReplyDelete
    Replies
    1. sama aja. jangan lupa di kasih instance name nya ya sama di tambah juga di dragobjectnya.

      Delete