SlideShare a Scribd company logo
1 of 7
Download to read offline
Membuat Quiz Sederhana dengan
ActionScript 2.0
Oleh: Gilang Abdul Aziz



Setelah kita selesai membuat skenario, selanjutnya pada akhir skenario kita akan
menampilkan quiz.
Pertama kita membuat Scene baru terlebih dahulu. Kita berinama Scene tersebut ‘Quiz’




                                    Figure 1 - Insert new Scene

Setelah Scene Quiz dibuat, selanjutnya kita persiapkan layer terlebih dahulu. Itu akan
memudahkan kita dalam pembuatan objek-objek yang nanti akan kita pakai.
Kita buat 4 layer, terdiri dari:




                                     Figure 2 - Prepare Layers

Selanjutnya pada layer Pertanyaan Frame 1, kita isi dengan sebuah teks




                                       Figure 3 - Insert Text

Kemudian pada layer Jawaban Frame 1, kita isi dengan 3 buah teks. Perhatikan pula jarak
antara tiap jawaban jangan terlalu dekat.

                                                                                          1
Figure 4 - Insert Text

Selanjutnya kita akan membuat tombol untuk di klik saat memilih jawaban. Ada 3 buah
tombol. Posisi tiap tombol disesuaikan dengan pilihan jawaban nya.
Pada layer Tombol, Frame 1, Pertama-tama kita buat sebuah box,




                                       Figure 5 - Insert Box

Selanjutnya pada box tersebut kita buat sebuah text sesuai dengan pilihan.




                                Figure 6 - Insert Text above the Box

Copy/paste box dan text yang sudah kita buat tersebut ke tiap pilihan jawaban. Tentunya
jangan lupa kita ubah teks nya, sesuaikan dengan pilihan jawaban nya.




                                    Figure 7 - Clone the Object



                                                                                          2
Setelah ketiga objek tersebut siap, sekarang kita akan mengubah ketiga objek tersebut
menjadi tombol yang bisa diklik.
Kita seleksi dulu objek box beserta teks nya.




                                   Figure 8 - Select the Object

Kemudian klik kanan pada objek yang sudah kita seleksi tersebut, pilih Convert to Symbol.




                                   Figure 9 - Convert to Symbol

Selanjutnya akan keluar dialog, pada dialog tersebut kita diharuskan untuk mengisi nama
symbol dan jenis symbol apa yang akan kita buat.
Kita pilih Button dan isi namanya dengan ‘A’




                                  Figure 10 - Convert to Symbol

Jika sudah berhasil, maka pada library akan bertambah satu symbol baru bertipe button.
Seperti di bawah ini.


                                                                                            3
Figure 11 - Library

Selanjutnya adalah kita lakukan ulang untuk tiap objek yang tadi sudah kita buat untuk
pilihan B dan C. Jangan lupa box dan teksnya harus terseleksi sempurna.
Jika sudah, maka pada library akan ada 3 buah symbol bertipe tombol seperti di bawah ini.




                                    Figure 12 - Library Final

Persiapan quiz sudah hampir selesai, sekarang kita akan membuat respon yang terjadi jika
user manjawab. Benar atau salah.
Jika benar, playhead akan berpindah ke Frame 2. Jika salah akan berpindah ke Frame 3.
Selanjutnya pada Layer Respon pada Frame 2, kita insert blank keyframe.




                                   Figure 13 - Insert Keyframe

Lakukan hal yang sama pada frame 3. Sehingga pada layer respon akan tersedia pada
sampai frame 3 seperti di bawah ini.



                                                                                            4
Figure 14 - Keyframe

Kita simpan playhead pada Frame 2 pada layer Respon, kita isi dengan teks:




                                     Figure 15 - Insert Text (True)

Pada Frame 3 kita isi dengan teks:




                                     Figure 16 - Insert Text (False)

Semua persiapan sudah beres, saatnya kita akan melakukan coding. Memberikan
ActionScript 2.0 pada objek-objek yang akan berinteraksi.
Sebelumnya kita buat dulu sebuah layer baru bernama ‘Aksi’. Simpan pada posisi paling
atas, untuk memudahkan.




                                     Figure 17 - Insert new Layer

Kita pilih layer Aksi, pada Frame 1, klik kanan, kemudian pilih Actions:


                                                                                        5
Figure 18 - To The Actions

Nanti akan tampil Panel Actions, seperti ini




                                    Figure 19 - Actions Panel in Frame 1

Kita isi dengan code berikut ini:




                                        Figure 20 - ActionScript 2.0

Selanjutnya kita pilih Button A pada layer Tombol di Frame 1, klik kanan pilih Actions seperti
tadi. Kita isikan dengan code seperti di bawah ini:




                                        Figure 21 - ActionScript 2.0

                                                                                             6
Lakukan hal yang sama untuk Button B dan C. Tapi perhatikan terlebih dahulu, pada Button
B dan C, parameter yang dimasukan adalah 3, itu artinya jawaban B dan C adalah salah,
jawaban A adalah benar.




                                  Figure 22 - ActionScript 2.0




Selanjutnya kita test movie, maka quiz sederhana sudah kita buat.
Ketika user meng-klik jawaban A akan tampil respon jawaban anda benar. Sebaliknya jika
user memilih B atau C akan tampil respon jawaban salah.

Setelah berhasil membuat quiz ini kita akan bisa mengembangkan untuk membuat quiz
dengan tipe yang sama dan tentunya dengan soal yang lebih banyak serta interaksi yang
lebih kompleks.




                                                                                           7

More Related Content

Similar to Membuat Quiz dengan Flash

Cara membuat latihan pilihan ganda di macromedia flash
Cara membuat latihan pilihan ganda di macromedia flashCara membuat latihan pilihan ganda di macromedia flash
Cara membuat latihan pilihan ganda di macromedia flashVidi Al Imami
 
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Muhammad Yusuf
 
Sulhan Animasidgimageready
Sulhan AnimasidgimagereadySulhan Animasidgimageready
Sulhan AnimasidgimagereadyRaden Alif
 
Laporan pratikum v mulmet
Laporan pratikum v mulmetLaporan pratikum v mulmet
Laporan pratikum v mulmetrahmi wahyuni
 
Three Days Making Android Game (with Flash) DAY 2
Three Days Making Android Game (with Flash) DAY 2Three Days Making Android Game (with Flash) DAY 2
Three Days Making Android Game (with Flash) DAY 2Aryo Prakoso
 
Modul pembelajaran dst tmk thn 2 sk
Modul pembelajaran dst tmk thn 2 skModul pembelajaran dst tmk thn 2 sk
Modul pembelajaran dst tmk thn 2 skwmzuri
 
Modul Pembelajaran DST TMK Tahun 2
Modul Pembelajaran DST TMK Tahun 2Modul Pembelajaran DST TMK Tahun 2
Modul Pembelajaran DST TMK Tahun 2Lieya Rayyan
 
Modul Pembelajaran TMK Tahun 2
Modul Pembelajaran TMK Tahun 2Modul Pembelajaran TMK Tahun 2
Modul Pembelajaran TMK Tahun 2inazaliahmad
 
Membuat kuis interaktif sederhana
Membuat kuis interaktif sederhanaMembuat kuis interaktif sederhana
Membuat kuis interaktif sederhanaWidya Assalma
 
Teks Berjalan di Aplikasi Dekstop dengan VB.Net
Teks Berjalan di Aplikasi Dekstop dengan VB.NetTeks Berjalan di Aplikasi Dekstop dengan VB.Net
Teks Berjalan di Aplikasi Dekstop dengan VB.NetNazær Upiin
 
Merubah foto jadi sebuah slide puzzle
Merubah foto jadi sebuah slide puzzleMerubah foto jadi sebuah slide puzzle
Merubah foto jadi sebuah slide puzzleAgung Yuwono
 
Tutorial cara menjadi master desain grafis tanpa sekolah dan kuliah
Tutorial cara menjadi master desain grafis tanpa sekolah dan kuliahTutorial cara menjadi master desain grafis tanpa sekolah dan kuliah
Tutorial cara menjadi master desain grafis tanpa sekolah dan kuliahAyana Shahab
 
Modul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUIModul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUIRido Budiman
 
Pertemuan 62
Pertemuan 62Pertemuan 62
Pertemuan 62kusanti
 
M7 pembuatan animasi_game_flash_
M7 pembuatan animasi_game_flash_M7 pembuatan animasi_game_flash_
M7 pembuatan animasi_game_flash_Basori Muhammad
 
Tutorial Animasi menggunakan macromedia Flash 8
Tutorial Animasi menggunakan macromedia Flash 8Tutorial Animasi menggunakan macromedia Flash 8
Tutorial Animasi menggunakan macromedia Flash 8Farichah Riha
 

Similar to Membuat Quiz dengan Flash (20)

Cara membuat latihan pilihan ganda di macromedia flash
Cara membuat latihan pilihan ganda di macromedia flashCara membuat latihan pilihan ganda di macromedia flash
Cara membuat latihan pilihan ganda di macromedia flash
 
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2Modul 5   pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
Modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2
 
Sulhan Animasidgimageready
Sulhan AnimasidgimagereadySulhan Animasidgimageready
Sulhan Animasidgimageready
 
Laporan pratikum v mulmet
Laporan pratikum v mulmetLaporan pratikum v mulmet
Laporan pratikum v mulmet
 
8
88
8
 
Three Days Making Android Game (with Flash) DAY 2
Three Days Making Android Game (with Flash) DAY 2Three Days Making Android Game (with Flash) DAY 2
Three Days Making Android Game (with Flash) DAY 2
 
Modul pembelajaran dst tmk thn 2 sk
Modul pembelajaran dst tmk thn 2 skModul pembelajaran dst tmk thn 2 sk
Modul pembelajaran dst tmk thn 2 sk
 
Modul Pembelajaran DST TMK Tahun 2
Modul Pembelajaran DST TMK Tahun 2Modul Pembelajaran DST TMK Tahun 2
Modul Pembelajaran DST TMK Tahun 2
 
Modul Pembelajaran TMK Tahun 2
Modul Pembelajaran TMK Tahun 2Modul Pembelajaran TMK Tahun 2
Modul Pembelajaran TMK Tahun 2
 
Membuat kuis interaktif sederhana
Membuat kuis interaktif sederhanaMembuat kuis interaktif sederhana
Membuat kuis interaktif sederhana
 
Laporan praktikum multimedia_4-4
Laporan praktikum multimedia_4-4Laporan praktikum multimedia_4-4
Laporan praktikum multimedia_4-4
 
Teks Berjalan di Aplikasi Dekstop dengan VB.Net
Teks Berjalan di Aplikasi Dekstop dengan VB.NetTeks Berjalan di Aplikasi Dekstop dengan VB.Net
Teks Berjalan di Aplikasi Dekstop dengan VB.Net
 
Laporan praktikum multimedia 5 5
Laporan praktikum multimedia 5 5Laporan praktikum multimedia 5 5
Laporan praktikum multimedia 5 5
 
Merubah foto jadi sebuah slide puzzle
Merubah foto jadi sebuah slide puzzleMerubah foto jadi sebuah slide puzzle
Merubah foto jadi sebuah slide puzzle
 
Tutorial cara menjadi master desain grafis tanpa sekolah dan kuliah
Tutorial cara menjadi master desain grafis tanpa sekolah dan kuliahTutorial cara menjadi master desain grafis tanpa sekolah dan kuliah
Tutorial cara menjadi master desain grafis tanpa sekolah dan kuliah
 
Modul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUIModul PSB 6 J2ME LLUI
Modul PSB 6 J2ME LLUI
 
Pertemuan 62
Pertemuan 62Pertemuan 62
Pertemuan 62
 
M7 pembuatan animasi_game_flash_
M7 pembuatan animasi_game_flash_M7 pembuatan animasi_game_flash_
M7 pembuatan animasi_game_flash_
 
Tutorial Java netbeans
Tutorial Java netbeansTutorial Java netbeans
Tutorial Java netbeans
 
Tutorial Animasi menggunakan macromedia Flash 8
Tutorial Animasi menggunakan macromedia Flash 8Tutorial Animasi menggunakan macromedia Flash 8
Tutorial Animasi menggunakan macromedia Flash 8
 

Membuat Quiz dengan Flash

  • 1. Membuat Quiz Sederhana dengan ActionScript 2.0 Oleh: Gilang Abdul Aziz Setelah kita selesai membuat skenario, selanjutnya pada akhir skenario kita akan menampilkan quiz. Pertama kita membuat Scene baru terlebih dahulu. Kita berinama Scene tersebut ‘Quiz’ Figure 1 - Insert new Scene Setelah Scene Quiz dibuat, selanjutnya kita persiapkan layer terlebih dahulu. Itu akan memudahkan kita dalam pembuatan objek-objek yang nanti akan kita pakai. Kita buat 4 layer, terdiri dari: Figure 2 - Prepare Layers Selanjutnya pada layer Pertanyaan Frame 1, kita isi dengan sebuah teks Figure 3 - Insert Text Kemudian pada layer Jawaban Frame 1, kita isi dengan 3 buah teks. Perhatikan pula jarak antara tiap jawaban jangan terlalu dekat. 1
  • 2. Figure 4 - Insert Text Selanjutnya kita akan membuat tombol untuk di klik saat memilih jawaban. Ada 3 buah tombol. Posisi tiap tombol disesuaikan dengan pilihan jawaban nya. Pada layer Tombol, Frame 1, Pertama-tama kita buat sebuah box, Figure 5 - Insert Box Selanjutnya pada box tersebut kita buat sebuah text sesuai dengan pilihan. Figure 6 - Insert Text above the Box Copy/paste box dan text yang sudah kita buat tersebut ke tiap pilihan jawaban. Tentunya jangan lupa kita ubah teks nya, sesuaikan dengan pilihan jawaban nya. Figure 7 - Clone the Object 2
  • 3. Setelah ketiga objek tersebut siap, sekarang kita akan mengubah ketiga objek tersebut menjadi tombol yang bisa diklik. Kita seleksi dulu objek box beserta teks nya. Figure 8 - Select the Object Kemudian klik kanan pada objek yang sudah kita seleksi tersebut, pilih Convert to Symbol. Figure 9 - Convert to Symbol Selanjutnya akan keluar dialog, pada dialog tersebut kita diharuskan untuk mengisi nama symbol dan jenis symbol apa yang akan kita buat. Kita pilih Button dan isi namanya dengan ‘A’ Figure 10 - Convert to Symbol Jika sudah berhasil, maka pada library akan bertambah satu symbol baru bertipe button. Seperti di bawah ini. 3
  • 4. Figure 11 - Library Selanjutnya adalah kita lakukan ulang untuk tiap objek yang tadi sudah kita buat untuk pilihan B dan C. Jangan lupa box dan teksnya harus terseleksi sempurna. Jika sudah, maka pada library akan ada 3 buah symbol bertipe tombol seperti di bawah ini. Figure 12 - Library Final Persiapan quiz sudah hampir selesai, sekarang kita akan membuat respon yang terjadi jika user manjawab. Benar atau salah. Jika benar, playhead akan berpindah ke Frame 2. Jika salah akan berpindah ke Frame 3. Selanjutnya pada Layer Respon pada Frame 2, kita insert blank keyframe. Figure 13 - Insert Keyframe Lakukan hal yang sama pada frame 3. Sehingga pada layer respon akan tersedia pada sampai frame 3 seperti di bawah ini. 4
  • 5. Figure 14 - Keyframe Kita simpan playhead pada Frame 2 pada layer Respon, kita isi dengan teks: Figure 15 - Insert Text (True) Pada Frame 3 kita isi dengan teks: Figure 16 - Insert Text (False) Semua persiapan sudah beres, saatnya kita akan melakukan coding. Memberikan ActionScript 2.0 pada objek-objek yang akan berinteraksi. Sebelumnya kita buat dulu sebuah layer baru bernama ‘Aksi’. Simpan pada posisi paling atas, untuk memudahkan. Figure 17 - Insert new Layer Kita pilih layer Aksi, pada Frame 1, klik kanan, kemudian pilih Actions: 5
  • 6. Figure 18 - To The Actions Nanti akan tampil Panel Actions, seperti ini Figure 19 - Actions Panel in Frame 1 Kita isi dengan code berikut ini: Figure 20 - ActionScript 2.0 Selanjutnya kita pilih Button A pada layer Tombol di Frame 1, klik kanan pilih Actions seperti tadi. Kita isikan dengan code seperti di bawah ini: Figure 21 - ActionScript 2.0 6
  • 7. Lakukan hal yang sama untuk Button B dan C. Tapi perhatikan terlebih dahulu, pada Button B dan C, parameter yang dimasukan adalah 3, itu artinya jawaban B dan C adalah salah, jawaban A adalah benar. Figure 22 - ActionScript 2.0 Selanjutnya kita test movie, maka quiz sederhana sudah kita buat. Ketika user meng-klik jawaban A akan tampil respon jawaban anda benar. Sebaliknya jika user memilih B atau C akan tampil respon jawaban salah. Setelah berhasil membuat quiz ini kita akan bisa mengembangkan untuk membuat quiz dengan tipe yang sama dan tentunya dengan soal yang lebih banyak serta interaksi yang lebih kompleks. 7