18
BALIKPAPAN MULTIMEDIA Media Interaktif MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com) 1 CONTOH CARA MEMBUAT MEDIA INTERAKTIF QUIS DENGAN MENGGUNAKAN ADOBE FLASH

MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

  • Upload
    others

  • View
    13

  • Download
    0

Embed Size (px)

Citation preview

Page 1: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

1

CONTOH CARA MEMBUAT MEDIA INTERAKTIF

QUIS

DENGAN MENGGUNAKAN ADOBE FLASH

Page 2: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

2

MEMBUAT MEDIA PEMBELAJARAN DI FLASH

1. Buka Aplikasi Adobe Flash (saya menggunakan Flash CS6). Pilih Actionscript 2.0

2. Pada bagian Properties, ubah ukuran area kerja(kotak warna putih yang biasanya

terletak di tengah) di "Size" menjadi 800 x 600 (satuan yang digunakan pixels).

3. Pada bagian "Timeline", ubah nama layer dengan cara double klik kemudian isikan

nama "BG" sebagai background pada Media Interaktif nantinya.

Lalu, untuk memasukkan gambar ada 2 cara, yaitu dengan Import to Stage (Ctrl+R)

atau Import to Library. Pada Kasus kali ini, saya menggunakan Import to Library

Page 3: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

3

4. Perbedaannya itu sendiri, untuk to Stage gambar akan langsung masuk di area

kerja sedangkan to Library akan otomatis tersimpan pada bagian Library lalu untuk

memasukkannya dengan menggeser/drag gambarnya ke area kerja.

5. Atur posisi dan ukuran gambar agar sesuai dengan area kerja.

6. Pada Frame ke-21 dan ke-41, klik kanan - insert keyframe. Lalu pada bagian

Properties, beri nama label "bg1" dan "bg2" maka akan ada tanda bendera warna

merah.

Page 4: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

4

7. Sekarang, buat layer baru. Caranya klik ikon seperti pada gambar di bawah ini..

Kemudian, ubah namanya menjadi "KONTEN" dan pada frame ke-41, klik kanan-

pilih insert frame (atau tekan F5). Setelah itu, buatlah Teks, gambar pada Layer

Konten tersebut.

8. Buat Layer Baru dengan Nama "TOMBOL" dan Insert Frame di frame-41.

Kemudian pada Layer Tombol tersebut, buatlah kotak dengan rectangle options

seperti pada gambar..

9. Klik kanan pada kotak tersebut - pilih Convert to Symbol - isikan dengan nama

"bab1_btn" dan pilih tipe "button" seperti pada gambar di bawah, lalu OK..

Page 5: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

5

10. Tekan Klik Ganda atau Double Click pada button "bab1_btn" untuk mengedit

tombol. Maka akan muncul seperti pada gambar di bawah. Kemudian, Isikan Teks

berupa "BAB 1".

Setelah itu, klik kanan pada bagian Over dan Down - pilih insert keyframe (F6)

Keterangan ;

UP : Kondisi Normal

OVER : Kondisi ketika kursor diatas tombol

DOWN : Kondisi ketika tombol ditekan

Untuk mengetahui perbedaanya, coba anda ubah warna atau bentuk dari tombol

pada bagian OVER dan DOWN.

Page 6: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

6

Seperti anda lihat, untuk kondisi normal saya menggunakan warna "putih", untuk

kondisi ketika kursor diatas tombol berwarna "Biru Tua" dan ketika di

klik warnanya berubah menjadi "abu-abu".

Setelah Selesai Mengedit Tombol, tekan Scene 1 untuk kembali...

11. Insert Keyframe (F6) pada Frame ke-21 dan ke-31 untuk layer tombol dan konten

12. Pada Frame ke-21. Buatlah Teks pada Layer konten dan buatlah tombol navigasi

"kembali" pada Layer tombol untuk membuat Halaman BAB1

Page 7: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

7

13. Begitu pula untuk frame ke-31. Buatlah Teks pada Layer konten dan buatlah

tombol navigasi "kembali" pada Layer tombol untuk membuat Halaman

BAB2. Jangan Lupa beri masing-masing nama label "bab1" dan "bab2"..

Tekan "Ctrl + Enter" untuk melihat hasilnya. Namun hasilnya, tombol yang kalian buat tidak berfungsi dan Halamannya Berpindah berulang-ulang. Untuk

melakukannya kita akan lanjut ke Cara Memberikan ActionScript pada Tombol di

Flash

Page 8: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

8

MEMBERIKAN ACTIONSCRIPT PADA TOMBOL

Setelah anda berhasil belajar Import,Timeline,Layer,Label,Button dan Teks pada

tutorial sebelumnya. Kali ini kita akan menuju langkah terakhir untuk membuat

Media Interaktif/Pembelajaran yaitu memberikan ActionSript di setiap Tombol

sebagai berikut :

1. Buat Layer baru dengan nama "AS" dan pada Frame ke-1, klik kanan -

pilih actions - lalu ketikkan command/perintah berikut :

stop();

fscommand("fullscreen", "true");

Keterangan :

a) perintah stop(); digunakan agar waktu dijalankan, animasi tidak berulang-

ulang/berpindah halaman. Untuk melihat perbedaanya. Silahkan tekan Ctrl + Enter

b) perintah fscommand("fullscreen","true"); digunakan ketika Media Interaktif ini

di Publish menjadi file exe maka akan otomatis menjalakan secara layar penuh.

2. Untuk tombol BAB 1, klik kanan - pilih actions - ketikkan perintah berikut ini..

on (release) {

gotoAndStop("bab1");

}

Page 9: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

9

