| flash game tutorial and flare3d games

Latest Blog



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

23.04.2016

Animasi Karakter Game RPG Flash

Membuat animasi karakter dalam game RPG Flash

23.04.2016

Aplikasi Peta Game RPG Flash

Mengaplikasikan Map Editor untuk peta game RPG Flash

23.04.2016

Membuat Peta Game RPG Flash

Membuat peta untuk game RPG Flash

23.04.2016

Mengerakkan Karakter Game RPG

Menambahkan karakter dalam game RPG Flash

23.04.2016

Membuat Game RPG

Membuat game RPG Flash actionscript 3 dengan teknik tiling

31.12.2015

Indonesia Soccer League

Sekilas tentang pengembangan game sepakbola dengan Flash

30.12.2015

Animasi tata surya

Tutorial membuat animasi tata surya dengan AS3 (Gerakan elips)


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