June 14, 2009

Membuat game flash matematika sederhana / how to make a simple math flash game

Dalam tutorial ini kita akan membuat sebuah game aritmatika sederhana menggunakan flash. Anda dapat menggunakan Macromedia Flash 8 atau Adobe Flash CS 3 dalam pembuatannya.

In this tutorial, we will create asimple arithmetic flash game. You can use Macromedia Flash 8 or Adobe Flash CS 3.

Langkah 1: Buka sebuah file baru dengan ukuran default (550 x 440) , ubah warna background menjadi hijau. Buatlah sebuah tulisan judul "Online Test". Selanjutnya buatlah sebuah kotak berwarna merah dengan garis tepi putih. Perhatikan Gambar.

1st Step: Open a new file with the default size (550 x 440), change the background color to be green. Create a title with a text and type "Online Test". Then make a box with a red as a fill color and white as a stroke color. See a picture.


Langkah 2 : Tambahkan di atas kotak merak tersebut dynamic text dan beri nama variabelnya "angka_1", Copy dynamic text tersebut dan pastekan di sampingnya, ubah nama variablenya menjadi "angka_2", sisipkan ditengah-tengahnya tanda tambah menggunakan static teks dan tanda sama dengan setelah teks angka_2. Kemudian buat lagi input teks dengan nama variabelnya "jawab", beri juga nama instance namenya dengan nama "answerBox" dan pilih "show border around text". Perhatikan gambar

2nd step : Add a dynamic text above red box and name it variable with "angka_1", Copy text, and paste a dynamic , change the variable name to "angka_2", Add a plus symbol with static text between two dynamic texts and also add a equal symbol after a second dynamic text, then make input text with variable name "jawab", also give the instance name with "answerBox" and select "show border around text". See a picture



Langkah 3 : buat 2 buah tombol di bawah kotak merah masing-masing dengan nama tombol random dan tombol check.

3rd step: create 2 button below the red box and name with a random button and check button.


Langkah 4 : Buat sebuah movie clip dari static teks, misalnya "Correct Answer", beri nama instancenya "true_answer". Klik 2 kali movie clip tersebut untuk masuk ke area movie clip "true_answer", Klik frame 1, tahan dan geser ke frame 2, sehingga tidak ada objek di frame 1, lalu klik frame 10, klik kanan dan pilih insert keyframe. kembali ke frame 1 tekan tombol F9 dan masukkan kode berikut:

stop();

4th step: Create a movie clip from the static text,for example "Correct Answer", give the instance name with "true_answer". Click 2 times thisthe movie clip into movie clip area "true_answer", Click frame 1, hold and slide to the frame 2, so there is no object in the frame 1, then click on frame 10, right-click and select insert keyframe. Back to frame 1 and press F9 key and enter the following code:

stop ();

Langkah 5 : Ulangi langkah 4 untuk jawaban yang salah, namun tulisannya adalah "Wrong Answer, try again". beri nama instancenya "wrong_answer".

5th step : Repeat step 4 for the wrong answers, but the letter is "Wrong answer, try again". give instance name with "wrong_answer".


Langkah 6 : Kembali ke stage utama, tambahkan sebuah layer action, klik frame 1 layer action dan masukkan action script berikut:

6th Step: Back to the main stage, add a layer action, click action layer frame 1 and enter the following action script:

problem();
function problem() {
var _loc1 = 2+random(8);
var _loc2 = 2+random(8);
angka_1 = Math.floor(_loc1);
angka_2 = Math.floor(_loc2);
jawab = "";
Selection.setFocus(_root.answerBox);
stage.focus = _root.answerBox;
_root.answerBox.setSelection(0, 1);
}
function check_answer() {
if (angka_1+angka_2 == jawab) {
true_answer.play();
problem();
} else {
wrong_answer.play();
Selection.setFocus(_root.answerBox);
}
}

Langkah 7 : Klik tombol random dan masukkan action script berikut:

7th step : Click a random button and enter the following code:

on (press) {
problem();
}

Langkah 8: Klik tombol check dan masukkan action script berikut:

8th step : Click a check button and enter the following code:

on (press) {
check_answer();
}

Silahkan test movie, jika langkah di atas benar, maka hasilnya adalah sebagai berikut

Try to test movie, if the above steps correctly, the results are as follows:



