tweenmax

Full Screen Cube

Wednesday, April 8th, 2009 | examples | Comments

Click and drag the cube to spin (this simple example is based off of that sweet Compiz rotate cube effect):


source

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

package
{
	import flash.display.Bitmap;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
	import gs.easing.Quad;
 
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="0xffffff", frameRate="31")]
	public class FullScreenCube extends BasicView
	{
		[Embed(source="/assets/car.jpg")]
		private var carAsset:Class;
 
		[Embed(source="/assets/back.jpg")]
		private var backAsset:Class;
 
		[Embed(source="/assets/brabus.jpg")]
		private var brabusAsset:Class;
 
		[Embed(source="/assets/ferrari.jpg")]
		private var ferrariAsset:Class;
 
		private var cube:Cube;		
		private var mouseDownX:Number = 0;
		private var targetRotation:Number = 0;
 
		public function FullScreenCube()
		{
			super(900, 480);
 
			opaqueBackground = 0x000000;
			camera.focus = 100;
			camera.zoom = 10;
 
			var materialsList:MaterialsList = new MaterialsList();
			materialsList.addMaterial(createBitmapMaterialFromAsset(carAsset), "front");
			materialsList.addMaterial(createBitmapMaterialFromAsset(backAsset), "back");
			materialsList.addMaterial(createBitmapMaterialFromAsset(brabusAsset), "left");
			materialsList.addMaterial(createBitmapMaterialFromAsset(ferrariAsset), "right");
			materialsList.addMaterial(new ColorMaterial(0xffffff), "top");
			materialsList.addMaterial(new ColorMaterial(0xffffff), "bottom");
 
			cube = new Cube(materialsList, 900, 900, 480);
			cube.z = 450;
			scene.addChild(cube);
 
			startRendering();
 
			addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}
 
		private function createBitmapMaterialFromAsset(asset:Class):BitmapMaterial
		{
			var bitmap:Bitmap = new asset() as Bitmap;
			var material:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData, true);
 
			return material;
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			mouseDownX = event.localX;
		}
 
		private function mouseUpHandler(event:MouseEvent):void
		{
			var currentMouseX:Number = event.localX;
			if(currentMouseX < mouseDownX)
			{
				targetRotation += 90;
 
			}
			else
			{
				targetRotation -= 90;
			}
			TweenMax.to(cube, .5, {rotationY:targetRotation, z:450, bezierThrough:[{z:700}], ease:Quad.easeInOut});
		}
	}
}

Tags: , ,

3D Grid

Sunday, February 1st, 2009 | examples | Comments

This builds on the previous example.


source

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

package {
	import de.polygonal.ds.Array3;
	import de.polygonal.ds.Iterator;
 
	import flash.display.DisplayObject;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import gs.TweenMax;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class Grid3D extends BasicView
	{
		private static const GRID_COLS:int = 9;
		private static const GRID_X_SPACING:Number = 200;
		private static const CENTER_X_OFFSET:Number = GRID_COLS  * GRID_X_SPACING / 2 - GRID_X_SPACING / 2;
 
		private static const GRID_ROWS:int = 4;
		private static const GRID_Y_SPACING:Number = 200;
		private static const CENTER_Y_OFFSET:Number = GRID_ROWS * GRID_Y_SPACING / 2 - GRID_Y_SPACING / 2;
 
		private static const GRID_LAYERS:int = 4;
		private static const GRID_Z_SPACING:Number = 200;
		private static const CENTER_Z_OFFSET:Number = GRID_LAYERS * GRID_Z_SPACING / 2 - GRID_Z_SPACING / 2;
 
		private var grid:Array3 = new Array3(GRID_COLS, GRID_ROWS, GRID_LAYERS);
 
		private var selectedPlane:Plane;
		private var cameraPitch:Number = 90;
		private var cameraYaw:Number = 270;
		private var cameraTarget:DisplayObject3D = DisplayObject3D.ZERO;
		private var previousMouseX:Number = 0;
		private var isOrbiting:Boolean = false;
 
 
		public function Grid3D()
		{
			viewport.interactive = true;
			createGrid();
			startRendering();
 
			stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}
 
		private function createGrid():void
		{
			for(var i:int = 0; i < GRID_COLS; i++)
			{
				for(var j:int = 0; j < GRID_ROWS; j++)
				{
					for(var k:int = 0; k < GRID_LAYERS; k++)
					{
						var randomColor:Number = Math.random() * 0xffffff;
						var shape:Shape = new Shape();
						with(shape)
						{
							graphics.beginFill(randomColor);
							graphics.drawRect(0, 0, 50, 50);
							graphics.endFill();
						}
						var material:MovieMaterial = new MovieMaterial(shape);
						//animated needs to be true to tween the color
						material.animated = true;
						material.doubleSided = true;
						material.interactive = true;
 
						var plane:Plane = new Plane(material, 100, 100);
						plane.name = "plane_" + i + "_" +j;
						plane.x = i * GRID_X_SPACING - CENTER_X_OFFSET;
						plane.y = j * GRID_Y_SPACING - CENTER_Y_OFFSET;
						plane.z = k * GRID_Z_SPACING - CENTER_Z_OFFSET;
 
						plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
						//push planes references into our collection
						grid.set(i, j, k, plane); 
 
						scene.addChild(plane);
					}
				}
			}
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var clickedPlane:Plane = Plane(event.target);
			if(selectedPlane != clickedPlane)
			{
				if(selectedPlane) TweenMax.to(selectedPlane, 1, {scale:1, rotationY:0});
				selectedPlane = Plane(event.target);
 
				TweenMax.to(selectedPlane, 1, {scale:2, rotationY:180});
 
				var randomColor:Number = Math.random() * 0xffffff;
 
				//loop through our grid using the iterator of Array2
				var time:Number = .1;
 
				var itr:Iterator = grid.getIterator();
				itr.start();
				while(itr.hasNext())
				{
					time += .1;
					if(itr.data != null) 
					{
						var plane:Plane = Plane(itr.data);
						//We don't tween the color of the selectedPlane
						if(plane != selectedPlane)
						{
							//tint the color of the movie asset in the material
							var movieClip:DisplayObject = MovieMaterial(plane.material).movie;
							TweenMax.to(movieClip, time, {tint:randomColor});
						}
					}
					itr.next();
				}	
			}
		}
 
		private function mouseDownHandler(event:MouseEvent):void
		{
			isOrbiting = true;
		}
 
		private function mouseUpHandler(event:MouseEvent):void
		{
			isOrbiting = false;
		}
 
 
		override protected function onRenderTick(event:Event=null):void
		{
 			if(isOrbiting)
 			{
				var differenceX:Number = viewport.containerSprite.mouseX - previousMouseX;
 
				cameraYaw += differenceX;
				cameraYaw %= 360;
 
				camera.orbit(cameraPitch, cameraYaw, true, camera.target);
 			}
 
			previousMouseX = viewport.containerSprite.mouseX;
			super.onRenderTick(event);
		}
	}
}

Tags: ,

Grid

Sunday, February 1st, 2009 | examples | Comments


source

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

