| 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

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