Latest Blog
Game RPG dengan HTML Canvas (Javascript)
Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas
Membuat Grafik Fungsi Kuadrat dengan Flash
Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash
Membuat Kordinat Kartesius dengan Flash
Membuat sistem kordinat kartesius dengan code AS3 full
ALL BLOG
Latest Games
Fungsi Kuadrat
Pendahuluan
Fungsi kuadrat adalah suatu persamaan dari variabel yang mempunyai pangkat tertinggi dua. Fungsi ini berkaitan dengan persamaan kuadrat. Bentuk umum persamaan kuadrat adalah: y = ax2 + bx + c . Tantangan yang muncul adalah membuatnya menjadi media pembelajaran yang dinamis dan dapat menampilkan kurva sesuai dengan nilai yang dimasukkan ke dalam fungsi tersebut.
Hasil yang diharapkan pada tutorial ini adalah sebagai berikut :
Untuk membuatnya perhatikan langkah berikut :
-
Buatlah file baru bertipe AS3 dengan ukuran 800x600 pixel
- buatlah 3 buah input text dan letakkan di bagian bawah. Input text ini nantinya digunakan untuk mengubah nilai a,b,c pada fungsi kuadrat. Klik input text tersebut kemudian buka panel properties atur jenis huruf, embed huruf, dan berikan nilai 2 pada opsi Max Char agar pengguna tidak memasukkan nilai yang lebih dari 2 karakter.
- Tambahkan pula static text tulisan "Fungsi Kuadrat y = x2+ x+", sehingga melengkapi input text di atas.
- Buatlah sebuah tombol "buat kurva", yang nantinya kita gunakan untuk me"reset" gambar kurva di kordinat kartesius.
- Setelah semua aset visual selesai anda buat, tambahkan instance name. Pada input text, tambahkan instance name a_txt, b_txt dan c_txt, sedangkan tombol anda tambah instance name buat_kurva_btn
-
Klik layer 1 frame 1 kemudian buka panel action (F9) dan ketikan kode berikut :
-
Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka akan didapatkan aplikasi seperti di atas
import flash.display.Shape;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;
var lebarLayar = stage.stageWidth;
var tinggiLayar = stage.stageHeight;
var xPusat:int = lebarLayar/2;
var yPusat:int = tinggiLayar/2-50;
var jarak:int = 25;
//maxX dan maxY digunakan untuk memberi batas jarak axis dan ordinat
var maxX = Math.floor((lebarLayar/2)/jarak)-1;
var maxY = 8;
var smooth = 10;
var kordinat:MovieClip;
var kurva:MovieClip;
var warnaKordinat = 0x990000;
var warnaSkala = 0xbdbdbd;
var warnaKurva = 0x1737ad;
var labelXY:TextField;
//fungsi kuadrat
//y = ax^2+bx+c
var a = 1;
var b = -2;
var c = -3;
a_txt.text = String(a);
b_txt.text = String(b);
c_txt.text = String(c);
function panah(x,y, dx, dy):MovieClip{
var grafik = new MovieClip();
var theta:Number = Math.atan2(dy,dx);
var arrow:Shape = new Shape();
arrow.graphics.lineStyle(2, warnaKordinat, 1);
arrow.graphics.moveTo(x, y);
arrow.graphics.lineTo(x+dx, y-dy);
var d = Math.sqrt(dx*dx+dy*dy);
if (d > 5) d = 5;
arrow.graphics.beginFill(warnaKordinat);
arrow.graphics.moveTo(x+dx-3*d*Math.cos(theta+0.25*(Math.PI/2)),y-dy+3*d*Math.sin(theta+0.25*(Math.PI/2)));
arrow.graphics.lineTo(x+dx,y-dy);
arrow.graphics.lineTo(x+dx-3*d*Math.cos(theta-0.25*(Math.PI/2)),y-dy+3*d*Math.sin(theta-0.25*(Math.PI/2)));
grafik.addChild(arrow);
return grafik;
}
function buat_kordinat():MovieClip{
var grafik = new MovieClip();
//skala
var kordinat:Shape = new Shape();
//ordinat
var i:int;
for (i=1;i<=maxY;i++){
kordinat.graphics.lineStyle(1, warnaSkala, 1);
kordinat.graphics.moveTo(xPusat-maxX*jarak, yPusat-i*jarak);
kordinat.graphics.lineTo(xPusat+maxX*jarak, yPusat-i*jarak);
kordinat.graphics.moveTo(xPusat-maxX*jarak, yPusat+i*jarak);
kordinat.graphics.lineTo(xPusat+maxX*jarak, yPusat+i*jarak);
kordinat.graphics.lineStyle(2, warnaKordinat, 1);
kordinat.graphics.moveTo(xPusat, yPusat-i*jarak);
kordinat.graphics.lineTo(xPusat+5, yPusat-i*jarak);
kordinat.graphics.moveTo(xPusat, yPusat+i*jarak);
kordinat.graphics.lineTo(xPusat+5, yPusat+i*jarak);
}
//axis
for (i=1;i<=maxX;i++){
kordinat.graphics.lineStyle(1, warnaSkala, 1);
kordinat.graphics.moveTo(xPusat+i*jarak, yPusat-maxY*jarak);
kordinat.graphics.lineTo(xPusat+i*jarak, yPusat+maxY*jarak);
kordinat.graphics.moveTo(xPusat-i*jarak, yPusat-maxY*jarak);
kordinat.graphics.lineTo(xPusat-i*jarak, yPusat+maxY*jarak);
kordinat.graphics.lineStyle(2, warnaKordinat, 1);
kordinat.graphics.moveTo(xPusat+i*jarak, yPusat);
kordinat.graphics.lineTo(xPusat+i*jarak, yPusat+5);
kordinat.graphics.moveTo(xPusat-i*jarak, yPusat);
kordinat.graphics.lineTo(xPusat-i*jarak, yPusat+5);
}
grafik.addChild(kordinat);
//label
var lb:TextField;
//ordinat
for (i=1;i<maxY;i++){
//label
lb = new TextField();
lb.selectable = false;
lb.text = String(i);
lb.textColor = warnaKordinat;
lb.x = xPusat + 8;
lb.y = yPusat - i*jarak-10;
grafik.addChild(lb);
lb = new TextField();
lb.selectable = false;
lb.text = "-"+String(i);
lb.textColor = warnaKordinat;
lb.x = xPusat + 8;
lb.y = yPusat + i*jarak-10;
grafik.addChild(lb);
}
//axis
for (i=1;i<maxX;i++){
//label
lb = new TextField();
lb.selectable = false;
lb.text = String(i);
lb.textColor = warnaKordinat;
lb.x = xPusat + i*jarak-5;
lb.y = yPusat+10;
grafik.addChild(lb);
lb = new TextField();
lb.selectable = false;
lb.text = "-"+String(i);
lb.textColor = warnaKordinat;
lb.x = xPusat - i*jarak-5;
lb.y = yPusat + 6;
grafik.addChild(lb);
}
//kordinat utama
grafik.addChild(panah(xPusat, yPusat, maxX*jarak, 0));
grafik.addChild(panah(xPusat, yPusat, -maxX*jarak, 0));
grafik.addChild(panah(xPusat, yPusat, 0, maxY*jarak));
grafik.addChild(panah(xPusat, yPusat, 0, -maxY*jarak));
return grafik;
}
function gambar_kurva(a, b, c):MovieClip{
var grafik = new MovieClip();
var curve:Shape = new Shape();
//rumus dikalikan jarak
var y0 = a*maxX*maxX+b*maxX+c;
curve.graphics.lineStyle(2, warnaKurva, 1);
curve.graphics.moveTo(xPusat-maxX*jarak, yPusat-y0*jarak);
for ( var i:int = -maxX*smooth; i<maxX*smooth;i++){
var d = i/smooth;
y0 = a*d*d+b*d+c;
curve.graphics.lineTo(xPusat+d*jarak, yPusat-y0*jarak);
}
grafik.addChild(curve);
return grafik;
}
function setup():void{
kordinat = new MovieClip();
kordinat = buat_kordinat();
addChild(kordinat);
kurva = new MovieClip();
kurva = gambar_kurva(a, b, c);
addChild(kurva);
//tombol
buat_kurva_btn.addEventListener(MouseEvent.CLICK, buat_ulang);
}
function buat_ulang(e:MouseEvent):void{
a = Number(a_txt.text);
b = Number(b_txt.text);
c = Number(c_txt.text);
//hapus kurva lama
removeChild(kurva);
//gambar kurva baru
kurva = new MovieClip();
kurva = gambar_kurva(a, b, c);
addChild(kurva);
}
setup();
Penjelasan Kode
for ( var i:int = -maxX*smooth; i<maxX*smooth;i++){
var d = i/smooth;
y0 = a*d*d+b*d+c;
curve.graphics.lineTo(xPusat+d*jarak, yPusat-y0*jarak);
}
Kunci utama membuat kurva fungsi kuadrat adalah mendefinisikan rumus fungsi ke dalam kode AS3. Perhatikan baris di atas. Pada dasarnya nilai x dimasukkan pada seluruh baris nilai pada sumbu axis, untuk mencari nilai y. Dengan cara ini fungsi lineTo akan membuat garis sesuai dengan kordinat x, y yang ditemukan. Namun kurva yang dihasilkan akan bersudut, karena nilai pada sumbu axis sangat pendek (hanya -10 sampai 10 / 20 kali), sehingga untuk menghasilkan kurva yang halus, digunakan variabel smooth untuk memperdetail perhitungan.
file sumber (Adobe Animate CC 2017): dapat diunduh disini
Share ( Ayo Berbagi )
Leave me a comment
untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon