Bagian 4 Membuat Media Pembelajaran

MembuatMediaPembelajaranInteraktif
DenganFlash Oleh:FaridSuryanto
fareed_surya@yahoo.com
BAGIAN 4 Membuat Media Pembelajaran
Membuat Game Aritmatika Sederhana

Salah satu kemudahan dari pembuatan game matematika, khususnya operasi aljabar, adalah kita bisa meminta bantuan komputer untuk membuat soal secara otomatis dengan jumlah soal tidak terbatas atau bisa kita kendalikan sesuai dengan yang kita perlukan. Selain itu kita juga bisa memeriksa jawaban yang diberikan oleh user dengan mecocokkannnya dengan kunci jawaban yang kita buat kemudian memberi respon (benar/salah). Berikut ini dasar-dasar action script yang menjadi acuan pokok dalam pembuatan game aritmatika.
Soal dengan Bilangan Bulat Positif

Pembuatan soal yang dimaksud adalah mengambil bilangan secara acak dengan perintah random(x). X adalah bilangan bulat positif sehingga bilangan yang akan diacak adalah bilangan 0 sampi dengan x. Berikut langkah-langkah pembuatan soal: 1. Buatlah teks area menggunakan Teks Tool, pada properties pakailah Dynamic Teks. Kemudian berilah nama bilangan1 pada kotak var di properties. Buatlah satu teks area lagi dan berilah nama variabel bilangan2. 2. Buatlah tombol SOAL dan berilah nama soal_tbl pada properties<<instance name.
Tandaobjek terseleksi
35
3.
Seleksi soal_tbl dan berilah action script pada kotak action seperti dibawah ini:
on(release){ bilangan1=random(10); bilangan2=random(10); } 4. Cobalah lakukan Test Movie dengan menekan Shift+Enter.
Penjelasan Script: Perintah bilangan1=random(10); berarti teks area dengan variabel bilangan1 akan diisi oleh bilangan bulat acak dari 0 sampai dengan 10.
Soal Bilangan Bulat Negatif

Operasi pada matematika tidak terbatas pada bilangan bulat positif saja. Berikut langkah untuk membuat soal bilangan bulat negatif: 1. Lakukan prosedur seperti pada pembuatan soal bilangan bulat positif. 2. Lakukan penambahan script pada soal_tbl seperti berikut ini: on(release){ bilangan1=random(10)*-1; bilangan2=random(10); } Penambahan script *-1 diatas berarti bilangan acak dari 0 sampai 10 akan dikalikan dengan bilangan -1 sehingga bilangan yang dihasilkan adalah bilangan bulat negatif -10 sampai dengan 0. Cobalah lakukan Test Movie.
Memeriksa Jawaban User dan Memberi Respon

Membuat Input Text Area dan Respon Sebelum jawaban user diperiksa, user harus memasukkan data sebagai jawaban atas soal yang diberikan. Oleh karena itu kita harus membuat teks area dengan input type. Ikuti langkah berikut: 1. Buatlah teks area dengan tipe input. Seleksi input teks area lalu berilah nama variabel jawaban pada kotak variabel. 2. Agar user hanya bisa memberikan masukan berupa angka, seleksi input teks area, pilih character. Cek only lalu pilih Numerals(0-9) dan isikan pada kota And These Character dengan tanda negatif (-), klik Done.
36
Perintah diatas berarti user hanya bisa memasukkan angka 0 sampai 9 dan tanda negatif (-). 3. Buatlah tombol untuk memeriksa jawaban user. Misalkan kita menggunakan tombol PERIKSA, berilah action script berikut:
4. Buatlah Dynamic Text Area dengan variabel respon yang akan digunakan sebagai kotak respon atas jawaban yang diberikan, lalu seleksi tombol PERIKSA dan berilah action sript seperti dibawah ini: on(release){ if(bilangan1+bilangan2==jawaban){ respon="Benar"; }else{ respon="Salah"; } } 5. Lakukan Test Movie. Penjelasan Script: 1. Script diatas menggunakan fungsi merupakan kondisi yang diberikan. if dimana bilangan1+bilangan2==jawaban
37
2. respon="Benar"; merupakan statement jika masukan pada input teks sesuai dengan kondisi sehingga dynamic teks area dengan variabel respon akan diisi dengan teks Benar. 3. Fungsi else {respon="Salah"; } merupakan merupakan statement jika masukan pada variabel jawaban tidak sesuai dengan kondisi. Mengosongkan Input Text, Respon, dan Mengarahkan Kursor Langsung ke Kotak Jawaban Perhatikan Test Movie yang dihasilkan. Ketika anda meng-klik tombol PERIKSA, akan muncul respon benar/salah. Namun ketika anda meng-klik kembali tombol SOAL, angka pada kotak jawaban dan respon tidak hilang. Pada tombol soal_tbl lakukan penambahan perintah berikut: on(release){ bilangan1=random(10); bilangan2=random(10); Selection.setFocus(jawaban); jawaban=; respon=; }
Membuat Animasi Interaktif Segitiga

Desain yang dibuat adalah membuat tiga titik yang saling dihubungkan oleh garis. Ketika titik tersebut di drag maka garis yang menghubungkan juga akan mengikuti gerakan titik (dinamis). Ilustrasinya adalah sebagai berikut:
1. Buatlah Movie Clip berupa lingkaran kecil. Copy dan paste pada Frame yang sama sehingga jumlahnya menjadi tiga buah. Berilah nama pada masing-masing Movie Clip dengan nama mc_1, mc_2, dan mc_3.
38
2. Buat layer baru untuk mengisikan action script berikut: function drag(){ mc_1.onPress=function(){ startDrag(mc_1,false); } mc_1.onRelease=function(){ stopDrag(); } mc_2.onPress=function(){ startDrag(mc_2,false); } mc_2.onRelease=function(){ stopDrag(); } mc_3.onPress=function(){ startDrag(mc_3,false); } mc_3.onRelease=function(){ stopDrag(); } }
function garis(){ clear(); beginFill (0x0000FF, 50); lineStyle(2,996600,100); moveTo(mc_2._x,mc_2._y); 39
lineTo(mc_1._x,mc_1._y); moveTo(mc_1._x,mc_1._y); lineTo(mc_3._x,mc_3._y); moveTo(mc_3._x,mc_3._y); lineTo(mc_1._x,mc_1._y); moveTo(mc_2._x,mc_2._y); lineTo(mc_3._x,mc_3._y); endFill(); } _root.onEnterFrame = function() { drag(); garis(); } Penjelasan Script: 1. function drag(){ adalah script untuk membuat fungsi yang diberi nama drag(). 2. mc_1.onPress=function(){ startDrag(mc_1,false)}; untuk memberi perintah ketika kursor ditekan diatas Movie Clip mc_1 maka mc_1 akan tertarik (drag). 3. mc_1.onPress=function(){ stopDrag()};untuk memberi perintah ketika mouse dilepas maka drag akan berhenti. 4. _root.onEnterFrame = function(){ drag(); garis(); perintah diatas menunjukkan ketika movie dijalankan maka perintah dalam function drag() dan function garis() akan dijalankan.
Membuat Animasi Interaktif Diagram Kartesius

Sekarang kita akan membuat animasi diagram karetesius dengan desain: 1. Jika sebuah titik di drag maka disamping titik tersebut terdapat nilai koordinat (x,y) yang selalu berubah sesuai dengan posisi titik dalam bidang kartesius. 2. Dari sumbu x dan y akan dihubungkan garis yang tegak lurus yang akan berubah mengikuti poisisi titik dalam bidang kartesius. 3. Pada perpotongan antara garis penghubung titik dan sumbu x akan diberikan nilai yang menunjukkan nilai x titik tersebut, demikian pula pada perpotongan antara garis penghubung titik dengan sumbu y. Berikut ilustrasi animasi yang akan kita buat:
40
Untuk membuatnya ikuti langkah berikut: 1. Gantilah nama layer 1 dengan nama sumbu x lalu buatlah garis horizontal menggunakan line tools. Seleksi garis tersebut kemudian atur posisinya pada y = 200. 2. Buat layer baru, ganti nama layer dengan sumbu y kemudian buatlah garis vertikal. Seleksi garis tersebut kemudian atur posisinya pada x = 275.
Seleksigarissumbuy,aturposisipadaposisi x=275.Demikanjugauntukgarissumbux, seleksidanaturposisinyapaday=200.
41
3. Buat layer baru, berilah nama layer dengan nama titik kemudian pada Frame 1 buatlah Movie Clip menggunakan ovale tools dan berikan nama titik untuk Movie Clip tersebut. 4. Masuklah pada lembar kerja Movie Clip titik. Buatlah Dynamics Text dengan warna merah dan ukuran font 21 kemudian berikan nama untuk variable dengan nama teks. Disamping teks area tersebut berilah huruf P menggunakan static text dengan ukuran font 21 dan warna biru.
SeleksiDynamicTextarealalu isikanvariableinidenganteks.
5. Keluarlah dari lembar kerja Movie Clip titik. Pada layer titik, buatlah Dynamic Text dengan ukuran 14 dan warna hitam. Berikan nama variable dengan x dan instance nama dengan nilai_x. SeleksiDynamic Text Berikaninstance namenilai_x Berikanvariable namex
6. Seleksi Dynamic Text nilai_x, copy, dan paste pada Frame dan layer yang sama. Ubahlah nama variable dengan y dan instance name dengan nilai_y. 7. Buatlah layer baru dan berikan nama layer ini dengan nama script. Seleksi Frame 1 layer script kemudian buka lembar kerja Action Frame dan tuliskan script dibawah ini: 42
// Movie Clip titik menjadi dragable titik.onPress=function(){ startDrag("titik",true,30,30,500,350); } titik.onRelease=function(){ stopDrag(); }
// membuat animasi _root.onEnterFrame=function(){ nilaix = titik._x-275; nilaiy = (titik._y-200)*-1; n1=Math.floor(nilaix); n2=Math.floor(nilaiy); titik.teks= "(" add n1 add "," add n2 add ")"; // membuat garis penghubung titik dengan sumbu x dan sumbu y clear(); lineStyle(1,996600,100); moveTo(titik._x,titik._y); lineTo(275,titik._y); moveTo(titik._x,titik._y); lineTo(titik._x,200);
// mengisikan teks area yang berada pada sumbu x dan y x=n1; y=n2; nilai_x._x=titik._x nilai_x._y=200; nilai_y._x=275; nilai_y._y=titik._y; } 8. Lakukan Test Movie dengan menekan ctrl+Enter. Penjelasan Script: 1. Script yang diawali dengan tanda // berarti memberikan komentar. Tulisan yang berada setelah tanda tersebut tidak akan berpengaruh apapun terhadap program. 2. startDrag("titik",true,30,30,500,350); perintah ini untuk memberikan batasan wilayah drag dari titik. Ketentuan umum penulisan script ini adalah: 43
startDrag(nama Movie Clip,true,batas kiri, atas, kanan, bawah); berikut Ilustrasinya:
3. stopDrag(); yang diawali dengan onRelease berarti drag akan dihentikan ketika mouse dilepaskan. 4. nilaix = titik._x-275; untuk membuat nilai x=0 berada pada perpotongan sumbu x dan y. 5. nilaiy = (titik._y-200)*-1; untuk membuat nilai y=0 berada pada perpotongan sumbu y dan x serta membuat nilai y diatas sumbu x menjadi positif. 6. n1=Math.floor(nilaix); berarti Dynamic Text dengan variable n1 akan diisi dengan bilangan nilaix yang dibulatkan. 7. n2=Math.floor(nilaiy); berarti n1 merupakan bilangan yang sama dengan nilaiy yang dibulatkan. 8. titik.teks= "(" add n1 add "," add n2 add ")"; berarti n2 merupakan bilangan yang sama dengan nilaix yang dibulatkan. 9. x=n1; berarti Dynamic Text dengan nama variable x akan diisi dengan bilangan yang sama dengan n1 dan y=n2; berarti Dynamic Text dengan nama variable y akan diisi dengan bilangan yang sama dengan n2. 10. nilai_x._x=titik._x nilai_x._y=200; Script di atas akan membuat Dynamic Text dengan instance nama nilai_x akan bergerak horizontal mengikuti posisi titik pada bidang kartesius.
Animasi Interaktif Pencerminan pada Bidang Kartesius

Animasi ini merupakan pengembangan dari animasi titik pada bidang kartesius. Sesuai dengan konsep pencerminan titik pada transformasi geometri, animasi ini mencerminkan dua titik terhadap sumbu y. Berikut ini merupakan ilustrasi animasi pencerminan yang akan dibuat: 44
Jika titik (-24,14) atau titik (-15,4) diseret maka titik bayangan atas pencerminan terhadap sumbu y juga akan berubah sesuai dengan nilai pencerminannya. Sebelum mulai membuat animasi ini alangkah baiknya dipahami terlebih dahulu konsep pencerminan berikut:
Jika titik P yang memiliki posisi koordinat (x,y) dicerminkan terhadap garis y = h maka posisi bayangannya akan berada pada titik (2h-x,y). Konsep ini yang akan dipakai untuk membuat animasi pencerminan.
45
Membuat Titik dan Bidang Kartesius 1. buatlah bidang kartesius: - Sumbu x pada layer 1 yang sudah dirubah namanya menjadi sumbu x. - Sumbu y pada layer 2 yang sudah dirubah namanya menjadi sumbu y. 2. Posisikan garis sumbu y pada koordinat x = 275 dan garis sumbu x pada koordinat y = 200. Koordinatuntuksumbuy Koordinatuntuksumbu x,seleksigarissumbux danubahnilaiyini menjadi200. 3. Buatlah layer baru untuk membuat Movie Clip titik. Masuklah pada Movie Clip titik yang sudah dibuat dan buatlah menjadi seperti tampilan dibawah ini:
DynamicTextdengan namavariableteks.
4. Keluar dari lembar kerja Movie Clip titik dan gandakan Movie Clip titik menjadi 4, pada instance name berilah nama masing-masing dengan titik1, titik2, titik3, dan titik4. 5. Buatlah 4 buah Dynamic Text Box dengan desain sebagai berikut: - Dynamic Text Box 1 : instance name = nilai_x1, variable name = x1 - Dynamic Text Box 2 : instance name = nilai_y1, variable name = y1 - Dynamic Text Box 3 : instance name = nilai_x2, variable name = x2 - Dynamic Text Box 4 : instance name = nilai_y2, variable name = y2 Membuat Script Buatlah layer baru untuk menuliskan script berikut:
titik1.onPress=function(){ startDrag("titik1",true,30,30,500,350); } titik1.onRelease=function(){ stopDrag(); 46
} titik2.onPress=function(){ startDrag("titik2",true,30,30,500,350); } titik2.onRelease=function(){ stopDrag(); }
// interaktif _root.onEnterFrame=function(){ nilaix1 = titik1._x-275; nilaiy1 = (titik1._y-200)*-1; nilaix2 = titik2._x-275; nilaiy2 = (titik2._y-200)*-1; titik3._x=(2*275)-titik1._x; titik3._y=titik1._y; titik4._x=(2*275)-titik2._x; titik4._y=titik2._y; n1=Math.floor(nilaix1/10); n2=Math.floor(nilaiy1/10); m1=Math.floor(nilaix2/10); m2=Math.floor(nilaiy2/10); titik1.teks= "(" add n1 add "," add n2 add ")"; titik2.teks= "(" add m1 add "," add m2 add ")"; clear(); lineStyle(1,996600,100); beginFill (0x0000FF, 25); moveTo(titik1._x,titik1._y); lineTo(titik2._x,titik2._y); lineTo(titik4._x,titik4._y); lineTo(titik3._x,titik3._y); lineTo(titik1._x,titik1._y); moveTo(titik1._x,titik1._y); lineTo(titik1._x,200); moveTo(titik2._x,titik2._y); lineTo(titik2._x,200); moveTo(titik3._x,titik3._y); lineTo(titik3._x,200); 47
moveTo(titik4._x,titik4._y); lineTo(titik4._x,200); endFill(); x1=n1; y1=n2; x2=m1; y2=m2; nilai_x1._x=titik1._x nilai_x1._y=200; nilai_y1._x=275; nilai_y1._y=titik1._y; nilai_x2._x=titik2._x nilai_x2._y=200; nilai_y2._x=275; nilai_y2._y=titik2._y; }
Berikut ini tampilan desain layer secara keseluruhan pada lembar kerja utama:
Penjelasan Script: nilaix1 nilaiy1 nilaix2 nilaiy2 = = = = titik1._x-275; (titik1._y-200)*-1; titik2._x-275; (titik2._y-200)*-1;
Script diatas adalah untuk membuat nilai koordinat perpotongan sumbu x dan sumbu y menjadi (0,0). titik3._x=(2*275)-titik1._x; titik3._y=titik1._y; titik4._x=(2*275)-titik2._x; titik4._y=titik2._y 48
Script diatas adalah untuk mendefinisikan posisi titik3 dan titik4 yang merupakan bayangan dari Movie Clip titik1 dan Movie Clip titik2 yang dragable (bisa didrag). Titik3 merupakan bayangan dari titik1, titik4 merupakan bayangan dari titik2. Seperti pada rumus pencerminan yang sudah disampaian diawal, rumus pada script diatas akan mencerminkan titik1 dan titik 2 oleh koordinat x = 175. n1=Math.floor(nilaix1/10); n2=Math.floor(nilaiy1/10); m1=Math.floor(nilaix2/10); m2=Math.floor(nilaiy2/10); Script Math.floor(bilangan) adalah untuk melakukan pembulatan bilangan menjadi bilangan bulat. Misalnya 0,97567 akan dibulatkan menjadi 1. titik1.teks= "(" add n1 add "," add n2 add ")"; titik2.teks= "(" add m1 add "," add m2 add ")"; Script di atas akan mengisi Dynamic Text Box di dalam Movie Clip titik dengan teks : ( nilai n1, nilai n2). Sebagai latihan, buatlah script untuk mengisi Dynamic Text Box di dalam Movie Clip titik3 dan titik4! clear(); lineStyle(1,996600,100); beginFill (0x0000FF, 25); moveTo(titik1._x,titik1._y); lineTo(titik2._x,titik2._y); lineTo(titik4._x,titik4._y); lineTo(titik3._x,titik3._y); lineTo(titik1._x,titik1._y); Script di atas akan membuat garis penghubung dengan ketebalan 1px dan warna 996600 (merupakan kode) antara Movie Clip titik1, titik2, titik3, dan titik4 kemudian memberi warna dengan nilai transparasi 25% pada daerah yang dibatasi oleh keempat titik tersebut. Kode warna bisa dilihat pada jendela Color Mixer.
49
moveTo(titik1._x,titik1._y); lineTo(titik1._x,200); Script di atas akan membuat garis dari Movie Clip titik1 ke garis sumbu y. moveTo(titik2._x,titik2._y); lineTo(titik2._x,200); Script di atas akan membuat garis dari Movie Clip titik2 ke garis sumbu y. moveTo(titik3._x,titik3._y); lineTo(titik3._x,200); Script di atas akan membuat garis dari Movie Clip titik3 ke garis sumbu y. x1=n1; y1=n2; x2=m1; y2=m2; Script di atas akan mengisi Dynamic Text Box dengan nama variable x1 dengan bilangan n1, y1 dengan bilangan n2, x2 dengan bilangan m1, y2 dengan bilangan m2. nilai_x1._x=titik1._x nilai_x1._y=200; nilai_y1._x=275; nilai_y1._y=titik1._y; nilai_x2._x=titik2._x nilai_x2._y=200; nilai_y2._x=275; nilai_y2._y=titik2._y; Script di atas menentukan posisi Dynamic Text Box dengan Instance Name nilai_x1 selalu berada pada sumbu y dan bergerak dinamis sesuai dengan posisi Movie Clip titik1. Demikian juga dengan Dynamic Text Box dengan Instance Name nilai_y1, nilai_x2, dan nilai_y2 yang akan bergerak dinamis sesuai dengan Movie Clip titik yang bersesuaian.
Animasi Sudut Elevasi

Animasi ini bisa digunakan untuk menjelaskan konsep penerapan aturan sin, cos, dan tangent pada segitiga siku-siku. Desain yang akan kita buat adalah jika gambar kartun diseret maka garis yang menghubungkan pandangan dan puncak gedung secara dinamis akan mengikuti. Berikut ini ilustrasi animasi yang akan dibuat:
50
Untuk membuatnya ikuti langkah berikut: 1. Movie Clip gambar kartun dan berikan nama kartun pada Movie Clip tersebut. 2. Didalam Movie Clip kartun, buatlah Static Text Sudut Elevasi didepan mata karakter kartun. 3. Keluarlah dari lembar kerja Movie Clip kartun dan buatlah layer baru untuk menggambar gedung. 4. Buatlah Movie Clip titik_menara dan tempatkan di puncak gedung. MovieClip titik_menara
5. Buat layer baru dan pada frame 1 tuliskan script berikut: kartun.onPress=function(){ startDrag("kartun",true,200,335,550,335); } kartun.onRelease=function(){ stopDrag(); } _root.onEnterFrame=function(){ clear(); lineStyle(1,996600,100); moveTo(kartun._x,kartun._y-35); lineTo(titik_menara._x,titik_menara._y); moveTo(kartun._x,kartun._y-35); 51
lineTo(titik_menara._x,kartun._y-35); } 6. Script startDrag("kartun",true,200,335,550,335); dragging kartun hanya arah horizontal saja. akan membatasi
Animasi Lempar Dadu

Animasi lempar dadu didesain sebagai media pembelajaran matematika pada pokok bahasan peluang. Berikut ini ilustrasi animasi lempar dadu yang akan kita buat:
Jika tombol lempar dadu ditekan maka kedua dadu akan terlempar dan jumlah mata dadu secara acak akan muncul ketika pelemparan selesai. Sehingga untuk setiap pelemparan masing-masing mata dadu memiliki peluang yang sama untuk muncul. Membuat Movie Clip Dadu 1. Buatlah bentuk kubus dan convert menjadi Movie Clip. 2. Masuk pada lembar kerja Movie Clip dan tampilkan gambar kubus sampai frame 20. 3. Buat layer baru untuk menggambar mata dadu. Pada masing-masing frame buatlah gambar mata dadu misalnya frame 1 untuk mata dadu 1, frame 2 untuk mata dadu 2, dan seterusnya berulang-ulang sampai frame 20.
52
4. Pada frame 1, isikan script berikut: stop(); 5. Buat layer baru dan Copy Movie Clip dadu menjadi dua, masing-masing diberikan nama dadu1 dan dadu2 pada Instance Name. Letakkan Movie Clip dadu1 pada layer dadu1 dan Movie Clip dadu2 pada layer dadu2.
6. Buatlah animasi Motion Tween untuk dadu1 dan dadu2 sehingga nampak seperti dadu yang dilempar. Gambar di atas adalah contoh desain frame untuk animasi lemparan Movie Clip dadu1 dan dadu2. Membuat Latar dan Menganimasikannya 1. Buatlah layer baru pada lembar kerja utama. 2. Buat gambar latar kemudian Convert menjadi Graphic.
53
3. Animasikan gambar latar dengan posisi frame 1 seperti pada gambar diatas, posisi dua seperti pada gambar dibawah, dan posisi tiga sama dengan posisi satu. Gambarlatarpada posisi1
Gambarlatarpada posisi2
Gambarlatarpada posisi3
4. Pada frame 1 tuliskan script berikut: stop(); Pada frame terakhir lakukan hal berikut: - Berikan efek suara dai windows >> common libraries >> sounds sehingga ketika dadu jatuh akan muncul suara. 54
Tuliskan script berikut:
n=random(19)+1; m=random(19)+1; dadu1.gotoAndStop(n); dadu2.gotoAndStop(m); Ketika animasi sampai pada frame terakhir maka perintah pada script di atas akan dijalankan yaitu mengarahkan animasi di dalam Movie Clip dadu secara acak ke frame tertentu (1 sd 20). Membuat Tombol Lemparan 1. Buatlah layer baru dan pada frame 1 isikan sebuah tombol dari windows >> common libraries >> button. 2. Pada tombol, isikan script berikut: on(release){ gotoAndPlay(2); dadu1.gotoAndPlay(2); dadu2.gotoAndPlay(2); } Script diatas akan menjalankan animasi pada lembar kerja utama dari frame 2 sampai frame terakhir. Ketika animasi sampai pada frame terakhir, maka script yang sudah dipasang pada frame terakhir akan dijalankan sehingga jumlah mata dadu akan dimunculkan secara acak. Desain layer secara keseluruhan tampak seperti berikut ini:
Animasi Lempar Koin

Cara untuk membuat animasi koin pada prinsipnya sama dengan cara membuat animasi dadu di atas. Kita hanya perlu merubah Movie Clip dadu yang berisi animasi acak dadu menjadi Movie Clip yang berisi animasi acak koin serta merubah action script pada frame terakhir. Ilustrasi animasi lempar koin adalah sebagai berikut:
55
Ketika tombol lempar koin ditekan maka kedua koin akan terlempar ke atas kemudian jatuh ditempat semula dengan kemungkinan mucul warna kuning atau merah. Membuat Movie Clip Koin 1. Buatlah Movie Clip koin menggunakan Ovale Tool. 2. Masuk kedalam lembar kerja Movie Clip koin dan buat gambar kon dengan desain tampilan sebagai berikut:
3. Gandakan frame 1 sd 6 sehingga animasi akan tampak sampai dengan Frame 22. 56
Blokframeyangakandi copy.
CopyFramesdanPaste Framespadaframeyang masihkosong.
4. Desain frame secara keseluruhan akan tampak seperti berikut:
Pada frame 1, isikan dengan script berikut: stop(); 5. Penting! Catatlah nomor frame dimana tampilan koinnya seperti pada gambar 1 dan 4. Misalnya kita dapatkan nomor frame tersebut adalah : 1, 4, 7, 10, 13, 16, 19, dan 22. 6. Keluarlah dari lembar kerja Movie Clip Koin. Membuat Animasi Lempar Koin 1. Gandakan Movie Clip koin menjadi dua, masing-masing isikan nama pada Instance Name dengan koin1 dan koin2. 2. Letakkan Movie Clip koin1 pada layer koin 1, dan Movie Clip koin2 pada layer koin 2. 3. Animasikan Movie Clip koin1 dan koin2 menggunakan Motion Tween sehingga Nampak seperti koin yang terlembar ke atas. Perhatikan desain layer berikut:
57
4. Posisi awal dan poisisi akhir untuk masing-masing animasi harus sama sehingga ketika dijalankan koin akan terjatuh persis seperti koin di atas papan. 5. Buatlah layer baru untuk membuat animasi latar belakang dengan cara yang sama dengan ketika membuat gambar latar pada animasi lempar dadu. Akan tetapi pada frame terahir isikan dengan script berikut: stop(); koin=new Array(); koin[0] = 1; koin[1] = 4; koin[2] = 7; koin[3] = 10; koin[4] = 13; koin[5] = 16; koin[6] = 19; koin[7] = 22; n=random(7); m=random(7); koin1.gotoAndStop(koin[n]); koin2.gotoAndStop(koin[m]); Frameuntukmengisikanscript danefeksuara.Ambillahefek suarayangsesuaipada windows>>commonlibraries >>soundssehinggamuncul tampilandibawahini,laludrag kelembarkerja.
Tuliskan script stop();
6. Buatlah layer baru untuk memasang tombol. Pada tombol, isikan script berikut: on(release){ 58
gotoAndPlay(2); koin1.gotoAndPlay(2); koin2.gotoAndPlay(2); } 7. Desain layer pada lembar kerja utama akan tampak seperti gambar berikut:
8. Lakukan Test Movie untuk melihat hasilnya.
Membuat Peta Digital

Desain peta digital yang akan kita buat adalah jika kursor diarahkan diatas pulau maka pulau tersebut akan terlihat menyala dan ketika mouse diklik maka deskripsi tentang pulau yang dimaksud akan muncul secara gradasi. Berikut ilustrasinya:
Untuk membuatnya ikuti langkah berikut: 1. Ubahlah nama layer 1 dengan nama peta. Seleksi Frame 1 dan kemudian pilih File >> Import untuk mengambil gambar peta. 2. Aturlah ukuran peta menggunakan Free Transform Tools sehingga sesuai. 59
3. Buat layer baru dan berikan nama deskripsi. Seleksi Frame 1 dan buatlah gambar menggunakan Pen Tools sehingga gambar tersebut mirip dengan pulau Kalimantan. Berilah warna kuning pada gambar tersebut. 4. Hapus garis tepi pada gambar Kalimantan. Seleksi gambar Kalimantan dan buatlah menjadi Movie Clip kemudian berikan nama Kalimantan pada Instance Name. 5. Masuk pada lembar kerja Movie Clip Kalimantan. Ubahlah nama layer menjadi back kemudian buatlah animasi menggunakan Shape Motion sehingga tampak seperti berikut: Berisigambarkotak dengantransparansi0% sehinggagambarkotak akanmenghilang
Berisigambarpulau Kalimantandengan transparansi0%. PadaFrameiniisikan scriptstop();
Berisigambarkotakdengan transparansi100%yangakan digunakansebagaibackground teksdeskripsi.PadaFrameini isikanscripstop();
6. Buatlah layer baru dan berilah nama layer dengan teks. Seleksi Frame 10 dan lakukan insert Blank Key Frame. Buatlah Teks judul dan isi mengenai pulai Kalimantan menggunakan Static Text. Tampilan pada Time Line akan seperti berikut:
7. Buatlah layer baru dan berilah nama tombol. Seleksi Frame 1 pada layer back kemudian klik kanan pada gambar pulau Kalimantan lalu pilih Copy. Seleksi Frame 1 pada layer tombol lalu klik kanan pada sembarang lembar kerja kemudian pilih Paste in Place. 8. Ubahlah gambar pulau Kalimantan pada layer tombol menjadi Button. 9. Masuk pada lembar kerja Button pulau Kalimantan. Lakukan Insert Key Frame pada Frame Over dan ubahlah nilai transparansinya menjadi 50%. Sehingga ketika kursor berada diatas pulau Kalimantan akan terlihat menyala. 10. Keluar dari lembar kerja Button pulau Kalimantan. Seleksi Button pulau Kalimantan dan berilah script berikut: on(release){ gotoAndPlay(2); } 60
11. Insert Blank Key Frame pada Frame 10 layer tombol dan buatlah tombol keluar. Berikan script berikut pada tombol keluar: on(release){ gotoAndPlay(11); }
PerhatikanFrame danLayerpada TimeLine!
Tombolkeluar
12. Keluarlah dari lembar kerja Movie Clip Kalimantan dan lakukan Test Movie.
Membuat Animasi Interaktif Bola Jatuh

Desain yang animasi yang akan kita buat adalah jika bola di drag kemudian dilepaskan maka bola tersebut akan jatuh. Ilustrasi animasi tersebut adalah:
Untuk membuatnya ikuti langkah berikut: 1. Ubahlah nama layer 1 dengan nama bola lalu buat Movie Clip bola pada Frame 1. Berilah nama Movie Clip dengan nama bola. 61
2. Pada layer bola Frame 1 buatlah Dynamic Text dengan nama variable n. 3. Buat layer baru dan berilah nama script. Pada Frame 1 isikan script berikut: bola.onPress=function(){ startDrag("bola",true); n=0; } bola.onRelease=function(){ stopDrag(); n=1; }
_root.onEnterFrame=function(){ m++; if(n==0){ bola._y+=0; } if(n==1){ bola._y+=1*m; } if(bola._y>350){ bola._y=350; m=0; } } 4. Buatlah layer baru dan beri nama garis. Posisikan garis sedemikian rupa sehingga ketika bola jatuh dan berhenti tepat berada pada garis. 5. Lakukan Test Movie. Memberi Efek Suara Ketika Bola Jatuh Untuk memperbagus animasi, kita akan membuat efek suara ketika bola jatuh mengenai garis. Ikuti langkah berikut: 1. Masuklah pada Movie Clip bola. 2. Buat layer dan ubahlah nama layer menjadi suara. 3. Pada Frame 1 layer suara isikan script berikut: stop();
62
4. Pada Frame 2 layer suara isikah sound dengan cara: - Seleksi Frame 2 layer suara - Pilih windows >> Common Libraries >> Sounds - Drag kedalam lembar kerja.
Frameyangberisi suara
Frameyangdiisiscript stop();
5. Keluar dari lembar kerja Movie Clip bola. Tambahkan script seperti pada bagian yang ditebalkan. _root.onEnterFrame=function(){ m++; if(n==0){ bola._y+=0; _root.bola.gotoAndStop(1); } if(n==1){ bola._y+=1*m; } if(bola._y>350){ bola._y=350; _root.bola.gotoAndStop(2); m=0; } }
Membuat Animasi Interaktif Termometer

Desain animasi thermometer yang akan kita buat adalah : 1. Jika tombol suhu naik ditekan maka air raksa dalam thermometer akan naik. 2. Jika tombol suhu turun ditekan maka air raksa dalam thermometer akan turun. Berikut ilustrasi animasi thermometer:
63
Untuk membuatnya ikuti langkah berikut: 1. Ubahlah nama layer 1 menjadi termo dan buat gambar thermometer. Pada tahap ini gambarlah bagian pokoknya saja. Kita akan melengkapi gambar thermometer didalam lembar kerja Movie Clip.
2. Ubahlah gambar tersebut menjadi Movie Clip dan berilah nama pada Instance Name dengan termo. 3. Masuklah pada lembar kerja Movie Clip termo dan lengkapi gambar termometernya. Perhatikan desain layer dalam Movie Clip termo berikut:
Layer batang berisi gambar dasar thermometer. Layer skala berisi angka-angka yang kita gunakan sebagai skala. Layer raksa berisi gambar raksa berwarna merah. 64
Gambar keseluruhan tampak seperti berikut ini:
4. Buatlah layer baru dan berilah nama mask. Pada Frame 1 buatlah Movie Clip dan berilah nama derajat. Layerbaru
MovieClip dengannama derajat.
5. Klik kanan pada layer mask dan pilih mask.
65
6. Keluar dari lembar kerja Movie Clip. Buatlah layer baru dan berilah nama tombol. 7. Pada Frame 1 layer tombol buatlah dua buah tombol.
Atas:tombolnaik Bawah:tombolturun
8. Pada tombol naik, isikan script berikut: on(release){ _root.termo.derajat._height+=10; } Script diatas berarti ketika tombol diklik, Movie Clip derajat yang berada di dalam Movie Clip termo akan bertambah secara vertical. 9. Pada tombol turun, isikan script berikut: on(release){ _root.termo.derajat._height-=10; } Script diatas berarti ketika tombol diklik, Movie Clip derajat yang berada di dalam Movie Clip termo akan berkurang secara vertical.
66
Membuat Animasi Interaktif Mobil Berjalan
Desain animasi yang akan kita buat adalah: 1. Jika tombol arah kanan ditekan terus menerus maka mobil akan berjalan semakin cepat dan jika dilepaskan maka gerakan mobil akan semakin lambat dan akhirnya berhenti. 2. Jika mobil berjalan maka asap dari knalpot akan mengepul. 3. Jika ditekan tombol Reset maka mobil akan kembali pada posisi awal. Berikut ilustrasi animasi yang akan dibuat:
Untuk membuatnya ikuti langkah berikut: 1. Buatlah Movie Clip mobil. 2. Masuk pada lembar kerja Movie Clip mobil dan buatlah Movie Clip yang berisi animasi asap menggunakan Ovale Tool denga warna gradasi radial. Ingat, buat transparansi warna luarnya menjadi 0% agar Nampak seperti asap. Berilah nama Movie Clip animasi asap tersebut dengan asap.
Gambar di atas merupakan desain Frame didalam Movie Clip asap. Pada Frame 1 berikan nilai Alpha 100% agar animasi asap Nampak menghilang.
67
3. Keluarlah dari lembar kerja Movie Clip mobil. Seleksi Movie Clip mobil dan tuliskan script berikut: onClipEvent(enterFrame){ if (Key.isDown(Key.RIGHT)) { speedx+=Math.sin(Math.PI/180); asap._visible=true; }else{ speedx*=.8; asap._visible=false; } _x+=10*speedx; } 4. Buatlah layer baru pada lembar kerja utama dan berilah nama reset. Masukkan Componen Push Button pada Frame 1 dengan cara menariknya dari kotak dialog Components.
5. Seleksi PushButton dan pada Properties ubahlan teks didalam tombol dengan nama Reset.
6. Pada tombol reset, isikan script berikut: 68
on(release){ _root.mobil._x=10; _root.mobil._y=150; } Scipt di atas akan memerintahkan Movie Clip mobil pada posisi x=10 dan y=150. Anda bisa menyesuaikan nilai x dan y sedemikian rupa sehingga posisi mobil tepat berada pada lintasan. 7. Lakukan Test Movie. Penjelasan Script: if (Key.isDown(Key.RIGHT)) { speedx+=Math.sin(Math.PI/180); asap._visible=true; }
Script di atas akan memberikan nilai untuk speedx yang semakin bertambah besar dan membuat Movie Clip asap akan aktif ketika tombola rah kanan pada Keyboar ditekan. }else{ speedx*=.8; asap._visible=false; } Script di atas merupakan perintah yang diberikan jika tombol arah kanan tidak ditekan yaitu nilai speedx akan dikalikan dengan bilangan 0.8 yang menyebabkan gerakan mobil akan melambat dan akhirnya berhenti. _x+=10*speedx; Scrip diatas memerintahkan Movie Clip mobil akan bergerak ke kanan sesuai dengan nilai speedx yang didapatkan.
Membuat Animasi Interaktif Kecepatan Mobil

