bagian 4 membuat media pembelajaran

Membuat Media Pembelajaran Interaktif Dengan Flash

Oleh : Farid Suryanto [email protected]

35

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.

Tanda objek terseleksi



36

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.



37

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 if dimana bilangan1+bilangan2==jawaban merupakan kondisi yang diberikan.



38

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.



39

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(){


stopDrag(); }

mc_3.onPress=function(){


stopDrag(); }

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



40

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:



41

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.

Seleksi garis sumbu y, atur posisi pada posisi x=275. Demikan juga untuk garis sumbu x, seleksi dan atur posisinya pada y=200.



42

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.

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.

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:

Seleksi Dynamic Text area lalu isikan variable ini dengan teks.

Seleksi Dynamic Text

Berikan instance name nilai_x

Berikan variable name x



43

// 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:



44

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:



45

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.



46

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.

3. Buatlah layer baru untuk membuat Movie Clip titik. Masuklah pada Movie Clip titik yang sudah dibuat dan buatlah menjadi seperti tampilan dibawah ini:

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();

Koordinat untuk sumbu y

Koordinat untuk sumbu x, seleksi garis sumbu x dan ubah nilai y ini menjadi 200.

Dynamic Text dengan nama variable teks.



47

} 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);



48

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 = titik1._x-275; nilaiy1 = (titik1._y-200)*-1; nilaix2 = titik2._x-275; nilaiy2 = (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



49

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.



50

moveTo(titik1._x,titik1._y); lineTo(titik1._x,200);

Script di atas akan membuat garis dari Movie Clip titik1 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:



51


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.

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);

Movie Clip titik_menara



52

lineTo(titik_menara._x,kartun._y-35); }

6. Script startDrag("kartun",true,200,335,550,335); akan membatasi

dragging kartun hanya arah horizontal saja. 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.



53

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.



54

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.

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.

Gambar latar pada posisi 1





55

- 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:



56

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.



57

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:

Blok frame yang akan di copy.

Copy Frames dan Paste Frames pada frame yang masih kosong.



58

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]);

6. Buatlah layer baru untuk memasang tombol. Pada tombol, isikan script berikut: on(release){

Frame untuk mengisikan script dan efek suara. Ambillah efek suara yang sesuai pada windows >> common libraries >> sounds sehingga muncul tampilan dibawah ini, lalu drag kelembar kerja. Tuliskan

script stop();



59

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:


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.



60

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:

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); }

Berisi gambar pulau Kalimantan dengan transparansi 0%. Pada Frame ini isikan script stop();

Berisi gambar kotak dengan transparansi 100% yang akan digunakan sebagai background teks deskripsi. Pada Frame ini isikan scrip stop();

Berisi gambar kotak dengan transparansi 0% sehingga gambar kotak akan menghilang



61

11. Insert Blank Key Frame pada Frame 10 layer “tombol” dan buatlah tombol keluar. Berikan script berikut pada tombol keluar: on(release){ gotoAndPlay(11); }

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:


1. Ubahlah nama layer 1 dengan nama “bola” lalu buat Movie Clip bola pada Frame 1. Berilah nama Movie Clip dengan nama “bola”.

Tombol keluar

Perhatikan Frame dan Layer pada Time Line!



62

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();



63

4. Pada Frame 2 layer suara isikah sound dengan cara: - Seleksi Frame 2 layer suara - Pilih windows >> Common Libraries >> Sounds - Drag kedalam lembar kerja.

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:

Frame yang berisi suara

Frame yang diisi script stop();



64


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.



65

Gambar keseluruhan tampak seperti berikut ini:

4. Buatlah layer baru dan berilah nama “mask”. Pada Frame 1 buatlah Movie Clip dan

berilah nama “derajat”.

5. Klik kanan pada layer “mask” dan pilih mask.

Layer baru

Movie Clip dengan nama “derajat”.



66

6. Keluar dari lembar kerja Movie Clip. Buatlah layer baru dan berilah nama “tombol”. 7. Pada Frame 1 layer “tombol” buatlah dua buah tombol.

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.

Atas: tombol naik

Bawah : tombol turun



67

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:


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.



68

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:



69

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.



70

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); }



71

_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.

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:

Aktifkan tanda ini untuk membuat border pada kotak Dynamic Text

Kolom nama variable Dynamic Text



72

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:



73

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.



74

Letakkan tombol tersebut pada posisi atas saklar dan bawah saklar.

3. Desain layer pada Movie Clip saklar secara keseluruhan akan tampak seperti berikut:

Pada tombol, tuliskan script:

on(release){ gotoAndStop(2); }

Pada tombol, tuliskan script:

on(release){ gotoAndStop(1); }



75

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:



76

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).

Lampu1

Lampu2

Saklar1

Saklar2



77

Animasi Interaktif Rangkaian Paralel Desain yang akan kita buat tampak pada ilustrasi berikut:


1. Buka kembali file rangkaian seri.fla dan susunlah saklar dan lampu sehingga menjadi seperti pada gamabar dibawah ini:

2. Ubahlah script pada layer script menjadi seperti berikut ini: _root.onEnterFrame=function(){ if((saklar1.i==1)&&(saklar3.i==1)){ _root.lampu1.gotoAndStop(2); }

Lampu1

Lampu2

Saklar1

Saklar2

Saklar3

Nama pada Instance Name



78

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.

bagian 4 membuat media pembelajaran

Documents