| flash game tutorial and flare3d games

Latest Blog



11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas

19.05.2020

Membuat Fitur Swipe Mobile

Membuat fitur swap / drag konten untuk mobile

12.05.2020

Membuat Grafik Fungsi Kuadrat dengan Flash

Membuat kurva fungsi kuadrat dengan kode actionscript 3 Flash

11.05.2020

Membuat Kordinat Kartesius dengan Flash

Membuat sistem kordinat kartesius dengan code AS3 full

16.03.2020

Game Edukasi RPG

Buku pengembangan game RPG bermuatan edukasi

31.07.2019

Perpustakaan Baru UNNES

Mengintip perpustakaan baru UNNES

07.04.2018

Membuat Game Tebak Gambar

Tutorial membuat game tebak gambar dengan Flash

03.07.2017

Memahami konstain

Memahami penggunaan konstrain dalam membuat sistem gerak

28.01.2017

E-Book Media Pembelajaran

E Book Gratis Membuat Media Pembelajaran Interaktif

15.12.2016

Membuat mouse trail

Membuat animasi ikan mengikuti kursor mouse


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D 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 :


Get Adobe Flash player

Untuk membuatnya perhatikan langkah berikut :

  1. Buatlah file baru bertipe AS3 dengan ukuran 800x600 pixel
  2. 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.
  3. Tambahkan pula static text tulisan "Fungsi Kuadrat y = x2+ x+", sehingga melengkapi input text di atas.
  4. Buatlah sebuah tombol "buat kurva", yang nantinya kita gunakan untuk me"reset" gambar kurva di kordinat kartesius.
  5. 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
  6. Klik layer 1 frame 1 kemudian buka panel action (F9) dan ketikan kode berikut :
  7. 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();
    

  8. Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka akan didapatkan aplikasi seperti di atas
    tutorial flash membuat fungsi kuadrat dengan flash by wandah_w

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