modul sederhana kuis ganda membuat kuis interaktif - flash cs3

Upload: mapan79

Post on 05-Jan-2016

278 views

Category:

Documents


9 download

DESCRIPTION

Modul, sederhana, Kuis, Ganda, Membuat Kuis Interaktif, - Flash Cs3

TRANSCRIPT

  • [ Modul kuia sederhana A3 ]

    1/A3

    MEMBUAT KUIS INTERAKTIFMenggunakan ADOBE FLASH CS3

    Disampaikan pada

    Wong A3 dan terimakasi pada semua orang semoga ilmuditularkn bermanfaat dan barokah dunia akhirat

    Oleh:

    ES ACAK

    [ Modul kuia sederhana A3 ]

    1/A3

    MEMBUAT KUIS INTERAKTIFMenggunakan ADOBE FLASH CS3

    Disampaikan pada

    Wong A3 dan terimakasi pada semua orang semoga ilmuditularkn bermanfaat dan barokah dunia akhirat

    Oleh:

    ES ACAK

    [ Modul kuia sederhana A3 ]

    1/A3

    MEMBUAT KUIS INTERAKTIFMenggunakan ADOBE FLASH CS3

    Disampaikan pada

    Wong A3 dan terimakasi pada semua orang semoga ilmuditularkn bermanfaat dan barokah dunia akhirat

    Oleh:

    ES ACAK

  • [ Modul kuia sederhana A3 ]

    2/A3

    DAFTAR ISI

    HALAMAN COVER..................................................................................... 1

    KATA PENGANTAR.................................................................................... 2

    DAFTAR ISI............................................................................................... 3

    A. GAMBARAN UMUM............................................................................... 4

    1. Pengenalan Adobe Flash CS3................................................................. 4

    2. Alur Pembuatan Kuis Interaktif................................................................ 5

    B. MEMBUAT KUIS INTERAKTIF ................................................................6

    1. Membuka Flash dan Menyusun Layer ...................................................... 6

    2. Membuat Background .................................................................................. 8

    3. Mengisi Teks Kuis ........................................................................................ 10

    4. Membuat Tombol ......................................................................................... 15

    5. Menambah Kode (Action Scipt) ................................................................ 17

    6. Mempublish File ........................................................................................... 19

    C. TUGAS................................................................................................. 20

    D. PENUTUP............................................................................................ 20

    TENTANG PENULIS............................................................................... 21

    LAMPIRAN................................................................................................. 22

    [ Modul kuia sederhana A3 ]

    2/A3

    DAFTAR ISI

    HALAMAN COVER..................................................................................... 1

    KATA PENGANTAR.................................................................................... 2

    DAFTAR ISI............................................................................................... 3

    A. GAMBARAN UMUM............................................................................... 4

    1. Pengenalan Adobe Flash CS3................................................................. 4

    2. Alur Pembuatan Kuis Interaktif................................................................ 5

    B. MEMBUAT KUIS INTERAKTIF ................................................................6

    1. Membuka Flash dan Menyusun Layer ...................................................... 6

    2. Membuat Background .................................................................................. 8

    3. Mengisi Teks Kuis ........................................................................................ 10

    4. Membuat Tombol ......................................................................................... 15

    5. Menambah Kode (Action Scipt) ................................................................ 17

    6. Mempublish File ........................................................................................... 19

    C. TUGAS................................................................................................. 20

    D. PENUTUP............................................................................................ 20

    TENTANG PENULIS............................................................................... 21

    LAMPIRAN................................................................................................. 22

    [ Modul kuia sederhana A3 ]

    2/A3

    DAFTAR ISI

    HALAMAN COVER..................................................................................... 1

    KATA PENGANTAR.................................................................................... 2

    DAFTAR ISI............................................................................................... 3

    A. GAMBARAN UMUM............................................................................... 4

    1. Pengenalan Adobe Flash CS3................................................................. 4

    2. Alur Pembuatan Kuis Interaktif................................................................ 5

    B. MEMBUAT KUIS INTERAKTIF ................................................................6

    1. Membuka Flash dan Menyusun Layer ...................................................... 6

    2. Membuat Background .................................................................................. 8

    3. Mengisi Teks Kuis ........................................................................................ 10

    4. Membuat Tombol ......................................................................................... 15

    5. Menambah Kode (Action Scipt) ................................................................ 17

    6. Mempublish File ........................................................................................... 19

    C. TUGAS................................................................................................. 20

    D. PENUTUP............................................................................................ 20

    TENTANG PENULIS............................................................................... 21

    LAMPIRAN................................................................................................. 22

  • [ Modul kuia sederhana A3 ]

    4/A3

    A.GAMBARAN UMUM

    1. Pengenalan Adobe Flash CS3

    Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,tetapi tak ada salahnya kita pelajari.

    MenuMerupakan kumpulan dari perintah-perintah yang terdapatpada Adobe Flash CS3.

    ToolsMerupakan kumpulan ikon yang mewakili salah satu perintahtetentu, baik membuat, memilih, menghapus dan lain-lain.

    TimelineMerupakan tool yang berisi layer dan frame untuk mengatur,mengontrol suatu animasi.

    StageMerupakan layar/lembarkerja yang digunakan untukmeletakkan objek/gambar animasi.

    [ Modul kuia sederhana A3 ]

    4/A3

    A.GAMBARAN UMUM

    1. Pengenalan Adobe Flash CS3

    Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,tetapi tak ada salahnya kita pelajari.

    MenuMerupakan kumpulan dari perintah-perintah yang terdapatpada Adobe Flash CS3.

    ToolsMerupakan kumpulan ikon yang mewakili salah satu perintahtetentu, baik membuat, memilih, menghapus dan lain-lain.

    TimelineMerupakan tool yang berisi layer dan frame untuk mengatur,mengontrol suatu animasi.

    StageMerupakan layar/lembarkerja yang digunakan untukmeletakkan objek/gambar animasi.

    [ Modul kuia sederhana A3 ]

    4/A3

    A.GAMBARAN UMUM

    1. Pengenalan Adobe Flash CS3

    Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,tetapi tak ada salahnya kita pelajari.

    MenuMerupakan kumpulan dari perintah-perintah yang terdapatpada Adobe Flash CS3.

    ToolsMerupakan kumpulan ikon yang mewakili salah satu perintahtetentu, baik membuat, memilih, menghapus dan lain-lain.

    TimelineMerupakan tool yang berisi layer dan frame untuk mengatur,mengontrol suatu animasi.

    StageMerupakan layar/lembarkerja yang digunakan untukmeletakkan objek/gambar animasi.

  • 5/A3

    Panel

    Merupakan kumpulan perintah/ikon yangdigunakan untuk memanipulasi atributobjek yang dibuat.

    PopertiesMerupakan kumpulan panel yang digunakan untuk mengaturdokumen, membuat action script pada animasi.

    2. Alur Pembuatan Kuis Interaktif

    Kuis interaktif yang akan kita buat terdiri tiga bagian, yakniAwalan, Inti dan Akhiran. Awalan berisi interface yang memintauser untuk memasukkan nama. Inti berisi soal-soal kuis pilihanganda. Akhiran berisi nama user yang di input, nilai dan kriteriaketuntasan minimal.

    Dari ketiga bagian diatas kita bagi menjadi 4 layer (Background,Teks, Tombol dan Kode) dan masing-masing layer kita tambahkanbeberapa frame.

  • 6/A3

    Layer

    Frame

    Background :Berisi gambar latar belakang.Teks :Berisi teks-teks baik soal kuis maupun keterangan.Tombol :Berisi tulisan/gambar yang berfungsi sebagai

    tombol.Kode :Berisi kode (action script) untuk mengatur

    jalannya progam.

    B. MEMBUAT KUIS INTERAKTIF

    Saatnya PRAKTEK. Ikuti langkah-langkah dibawah ini denganseksama :

    1. Membuka Flash dan Menyusun Layer

    a) Pastikan komputer anda telah terinstal softwareAdobe Flash CS3, kemudian jalankan dengan caradouble click icon Adobe Flash CS3 pada desktop.

    b) Langsung ke bagian Create New, pilih Flash File (ActionScript2.0).

  • 7/A3

    c) Simpan (tekan Ctrl+S) dengan nama kuis interaktif dan padaSave as type pilih Flash CS3 Document (*.fla).

    d) Tampak pada timeline ada 1 buah layer (Layer 1), silakantambahkan 3 layer lagi dengan meng-klik icon Insert Layer 3x.Hingga terbentuk 4 buah layer.

    e) Ubah nama layer dengan cara Double Click pada layer : Layer 1= Background, Layer 2 = Text, Layer 3 = Tombol dan Layer 4 =kode.

  • 8/A3

    l

    2. Membuat Background

    a) Klik layer Background, sebelum kita membuat backgroundsilakan perkecil dulu tampilan stage (area kerja) menjadi 50%agar bisa terlihat semua areanya.

    b) Buatlah background dengan klik icon Rectangle Too (tekantombol R), atur properties:

    Stroke color Fill color

    c) Klik dan Drag pada stage hingga memenuhi area kerja.

    d) Ingat selalu klik selection tool jika telahselesai mengunakan tool.

    e) Klik kanan objek pilih Convert to Symbol, pada Type pilihMovie clip dan klik OK.

  • 9/A3

    f) Double Click objek, kita masuk ke dalam Symbol 1 yangterdapat sebuah layer (Layer 1).

    g) Tambahkan sebuah layer, di Layer 2 Frame 1 gunakanRectangle tool untuk membuat 2 gambar dan atur sepertidibawah.

    h) Seleksi objek bagian atas, klik Free Transform Tool(tekan tombol Q) dan pada bagian bawah tool pilih Envelope

    Atur hingga seperti gambar dibawah.

    i) Lakukan seperti langkah h) diatas pada Objek bagian bawah.

  • 10/A3

    j) Tambahkan sebuah layer lagi, pada Layer 3 Frame 1 denganRectangle tool buat satu objek dan atur menggunakan Free

    Transform Tool hingga terbentuk gambar seperti dibawah.

    k) Masih di Layer 3 Frame 1, klik objek dan pada warna pilih putihdengan alpha 50%.

    l) Klik Scene 1 untuk kembali ke timeline utama.

    m) Klik kanan layer Background frame 7 pilih Insert Keyframe,Background selesai.

    3. Mengisi Teks Kuis

    Seperti yang telah dibahas sebelumnya, kuis terdapat 3 bagian.Posisi Awalan : Frame 1, Inti : Frame 2-6 (5 Soal) dan Akhiran :Frame 7. Lebih jelasnya ikuti langkah berikut:

  • 11/A3

    a) Klik layer Text Frame 1, kita isi dengan Awalan. Gunakan TextTool (Tekan tombol T), pada properties atur Text type:Static Text, jenis font, ukuran dan warna menyesuaikan.

    b) Ketikan beberapa tulisan dan atur seperti gambar dibawah(menyesuaikan).

    c) Masih di layer Text Frame 1 menggunakan Text tool, ubahproperties pada Text type : Input Text, align : center,aktifkan (klik) Show border around text, Var : nama, warna danukuran menyesuaikan.

    d) Klik dan drag dibawah tulisan Masukkan Nama Anda,kemudian tambahkan tulisan Tanpa Nama.

  • 12/A3

    e) Klik kanan layer Text Frame 2, pilih Insert Blank Keyframe.

    f) Dengan Text tool, type: Static text, ketikan soal dan jawabanhingga sepeti pada gambar dibawah. (Soal pada Lampiran)

    g) Klik layer Text Frame 2, tekan F6 pada keyboard untuk meng-copy sampai pada Frame 6.

    h) Klik Frame 3 kemudian edit soal dan jawaban, lakukan jugapada frame 4, 5 dan 6.

  • 13/A3

    i) Klik kanan frame 7, pilih Insert Blank Keyframe

    j) Klik frame 1, seleksi kotak input text. Copy kemudian paste diframe 7.

    k) Masih di frame 7, tambahkan tulisan dengan Text type:Statict text dan atur seperti dibawah.

  • 14/A3

    l) Tambahkan tulisan dengan Text type: Dinamic text dibawahNilai Anda dan KKM.

    m) Klik Dinamic text dibawah Nilai Anda, pada properties isikanVar: total.

    n) Klik Dinamic text dibawah KKM, pada properties isikan Var:keterangan.

  • 15/A3

    4. Membuat Tombol

    a) Klik layer Tombol Frame 1, tambahkan objek kotak (Rectangletool) tepat diatas kata Mulai. Beri sembarang warna denganalpha : 0%, sehingga objek tak kelihatan.

    b) Klik kanan objek, Convert to Symbol pilih type Button.

    c) Pada properties, isi dengan mulai.

    d) Klik kanan frame 2, pilih Insert Blank Keyframe.

    e) Buat objek kotak diatas jawaban a. Beri sembarang warnadengan alpha : 0%, sehingga objek tak kelihatan.

  • 16/A3

    f) Klik kanan objek, Convert to Symbol pilih type Button.

    g) Pada properties, isi dengan a .

    h) Klik dan drag sambil menekan tombol Ctrl pada keyboard,letakkan objek diatas jawaban b. Ubah isidengan b.

    i) Ulangi seperti langkah h) untuk jawaban c dan d. Hingga semuamasing-masing jawaban memiliki button.

    j) Klik layer Tombol Frame 2, tekan F6 pada keyboard untukmeng-copy sampai pada Frame 6 (soal no 5).

  • k) Klik kanan Frame 7, pilih Insert Blank Keyframe.

    l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol >Type: Button. isi dengan ulangi. Warna denganalpha : 0%.

    5. Menambah Kode (Action Script)

    a) Aktifkan actions-frame (tekan F9).

    k) Klik kanan Frame 7, pilih Insert Blank Keyframe.

    l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol >Type: Button. isi dengan ulangi. Warna denganalpha : 0%.

    5. Menambah Kode (Action Script)

    a) Aktifkan actions-frame (tekan F9).

    k) Klik kanan Frame 7, pilih Insert Blank Keyframe.

    l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol >Type: Button. isi dengan ulangi. Warna denganalpha : 0%.

    5. Menambah Kode (Action Script)

    a) Aktifkan actions-frame (tekan F9).

  • b) Klik layer Kode Frame 1, ketikan kode dibawah:

    stop(); nilai=0;

    mulai.onPress=function() {

    nextFrame();

    };

    c) Klik kanan frame 2, Insert Blank Keyframe. Pada action-frameketikan kode berikut:

    stop();

    onEnterFrame=function(){

    total=+nilai;

    };

    a.onPress=function(){

    nilai+=20;

    nextFrame();

    };

    b.onPress=function(){

    nextFrame();

    };

    c.onPress=function(){

    nextFrame();

    };

    d.onPress=function(){

    nextFrame();

    };

  • 19

    d) Lakukan seperti langkah c) diatas, pada frame 3 sampai frame6. Edit sedikit pada kunci, yakni script yang tercetak tebalwarna merah nilai+=20;. Letakkan script tersebut pada

    jawaban yang benar. Contoh : Jika Frame 3 (soal no 2)jawabannya c, maka yang ada script nilai+=20; hanyalah c.

    c.onPress=function(){

    nilai+=20;

    nextFrame();

    };

    e) Klik frame 7, Insert Blank Keyframe. Ketikan kode berikut :

    if(nilai>=80){

    keterangan="Selamat, Anda Tuntas...Pertahankan!";

    }

    else{

    keterangan="Maaf, Anda Belum Tuntas...Tingkatkan Belajar";

    }

    ulangi.onPress=function(){

    gotoAndStop(1);

    };

    6. Mempublish File

    Klik kursor diluar area kerja, lihat properties pada publish klikSettings...

  • 21/A3

    20

    Beralih ke tab Formats, pilih yang diperlukan saja. Dalam hal ini kitacoba 3, yaitu: Flash (.swf), HTML (.html), Windows Projector (.exe).Klik Publish dan OK.

    Silakan buka folder tempat anda menyimpan file kuisinteraktif.fla dan jalankan hasilnya.

    C. TUGAS

    Follow up dari workshop, silakan buat kuis sejenis yang telahdikembangkan dengan 10 soal sesuai materi yang anda inginkan.- Subjek : Follow Up Modul Workshop (nama)- Pada isi email sertakan Nama Lengkap, Alamat dan Nama

    Satuan Pendidikan

    D.PENUTUP

    Modul ini hanya sebagai salah satu contoh. Tentunya jika kita ingindan mau menjadi mahir, perbanyaklah latihan ( praktek ).

    Kapan waktu yang tepat untuk latihan? Katakan pada Hati kita :LAKUKAN SEKARANG JUGA.

    Semoga bermanfaat.

  • 22/A3

    21

    LAMPIRAN

    Soal :

    1. Siapa nama presiden RI pertama?

    a. Soekarnob. Soeharto

    c. Habibied. Gus Dur

    2. 20 + 20 x 20 = ...

    a. 800b. 600

    c. 420d. 840

    3. Bulan berputar mengelilingi...

    a. Mataharib. Bumi

    c. Bintangd. Galaksi

    4. Mr.Moen bought a camera, ... has three lenses.

    a. Whichb. Who

    c. Whomd. Whose

    5. Sinonim kata senang adalah...

    a. Susahb. Sedih

    c. Renangd. Bahagia

    Kunci Jawaban:

    1. a. Soekano2. c. 4203. b. Bumi4. a. Which5. d. Bahagia