We recently posted a 3D cylindrical photo gallery in which a 3D cylinder of thumbnails is seen from the inside: 3D Cylindrical Photo Gallery in AS3 Flash - Revolves Around You. Here we create a cylindrical gallery in which a cylinder is seen from the outside. The result is visually very different. As the previous gallery, this one also is fully customizable via editing a simple XML file. Click the image to open the gallery in a new window.
- Download the source files: cylin_outer.zip
How to Customize
The enclosed zip file linked above contains a package of custom AS3 classes including the main class, CylindricalGalleryOutside, an XML file, gallery.xml, the cylin_outside.fla and cylin_outside.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_outside.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_outside.swf and the corresponding cylin_outside.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 accommodates 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 large enough so you can see the whole gallery.
The CylindricalGalleryOutside Class
The code on the MainTimeline of cylin_outside.fla looks as follows. ('700' is the width of our Stage. In Flash CS4, the width is set in the properties panel.)
var gallery:CylindricalGalleryOutside=new CylindricalGalleryOutside("gallery.xml",700);
We import the folder of the custom AS3 classes, create an instance of CylindricalGalleryOutside, and position our gallery on the Stage.
The CylindricalGalleryOutside class extends Sprtite. Its constructor, evoked with the keyword 'new', takes five 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. The fourth 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. The last parameter, ob, is the number of pixels your cylinder is moved along the z-axis. The larger the number, the smaller your cylinder will appear.
Each instance of CylindricalGalleryOutside 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 CylindricalGalleryOutside. We are prepering a separate How-To about this counterintuitive behavior of the custom perspective projection object.
The cylin_outer.zip package that you can download from the link above, contains several useful reusable custom AS3 classes: a multiple image loader, a custom preloader, and more.
The nice effect of depth-darkening that you see in this gallery was Dan's idea!
You may want to take a look at some other of our photo galleries: