| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas


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