Ari Wibowo 2015 PENGEMBANGAN MEDIA PEMBELAJARAN INTERAKTIF MENGGUNAKAN MACROMEDIA FLASH VERSI 8.0. Pendahuluan

© Ari Wibowo 2015 1 PENGEMBANGAN MEDIA PEMBELAJARAN INTERAKTIF MENGGUNAKAN MACROMEDIA FLASH VERSI 8.0

Pendahuluan Macromedia Flash versi 8.0 merupakan salah satu software yang banyak dinikmati oleh kebanyakan orang karena sangat handal untuk mengerjakan segala hal yang berkaitan dengan multimedia. Kinerja Macromedia Flash versi 8.0 dapat juga dikombinasikan dengan programprogram lain. Software tersebut dapat diaplikasikan untuk pembuatan animasi kartun, animasi interaktif, efek-efek animasi, banner iklan, website, game, presentasi, maupun tutorial interaktif. Macromedia Flash versi 8.0 sendiri sebenarnya dapat dilihat dari dua sudut pandang, yaitu: (1) sebagai software untuk membuat aplikasi, animasi, dan sistem informasi, (2) sebagai teknologi karena saat ini hampir semua browser serta sebagian besar peralatan elektronik sudah terinstal Flash Player untuk dapat menjalankan animasi. Macromedia Flash versi 8.0 adalah program animasi berbasis vektor yang dapat menghasilkan file berukuran kecil sehingga mudah diakses. Program tersebut telah dilengkapi dengan tool-tool untuk membuat dan mengelola gambar. Gambar tersebut nantinya akan dianimasikan atau akan dijalankan oleh script tertentu yang kita tuliskan. Adanya bahasa scripting yang biasa disebut Action Script merupakan kelebihan dari Macromedia Flash versi 8.0. Action Script tersebut memiliki kemampuan yang sudah tidak diragukan lagi untuk mendukung perancangan sebuah animasi atau aplikasi mulai dari yang sederhana sampai yang kompleks sekalipun. Kedahsyatan Action Script sudah terbukti powerful dan mampu bersaing dengan bahasa scripting yang popular pada masa sekarang ini.

Materi 1 Pemanfaatan Simbol Button untuk Mendesain Website Macromedia Flash versi 8.0 dapat juga digunakan untuk mendesain website. Tentu saja nantinya hasil akhir publikasi harus disetting kedalam format html dengan terlebih dahulu melakukan pengaturan dengan menekan menu File => Publish Settings. Selanjutnya setelah muncul kotak dialog Publish Settings berikanlah tanda chek pada opsi HTML sebagai berikut.

Praktekkanlah langkah-langkah berikut untuk mendesain website sederhana. 1. Atur dimensi stage movie dengan lebar 700 pixel dan tinggi 400 pixel melalui menu Modify => Document. 2. Siapkan tampilan home pada Keyframe 1 Layer 1, kemudian gantilah nama “Layer 1” menjadi “home”. Tampilan tersebut misalnya memuat gambar, teks serta motif-motif yang lain sebagai berikut.


3. Selanjutnya buat tampilan profil (Gambar a), kantor (Gambar b), dan kontak (Gambar c) masing-masing pada Keyframe 2, 3, dan 4 pada tiga Layer lain yang berbeda. Selanjutnya berilah nama masing-masing Layer tersebut dengan nama “profil”, “kantor” dan “kontak”. Tentunya pemberian nama tersebut akan memudahkan kita nantinya dalam proses editing.

Gambar b

Gambar a

Gambar c

4. Pastikan posisi Blank Keyframe dan Keyframe pada keempat layer yang sudah dibuat pada langkah 2 dan 3 sebagai berikut.


Pastikan pada keempat layer tersebut simbol gembok diaktifkan untuk menjamin tidak terjadi perubahan secara tidak sengaja. Sedangkan tata letak keempat layer tersebut bebas, sehingga gambar di atas hanya sebagai salah satu contoh saja. 5. Selanjutnya buatlah folder antarmuka (interface) yang misalnya memuat Layer bernama “bingkai”, “palang sejajar”, “button” dan “label button” yang masing-masing memiliki panjang frame empat (Gambar a), sedangkan tampilan keempat Layer tersebut disajikan pada Gambar b sebagai berikut.

Gambar a

Gambar b

Hal yang penting di sini adalah bahwa button atau tombol dapat dibuat dengan menggunakan Rectangle Tool atau Button pada Components, namun harus dikonversi ke dalam simbol Button dengan menekan menu Modify => Convert to Symbol kemudian memilih tipe Button. Sedangkan Instance name pada keempat button tersebut adalah masing-masing “btn1”, “btn2”, “btn3” dan “btn4”. Pemberian nama pada Instance name tersebut mutlak dilakukan karena Instance name tersebut pada script selanjutnya akan dipanggil. 6. Buatlah Layer bernama “label” yang memuat 4 Blank Keyframe. Selanjutnya berilah nama keempat Blank Keyframe tersebut masing-masing dengan “home”, “profil”, “kantor” dan “kontak”. Langkah-langkah untuk memberi nama Blank Keyframe tersebut adalah: (a) klik Blank Key Frame yang akan diberi nama, (b) buka panel Properties dengan menekan menu Window => Properties => Properties. Lokasi tempat pemberian nama tersebut dapat dilihat pada gambar berikut.

Jika kita berhasil memberi nama maka tampilan Blank Keyframe akan berubah sebagai berikut.


7. Tambahkan Layer baru bernama “aksi” yang akan kita gunakan untuk menuliskan perintah script. Buatlah Blank Keyframe pada frame pertama, selanjutnya klik menu Window => Actions. Setelah itu tuliskan script berikut. stop(); btn1.onRelease = function(){ gotoAndStop("home"); } btn2.onRelease = function(){ gotoAndStop("profil"); } btn3.onRelease = function(){ gotoAndStop("kantor"); } btn4.onRelease = function(){ gotoAndStop("kontak"); } 8. Selanjutnya publikasikan file FLA yang telah selesai dibuat tersebut ke dalam tipe HTML. Anda dapat memperoleh Page Source dengan cara terlebih dahulu membuka file HTML hasil publikasi dengan menggunakan program perambah dunia maya misalnya Mozilla Firefox, Google Chrome, Opera, Internet Explorer, dan sebagainya. Selanjutnya klik kanan pada halaman website tersebut kemudian pilih View Page Source sebagaimana tampak pada gambar berikut.


Page Source yang dihasilkan ditampilkan pada gambar berikut.

Materi 2 Pemanfaatan Simbol Button yang Tidak Ditampakkan untuk Membuat Animasi Interaktif Macromedia Flash versi 8.0 dapat juga digunakan untuk membuat animasi interaktif. Misalkan kita ingin membuat animasi interaktif tentang bagian-bagian tubuh robot. Sehingga ketika pointer mouse diarahkan pada bagian tertentu maka secara otomatis akan nampak garis berwarna hitam dan teks berwarna putih, serta suara yang menunjukkan nama bagian-bagian tubuh robot tersebut sebagaimana tampak pada Gambar a, b dan c.

Gambar b

Gambar a

Gambar c


Untuk membuat animasi interaktif tersebut kita bisa memanfaatkan simbol button yang tidak ditampakkan. Praktekkanlah langkah-langkah berikut untuk membuatnya. 1. Buatlah layer dengan nama “background” yang memuat warna background yang bergradasi dari bagian bawah (terang) ke bagian atas (gelap).

2. Buatlah layer dengan nama “robot” yang memuat gambar robot sederhana. Posisi layer “robot” harus berada di atas layer “background”.

3. Selanjutnya buatlah layer baru dengan nama “tombol” yang posisinya berada di atas layer “robot”. Layer “tombol” akan memuat tiga button yang berada pada bagian mata, mulut dan logo. Ikutilah langkah-langkah sebagai berikut: a. Klik Rectangle Tool dengan warna stroke dan warna fill bebas. Selanjutnya buatlah kotak yang menutupi bagian mata.


b. Klik dua kali berturut-turut pada kotak yang menutupi area mata kemudian klik menu Modify => Convert to Symbol. Setelah kotak dialog Convert to Symbol muncul, berilah nama “btnMata” dan pilihlah tipe Button kemudian tekan OK. c. Selanjutnya klik dua kali berturut-turut pada simbol “btnMata”. Pastikanlah Anda sudah berada dalam simbol tersebut dengan melihat pada bagian timeline sebagai berikut.

d. Selanjutnya tekan tombol Delete untuk menghapus kotak tersebut. Setelah itu klik kanan pada kotak frame di bawah Over kemudian pilih Insert Blank Keyframe. Gambarlah garis berwarna hitam dengan menggunakan Line Tool dan tambahkan teks “MATA” berwarna putih dengan menggunakan Text Tool. Aturlah ketebalan garis dan ukuran teks melalui panel Properties.

e. Selanjutnya klik kanan pada kotak frame di bawah Hit kemudian pilih Insert Blank Keyframe. Buatlah kembali kotak yang menjadi area tombol aktif dengan warna sembarang sebagai berikut.

f. Siapkanlah file suara dengan tipe mp3 yang memperdengarkan kata “mata”. Anda dapat merekam suara Anda dengan menggunakan laptop dengan cara klik start button kemudian ketik “sound recorder” dan tekan tombol Enter. File suara yang dihasilkan oleh program tersebut adalah wma (Windows Media Audio File). Dengan demikian Anda memerlukan program untuk mengkonversikan file wma kedalam tipe mp3. Anda dapat dengan mudah mendapatkan program tersebut di internet misalkan dengan menuliskan


“wma to mp3 converter free download” sebagai kata kunci pada mesin pencari google Anda. g. Imporlah ke dalam Library file mp3 yang sudah dihasilkan pada langkah (f) dengan cara menekan menu File => Import => Import to Library. Setelah itu pilihlah file mp3 Anda pada folder tempat Anda menyimpan file tersebut sebelumnya kemudian tekan tombol Open. Selanjutnya bukalah panel Library untuk memastikan bahwa file mp3 tersebut sudah berhasil Anda impor. Untuk menyisipkan file suara tersebut pertama-tama klik kiri pada frame Over, kemudian klik file suara pada kotak Library dan drag ke stage movie. Jika Anda berhasil melakukannya maka tampilan frame pada simbol btnMata berubah sebagai berikut.

h. Tekan menu Control kemudian pilih opsi Test Movie untuk melihat hasilnya. 4. Dengan menggunakan cara yang sama dengan langkah (3) buatlah dua button yang lain pada bagian mulut dan logo.

Materi 3 Penggunaan Komponen Tree, ProgressBar dan Loader untuk Membuat Galeri Gambar Sederhana Pada bagian ini akan didemonstrasikan bagaimana pemanfaatan komponen-komponen yang sudah tersedia pada Macromedia Flash versi 8.0 untuk membuat galeri gambar sederhana sebagaimana tampak pada Gambar a dan b.

Gambar a

Gambar b

Tiga macam komponen yang dapat dimanfaatkan untuk pembuatan galeri gambar sederhana adalah Tree, ProgressBar dan Loader. Praktekkanlah langkah-langkah berikut: 1. Sisipkanlah sembarang gambar yang akan kita gunakan sebagai background, kemudian berilah nama layer tersebut dengan nama “background”. Misalnya gambar yang digunakan sebagai background adalah sebagai berikut.


2. Buatlah layer baru di atas layer background kemudian berilah nama layer baru tersebut dengan nama “komponen”. Pada layer ini kita akan menempatkan tiga komponen yang digunakan untuk membuat galeri gambar sederhana. Tekan menu Window kemudian pilih opsi Components. Setelah kotak dialog Components muncul, pada bagian User Interface klik opsi Tree kemudian drag ke stage movie sebelah kiri. Selanjutnya gunakan Free Transform Tool sehingga tampilannya tampak sebagai berikut.

Setelah itu bukalah panel Properties kemudian isilah Instance Name komponen tersebut dengan “pohon”. Selanjutnya dengan cara yang sama, pada bagian User Interface klik opsi ProgressBar dan Loader kemudian tempatkan dan atur posisinya sebagaimana tampak pada Gambar 4. Jangan lupa untuk memberi Instance Name kedua komponen tersebut masingmasing dengan “progress” dan “loader”. Ketiga Instance Name tersebut akan digunakan dalam penulisan script pada langkah selanjutnya. 3. Buatlah layer baru di atas layer “komponen” kemudian beri nama dengan “aksi” sehingga tampilan Timeline tampak sebagai berikut.


