Membuat Game Tebak Gambar
permainan yang akan Anda
buat merupakan permainan yang menuntut pengetahuan berpikir. Anda dapat membuat
sebuah permainan berupa soal-soal dengan tampilan yang
lebih interaktif dan menarik.
Berikut adalah beberapa permainan
yang akan Anda buat.
MEMBUAT GAME TEBAK GAMBAR
Pada permainan ini, Anda
harus menjawab pertanyaan yang diberikan dengan beberapa pilihan gambar yang
ada. Pertanyaan yang Anda jawab akan dihitung dengan skor yang akan ditampilkan
pada akhir scene. Berikut akan dijelaskan tahap-tahap pembuatannya.
MEMBUAT DOKUMEN KERJA
Tahap pertama adalah membuat dokumen kerja dengan
langkah-langkah sebagai berikut:
1.
Pilih menu File > New.
2.
Akan muncul kotak dialog New Document.
3.
Pilih ActionScript 2.0.
4.
Klik OK.
5.
Selanjutnya atur dokumen tersebut dengan memilih menu Modify >
Document.
6. Pada tampilan kotak dialog Document Settings, atur
ukuran dokumen seperti berikut:
7. Klik OK.
MEMBUAT FRAME PERTAMA
Pada frame pertama, akan tampak petunjuk cara
bermain game ini. Setelah Anda paham maka ada pilihan tombol masuk sebagai
tampilan pertama game. Berikut adalah langkah-langkah pembuatannya:
1. Pilih menu File > Import > Import to Stage.
2. Pada kotak dialog Import, pilih salah satu file gambar untuk
dijadikan sebagai background.
3.
Klik
OK.
4. Pilih Free Transform tool.
5.
Dengan tool tersebut, atur ukuran gambar agar
sesuai dengan ukuran dokumen.
Gambar 2.2.Tampilan gambar
6. Pilih
Text tool, pastikan jenis teks yang Anda pilih adalah Static Text.
7. Atur
jenis font pada panel Properties dengan "Arial".
8. Tentukan
Color dengan warna kuning.
9. Atur
ukuran teks dengan nilai 21 pt.
Gambar 2.3. Pergaturan teks
10. Dengan menggunakan tool tersebut,
buatlah teks seperti berikut:
Gambar 2.4.Tampilan teks
11. Sekarang
beri efek pada tampilan teks tersebut dengan menggunakan pengaturan Filter pada
panel Properties.
12. Klik
Add Filter di bagian bawah pengaturan.
13. Pilih Glow.
14. Lakukan
pengaturan Blur X dan Y dengan nilai 40 px.
15. Strenght
dengan
nilai 200%.
16. Tentukan
warna yang digunakan adalah warna merah.
Gambar 2.5. Pengaturan Glow
17. Tampilan
teks akan tampak seperti berikut:
Gambar 2.6. Tampilan teks
18.
Selanjutnya
bust teks lagi dengan tulisan "Klik
salah satu jawaban gambar yang
menurut ands tepat". Pastikan Anda menggunakan jenis teks Static Text.
19. Atur
teks tersebut dengan warna merah dan berukuran lebih kecil dari teks
sebelumnya.
20. Atur
posisi teks di bagian bawah dokumen seperti berikut:
Gambar 2.7. Tampilan teks dibagian bawah
21. Langkah berikutnya adalah membuat objek tombol. Tampilkan panel
Library Buttons dengan memilih menu Window > Common Libraries >
Buttons.
22. Pada tampilan panel, klik Buttons Rounded.
23.
Pilih Rounded Green.
Gambar 2.8. Tampilan panel Library Buttons
24. Geser
pilihan tombol tersebut ke dalam dokumen.
25. Atur
ukurannya menggunakan Free Transform tool.
26. Letakkan
di bagian tengah dokumen.
27. Klik
ganda objek tombol tersebut hingga Anda akan masuk ke dalam scene tombol.
28. Ubah
'tampilan teks dengan tulisan "MASUK" menggunakan Text tool.
29. Klik
Scene 1 untuk kembali ke dokumen.
30. Tampilan
dokumen frame 1 akan tampak seperti berikut:
MEMBUAT FRAME KEDUA
Frame kedua berisi pertanyaan beserta pilihan jawabannya. Berikut
adalah langkah-langkah pembuatannya:
1. Klik frame 2 pada panel Timeline.
2. Klik kanan, kemudian pilih Insert Blank Keyframe.
3. Tempatkan
beberapa objek gambar yang akan digunakan sebagai pilihan jawaban, pilih menu File
> Import > Import to Stage.
4.
Dengan Free Transform tool, atur objek
gambar seperti berikut:
5.
Pilih Text tool dan pastikan jenis
teks yang Anda pilih adalah Static Text.
6. Ketikkan
teks di antara gambar di atas yang akan digunakan sebagai teks pertanyaan.
7. Gunakan font Arial dan warna biru untuk teks
tersebut.
8. Tahap
selanjutnya adalah membuat Invisible button, pilih Rectangle tool.
9. Buatlah
sebuah objek persegi. Anda dapat membuatnya di luar dokumen.
10.
Lakukan seleksi
terhadap objek.
11.
Klik kanan objek
persegi tersebut.
12. Pilih Convert to Symbol.
13. Ketikkan
"inv" pada kolom Name.
14.
Untuk Type, pilih
Button.
15. Klik OK.
16. Selanjutnya klik ganda objek persegi tersebut.
17.
Pada tampilan Timeline, geser frame Up ke
frame Hit.
18.
Klik Scene 1 untuk
kembali ke dokumen.
19.
Selanjutnya duplikasi invisible button
tersebut dengan menekan Ctrl+D sebanyak 3 kali.
20.
Tempatkan objek ke dalam tiap gambar sehingga
akan menutupi keempat objek gambar.
21. Pastikan
tiap tampilan gambar akan tertutupi oleh objek persegi tersebut, Anda dapat
menggunakan Free Transform tool untuk mengatur ukuran objek persegi agar
sesuai dengan ukuran gambar.
MEMBUAT FRAME SELANJUTNYA
Cara membuat frame ketiga ini sama dengan frame kedua, yang membedakan
hanya tampilannya. Berikut adalah langkah-langkah yang dapat Anda gunakan:
1. Klik kanan frame ketiga pada panel Timeline.
2. Pilih
Insert Blank Keyframe.
3. Tempatkan
beberapa gambar ke dalam dokumen.
4. Selanjutnya
bed teks pertanyaan seperti tampak pada gambar di bawah.
5. Beri
warna pada teks dengan warna yang berbeda, misalkan warna hijau tua.
6. Selanjutnya
beri invisible button pada tiap gambar dengan langkah-langkah sebelumnya.
7.
Dengan langkah-langkah yang sama, buatlah
frame keempat seperti berikut:
8. Beri
warna teks dengan warna merah tua.
9. Beri
invisible button pada tiap gambar dengan langkah-langkah seperti sebelumnya.
10. Buat
sebuah pertanyaan lagi dan pilihan gambar pada frame selanjutnya seperti
berikut:
11.
Lakukan pengaturan
yang sama seperti di atas.
12.
Buat lagi sebuah pertanyaan dengan pilihan
gambar Iainnya seperti berikut:
13.
Lakukan pengaturan
pada frame tersebut.
14.
Beri objek invisible
button pada tiap gambar pilihan.
15.
Buat lagi sebuah pertanyaan dan beberapa
pilihan jawaban gambar seperti berikut:
16. Lakukan
pengaturan pada frame tersebut seperti pada frame sebelumnya.
17. Beni
invisible button pada tiap gambar seperti langkah-langkah seperti sebelumnya.
MEMBUAT SKOR
Tampilan
skor berisi nilai benar dan nilai salah. Jika Anda menjawab sebuah pertanyaan
dengan benar maka skornya adalah satu, demikian juga dengan skor untuk jawaban
yang salah. Berikut adalah langkah-langkah pembuatannya:
1.
Klik kanan frame
berikutnya.
2.
Pilih Insert Black
Keyframe.
3.
Selanjutnya pilih
menu File > Import > Import to Stage.
4.
Import sebuah gambar
yang akan dijadikan sebagai background, atur dengan menggunakan Free
Transform tool.
5.
Selanjutnya pilih Text tool, pastikan
jenis teks yang digunakan adalah Static Text.
6. Atur jenis teks dengan Arial.
7.
Tentukan warna teks
sesuai dengan warna background.
8. Tempatkan
masing-masing tampilan teks seperti tampak pada gambar berikut:
9. Selanjutnya
pilih Text tool.
10. Ubah
jenis teks menjadi Dinamic Text.
11. Buatlah
2 teks Dynamic, lalu tempatkan masing-masing
pada teks Benar dan Salah.
12. Atur
Dynamic Text tersebut dengan jenis teks Lucida Handwriting.
13. Untuk
Color, tentukan warna putih.
14. Lakukan
seleksi pada Dynamic Text di bagian teks benar.
15. Tampilkan
pengaturan Options. Pada panel Properties kolom Variable ketikkan
"benar skor".
16. Lakukan
hal yang sama pada Dynamic Text untuk teks Salah dengan mengetikkan
"salah_skor" pada kolom Variable.
MEMBUAT ACTIONSCRIPT
Tahap
berikutnya adalah membuat ActionScript. Pada langkah ini, Anda akan memberikan
ActionScript pada masing-masing frame. Total frame yang dibuat adalah 8 bush.
Frame pertama berisi
pembuka
permainan, frame kedua hingga ketujuh berisi pertanyaan dan jawaban, dan frame
kedelapan berisi skor. Berikut adalah langkah-langkah pembuatannya:
1. Klik
frame pertama pada panel Timeline.
2. Tampilkan
panel Actions.
3.
Tulis kode script
berikut:
stop();
benar
= 0;
salah
= 0;
tot_frame
= 7;
array_frame = [];
for (i=2; i<=tot_frame; i++) {
array_frame . push(i );
}
array_frame.sort(function
() { return random(2) ? 1 : -1;
});
jml_frame
= array_frame.length;
4. Beri
kode script hanya untuk objek tombol "masuk" pada frame 1. Lakukan
seleksi pada tombol tersebut, kemudian beri kode script berikut pada panel
Actions:
on
(release) { jml_frame--;
gotoAndStop(array_frame[jml_frame]);
}
5. Selanjutnya
klik frame kedua pada Timeline.
6.
Ketikkan kode script
berikut:
stop();
7. Berikan
kode script seperti di atas hingga frame ketujuh.
8. Selanjutnya
tampilkan frame kedua yang berisi pertanyaan.
9. Lakukan
seleksi terhadap objek invisible button dari jawaban gambar benar.
10. Ketikkan kode script berikut:
on (release) {
benar += 1;
if (jml_frame>=0) {
jml_frame--;
gotoAndStop(array_frame[jml_frame]);
}
if
(jml_frame<0) {
gotoAndStop(8);
}
}
11. Sedangkan
kode script invisible button untuk jawaban gambar salah adalah:
on (release) {
salah += 1;
if
(jml_frame>=0) {
jml_frame--;
gotoAndStop(array_frame[jml_frame]);
}
if
(jml_frame<0) {
gotoAndStop(8);
}
}
12. Berikan
kode script untuk invisible button jawaban gambar benar seperti di atas pada
frame lainnya, yakni dari frame kedua hingga frame ketujuh.
13.
Berikan juga kode
script untuk invisible button jawaban gambar salah seperti di atas pada frame
lainnya, yakni dari frame kedua hingga frame ketujuh. Dalam hal ini Anda harus
melakukan seleksi satu per satu dan memberikan kode script terhadap tiap
invisible button pada tiap frame (frame kedua hingga frame ketujuh).
14.
Selanjutnya klik frame kedelapan atau frame
terakhir.
15.
Berikan kode script berikut:
stop();
benar_skor
= benar;
salah_skor
= salah;
16.
Mainkan permainan dengan menekan Ctrl+Enter.
17.
Perhatikan hasil dari beberapa frame berikut:
Gambar 2.25 Tampilan
pembuka (kin) dan tampilan pertanyaan (kanan)
Gambar 2.26 Tcmpilan skor
Terimakasih :)
Tidak ada komentar:
Posting Komentar