| 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

Sistem Kordinat Kartesius

Tutorial Membuat Kordinat Kartesian dengan Flash Actionscript 3

Membuat sistem kordinat kartesius/kartesian dapat dilakukan secara manual maupun dengan menggunakan kode. Pada tutorial ini saya buatkan kode untuk membuat sistem kordinat kartesian dengan menggunakan kode. Untuk lebih jelasnya ikuti langkah berikut :


  1. Buka Adobe Flash / Animate, buat file baru bertipe AS3 kemudian drag klik Frame 1 dan buka Panel Action kemudian ketik (copas) kode berikut:
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;
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 = Math.floor((tinggiLayar/2)/jarak)-1;

var drag = false;

var kordinat:MovieClip;
var titik:MovieClip;
var warnaKordinat = 0x990000;
var warnaSkala = 0xbdbdbd;
var warnaTitik = 0x1737ad;
var labelXY:TextField;


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 buat_titik(x, y):MovieClip{
	var grafik = new MovieClip();
	grafik.x = xPusat+x*jarak;
	grafik.y = yPusat-y*jarak;
	var dot:Shape = new Shape();
	dot.graphics.beginFill(warnaTitik);
	dot.graphics.drawCircle(0, 0, 10);
	grafik.addChild(dot);
	return grafik;
}

function setup():void{
	kordinat = new MovieClip();
	kordinat = buat_kordinat();
	addChild(kordinat);
	
	
	titik = new MovieClip();	
	titik = buat_titik(5, 5);
	addChild(titik);
	titik.addEventListener(MouseEvent.MOUSE_DOWN, mulai_drag);
	titik.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
	
	labelXY = new TextField();
	labelXY.selectable  = false;
	labelXY.text = "(5, 5)";
	labelXY.x = titik.x+10;
	labelXY.y = titik.y-10;
	addChild(labelXY);
}

function dist(x1,y1,x2,y2):int{
	return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}
function mulai_drag(e:MouseEvent):void{
	var ob = e.currentTarget;
	labelXY.visible = false;
	ob.startDrag();
}

function stop_drag(e:MouseEvent):void{
	var ob = e.currentTarget;
	ob.stopDrag();
	//snap ke posisi terdekat
	var px = Math.round((ob.x - xPusat)/jarak);
	var py = -1*Math.round((ob.y - yPusat)/jarak);
	ob.x = xPusat + px*jarak;
	ob.y = yPusat - py*jarak;
	
	labelXY.text = "("+px+", "+py+")";
	labelXY.x = titik.x+10;
	labelXY.y = titik.y-10;
	labelXY.visible = true;
}


setup();

Jalankan aplikasi dengan menekan tombol Ctrl+Enter

Hasil kode di atas adalah sebagai berikut, jika anda jalankan kode di aplikasi Flash, anda bisa mengatur posisi titik dengan mendrag titik menggunakan mouse : tutorial flash membuat kordinat kartesian dengan flash by wandah_w

Penjelasan Kode

Kode di atas sangat sederhana, anda dapat mengatur ulang variabel-variabel yang ada agar sesuai dengan yang anda inginkan.

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