Carousel with Forward Facing Planes

Monday, February 16th, 2009 | examples, snippets

Yes, it’s another Carousel post, but people just seem to keep on asking for them.

Instead of going through all the trig, I just used the handy Casa Lib for the circle management. There are some other great utility classes with Casa, so make sure to check it out.


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
package {
	import flash.events.Event;
	import flash.geom.Point;
 
	import org.casalib.math.geom.Ellipse;
	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 CarouselWithForwardPlanes extends BasicView
	{
		private static const NUM_PLANES:int = 10;
		private static const RADIUS:Number = 600;
		private var diameter:Number = RADIUS * 2;
		//defines the carousel (thanks to CASA)
		private var circle:Ellipse = new Ellipse(-RADIUS, -RADIUS, diameter, diameter); 
		private var planes:Array = [];
 
		public function CarouselWithForwardPlanes()
		{
			for(var i:int = 0; i < NUM_PLANES; i++)
			{
				var color:Number = Math.random() * 0xffffff;
				var colorMaterial:ColorMaterial = new ColorMaterial(color);
				var plane:Plane = new Plane(colorMaterial, 150, 150);
				//get the x and y (or z) point based on the current index
				var point:Point = circle.getPointOfDegree(360 / NUM_PLANES * i); 
 
				plane.x = point.x;
				plane.z = point.y;
				planes.push(plane);
 
				scene.addChild(plane);
			}
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event = null):void
		{
			var n:int = 0;	
			for each(var plane:Plane in planes)
			{
				var degrees:Number = 360 / NUM_PLANES * n;
				var mouseDegrees:Number = viewport.containerSprite.mouseX / 2;
				var totalDegrees:Number = degrees + mouseDegrees;
 
				var point:Point = circle.getPointOfDegree(totalDegrees);
				plane.x = point.x;
				plane.z = point.y;
 
				n++; 
			}			
 
			super.onRenderTick(event);			
		}
	}
}
  • Søren
    How do one add support for clickable planes, so you can rotate to the selected plane?!?
  • keyriest
    This is great - solving major issue for me. One thing I can't seem to successfully manipulate is the camera rotation (though rotating the carousel would work just as well). I'd like to change the perspective such that it the planes at the rear of the carousel are visible, slightly above the front most plane. Any thoughts? Much obliged, and hope things on the economic front are improving (for both you and by extension, your wife).

    cheers.
  • Ben
    Yes I would also like to know how easy it would be to ass some next/previous buttons to this script. I tried out Lee Brimelow's carousel but it looks a bit outdated. Any ideas?
  • danee
    Hi, what if I wanted to gently ease around on the animation instead of moving so precisely to the movement of my mouse? Could you give me some insight?
  • Monkey
    Good to hear - wasent having a dig - this is one of the most respected sites on my rss feeder. :0)
  • Alexandre
    Thank you for the example! I was trying to do this based on the previous carousel example, but this one seems more simple!
  • John Lindquist
    Nah, I've got plenty of ideas. I've just been much busier in the past couple weeks than usual and this question seems to keep popping up.
  • Monkey
    Running out of ideas? lol
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 ...