Membuat Game Puzzle Dengan Adobe Flash

    Game puzzle yang akan kita buat yakni game acak gambar. Sebuah gambar yang suda kita sediakan kemudian diacak, lalu pemain diharuskan menyusun ulang hingga benar. Tentunya anda sudah mengetahui konsep dari game yang akan kita buat dari Flash ini.

1.     Buka program Flash, lalu buat sebuah dokumen baru, pilih action script 2 untuk membuat file baru. Tentukan besar area dengan memlihih menu modify > document. Masukkan angka 800X300 pada input area width & height.

2.     Masukkan gambar yang akan digunakan sebgai Puzzle. Klik File > Import. Disitu anda bisa melihat ada dua pilihan import, import to library & import to storage. Pilih import to storage aja ya.

3.     Masukkan gambar yang telah diimport ke dalam area stage. Atur ukuran gambar tersebut menjadi ukuran 383x287 pixel. Klik kanan pada gambar, kemudian pilih break a part untuk mengubah gambar tersebut menjadi shape.

Potong-potong gambar tersebut menjadi beberapa bagian sesuai dengan keinginan dengan memotongnya menggunakan garis, disini kita menggunakan potongan dengan ukuran 3x3 (berarti menjadi 9 bagian) sebagai awalan.

  

4.     Jadikan gambar potongan tersebut menjadi objek symbol “Movie Clip” dengan cara klik atau seleksi salah satu potongan gambar, klik kanan lalu pilih “convert to symbol”.

5.     Tentukan posisi registration dari symbol, letakkan tepat berada di tengah. Ini dimaksudkan sebagai titik focus dari symbol agar pada saat pendeteksian letak koordinat dapat dijadikan acuan. Convertsemua potongan menjadi movie clip. Beri nama img1, img2, img3, dst.

6.     Bersihkan garis pemotong dengan cara double klik pada garis lalu tekan delete. Setelah itu copy semua movie clip hasil convert dan paste disebelah symbol orisinilnya. Sehingga tampak seperti gambar.

 

7.     Kembali piih semua potongan gambar asli kemudian klik kanan > arrage > bring to front. Dimaksudkan agar gambar asli berada paling atas. Kemudian pilih gambar hasil copy (semua potongan) lalu buka panel properties dengan cara klik windows > properties (bila panel properties belum terbuka). Pada pilihan sub colour effect pilih style lalu ubah menjadi alfa dengan nilai 20%.Sehingga gambar agakmenjadi pudar.

Namai setiap potongan gambar asli dengan nama “gbr1_mc”. Dengan cara klik pada potongan gambar kemudian pada panel properties ubah instance name menjadi “gbr1_mc”, “gbr2_mc”,dst. “_mc” disini dimaksudkan agar action script flash dapat mengenali bahwa instance name tersebut adalah instance dari movie clip. Untuk penamaan teks dianjurkan nama instancenya diakhiri dengan “_txt”

 

 

8.      Namai pula setiap potogan gambar hasil duplikat . Langkah sama dengan diatas akan tetapi nama instancenya diberi nama “tar1_mc”, ”tar2_mc”, dst. Dimaksudkan gambar duplikat dijadikan target peletakan gambar asli.

9.     Tambahkan button pada stage area kerja . Button dapat bibuat sendiri atau diambil dari library dari aplikasi. Caranya klik Windows > Common Library > Button.Pilih jenis Button yang akan dipergunakan, lalau drag and drop ke dalam stage area.

10.     Pilih symbol button yang sudah berada didalam area. Buka windows action dengan cara klik windows > action. Atau tekan tombol F9. Panel action digunakan untuk menuliskan script yang nanti dipakai oleh object yang ada dalam flash.

10. Pilih symbol button yang sudah berada didalam area. Buka windows action dengan cara klik  windows > action. Atau tekan tombol F9. Panel action digunakan untuk menuliskan script yang nanti dipakai oleh object yang ada dalam flash.

