Tutorial Membuat Game Teka Teki Silang menggunakan Adobe Flash

Posted by: Mustika in Desain Animasi & Multimedia, Tutorial & Tips July 23, 2013 8 Comments 857 Views

Bismillah… Salam ceria PalComSter, bagaimana puasanya? Semoga kita semua diberikan kesehatan dan kekuatan menjalankan ibadah puasa di bulan Ramadhan tahun ini. Nah, untuk mengisi waktu luang PalComSter atau sembari nunggu waktu berbuka puasa. Yuk isi Teka Teki Silang (TTS) dibawah ini. Harapannya sih bukan sekedar bisa menjawab soal TTS dibawah ini tapi Palcomster juga bisa memodifikasi game TTS ini menjadi lebih sempurna.

Langkah 1

Bukalah Flash dokumen, kemudian berikan background yang sesuai dengan tema.

Langkah 2

Buatlah desain kotak dengan menggunakan rectangle tool seperti dibawah ini :

Langkah 3

Buatlah 10 buah static text masing-masing bertuliskan angka 1 sampai 10. Letakkan 10 buah static text tersebut seperti gambar di bawah ini :

Langkah 4

Buatlah 10 buah static text masing-masing bertuliskan K,U,R,M,A. Letakkan 10 buah static text tersebut seperti gambar di bawah ini :

Langkah 5

Lakukan hal yang sama pada kotak lainnya dengan kata-kata seperti di bawah ini :

Langkah 6

Seleksi static text bertuliskan K,U,R,M,A  kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS1 sebagai name dan movie clip sebgai type kemudian tekan ok. Pada panel properties yang muncul masukkan jawabanTTS1 sebagai instance name.

Langkah 7

Buatlah sebuah static text bertuliskan Jawablah dengan menggunakan HURUF KAPITAL..!!!

Langkah 8

Tekan Ctrl+F7 dan pada panel components yang muncul klik tanda + disebelah User Interface kemudian drag ComboBox ke dalam stage.

Langkah 9

Seleksi ComboBox tersebut dan pada panel properties masukkan no sebagai instance name. kemudian plih pada menu bar Window>Properties>Parameters. Pada panel parameters yang muncul, klik dua kali tanda [] di sebelah tulisan labels.

Langkah 10

Pada panel yang muncul klik tanda + sebanyak 5 kali sehingga muncul 5 buah baris bertuliskan defaultValue. Ubah tulisan defaultValue tersebut dengan cara mengkliknya dan ganti dengan angka 1 sampai 5 secara berurutan dari atas ke bawah sehingga panel akan terlihat seperti gambar di bawah ini. Jika sudah tekan ok.

Langkah 11

Buatlah sebuah input text. Seleksi input text ini dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTampil sebagai var.

Langkah 12

Buatlah sebuah dynamic text bertuliskan OK. Seleksi dynamic text ini dan pada panel properties nonaktifkan tombol selectable dan aktifkan tombol show border around text.

Langkah 13

Pastikan anda masih menyeleksi dynamic text bertuliskan OK kemudian tekan F8. Pada panel yang muncul masukkan ok_btn sebagai name dan button sebagai type lalu tekan ok. Seleksi ok_btn di stage dan pada panel properties masukkan ok_btn sebagai instance name.

Langkah 14

Buatlah 10 Pertanyaan menggunakan static text seperti gambar dibawah ini :

Langkah 15

Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

jawaban1 = "KURMA";
jawaban2 = "ADZAN";
jawaban3 = "TADARUS";
jawaban4 = "SAHUR";
jawaban5 = "RAMADHAN";
jawaban6 = "NAWAITU";
jawaban7 = "TARAWIH";
jawaban8 = "THR";
jawaban9 = "WITIR";
jawaban10 = "NUR";

no.text = "";
for (i=1; i<=10; i++) {
 _root["jawabanTTS"+i]._alpha = 0;
}
onEnterFrame = function () {
 noSoal = no.text;
};
ok_btn.onRelease = function() {
 if (jawabanTampil == _root["jawaban"+noSoal]) {
 _root["jawabanTTS"+noSoal]._alpha = 100;
 jawabanTampil = "";
 no.removeItemAt(no.selectedIndex);
 no.text = "";
 }
};

SELAMAT MENCOBA....