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:
<?xml version="1.0"?> <questions> <question option1='Monkeys!' option2='Costumes' option3='Computers' answer="Flash Files" image='' sound=''>What does Activeden sell?</question> <question option1='Club of 8s' option2='8 of Plant' option3='8 of Spades' answer="Eight of Clubs" image='c8.png' sound=''>What is the name of this Card?</question> <question option1='Guitar' option2='Koala Bear' option3='Alarm Clock' answer="Phone Ring" image='' sound='Phone.mp3'>What is this sound?</question> </questions>
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.
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main():void
{
// constructor code
}
}
} 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.
import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.MouseEvent; import com.greensock.TweenNano; import com.greensock.easing.Elastic; import flash.events.Event; import flash.net.navigateToURL; import flash.display.Loader; import flash.media.Sound;
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.
private var credits:CreditsScreen; private var xmlLoader:URLLoader; private var xml:XML; private var nextQ:int = 0; //stores the next question number private var imgLoader:Loader; private var sndLoader:Sound; private var answer:String;//stores the correct answer private var ca:int = 0;//counts the correct answers private var wa:int = 0;//counts the wrong answers
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.
public final function Main():void
{
loadXML('q&a.xml');
addListeners();
} 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.
private final function loadXML(src:String):void
{
xmlLoader = new URLLoader(new URLRequest(src));
xmlLoader.addEventListener(Event.COMPLETE, parseXML);
} 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.
private final function parseXML(e:Event):void
{
xml = new XML(e.target.data);
} Langkah 21: Menyiapkan Permainan
Ketika pengguna mengklik tombol Start, kode berikut dijalankan:
private final function prepareGameScreen(e:MouseEvent):void
{
changeQuestion();
TweenNano.to(menuScreen, 0.4, {y:stage.stageHeight + (menuScreen.height * 0.5), onComplete: removeMenuScreen}); 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.
aPanel.button1.buttonMode = true; aPanel.button1.mouseChildren = false; aPanel.button2.buttonMode = true; aPanel.button2.mouseChildren = false; aPanel.button3.buttonMode = true; aPanel.button3.mouseChildren = false; aPanel.button4.buttonMode = true; aPanel.button4.mouseChildren = false;
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.
private final function changeQuestion(n:int = 0):void
{ 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.
if(nextQ == xml.children().length())
{
gameOver();
} Langkah 25: Menentukan Jawaban yang Mungkin
Jika ada pertanyaan lain, TextFields di panel pertanyaan diisi dengan informasi yang sesuai.
else
{
/* Set Question and Answers */
qPanel.questionTF.text = xml.children()[n];
aPanel.button1.oneTF.text = xml.children()[n].@option1;
aPanel.button2.twoTF.text = xml.children()[n].@option2;
aPanel.button3.threeTF.text = xml.children()[n].@option3;
aPanel.button4.fourTF.text = xml.children()[n].@answer; 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.
/* Set correct answer */ answer = 'button4'; /* Move to next question */ nextQ = n+1;
Langkah 27: Panel Tween
Ketika pertanyaan dan jawaban ditetapkan, panel ditampilkan.
TweenNano.from(qPanel, 1.5, {x: -qPanel.width, ease: Elastic.easeInOut});
TweenNano.from(aPanel, 1.5, {y: stage.stageHeight + aPanel.height, ease: Elastic.easeInOut}); 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.
qCounterTF.text = String(nextQ) + '/' + xml.children().length();
Langkah 29: Memeriksa Gambar
Jika parameter image dalam xml memiliki nilai, gambar dalam url akan dimuat.
if(imgLoader != null)
{
removeChild(imgLoader);
imgLoader = null;
}
if(xml.children()[n].@image != '')
{
imgLoader = new Loader();
imgLoader.load(new URLRequest(xml.children()[n].@image));
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayImage);
} Langkah 30: Menampilkan Gambar
Kemudian ditempatkan di panggung dan di tween ke posisinya.
private final function displayImage(e:Event):void
{
imgLoader.x = 360;
imgLoader.y = -imgLoader.height;
addChild(imgLoader);
TweenNano.to(imgLoader, 1.5, {y:67, ease: Elastic.easeInOut});
} Langkah 31: Memeriksa Suara
Jika parameter sound dalam xml memiliki nilai, file di url akan dimuat.
if(sndLoader != null)
{
sndLoader = null;
}
if(xml.children()[n].@sound != '')
{
sndLoader = new Sound();
sndLoader.load(new URLRequest(xml.children()[n].@sound));
sndLoader.addEventListener(Event.COMPLETE, playSound);
} Langkah 32: Memainkan Suara
Ketika pemuatan selesai, suara dimainkan.
private final function playSound(e:Event):void
{
sndLoader.play();
} 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.
private final function removeMenuScreen():void
{
removeChild(menuScreen);
menuScreen = null;
} Langkah 34: Menunjukkan Kredit
Kode berikut memanggil layar kredit, menggunakan variabel untuk instansiasi MovieClip dan kemudian tween ke panggung.
private final function showCreditsScreen(e:MouseEvent):void
{
credits = new CreditsScreen();
credits.x = stage.stageWidth * 0.5;
credits.addEventListener(MouseEvent.MOUSE_UP, removeCredits);
addChild(credits);
TweenNano.to(credits, 0.3, {y: stage.stageHeight * 0.5});
} Langkah 35: Menghapus Kredit
Baris ini akan mem-tween keluar dan menghancurkan layar kredit ketika diklik.
private final function removeCredits(e:MouseEvent):void
{
TweenNano.to(credits, 0.5, {y:-credits.height, onComplete: function():void{removeChild(credits); credits = null;}});
} 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.
private final function checkAnswer(e:MouseEvent):void
{
if(answer == e.target.name)
{
ca++;
changeQuestion(nextQ);
}
else
{
wa++;
changeQuestion(nextQ);
}
} 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.
private final function gameOver():void
{
var over:GameOver = new GameOver();
over.x = 15;
over.y = 15;
over.addEventListener(MouseEvent.MOUSE_UP, restart);
addChild(over);
over.caTF.text = String(ca);
over.waTF.text = String(wa);
TweenNano.from(over, 0.5, {x:stage.stageWidth});
} Langkah 38: Skor Akhir
Skor akhir akan ditampilkan dalam permainan di atas layar, baris berikutnya menetapkannya.
over.scoreTF.text = String(Math.floor((ca / xml.children().length()) * 100)) + '%';
Langkah 39: Fungsi Memulai Ulang
Fungsi berikutnya akan memuat ulang swf, memulai ulang variabel dan metode apa pun.
private final function restart(e:MouseEvent):void
{
navigateToURL(new URLRequest(stage.loaderInfo.url), '_level0');
} 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:
/* Set Question and Answers */
qPanel.questionTF.text = xml.children()[n];
var answers:Array = [
xml.children()[n].@option1,
xml.children()[n].@option2,
xml.children()[n].@option3,
xml.children()[n].@answer
];
var shuffledAnswers:Array = new Array(answers.length);
var randomPos:Number = 0;
var numberOfAnswers:int = answers.length;
for (var i:int = 0; i < numberOfAnswers; i++)
{
randomPos = int(Math.random() * answers.length);
shuffledAnswers[i] = answers.splice(randomPos, 1)[0];
}
aPanel.button1.oneTF.text = shuffledAnswers[0];
aPanel.button2.twoTF.text = shuffledAnswers[1];
aPanel.button3.threeTF.text = shuffledAnswers[2];
aPanel.button4.fourTF.text = shuffledAnswers[3];
/* Set correct answer */
if (aPanel.button1.oneTF.text == xml.children()[n].@answer) answer = 'button1';
if (aPanel.button2.twoTF.text == xml.children()[n].@answer) answer = 'button2';
if (aPanel.button3.threeTF.text == xml.children()[n].@answer) answer = 'button3';
if (aPanel.button4.fourTF.text == xml.children()[n].@answer) answer = 'button4';
/* Move to next question */
nextQ = n+1; 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!
