google ebanulso na otlichnenko


Tag Archive for '3D Carousel'

A Simple Papervision Carousel

Published
by
Charlie
on December 24, 2009
in 3D Carousel, AS3, Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials
. 6 Comments

Papervision 3D Carousel

download-source

This week I set out to create a Papervision Carousel in it's simplest form. At the heart of this carousel is a simple "for" loop / math which places the items in a circle in 3D space

PLAIN TEXT
Actionscript:
  1. for (var i:int = 0; i <planes.length; i++)
  2. {
  3.     var angle:Number    = Math.PI * 2 / numItems * i;
  4.     var plane:Plane     = planes[i];
  5.     plane.x             = Math.cos(angle) * radius;
  6.     plane.z             = Math.sin(angle) * radius;
  7.     plane.rotationY     = -360 / numItems * i - 90;
  8. }

Then to rotate our carousel we apply some similar math

PLAIN TEXT
Actionscript:
  1. var rotateTo:Number = (-360 / numItems) * currentItem + 90;
  2. TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );

This code allows us to just increment currentItem and rotate our carousel. Another easy add-on would be to setup a navigation along the bottom where you could control and change the currentItem to a specific number to rotate right to that section of the carousel.

It's also very easy to customize the number of items and radius of the carousel by adjusting these numbers.

PLAIN TEXT
Actionscript:
  1. protected var numItems:Number = 20;
  2. protected var radius:Number = 500;

Here is the full code.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.DisplayObject;
  4.     import flash.display.MovieClip;
  5.     import flash.display.Sprite;
  6.     import flash.events.Event;
  7.     import flash.events.MouseEvent;
  8.     import gs.easing.Quint;
  9.     import gs.TweenLite;
  10.     import org.papervision3d.materials.BitmapFileMaterial;
  11.     import org.papervision3d.objects.DisplayObject3D;
  12.     import org.papervision3d.objects.primitives.Plane;
  13.     import org.papervision3d.view.BasicView;
  14.    
  15.     /**
  16.      * ...
  17.      * @author Charlie Schulze, charlie[at]woveninteractive[dot]com
  18.      */
  19.    
  20.     public class Main extends BasicView
  21.     {
  22.         protected var planes:Array = [];
  23.         protected var numItems:Number = 20;
  24.         protected var radius:Number = 500;
  25.         protected var currentItem:Number = 0;
  26.        
  27.         protected var mat:BitmapFileMaterial;
  28.         protected var planesHolder:DisplayObject3D;
  29.         protected var rightBtn:Sprite;
  30.         protected var leftBtn:Sprite;
  31.        
  32.         public function Main():void
  33.         {
  34.             super();
  35.             init();
  36.         }
  37.         protected function init():void
  38.         {
  39.             createChildren();
  40.             createButtons();
  41.             commitProperties();
  42.             startRendering();
  43.         }
  44.         protected function createChildren():void
  45.         {
  46.            
  47.             planesHolder = new DisplayObject3D();
  48.            
  49.             //Create Material
  50.             mat             = new BitmapFileMaterial("images/queen.gif");
  51.             mat.smooth   = true;
  52.             mat.doubleSided = true;
  53.            
  54.             for (var i:int = 0; i <numItems; i++)
  55.             {
  56.                 var plane:Plane = new Plane(mat, 150, 234);
  57.                 planes.push(plane);
  58.                
  59.                 //Add plane to the scene
  60.                 planesHolder.addChild(plane);
  61.             }
  62.             scene.addChild(planesHolder);
  63.         }
  64.        
  65.         protected function commitProperties():void
  66.         {
  67.             //Set properties of our planes
  68.             for (var i:int = 0; i <planes.length; i++)
  69.             {
  70.                 var angle:Number    = Math.PI * 2 / numItems * i;
  71.                 var plane:Plane     = planes[i];
  72.                 plane.x             = Math.cos(angle) * radius;
  73.                 plane.z             = Math.sin(angle) * radius;
  74.                 plane.rotationY     = -360 / numItems * i - 90;
  75.             }
  76.            
  77.             //Adjust camera
  78.             camera.y = 200;
  79.            
  80.             //Rotate once
  81.             rotate();
  82.         }
  83.  
  84.         //Rotates the carousel
  85.         protected function rotate():void
  86.         {
  87.             var rotateTo:Number = (-360 / numItems) * currentItem + 90;
  88.             TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
  89.         }
  90.        
  91.         /*
  92.          * Everything below this point is just for creating the buttons and
  93.          * setting button events for controlling the carousel.
  94.          */
  95.  
  96.         protected function createButtons():void
  97.         {
  98.             //Create Buttons
  99.             rightBtn = createButton();
  100.             leftBtn = createButton();
  101.                
  102.             addChild(leftBtn);
  103.             addChild(rightBtn);
  104.            
  105.             //Add button listeners
  106.             rightBtn.buttonMode = true;
  107.             leftBtn.buttonMode = true;
  108.             rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  109.             leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
  110.                        
  111.             //Place buttons on stage
  112.             rightBtn.x    = stage.stageWidth - 120;
  113.             leftBtn.x       = 100;
  114.             rightBtn.y    =  stage.stageHeight / 2;
  115.             leftBtn.y       =  (stage.stageHeight / 2) + 20;
  116.             leftBtn.rotation    = 180;
  117.         }
  118.        
  119.         //Button actions
  120.         protected function buttonClick(evt:MouseEvent):void
  121.         {
  122.             switch (evt.target)
  123.             {
  124.                 case rightBtn:
  125.                 currentItem --;
  126.                 break;
  127.                
  128.                 case leftBtn:
  129.                 currentItem ++;
  130.                 break;
  131.             }
  132.             rotate();
  133.         }
  134.        
  135.         //Creates a simple arrow shape / returns the sprite
  136.         protected function createButton():Sprite
  137.         {
  138.             var btn:Sprite = new Sprite();
  139.            
  140.             btn.graphics.beginFill(0x333333);
  141.             btn.graphics.moveTo(0, 0);
  142.             btn.graphics.lineTo(0, 20);
  143.             btn.graphics.lineTo(10, 10);
  144.             btn.graphics.lineTo(0, 0);
  145.             btn.graphics.endFill();
  146.             return btn;
  147.         }
  148.     }
  149. }

Feel free to post links to ways you expand upon this file.

download-source

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post


Follow papervision2 on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed