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.
-->
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.
-->
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.
-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:
Sekarang kita akan membuat animasi diagram karetesius dengan desain:
Jika sebuah titik di drag maka disamping titik tersebut terdapat nilai koordinat (x,y) yang selalu berubah sesuai dengan posisi titik dalam bidang kartesius.
Dari sumbu x dan y akan dihubungkan garis yang tegak lurus yang akan berubah mengikuti poisisi titik dalam bidang kartesius.
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:
-->
-->
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.
-->
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:
// 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:
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.
-->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 :
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.
-->
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);
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.
