Gambar 3.12 Game Klik 3, Layer Benar
3.5.2 Desain Game Drag and Drop
Ada 4 game yang menggunakan konsep drag and drop. Drag and drop sendiri adalah menggerakkan satu objek kemudian meletakkannya pada objek yang menjadi target.
3.5.2.1Drag and Drop
Membuat objek dapat di drag kemudian di drop yaitu: 1. Pilih objek kemudian jadikan movieclip.
2. Seleksi movieclip tersebut kemudian tekan F9 3. Akan muncul kotak dialog Action. Tulis actionscript dibawah ini kedalam kotak
dialog tersebut : on press {
Universitas Sumatera Utara
startDragthis; }
on release { stopDrag;
}
Game drag and drop terdiri dari beberapa gambar yaitu; daun, balon, pisang dan kepik yang jika diklik aakn dapat di-drag dan jika di-drop akan menimpa objek yang
menjadi target. Objek target diubah alpha-nya menjadi 61 pada properties. Game drag and drop ini memasangkan objek sesuai dengan warnanya. Tampilan awal game
adalah judul game dengan button main yang akan membawa pengguna ke permainan.
Gambar 3.13 Objek Sebelum di Drag
Universitas Sumatera Utara
Gambar 3.14 Objek di Drag dengan Mouse
Gambar 3.15 Objek Sesudah di Drop
Universitas Sumatera Utara
Pada game drag and drop saya ada perubahan yang saya lakukan sehingga tampilan game menjadi lebih menarik. Perubahan yang saya lakukan dijelaskan pada
subbab-subab dibawah ini.
3.5.2.2 Penggunaan hitTest
Agar drag and drop lebih menarik, gunaan hitTest untuk mendekteksi tabrakan antara 2 buah objek, sehingga ketika objek di drop objek dapat berubah bentuk ataupun
menuju ke frame yang lain. hitTest biasanya digunakan dengan script kondisi semisal if. Penulisannya :
if instance name penabrak.hitTestinstance name ditabarak {}. instance name penabrak : instance name dari objek yang akan menabrak
instance name ditabarak : instance name dari objek yang akan ditabrak Berikut pengunaannya:
1. Seleksi movie clip yang diinginkan. 3. Seleksi movie clip yang akan menjadi target tekan Ctrl+F3. Pada panel properties
masukkan nama yang diinginkan sebagai Instance name. 4. Seleksi movie clip lain yang akan di drag untuk ditabrak ke target dan tekan
Ctrl+F3. Pada panel properties masukkan nama yang diinginkan sebagai instance name.
7. Klik dua kali pada movie clip target. 8. Pada frame kedua klik kanan kemudian pilih insert keyframe.
9. Masukkan gambar yang nantinya akan muncul saat tabrakan objek terjadi. 10. Pada frame satu dan dua masukkan script stop;
11. Pada action frame masukkan perintah:
Universitas Sumatera Utara
pisang_target.onEnterFrame = function { if this.hitTest_root.pisang {
this.gotoAndPlay2; }
} };
Penggunaan hitTest dibuat pada game buah tuan marko. Dimana buah yang menjadi objek yang dapat di drag maupun drop turun dari atas ke tengah layer.
Gambar 3.16 Objek Sebelum di Drop
Objek digerakkan menuju ke kotak sesuai dengan warna objek. Ketika objek dilepaskan pada kotak. Objek akan berubah menjadi kecil dan berada di kotak.
Universitas Sumatera Utara
Gambar 3.17 Objek di Drag dengan Mouse
Gambar 3.18 Objek di Drag dan Objek Berubah
3.5.2.3 Penggunaan Animasi
Universitas Sumatera Utara
Ketika objek bertabrakan tidak hanya dapat mengubah bentuk saja, tetapi juga dapat menjalankan animasi. Digunakan metode attachMovie untuk memasukkan animasi
tersebut ke dalam stage.
1. Buatlah sebuah kotak berwarna biru muda dengan panjang dan lebar sama dengan panjang dan lebar stage. Tempatkan di tengah-tengah stage.
2. Buatlah sebuah static text dengan menggunakan text tool dan beri tulisan di dalamnya.
3. Seleksi kotak dan static text tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan tween animasi1 sebagai name dan movie clip sebagai type lalu tekan ok.
4. Seleksi movie clip tween animasi1 di stage dan tekan F8. Pada kotak dialog yang muncul masukkan animasi1 sebagai name dan movie clip sebagai type lalu tekan ok.
5. Klik 2 kali movie clip animasi1 agar anda masuk ke dalam stage-nya. Klik kanan frame 10 dan pilih insert keyframe. Klik kanan frame 20 dan pilih insert keyframe.
6. Klik kanan frame 1 dan pilih create motion tween. Seleksi movie clip tween animasi1 di frame 1 dan tekan Ctrl+F3. Pada panel properties yang muncul ubah color
menjadi alpha 0. Klik frame 20 dan tekan F9. Pada kotak actions yang muncul masukkan script berikut : stop;
7. Tekan Ctrl+E agar anda kembali ke stage scene 1. Hapus movie clip animasi1 dari stage.
8. Pada action frame masukkan kode berikut: animasi_jalan = false;
onEnterFrame = function { jika animasi_jalan bernilai true
if animasi_jalan {
Universitas Sumatera Utara
benda 1 dapat ditekan _root.benda1.enabled = false;
benda 2 dapat ditekan _root.benda2.enabled = false;
} else { benda 1 dapat tidak dapat ditekan
_root.benda1.enabled = true; benda 2 dapat tidak dapat ditekan
_root.benda2.enabled = true; }
}; ketika benda1 ditekan
benda1.onPress = function { movie clip ini dapat didrag
this.startDrag; ubah posisi kedalaman berada di paling atas
this.swapDepths1; };
ketika tekanan pada benda 1 dilepaskan benda1.onRelease = function {
movie clip ini tidak dapat di drag this.stopDrag;
jika movie clip ini berada di posisi benda1_target if evalthis._droptarget == benda1_target {
ubah nilai animasi_jalan menjadi false
Universitas Sumatera Utara
animasi_jalan = true; movie clip ini tidak dapat ditekan
this.enabled = false; movie clip ini menjadi tidak terlihat
this._visible = false; niali transparansi benda1_target menjadi 100
_root.benda1_target._alpha = 100; membuat variable animasi1 dengan memasukan movie clip
berlinkage animasi1 di tengah-tengah stage animasi1 = attachMovieanimasi1,
animasi1+_root.getNextHighestDepth, _root.getNextHighestDepth, {_x:Stage.height2, _y:Stage.width2};
animasi1.onEnterFrame = function { jika movie clip animasi1 berada di frame 20
if this._currentframe == 20 { hilangkan movie clip ini dari stage
removeMovieClipthis; nilai animasi jalan menjadi false
animasi_jalan = false; }
}; jika tidak
} else { koordinat x movie clip ini sama dengan nilai variable xawal1
this._x = xawal1;
Universitas Sumatera Utara
koordinat y movie clip ini sama dengan nilai variable yawal1 this._y = yawal1;
} };
ketika tekanan pada benda1 dilepaskan dan benda1 berada di luar stage benda1.onReleaseOutside = function {
movie clip ini tidak dapat didrag this.stopDrag;
koordinat x movie clip ini sama dengan nilai variable xawal1 this._x = xawal1;
koordinat y movie clip ini sama dengan nilai variable yawal1 this._y = yawal1;
};
Penggunaan animasi juga dibuat pada game buah tuan marko. Dimana sampah yang menjadi objek yang dapat di drag maupun drop turun dari atas ke tengah layer.
Universitas Sumatera Utara
Gambar 3.19 Objek Sebelum di Drop
Objek digerakkan menuju ke tempat sampah sesuai . Ketika objek dilepaskan pada tempat sampah. objek akanhilanmg dan animasi akan muncul.
Universitas Sumatera Utara
Gambar 3.20 Objek di Drag dengan Mouse
Gambar 3.21 Animasi Berjalan
3.5.3 Desain Game Tangkap
Kategori