[pv3d]flash翻牌效果

雖然是一個老掉牙的效果
真的要自己做還是要好好想一下
所以也好好的做一下筆記…


如圖跟標題…就是向撲克牌一樣的翻牌效果
設計師也只是要求翻過來後加上陰影跟MOUSEOVER的光影
全部都用Tweener的濾鏡解決!!
我也懶的再提供其他動態的IDEA..心情無力到像是AS工人了@@
我好懷念在橘子的熱血喔~
年輕真好!!!

廢話太多 = =

回到原題~要四張牌用四個BasicView的原因是:
如果只用一個BasicView放四張牌,
只有CAMERA前的牌的翻轉角度是正常的,
其他的會因為視角的差異看起來很怪,
重點是如果翻轉時跟其他牌重疊到,
會因為PV3D運算的問題!?開始出現類似癲間的顫抖….
所以用四個BasicView架四台CAMERA就正常了
線上WEB SITE

但是…高手發明的東西應該有更聰明的解決方式..我覺得啦~
向是把CAMERA的z軸拉遠再把撲克牌放大!!?

package{
	
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.utils.Timer;
	import flash.geom.Matrix;
	import flash.net.navigateToURL;
	import flash.filters.*;
	import flash.utils.getDefinitionByName; //引入getDefinitionByName方法;
	
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.events.*
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.layer.ViewportLayer;
	import org.papervision3d.materials.BitmapAssetMaterial;
	import org.papervision3d.view.layer.util.ViewportLayerSortMode;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.render.QuadrantRenderEngine;


	import caurina.transitions.Tweener;
	import caurina.transitions.properties.FilterShortcuts;
	import caurina.transitions.properties.ColorShortcuts;

	public class Main extends Sprite {
		var mod:ModelLocator = ModelLocator.getInstance();
		var banner_URL:String;
		var bannerLoader:URLLoader = new URLLoader;
				
		public function Main() {	
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(e:Event) {
			mod.rooturl = this.loaderInfo.url.substring(0, this.loaderInfo.url.indexOf("/flash") );
			//mod.rooturl = "C:/Users/justfly/Documents/My Dropbox/ES/CRAZE OUTLET";
			FilterShortcuts.init();
			ColorShortcuts.init();
			banner_URL = mod.rooturl + "/xml/banner.xml";
			bannerLoader.load(new URLRequest(banner_URL));
			bannerLoader.addEventListener(Event.COMPLETE, bannerLoadComplete);
			
			init3DEngine();
		}
		
		private function init3DEngine():void {
			for (var i = 1; i <= 4; i++ ) {
				var _view:BasicView = new BasicView(0, 0, true, true, "Target");
				_view.x = -590 + 235 * i;
				_view.y = -10;
				_view.name = "view" + i;
				_view.camera.z = -350;
				_view.viewport.buttonMode = true;
				//_view.renderer = new QuadrantRenderEngine(QuadrantRenderEngine.CORRECT_Z_FILTER);
				addChild(_view);
			}
			
			this.addEventListener(Event.ENTER_FRAME, onEventRender3D);
		}
		
		private function bannerLoadComplete(e:Event) {
			mod.banner_XML = new XML(bannerLoader.data);
			
			for (var i = 1; i <= 4; i++ ) {
				var _view:BasicView = getChildByName("view" + i) as BasicView;
				var bgRootNode:DisplayObject3D= new DisplayObject3D();
				_view.scene.addChild(bgRootNode);
				var _img:String = mod.rooturl + mod.banner_XML.bg.img_path;			
				var _bmpMat:BitmapFileMaterial = new BitmapFileMaterial(_img);
				_bmpMat.smooth = true; // 平滑化
				var _plane	:Plane = new Plane(_bmpMat, 220, 295, 2, 2);
				_plane.useOwnContainer = true;
				_plane.alpha = 0;
				_plane.y = 20;
				_plane.rotationY = 0;
				_plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, on3DRollPress);
				_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, on3DRollOver);
				_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, on3DRollOut);
				bgRootNode.addChild(_plane);
				Tweener.addTween(_plane, { alpha: 1, y:0, time: 0.5, transition: "easeInOutQuad", delay: i * 0.5 } );
				Tweener.addTween(_plane, {
											_DropShadow_alpha:80,
											_DropShadow_angle:60,
											_DropShadow_blurX:10,
											_DropShadow_blurY:10,
											_DropShadow_distance:5,
											_DropShadow_color:"0x000000"
											}
								);
				Tweener.addTween(_plane,{
											rotationY	: 180,
											time		: 0.7,
											transition	: "easeOutCubic",
											delay		: 2+i*0.3
										}
									);
			}
			for (i = 1; i <= 4; i++ ) {
				_view = getChildByName("view" + i) as BasicView;
				var cardRootNode:DisplayObject3D = new DisplayObject3D();
				_view.scene.addChild(cardRootNode);
				_img = mod.rooturl + mod.banner_XML.banner[i - 1].img_path;
				_bmpMat = new BitmapFileMaterial(_img);
				_bmpMat.interactive = true;
				_bmpMat.smooth = true; // 平滑化
				_plane = new Plane(_bmpMat, 220, 295, 2, 2);
				_plane.useOwnContainer = true;
				_plane.rotationY = 180;
				_plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, on3DRollPress);
				_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, on3DRollOver);
				_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, on3DRollOut);
				cardRootNode.addChild(_plane);
				Tweener.addTween(_plane, {
											_DropShadow_alpha:80,
											_DropShadow_angle:60,
											_DropShadow_blurX:10,
											_DropShadow_blurY:10,
											_DropShadow_distance:5,
											_DropShadow_color:"0x000000"
											}
								);
				Tweener.addTween(_plane,{
											rotationY	: 360,
											time		: 0.7,
											transition	: "easeOutCubic",
											delay		: 2+i*0.3
										}
									);
				}
		}
		
		private function on3DRollOver(e:InteractiveScene3DEvent):void {
			Tweener.addTween(e.displayObject3D, { _DropShadow_alpha:0 } );
			Tweener.addTween(e.displayObject3D, {
												_Glow_alpha:100,
												_Glow_blurX:8,
												_Glow_blurY:8,
												_Glow_color:"0xFFFFFF",
												_Glow_knockout:false,
												_Glow_inner:false,
												time:0.8,
												transition	: "easeOutSine"
												}
								);
		}
		
		private function on3DRollPress(e:InteractiveScene3DEvent):void {
		}
		
		private function on3DRollOut(e:InteractiveScene3DEvent):void {
			Tweener.addTween(e.displayObject3D, { _Glow_alpha:0, 
													_DropShadow_alpha:80,
													_Glow_blurX:0,
													_Glow_blurX:0
												} );
		}
		
		private function onEventRender3D(e:Event):void {
			for (var i = 1; i <=4; i++) {
				var _view:BasicView = getChildByName("view" + i) as BasicView;
				_view.singleRender();
			}
		}
	}
}

在〈[pv3d]flash翻牌效果〉中有 4 則留言

  1. 請問一下我學習你這個程式
    編譯時卻出現下列錯誤
    1046: 找不到 Type,或它不是編譯時期常數:ModelLocator。

    不知是否有空指導一下呢?

    謝謝你

留言功能已關閉。