7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Apps

Membuat aplikasi kuis dengan disesuaikan adobe Flash

Read Time: 9 mins

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Kita akan merancang antarmuka yang bersih, dibuat dengan Flash Tools, yang akan kita gunakan bersama dengan ActionScript dan XML untuk mengembangkan aplikasi Kuis yang mampu memuat gambar, teks, dan suara.


Langkah 1: Ringkasan Singkat

Antarmuka yang bersih dibuat dengan Flash Tools akan digunakan bersama dengan ActionScript dan XML untuk mengembangkan aplikasi Kuis yang mampu memuat gambar, teks dan suara.


Langkah 2: Pengaturan Dokumen Flash

Buka Flash dan buat dokumen lebar 480 piksel, tinggi 320 piksel. Setel Frame rate ke 24fps.



Langkah 3: Antarmuka


Antarmuka terdiri dari grafis sederhana, MovieClips dan TextFields. Kita akan melihat bagaimana hal itu dibuat dalam langkah-langkah berikut.


Langkah 4: Latar Belakang


Pilih Rectangle Primitive Tool (R) dan buat persegi panjang #D9E6EF - #F6F9FF, 450x290px, ubah corner radius menjadi 12 dan ubah ke MovieClip. Gunakan filter berikut untuk mendapatkan tampilan bagian dalam:



Langkah 5: Judul

Gunakan font yang Anda suka untuk membuat judul aplikasi, Anda juga dapat menambahkan ikon agar terlihat lebih baik. Saya memilih Aller Bold, tersedia gratis dari FontSquirrel.com.


Langkah 6: Tombol


Dengan menggunakan alat yang sama seperti untuk latar belakang, buat dua persegi panjang 80x24px dan isi dengan #0086C6. Gunakan Text Tool (T) untuk menambahkan label ke mereka dan mengubahnya menjadi Buttons. Setel nama instance mereka ke playB dan creditsB.

Ini akan melengkapi Menu Screen; konversikan elemen-elemen dalam panggung ke satu MovieClip dan beri nama menuScreen.


Langkah 7: Panel Pertanyaan


Di sini kita mulai membuat Game Screen.

Gunakan kembali latar belakang dan judul yang dibuat di langkah sebelumnya dan gunakan Rectangle Primitive Tool untuk membuat persegi panjang 360x48px. Tambahkan Dynamic TextField dengan Text Tool dan beri nama questionTF. Konversikan keduanya ke MovieClip dan beri nama qPanel.


Langkah 8: Panel Jawaban


Ulangi proses yang digunakan sebelumnya dengan empat persegi panjang 140x38px, beri nama button1 sampai button4 dan konversikan semuanya ke satu MovieClip bernama aPanel. Namai bidang teks di dalam tombol oneTF, twoTF, threeTF, dan fourTF, masing-masing.


Langkah 9: Layar Kredit

Credit Screen akan menampilkan tahun dan hak cipta dari permainan.

Ini akan sangat mudah dibuat karena kita sudah memiliki semua elemen yang digunakan di dalamnya.


Konversikan grafis ke MovieClip dan beri nama CreditsScreen, ingat untuk menandai kotak Export for ActionScript.


Langkah 10: Game Over

Layar ini akan muncul ketika kuis selesai, ini menunjukkan persentase skor akhir dan pertanyaan yang Anda jawab benar atau salah.


Gunakan Text Tool untuk menambahkan tiga Dynamic TextFields dan beri nama scoreTF, caTF, dan waTF. Konversikan grafis ke MovieClip dan beri nama GameOver, ingat untuk menandai kotak Export for ActionScript.


Langkah 11: Tween Nano


Kita akan menggunakan mesin tween yang berbeda dari default yang disertakan dalam Flash, ini meningkatkan kinerja serta lebih mudah digunakan.

Anda dapat mengunduh Tween Nano dari situs resminya. Lihat panduan ini untuk mempelajari cara menambahkan mesinnya ke proyek Anda.


Langkah 12: Soungle


Kita akan menyertakan kemampuan untuk menambahkan suara ke kuis; Anda dapat menemukan suara yang digunakan dalam contoh ini di Soungle.com menggunakan kata kunci phone ring.


Langkah 13: XML

File XML akan digunakan untuk mendapatkan semua data kuis, ini termasuk pertanyaan, jawaban yang mungkin, jawaban yang benar, gambar dan suara. Buka editor XML favorit Anda dan tulis kode berikut:

Seperti yang dapat Anda baca dalam kode, sangat mudah untuk mengetahui bagian mana yang melakukan apa yang seharusnya tidak ada masalah di sini. Ingat bahwa kita akan membuat mesin untuk menafsirkan file ini, ini berarti Anda dapat menambahkan/mengedit/menghapus semua pertanyaan di sini selama Anda mengikuti struktur dasar ini.


Langkah 14: Membuat Kelas ActionScript baru


Buat kelas baru (Cmd + N) ActionScript 3.0 dan simpan sebagai Main.as di folder kelas Anda.


Langkah 15: Struktur Kelas

Buat struktur kelas dasar Anda untuk mulai menulis kode Anda.


Langkah 16: Kelas yang Diperlukan

Ini adalah kelas-kelas yang perlu kita impor agar kelas kita bekerja; direktif import membuat kelas dan paket yang ditentukan secara eksternal tersedia untuk kode Anda.


Langkah 17: Variabel-variabel

Ini adalah variabel yang akan kita gunakan, baca komentar di kode untuk mengetahui lebih banyak tentang mereka, beberapa nama mereka cukup jelas sehingga tidak akan ada komentar di sana.


