TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH

MEMBUAT GAME PUZZLE DENGAN ADOBE FLASH CS5 DAN MACROMEDIA FLASH 8



Assalamualaikum wr,wb

Selamat datang di BLOG ORANG IT, setelah melewati masa-masa UAS dengan tuntutan project dan sidang yang mendebarkan Alhamdulillah semua berjalan lancar walau sedikit berliku.  Masih ingat Postingan saya yang sebelumnya  CARA MEMBUAT CRUD DENGAN CAPCHA DALAM SATU HALAMAN PAGE.

Pada kesempatan kali ini saya akan share Tutorial Membuat Game Puzzle Harta Karun dengan Adobe Flash CS5 maupun Macromedia Flash 8 , hanya sekedar untuk merefresh ingatan saya saja. Menurut saya tidak ada bedanya belajar animasi 2D dengan Adobe Flash CS5 maupun Macromedia Flash 8 karena letak perbedaanya hanyalah pada letak menu saja dan saya rekomendasikan untuk menggunakan Adobe Flash CS5 karena itu yang saya pakai, untuk pengguna macromedia flash tenang saja karena hasil projectnya  nanti tetap bisa dibuka di Adobe Flash .

Bahan yang dibutuhkan :

      1.      Gambar yang akan di jadikan Puzzle, bisa di potong  menggunakan Software Adobe Photoshop maupun langsung didalam Software Flash
      2.      Download Adobe Flash CS5  (untuk serialnya cari di google) atau Download Macromedia Flash 8 (part1) , Download Macromedia Flash 8 (part2)
      3.      Beberapa makanan ringan dan minum tentunya

Tutorial singkat membuat Game Flash dengan Adobe Flash CS 5 , sama saja untuk Macromedia Flash 8 :

     1.      Masukkan gambar pilih File - import - import to library ( CTRL + R)
     2.      Masuk Pada Scene 1 , pilih New Layer berinama BackGround , klik kanan pada layer1 – insert key frame (untuk memasukkan BackGround seret saja gambar dari library ke scene1 ) taruh paling bawah . Ada Frame  1 -  4 .Pada Frame 1 merupakan halaman awalkemudian Frame 2 adalah isi dari gamePuzzle, Frame 3 halaman kalah , Frame 4 halaman menang

TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH

     3.      Buat New Layer Beri nama Object , tarik Gambar pada Library kedalam Lembar Scene 1 kemudian klik Gambar lalu pilih menu view - grid – pastikan centang show grid dan pada edit grid isikan 90px 90px ( untuk memudahkan proses pemotongan )selanjutnya pada menu modify – break a part ( CTRL + B ) (Proses Pemotongan Gambar). 

TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH

  

      Setelah grid tampil silahkan potong gambar sesuai ukuran garis kotak menggunakan Mouse, tentukan sendiri ukuranya ya

TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH

      Kita potong menjadi 11 bagian, setiap bagian kita convert dulu kedalam movie clip caranya klik bagian 1 kemudian klik kanan convert to symbol


Lakukan langkah yang sama sampai bagian yang ke 11, kemudian klik bagian 1 kemudian pilih tab properties di sebelah kanan , kalau Macromedia Flash di bawahkemudian beri nama variable satu , dua, tiga dst sampai sebelas

TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH


    4.      Masih ditempat yang sama Copy bagian Puzzle 1-11 tadi dan paste kan disampingnya caranya Shift + Klik bagian 1-11(klik satu-satu) , ingat rubah variable nya menjadi target1, target2 dst sampai target11

TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH

Agar transparent pilih pada tab properties – color alpha – isikan 50%, tahap selanjutnya adalah menginputkan Script
Pada layer Object Frame 3 insert keyframe dan Frame 4 insert keyframe , pada frame 3 beri pesan maaf anda belum berhasil dan frame 4 selamat anda berhasil (Ketikkan pada scenenya)



     5.      Buat Layer baru, berinama Script / Action taruh dibagian atas. Kita potongan puzzle diatas terletak pada layer Object Frame 2 , pada layer Action Frame 2 klik kanan pilih Insert Key Frame kemudian pada titiknya klik kanan lagi pilih Action



Kemudian muncul halaman Coding , lihat gambar dibawah
 
TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH



Tidak usah dipikir susah tinggal copas aja text dibawah
stop();

var nilai = 0;



xawala = a._x; //bagian1

yawala = a._y;

satu.onPress = function () {  //satu nama variable tadi
    this.startDrag (); }

satu.onRelease = function () {

    this.stopDrag ();
    if (this.hitTest (target1)) {
       this._x = _root.target1.x_;
       this._y = _root.target1.y_; // target1 merupakan nama bagian puzzle yang dijadikan –
//-frame/di alphakan tadi
       satu._visible=false;
       target1._alpha=100;
       nilai ++;
       if (nilai == 11) {    //jumlah bagian puzzle
       gotoAndPlay("finish")
}
} else {
   this._x= xawala;
   this._y= yawala;

}
} //end

xawalb = b._x; //bagian2
yawalb = b._y;

dua.onPress = function () {
    this.startDrag ();

}

dua.onRelease = function () {

    this.stopDrag ();
    if (this.hitTest (btarget)) {
       this._x = _root.target2.x_;
       this._y = _root. target2.y_;
dua._visible=false;
       target2._alpha=100;
       nilai ++;
       if (nilai == 11) {
       gotoAndPlay("finish")
}
} else {
   this._x= xawalb;
   this._y= yawalb;

}
}// end dan seterusnya sampai 11 bagian tuh sudah saya kasih keterangan tingan di copas aja

