MEMBUAT GAME KUIS


FLASH TUTORIAL - Membuat Game Kuis

Pada tutorial kali ini saya akan menjelaskan bagaimana cara membuat game dengan menggunakan Adobe Flash cs5 dan menggunakan actionscript 3.0. Actionscript 3.0 sudah menjadi bahasa pemrograman flash yang populer.

Game Kuis ini terdiri dari 3 buah pertanyaan, pilihan ganda, dan terdapat skor permainan.

Gambar 1. Tampilan game kuis
Gambar 1. Tampilan game kuis

Berikut langkah-langkah pembuatan Game Kuis :
1. Buka program Adobe flash cs5, saat memasuki program Adobe flash cs5 pilih actionscript 3.0

2. Pada workspace/lembar kerja siapkan 3 buah layer, yaitu dari yang paling atas adalah layer action, layer teks, dan layer button.

3. Selanjutnya pada layer teks buatlah tulisan seperti pada gambar 1., ketikan "Kuis Cerdas Cermat" menggunakan Text tool.

4. Pilih layer button, dan buatkan tombol "mulai". Hal yang pertama dilakukan adalah tuliskan "mulai" pada lembar kerja menggunakan Text tool, tekan F8 dan jadikan button.

5. Langkah berikutnya tambahkan frame baru, yaitu layer 2 frame 2 dengan menekan F7.

6. Lakukan untuk layer button, layer teks, dan layer action maka akan tercipta Keyframe kosong.
Pada Keyframe kosong buatlah seperti gambar dibawah ini :
Gambar Soal Kuis
Gambar Soal Kuis
7. Untuk soal yang pertama tedapat tulisan "Siapakah nama presiden RI yang pertama ?", tulisan ini terdapat pada layer teks di frame 2. Untuk pilihan ganda "a. Suharto, b. Sukarno, c. Megawati, dan d. Habibie", dibuat pada layer button frame 2. Pilihan ganda ini dibuat menggunakan teks tool dan masing-masing diubah kedalam button (F8).

8. Jika sudah selanjutnya memasuki soal ke 2, dapat dilihat pada gambar dibawah :

Gambar 3. Soal ke 2
Gambar 3. Soal ke 2

9. Soal yang kedua sama halnya dengan yang disoal pertama, langkah-langkahnya dapat dilihat pada langkah ke 7.

10. Selanjutnya memasuki soal yang ke 3, dapat dilihat pada gambar dibawah ini :

Gambar 4. Soal ke 3
Gambar 4. Soal ke 3

11. Untuk soal yang ke 3, langkah-langkahnya dapat dilihat seperti langkah no 8.
12. Jika telah melakukan langkah-langkah diatas selanjutnya ketahap berikutnya, yaitu membuat halaman skor/halaman akhir.

perhatikan seperti pada gambar dibawah ini :

Gambar 5. Tampilan akhir game kuis
Gambar 5. Tampilan akhir game kuis

13. Pada tampilan akhir tedapat tulisan "Skor anda ?", tulisan ini buat di layer teks dan frame 5. Sedangkan kolom skor dibuat di layer button. Untuk kolom dibuat menggunakan Teks tool dengan Type text-nya adalah Dynamic text. Berikan intance name untuk kolom skor, beri nama total_skor_txt.

15. Jika semua soal sudah dibuat, selanjutnya memberikan nama untuk masing-masing intance name button.

untuk halaman pertama : tombol mulai --> instance name = mulai.
untuk halaman kedua : tombol suharto --> instance name = suharto.
                                   tombol sukarno --> instance name = sukarono.
                                   tombol megawati --> instance name = megawati.
                                   tombol habibie --> instance name = habibie.

halaman ketiga : tombol jawa timur --> instance name = jatim
                         tombol jawa tengah --> instance name = jateng
                         tombol sumbawa --> instance name = sumbawa
                         tombol lombok barat --> instance name = lobar

halaman keempat : tombol pak usman --> instance name =  usman
                             tombol ardy --> instance name = ardy
                             tombol anna budiana --> instance name = anna
                             tombol sumanto --> instance name = sumanto

14. Sekarang memasuki action. Pada layer actionscript frame 1, ketikan script berikut :

import flash.events.MouseEvent;

stop();

mulai.addEventListener(MouseEvent.CLICK,btn_mulai);
function btn_mulai(e:MouseEvent):void{
gotoAndStop(2);
}


15. Pada layer action frame 2, ketikan script berikut :

stop();

suharto.addEventListener(MouseEvent.CLICK,btn_suharto);
function btn_suharto(e:MouseEvent):void{
   gotoAndStop(3);//jawaban salah
}

sukarno.addEventListener(MouseEvent.CLICK,btn_sukarno);
function btn_sukarno(e:MouseEvent):void{
gotoAndStop(3);
   skor+=1;//jawaban benar
}

megawati.addEventListener(MouseEvent.CLICK,btn_megawati);
function btn_megawati(e:MouseEvent):void{
   gotoAndStop(3);// jawaban salah
}

habibie.addEventListener(MouseEvent.CLICK,btn_habibie);
function btn_habibie(e:MouseEvent):void{
gotoAndStop(3);// jawaban salah
}


16. Pada layer action frame 3.

stop();

jatim.addEventListener(MouseEvent.CLICK,btn_jatim);
function btn_jatim(e:MouseEvent):void{
   gotoAndStop(4);//jawaban salah
}

jateng.addEventListener(MouseEvent.CLICK,btn_jateng);
function btn_jateng(e:MouseEvent):void{
gotoAndStop(4);
//jawaban salah
}

sumbawa.addEventListener(MouseEvent.CLICK,btn_sumbawa);
function btn_sumbawa(e:MouseEvent):void{
   gotoAndStop(4);// jawaban salah
}

lobar.addEventListener(MouseEvent.CLICK,btn_lobar);
function btn_lobar(e:MouseEvent):void{
    gotoAndStop(4);
    skor+=1;///jawaban benar
}

17. Pada layer action frame 4.

stop();
usman.addEventListener(MouseEvent.CLICK,btn_usman);
function btn_usman(e:MouseEvent):void{
  gotoAndStop(5);//jawaban salah
}

ardy.addEventListener(MouseEvent.CLICK,btn_ardy);
function btn_ardy(e:MouseEvent):void{
  gotoAndStop(5);
  skor+=1;
}

anna.addEventListener(MouseEvent.CLICK,btn_anna);
function btn_anna(e:MouseEvent):void{
gotoAndStop(5);// jawaban salah
}

sumanto.addEventListener(MouseEvent.CLICK,btn_sumanto);
function btn_sumanto(e:MouseEvent):void{
   gotoAndStop(5);
}

18. Pada layer action frame 5.

import flash.text.TextField;

stop();
total_skor_txt.text=""+skor;

19. Setelah itu tambahkan layer baru diatas layer action, berikan nama layer action2. Pada layer action2 frame 1 ketikkan script berikut :

var skor:Number =0;

20. tekan Ctrl+Enter untuk menjalankan program.

PS : Biasanya ketika program dijalankan terjadi masalah, karena fontnya tidak mendukung. Oleh karena itu hal yang dilakukan adalah berubah Anti-Alias nya menjadi Use Device Font.

~ Semoga bermanfaat.

Flash tutorial || tutorial flash || Ilmu Flash || Dasar Membuat Game Dengan Adobe Flash

MEMBUAT GAME KUIS MEMBUAT GAME KUIS Reviewed by Ardy S on January 10, 2013 Rating: 5

37 comments:

  1. Makasih sob tutorialnya, bisa saya coba nih untuk kuis matematika :D

    ReplyDelete
  2. Try Out Online Ayo gabung dan berpatisipasi di Kompetisi Cerdas Cermat Online se-Jawa Timur seri yang ke-2. Gratis!!
    Hadiah menarik dan jutaan rupiah ada juga Tablet PC, buruan ikut !

    ReplyDelete
  3. gan, udah di test tutorialnya..ada masalah di bagian scorenya nih. Jawabannya bener semua, tapi cuma dpt score 1 :( ini salahnya di bagian apanya ya gan? ?

    ReplyDelete
    Replies
    1. mungkin masalah di teks scorenya gan.. coba cek di file fla-nya.. mungkin ada type font di dynamic text-nya harus pake "use device font".

      Delete
  4. gan nice postingan :3 ane nyari2 susah2 gan yang membahas actionscript 3.0 susah banget thanks gan, visit balik

    ReplyDelete
  5. gan setiap aku buat soal dengan jumlah 5 soal yang bisa di baca hanya 4 soal aj...
    dan aku juga membuat soal dengan jumlah 6 soal yang bisa di baca hanya 5 soal aj...
    ini yang kurang apanya???

    ReplyDelete
    Replies
    1. Untuk soalnya acak ya gan.. ?
      soalnya tutorial diatas soalnya gk ngacak..

      Delete
    2. mkst saya jumlah skornya gan..
      dari 6 soal, skor yang bisa terbaca hanya 5 skor.
      padahal jumlah soalnya ada 6 soal..
      dan soal yang terakhir nilai skory tidak pernah terbaca..

      Delete
    3. tempat saya juga kaya gitu...

      Delete
    4. Coba dilihat lagi penulisan score-nya gan untuk pilihan gandanya, mungkin ada penulisannya yg salah.. :D

      Delete
    5. untuk penulisan skor semuanya sudah saya cek, tapi memang nilai skornya untuk nilai soal yang terakhir tidak muncul...
      in gimana gan???

      Delete
    6. low boleh saya minta fla gan untuk reverensi...
      terimakasih..

      Delete
    7. ardy.addEventListener(MouseEvent.CLICK, fl_ClickToGoToNextFrame);

      function fl_ClickToGoToNextFrame(event:MouseEvent):void
      {
      skor+=1;
      nextFrame();

      }

      coba var skor nya simpan di atas next frame

      Delete
    8. makasih gan, tutorialnya bermanfaat banget.

      untuk fuad wardana, terima kasih udah ngasih solusi

      Delete
  6. Numpang nanya dong :)

    punyaku masalahnya skornya cuman nampil angka 1 padahal dynamic textnya udah ku bikin use device font. Pemecahannya gimna kira - kira?

    #makasih

    ReplyDelete
    Replies
    1. coba dilihat lagi penulisan scriptnya :D

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Replies
    1. Untuk sementara ane bisa share dulu gan.. :|

      Delete
  9. Kalo setelah di jalankan hasilnya bergerak.apa masalahnya gan???? mksh

    ReplyDelete
  10. kalo acak soal gmn gan?makasih

    ReplyDelete
  11. kalau biar soalnya acak gmn y?terima kasih

    ReplyDelete
    Replies
    1. Untuk sementara ane bisa share ini dulu gan.. :|

      Delete
  12. gan skor saya kok gak muncul gan ?
    muncul tapi engk valid dengan jawaban yg sebelumnya saya kasih benar

    ReplyDelete
    Replies
    1. coba perhatikan lagi penulisan scriptnya, atau perhatikan lagi tipe teks yang digunakan.

      Delete
  13. Kak Ada tutoriol vedeonya gak ,gak paham mulak Dari 5

    ReplyDelete
    Replies
    1. Coba download tutorialnya disini http://adf.ly/H9vtF

      Delete
  14. Download SOFT Adobe Flash cs 6 >>
    http://sudonlod.blogspot.co.id/2015/10/download-adobe-flash-cs-6-free.html

    ReplyDelete
  15. Game Flash ya,,,konsep gamenya kayak skripsi teman ane Mas...

    ReplyDelete
    Replies
    1. barangkali konsepnya ambil dari sini gan.. :D hhe

      Delete
  16. Mas, ada tutor tentang kuis acak soal ga?
    Butuh banget nih buat skripsi

    ReplyDelete

Powered by Blogger.