Bagian 4 Membuat Media Pembelajaran

MembuatMediaPembelajaranInteraktif
DenganFlash
Oleh:FaridSuryanto
fareed_surya@yahoo.com
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.

Tandaobjek
terseleksi
DenganFlash
Oleh:FaridSuryanto
36

3. Seleksi soal_tbl dan berilah action script pada kotak action seperti dibawah ini:

on(release){
bilangan1=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;
}

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.
DenganFlash
Oleh:FaridSuryanto
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.
DenganFlash
Oleh:FaridSuryanto
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){
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.

DenganFlash
Oleh:FaridSuryanto
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();
}

}
stopDrag();
}

}
stopDrag();
}
}

function garis(){
clear();
beginFill (0x0000FF, 50);
lineStyle(2,996600,100);
moveTo(mc_2._x,mc_2._y);
DenganFlash
Oleh:FaridSuryanto
40
lineTo(mc_1._x,mc_1._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:

DenganFlash
Oleh:FaridSuryanto
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.

Seleksigarissumbuy,aturposisipadaposisi
x=275.Demikanjugauntukgarissumbux,
seleksidanaturposisinyapaday=200.
DenganFlash
Oleh:FaridSuryanto
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:
SeleksiDynamicTextarealalu
isikanvariableinidenganteks.
SeleksiDynamic
Text
Berikaninstance
namenilai_x
Berikanvariable
namex
DenganFlash
Oleh:FaridSuryanto
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:

DenganFlash
Oleh:FaridSuryanto
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:
DenganFlash
Oleh:FaridSuryanto
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.

DenganFlash
Oleh:FaridSuryanto
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();
Koordinatuntuksumbuy
Koordinatuntuksumbu
x,seleksigarissumbux
danubahnilaiyini
menjadi200.
DynamicTextdengan
namavariableteks.
DenganFlash
Oleh:FaridSuryanto
47
}

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

// interaktif

nilaix1 = titik1._x-275;
nilaiy1 = (titik1._y-200)*-1;

titik3._x=(2*275)-titik1._x;
titik3._y=titik1._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);
moveTo(titik1._x,titik1._y);
lineTo(titik2._x,titik2._y);

lineTo(titik1._x,200);



DenganFlash
Oleh:FaridSuryanto
48
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._y=200;
nilai_y2._x=275;
}
Berikut ini tampilan desain layer secara keseluruhan pada lembar kerja utama:

Penjelasan Script:


Script diatas adalah untuk membuat nilai koordinat perpotongan sumbu x dan sumbu y
menjadi (0,0).

titik4._y=titik2._y

DenganFlash
Oleh:FaridSuryanto
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);

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.

DenganFlash
Oleh:FaridSuryanto
50


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._y=200;
nilai_y1._x=275;
nilai_x2._y=200;
nilai_y2._x=275;

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:

DenganFlash
Oleh:FaridSuryanto
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();
}

clear();
lineStyle(1,996600,100);
moveTo(kartun._x,kartun._y-35);
lineTo(titik_menara._x,titik_menara._y);
moveTo(kartun._x,kartun._y-35);
MovieClip
titik_menara
DenganFlash
Oleh:FaridSuryanto
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.
DenganFlash
Oleh:FaridSuryanto
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.

DenganFlash
Oleh:FaridSuryanto
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.
Gambarlatarpada
posisi1
Gambarlatarpada
posisi2
Gambarlatarpada
posisi3
DenganFlash
Oleh:FaridSuryanto
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:

DenganFlash
Oleh:FaridSuryanto
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.

DenganFlash
Oleh:FaridSuryanto
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:

Blokframeyangakandi
copy.
CopyFramesdanPaste
Framespadaframeyang
masihkosong.
DenganFlash
Oleh:FaridSuryanto
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){
Frameuntukmengisikanscript
danefeksuara.Ambillahefek
suarayangsesuaipada
windows>>commonlibraries
>>soundssehinggamuncul
tampilandibawahini,laludrag
kelembarkerja.
Tuliskan
script
stop();
DenganFlash
Oleh:FaridSuryanto
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.
DenganFlash
Oleh:FaridSuryanto
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);
}

Berisigambarpulau
Kalimantandengan
transparansi0%.
PadaFrameiniisikan
scriptstop();
Berisigambarkotakdengan
transparansi100%yangakan
digunakansebagaibackground
teksdeskripsi.PadaFrameini
isikanscripstop();
Berisigambarkotak
dengantransparansi0%
sehinggagambarkotak
akanmenghilang
DenganFlash
Oleh:FaridSuryanto
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.
Tombolkeluar
PerhatikanFrame
danLayerpada
TimeLine!
DenganFlash
Oleh:FaridSuryanto
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;
}

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.

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

DenganFlash
Oleh:FaridSuryanto
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.

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:
Frameyangberisi
suara
Frameyangdiisiscript
stop();
DenganFlash
Oleh:FaridSuryanto
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.
DenganFlash
Oleh:FaridSuryanto
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.

Layerbaru
MovieClip
dengannama
derajat.
DenganFlash
Oleh:FaridSuryanto
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:tombolnaik
Bawah:tombolturun
DenganFlash
Oleh:FaridSuryanto
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.

DenganFlash
Oleh:FaridSuryanto
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:
DenganFlash
Oleh:FaridSuryanto
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.


Penjelasan Script:

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.

DenganFlash
Oleh:FaridSuryanto
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){

_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);
}
DenganFlash
Oleh:FaridSuryanto
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:

Aktifkantandainiuntuk
membuatborderpada
kotakDynamicText
Kolomnama
variableDynamic
Text
DenganFlash
Oleh:FaridSuryanto
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:
DenganFlash
Oleh:FaridSuryanto
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.
DenganFlash
Oleh:FaridSuryanto
74

Letakkan tombol tersebut pada posisi atas saklar dan bawah saklar.

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

Padatombol,tuliskanscript:
on(release){
gotoAndStop(2);
}
Padatombol,tuliskanscript:
on(release){
gotoAndStop(1);
}
DenganFlash
Oleh:FaridSuryanto
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:

DenganFlash
Oleh:FaridSuryanto
76

4. Pada lembar kerja utama, buatlah layer baru untuk mengisikan script. Pada frame 1
isikan script berikut:

if((saklar1.i==1)&&(saklar2.i==1)){
_root.lampu1.gotoAndStop(2);
}
else{
}
}

Script diatas memakai logika DAN sehingga perintah:


Akan dijalankan jika kedua syarat yang diberikan terpenuhi yaitu kedua saklar harus
dalam keadaan ON (bernilai i = 1).

Lampu1
Lampu2
Saklar1
Saklar2
DenganFlash
Oleh:FaridSuryanto
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:

}
Lampu1
Lampu2
Saklar1
Saklar2
Saklar3
NamapadaInstanceName
DenganFlash
Oleh:FaridSuryanto
78
else {
}
}
else{
}

}

3. Lakukan Test Movie untuk melihat hasilnya.

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

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

Membuat Titik dan Bidang Kartesius

- Tuliskan script berikut:

4. Pada Frame 2 layer suara isikah sound dengan cara:

Membuat Animasi Interaktif Mobil Berjalan

Ilustrasi animasi tersebut adalah:

Animasi Interaktif Rangkaian Paralel

Anda mungkin juga menyukai