Untuk tombol BAB 2, cukup anda ubah menjadi : on (release) {

gotoAndStop("bab2");

}

atau langsung menggunakan lokasi frame berada seperti ini :

on (release) {

gotoAndStop(31);

}

3. Langkah akhir, klik File - Publish Settings (Ctrl + Shift + F12)- conteng pada

bagian .swf, .html, dan .exe dan Atur Lokasi penyimpanan dengan klik tombol Folder

warna Kuning. Setelah itu, Klik Tombol PUBLISH...

4. Hasil Publish sebagai berikut. Coba Anda jalankan MediaInteraktif.exe maka akan

otomatis Layar Penuh (Fullscreen) seperti yang saya katakan sebelumnya.

Page 10: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

10

MEMBUAT KUIS/SOAL PILIHAN GANDA DI ADOBE FLASH

TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA

1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

600 satuan pixels)

2. Buatlah layer baru(bg) dan tambahkan gambar yang berbeda pada Frame 1(untuk

opening), Frame 2-6(untuk soal/kuis) dan Frame 7 untuk hasil skornya nanti.

3. Buat layer baru lagi, beri nama teks. Kemudian isi teks pada layer teks di frame 1

tersebut

4. Masih pada layer teks, frame 1. Buatlah teks dengan tipe Input Text dan

tambahkan nama variabelnya. Contoh : namanya

Page 11: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

11

5. Buat layer baru lagi, dan buatlah tombol 'Mulai' dengan Rectangle. Cara membuat

tombol dapat anda lihat ditutorial sebelumnya(membuat Media Interaktif).

6. Jangan lupa, isikan nama Instance pada tombol Mulai seperti pada gambar.

Page 12: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

12

7. Clear Frames pada Frame 2 hingga 7 di layer Tombol, agar tombol 'Mulai' hanya

muncul di Opening/Awal.

8. Isilah teks berupa soal dan pilihan jawaban dari Frame 2 hingga 6.

9. Pada layer tombol, buatlah tombol untuk pilihan jawaban A hingga D.

Page 13: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

13

10. Sekarang, tinggal copy paste deh pilihan a,b,c dan d ke Frame 3 hingga 6.

Kemudian atur posisi tombolnya agar rapi.

11. Jangan lupa, isi nama instance dari tombolA, tombolB, tombolC dan tombolD

yang nantinya berfungsi dalam pembuatan kode script.

Page 14: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

14

Hampir selesai, selanjutnya edit bagian frame terakhir(7).

12. Pada layer teks, buatlah teks tipe Input Text dengan nama variabel sebelumnya.

Sehingga, ketika kita masukkan nama dibagian opening. Namanya akan muncul di

frame terakhir ini.

13. Masih pada layer yang sama, buat teks dengan tipe Dynamic Text dan nama

variabelnya skor untuk menampilkan nilainya disini.

14. Dan yang terakhir, gunakan Dynamic Teks juga, tetapi nama variabelnya

berbeda. Contoh : keterangan berikut:

Page 15: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

15

15. Agar dapat kembali ke menu awal, kita tambahkan tombol Ulang dengan nama

instance ulangi_btn.

Tahap 1, selanjutnya tahap akhir untuk ActionScript.

Tahap 2 - Menambahkan ActionScript 2.0 Kuis/Soal Pilihan Ganda

1. Buatlah layer baru, klik kanan pada frame pertama - Pilih Actions - kemudian isi

kode script dibawah ini.

stop();

score = 0;

mulai_btn.onPress = function(){

nextFrame();

};

Keterangan Kode :

stop(); agar ketika di Test Movie(CTRL + F5) berhenti pada frame tersebut.

score = 0; membuat variabel dengan nama score dan nilainya 0;

Page 16: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

16

mulai_btn.onPress = function(){ nextframe(); }; agar ketika tombol ditekan, akan

berpindah ke Frame selanjutnya.

2. Lanjut, kode script Soal/Kuis nya untuk Frame 2 sampai 6.

stop();

onEnterFrame = function(){

skor = +score;

};

tombolA.onPress = function() {

nextFrame();

};

Page 17: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

17

tombolB.onPress = function() {

nextFrame();

};

tombolC.onPress = function() {

nextFrame();

};

tombolD.onPress = function() {

score += 20;

nextFrame();

};

Keterangan Kode :

onEnterFrame merupakan sebuah event handler ketika masuk pada Frame

tersebut. onEnterFrame akan terus melakukan perulangan pada perintah skor

= +score; sehingga nilai Score yang awalnya 0 akan terus bertambah tiap Frame.

score += 20; artinya variabel score akan bertambah 20 poin. Perintah score +=

20; hanya ditambahkan pada tombol jawaban yang benar.

3. FINAL, tambahkan kode script berupa percabangan pada frame 7.

if (score>=70) {

keterangan = "Perfect! Pertahankan Prestasi Anda!";

loadMovieNum("winner.swf", 1);

}

if (score<=60) {

keterangan = "Tidak cukup. Kasihan banget, ya!";

loadMovieNum("loser.swf", 1);

}

Page 18: MEMBUAT MEDIA INTERAKTIF QUIS · 2019. 9. 19. · TAHAP 1 - BIKIN DESAIN KUIS/SOAL PILIHAN GANDA 1. Buatlah Document Flash actionscript 2.0 dengan ukuran terserah. (contoh : 800 x

BALIKPAPAN – MULTIMEDIA

Media Interaktif – MEMBUAT QUIS DENGAN ADOBE FLASH (Source: julikoding.blogspot.com)

18

ulangi_btn.onPress = function() {

gotoAndStop(1);

};

Keterangan Kode :

LoadMovieNum berfungsi untuk memanggil file berformat swf.