Internal Carousel

Tuesday, February 3rd, 2009 | examples

I’ve seen this effect pop up on a few sites, so I thought I’d make a demo:


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.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;
 
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.BitmapViewport3D;
 
	[SWF(width="900", height="480", backgroundColor="#ffffff", frameRate="60")]
	public class InternalCarousel extends BasicView
	{
		private static const NUMBER_OF_PLANES:int = 20;
 
		private var carousel:DisplayObject3D = new DisplayObject3D();
		private var bitmapViewport:BitmapViewport3D = new BitmapViewport3D(900, 480);
		private const blur:BlurFilter = new BlurFilter(3, 3, 2);
		private const alphaTrans:ColorTransform = new ColorTransform(1, 1, 1, 1, 1, 1, 1, -35);
		private var point:Point = new Point();
 
 
 
		public function InternalCarousel()
		{
			bitmapViewport.fillBeforeRender = false;
			addChild(bitmapViewport);
			camera.z = 1;
			for(var i:int = 0; i < NUMBER_OF_PLANES; i++)
			{
				var randomColor:Number = Math.random() * 0xffffff;
				var colorMaterial:ColorMaterial = new ColorMaterial(randomColor);
				colorMaterial.doubleSided = true;
 
				var plane:Plane = new Plane(colorMaterial, 150, 300);
				plane.rotationY = 360 / NUMBER_OF_PLANES * i;
				plane.moveForward(1000);
				carousel.addChild(plane);
			}
 
			scene.addChild(carousel);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			carousel.rotationY -= viewport.containerSprite.mouseX / 200;
			carousel.rotationZ = viewport.containerSprite.mouseX / 200;
 
			renderer.renderScene(scene, camera, bitmapViewport);
			bitmapViewport.bitmapData.applyFilter(bitmapViewport.bitmapData, bitmapViewport.bitmapData.rect, point, blur);
			bitmapViewport.bitmapData.colorTransform(bitmapViewport.bitmapData.rect, alphaTrans);
		}
	}
}

Tags:

  • Joshua Ben
    I was trying to add a sprite to each of the planes so I could use them as an image placement. Any thoughts to what I am doing wrong?

    var picLoader:Sprite = new Sprite();
    carousel.addChild(picLoader);
    picLoader.graphics.beginFill(0x00FF00, 1);
    picLoader.graphics.drawRect(0,0,180,150);
    picLoader.graphics.endFill();
  • @Alexandre I'd love to have some hints on that too...

    AFAIK, that involves some number-juggling with the world and the relative (carousel) coordinates of each plane that. Way above my head... :)
  • Alexandre
    Nice example! Any hint on how to make all the planes face forward in these types of carousel? I think there is no easy way to do this without changing the way it is built, since we are rotating the whole carousel?
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 ...