Selanjutnya tekan menu Window kemudian pilih opsi Actions serta tulislah script berikut. var progress:mx.controls.ProgressBar; var loader:mx.controls.Loader; var pohon:mx.controls.Tree; progress._visible = false; progress.indeterminate = true; progress.setSize(160, 30); progress.source = loader; progress.mode = "polled"; var pbListener:Object = new Object(); pbListener.complete = function(evt:Object) { evt.target._visible = false; }; progress.addEventListener("complete", pbListener); var treeDP_xml:XML = new XML(); treeDP_xml.ignoreWhite = true; treeDP_xml.onLoad = function(success:Boolean) { if (success) { pohon.dataProvider = this.firstChild; } }; treeDP_xml.load("pohon_galeri.xml"); var treeListener:Object = new Object(); treeListener.change = function(evt:Object) { var treeNode:XMLNode = evt.target.selectedItem; if (treeNode.attributes.src != undefined) { progress._visible = true; loader.load(treeNode.attributes.src); } }; pohon.addEventListener("change", treeListener); 4. Siapkanlah sebuah file bertipe XML sebagai tempat kita melakukan pendataan terhadap file gambar yang akan ditampilkan. Hal penting yang harus diingat adalah bahwa keseluruhan file gambar harus berada pada folder yang sama dengan file FLA yang memuat galeri gambar. Langkah-langkahnya adalah sebagai berikut: (a) bukalah program Notepad, (b) ketiklah kodenya, (c) Tekan menu File kemudian Save As, pada bagian Save as type All Files (*.*), (d) Pada bagian File name tulislah “pohon_galeri.xml”, (e) tekan Save. Sedangkan kode yang ditulis pada program Notepad adalah sebagai berikut.


<node label="Buah-buahan"> <node label="alpukat" src="alpukat.jpg" /> <node label="anggur" src="anggur.jpg" /> <node label="apel" src="apel.jpg" /> <node label="belimbing" src="belimbing.jpg" /> <node label="durian" src="durian.jpg" /> <node label="jambu" src="jambu.jpg" /> <node label="jeruk" src="jeruk.jpg" /> <node label="kiwi" src="kiwi.jpg" /> <node label="manggis" src="manggis.jpg" /> <node label="pepaya" src="pepaya.jpg" /> <node label="pisang" src="pisang.jpg" /> <node label="semangka.jpg" src="semangka.jpg" /> <node label="strawberi" src="strawberi.jpg" /> <node label="Sayuran"> <node label="bayam" src="bayam.jpg" /> <node label="brokoli" src="brokoli.jpg" /> <node label="cabai" src="cabai.jpg" /> <node label="kubis" src="kubis.jpg" /> <node label="paprika" src="paprika.jpg" /> <node label="sawi" src="sawi.jpg" /> <node label="tomat" src="tomat.jpg" /> <node label="wortel" src="wortel.jpg" />

Materi 4 Penggunaan Komponen FLVPlayback untuk Menampilkan File Video Secara Dinamis Pada bagian ini akan didemonstrasikan bagaimana pemanfaatan komponen FLVPlayback yang sudah tersedia pada Macromedia Flash versi 8.0 untuk menampilan file video bertipe flv secara dinamis sebagaimana tampak pada Gambar a dan Gambar b.

Gambar a

Gambar b


Gambar a merupakan tampilan pada stage movie dan Gambar b merupakan tampilan ketika kita Test Movie. Pada contoh ini digunakan sebuah file movie bertipe flv dengan nama file “belajar bersuci.flv”. Untuk membuatnya praktekkanlah langkah-langkah berikut: 5. Siapkanlah stage movie baru sebagai tempat kita membuat animasi, kemudian tentukanlah dimensi lebar (width) dan tinggi (height). Klik menu Window kemudian pilih opsi Components. Selanjutnya pilih kategori FLV Playback – Player 8 maka akan muncul opsi FLVPlayback sebagaimana tampak pada Gambar 3.

Gambar 3 Klik pada opsi FLVPlayback tersebut kemudian drag ke stage movie. Selanjutnya Anda dapat mengatur ukuran komponen FLVPlayback dan menyesuaikan dengan ukuran stage movie dengan menggunakan Free Transform Tool. Namun satu hal yang harus diperhatikan adalah bahwa Anda harus mengatur ukuran dimensi lebar stage movie sama persis dengan dimensi lebar file video bertipe flv yang akan ditampilkan. Namun untuk dimensi tinggi stage movie kita buat lebih tinggi jika dibandingkan dengan dimensi tinggi file video bertipe flv yang akan ditampilkan. Karena kita harus memberikan tambahan area kosong pada bagian bawah stage movie sebagai tempat kita menaruh tombol-tombol untuk mengendalikan video misalnya tombol play, pause, stop, volume dan sebagainya. 6. Pastikan komponen FLVPlayback sudah terpilih, kemudian klik menu Windows => Properties => Parameters sehingga pada bagian bawah stage movie ditampilkan sebagaimana tampak pada gambar berikut.

Selanjutnya klik pada kotak isian contentPath sehingga muncul kotak dialog sebagaimana tampak pada gambar berikut.