31 comments :

  1. mantap ;;) mudah dipahami!! so makasi ya!!

    ReplyDelete
  2. Saya juga punya quis generator, silahkan coba
    http://mediaedukasi.blogspot.com/2009/03/quis-generator.html

    ReplyDelete
  3. waaa, udah lama banget saya kpengen belajar buat game flash.. tp apa daya otak tak sampai

    makasih infonya

    ReplyDelete
  4. mas, ok jg nih tutorial, tp knp ya, pas saya tekan tommbol check yang keluar sll wrong answer, walaupun jawaban yg di masukkan benar. tolong ya masss.tx

    ReplyDelete
  5. to all: terima kasih atas komennya
    to anonim : coba bawakan potongan script kamu pas tombol dipencet, copas disini, biar dibahas

    ReplyDelete
  6. mas , saya uda buat n copast scriptnya dr blog mas .

    tp napa pas saya pncet check. ga kluar kata2 wrong atau correcr answer mskipun saya masukin bner atau salah..

    berikut script saya .mhon di bantu
    ========================


    problem();
    function problem() {
    var _loc1 = 2+random(8);
    var _loc2 = 2+random(8);
    angka_1 = Math.floor(_loc1);
    angka_2 = Math.floor(_loc2);
    jawab = "";
    Selection.setFocus(_root.answerBox);
    stage.focus = _root.answerBox;
    _root.answerBox.setSelection(0, 1);
    }
    function check_answer() {
    if (angka_1+angka_2 == jawab) {
    true_answer.play();
    problem();
    } else {
    wrong_answer.play();
    Selection.setFocus(_root.answerBox);
    }
    }


    ================================

    trimakasih

    ReplyDelete
  7. iya..kok keluarnya wrong teruss..
    correctnya ga jd ya?

    ReplyDelete
  8. to anonim :
    ada banyak kemungkinan
    1. movie clip right answer dan movie clip wrng answernya belum di kasih instance name atw salah ketik
    2. pennggunaan tanda "==" yg seharusny 2 x ditulis 1 saja
    3. salah dlm script tombol check

    ReplyDelete
  9. selamat malam..

    saya mau tanya, saat game0nya sudah saya jalankan dan tombol check sudah ditekan, knp tetap wrong answer yang selalu keluar, padahal jwbn itu bnr?

    -mohon di balas ya mas-

    terimakasih

    ReplyDelete
  10. @khafid : pennggunaan tanda "==" yg seharusny 2 x ditulis 1 saja, coba periksa lagi

    ReplyDelete
  11. mas , tetep gk bisa muncul correctny ..
    gmn ?
    tolong dibalas ..
    thanks .. :)

    ReplyDelete
  12. gan.. kanyak nye ane tw deh kenapa slalu wrong answer mulu yg keluar... ane curiga ma scrip yg
    jawab = "";
    menurut ane brati jawab ntu hasil nya kosong (gak ada),
    brati harus ada yg ditambahin untuk ngisi variable jawab... tapi ane gk ngarti... heheh maklum ane gk jago flash.. ane biasa nya maen sama sodara perguruan nya flash.... DreamWeaver...

    klo misal nye ane salah ya maap" aja... ha ha ha

    ReplyDelete
  13. om.. bisa di jelasin maksut dari syntax" di atas... biar pada ngerti... klo cuma kopas doank rasa nya ada yg kurang....

    ReplyDelete
  14. gan... ane dah tw kenapa agan" pada wrong mulu yg keluar...

    ane otak atik semaleman akir nya ketemu juga

    jadi di tombol button yg check ditambahin srcipt
    var jawab = answerB0x.text;

    jadi srcip di check button :


    on(press){
    var jawab = answerBox.text;
    cek_answer()
    }


    yg bikin kenapa wrong mulu karena nilai dari input jawab tuh gk di simpen jadi y pas di cocokin ya salah mulu walau agan" jawab nye bener

    ReplyDelete
  15. mantap...
    saya bisa banyak belajar...
    thx

    ReplyDelete
  16. pngeeen bljar'x tpi ada yg lebih mudah gag ??

    ReplyDelete
  17. Tuk yg kasih bantuan di atas terima kasih banyak, sy pemilik blog ini gk nyangka komentnya byk kyk gini..
    btw, yg minta jelasin makna tiap script, sy coba jelasin yaa... mudahan bisa dimengerti

    problem();-----(fungsi buat problem dijalankan pertama kali load)
    function problem()----(membuat fungsi problem) {
    var _loc1 = 2+random(8);----(merandom bilangan pertama dgn var _loc1 dengan nilai awal 2 dan berakhir di angka 10 (2 + 8 = 10)
    var _loc2 = 2+random(8); ----(sama kyk di atas)
    angka_1 = Math.floor(_loc1);----- (melakukan pembulatan ke bawah bilangan random tadi.. misal 2,35, jadi 2.. klo 5,67 jadi 5)
    angka_2 = Math.floor(_loc2);---sama kyk di atas
    jawab = "";----------mengosongkan nilai jawab pertama kali
    Selection.setFocus(_root.answerBox)
    stage.focus = _root.answerBox;
    _root.answerBox.setSelection(0, 1); ----- (memfokuskan kursor pada kotak jawab);
    }
    function check_answer() {
    if (angka_1+angka_2 == jawab) { ----fungsi jika angka1+angka2 sama dengan jawab maka akan diteruskan
    true_answer.play();------mv clip tru answer play
    problem();-----fungsi problem kembali dijalankan
    } else {---------- jika tidak benar
    wrong_answer.play();----mv clip wrong answer dijalankan
    Selection.setFocus(_root.answerBox);------sudah dijelaskan di atas..
    }
    }

    ReplyDelete
  18. itung itung tambahin referensi game manula sprti saya www.shareisfree.blogspot.com

    ReplyDelete
  19. mantap..
    klo untuk pembagian gimana yah???
    perlu nih :)
    tolong dibalas ..
    thanks .. :)

    ReplyDelete
  20. to anonim :
    kenapa ngga keluar kata2 wrong atau correcr answer?
    jawabannya, mungkin karena tombol check-nya belum diberi instance neme "check_answer".

    to admin:
    saya mo nanya ni.. cara ngasih waktunya gimana?

    ReplyDelete
  21. asik boleh dicoba nih. thanks for sharing :D

    ReplyDelete
  22. terima kasih banyak telah berbagi informasi tentang membuat game flash matematika sederhana... semoga tuhan memberikan yang terbaik bagi kita semua

    ReplyDelete
  23. aku dah bisa semua cuman kok waktu jawaban nya betul/salah di kotak input text kluar tulisan "undefined"

    Mohon bantuan nya.

    ReplyDelete
  24. langkah 2 ,,,,dynamic text didapat dari mana ya?

    ReplyDelete
  25. udah tes... cuma kok wronng melulu yang keluar...

    ReplyDelete
  26. om saya mau nanya nih kalo udh buat action layer/layer2 tuh mau ngisi AS di random sama check dah ga bisa lagi gimana ya? trims yg dah sempetin buat jawab :D sama yg punya blog

    ReplyDelete