Papervision3D Learning 101213-2

12.13.2010

回転するサムネイル一覧(Papervision3D版)。

Papervision3DのText3Dを使用して回転するサムネイルの3D版を制作する。

y座標の値をz座標に置き換えた以外は2D版とほとんど同じ方法で制作する。

SAMPLE VIEW CODE

package {
	
	import flash.display.*;
	import flash.events.*;
	
    import org.papervision3d.materials.*;
    import org.papervision3d.materials.special.*;
    import org.papervision3d.typography.fonts.*;
    import org.papervision3d.typography.*;
    import org.papervision3d.view.*;
	import org.papervision3d.objects.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.view.layer.ViewportLayer;
	
	
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.events.TweenEvent;
	import org.libspark.betweenas3.tweens.*;
	import org.libspark.betweenas3.easing.*;

	

	public class view3d extends BasicView {
		   
		// ------------------------------------------------------------------------------- Properties
		
		private var _this:Object;
		
		private var _rootdo3d:DisplayObject3D;
		
		
		
		// ------------------------------------------------------------------------------- Constractor
		
		public function view3d() {
			
			super(1, 1, true, true, "Free");

			_this = this;
		}

		

		
		// ------------------------------------------------------------------------------- Function
		
		/**
		 * initialize
		 */
		public function Init():void {
			
			init3dworld();
			
			initcards();
		}
		
		/**
		 * start
		 */
		public function Start():void {			
			
			startRendering();
		}

		/**
		 * initialize 3dworld
		 */
		private function init3dworld():void {
			
			camera.zoom = 11;
			camera.focus = 100;
			camera.z = -1200;			
			
			_rootdo3d = new DisplayObject3D();
			_rootdo3d.rotationX = 10;
			_rootdo3d.y = -20;

			scene.addChild(_rootdo3d);
		}
		
		/**
		 * initialize cards
		 */
		private var radius:Number;
		private var cardslength:int = 20;
		private var onestep:Number;
		
		private function initcards():void {
			
			var font = new AdobeGaramondPro();
			
			radius = 360;
			
			onestep = 360 / cardslength;			
			
			var nm_gradation = new NM_Gradation();
			var cols_1 = nm_gradation.Colors(0xE4007F, 0x00A0E9, 11);
			var cols_2 = nm_gradation.Colors(0x00A0E9, 0xE4007F, 11);
			cols_1.pop();
			cols_2.pop();

			var colors = cols_1.concat(cols_2);				
			
			for(var i = 0; i < cardslength; i++) {
				
				var _card = new DisplayObject3D();
				_card.name = "card_" + (i + 1);	
				_card.extra = {};
				_card.extra.cid = i + 1;
				
				var mat_c = new ColorMaterial(0xFFFFFF, 0);
				mat_c.doubleSided = true;
				mat_c.interactive = true;
				
				var p = new Plane(mat_c, 100, 100, 1, 1);
				p.extra = {};
				p.extra.cid = _card.extra.cid;
				
				var pl = p.createViewportLayer(viewport, true);
				pl.buttonMode = true;
				pl.cacheAsBitmap = true;
				pl.addEventListener(MouseEvent.MOUSE_UP, card_click);
					
				_card.addChild(p);		
				
				var mat_l = new Letter3DMaterial(colors[i], .9);
				mat_l.doubleSided = true;		
				
				
				var t = new Text3D(i + 1, font, mat_l);
				t.z = 10;
				t.scaleX = -1;
				t.scaleY = 1;
				
				var tl = t.createViewportLayer(viewport, true);
				tl.mouseEnabled = false;
				tl.mouseChildren = false;

				_card.addChild(t);				
				
				_card.extra.defrot = i * onestep - 90;
				_card.extra.startrot = _card.extra.defrot;
				_card.extra.moverot = _card.extra.defrot;				
				
				_card.x = Math.cos(_card.extra.defrot * Math.PI / 180) * radius;
				_card.z = Math.sin(_card.extra.defrot * Math.PI / 180) * radius; 
				
				_card.rotationY = -_card.extra.defrot + 90;				
				
				_rootdo3d.addChild(_card);				
			}			
		}
		/** */
		private function card_click(eo:* = null) {
			
			var tgtcard = eo.currentTarget.displayObject3D;
			
			moveNum(tgtcard.extra.cid);
		}
		/**
		 * card actions
		 */
		private var currentcid:int = 1;
		private var lastcid:int = 1;
		
		private var movecount:int = 0;
			
		/** */
		public function moveNext():void {
			
			moveNum(currentcid - 1);
		}
		/** */
		public function moveBack():void {
			
			moveNum(currentcid + 1);
		}
		/** */
		public function moveNum(cid:int):void {
			
			setcid(cid);			
			setmovecount();
			movecards();
		}
		//
		private function setcid(cid:int):void {
			
			if(cid < 1) cid += cardslength;
			else if(cid > cardslength) cid -= cardslength;
			
			lastcid = currentcid;
			currentcid = cid;
		}
		//
		private function setmovecount():void {

			var difference = lastcid - currentcid;
			
			if(Math.abs(difference) > cardslength / 2) {
				
				if(difference < 0) difference = difference + cardslength;
				else if(difference > 0) difference = difference - cardslength;
			}
			
			movecount += difference;
		}
		
		/**
		 * card moving
		 */
		private var stepmax = onestep * cardslength;
		
		public function movecards():void {
			
			setmovecards();			
			movecardsaction();
		}
		/** */
		private function setmovecards():void {
			
			var _card:*;			
			
			if(movecount >= cardslength) {
				
				movecount -= cardslength;
			
				for( var i:int = 0; i < cardslength; i++ ) {
					
					_card = _rootdo3d.getChildByName("card_" + (i + 1));
	
					_card.extra.startrot += 360;
				}
			}
			else if(movecount <= 0)  {
				
				movecount += cardslength;
			
				for( var j:int = 0; j < cardslength; j++ ) {
					
					_card = _rootdo3d.getChildByName("card_" + (j + 1));
	
					_card.extra.startrot -= 360;
				}
			}
		}
		/** */
		private function movecardsaction():void {
			
			for( var i:int = 0; i < cardslength; i++ ) {
				
				var _card = _rootdo3d.getChildByName("card_" + (i + 1));

				if(_card.extra.moverot > 360) {
					
					_card.extra.moverot -= 360;
					_card.extra.startrot -= 360;
				}
				else if(_card.extra.moverot < 0) {
					
					_card.extra.moverot += 360;
					_card.extra.startrot += 360;
				}
				
				_card.extra.goalrot = _card.extra.startrot + (movecount * onestep);				
				
				if(_card.extra.movetween) _card.extra.movetween.stop();
				
				
				_card.extra.movetween = BetweenAS3.tween(_card.extra, {moverot:_card.extra.goalrot}, null, .6, Quad.easeOut);
				_card.extra.movetween.addEventListener(TweenEvent.UPDATE, movecardsaction_update);
				_card.extra.movetween.play();
				
			}
		}		
		/** */
		private function movecardsaction_update(eo:* = null):void {
			
			var extra = eo.target.target;
			var _card = _rootdo3d.getChildByName("card_" + (extra.cid ));

			var tgtrot = extra.moverot;
			
			if(tgtrot >= 360) tgtrot -= 360;
			else if(tgtrot <= 0) tgtrot += 360;

			_card.x = Math.cos(tgtrot * Math.PI / 180) * radius;
			_card.z = Math.sin(tgtrot * Math.PI / 180) * radius;
			_card.rotationY = -tgtrot + 90;	
			
		}
	}
	
}



category : ActionScript / Flash / Papervision3D

Demonstrations

Feature Samples

Author

虹村 マキオウ (nizimura makiou)

猫と太極拳を愛する横浜在住のフリーランスクリエイターです。

logo

Demo and Sample

Category