We have created several 3D galleries in AS3 that use 3D methods available in Flash Player 10 and they are all very popular. Among them: 3D Spherical Gallery in Flash CS4 and XML-Driven 3D Spinning Phot Gallery and Menu in Flash CS4. Here is the most spectacular of our galleries yet: a 3D cylindrical gallery fully customizable via a simple XML file. Click the image to open the gallery in a new window.
- Download the source files: cylin_gallery.zip
How to Customize
The enclosed zip file linked above contains a package of custom AS3 classes including the main class, CylindricalGallery, an XML file, gallery.xml, the cylin_gallery.fla and cylin_gallery.swf files. Also our image files but you will most certainly want to use your own images. All you need to do to insert your images is to edit gallery.xml in a text editor and place it together with your image files in the same directory as your swf and html files.
All the thumbnails and images are loaded by cylin_gallery.swf at runtime based on the information found in the XML file, gallery.xml. The structure of gallery.xml is very simple. In particular, the file contains the names of thumbnails loaded when the movie opens, pictures to be loaded when the user clicks, and their captions. (In our case all image files are located in the same directory on the server as cylin_gallery.swf and the corresponding cylin_gallery.html page. Thus, the names of the image files are their local addresses on the server. (If your image files are not in the same directory, enter the corresponding addresses.) The gallery.xml file looks as follows.
<props radius="305" pxspace="20" picwidth="410" picheight="308" />
<cap>URI Events - Image 1_1</cap>
<cap>URI Events - Image 1_2</cap>
<cap>URI Events - Image 1_3</cap>
<cap>URI Events - Image 1_4</cap>
Each column tag, 'col', represents one column of the circular cylinder of thumbnails. Each 'tile' tag represents one thumbnail with the subtags representing the location of the thumbnail, the location of the corresponding large image, and the caption.
If you want to have fewer columns (we have 16), delete some of the 'col' blocks. Your columns will be equally spaced around the cylinder. If you want to change the radius of your cylinder, change the value of 'radius' in the 'props' tag. We have 305. Just remember that with radius r, the perimeter of your cylinder is 2*r*Pi=6.28*r. Make sure that the perimeter accomodates your thumbnails based on their number per row and width.
The 'picwidth', 'picheight' attributes within 'props' tag represent the dimension of large images being loaded and they are used for positiong of elements of your instance of gallery. Your images do not have to be exactly of the same size, but they should be close in size. The gallery looks best if the height of large images is approximately the same as the height of the cylinder. You can, however, change the number of rows in your cylinder by adding or deleting one 'tile' tag from within each 'col' tag. If you delete one row, for example, adjust pxspace to 40 for better appearance. 'pxspace' is the vertical space, in pixels, between thumbnails in each column.
The value of 'radius' should be large enough to accomodate your thumbnails but then the width of your Stage should be slightly larger then your radius. (More precisely, stageWidth>radius*1.0411.) Of course, you would want the width of the Stage to be at least twice the radius, so you can see the whole gallery.
The CylindricalGallery Class
The code on the MainTimeline of cylin_gallery.fla looks as follows. ('700' is the width of our Stage. In Flash CS4, the width is set in the properties panel.)
var gallery:CylindricalGallery=new CylindricalGallery("gallery.xml",700);
We import the folder of the custom AS3 classes, create an instance of CylindricalGallery, and position our gallery on the Stage.
The CylindricalGallery class extends Sprtite. Its constructor, evoked with the keyword 'new', takes four parameters:
The first parameter represents an XML file structured like our 'gallery.xml'. The second parameter is the width of your Stage (it is set by default to 700 but remember to enter the value correponding to your Stage). The next optional parameter determines the color of text for captions, instructions, etc.. The last optional parameter is the color of the glow around a thumbnail as the user mouses over it as well as the color of text in the loading info box.
Each instance of CylindricalGallery has its own PerspectiveProjection object in order to keep the perspective projection center in the middle of the gallery. It turns out that the focalLength of this custom PerspectiveProjection object is calculated based on the width of the Stage on which the instance resides. (Not the Stage's perspective projection settings; just its width.) That is why your need to pass your Stage's width to the constructor of CylindricalGallery. We are prepering a separate How-To about this counterintuitive behavior of the custom perspective projection object.
Enjoy the gallery!