Ingat pada layer Action setiap Frame di kasih Script stop(); // supaya tidak bablas aja , ingat ada 4 frame

Kemudian jalankan CTRL + Enter untuk menjalankan


     6.      Memberikan lagu untuk setiap frame ( Halaman awa l, isi , menang , kalah), Masukkan lagu file – import to library dan browse .mp3, .wav ( format lagu ) , setealh lagu berhasil di import cek library disebelah kanan layar lihat lagunya apakah sudad ada atau belum.
Kalau sudah klik kanan pada lagu pilih properties dan pada identifier nya missal kasih nama awal untuk halaman awal lihat pic :

TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH


buat new layer beri nama lagu dan ini Scrip untuk lagunya , (Frame 1 klik kanan action)

stop();

nilai=0;

lagu=new Sound();                  //nama variable lagu terserah mau diganti

lagu.attachSound("awal");  //nama lagunya tadi

lagu.stop();
lagu.start(0,999);                 //lagu diulang sebanyak 999 kali
lagu.setVolume(120);         // volume 120
  
Selesai silahkan dijalankan Ctrl + Enter  ,
Kalau mau refrensi dari contoh tutorial diatas tinggal download saja ada file mentahnya .fla nya

** Game Puzzle saya yang lainya , Download  Game Puzzle Uang ( upload menyusul )
Tutorial Video YouTube Membuat Game Puzzle Referensi saya



Sekian Tutorial singkat bagaimana membuat Game Puzzle Flash 2D menggunakan MacromediaFlash atau Adobe Flash  CS5 semoga bermanfaat bagi para pengunjung kalau ada pertanyaan atau ingin menambah silahkan koment dibawah sekian dan terimakasih.

Follow Blog Orang IT dan Like FansPage helmykkediri untuk mendapat update terbaru saya dan jangan lupa klik iklan disamping, sekian dan terimakasih

44 Responses to "TUTORIAL LENGKAP MEMBUAT GAME PUZZLE FLASH"

  1. Nice tutot gan, boleh dicoba...

    BalasHapus
  2. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  3. kalo di buat versi android nya gimana gan ?

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. Perlu dicoba sob tunggu ya karya saya insya alloh saya jg akan buat file flash :D

    BalasHapus
  7. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  8. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  9. keren tutorialnya...
    ijin coba ya gan.

    BalasHapus
  10. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  11. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  12. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  13. thanks tutorilany sob..
    btw praktek bikin game gini adanya di semester berapa ya sob?
    -keep blogging-

    BalasHapus
    Balasan
    1. saya smester 3 baru dapet flash, kalau semester 4 animasi 3dimensi pake blender

      Hapus
  14. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  15. kiran pake delphi, hehe bukmark dulu lah kali aja besok ane butuh

    BalasHapus
  16. Wah hebat, ane cari-cari di google ga nemu ternyata di sini ada
    Nice Post !!

    BalasHapus
  17. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  18. Keren gan! Tapi kok ruwet ya, padahal kayaknya cuman game harta karun biasa....

    BalasHapus
    Balasan
    1. tinggal tempel koding aja gan ama kasih nama variabel

      Hapus
  19. Netbook ngk kuat gann no. Responding untuk cobba...
    Lol

    BalasHapus
  20. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  21. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  22. ijin mau nyoba gan, bermanfaat sekali post nya. lanjut game lain ya gan

    BalasHapus
  23. membuat game sendiri asik juga nih hehehe

    BalasHapus
  24. mantap mas, itu hanya bisa di platform windows saja ?
    kalau dibuat mobile di android bisa ndk mas ?

    BalasHapus
  25. Thanks gan, buat nambah pengetahuan ane. Nice post

    BalasHapus
  26. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  27. itu pake bahasa apa yah gan??

    BalasHapus
  28. Terimakasih tutorialnya bermanfaat banget,

    Ingin bisa desain grafis? Tapi bingung minta bantuan siapa? Belajar sendiri aja yuk.. kita lihat tutorialnya di
    tutorial-tutorial gratis

    BalasHapus
  29. saya sudah mencoba tapi kok kalo di play tidak keluar hasilnya ya kenapa?

    BalasHapus
  30. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  31. waah sepertinya mudah juga, semoga berhasil...

    BalasHapus
  32. ijin remake gan https://lh4.googleusercontent.com/-hk3q3tP-0Pg/T2WEcRONc5I/AAAAAAAACbY/bJ00rge5Mq8/s36/16.gif

    BalasHapus
  33. ijin remake gan https://lh4.googleusercontent.com/-hk3q3tP-0Pg/T2WEcRONc5I/AAAAAAAACbY/bJ00rge5Mq8/s36/16.gif

    BalasHapus
  34. Ijin Remake gan https://lh4.googleusercontent.com/-hk3q3tP-0Pg/T2WEcRONc5I/AAAAAAAACbY/bJ00rge5Mq8/s36/16.gif

    BalasHapus
  35. kak pada referensi itu apakah juga menggunakan cs 5

    BalasHapus

Terimakasih sudah berkunjung ke Blog Orang IT , aturan berkomentar yang baik :

1. Dilarang mencantumkan berbagai macam link aktif dikomentar blog

2. Jika ingin mendapatkan backlink komen dengan name/url yang telah disediakan

3. Link download mati silahkan berkomentar

4. Postingan dirasa outdate atau sudah tidak berguna lagi komen saja jangan sungkan

5. Komentar yang memerlukan jawaban dari admin jangan menggunakan anonymous

6. Berkomentarlah dengan relevans dan tinggalkan jejak diblog saya

7. Klik iklan untuk biaya perawatan admin

Terimakasih sudah mentaati rules aturan berkomentar yang baik