Desain animasi yang akan kita buat adalah: 1. Jika tombol arah kanan pada Keyboard ditekan terus menerus maka mobil akan Nampak berjalan dengan gerakan yang semakin cepat (Gerak Lurus Berubah Beraturan Dipercepat). 2. Dalam animasi juga akan disajikan waktu tempuh dan jarak tempuhnya. 69
Ilustrasi animasi tersebut adalah:
Untuk membuatnya, ikuti langkah berikut: 1. Buka kembali file mobil berjalan.fla yang sudah kita buat sebelumnya. 2. Hapus script yang berada didalam Movie Clip mobil. 3. Buat layer baru, pada Frame 1 buatlah Movie Clip yang berisi layar latar belakang. Berilah nama Movie Clip ini dengan nama layar. 4. Masuk pada lembar kerja Movie Clip layar dan sempurnakan gambar layar yakni gambar rumah dan awan. Ingat, hanya gambar rumah dan awan sedangkan warna background kita buat di lembar kerja utama. Pada Movie Clip layar isikan script berikut: onClipEvent(enterFrame){ if (Key.isDown(Key.RIGHT)) { speedx+=Math.sin(Math.PI/180); _parent.mobil.asap._visible=true; _parent.mobil.gotoAndPlay(2); _root.detik+=1; if(_root.detik==59){ _root.detik=0; _root.menit+=1; } _root.km=0.8*speedx; }else{ speedx*=.8; _parent.mobil.asap._visible=false; _parent.mobil.gotoAndPlay(6); } 70
_x-=10*speedx; if(_x<0){ _x=700; } } Perhatikan script berikut: _x-=10*speedx; if(_x<0){ _x=700; } Script diatas akan membuat layar bergerak ke kiri berulang-ulang dan semakin cepat. Animasi ini akan membuat mobil yang sebenarnya diam akan Nampak bergerak. 5. Buatlah empat kotak Dynamic Text: - 1 untuk kotak isian jarak dan tuliskan km pada kotak variable. - 1 untuk kotak isian menit dan tuliskan menit pada kotak variable. - 1 untuk kotak isian detik dan tuliskan detik pada kotak variable. - 1 untuk kotak isian kecepatan dan tuliskan kecepatan pada kotak variable. Kolomnama variableDynamic Text
Aktifkantandainiuntuk membuatborderpada kotakDynamicText 6. Pada salah satu Frame di lembar kerja utama isikan script berikut: mobil.asap._visible=false;
script di atas akan membuat asap tidak muncul sebelum tombol ditekan. Berikut ini contoh desain layer pada lembar kerja utama:
71
Animasi Interaktif Rangkaian Seri
Pada rangkaian seri, jika saklar dimatikan maka jalur itu akan terputus dan lampu yang berada pada jalur itu akan mati. Berikut ilustrasi animasinya:
Posisi kedua saklar harus dalam keadaan ON agar kedua lampu menyala. Berikut prosedur untuk membuatnya: Membuat Animasi Saklar : 1. Buatlah Movie Clip berupa gambar kotak, masuklah kedalam lembar kerja Movie Clip. 2. Pada lembar kerja Movie Clip buatlah empat layer: - Layer pertama untuk background saklar. - Layer kedua untuk gambar saklar. Pada Frame 1 buatlah gambar berikut:
72
Pada Frame 2 buatlah gambar berikut:
Layer ketiga untuk menuliskan scrip dan efek suara. Pada Frame 1 tuliskan script berikut: i=0; stop(); kemudian masukkan efek suara dari windows >> common libraries >> sounds. Pada Frame 2 tuliskan script berikut: i=0; stop(); kemudian masukkan efek suara dari windows >> common libraries >> sounds. Layer keempat untuk membuat tombol: Pada Frame 1 buatlah dua buah tombol berupa kotak transparan dengan cara menggambar terlebih dahulu bentuk kotak, hilangkan garis tepinya, kemudian nilai transparansi Fill-nya dirubah menjadi 0%. Setelah menjadi transparan, convert menjadi Button. 73
Letakkan tombol tersebut pada posisi atas saklar dan bawah saklar. Padatombol,tuliskanscript: on(release){ gotoAndStop(2); }
Padatombol,tuliskanscript: on(release){ gotoAndStop(1); }
3. Desain layer pada Movie Clip saklar secara keseluruhan akan tampak seperti berikut:
74
4. Keluarlah dari lembar kerja Movie Clip saklar dan lakukan Test Movie.
Membuat Movie Clip Lampu: 1. Pada lembar kerja utama, buatlah Movie Clip dengan nama lampu. 2. Masuk pada lembar kerja Movie Clip lampu dan buatlah layer baru dengan nama nyala. Kosongkan frame 1, pada frame 2 isilah dengan gambar nyala lampu menggunakan ovale tools. Berilah warna gradasi (warna dalam kuning, warna luar alpha 0%).
3. Pada frame 1 layer lampu isikan dengan script berikut: stop(); Membuat Rangkaian 1. Copy Movie Clip Saklar menjadi dua buah. Berilah Instance Name masing-masing saklar1 dan saklar2. 2. Copy Movie Clip lampu menjadi dua buah, berilah Instance Name masing-masing lampu1 dan lampu2. 3. Susun rangkaian sehingga menjadi seperti berikut ini:
75
Lampu1 Lampu2 Saklar1 Saklar2 4. Pada lembar kerja utama, buatlah layer baru untuk mengisikan script. Pada frame 1 isikan script berikut: _root.onEnterFrame=function(){ if((saklar1.i==1)&&(saklar2.i==1)){ _root.lampu1.gotoAndStop(2); _root.lampu2.gotoAndStop(2); } else{ _root.lampu1.gotoAndStop(1); _root.lampu2.gotoAndStop(1); } } Script diatas memakai logika DAN sehingga perintah: _root.lampu1.gotoAndStop(2); _root.lampu2.gotoAndStop(2); Akan dijalankan jika kedua syarat yang diberikan terpenuhi yaitu kedua saklar harus dalam keadaan ON (bernilai i = 1).
76
Animasi Interaktif Rangkaian Paralel

