Berikut ini demo manipulasi tekstur Collada (DAE) secara dinamis pada saat runtime.

Click to launch

DAE & texture files are courtesy of Away3D team.

package
{
	import away3d.animators.SkinAnimation;
	import away3d.cameras.Camera3D;
	import away3d.containers.ObjectContainer3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.core.base.Mesh;
	import away3d.core.base.Object3D;
	import away3d.core.math.Number3D;
	import away3d.core.utils.Cast;
	import away3d.loaders.Collada;
	import away3d.materials.BitmapMaterial;
	import away3d.materials.TransformBitmapMaterial;
	import away3d.primitives.Cube;
	import away3d.primitives.Plane;
	import br.com.stimuli.loading.BulkLoader;
	import br.com.stimuli.loading.BulkProgressEvent;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.utils.getTimer;

	public class Main extends Sprite{

		public var daeFile:String = "mario_testrun.dae";
		public var daeTexture:String = "assets/mario_tex.jpg";
		public var floorTexture:String = "assets/floor.jpg";

		public var cam:Camera3D;
		public var scene:Scene3D;
		public var view:View3D;
		public var collada:Collada;
		public var model:ObjectContainer3D;
		public var skinAnim:SkinAnimation;
		public var mesh:Mesh;

		public var floor:Plane;

		//material variables
		public var colladaMaterial:BitmapMaterial;
		public var floorMaterial:TransformBitmapMaterial;

		//drawing pane
		public var materialSprite:Sprite;

		public var ldr:BulkLoader;

		public var loadStatus:TextField;

		public function Main() {

			loadStatus = new TextField();
			loadStatus.textColor = 0xFFFFFF;
			loadStatus.autoSize = TextFieldAutoSize.RIGHT;
			addChild(loadStatus);

			if (stage) loadAssets();
			else addEventListener(Event.ADDED_TO_STAGE, loadAssets);
		}

//----------------------------------------------------------- LOAD STUFF	

		private function loadAssets(e:Event = null):void {

			removeEventListener(Event.ADDED_TO_STAGE, loadAssets);

			ldr = new BulkLoader('assets');

			ldr.logLevel = BulkLoader.LOG_INFO;

			ldr.add(daeTexture, { id:"texture", type:BulkLoader.TYPE_IMAGE } );
			ldr.add(floorTexture, { id:"floor", type:BulkLoader.TYPE_IMAGE } );
			ldr.add(daeFile, { id:"dae", type:BulkLoader.TYPE_XML } );

			ldr.addEventListener(BulkProgressEvent.PROGRESS, handleBulkLoaderEvents);
			ldr.addEventListener(BulkProgressEvent.COMPLETE, handleBulkLoaderEvents);

			ldr.start(1);
		}

		private function handleBulkLoaderEvents(e:BulkProgressEvent):void {
			if (e.type == BulkProgressEvent.PROGRESS) {

				loadStatus.text = "loading ..." + (BulkLoader.truncateNumber(e.percentLoaded,2) * 100) +"%";

				return;
			}
			if (e.type == BulkProgressEvent.COMPLETE) {

				loadStatus.x = 200;
				loadStatus.text = "<<< draw lines with your mouse here";

				initEngine();

				initFloor(ldr.getBitmap("floor"));

				initObjects(ldr.getXML("dae"), ldr.getBitmap("texture"));

			}

		}

//----------------------------------------------------------- INIT

		private function initEngine():void {

			scene = new Scene3D();

			cam = new Camera3D();
			cam.lookAt(new Number3D(0, 0, 0));
			cam.moveUp(100);
			cam.moveBackward(400);

			view = new View3D();
			view.x = stage.stageWidth / 2;
			view.y = stage.stageHeight / 2;
			view.camera = cam;
			view.scene = scene;
			view.mouseZeroMove = true;
			addChild(view);

		}

		private function initFloor(material:Bitmap):void {

			floorMaterial = new TransformBitmapMaterial(material.bitmapData);
			floorMaterial.repeat = true;

			floor = new Plane();
			floor.width = 400;
			floor.height = 400;
			floor.material = floorMaterial;

			scene.addChild(floor);
		}

		private function initObjects(dae:XML,material:Bitmap):void {

			colladaMaterial = new BitmapMaterial(material.bitmapData);

			collada = new Collada();
			collada.scaling = 10;

			/**
			 * [1] If you do this, you can't assign a new material later on. Dunno why.
			 *
			 *   collada.material = colladaMaterial;
			 *
			 * Do [2] instead.
			 */

			model = collada.parse(dae) as ObjectContainer3D;

			//[2]
			Mesh(model.getChildByName('polySurface1')).material = colladaMaterial;

			scene.addChild(model);

			skinAnim = model.animationLibrary.getAnimation("default").animation as SkinAnimation;

			addEventListener(Event.ENTER_FRAME, render);

			initDrawingPane(material);
		}

//----------------------------------------------------------- DRAWING PANE		

		private function initDrawingPane(material:Bitmap):void {

			materialSprite = new Sprite();
			materialSprite.addChild(new Bitmap(material.bitmapData));
			materialSprite.scaleX = materialSprite.scaleY = .2;
			addChild(materialSprite);

			var drawingLayer:Sprite = new Sprite();
			drawingLayer.name = "drawingLayer";
			materialSprite.addChild(drawingLayer);

			materialSprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
		}

		private function onMouseDown(e:MouseEvent):void {

			var drawingLayer:Sprite = materialSprite.getChildByName('drawingLayer') as Sprite;
			drawingLayer.graphics.lineStyle(1, 0xFFFFFF);
			drawingLayer.graphics.moveTo(e.localX, e.localY);
			materialSprite.addEventListener(MouseEvent.MOUSE_MOVE, drawLine);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		}

		private function drawLine(e:MouseEvent):void {
			var drawingLayer:Sprite = materialSprite.getChildByName('drawingLayer') as Sprite;
			drawingLayer.graphics.lineTo(e.localX, e.localY);
		}

		private function onMouseUp(e:MouseEvent):void {
			if (materialSprite.hasEventListener(MouseEvent.MOUSE_MOVE)){
				materialSprite.removeEventListener(MouseEvent.MOUSE_MOVE, drawLine);

				var bd:BitmapData = new BitmapData(materialSprite.width, materialSprite.height);
				var mat:Matrix = new Matrix(materialSprite.scaleX, 0, 0, materialSprite.scaleY);
				bd.draw(materialSprite,mat);

				//This won't work if you assign the material to the collada instance like [1]
				Mesh(model.getChildByName('polySurface1')).material = new BitmapMaterial(bd);

			}
		}

//----------------------------------------------------------- RENDER

		private function render(e:Event):void {
			model.rotationY += 10;
			//update the collada animation
			skinAnim.update(getTimer() * 2 / 1000);
			view.render();
		}
	}
}

