membuat quiz dengan flash

7

Click here to load reader

Upload: gilang-aziz

Post on 05-Dec-2014

6.032 views

Category:

Technology


4 download

DESCRIPTION

Tutorial membuat quiz sederhana menggunakan Adobe Flash Professional dan ActionScript 3.0

TRANSCRIPT

Page 1: 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.

Page 2: Membuat Quiz dengan Flash

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

Page 3: Membuat Quiz dengan Flash

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.

Page 4: Membuat Quiz dengan Flash

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.

Page 5: Membuat Quiz dengan Flash

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:

Page 6: Membuat Quiz dengan Flash

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

Page 7: Membuat Quiz dengan Flash

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.