Papervision3D Carousel Tutorials

Hello everyone, it's been a while that was missing on the blog ... due to heavy traffic all the available RAM has been busy! So here we are here with a new series of Papervision3D tutorial, I hope it will be useful. Have you ever wondered how to make a carousel 3d flash Pv3d for your accomplishments? Here's how!

Generally there are two types of 3d carousel, an easier to implement the plans which are always directed outward, the other slightly more complicated where our properties are always facing the camera (in this case more problems arise in when you rotate the carousel).

Demo Pv3d XML Carousel

At this link you can view a demo of the second type with other features added:

Demo Pv3d XML Carousel

In this version, designed as a 3D display of products, I loaded the data from an external XML, I added several functions for the rotation (either by clicking the objects that scroll arrows), and blur effects sull'alpha a Viewer photos instantiated when you click the central object and the account of the positions of play in the viewer to rotate the carousel to return to this view.

How to complete your application is a matter of needs.

Let's start with your first instantiate Pv3d Carousel.

I prepared this spring with an array of six elements MovieClip was not necessary because even simple ColorMaterial were good, but perhaps those with less experience can use the source MovieClip going to replace with other more easily customized.

Main

First we create our own scene Pv3d will use both examples instantiates a BasicView and creating an array with all our gaming floors 3d attack the stage. I defined a variable "myRadius" which will be our range exactly, as we shall see later use. I also produced a variable angle inside the loop for each item that I return a corresponding value in degrees. The first will be 0, the second 60, third 120, and so on ...

import org.papervision3d.view.BasicView; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.materials.MovieAssetMaterial; public class Main extends BasicView { private var images:Array=new Array ("mc_one","mc_two","mc_three","mc_four","mc_five","mc_six"); private static const myRadius:Number=750; private var plane:Plane; public function Main():void { stage.frameRate=30; camera.focus=8; camera.y=120; for (var i:int=0; i< images.length; i++) { var mat:MovieAssetMaterial=new MovieAssetMaterial(images[i] , true, true, true); mat.doubleSided=true; mat.smooth=true; plane=new Plane(mat,200,200,2); var angles:Number=360*i/images.length; // ... our code scene.addChild(plane); } startRendering(); } } } 

The only thing left to do at this point is going to position our elements.

Simple Pv3d carousel

To instantiate our first carousel we say that Y is equal to its rotation angle corresponding number. Made this move for our part not just do nothing but exploit the function (native PV3d) moveForward () that moves the element of our value range forward.

Climbing plans on their X carryover tops in the front.

 plane.rotationY=angles; plane.moveForward(myRadius); plane.scaleX=-1; 

Simple Carousel demo

Advanced Pv3d carousel

In this other example is not going to work on rotation, because we keep our frontal planes toward the camera (I prefer this to the versatility of effects that can be made ...). We just have to get X and Z. To do this we use simple trigonometry calculations. I invite you to look at the Math class that contains methods and constants that represent mathematical functions and values common to the property since that calculates and returns the sine of the angle specified in radians and so that calculates and returns the cosine of 'specified angle in radians.
The formula used is the same.

 plane.x=myRadius*Math.sin(angles*Math.PI/180); plane.z=myRadius*Math.cos(angles*Math.PI/180); 

Advanced Carousel Demo

Conclusion

To move elements of the carousel can proceed in several ways.
One solution might be to replace the items to our event onRenderTick cycling within the array to retrieve the elements themselves then applying the formulas described.
Another solution as in the beginning of the tutorial I showed you where to go instead to move for convenience only one container object returning to the rotation plans facing the camera in a complementary manner.

Downloads

Download Sources