Membuat Carrousel 3D dengan papervision3D


papervision

papervision

Baru aja nyoba membuat carrousel / komedi putar dengan papervision3D hasilnya bisa dibilang lumayan lah *narsis mode on*😀.

Project ini dibuat dengan Flex builder 3, jadi harus punya tuh flashnya, kalo udah tau bisa di-convert sendiri ke flash CS 3 / 4.

Di sini foto2 diload dari file.xml ,jadi saat runtime program membaca isi dari file xml kita. Kelebihan dari load file xml yaitu jika kita sewaktu-waktu ingin mengganti banyaknya foto yang diload atau ingin mengganti foto, maka kita tidak susah-susah mengganti kode program.😉

Berikut adalah listing programnya :

package {

	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.utils.*;
	import flash.xml.XMLDocument;

	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.*;
	import org.papervision3d.objects.*;
	import org.papervision3d.scenes.*;
	import org.papervision3d.utils.InteractiveSceneManager;
	import org.papervision3d.utils.InteractiveSprite;

	/**
	 * 3d Carrousel Photo by Iddev
	 * website : https://iddev.wordpress.com
	 *
	 * Deskripsi : membuat carrousel / komidi putar pada flash dengan
	 * menggunakan flash dan papervision3D
	 */
	public class CarrouselPhoto extends MovieClip
	{
		public var mc :MovieClip;

		protected var container 				:Sprite;
		protected var scene     				:MovieScene3D;
		protected var camera   					:Camera3D;
		protected var ism						:InteractiveSceneManager;
		protected var plane	 	 				:Plane;

		protected var bitmap					:BitmapData;
		protected var tg:DisplayObject3D;
		private var rotasi:Number = 0;
		private var jumlah:Number = 0;
		private var index:Number = 0;
		private var loader:URLLoader;
		private var items:Array;
		private var picLoader:Array = new Array(10);

		public function CarrouselPhoto()
		{
			init();
		}
		public function init():void {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			//stage.align = StageAlign.TOP_LEFT;
			init3D();
			tg = new DisplayObject3D();
			loadFile();
			addEventListener(Event.ENTER_FRAME, loop);
		}

		protected function init3D():void {
			container = new InteractiveSprite();
			addChild(container);
			container.name = "mainCont";
			container.x = stage.stageWidth*.5;
			container.y = stage.stageHeight*.5;

			scene = new MovieScene3D(container);

			camera = new Camera3D();
			camera.zoom = 3;
			camera.focus = 500;
			//camera.z = -1000;
		}

		protected function loadFile():void{
			items = new Array();
			loader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, handleXMLLoaded);
			loader.load(new URLRequest("file.xml"));
		}
		function handleXMLLoaded(e:Event):void{
			var xml:XMLDocument = new XMLDocument();
			xml.ignoreWhite = true;
			xml.parseXML(loader.data);
			jumlah = xml.firstChild.childNodes.length;
			for(var i:int = 0; i < xml.firstChild.childNodes.length; i++){
				var o:Object = xml.firstChild.childNodes&#91;i&#93;.attributes;
				picLoader&#91;i&#93; = new Loader();
				picLoader&#91;i&#93;.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
				picLoader&#91;i&#93;.load(new URLRequest(o.url));
			}
		}
		protected function onLoadComplete(e:Event):void{
			var mm:MovieMaterial = new MovieMaterial(picLoader&#91;index&#93;.content);
			mm.doubleSided = true;
			var plane:Plane = new Plane( mm, 751, 134, 8, 8 );
			plane.rotationY = (360/jumlah)*(-index);
			plane.x = getXFromAngleAndRadius((360/jumlah)*index,500);
			plane.z = getZFromAngleAndRadius((360/jumlah)*index,500);

			tg.addChild(plane);

			index++;
			if(jumlah==index){
				scene.addChild(tg);
			}
		}

		protected function loop(event:Event):void {
			if(jumlah==index){
			//camera.x = -(container.mouseX * 3)/2;
			camera.y = (container.mouseY * 3);
			//rotasi += 1;
			rotasi += -(container.mouseX / 50)/2;
			tg.rotationY = rotasi;
			scene.renderCamera(camera);
			}
		}

		protected function getXFromAngleAndRadius(angle:Number,radius:Number):Number{
			return radius*Math.cos(angle*Math.PI/180);
		}
		protected function getZFromAngleAndRadius(angle:Number,radius:Number):Number{
			return radius*Math.sin(angle*Math.PI/180);
		}
	}
}
&#91;/sourcecode&#93;

Dan berikut adalah file xmlnya :

&#91;sourcecode language='xml'&#93;
<item>
	<image url="images/a.jpg" />
	<image url="images/b.jpg" />
	<image url="images/c.jpg" />
	<image url="images/d.jpg" />
	<image url="images/e.jpg" />
	<image url="images/f.jpg" />
	<image url="images/g.jpg" />
	<image url="images/h.jpg" />
	<image url="images/i.jpg" />
</item>

Screenshot Program

carrousel3D
Pada program ini saya menggunakan papervision versi 1.7, mungkin beberapa agak nggak compatible sama yang baru.
Pada download di bawah ini, enginenya sudah saya sisipkan di src, jadi nggak usah pake mengeset librarynya..😉
Download source code (Flex Project)

3 thoughts on “Membuat Carrousel 3D dengan papervision3D

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s