package {
	import de.polygonal.ds.Array2;
	import de.polygonal.ds.Iterator;
 
	import flash.display.DisplayObject;
	import flash.display.Shape;
 
	import gs.TweenMax;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class Grid extends BasicView
	{
		private static const GRID_COLS:int = 9;
		private static const GRID_X_SPACING:Number = 200;
		private static const CENTER_X_OFFSET:Number = GRID_COLS  * GRID_X_SPACING / 2 - GRID_X_SPACING / 2;
 
		private static const GRID_ROWS:int = 4;
		private static const GRID_Y_SPACING:Number = 200;
		private static const CENTER_Y_OFFSET:Number = GRID_ROWS * GRID_Y_SPACING / 2 - GRID_Y_SPACING / 2;
 
		private var grid:Array2 = new Array2(GRID_ROWS, GRID_COLS);
 
		private var selectedPlane:Plane;
 
		public function Grid()
		{
			viewport.interactive = true;
			createGrid();
			startRendering();
		}
 
		private function createGrid():void
		{
			for(var i:int = 0; i < GRID_COLS; i++)
			{
				for(var j:int = 0; j < GRID_ROWS; j++)
				{
					var randomColor:Number = Math.random() * 0xffffff;
					var shape:Shape = new Shape();
					with(shape)
					{
						graphics.beginFill(randomColor);
						graphics.drawRect(0, 0, 50, 50);
						graphics.endFill();
					}
					var material:MovieMaterial = new MovieMaterial(shape);
					//animated needs to be true to tween the color
					material.animated = true;
					material.doubleSided = true;
					material.interactive = true;
 
					var plane:Plane = new Plane(material, 100, 100);
					plane.name = "plane_" + i + "_" +j;
					plane.x = i * GRID_X_SPACING - CENTER_X_OFFSET;
					plane.y = j * GRID_Y_SPACING - CENTER_Y_OFFSET;
 
					plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
					//push planes references into our collection
					grid.set(j, i, plane); 
 
					scene.addChild(plane);
				}
			}
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var clickedPlane:Plane = Plane(event.target);
			if(selectedPlane != clickedPlane)
			{
				if(selectedPlane) TweenMax.to(selectedPlane, 1, {scale:1, rotationY:0});
				selectedPlane = Plane(event.target);
 
				TweenMax.to(selectedPlane, 1, {scale:2, rotationY:180});
 
				var randomColor:Number = Math.random() * 0xffffff;
 
				//loop through our grid using the iterator of Array2
				var itr:Iterator = grid.getIterator();
				itr.start();
				while(itr.hasNext())
				{
					if(itr.data != null) 
					{
						var plane:Plane = Plane(itr.data);
						//We don't tween the color of the selectedPlane
						if(plane != selectedPlane)
						{
							//tint the color of the movie asset in the material
							var movieClip:DisplayObject = MovieMaterial(plane.material).movie;
							TweenMax.to(movieClip, 1, {tint:randomColor});
						}
					}
					itr.next();
				}	
			}
		}
	}
}

Tags: , , ,

Stacked Planes

Saturday, January 31st, 2009 | examples | Comments

Compare this to the last post to see how similar they are.


source

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

package {
	import de.polygonal.ds.DLinkedList;
	import de.polygonal.ds.DListNode;
 
	import gs.TweenMax;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class StackedPlanes extends BasicView
	{
		private static const X_SPACING:Number = 400;
		private static const Z_SPACING:Number = 400;
		private static const NUMBER_OF_PLANES:int = 10;
		private static const TIME:Number = .5;
 
		private var planeList:DLinkedList = new DLinkedList();
 
		public function StackedPlanes()
		{
			viewport.interactive = true;
 
			for(var i:int = 0; i < NUMBER_OF_PLANES; i++)
			{
				var randomColor:Number = Math.random() * 0xffffff;
				var colorMaterial:ColorMaterial = new ColorMaterial(randomColor);
				colorMaterial.interactive = true;
				var plane:Plane = new Plane(colorMaterial, 400, 400, 4, 4);
				plane.x = i * X_SPACING;				
 
				plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, plane_objectClickHandler);
 
				planeList.append(plane);
				scene.addChild(plane);
			}
 
			flow(plane);
 
			startRendering();
		}
 
		private function plane_objectClickHandler(event:InteractiveScene3DEvent):void
		{
			var plane:Plane = Plane(event.target);
			flow(plane);			
		}
 
		private function flow(plane:Plane):void
		{
			var xPosition:Number = 0;
			var zPosition:Number = 0;
			TweenMax.to(plane, TIME, {x:xPosition, z:zPosition, rotationY:0});
 
			var current:DListNode = planeList.nodeOf(plane).node;
 
			var walkLeft:DListNode = current.prev;
			while(walkLeft)
			{
				plane = Plane(walkLeft.data);
				xPosition += X_SPACING;
				zPosition += Z_SPACING;
				TweenMax.to(plane, TIME, {x:xPosition, z:zPosition});
				walkLeft = walkLeft.prev;
			}
 
			xPosition = 0;
			zPosition = 0;
			var walkRight:DListNode = current.next;
			while(walkRight)
			{
				plane = Plane(walkRight.data);
				xPosition -= X_SPACING;
				zPosition -= Z_SPACING;
				TweenMax.to(plane, TIME, {x:xPosition, z:zPosition});
				walkRight = walkRight.next;
			}
		}
	}
}

Tags: , ,

« Previous Entries Next Entries »

 Subscribe to the pv3d.org feed!

Follow me on Twitter

Visit the Papervision3D Forum

Search

Recommended Books

Speaking at FITC Toronto

 

February 2012
M T W T F S S
« May    
 12345
6789101112
13141516171819
20212223242526
272829  

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...