Typically carousels are created by assembling single planes in a cylindrical configuration stacking rows as needed. But there is another way to do this. You can create a single primitive which constructs all the planes internally. Handling a single primitive requires fewer calculations to manipulate it than handling multiple planes. And you can do more with it.
To see a demo click on the image below. Try clicking on the images they are interactive.
Single Primitive Carousel
Just as in the case of the cube primitive, the carousel primitive can be manipulated as a single primitive. And the number row and column numbers are adjustable.
YouTube How to Video:
How it works
The carousel constructor function shown below gives you the ability to control the horizontal and vertical gap size, number of rows and columns, height and width, segments, and material list.
public function Carousel( materials:MaterialsList, myGap:Number=0, myHGap:Number=0 ,horizNum:int=1, vertiNum:int=1, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0, initObject:Object=null )
The carousel primitive was created by duplicating the Clickable Button Panel Primitive found in this blog and renaming the class and constructor function to Carousel. Then after adding the appropriate variables, the simple equation for a cylinder was used to place the primitives according to the angle and number created by the horizNum (number of images in a circular row).
var x :Number = myX*Math.cos(myThetaIs)+myZ*Math.sin(myThetaIs);
var z :Number = -myX*Math.sin(myThetaIs)+myZ*Math.cos(myThetaIs);
var y :Number = iy * iH -(textureY+myHGap/2)*(vertiNum/2-n);
var vertex:Vertex3D = new Vertex3D();
vertex[ “x” ] = x;
vertex[ “y” ] = y;
vertex[ “z” ] = z*10;
As the different x, y, and z values are created they are put into the vertex array just as was done in creating the clickable button panel. But notice the term vertex[ “z” ] = z*10; which has a multiplier of 10. This is an issue that must be investigated in the future.
The next issue was changing how the material was named. For the clickable button panel we used a matrix numbering scheme for the material name. We change this scheme when dealing with the carousel primitive to produce a sequential numbering system. This made the images easier to work with and the code is shown below.
var myNumber:Number= horizNum*n+m;
var myMaterial:String = “myMat”+myNumber;
Since the carousel contains many images, we do not want to have to list them individually for the material list as we did in the Button Panel case. So we put the image address in a myBitmaps array and iterate through them as shown below to create the materials list.
var materialsList:MaterialsList = new MaterialsList();
for (var i:int = 0; i<myBitmaps.length; i++)
var myBitmapFileMaterial:BitmapFileMaterial = new BitmapFileMaterial(myBitmaps[i]);
myBitmapFileMaterial.doubleSided = true;
myBitmapFileMaterial.interactive = true;
for (var ik:int = 0; ik<myBitmaps.length; ik++)
materialsList.addMaterial(myBitmapFileMaterials[ik], “myMat” + ik);
This is a real time/code saver and can be used to bring in items from an external data base or xml page using HTTP Services.
The Big Problem
In Papervision, pixel measurements lose their meaning due to the 1/z parameter of perspective and as result you end up doing some adjusting. The is true for the carousel. If you change the gap or height components of the Carousel function you must readjust the following parameters to get the carousel to go to the correct image when clicking on it.
The myLift parameter adjust the place where you enter the image close up and the myHeight parameter adjusts the individual column spacings entry point. Once you set the parameters above you can change row and column numbers without further adjustments. But if you change vertical gap or image height you need to readjust the parameters above.
There is a nonlinear equation that governs this behavior, but that is the subject of another post…
To see the full Carousel class click the more button below.
Read the rest of this entry »