interactive

Dynamic Text on a Plane

Wednesday, July 1st, 2009 | examples | Comments

No, this text is not selectable. You can only click, set focus, and then start typing.


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
package {
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class DynamicText extends BasicView
	{
		private var movieClip:square; 
		private var plane:Plane; 
 
		public function DynamicText()
		{
			camera.focus = 100;
			camera.zoom = 10;
 
 
			movieClip = new square();
			var movieMaterial:MovieMaterial = new MovieMaterial(movieClip);
			movieMaterial.animated = true;
			movieMaterial.precise = true;
			movieMaterial.smooth = true;
			movieMaterial.doubleSided = true;
 
			plane = new Plane(movieMaterial);
 
			scene.addChild(plane);
 
			startRendering();
 
			viewport.addEventListener(MouseEvent.CLICK, viewport_clickHandler);
		}
 
		protected function viewport_clickHandler(event:MouseEvent):void
		{
			stage.focus = movieClip.myTextField;
		} 
 
		override protected function onRenderTick(event:Event=null):void
		{
			super.onRenderTick(event);
			plane.rotationY++;
		}
	}
}

Tags:

How to click on stuff in Papervision3D – Viewport, ViewportLayers, InteractiveScene3DEvent, Mouse3D, and MovieMaterial Buttons

Saturday, June 13th, 2009 | tutorials, videos | Comments

I’ve been super busy the past couple months and tomorrow I’m heading to Alaska to take a week-long vacation. I thought to myself, “this isn’t fair to my readers, I haven’t provided any quality original content on pv3d.org in a long time.” So, I took a couple hours tonight to answer pretty much every question on interacting with stuff in Papervision3D in the following five videos. That’s right, five videos explaining the ins and outs of working with interactivity events in Papervision3D. Just don’t say I never did anything nice for you :)

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Watch Part 1 on the Viewport

Download part 1 source

Watch Part 2 on ViewportLayers

Download part 2 source

Watch Part 3 on InteractiveScene3DEvent

Download part 3 source

Watch Part 4 on Mouse3D

Download part 4 source

Watch Part 5 on Buttons on MovieMaterials

Download part 5 source

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: , ,

Search

Recommended Books

Speaking at FITC Toronto

 

March 2010
M T W T F S S
« Jan    
1234567
891011121314
15161718192021
22232425262728
293031  

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 ...