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
Actionscript:
-
for (var i:int = 0; i <planes.length; i++)
-
{
-
var angle:Number = Math.PI * 2 / numItems * i;
-
var plane:Plane = planes[i];
-
plane.x = Math.cos(angle) * radius;
-
plane.z = Math.sin(angle) * radius;
-
plane.rotationY = -360 / numItems * i - 90;
-
}
Then to rotate our carousel we apply some similar math
Actionscript:
-
var rotateTo:Number = (-360 / numItems) * currentItem + 90;
-
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.
Actionscript:
-
protected var numItems:Number = 20;
-
protected var radius:Number = 500;
Here is the full code.
Actionscript:
-
package
-
{
-
import flash.display.DisplayObject;
-
import flash.display.MovieClip;
-
import flash.display.Sprite;
-
import flash.events.Event;
-
import flash.events.MouseEvent;
-
import gs.easing.Quint;
-
import gs.TweenLite;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.objects.primitives.Plane;
-
import org.papervision3d.view.BasicView;
-
-
/**
-
* ...
-
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
-
*/
-
-
public class Main extends BasicView
-
{
-
protected var planes:Array = [];
-
protected var numItems:Number = 20;
-
protected var radius:Number = 500;
-
protected var currentItem:Number = 0;
-
-
protected var mat:BitmapFileMaterial;
-
protected var planesHolder:DisplayObject3D;
-
protected var rightBtn:Sprite;
-
protected var leftBtn:Sprite;
-
-
public function Main():void
-
{
-
super();
-
init();
-
}
-
protected function init():void
-
{
-
createChildren();
-
createButtons();
-
commitProperties();
-
startRendering();
-
}
-
protected function createChildren():void
-
{
-
-
planesHolder = new DisplayObject3D();
-
-
//Create Material
-
mat = new BitmapFileMaterial("images/queen.gif");
-
mat.smooth = true;
-
mat.doubleSided = true;
-
-
for (var i:int = 0; i <numItems; i++)
-
{
-
var plane:Plane = new Plane(mat, 150, 234);
-
planes.push(plane);
-
-
//Add plane to the scene
-
planesHolder.addChild(plane);
-
}
-
scene.addChild(planesHolder);
-
}
-
-
protected function commitProperties():void
-
{
-
//Set properties of our planes
-
for (var i:int = 0; i <planes.length; i++)
-
{
-
var angle:Number = Math.PI * 2 / numItems * i;
-
var plane:Plane = planes[i];
-
plane.x = Math.cos(angle) * radius;
-
plane.z = Math.sin(angle) * radius;
-
plane.rotationY = -360 / numItems * i - 90;
-
}
-
-
//Adjust camera
-
camera.y = 200;
-
-
//Rotate once
-
rotate();
-
}
-
-
//Rotates the carousel
-
protected function rotate():void
-
{
-
var rotateTo:Number = (-360 / numItems) * currentItem + 90;
-
TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
-
}
-
-
/*
-
* Everything below this point is just for creating the buttons and
-
* setting button events for controlling the carousel.
-
*/
-
-
protected function createButtons():void
-
{
-
//Create Buttons
-
rightBtn = createButton();
-
leftBtn = createButton();
-
-
addChild(leftBtn);
-
addChild(rightBtn);
-
-
//Add button listeners
-
rightBtn.buttonMode = true;
-
leftBtn.buttonMode = true;
-
rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
-
leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
-
-
//Place buttons on stage
-
rightBtn.x = stage.stageWidth - 120;
-
leftBtn.x = 100;
-
rightBtn.y = stage.stageHeight / 2;
-
leftBtn.y = (stage.stageHeight / 2) + 20;
-
leftBtn.rotation = 180;
-
}
-
-
//Button actions
-
protected function buttonClick(evt:MouseEvent):void
-
{
-
switch (evt.target)
-
{
-
case rightBtn:
-
currentItem --;
-
break;
-
-
case leftBtn:
-
currentItem ++;
-
break;
-
}
-
rotate();
-
}
-
-
//Creates a simple arrow shape / returns the sprite
-
protected function createButton():Sprite
-
{
-
var btn:Sprite = new Sprite();
-
-
btn.graphics.beginFill(0x333333);
-
btn.graphics.moveTo(0, 0);
-
btn.graphics.lineTo(0, 20);
-
btn.graphics.lineTo(10, 10);
-
btn.graphics.lineTo(0, 0);
-
btn.graphics.endFill();
-
return btn;
-
}
-
}
-
}
Feel free to post links to ways you expand upon this file.
