Latihan Soal dengan ActionScript 3.0 – Part 3

posted in: Tutorial | 0

Dalam artikel-artikel sebelumnya, kalian sudah belajar untuk membuat latihan soal dengan ActionScript 3.0 hingga membuat tombol pilihan ganda yang disertai penambahan nilai/skor jika tombol yang dipilih adalah jawaban yang benar.

Jika ada yang terlewat, kalian bisa membacanya ulang di link-link berikut.

Pada sesi ini kita akan membuat hasil akhir yang nantinya akan muncul beserta hasil akhir yakni total nilai setelah semua soal dikerjakan. Cus aja lah ya ikuti langkah-langkah berikut ini.

  1. Buka aplikasi Adobe Flash atau Adobe Animate kalian. Yang terpenting gunakan dokumen dengan tipe ActionScript 3.0.
  2. Dalam contoh ini saya membuat 5 soal, so akan ada 5 keyframe untuk 5 soal ditambah 1 keyframe untuk memunculkan hasil nilai. Jadi, totalnya ada 6 keyframe. Untuk menambahkan keyframe sebagai tempat hasil nilai, lakukan klik kanan pada frame 6 > Convert to Blank Keyframe.
    Menambahkan frame kosong untuk hasil skor
    Menambahkan frame kosong untuk hasil skor
  3. Kemudian di bagian frame ke-6 tersebut, buatlah teks sebagai keterangan hasil seperti berikut. Kalian bisa juga menggunakan kalimat lain atau jenis font yang lebih menarik ya.
    Objek awal di keyframe nilai
    Objek awal di keyframe nilai
  4. Selanjutnya pilih teks angka 100 dengan mengklik teks tersebut. Teks angka ini masih berupa Static Text. Nah, yang kita perlukan agar nilai berubah secara dinamis sesuai dengan jumlah jawaban yang benar adalah tipe Dynamic Text.
    Klik teks 100
    Klik teks 100
  5. Perhatikan bagian Properties > ganti tipe Static Text menjadi Dynamic Text.
    Ubah jadi Dynamic Text dan hilangkan Auto kern
    Ubah jadi Dynamic Text dan hilangkan Auto kern

    Jangan lupa hilangkan centang pada bagian Auto kern. Kenapa harus dihilangkan? Biasanya Auto kern akan mencegah “kedinamisan” nilai yang akan muncul sehingga nilai tidak akan berubah sesuai jumlah jawaban yang benar.

  6. Kemudian berikan instance name pada dynamic text tersebut. Di sini saya berikan instance name dengan nama hasil
    Berikan instance name pada Dynamic Text
    Berikan instance name pada Dynamic Text
  7. Selanjutnya lakukan Embed pada Dynamic Text yang kalian gunakan.
    Klik Embed pada Dynamic Text
    Klik Embed pada Dynamic Text

    Apa gunanya melakukan Embed teks? Tidak semua font bisa terbaca oleh semua perangkat apalagi jika kalian menggunakan jenis font yang dekoratif. Nah, embedding teks dilakukan agar font tersebut dapat ter-compile bersama dengan aplikasi yang kalian buat.

  8. Setelah kalian mengklik Embed, pada tampilan yang muncul, berikan centang seperti berikut.
    Tampilan Embed Text
    Tampilan Embed Text

    Nah, yang dicentang hanya bagian Numerals ya karena nilai/skor yang akan muncul pada dynamic text nantinya hanya berupa nomor/angka. Gak mungkin kan skor berupa huruf hehe. Jika nantinya kalian menggunakan dynamic text untuk jenis lain, silahkan menyesuaikan dengan yang kalian perlukan.

    Di angka 1 menunjukkan jenis font yang kalian gunakan. Bisa diganti juga di bagian font family di tampilan ini yes.

  9. Sekarang waktunya kita menyiapkan ActionScript. Munculkan panel Action terlebih dahulu dengan klik kanan keyframe pada layer AS > pilih Actions.
    Klik kanan lalu pilih Actions pada keyframe terakhir
    Klik kanan lalu pilih Actions pada keyframe terakhir
  10. Masukkan script berikut.
    ActionScript untuk menampilkan hasil skor
    ActionScript untuk menampilkan hasil skor

Sedikit kan scriptnya? Iyup…ketik aja ya biar sekalian latihan hehe. Sampai di sini coba testing aplikasi kalian dengan Ctrl + Enter. Bagaimana hasilnya?

Jika harapan belum sesuai dengan kenyataan, jangan lupa tanyakan di kolom komentar yak 😀

Muhammad Faizin
Follow Faizin:

Writer and Developer

Dulu suka menulis kode dan sejenisnya sampe malem, sekarang juga masih. Kesukaan pada menulis cerita sedikit demi sedikit terpupuk, apalagi sebagai mantan anak sekolahan dengan cita-cita kuliah di luar negeri.