Setelah itu klik pada gambar folder yang berada di sebelah kanan, kemudian alamatkan pada file video bertipe flv yang akan digunakan selanjutnya tekan OK. 7. Pada Macromedia Flash versi 8.0 sudah disediakan berbagai macam tampilan yang diberi nama dengan “skin”. Masih pada panel Parameters, kita dapat mengubah skin dengan cara menekan kotak isian skin sebagaimana tampak pada gambar berikut.

Setelah itu akan ditampilkan berbagai macam tampilan sebagaimana tampak pada gambar berikut.

Misalnya pilihlah skin ArcticExternalAll.swf. Pada tampilan skin tersebut akan disediakan semua tombol yang dapat kita gunakan untuk mengendalikan movie ketika movie tersebut dimainkan. 8. Tekan menu kontrol kemudian pilih opsi Test Movie untuk melihat hasil akhirnya.

Materi 5 Pembuatan Latihan Ulangan Interaktif Dengan Evaluasi Soal Secara Keseluruhan Pada bagian ini akan dibahas langkah-langkah pembuatan kuis interaktif dengan menggunakan Macromedia Flash versi 8.0. Bentuk pertanyaan pada kuis ini adalah pilihan ganda dengan 5 pilihan jawaban untuk setiap soalnya. Sebagai contoh pada praktek kali ini akan diberikan 5 soal. Sebelum Anda membuat dalam aplikasi flash sebaiknya Anda mempersiapkan soal-soal dan jawabannya terlebih dahulu. Misalnya berikut adalah soal-soal tersebut (tanda (*) menunjukkan kunci jawaban dari masing-masing soal).


Soal no. 1: Suatu seri: 3 – 5 – 8 – 12 – … Tentukan seri selanjutnya! a. 14

d. 17 (*)

b. 15

e. 18

c. 16 Soal no. 2: Suatu seri: 1 – 4 – 8 – 11 – 15 – … Tentukan seri selanjutnya! a. 17

d. 20

b. 18 (*)

e. 21

c. 19 Soal no. 3: Suatu seri: 100 – 4 – 90 – 7 – 80 – … Tentukan seri selanjutnya! a. 8

d. 11

b. 9

e. 12

c. 10 (*) Soal no. 4: Suatu seri: 5 – 7 – 10 – 12 – 15 – … Tentukan seri selanjutnya! a. 13

d. 16

b. 14

e. 17 (*)

c. 15 Soal no. 5: Suatu seri: d – f – h – j – l – …Tentukan seri selanjutnya! a. j

d. m

b. k

e. n (*)

c. l Berikut

adalah

langkah-langkah pembuatan kuis interaktif

dengan menggunakan

Macromedia Flash versi 8.0: 1. Siapkanlah stage movie baru dengan dimensi lebar sebesar 550 px dan tinggi sebesar 400 px. Selanjutnya siapkanlah layer bernama “background” yang akan digunakan misalnya sebagai berikut.

Pada contoh ini background yang digunakan untuk keseluruhan soal dibuat sama. Dengan demikian klik kanan pada frame 6 kemudian pilihlah Insert Frame sehingga tampilan timelinenya sebagai berikut.


2. Selanjutnya buatlah layer baru bernama “Soal & Evaluasi”. Setelah itu siapkanlah enam buah Blank Keyframe pada frame 1 sampai dengan frame 6. Blank Keyframe 1 sampai 5 akan kita gunakan untuk menampilkan soal dan pilihan jawabannya, sedangkan Blank Keyframe 6 akan kita gunakan untuk menampilkan halaman evaluasinya. Cara membuat Blank Keyframe adalah dengan melakukan klik kanan pada frame tertentu kemudian pilihlah Insert Blank Keyframe. Sebagai contoh berikut ini adalah soal dan pilihan jawaban yang dituliskan pada Blank Keyframe 1 dan halaman evaluasi yang dituliskan pada Blank Keyframe 6.

Kotak dengan garis putus-putus pada halaman evaluasi dibuat dengan menggunakan Text Tool dengan tipe teks dinamis (Dinamic Text), sedangkan pada layer yang memuat soal dan opsi jawaban tidak perlu dituliskan huruf A, B, C, D, dan E karena opsi tersebut akan kita taruh pada layer yang berbeda nantinya. Dengan cara yang sama tuliskanlah soal dan pilihan jawaban untuk soal nomor 2 sampai dengan 5 sehingga tampilan timeline-nya sekarang berubah menjadi sebagai berikut.

3. Buatlah layer baru dengan nama “Tombol”, kemudian tambahkan Blank Keyframe pada frame 1 sampai dengan frame 6. Pada Blank Keyframe 1 sampai dengan 5 akan kita tuliskan huruf A, B, C, D, dan E untuk soal 1 sampai dengan soal 5. Posisikan kelima huruf tersebut sesuai dengan posisi pilihan jawaban, misalnya sebagai berikut.

Anda dapat menambahkan lingkaran atau kotak sesuai kreasi Anda di luar huruf A, B, C, D,


dan E. Selanjutnya konversikan kelima lingkaran yang memuat huruf tersebut kedalam simbol Button dengan nama simbol yang berbeda antara satu lingkaran dengan lingkaran yang lain. Tambahkan efek pada semua tombol agar ketika pointer mouse diklik pada tombol tersebut, posisi tombol tersebut bergerak sedikit ke bawah.

Setelah itu lakukanlah langkah yang sama untuk soal nomor 2, 3, 4, dan 5. Anda dapat memanfaatkan Copy-Paste untuk memudahkan pekerjaan Anda. Jika Anda telah berhasil melakukannya maka tampilan timeline sekarang berubah menjadi sebagai berikut.

4. Selanjutnya tambahkan scipt pada kelima tombol opsi jawaban soal 1. Kita menginginkan jika user memilih jawaban yang salah maka akan ditampilkan frame yang ke-2 tanpa ada penambahan skor, sedangkan jika user memilih jawaban yang benar maka juga akan ditampilkan frame yang ke-2, tetapi dengan penambahan skor satu poin. Dengan demikian untuk tombol pilihan dengan jawaban yang salah pada soal 1 (A, B, C, dan E) ditambahkan script berikut:

Sedangkan untuk tombol pilihan dengan jawaban yang benar pada soal 1 (D) ditambahkan script berikut:

5. Dengan cara yang sama tambahkanlah script pada masing-masing 5 tombol untuk soal nomor 2, 3, 4 dan 5. 6. Selanjutnya klik pada Blank Keyframe ke-6 layer “Tombol”. Tambahkan teks statis dan 3 kotak teks dinamis serta satu tombol untuk perintah pengulangan “Ulangi”. Berilah nama variabel ketiga teks dinamis tersebut masing-masing “skor”, “salah” dan “skor_total”.


Tuliskanlah script berikut pada tombol “Ulangi”.

Tujuan tombol tersebut adalah agar user dapat mengulangi kembali latihan ulangan jika user ingin mencoba kembali. 7. Tambahkanlah layer baru bernama “Aksi” yang akan kita gunakan untuk mengendalikan pergerakan frame. Buatlah enam Blank Keyframe kemudian tambahkan script berikut untuk masing-masing Blank Keyframe tersebut. Blank Keyframe ke1 2, 3, 4, dan 5 6

Script stop( ); skor = 0; stop( ); stop( ); salah = 5 – skor; skor_total = (skor/5)*100;

Jika Anda berhasil melakukan langkah tersebut maka tampilan timeline-nya akan berubah menjadi sebagai berikut.

8. Jika Anda ingin memasukkan suara ke dalam latihan ulangan interaktif tersebut, maka tambahkan satu layer baru bernama “Suara”. Selanjutnya klik kanan frame keenam layer “Suara” kemudian pilih opsi Insert Frame. Sisipkanlah file suara yang sudah Anda impor ke Library sebelumnya dengan melakukan drag file suara tersebut dari panel Library ke stage movie.


Materi 6 Pembuatan Latihan Ulangan Interaktif Dengan Evaluasi Pada MasingMasing Soal dan Evaluasi Secara Keseluruhan Pada Materi 5 sudah dipaparkan satu contoh model soal pilihan ganda interaktif. Namun demikian, contoh tersebut masih memiliki kelemahan misalnya siswa tidak tahu jawaban soal nomor berapa saja yang mereka masih salah. Pada bagian ini akan disajikan contoh model lain yang bisa menutupi kelemahan model sebelumnya. Pada latihan ulangan interaktif kali ini siswa dapat langsung melihat hasil evaluasinya. Sehingga mereka akan langsung tahu mengenai jawaban mereka, jawaban mana yang benar dan jawaban mana yang salah. Tampilan akhirnya sebagaimana disajikan pada gambar berikut.

Pada contoh kali ini kita menggunakan dua buah Component pada Macromedia Flash versi 8.0 yaitu List dan RadioButton. Ikutilah langkah-langkah berikut untuk membuatnya. 1. Buatlah layer baru dengan nama “background” yang memuat desain background sebagai berikut.


2. Selanjutnya buatlah layer baru yang diposisikan di atas layerbackground dengan nama “soal”. Klik menu Windows kemudian pilih opsi Component. Setelah panel Component terbuka, klik List dan drag ke stage movie pada bagian sebelah kiri. Selanjutnya bukalah panel Parameters dengan menekan menu Windows => Properties => Parameters sehingga pada bagian bawah ditampilkan panel Parameters sebagai berikut.

Selanjutnya klik pada kotak di sebelah kanan labels sehingga muncul kotak dialog berikut.

Tekan tombol “+” untuk menambahkan keseluruhan daftar soal. Dalam hal ini kita harus memasukkan teks soal dan jawabannya untuk masing-masing baris sehingga tampilan kotak dialog tersebut berubah sebagai berikut.

3. Selanjutnya tambahkan teks statis di sisi sebelah kanan atas shg tampilannya sebagai berikut.


4. Selanjutnya buatlah layer baru bernama “opsi jawaban & evaluasi”. Pada layer ini kita akan menyiapkan opsi jawaban dan evaluasi untuk masing-masing soal serta penilaian akhir. Desain penilaian akhir menggunakan dua tombol “EVALUASI SEKARANG” dan “Ulangi”, teks statis dan tiga teks dinamis (ditunjukkan dengan kotak dengan garis putus-putus). Tampilan stage movienya adalah sebagai berikut.

Opsi jawaban disiapkan dengan menggunakan RadioButton pada panel Component, evaluasi untuk masing-masing soal disiapkan dengan menggunakan gambar check berwarna hijau dan gambar silang berwarna merah. Kedua gambar tersebut harus dikonversikan ke dalam simbol Movie Clip dengan nama yang berbeda untuk masing-masing soal dan diposisikan bertumpuk pada lajur “Hasil Evaluasi”. Dengan demikian kita mempunyai 5 Movie Clip sebagai simbol bahwa jawaban soal tertentu benar dan 5 Movie Clip sebagai simbol bahwa jawaban soal tertentu salah. Selanjutnya berilah nama pada Instance name sebagai berikut:


soal1_benar, soal2_benar, soal3_benar, soal4_benar, soal5_benar dan soal1_salah, soal2_salah, soal3_salah, soal4_salah, soal5_salah. 5. Selanjutnya buatlah pengaturan pada panel Parameters untuk masing-masing RadioButton yang posisinya berada di sebelah kanan “Soal no.1” sebagai berikut. RadioButton untuk “Soal

Pengaturan pada panel Parameters

Keterangan

no.1” data = 0 karena A adalah opsi jawaban yang salah, groupname A

“jwb_soal1” sebagai nama grup untuk opsi jawaban “Soal no 1”. data = 0 karena B adalah opsi jawaban yang salah, groupname

B

“jwb_soal1” sebagai nama grup untuk opsi jawaban “Soal no 1”. data = 0 karena C adalah opsi jawaban yang salah, groupname

C

“jwb_soal1” sebagai nama grup untuk opsi jawaban “Soal no 1”. data = 1 karena D adalah opsi jawaban yang salah, groupname

D

“jwb_soal1” sebagai nama grup untuk opsi jawaban “Soal no 1”. data = 0 karena E adalah opsi jawaban yang salah, groupname

E

“jwb_soal1” sebagai nama grup untuk opsi jawaban “Soal no 1”.

6. Dengan cara yang sama pada langkah 5, buatlah pengaturan pada panel Parameters untuk masing-masing RadioButton yang posisinya berada di sebelah kanan “Soal no.2”, “Soal no.3”, “Soal no.4”, dan “Soal no.5”. 7. Selanjutnya berilah nama variabel pada 3 teks dinamis sebagai berikut : (a) “skor” untuk Total Jawaban yang Benar, (b) “salah” untuk Total Jawaban yang Salah, dan (c) “skor_total” untuk SKOR. Pada kotak dinamis “skor_total” kita atur ukuran huruf yang lebih besar. Anda dapat menggunakan pengaturan warna yang berbeda untuk masing-masing kotak dinamis agar tampilannya menjadi semakin menarik. 8. Tambahkan script berikut pada Button “EVALUASI SEKARANG”.


