Modul sederhana Kuis Ganda Membuat Kuis Interaktif - Flash Cs3

Download Modul sederhana Kuis Ganda Membuat Kuis Interaktif - Flash Cs3

Post on 05-Jan-2016

198 views

Category:

Documents

9 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

<ul><li><p>[ Modul kuia sederhana A3 ]</p><p>1/A3</p><p>MEMBUAT KUIS INTERAKTIFMenggunakan ADOBE FLASH CS3</p><p>Disampaikan pada</p><p>Wong A3 dan terimakasi pada semua orang semoga ilmuditularkn bermanfaat dan barokah dunia akhirat</p><p>Oleh:</p><p>ES ACAK</p><p>[ Modul kuia sederhana A3 ]</p><p>1/A3</p><p>MEMBUAT KUIS INTERAKTIFMenggunakan ADOBE FLASH CS3</p><p>Disampaikan pada</p><p>Wong A3 dan terimakasi pada semua orang semoga ilmuditularkn bermanfaat dan barokah dunia akhirat</p><p>Oleh:</p><p>ES ACAK</p><p>[ Modul kuia sederhana A3 ]</p><p>1/A3</p><p>MEMBUAT KUIS INTERAKTIFMenggunakan ADOBE FLASH CS3</p><p>Disampaikan pada</p><p>Wong A3 dan terimakasi pada semua orang semoga ilmuditularkn bermanfaat dan barokah dunia akhirat</p><p>Oleh:</p><p>ES ACAK</p></li><li><p>[ Modul kuia sederhana A3 ]</p><p>2/A3</p><p>DAFTAR ISI</p><p>HALAMAN COVER..................................................................................... 1</p><p>KATA PENGANTAR.................................................................................... 2</p><p>DAFTAR ISI............................................................................................... 3</p><p>A. GAMBARAN UMUM............................................................................... 4</p><p>1. Pengenalan Adobe Flash CS3................................................................. 4</p><p>2. Alur Pembuatan Kuis Interaktif................................................................ 5</p><p>B. MEMBUAT KUIS INTERAKTIF ................................................................6</p><p>1. Membuka Flash dan Menyusun Layer ...................................................... 6</p><p>2. Membuat Background .................................................................................. 8</p><p>3. Mengisi Teks Kuis ........................................................................................ 10</p><p>4. Membuat Tombol ......................................................................................... 15</p><p>5. Menambah Kode (Action Scipt) ................................................................ 17</p><p>6. Mempublish File ........................................................................................... 19</p><p>C. TUGAS................................................................................................. 20</p><p>D. PENUTUP............................................................................................ 20</p><p>TENTANG PENULIS............................................................................... 21</p><p>LAMPIRAN................................................................................................. 22</p><p>[ Modul kuia sederhana A3 ]</p><p>2/A3</p><p>DAFTAR ISI</p><p>HALAMAN COVER..................................................................................... 1</p><p>KATA PENGANTAR.................................................................................... 2</p><p>DAFTAR ISI............................................................................................... 3</p><p>A. GAMBARAN UMUM............................................................................... 4</p><p>1. Pengenalan Adobe Flash CS3................................................................. 4</p><p>2. Alur Pembuatan Kuis Interaktif................................................................ 5</p><p>B. MEMBUAT KUIS INTERAKTIF ................................................................6</p><p>1. Membuka Flash dan Menyusun Layer ...................................................... 6</p><p>2. Membuat Background .................................................................................. 8</p><p>3. Mengisi Teks Kuis ........................................................................................ 10</p><p>4. Membuat Tombol ......................................................................................... 15</p><p>5. Menambah Kode (Action Scipt) ................................................................ 17</p><p>6. Mempublish File ........................................................................................... 19</p><p>C. TUGAS................................................................................................. 20</p><p>D. PENUTUP............................................................................................ 20</p><p>TENTANG PENULIS............................................................................... 21</p><p>LAMPIRAN................................................................................................. 22</p><p>[ Modul kuia sederhana A3 ]</p><p>2/A3</p><p>DAFTAR ISI</p><p>HALAMAN COVER..................................................................................... 1</p><p>KATA PENGANTAR.................................................................................... 2</p><p>DAFTAR ISI............................................................................................... 3</p><p>A. GAMBARAN UMUM............................................................................... 4</p><p>1. Pengenalan Adobe Flash CS3................................................................. 4</p><p>2. Alur Pembuatan Kuis Interaktif................................................................ 5</p><p>B. MEMBUAT KUIS INTERAKTIF ................................................................6</p><p>1. Membuka Flash dan Menyusun Layer ...................................................... 6</p><p>2. Membuat Background .................................................................................. 8</p><p>3. Mengisi Teks Kuis ........................................................................................ 10</p><p>4. Membuat Tombol ......................................................................................... 15</p><p>5. Menambah Kode (Action Scipt) ................................................................ 17</p><p>6. Mempublish File ........................................................................................... 19</p><p>C. TUGAS................................................................................................. 20</p><p>D. PENUTUP............................................................................................ 20</p><p>TENTANG PENULIS............................................................................... 21</p><p>LAMPIRAN................................................................................................. 22</p></li><li><p>[ Modul kuia sederhana A3 ]</p><p>4/A3</p><p>A.GAMBARAN UMUM</p><p>1. Pengenalan Adobe Flash CS3</p><p>Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,tetapi tak ada salahnya kita pelajari.</p><p> MenuMerupakan kumpulan dari perintah-perintah yang terdapatpada Adobe Flash CS3.</p><p> ToolsMerupakan kumpulan ikon yang mewakili salah satu perintahtetentu, baik membuat, memilih, menghapus dan lain-lain.</p><p> TimelineMerupakan tool yang berisi layer dan frame untuk mengatur,mengontrol suatu animasi.</p><p> StageMerupakan layar/lembarkerja yang digunakan untukmeletakkan objek/gambar animasi.</p><p>[ Modul kuia sederhana A3 ]</p><p>4/A3</p><p>A.GAMBARAN UMUM</p><p>1. Pengenalan Adobe Flash CS3</p><p>Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,tetapi tak ada salahnya kita pelajari.</p><p> MenuMerupakan kumpulan dari perintah-perintah yang terdapatpada Adobe Flash CS3.</p><p> ToolsMerupakan kumpulan ikon yang mewakili salah satu perintahtetentu, baik membuat, memilih, menghapus dan lain-lain.</p><p> TimelineMerupakan tool yang berisi layer dan frame untuk mengatur,mengontrol suatu animasi.</p><p> StageMerupakan layar/lembarkerja yang digunakan untukmeletakkan objek/gambar animasi.</p><p>[ Modul kuia sederhana A3 ]</p><p>4/A3</p><p>A.GAMBARAN UMUM</p><p>1. Pengenalan Adobe Flash CS3</p><p>Tak kenal maka taaruf. Meskipun bagian ini boleh kita lewati,tetapi tak ada salahnya kita pelajari.</p><p> MenuMerupakan kumpulan dari perintah-perintah yang terdapatpada Adobe Flash CS3.</p><p> ToolsMerupakan kumpulan ikon yang mewakili salah satu perintahtetentu, baik membuat, memilih, menghapus dan lain-lain.</p><p> TimelineMerupakan tool yang berisi layer dan frame untuk mengatur,mengontrol suatu animasi.</p><p> StageMerupakan layar/lembarkerja yang digunakan untukmeletakkan objek/gambar animasi.</p></li><li><p>5/A3</p><p>Panel</p><p>Merupakan kumpulan perintah/ikon yangdigunakan untuk memanipulasi atributobjek yang dibuat.</p><p> PopertiesMerupakan kumpulan panel yang digunakan untuk mengaturdokumen, membuat action script pada animasi.</p><p>2. Alur Pembuatan Kuis Interaktif</p><p>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.</p><p>Dari ketiga bagian diatas kita bagi menjadi 4 layer (Background,Teks, Tombol dan Kode) dan masing-masing layer kita tambahkanbeberapa frame.</p></li><li><p>6/A3</p><p>Layer</p><p>Frame</p><p>Background :Berisi gambar latar belakang.Teks :Berisi teks-teks baik soal kuis maupun keterangan.Tombol :Berisi tulisan/gambar yang berfungsi sebagai</p><p>tombol.Kode :Berisi kode (action script) untuk mengatur</p><p>jalannya progam.</p><p>B. MEMBUAT KUIS INTERAKTIF</p><p>Saatnya PRAKTEK. Ikuti langkah-langkah dibawah ini denganseksama :</p><p>1. Membuka Flash dan Menyusun Layer</p><p>a) Pastikan komputer anda telah terinstal softwareAdobe Flash CS3, kemudian jalankan dengan caradouble click icon Adobe Flash CS3 pada desktop.</p><p>b) Langsung ke bagian Create New, pilih Flash File (ActionScript2.0).</p></li><li><p>7/A3</p><p>c) Simpan (tekan Ctrl+S) dengan nama kuis interaktif dan padaSave as type pilih Flash CS3 Document (*.fla).</p><p>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.</p><p>e) Ubah nama layer dengan cara Double Click pada layer : Layer 1= Background, Layer 2 = Text, Layer 3 = Tombol dan Layer 4 =kode.</p></li><li><p>8/A3</p><p>l</p><p>2. Membuat Background</p><p>a) Klik layer Background, sebelum kita membuat backgroundsilakan perkecil dulu tampilan stage (area kerja) menjadi 50%agar bisa terlihat semua areanya.</p><p>b) Buatlah background dengan klik icon Rectangle Too (tekantombol R), atur properties:</p><p>Stroke color Fill color</p><p>c) Klik dan Drag pada stage hingga memenuhi area kerja.</p><p>d) Ingat selalu klik selection tool jika telahselesai mengunakan tool.</p><p>e) Klik kanan objek pilih Convert to Symbol, pada Type pilihMovie clip dan klik OK.</p></li><li><p>9/A3</p><p>f) Double Click objek, kita masuk ke dalam Symbol 1 yangterdapat sebuah layer (Layer 1).</p><p>g) Tambahkan sebuah layer, di Layer 2 Frame 1 gunakanRectangle tool untuk membuat 2 gambar dan atur sepertidibawah.</p><p>h) Seleksi objek bagian atas, klik Free Transform Tool(tekan tombol Q) dan pada bagian bawah tool pilih Envelope</p><p>Atur hingga seperti gambar dibawah.</p><p>i) Lakukan seperti langkah h) diatas pada Objek bagian bawah.</p></li><li><p>10/A3</p><p>j) Tambahkan sebuah layer lagi, pada Layer 3 Frame 1 denganRectangle tool buat satu objek dan atur menggunakan Free</p><p>Transform Tool hingga terbentuk gambar seperti dibawah.</p><p>k) Masih di Layer 3 Frame 1, klik objek dan pada warna pilih putihdengan alpha 50%.</p><p>l) Klik Scene 1 untuk kembali ke timeline utama.</p><p>m) Klik kanan layer Background frame 7 pilih Insert Keyframe,Background selesai.</p><p>3. Mengisi Teks Kuis</p><p>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:</p></li><li><p>11/A3</p><p>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.</p><p>b) Ketikan beberapa tulisan dan atur seperti gambar dibawah(menyesuaikan).</p><p>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.</p><p>d) Klik dan drag dibawah tulisan Masukkan Nama Anda,kemudian tambahkan tulisan Tanpa Nama.</p></li><li><p>12/A3</p><p>e) Klik kanan layer Text Frame 2, pilih Insert Blank Keyframe.</p><p>f) Dengan Text tool, type: Static text, ketikan soal dan jawabanhingga sepeti pada gambar dibawah. (Soal pada Lampiran)</p><p>g) Klik layer Text Frame 2, tekan F6 pada keyboard untuk meng-copy sampai pada Frame 6.</p><p>h) Klik Frame 3 kemudian edit soal dan jawaban, lakukan jugapada frame 4, 5 dan 6.</p></li><li><p>13/A3</p><p>i) Klik kanan frame 7, pilih Insert Blank Keyframe</p><p>j) Klik frame 1, seleksi kotak input text. Copy kemudian paste diframe 7.</p><p>k) Masih di frame 7, tambahkan tulisan dengan Text type:Statict text dan atur seperti dibawah.</p></li><li><p>14/A3</p><p>l) Tambahkan tulisan dengan Text type: Dinamic text dibawahNilai Anda dan KKM.</p><p>m) Klik Dinamic text dibawah Nilai Anda, pada properties isikanVar: total.</p><p>n) Klik Dinamic text dibawah KKM, pada properties isikan Var:keterangan.</p></li><li><p>15/A3</p><p>4. Membuat Tombol</p><p>a) Klik layer Tombol Frame 1, tambahkan objek kotak (Rectangletool) tepat diatas kata Mulai. Beri sembarang warna denganalpha : 0%, sehingga objek tak kelihatan.</p><p>b) Klik kanan objek, Convert to Symbol pilih type Button.</p><p>c) Pada properties, isi dengan mulai.</p><p>d) Klik kanan frame 2, pilih Insert Blank Keyframe.</p><p>e) Buat objek kotak diatas jawaban a. Beri sembarang warnadengan alpha : 0%, sehingga objek tak kelihatan.</p></li><li><p>16/A3</p><p>f) Klik kanan objek, Convert to Symbol pilih type Button.</p><p>g) Pada properties, isi dengan a .</p><p>h) Klik dan drag sambil menekan tombol Ctrl pada keyboard,letakkan objek diatas jawaban b. Ubah isidengan b.</p><p>i) Ulangi seperti langkah h) untuk jawaban c dan d. Hingga semuamasing-masing jawaban memiliki button.</p><p>j) Klik layer Tombol Frame 2, tekan F6 pada keyboard untukmeng-copy sampai pada Frame 6 (soal no 5).</p></li><li><p>k) Klik kanan Frame 7, pilih Insert Blank Keyframe.</p><p>l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol &gt;Type: Button. isi dengan ulangi. Warna denganalpha : 0%.</p><p>5. Menambah Kode (Action Script)</p><p>a) Aktifkan actions-frame (tekan F9).</p><p>k) Klik kanan Frame 7, pilih Insert Blank Keyframe.</p><p>l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol &gt;Type: Button. isi dengan ulangi. Warna denganalpha : 0%.</p><p>5. Menambah Kode (Action Script)</p><p>a) Aktifkan actions-frame (tekan F9).</p><p>k) Klik kanan Frame 7, pilih Insert Blank Keyframe.</p><p>l) Tambahkan kotak diatas kata Ulangi, Convert to Symbol &gt;Type: Button. isi dengan ulangi. Warna denganalpha : 0%.</p><p>5. Menambah Kode (Action Script)</p><p>a) Aktifkan actions-frame (tekan F9).</p></li><li><p>b) Klik layer Kode Frame 1, ketikan kode dibawah:</p><p>stop(); nilai=0;</p><p>mulai.onPress=function() {</p><p>nextFrame();</p><p>};</p><p>c) Klik kanan frame 2, Insert Blank Keyframe. Pada action-frameketikan kode berikut:</p><p>stop();</p><p>onEnterFrame=function(){</p><p>total=+nilai;</p><p>};</p><p>a.onPress=function(){</p><p>nilai+=20;</p><p>nextFrame();</p><p>};</p><p>b.onPress=function(){</p><p>nextFrame();</p><p>};</p><p>c.onPress=function(){</p><p>nextFrame();</p><p>};</p><p>d.onPress=function(){</p><p>nextFrame();</p><p>};</p></li><li><p>19</p><p>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</p><p>jawaban yang benar. Contoh : Jika Frame 3 (soal no 2)jawabannya c, maka yang ada script nilai+=20; hanyalah c.</p><p>c.onPress=function(){</p><p>nilai+=20;</p><p>nextFrame();</p><p>};</p><p>e) Klik frame 7, Insert Blank Keyframe. Ketikan kode berikut :</p><p>if(nilai&gt;=80){</p><p>keterangan="Selamat, Anda Tuntas...Pertahankan!";</p><p>}</p><p>else{</p><p>keterangan="Maaf, Anda Belum Tuntas...Tingkatkan Belajar";</p><p>}</p><p>ulangi.onPress=function(){</p><p>gotoAndStop(1);</p><p>};</p><p>6. Mempublish File</p><p>Klik kursor diluar area kerja, lihat properties pada publish klikSettings...</p></li><li><p>21/A3</p><p>20</p><p>Beralih ke tab Formats, pilih yang diperlukan saja. Dalam hal ini kitacoba 3, yaitu: Fla...</p></li></ul>