Here’s a small application that allows you to draw and email the drawing as an attachment.

Click to launch the application

Received Email in Outlook

Downloads

Demo kali ini adalah mengenai pembuatan aplikasi peta interaktif dengan menggunakan komponen gratisan dari AFComponents yaitu UMap. Di sini saya membuat aplikasi untuk menampilkan peta Pulau Jawa dan meletakkan markers di kota-kota besar (Jakarta, Surabaya, Semarang, Bandung, dan Yogya ) yang jika diklik akan menampilkan nama kota dan logonya.

Click to see the demo

Peralatan

• UMap , tersedia versi Flash (.mxp) dan Flex (.swc)
• Flex SDK
• FlashDevelop

Project Setup

Setelah saya unduh UMap_Flex.swc, saya buat project di FlashDevelop lalu saya kopi file swc tersebut  ke dalam direktori “lib/” dan saya tambahkan file .swc itu ke dalam library path.

Variabel

Pertama, saya buat 3 buah variabel yaitu :

• mapData yaitu sumber data yang akan ditampilkan berisi nama kota, logo, dan koordinat ( dari wikipedia )
• map, objek UMap
• initPos, posisi awal map (center point)

public var map:UMap;

public var mapData:Array = [
	{kota:"Surabaya",logo:"logo/surabaya.jpg",loc:"-7.233333, 112.733333"},
	{kota:"Jakarta", logo:"logo/jakarta.jpg",loc:"-6.266667, 106.8"},
	{kota:"Bandung", logo:"logo/bandung.jpg",loc:"-6.95, 107.566667"},
	{kota:"Yogyakarta", logo:"logo/yogyakarta.jpg",loc:"-7.801389, 110.364444" },
	{kota:"Semarang",logo:"logo/semarang.jpg",loc:"-6.966667, 110.416667"}
]

//center map to semarang
public var initPos:LatLng = new LatLng( -6.966667, 110.416667);

public function Main():void {
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
}

init() & onReadyMap()

Di dalam init() saya mengeset ukuran stage, menginstansiasi objek UMap dan mengeset onReadyMap() sebagai event handler untuk MapEvent.READY.

onReadyMap() saya gunakan untuk mengeset ukuran map, disamakan dengan ukuran stage. Kemudian zoom level, posisi awal (center), dan menambahkan kontrol. Terakhir saya panggil createMarkers() setelah saya tambahkan map ke dalam DisplayList.

private function init(e:Event = null):void{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	// entry point

	stage.scaleMode = StageScaleMode.NO_SCALE;
	stage.stageWidth = 600;
	stage.stageHeight = 400;

	map = new UMap();
	map.addEventListener(MapEvent.READY, onReadyMap);

}

private function onReadyMap(e:MapEvent):void {

	map.setSize(stage.stageWidth, stage.stageHeight);
	map.setZoom(6);
	map.setCenter(initPos);
	map.addControl( new ZoomControl());
	map.addControl( new PositionControl());
	map.addControl( new MapTypeControl());

	addChild(map);

	createMarkers();
}

createMarkers()

Function ini adalah yang paling kompleks. Di sini saya menampilkan data dari mapData sebagai marker di atas map.

• pos : variabel berisi koordinat geografis dalam bentuk desimal (latitude & longitude) yang saya gunakan untuk posisi marker
• lat & long : variabel untuk menampung koordinat yang ada di setiap elemen di dalam mapData
• infoStyle : objek yang mewakili content style dari popup panel yang muncul waktu marker diklik. Saya gunakan untuk mengaktifkan mode HTML.
• infoTitle : teks untuk judul popup
• infoString : isi popup, berupa teks html

private function createMarkers():void {

	var marker:Marker;
	var pos:LatLng;
	var lat:Number;
	var long:Number;

	//info popup
	var infoTitle:String;
	var infoContent:String;
	//enable HTML content
	var infoStyle:InfoWindowStyle = new InfoWindowStyle();
	infoStyle.contentStyle.html = true;

	var i:int = mapData.length;

	while (i--) {
		lat = Number(String(mapData[i]['loc']).split(",")[0]);
		long = Number(String(mapData[i]['loc']).split(",")[1]);
		pos = new LatLng(lat, long);

		//create new marker
		marker = new Marker();
		marker.position = pos;
		marker.buttonMode = marker.useHandCursor = true;
		marker.infoStyle = infoStyle;

		infoTitle = mapData[i]['kota'];
		infoContent = "";

		marker.infoParam = {title:infoTitle, content:infoContent };

		map.addOverlay(marker);
	}

}

Download