on(release) { var skor1:Number = Number(jwb_soal1.selection.data); var skor2:Number = Number(jwb_soal2.selection.data); var skor3:Number = Number(jwb_soal3.selection.data); var skor4:Number = Number(jwb_soal4.selection.data); var skor5:Number = Number(jwb_soal5.selection.data); var skor:Number = Number(skor1) + Number(skor2)+ Number(skor3) + Number(skor4)+ Number(skor5); var salah:Number = Number(5) - Number(skor); var skor_total:Number = Number((skor/5)*100); if (Number(skor1) == Number(1)) { soal1_benar._visible=true; } else { soal1_salah._visible=true; } if (Number(skor2) == Number(1)) { soal2_benar._visible=true; } else { soal2_salah._visible=true; } if (Number(skor3) == Number(1)){ soal3_benar._visible=true; } else { soal3_salah._visible=true; } if (Number(skor4) == Number(1)){ soal4_benar._visible=true; } else { soal4_salah._visible=true; } if (Number(skor5) == Number(1)){ soal5_benar._visible=true; } else { soal5_salah._visible=true; } } 9. Tambahkan script berikut pada Button “Ulangi”. on(release){ soal1_benar._visible=false; soal1_salah._visible=false; soal2_benar._visible=false; soal2_salah._visible=false; soal3_benar._visible=false; soal3_salah._visible=false; soal4_benar._visible=false; soal4_salah._visible=false; soal5_benar._visible=false; soal5_salah._visible=false; soal1_a.selected=false; soal1_b.selected=false; soal1_c.selected=false; soal1_d.selected=false; soal1_e.selected=false; soal2_a.selected=false; soal2_b.selected=false; soal2_c.selected=false; soal2_d.selected=false; soal2_e.selected=false; soal3_a.selected=false; soal3_b.selected=false; soal3_c.selected=false; soal3_d.selected=false; soal3_e.selected=false; soal4_a.selected=false; soal4_b.selected=false; soal4_c.selected=false; soal4_d.selected=false; soal4_e.selected=false; soal5_a.selected=false; soal5_b.selected=false; soal5_c.selected=false; soal5_d.selected=false; soal5_e.selected=false; skor = ""; salah = ""; skor_total = ""; } 10. Tambahkan layer baru dengan nama “perintah awal”, kemudian tulislah script berikut.


soal1_benar._visible=false; soal1_salah._visible=false; soal2_benar._visible=false; soal2_salah._visible=false; soal3_benar._visible=false; soal3_salah._visible=false; soal4_benar._visible=false; soal4_salah._visible=false; soal5_benar._visible=false; soal5_salah._visible=false;

Penutup Pada Materi 1 sampai dengan Materi 6 telah dipaparkan berbagai macam fasilitas yang telah tersedia pada Macromedia Flash versi 8.0 untuk keperluan pengembangan media pembelajaran interaktif. Modifikasi-modifikasi masih sangat mungkin untuk dilakukan, misalnya untuk latihan ulangan interaktif. Pada Materi 5 dan Materi 6 sudah diberikan ilustrasi untuk latihan ulangan interaktif, namun kita masih bisa membuat modifikasi misalnya modelnya uraian singkat, mencocokkan gambar, atau bahkan mengemasnya dalam model game. Tentu hal tersebut akan membuat siswa SD/ MI menjadi semakin tertarik menggunakan tutorial interaktif yang kita buat. Kreatifitas mahasiswa jurusan PGMI dituntut untuk bisa membuat media pembelajaran interaktif yang menarik. Sebagai bahan pengayaan mahasiswa ditugaskan untuk mempelajari tentang “Load Movie” dan “Unload Movie”. Pengetahuan tentang kedua hal tersebut akan memudahkan mahasiswa untuk menggabungkan banyak file animasi kedalam sebuah file “master”. Dengan demikian file master tersebut dapat digunakan untuk menampilkan maupun menutup kembali animasi-animasi lain yang telah dibuat sebelumnya. File master tersebut adalah file untuk mengakses tutorial interaktif secara keseluruhan yang dapat dikemas kedalam tipe aplication (exe) ataupun yang lain. Materi tentang “Load Movie” dan “Unload Movie” dapat dibaca di buku “Pengembangan Media Pembelajaran Berbasis Digital dengan Menggunakan Macromedia Flash versi 8.0” (Ari Wibowo, 2013 : 133-140). **Ω Ω Ω**

Ari Wibowo 2015 PENGEMBANGAN MEDIA PEMBELAJARAN INTERAKTIF MENGGUNAKAN MACROMEDIA FLASH VERSI 8.0. Pendahuluan

Recommend Documents