Flover Cow – A.K.A. Cover Flow Knockoff

Saturday, January 31st, 2009 | examples, requests

I’ll do a tutorial on this later. For know, download the source and play with the 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
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 FloverCow extends BasicView
	{
		private static const SPACING:Number = 400;
		private static const NUMBER_OF_PLANES:int = 10;
		private static const TIME:Number = .5;
		private static const Z_FOCUS:Number = -500;
		private static const ROTATION_Y:Number = 45;
 
		private var planeList:DLinkedList = new DLinkedList();
 
		public function FloverCow()
		{
			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 * 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;
			TweenMax.to(plane, TIME, {x:xPosition, z:Z_FOCUS, rotationY:0});
 
			var current:DListNode = planeList.nodeOf(plane).node;
 
			var walkLeft:DListNode = current.prev;
			while(walkLeft)
			{
				plane = Plane(walkLeft.data);
				xPosition -= SPACING;
				TweenMax.to(plane, TIME, {x:xPosition, z:0, rotationY:-ROTATION_Y});
				walkLeft = walkLeft.prev;
			}
 
			xPosition = 0;
			var walkRight:DListNode = current.next;
			while(walkRight)
			{
				plane = Plane(walkRight.data);
				xPosition += SPACING;
				TweenMax.to(plane, TIME, {x:xPosition, z:0, rotationY:ROTATION_Y});
				walkRight = walkRight.next;
			}
		}
	}
}

Tags: , ,

  • Gemo
    Author,

    I am using this component along with ReflectionView instead of BasicView. I was able to get reflections (as i xpected) but those planes are not getting rendered in the 3d structure.. Tweenmax settings are not applied to any of the planes.. and my final outcome is Planes with reflections, placed one next to other in 2D...

    Can any one help me out..

    Thanks in Advance :)
  • Gemo
    Hi,

    The working model is a AS3 project.. i just tried the same source(with Libs) in a flex project.. but the component is not getting viewed in the o/p screen.. But the FlowerCow class is getting called :(

    my piece of code




    Help is much appreciated :)
  • hud
    Hi john, i managed to replace the colormaterial with moviematerial and add a navigation menu to the flower cow. the problem is how to make the navigation menu and the flowercow sync together? i've been at it for hours now.

    thanks
  • Kulkoff
    How can I add reflection on each item?

    I try implement the ReflectionView, but result is not good.
  • @Piergiorgio Niero: Thanks for the examples! I'll definitely examine them.
  • @Abel I did something like that some times ago for my 360flex italy session.
    I don't think it's compiling with the last version of pv3d, anyway here's the example http://www.flashfuck.it/360/Pa... and here's the source http://www.flashfuck.it/360/36...

    otherwise there's also doug mccune's version here
    http://dougmccune.com/blog/200... (i think it's still developed in pv3d v1)

    i hope this helps :)
    bye
    pigiuz
  • Nice job. I would be interested in seeing this same example but with a scrollbar added to it, just like with the real cover flow.
blog comments powered by Disqus

Search

Recommended Books

Speaking at FITC Toronto

 

January 2009
M T W T F S S
« Dec   Feb »
 1234
567891011
12131415161718
19202122232425
262728293031  

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