by Anggie Bratadinata

Creating Drag-and-Drop for AS3 Isolib

Some folks had asked about drag-and-drop mechanism in as3isolib discussion group. While there’s no such feature built-in in the library, it’s not hard to write it yourself.

So here’s a super simple class that provides that mechanism, called DragManager. I borrowed the idea from Flex’s DragManager. Note that this class is really a simple one and it doesn’t respect “grid” so you’ll have to modify it if you want to use it in a grid-based isometric space. Trust me, it’s not too hard 😉

Click to see the demo

And here’s the class:

package masputih.isometric.utils 
{
	import as3isolib.core.IsoDisplayObject;
	import as3isolib.display.IsoView;
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	/**
	 * ...
	 * @author Anggie Bratadinata
	 */
	public class DragManager
	{
		
		private var _proxy:Sprite;
		private var _view:IsoView;
		private var _obj:IsoDisplayObject;
		
		public function drag(obj:IsoDisplayObject, view:IsoView):void
		{
			
			_view = view;
			_obj = obj;
			
			var bmp:Bitmap = new Bitmap(_obj.getRenderData().bitmapData)
			bmp.x = -_obj.length;
			bmp.y = -_obj.height;
			
			_proxy = new Sprite();
			_proxy.alpha = .5;
			_proxy.addChild(bmp);
			_proxy.addEventListener(Event.ENTER_FRAME, onProxyEnterFrame);
			_view.addChild(_proxy);
			
			_view.stage.addEventListener(MouseEvent.MOUSE_UP, drop);
		}
		
		private function onProxyEnterFrame(e:Event):void 
		{
			if (_proxy != null)
			{
				_proxy.x = _view.mouseX;
				_proxy.y = _view.mouseY;
			}
			
		}
		
		private function drop(e:Event = null):void
		{
			var p:Point = new Point(_proxy.x, _proxy.y);
			p = _view.localToIso(p);
			
			_obj.moveTo(p.x, p.y, 0);
			
			//clean up
			_view.removeChild(_proxy);
			_view.stage.removeEventListener(MouseEvent.MOUSE_UP, drop);
			_proxy.removeEventListener(Event.ENTER_FRAME, onProxyEnterFrame);
			_proxy = null
			
		}
		
		public function get obj():IsoDisplayObject { return _obj; }
		
		/**********************************************
		 * SINGLETON CTOR
		 **********************************************/
		
		private static var _instance:DragManager;
		public function DragManager(enf:SingletonEnforcer) 
		{
			
		}
		public static function getInstance():DragManager{
			if(_instance == null) _instance = new DragManager(new SingletonEnforcer());
			return _instance;
		}
		
		
	}
	
}

class SingletonEnforcer{};

Sample Usage

package  
{
	
	import as3isolib.core.IsoDisplayObject;
	import as3isolib.display.IsoView;
	import as3isolib.display.primitive.IsoBox;
	import as3isolib.display.primitive.IsoRectangle;
	import as3isolib.display.scene.IsoGrid;
	import as3isolib.display.scene.IsoScene;
	import as3isolib.graphics.SolidColorFill;
	import eDpLib.events.ProxyEvent;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import masputih.isometric.utils.DragManager;
	
	/**
	 * Main class
	 * @author 
	 */
	public class DDTest extends Sprite 
	{
		
		public var view:IsoView;
		public var scene:IsoScene;
		public var grid:IsoGrid;
		
		public function DDTest() 
		{
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
		}
		
		private function onAddedToStage(e:Event):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			
			view = new IsoView();
			view.setSize(600, 400);
			view.showBorder = true;
			
			addChild(view);
			
			scene = new IsoScene();
			view.addScene(scene);
			
			grid = new IsoGrid();
			grid.cellSize = 400;
			grid.setGridSize(1, 1);
			
			scene.addChild(grid);
			
			view.pan(0, 200);
			
			var obj1:IsoBox = new IsoBox();
			obj1.setSize(20, 20, 20);
			obj1.moveTo(100, 100, 0);
			obj1.fill = new SolidColorFill(0xFFFF80, 1);
			obj1.container.mouseChildren = false;
			obj1.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);
			
			var obj2:IsoRectangle = new IsoRectangle();
			obj2.setSize(20, 20,0);
			obj2.moveTo(200, 100, 0);
			obj2.fill = new SolidColorFill(0x0080FF, 1);
			obj2.container.mouseChildren = false;
			obj2.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);
			
			var obj3:IsoBox = new IsoBox();
			obj3.setSize(20, 40,30);
			obj3.moveTo(200, 200, 0);
			obj3.fill = new SolidColorFill(0x800040, 1);
			obj3.container.mouseChildren = false;
			obj3.addEventListener(MouseEvent.MOUSE_DOWN, onIsoObjMouseDown);
			
			scene.addChild(obj1);
			scene.addChild(obj2);
			scene.addChild(obj3);
			
			stage.addEventListener(Event.ENTER_FRAME, render);
		}
		
		private function onIsoObjMouseDown(e:ProxyEvent):void 
		{
			DragManager.getInstance().drag(IsoDisplayObject(e.target), view);
		}
		
		
		
		private function render(e:Event):void 
		{
			view.render(true);
		}
		
	}
	
}

Hope you like it!

Also in this category ...


One Comment

Comments are closed.