Langkah 18: Constructor

Constructor adalah fungsi yang berjalan ketika sebuah objek dibuat dari sebuah kelas; kode ini adalah yang pertama kali dijalankan ketika Anda membuat instance objek, atau fungsi pertama yang berjalan di proyek Anda jika di Kelas Document.

Ini memanggil fungsi yang diperlukan untuk memulai permainan. Periksa fungsi-fungsi tersebut di langkah selanjutnya.


Langkah 19: Memuat XML

Fungsi ini menggunakan instance xmlLoader untuk memuat file yang ditentukan dalam parameter. Listener yang ditambahkan ke objek akan memanggil fungsi ketika pemuatan selesai.


Langkah 20: Mengurai XML

Kode berikutnya memberikan data yang diambil dari file eksternal ke variabel, ini akan memungkinkan kita untuk menggunakan data itu di bagian manapun dari kelas kita.


Langkah 21: Menyiapkan Permainan

Ketika pengguna mengklik tombol Start, kode berikut dijalankan:

Ini akan tween layar utama untuk membuatnya tidak terlihat oleh pengguna dan kemudian menghapusnya, itu juga memanggil fungsi yang akan memuat pertanyaan pertama.


Langkah 22: Button Mode MovieClip

Kita tidak dapat mengakses nama instance TextField di dalam sebuah tombol, tetapi menggunakan MovieClips akan menghapus kursor tangan yang menunjukkan bahwa elemen tersebut bersifat interaktif. Kode berikutnya akan membuat kursor tangan muncul ketika hover di atas salah satu tombol.


Langkah 23: Mengubah Pertanyaan

Ini adalah fungsi utama di kelas ini, ia melakukan sebagian besar operasi yang akan memuat dan menangani pertanyaan yang dimuat. Baca langkah selanjutnya untuk melihat perilakunya.

Argumen di sini menentukan pertanyaan yang akan dimuat dan jawaban yang benar.


Langkah 24: Memeriksa Total Pertanyaan

Baris-baris ini memeriksa apakah ada pertanyaan berikutnya; jika tidak ada, itu memanggil fungsi gameOver.


Langkah 25: Menentukan Jawaban yang Mungkin

Jika ada pertanyaan lain, TextFields di panel pertanyaan diisi dengan informasi yang sesuai.


Langkah 26: Menentukan Jawaban yang Benar

Parameter jawaban yang benar dilewatkan ke variabel untuk menentukan kapan tombol yang diklik adalah yang benar atau bukan. Saat ini kita selalu menggunakan jawaban keempat sebagai jawaban yang benar.


Langkah 27: Panel Tween

Ketika pertanyaan dan jawaban ditetapkan, panel ditampilkan.


Langkah 28: Memperbarui Penghitung Pertanyaan

Baris ini mengubah nilai dari penghitung pertanyaan di sudut kanan bawah, ini menunjukkan pertanyaan saat ini dan pertanyaan yang tersisa untuk kuis berakhir.


Langkah 29: Memeriksa Gambar

Jika parameter image dalam xml memiliki nilai, gambar dalam url akan dimuat.


Langkah 30: Menampilkan Gambar

Kemudian ditempatkan di panggung dan di tween ke posisinya.


Langkah 31: Memeriksa Suara

Jika parameter sound dalam xml memiliki nilai, file di url akan dimuat.


Langkah 32: Memainkan Suara

Ketika pemuatan selesai, suara dimainkan.


Langkah 33: Menghapus Menu

Ini adalah fungsi yang akan menghapus layar menu dari daftar tampilan dan mendeklarasikan variabel sebagai null untuk membiarkannya dibersihkan dari memori.


Langkah 34: Menunjukkan Kredit

Kode berikut memanggil layar kredit, menggunakan variabel untuk instansiasi MovieClip dan kemudian tween ke panggung.


Langkah 35: Menghapus Kredit

Baris ini akan mem-tween keluar dan menghancurkan layar kredit ketika diklik.


Langkah 36: Memeriksa Jawaban

Ketika pengguna mengklik jawaban, fungsi ini dijalankan. Ini akan memeriksa apakah jawaban yang dipilih benar atau tidak dan meningkatkan penghitung yang sesuai. Kemudian pertanyaan baru dimuat.


Langkah 37: Game Over

Jika tidak ada lagi pertanyaan untuk dimuat, maka fungsi game over dimulai. Ini akan menampilkan layar game over menambahkan listener ke dalamnya untuk memulai kembali.


Langkah 38: Skor Akhir

Skor akhir akan ditampilkan dalam permainan di atas layar, baris berikutnya menetapkannya.


Langkah 39: Fungsi Memulai Ulang

Fungsi berikutnya akan memuat ulang swf, memulai ulang variabel dan metode apa pun.


Langkah 40: Menetapkan Kelas Main


Tambahkan nama kelas ke field Class di bagian Publish dari panel Properties untuk mengaitkan FLA dengan kelas dokumen Main. Anda sekarang dapat menjalankan Kuis.


Langkah 41: Mengocok Jawaban

Anda mungkin telah memperhatikan bahwa jawaban keempat adalah selalu yang benar. Kita dapat memperbaikinya dengan memasukkan jawaban ke dalam array dan kemudian mengocoknya, lihat panduan ini untuk informasi lebih lanjut. Ubah kode yang sesuai di changeQuestion() seperti:


Kesimpulan

Coba tambahkan pertanyaan dan grafis kustom Anda, ingat bahwa Anda hanya perlu memodifikasi file XML untuk membuat Kuis lainnya!

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.