Membuat Media Interaktif Grafik Persamaan Kuadrat y = Ax^2 +Bx + C

Tutorial kali ini berhubungan dengan pokok bahasan matematika yaitu Membuat Grafik Persamaan Kuadrat dalam Flash, Anda dapat menggunakan software Macromedia Flash atau Adobe Flash CS3 (pilih AS 2.0).

Media interaktif yang akan kita peroleh berupa adanya input 3 variabel nilai pada persamaan kuadrat umum y = Ax^2 + Bx + C yaitu variabel A, B, dan C, ketika sembarang nilai Real dimasukkan maka secara otomatis akan terbentuk grafik persamaan kuadrat yang sesuai dengan input variabel. Di bawah ini merupakan hasil yang akan kita peroleh, masukkan sembarang angka pada kotak berwarna putih, kemudian tekan tombol grafik untuk melihat hasilnya.



Langkah 1
Buka sebuah file baru dan ubah ukurannya menjadi 600 x 500 pixel dengan background abu-abu. Kamudian buatlah sebuah garis vertikal tebal (3) lurus berwarna hitam, ubah nilai height dari garis menjadi 500 dan tempatkan posisi x = 300. Buat lagi sebuah garis vertikal yang lebih tipis tebal (0.5) atau lebih tipis lagi, atur posisi garis ini dengan jarak 20 pixel dari garis utama yang tebal, kemudian copy paste garis ini dan letakkan lagi pada jarak 20 pixel dari garis sebelumnya dan ulangi sampai halam penuh. Seleksi semua garis ini kemudian tekan tombol Ctrl + G, copy group garis ini dan paste, hasil paste dari grup garis ini kemudia diputar 90 derajat, caranya pilih grup garis hasil paste kemudian pilih menu modify-transform-rotate 90 CW. Ubah nilai width grup garis baru ini menjadi 600 dan height = 500, letakkan pada posisi center terhadap stage. Hasilnya dapat anda lihat pada gambar.




Langkah 2
Buat layer baru, kunci layer lama, beri angka pada setiap grid koordinat, pada contoh saya menggunakan rentang 2 angka.

Langkah 3
Buat layer baru dan kunci layer dibawahnya, buat sebuah kotak abu-abu sebagai dasar text,
Kemudian buatlah text yang tertera seperti pada contoh, kombinasikan antara static text dan input text, input text yang pertama, beri nama variablenya dengan "A", input text kedua "B" dan input text ketiga "C".

Langkah 4
Buat sebuah tombol grafik dan letakkan di samping kotak tadi. klik tombol tersebut dan tekan tombol F9, masukkan kode untuk tombol:

on (release) {
_root.lukis = true;
}



Langkah 5
Buatlah sebuah layer baru untuk layer action, klik frame 1 layer action dan masukkan kode berikut:

lukis = true;
//mengeset nilai awal
A = 1;
B = 0;
C = 0;
i = 0;
// titik pusat koordinat
center_x = 300;
center_y = 250;
fb = 20;
//jarak antar titik koordinat
onEnterFrame = function () {
if (lukis) {
with (_root) {
clear();
//fungsi membuat garis
a = Number(A);
b = Number(B);
c = Number(C);
koorx = (i-center_x)/fb;
y = a*Math.pow(koorx, 2)+b*koorx+c;
//
koory = center_y-y*fb;
//menentukan tipe garis (ketebalan, warna, transparansi)
lineStyle(2, 16711680, 100);
//fungsi yang membentuk persamaan garis
moveTo(i, koory);
for (i=1; i<=1000; i++) {
koorx = (i-center_x)/fb;
y = a*Math.pow(koorx, 2)+b*koorx+c;
koory = center_y-y*fb;
lineTo(i, koory);
}
lukis = false;
i = 0;
}
}
};
stop();
with (_root) {
clear();
}

Lakukan test movie untuk melihat hasil