Game puzzle yang akan kita buat
yakni game acak gambar. Sebuah gambar yang sudah 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.
Sumber
