Grid

Sunday, February 1st, 2009 | examples


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

  • kimpai
    Why isnt possible create the grid:Array2 with normal variables in the middle of the code, and not just with the private static const ???
  • guinetik
    I was wondering a way to generate the number of rows and columns dynamically based on the number of items i want to create. Example, i want to create a 12 item grid, so it is 4 rows and 3 columns or 3 columns and 4 rows.
    Still trying it, as soon as i have the answer, i'll post it here
  • gui
    I was wondering a way to generate the number of rows and columns dynamically based on the number of items i want to create. Example, i want to create a 12 item grid, so it is 4 rows and 3 columns or 3 columns and 4 rows.
    Still trying it, as soon as i have the answer, i'll post it here
  • Hello,

    Very fast answer, I didn“t put the code, because is the same that your example, only change that line. But here is the link

    grid.as

    with the code, I appreciate your help.

    Thank you.
  • Hello this website is awesome.

    I'm new in papervision 3d and as3. But i have expertice in java, and actionscript 2, For this reason object and classes syntaxis is easy to understand and the basics for as3 in flash to.

    I was playing with this example, and i have the next question.

    I did a change in the line:

    TweenMax.to(selectedPlane, 1, {scale:2, rotationY:180});

    For
    TweenLite.to(selectedPlane, 1, {scale:5,rotationY:180, x:100,y:100});

    The reason is, TweenLite is only 2k library. Also i want to open the plane in the same position each time. The problem is, when i clicked the plane, works fine, but for each click, the render process doesn't work well. The other planes disapear or change the original shape.

    I want to know wat is the problem?

    Thank you,
    I apreciates to much the work done here.
  • John Lindquist
    I really have no idea without seeing the code for you project.
  • Bryan Roman
    Ugo, I had the same question. The polygonal site has some explanation behind the package as well as a link to the documentation. I'm trying to wrap my head around it...

    http://lab.polygonal.de/ds/
    http://www.polygonal.de/ds/api/
  • Ugo
    Thanks for this. Can you suggest any other tutorials or reading material to help me understand the polygonal data structure library? It all seems like dark magic at the moment.
  • hello!!!
    hey first of all let me tell you that this plugin is awesome....
    i have a question ..... how did you make this pop up link to an swf file!!!!! im trying to make it a lot time ago!!!
    thanks
blog comments powered by Disqus

Search

Recommended Books

Speaking at FITC Toronto

 

February 2009
M T W T F S S
« Jan   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

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