Desain yang akan kita buat tampak pada ilustrasi berikut:
Untuk membuatnya ikuti langkah berikut: 1. Buka kembali file rangkaian seri.fla dan susunlah saklar dan lampu sehingga menjadi seperti pada gamabar dibawah ini: Lampu1 Lampu2 Saklar1 Saklar2 Saklar3
NamapadaInstanceName
2. Ubahlah script pada layer script menjadi seperti berikut ini: _root.onEnterFrame=function(){ if((saklar1.i==1)&&(saklar3.i==1)){ _root.lampu1.gotoAndStop(2); } 77
else { _root.lampu1.gotoAndStop(1); } if((saklar2.i==1)&&(saklar3.i==1)){ _root.lampu2.gotoAndStop(2); } else{ _root.lampu2.gotoAndStop(1); } } 3. Lakukan Test Movie untuk melihat hasilnya.
78

Bagian 4 Membuat Media Pembelajaran

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bagian 4 Membuat Media Pembelajaran

Diunggah oleh

Hak Cipta:

Format Tersedia

MembuatMediaPembelajaranInteraktif

BAGIAN 4 Membuat Media Pembelajaran

Membuat Game Aritmatika Sederhana

Soal dengan Bilangan Bulat Positif

Soal Bilangan Bulat Negatif

