Membuat Puzzle Sederhana Dengan Adobe Flash Action Script 3 (PART 1)

Hello readers ! v3 - chan kembali berbagi tutorial nih ^^ Kali ini kita akan membuat game berupa Puzzle sederhana berbasis Android.

Yang perlu readers sekalian persiapkan sebelum mengikuti Tutorial adalah sbb:

1. Software Adobe Flash CS6 

2. Gambar yang akan dijadikan puzzle

3. Software Adobe Photoshop (Untuk memotong gambar/image menjadi beberapa keping. Tutorialnya di sini.

4. Action Scripts yang udah v3-chan sediakan di dalam folder " com ". Download disini

Tutorial:

1. Jalankan / run software Adobe Flash

2. Create New project, lalu pilih " AIR for Android " 

3. Kemudian masuk ke pengaturan dokumen dengan " klik kanan >> Document Properties..."

4. " Save as " flash document yang baru saja kamu buat!

*Sangat disarankan untuk menyimpan file tersebut ke dalam satu folder.  

5. Import semua gambar/image untuk kepingan puzzle kamu! " File >> Import >> Import to Library ... >> Select Image >> Open " 

*Pada tutorial ini, v3-chan sengaja menggunakan 4 keping gambar/image biar g rempong pas coding .. :P

6. Drag semua gambar/image yang ada di library ke stage, lalu susunlah kepingan gambar seperti keadaan semula. *Lihat photonya unyu kan, ada hikaru kun ama wyn chan nya >.<

7. Click kanan pada salah satu kepingan gambar, kemudian pilih " Convert to Symbol ... " Nama symbol harus berbeda, alias tidak boleh ada nama yang sama! lalu pastikan juga type yang digunakan adalah "Movie Clip".

lakukan hal yang sama untuk kepingan gambar lainnya! ^^

8. Langkah selanjutnya adalah pemberian Instance Name pada masing-masing symbol ! Ingat, nama Instance-nya tidak boleh ada yang sama yah!

*Jika menu properties kamu tidak ada di workplace, cukup click " window " yang ada di menu bar, lalu centang "Properties".

9. Select seluruh kepingan gambar kamu lalu copy dan paste di sebelahnya.

Sekarang kita punya 2 group gambar, segera rubah seluruh instance name pada gambar di group A agar tidak "bentrok" dengan Instance name gambar di group B.

10. Rubahlah "color effect" seluruh gambar di group A, dengan style: "Tint", seperti pada gambar berikut ini

11. Acaklah susunan untuk gambar di group B.

12. Langkah selanjutnya yaitu mencatat posisi x dan y (Khusus Group A), dan nama instance  group A dan B.. (Biar lebih mudah, catat di kertas aja).

contoh penamaan instance

13. Sebelum masuk ke code, pastikan flash document (.fla) kamu berada di folder yang sama dengan folder yang kamu downlad sebelumnya ( folder .com ) 

14. Buatlah Layer baru (Layer 2), kemudian click frame 1 pada Layer 2 lalu click "F9" untuk masuk ke action script! 

15. Copy Paste code di bawah ini pada action script kamu.

import com.*;

stop();

var dragArrayPuzzle:Array = [];

var matchArrayPuzzle:Array =[];

var posArrayPuzzle:Array = [];

var dragGamePuzzle:DragGame = new DragGame(stage, dragArrayPuzzle, matchArrayPuzzle, posArrayPuzzle);

dragGamePuzzle.addEventListener(DragGame.MATCH_MADE, onMatchPuzzle);

dragGamePuzzle.addEventListener(DragGame.NO_MATCH, onFlubPuzzle);

dragGamePuzzle.addEventListener(DragGame.ALL_DONE, onDonePuzzle);

function onMatchPuzzle(event:Event):void {

}

function onFlubPuzzle(event:Event):void {

}

function onDonePuzzle(event:Event):void {

}

16. Untuk menguji hasil kerja kamu, click "File" >> "Publish Preview" >> "Flash"

17. Kreasikan tampilan game mu, seperti menambahakan effect suara dan juga background. (Bila ingin menambahkan background dan object dekorasi, buatlah layer baru dan taruh layer tersebut di urutan paliiing bawah!)

Menambahkan effect suara pada ketiga event (match, flub, & done)

Object suara yang telah diimport ke library dan telah  diberi AS Linkage sesuai dengan yang di Action Script

18. Selanjutnya menambahkan ' timer ' pada puzzle 

Atur kembali tampilan puzzle sesuai keinginan 

19. Kemudian buat frame baru untuk scene ' game over '.

jangan lupa untuk menambahkan action script -> stop(); pada frame yang baru dibuat tadi.

20. Tambahkan code berikut pada action script frame1.

import flash.events.TimerEvent;
import flash.utils.Timer;

var mins:Number = 1;
var secs:Number = 0;
var waktu:Timer = new Timer(1000);

menit.text=""+mins;
detik.text=""+secs;

waktu.addEventListener(TimerEvent.TIMER,handTimer);
waktu.start();
function handTimer(e:TimerEvent):void{
     if(waktu!=null){
         if(secs ==00){
              if(mins ==00){
                   waktu.stop();
  
if (contains(piece1)){
removeChild(piece1)
}
if (contains(piece2)){
removeChild(piece2)
}
if (contains(piece3)){
removeChild(piece3)
}
if (contains(piece4)){
removeChild(piece4)
}
  gotoAndStop(2);
  
              }else{
                 mins --;
                 secs =59;
                 menit .text=""+mins;
                 detik .text=""+secs;
               }
            }
            else{
                 secs --;
                 detik.text=""+ secs;
           }
      }
}

21. Pada Action Script Layer 1 Frame 1, di bagian function onDonePuzzle, tambahkan script -> " waktu.stop();" Sehingga timer dapat berhenti pada saat puzzle selesai di kerjakan.

22. Yaaaaaaaay! it's done. So, simple right... :) 

Sekian dulu tutorial dari saya... Semoga postingan ini dapat memberikan manfaat  untuk readers sekalian !

Ooo iya, Untuk mem-publish dokumen kedalam bentuk .apk (paket aplikasi android) akan v3 bahas di postingan selanjutnya.. See ya!

Best Regards:  V3-chan