[pv3d]flash翻牌效果

Posted on 由
LINEで送る
[`evernote` not found]

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


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

廢話太多 = =

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

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();
			}
		}
	}
}

4 則迴響於《[pv3d]flash翻牌效果》

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

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

    謝謝你

回應已關閉。