| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



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

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


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Memahami konstrain

Pendahuluan

Konstrain (constraints) adalah kondisi dimana jarak antara ke 2 titik selalu sama. Sebagai contoh ketika membuat gerakan piston, struktur tulang (bone), lengan robot dan sebagainya. Untuk lebih jelasnya perhatikan demo berikut : ( drag ujung spine biru, untuk menggerakkan! )


Get Adobe Flash player

Untuk membuatnya perhatikan langkah berikut :

  1. Buatlah sebuah project baru AS3.
  2. Siapkan 3 buah gambar bertipe PNG sebagai lengan dan sensor (titik)
    tutorial flash membuat lengan robot by wandah_w
  3. Pada file main.as, ketikkan kode berikut :
  4. package
    {
    	import flash.display.Bitmap;
    	import flash.display.MovieClip;
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.events.MouseEvent;
    	
    	/**
    	 * ...
    	 * @author Wandah
    	 */
    	public class Main extends Sprite 
    	{
    		[Embed(source = "bulat.png")]
    		private var bmp:Class;	
    		[Embed(source = "spine.png")]
    		private var bmp1:Class;
    		[Embed(source = "spine2.png")]
    		private var bmp2:Class;
    		
    		private var spine_bmp:Bitmap;
    		private var spine_bmp2:Bitmap;
    		private var spine:MovieClip;
    		private var spine2:MovieClip;
    		
    		private var drag:Boolean = false;
    		private var titik_1:MovieClip;
    		private var titik_2:MovieClip;
    		private var titik_3:MovieClip;
    				
    		public function Main() 
    		{
    			if (stage) init();
    			else addEventListener(Event.ADDED_TO_STAGE, init);
    		}
    		
    		private function init(e:Event = null):void 
    		{
    			removeEventListener(Event.ADDED_TO_STAGE, init);
    			// atur masing2 elemen jarum1/spine 1 dan jarum2 / spine2
    			//spine 2
    			spine_bmp2 = new bmp2;
    			spine_bmp2.x = -17;
    			spine_bmp2.y = -120;
    			spine2 = new MovieClip;
    			spine2.addChild(spine_bmp2);
    			addChild(spine2);		
    			//letakkan spine di tengah
    			spine2.x = 400;
    			spine2.y = 200;
    			//spine 1
    			spine_bmp = new bmp1;
    			spine = new MovieClip;
    			spine_bmp.x = -17;
    			spine_bmp.y = -110;
    			spine.addChild(spine_bmp);
    			addChild(spine);
    			//letakkan spine di tengah
    			spine.x = 400;
    			spine.y = 300;
    			//titik 1
    			var bulat:Bitmap = new bmp;
    			bulat.x = -20;
    			bulat.y = -20;
    			titik_1 = new MovieClip();
    			titik_1.addChild(bulat);
    			titik_1.x = 400;
    			titik_1.y = 300;
    			titik_1.alpha = 0;
    			addChild(titik_1);
    			//titik 2
    			bulat = new bmp;
    			bulat.x = -20;
    			bulat.y = -20;
    			titik_2 = new MovieClip();
    			titik_2.addChild(bulat);
    			titik_2.x = 400;
    			titik_2.y = 200;
    			titik_2.alpha = 0;
    			addChild(titik_2);
    			//titik 3
    			bulat = new bmp;
    			bulat.x = -20;
    			bulat.y = -20;
    			titik_3 = new MovieClip();
    			titik_3.addChild(bulat);
    			titik_3.x = 400;
    			titik_3.y = 100;
    			titik_3.alpha = 0;
    			addChild(titik_3);
    			//listener untuk titik 3
    			titik_3.addEventListener(Event.ENTER_FRAME, gerak);
    			//listener untuk mouse
    			stage.addEventListener(MouseEvent.MOUSE_DOWN, drag_mouse);
    			stage.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
    		}
    		
    		private function stop_drag(e:MouseEvent):void{
    			drag = false;
    			titik_3.alpha = 0;
    			titik_3.x = titik_2.x + 100 * Math.cos((spine2.rotation-90) * Math.PI / 180);
    			titik_3.y = titik_2.y + 100 * Math.sin((spine2.rotation-90) * Math.PI / 180);
    		}
    		
    		private function drag_mouse(e:MouseEvent):void{
    			//deteksi apakah drag mouse mengenai 
    			if (titik_3.hitTestPoint(mouseX, mouseY)){
    				drag = true;
    				titik_3.alpha = 0.3;
    			}
    		}
    		
    		private function constraint(ob1:Object, ob2:Object, jarak:Number, adj:Number):void {
    			var adj2:Number = 1-adj;
    			var dist_x:Number = ob1.x-ob2.x;
    			var dist_y:Number = ob1.y-ob2.y;
    			var jarak_titik:Number = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
    			var sudut_titik:Number = -Math.atan2(dist_x, dist_y);
    			var error:Number = jarak_titik-jarak;
    			ob1.x += (error*adj)*Math.sin(sudut_titik);
    			ob1.y -= (error*adj)*Math.cos(sudut_titik);
    			ob2.x -= (error*adj2)*Math.sin(sudut_titik);
    			ob2.y += (error*adj2)*Math.cos(sudut_titik);
    		}
    		
    		private function gerak(e:Event):void{
    			if (drag){
    				titik_3.x = mouseX;
    				titik_3.y = mouseY;			
    				constraint(titik_3, titik_2, 100, 0);	
    				constraint(titik_2, titik_1, 100, 1);
    				//posisi spine
    				spine.rotation = rotasi(titik_1, titik_2);
    				spine2.x = titik_2.x;
    				spine2.y = titik_2.y;
    				spine2.rotation = rotasi(titik_2, titik_3);
    			}
    		}
    		
    		private function rotasi(ob1:Object, ob2:Object):Number{
    			var rad:Number =  -Math.atan2((ob1.x - ob2.x), (ob1.y - ob2.y)); 
    			return rad * 180 / Math.PI;
    		}				
    	}	
    }
    

  5. Jalankan aplikasi dengan menekan tombol Ctrl+Enter

Penjelasan Kode

	private function constraint(ob1:Object, ob2:Object, jarak:Number, adj:Number):void {
			var adj2:Number = 1-adj;
			var dist_x:Number = ob1.x-ob2.x;
			var dist_y:Number = ob1.y-ob2.y;
			var jarak_titik:Number = Math.sqrt(dist_x*dist_x+dist_y*dist_y);
			var sudut_titik:Number = -Math.atan2(dist_x, dist_y);
			var error:Number = jarak_titik-jarak;
			ob1.x += (error*adj)*Math.sin(sudut_titik);
			ob1.y -= (error*adj)*Math.cos(sudut_titik);
			ob2.x -= (error*adj2)*Math.sin(sudut_titik);
			ob2.y += (error*adj2)*Math.cos(sudut_titik);
		}

Fungsi tersebut digunakan untuk mengukur posisi antara 2 objek dan meletakkannya pada posisi dengan jarak yang selalu sama.Berikut penjelasan masing-masing vartiabel :

  • Variabel ob1 digunakan untuk mendefinisikan objek pertama
  • Variabel ob2 digunakan untuk mendefinisikan objek kedua
  • Variabel jarak untuk mengatur panjang lengan / jarak statis antara ke dua titik
  • Variabel adj digunakan untuk mengkondisikan titik pertama, apakah mengalami perubahan posisi atau tidak


	constraint(titik_3, titik_2, 100, 0);	
	constraint(titik_2, titik_1, 100, 1);

Baris pertama digunakan agar titik_3 memiliki posisi yang relatif terhadap titik_2 sedangkan baris ke 2 nilai adj di set menjadi 1 sehingga posisi titik_1 tidak akan berpindah tempat.

function rotasi(ob1:Object, ob2:Object):Number{
	....
}

digunakan untuk mengeset rotasi lengan (spine) agar sesuai dengan posisi titik-titik.



Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon