RSS

Flash8 & FlashCS3 — Membuat Kuis Matematika Sederhana

16 Mei

Halo.🙂

Postingan kali ini tentang membuat sebuah kuis matematika sederhana. Kuis ini terdiri atas pembagian dan perkalian. Akan digunakan 3 buah scene untuk kuis ini.

Software yang di gunakan :

Flash 8 dan Flash CS3

AS [ActionScript] yang digunakan :

AS 2.0

Preview hasil jadi :

Kuis matematika sederhana terdiri atas 2 jenis kuis yaitu pembagian dan perkalian, setiap kuis hanya terdiri atas 3 pertanyaan. Bagian atas adalah saat tombol pembagian di klik maka akan masuk ke kuis pembagian dan bagian bawah adalah saat tombol Perkalian di klik maka akan masuk ke dalam kuis perkalian. Untuk memberi efek pada button bisa di lihat di sini.

Gambar sebelah kiri adalah kondisi saat berhasil menjawab dengan benar semua pertanyaan yang ada. Gambar sebelah kanan adalah saat ada pertanyaaan yang tidak terjawab dengan benar.

Flash dari postingan ini bisa dilihat di sini

Pertama tama munculkan terlebih dahulu panel Scene dengan cara memilih menu Window -> Other Panels->Scene. Atau menggunakan shortcut dengan menekan Shift + F2.

Akan muncul panel Scene di tengah tengah. Drag panel tersebut ke pinggir sehingga menempel dengan panel lainnya atau taruh saja panel itu di tempat yang tidak akan mengganggu Anda bekerja.🙂

  • Rename Layer 1 menjadi Text dan buat lah seperti contoh di bawah ini. Cara untuk merubah warna background stage bisa di lihat di sini

Tulisan “Kuis Matematika Sederhana” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Jangan lupa untuk memberi nama btn_Play di kotak instance name.

  • Buat layer baru dan beri nama Actions. Kemudian ketikkan code di bawah ini : [Penjelasan code akan diberikan nanti]

stop();

_global.score = 0;

btn_Play.onRelease = function()

{

gotoAndPlay(“2”);

}

  • Buat seperti contoh di bawah ini pada frame 2 di layer Text.

Tulisan “Silakan pilih jenis kuis : ” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Jangan lupa untuk memberi nama btn_Pembagian di kotak instance name.

Jangan lupa untuk memberi nama btn_Perkalian di kotak instance name.

  • Isikan code berikut ini pada frame 2 di layer Actions :

stop();

btn_Pembagian.onRelease = function ()

{

gotoAndPlay(“Pembagian”, 1);

}

btn_Perkalian.onRelease = function ()

{

gotoAndPlay(“Perkalian”, 1);

}

  • Buka panel Scene dan rename name Scene 1 dengan nama Menu Utama. Cara untuk mengubah nama Scene adalah dengan men-double klik pada nama Scene. Kemudian tambahkan 2 buah Scene baru dengan menggunakan menu Insert->Scene atau dengan menekan tombol Add Scene pada Panel Scene.🙂 Ubah nama 2 scene baru tersebut dengan Pembagian dan Perkalian.

  • Intemezzo : Secara default Flash akan memainkan animasi atau movie sesuai dengan urutan Scene yang ada. Scene yang terletak paling pertama akan dimainkan terlebih dahulu seterusnya sesuai dengan urutan yang ada. Kecuali bila Anda merubah urutan tersebut dengan menggunakan code🙂 Kenapa saya bahas hal ini? Karena ada kemungkinan Anda akan mengubah urutan Scene yang ada dan nantinya bingung sendiri dengan dengan hasil yang muncul.😉
  • Klik scene Pembagian – Anda dapat mengetahui Scene mana Anda berapa dengan melihat pada Timeline – dan Anda akan masuk ke dalamnya. Rename layer 1 dengan nama Soal dan buat seperti contoh di bawah ini.

Tulisan “Soal pertama” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Pertanyaan  “12 / 3 = ” dibuat dengan menggunakan Text Tool dan Text type Static Text.

Kotak untuk memasukkan jawaban dibuat dengan menggunakan Text Tool dan Text type Input Text. Untuk membuat efek border seperti yang ada di contoh pilih “Show border around text”.  Jangan lupa untuk memilih warna text yang BUKAN warna putih. Nanti input jawaban Anda tidak akan terbaca😛

  • Buat layer baru dan beri nama Actions. Ketikkan code di bawah ini pada frame 1 layer Actions tersebut :

stop();

btn_Next1.onRelease = function()

{

if(soalpem1 == 4) {score++;}

gotoAndPlay(“2”);

}

  • Klik kanan pada frame 1 Layer Soal dan pilih Copy Frames. Kemudian klik kanan pada frame 2 dan pilih Paste Frames. Edit sehingga didapat hasil seperti di bawah ini :

Ubah nama soalpem1 pada kotak Variable menjadi soalpem2 dan nama btn_Next1 pada kotak instance name menjadi btn_Next2.

  • Isikan code berikut ini pada frame 2 Layer Actions :

stop();

btn_Next2.onRelease = function()

{

if(soalpem2 == 3) {score++;}

gotoAndPlay(“3”);

}

  • Klik kanan pada frame 1 layer Soal dan pilih Copy Frames. Kemudian klik kanan pada frame 3 dan pilih Paste Frames. Edit sehingga didapat hasil seperti di bawah ini :

Ubah nama soalpem1 pada kotak Variable menjadi soalpem3 dan nama btn_Next1 pada kotak instance name menjadi btn_Next3.

  • Isikan code berikut ini pada frame 3 Layer Actions :

stop();

btn_Next3.onRelease = function()

{

if(soalpem3 == 5) {score++;}

gotoAndPlay(“4”);

}

  • Buat text yang cukup besar dengan menggunakan Text Tool pada frame 4. Atur posisi text dan kemudian ubah Text Type text tersebut menjadi Dynamic Text.

Untuk membuat efek border seperti yang ada di contoh pilih “Show border around text”.  Jangan lupa untuk memilih warna text yang BUKAN warna putih. Nanti score akhir Anda tidak akan terbaca😛 Pastikan juga pilihan pada Line Type adalah Multiline.

  • Ketikkan code di bawah ini pada frame 4 layer Actions :

stop();

if(score == 3)

{

dyn.text = “Anda menang! Anda berhasil menjawab dengan benar ” + score + ” pertanyaaan yang ada. (^_^)”;

}

else

{

dyn.text = “Maaf Anda hanya berhasil menjawab dengan benar ” + score + ” dari 3 pertanyaan yang ada. Silakan coba lagi (^_^)”;

}

  • Test movie dengan menekan Ctrl + Enter.
  • Anda sudah bisa melakukan sendiri sisanya untuk kuis Perkalian bukan?😉

Penjelasan code :

stop();

_global.score = 0;

btn_Play.onRelease = function()

{

gotoAndPlay(“2”);

}

Menghentikan movie pada frame ini. Kemudian mendefinisikan sebuah variabel global [variabel  yang nantinya akan ada sampai movie selesai dimainkan] bernama score yang di isi dengan nilai 0. Kemudian pada saat button bernama btn_Play ditekan dan dilepaskan movie akan berjalan menuju frame ke 2.

stop();

btn_Pembagian.onRelease = function ()

{

gotoAndPlay(“Pembagian”, 1);

}

btn_Perkalian.onRelease = function ()

{

gotoAndPlay(“Perkalian”, 1);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Pembagian ditekan dan dilepaskan movie akan berjalan menuju frame ke 1 dari Scene Pembagian. Kemudian pada saat button bernama btn_Perkalian ditekan dan dilepaskan movie akan berjalan menuju frame ke 1 dari Scene Perkalian.

stop();

btn_Next1.onRelease = function()

{

if(soalpem1 == 4) {score++;}

gotoAndPlay(“2”);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Next1 ditekan dan dilepaskan akan dilakukan pengecekan apakah nilai dari variabel soalpem1 sama dengan 4, bila iya maka variabel score akan bertambah nilainya [++ sama dengan +1] dan movie akan berjalan menuju frame ke 2.

stop();

btn_Next2.onRelease = function()

{

if(soalpem2 == 3) {score++;}

gotoAndPlay(“3”);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Next2 ditekan dan dilepaskan akan dilakukan pengecekan apakah nilai dari variabel soalpem2 sama dengan 3, bila iya maka variabel score akan bertambah nilainya [++ sama dengan +1] dan movie akan berjalan menuju frame ke 3.

stop();

btn_Next3.onRelease = function()

{

if(soalpem3 == 5) {score++;}

gotoAndPlay(“4”);

}

Menghentikan movie pada frame ini. Kemudian pada saat button bernama btn_Next3 ditekan dan dilepaskan akan dilakukan pengecekan apakah nilai dari variabel soalpem3 sama dengan 5, bila iya maka variabel score akan bertambah nilainya [++ sama dengan +1] dan movie akan berjalan menuju frame ke 4.

stop();

if(score == 3)

{

dyn.text = “Anda menang! Anda berhasil menjawab dengan benar ” + score + ” pertanyaaan yang ada. (^_^)”;

}

else

{

dyn.text = “Maaf Anda hanya berhasil menjawab dengan benar ” + score + ” dari 3 pertanyaan yang ada. Silakan coba lagi (^_^)”;

}

Menghentikan movie pada frame ini. Kemudian dilakukan pengecekan apakah nilai dari variabel score sama dengan 3. Bila iya maka akan ditampilkan tulisan Anda menang! Anda berhasil menjawab dengan benar [score akhir] pertanyaaan yang ada. (^_^). Karena  sudah pasti score akhir adalah 3 maka yang akan tertampil adalah tulisan Anda menang! Anda berhasil menjawab dengan benar 3 pertanyaaan yang ada. (^_^). Bila tidak maka yang akan tertampil adalah tulisan Maaf Anda hanya berhasil menjawab dengan benar [score akhir] dari 3 pertanyaan yang ada. Silakan coba lagi (^_^). Score akhir dari pilihan yang ini akan berisi nilai yang sesuai dengan banyaknya pertanyaaan yang terjawab dengan benar, contohnya bila hanya 1 pertanyaan yang terjawab dengan benar maka akan tertampil Maaf Anda hanya berhasil menjawab dengan benar 1 dari 3 pertanyaan yang ada. Silakan coba lagi (^_^).

Hasil jadi (*.fla) bisa di lihat di :

FLASH8

FLASHCS3

Terima kasih sudah mampir dan membaca blog saya. (^_^)

 
22 Komentar

Ditulis oleh pada Mei 16, 2011 in Flash

 

Tag: , ,

22 responses to “Flash8 & FlashCS3 — Membuat Kuis Matematika Sederhana

  1. Wb Aryo

    Juli 10, 2011 at 3:34 pm

    Wah boni ngeblog juga..

    Berbagi program ya ceritanya.. Mantab euy..

    Lanjutkan yaakkzz..

    #saran, mungkin bisa pake Tag More, jadi yg dihalaman depan ga terlalu panjang, sehingga pembaca kalo mau tau lebih, bisa klik More.🙂

    Suka

     
    • 8oni

      Juli 10, 2011 at 3:43 pm

      Makasih sarannya😀 Segera ane kerjakan :3
      Makasih dukungannya🙂

      Suka

       
  2. Lee

    Juni 2, 2012 at 2:57 pm

    Bang asya mau bertanya …
    bagaimana cara membuat bottom petunjuk sehingga muncul layar petunjuk..
    sekalian script nya ya bang..
    terima kasih…

    Suka

     
    • 8oni

      Juni 2, 2012 at 4:09 pm

      Pakai contoh kuis matematika sederhana ini saja ya?
      Kamu dl fla nya [tidak di dl juga nga apa apa sih, nanti saya kasih link kuis ini yang sudah saya kasih button petunjuknya], terus di scene yang mau kamu kasih petunjuk cara mainnya [karena contoh di kuis ini menggunakan 3 scene] bikin saja layer baru, kasih nama Petunjuk biar gampang dicari lagi nanti.
      Lalu kamu buat button pentunjuknya. Kasih nama btn_Petunjuk
      Terus kamu buat petunjuknya [contoh yang saya buat adalah tulisan pakai Text Tool + Rectangle Tool, kamu tidak perlu mengikuti contoh saya kalau kamu bisa membuat yang lebih bagus🙂 ] dan kamu ubah menjadi Movie Clip, di kotak Instance Name kasih nama mc_Petunjuk.
      Terus di frame Actions kasih code kayak gini : [Saya buat Petunjuk ini di Scene Pembagian frame 1, code yang saya tebalin adalah code yang baru]
      stop();

      mc_Petunjuk._visible = false;

      btn_Petunjuk.onRelease = function()
      {
      mc_Petunjuk._visible = true;
      }

      mc_Petunjuk.onRelease = function()
      {
      mc_Petunjuk._visible = false;
      }

      btn_Next1.onRelease = function()
      {
      if(soalpem1 == 4) {score++;}
      gotoAndPlay(“2”);
      }

      Penjelasan code :


      mc_Petunjuk._visible = false; <— membuat mc_Petunjuk ilang saat masuk ke frame

      btn_Petunjuk.onRelease = function() <— saat button btn_Pentunjuk ditekan
      {
      mc_Petunjuk._visible = true; <— mc_Petunjuk akan kelihatan
      }

      mc_Petunjuk.onRelease = function() <— saat mc_Pentunjuk ditekan
      {
      mc_Petunjuk._visible = false; <— mc_Petunjuk akan hilang lagi

      }

      Contoh diatas membuat petunjuk cara bermain kelihatan saat button diklik dan hilang lagi saat petunjuknya diklik. Kalau mau buat agar petunjuk nya hilang saat button/petunjuk diklik codenya jadi begini :

      mc_Petunjuk._visible = false;

      btn_Petunjuk.onRelease = function()
      {
      if(mc_Petunjuk._visible == true){mc_Petunjuk._visible = false;}
      else{mc_Petunjuk._visible = true;}
      }

      mc_Petunjuk.onRelease = function()
      {
      mc_Petunjuk._visible = false;
      }


      Yang ini saya tidak kasih penjelasan codenya🙂
      Semoga membantu😀
      Link postingan kuis di atas dengan tambahan button Petunjuk : http://www.ziddu.com/download/19545932/uisMatematikaSederhanaFLASHCS3denganbuttonPetunjuk.rar.html

      Suka

       
  3. alfandy

    Juli 9, 2012 at 7:50 pm

    mas kenapa di menu utama saat saya tekan tombol play kok ga manggil frame 2 yang silahkan pilih kuis itu lho mas,, sy bingung nih,, langkah langkahnya udah sama,, cuman saya bingung dimana salah nya,,, mohon pencerahannya mas,, makasih..

    Suka

     
    • 8oni

      Juli 9, 2012 at 9:18 pm

      Coba ganti code gotoAndPlay(“2”); dengan gotoAndPlay(2);. Kadang Flash tidak mau bekerja hanya karena perbedaan kecil seperti itu. Kalau misalnya masih belum bisa upload fla kamu, terus kasih linknya ke saya ntar saya coba cek.

      Suka

       
    • alfandy

      Juli 9, 2012 at 11:15 pm

      yang tadi udah

      Suka

       
    • alfandy

      Juli 9, 2012 at 11:19 pm

      yang tadi udah sukses mas, sekarang knapa saat tomBol pemBagian di menu utama ditekan, ga manggil soal pemBagian mas,,??? ini link latihan say tolong di cek mas..
      http://www.ziddu.com/download/19879501/latihankuisflash.rar.html

      Suka

       
    • 8oni

      Juli 10, 2012 at 9:03 am

      Waduh… Sementara ini Ziddu tidak bisa dipakai sepertinya😦 [ https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/205344_451360108216352_194452841_n.jpg ] Coba kamu geser frame yang ada di scene Pembagian sebanyak 1 buah. Jadi frame no 1 isinya kosong. [Gambar : https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/541396_451376711548025_1281887377_n.jpg ] Cara menggesernya : Klik frame 1 layer paling atas [Actions] sambil tekan Shift. Terus masih dengan menekan Shift kamu klik frame di paling ujung kanan di layer bawah [frame 4 layer Soal]. Habis itu baru kamu geser framenya 1. Ntar codenya tinggal disesuaikan saja yang di Scene Pembagian. Yang di scene lain nga usah diganti.
      Maaf, kemarin saya baru instal ulang komputer nga berani dl link nya habis liat ada tulisan Virus:/

      Suka

       
    • alfandy

      Juli 9, 2012 at 11:23 pm

      mohon pencerahannya mas dan trimakasih..

      Suka

       
  4. ramden

    September 20, 2012 at 10:19 pm

    ga bisa donwload…mana….

    Suka

     
    • 8oni

      September 21, 2012 at 6:52 pm

      ?? Saya cek linknya bisa kok gan. Nanti saya upload ulang kalo begitu🙂

      Suka

       
  5. Tila

    Mei 23, 2013 at 1:35 pm

    mas, kenapa script terakhirnya tidak jalan.. jawaban soal nya berar semua ttapi komennya maaf anda hanya bisa mnjawab 0 dari 3 soal. mksih

    Suka

     
    • 8oni

      Mei 23, 2013 at 6:06 pm

      Script yang error yang dari fla di atas? Nanti akan saya cek. Tunggu sebentar.

      Sudah saya cek fla nya tidak ada masalah kok. Script bagian mana? Pembagian atau perkalian?

      Suka

       
  6. heri

    Juli 17, 2013 at 12:10 am

    iya gan ini udah di jawab semua hasil ttp 0 sama kyk mba tila, mungkin ada masalah di +score+ bisa di declarasikan apa sih guna tanda + nya itu, jadi si variable score gak nongol gitu

    Suka

     
    • 8oni

      Juli 17, 2013 at 12:31 am

      Sudah saya upload ulang ke Media Fire fla postingan di atas. Coba dibuka. Kalau masih error silakan komentar lagi.

      Suka

       
  7. heri

    Juli 17, 2013 at 12:55 am

    iya yah gak bermasalah , apa ini krn aku buat nya 1 scene. hehehe
    aku buat 1 scene , kyknya bermasalah di _global.score=0;
    tapi makasih fastt respoonnnn nyaaa gokil dah blognya 100 jempol deh

    coba lirik deh http://www.2shared.com/file/c5jtD-IM/Test.html
    aku pake flash 8 , mau izin sedot idenya buat di tugas akhirku . T_T

    Suka

     
    • 8oni

      Juli 17, 2013 at 2:29 am

      Pakai Flash8 ya? Saya tidak bisa save pekerjaan yang sudah diedit karena nanti jadi ke FlashCS5 dan tidak bisa agan buka. Saya kasih tahu saja script yang harus disesuaikan.

      Frame yang ada pilihan Perkalian/Pembagian, karena agan pakai 1 scene dan bukan 3 seperti di contoh jadi ubah saja seperti ini :

      stop();
      btn_Penjumlahan.onRelease = function ()
      {
      gotoAndPlay(3); // karena mulai penjumlahan dari frame ke 3
      }

      btn_Pengurangan.onRelease = function ()
      {
      gotoAndPlay(sesuaikan saja dengan frame dimana pengurangan dimulai);
      }

      Frame ke 5 kotak Input Text, harusnya pada kotak var ditulis soalpenj3 tapi agan tulis soalpenj2

      Lalu kenapa score tidak dihitung itu bukan masalah di _global.score=0, tapi karena agan mencentang pilihan Auto Kern pada kotak Input Text. Jangan tanya kenapa, tapi setelah saya menghilangkan itu dari projek agan, fla agan berjalan lancar. Jadi pada kotak Input Text silakan lihat di bagian Properties cari ada tulisan Auto Kern, hilangkan itu dan test ulang projek agan.
      Silakan pakai fla yang saya share untuk TA agan dan semoga sukses, kalau ada masalah silakan tanya lagi🙂

      Suka

       
  8. sahrularifin

    Desember 8, 2013 at 11:11 pm

    mas brro… saya ingin mengulang proses pembagian…. pada scene pembagian frame ke 4… saya tambahkan button untuk kembali ke frame 1… tapi kenapa pada saat saya kembali mengisi… score yang saya dapat pada proses yang kedua… hasil score yang saya dapat itu adalah score proses pertama ditambah score proses kedua…. bagaimana cara untuk menghilangkan score pada proses pertama tadi mas bro….???

    Suka

     
    • 8oni

      Desember 9, 2013 at 9:25 pm

      Ini karena text nya menggunakan Input Text. Jadi Text ini sudah terlanjur diset dengan nilai dari var yang ada [pem1 dst] jadi ini nga bisa diisi lagi. Kalau mau diisi dengan nilai lain perhitungannya akan jadi kacau.
      Jadi solusinya mau tidak mau jangan pakai Input Text. Karena ini memang tidak bisa untuk diulang.
      Rencananya saya mau bikin ulang ini pakai AS3. Maaf nga bisa bantu, saya sudah tidak menggunakan AS2 lagi soalnya. Karena saya sekarang konsentrasi belajar ke AS3.

      Suka

       
  9. ahmad

    Juni 9, 2016 at 9:47 pm

    gan coding perkalian matriks 1×2&2×1 itu kayak apa gan?

    Suka

     
    • 8oni

      Juni 10, 2016 at 9:30 am

      Pertanyaan yang bagus, akan saya coba buat postingan tentang itu kalau sempat. Kalau sempat. Saya tidak berjanji tapi🙂

      Suka

       

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: