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:

 

--> -->

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.

 
Download File FLA