Membuat TTS dengan Flash

Sunday, May 25, 2014    


TTS atau teka-teki silang adalah salah satu permainan yang digunakan untuk membantu kita mengasah otak. Permainan ini cukup menantang karena kita akan mengisi kotak-kotak yang ada sesuai jawaban dari pertanyaan. Kali ini kita akan membuat tts tersebut dengan flash. Berikut langkah-langkah pembuatannya :
1. Buatlah sebuah flash document.
2. Buatlah beberapa buah kotak yang di tata seperti gambar di bawah ini :
 




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


 



4. Buatlah 6 buah static text masing-masing bertuliskan F, R, I, D, A, Y. Letkkan 6 buah static text tersebut seperti gambar di bawah ini :



 

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



 



6. Seleksi static text bertuliskan F, R, I, D, A, Y kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS1 sebagai name dan movie clip sebgai type kemudian tekan ok.
7. Seleksi movie clip jawabanTTS1 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS1 sebagai instance name.
8. Seleksi static text bertuliskan L, A, U, T kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS2 sebagai name dan movie clip sebgai type kemudian tekan ok.
9. Seleksi movie clip jawabanTTS2 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS2 sebagai instance name.
10. Seleksi static text bertuliskan A, K, A, R kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS3 sebagai name dan movie clip sebgai type kemudian tekan ok.
11. Seleksi movie clip jawabanTTS3 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS3 sebagai instance name.

12. Seleksi static text bertuliskan B, U, S kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS4 sebagai name dan movie clip sebgai type kemudian tekan ok.
13. Seleksi movie clip jawabanTTS4 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS4 sebagai instance name.
14. Seleksi static text bertuliskan H, A, R, I kemudian tekan F8. Pada panel yang muncul masukkan jawabanTTS5 sebagai name dan movie clip sebgai type kemudian tekan ok.
15. Seleksi movie clip jawabanTTS5 di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTTS5 sebagai instance name.
16. Buatlah sebuah static text bertuliskan Masukkan hanya huruf kapital saja.
17. Tekan Ctrl+F7 dan pada panel components yang muncul klik tanda + disebelah User Interface kemudian drag ComboBox ke dalam stage.
18. Seleksi ComboBox tersebut dan pada panel properties masukkan no sebagai instance name.
19. Pastikan anda masih menyeleksi ComboBox kemudian plih pada menu bar Window>Properties>Parameters. Pada panel parameters yang muncul, klik dua kali tanda [] di sebelah tulisan labels.
20. 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.


 



21. Buatlah sebuah input text. Seleksi input text ini dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan jawabanTampil sebagai var.
22. Buatlah sebuah dynamic text bertuliskan OK. Seleksi dynamic text ini dan pada panel properties nonaktifkan tombol selectable dan aktifkan tombol show border around text.
23. 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.
24. Seleksi ok_btn di stage dan pada panel properties masukkan ok_btn sebagai instance name.
25. Buatlah 5 buah static text masing-masing bertuliskan 1. Jum’at dalam bahasa Inggris, 2. Tempat mencari ikan, 3. Bagian pohon yang ada di tanah, 4. Kendaraan roda empat, 5. Day dalam bahasa Indonesia
26. Letakkan seluruh objek yang di buat tadi seperti gambar di bawah ini :



 



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






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//membuat variable jawaban1 dengan nilai FRIDAY
jawaban1 = "FRIDAY";
//membuat variable jawaban2 dengan nilai LAUT
jawaban2 = "LAUT";
//membuat variable jawaban3 dengan nilai AKAR
jawaban3 = "AKAR";
//membuat variable jawaban4 dengan nilai BUS
jawaban4 = "BUS";
//membuat variable jawaban5 dengan nilai HARI
jawaban5 = "HARI";
//mengosongkan tampilan awal combo box no
no.text = "";
//membuat variable i dengan nilai 1 sampai 5
for (i=1; i<=5; i++) {
        //mengubah nilai transparansi movie clip berinstance name jawabanTTS+i menjadi 0
        _root["jawabanTTS"+i]._alpha = 0;
}
//perintah yang dijalankan ketika frame ini dimainkan
onEnterFrame = function () {
        //nilai variable noSoal sama dengan teks yang di pilih pada combo box no
        noSoal = no.text;
};
//ketika tekanan pada ok_btn dilepaskan
ok_btn.onRelease = function() {
        //jika nilai pada dynamic text sama dengan nilai variable jawaban+noSoal
        if (jawabanTampil == _root["jawaban"+noSoal]) {
               //ubah nilai transparansi movie clip berinstance name jawabanTTS+i menjadi 100
               _root["jawabanTTS"+noSoal]._alpha = 100;
               //kosongkan tulisan pada dynamic text jawabanTampil
               jawabanTampil = "";
               //hapus angka yang terdapat pada combo box no sesuai angka yang dipilih
               no.removeItemAt(no.selectedIndex);
               //kosongkan tulisan yang terdapat pada combo box no
               no.text = "";
        }
};





28. Tekan Ctrl+Enter untuk melihat hasilnya.