11.     Karena hanya membuat puzzle sederhana maka script yang dipakai juga sederhana. Ketikkan script untuk button yang sudah ada sebagai berikut.

on (release) {

            if(acak ==0){

                        //menangkap koordinat x

                        var x = new Array();

                        for (i=1;i<10;i++){

                                    x[i] = this["gbr"+i+"_mc"]._x;

                        }

                        //menangkap koordinat y

                        var y = new Array();

                        for (i=1;i<10;i++){

                                    y[i] = this["gbr"+i+"_mc"]._y;

                        }

                        //acak potongan gambar

                        for(i=1;i<6;i++){

                                    j = 6-i;

                                    this["gbr"+i+"_mc"]._x = x[j];

                                    this["gbr"+i+"_mc"]._y = y[j];

                        }

                        for(i=6;i<10;i++){

                                    j = 10-i + 5;

                                    this["gbr"+i+"_mc"]._x = x[j];

                                    this["gbr"+i+"_mc"]._y = y[j];

                        }

                       

                        acak = 1;

            }else{

                        for(i=1;i<10;i++){

                                    this["gbr"+i+"_mc"]._x = xawal[i];

                                    this["gbr"+i+"_mc"]._y = yawal[i];

                                    }

                        acak = 0;

            }

}

Penjelasan :

Action script ditas menangkap nilai koordinat X dan y dari potongan gambar yang diacak. Diambil kemudian disimpan dalam array. Kemudian dilanjutkan dengan mengacak gambar dengan fungsi for sebanyak 2 kali. Sebelumnya terdapat pengecekan. Apabila button tertekan satu kali maka gambar akan teracak, dan apabila gambar tertekan untuk yang kedua kalinya maka gambar akan kembali ke posisi semula.

Klik pada area (jangan mengenai objek) kemudian kembali ke panel action dan tambahkan action script berikut.

var acak = 0;

var xawal = new Array();

var yawal = new Array();

for (i=1;i<10;i++){xawal[i] = this["gbr"+i+"_mc"]._x;}

for (i=1;i<10;i++){yawal[i] = this["gbr"+i+"_mc"]._y;}

Penjelasan :

Action script yang dimasukkan di dalam stage bertjuan untuk menangkap posisi awal potongan gambar dan menyimpannya. Digunakan saat button diklik ke dua kalinya.Sehingga posisi potongan gambar akan kembali seperti semula.

Selanjutnya agar gambar dapat dipindah-pindahkan, maka setiap gambar diberikan action scrip sebagai berikut.

on(press){

            startDrag(this,true);

            }

on(release){

            stopDrag();

           

            if(this.hitTest(this._parent.tar1_mc)){

                        this._x = this._parent.tar1_mc._x;

                        this._y = this._parent.tar1_mc._y;

            }

}

Ubah nama instancenya menyesuaikan dengan target dari potongan gambar yang diberi action script.

Selanjutnya tambahkan layer baru dengan cara klik insert > timeline > layer. Letakkan layer tersebut diurutan paling bawah (digunakan untuk tempat background) dengan cara di drag.

Lock layer 1 dengan menekan titik yang sejajar dengan icon lock dari layer. Bertujuan agar semua objek yang terdapat dalam layer tersebut tidak dapat diedit. Sehingga tidak akan mengganggu layer lainnya.

Buatlah sebuah kotak menggunakan rectangle tool untuk membuat sebuah background.

Saat membuat kotak, mouse jangan langsung dilepaskan. Tahan mouse sambil tekan panah kebawah pada keyboard beberapa kali agar kotak menjadi tidak bersudut.

Klik pada fill colour atau isi dari kotak kemudian pada panel color (windows > color). Ubah pilihan solid menjadi linear gradient.

Tentukan warna 1 dan warna 2. Kemudian hilangkan seleksi dari fill colour atau isi dari kotak dengan cara klik pada area kosong.

Untuk mengetes hasil, klik control > test movie > test. Atau tekan Ctrl + Enter pada keyboard. Selesai.

Download Contoh Hasil Game Diatas