Memeriksa Jawaban User dan Memberi Respon

Membuat Animasi Interaktif Segitiga

function garis(){ clear(); beginFill (0x0000FF, 50); lineStyle(2,996600,100); moveTo(mc_2._x,mc_2._y); 39

Membuat Animasi Interaktif Diagram Kartesius

Seleksigarissumbuy,aturposisipadaposisi x=275.Demikanjugauntukgarissumbux, seleksidanaturposisinyapaday=200.

// Movie Clip titik menjadi dragable titik.onPress=function(){ startDrag("titik",true,30,30,500,350); } titik.onRelease=function(){ stopDrag(); }

startDrag(nama Movie Clip,true,batas kiri, atas, kanan, bawah); berikut Ilustrasinya:

Animasi Interaktif Pencerminan pada Bidang Kartesius

titik1.onPress=function(){ startDrag("titik1",true,30,30,500,350); } titik1.onRelease=function(){ stopDrag(); 46

} titik2.onPress=function(){ startDrag("titik2",true,30,30,500,350); } titik2.onRelease=function(){ stopDrag(); }

Animasi Sudut Elevasi

Animasi Lempar Dadu

Tuliskan script berikut:

Animasi Lempar Koin

CopyFramesdanPaste Framespadaframeyang masihkosong.

4. Desain frame secara keseluruhan akan tampak seperti berikut:

Tuliskan script stop();

8. Lakukan Test Movie untuk melihat hasilnya.

Membuat Peta Digital

Berisigambarpulau Kalimantandengan transparansi0%. PadaFrameiniisikan scriptstop();

Berisigambarkotakdengan transparansi100%yangakan digunakansebagaibackground teksdeskripsi.PadaFrameini isikanscripstop();

PerhatikanFrame danLayerpada TimeLine!

Membuat Animasi Interaktif Bola Jatuh

Membuat Animasi Interaktif Termometer

Gambar keseluruhan tampak seperti berikut ini:

MovieClip dengannama derajat.

5. Klik kanan pada layer mask dan pilih mask.

Membuat Animasi Interaktif Mobil Berjalan

6. Pada tombol reset, isikan script berikut: 68

Membuat Animasi Interaktif Kecepatan Mobil

Ilustrasi animasi tersebut adalah:

Animasi Interaktif Rangkaian Seri

Pada Frame 2 buatlah gambar berikut:

Padatombol,tuliskanscript: on(release){ gotoAndStop(1); }

Animasi Interaktif Rangkaian Paralel

Anda mungkin juga menyukai