We present an interesting 3D photo gallery is AS3 and Flash CS4. Rings of two-sided thumbnails revolve in 3D. The gallery is easily customizable via an XML file. We included several custom AS3 classes that make bulding XML-driven 3D galleries easy. Click on the screen shot below to open the gallery in a new window.
- Download all source files and image files corresponding to the gallery: rings.zip
Below, we comment on the XML file and the custom AS3 classes used to create the effect. Take a look at the well-commented source code in the zip package to see the classes in action.
The XML File and the Custom AS3 Classes
In the example presented here, we create three instances of the custom CarouselGallery class corresponding to the three rings. All the information about thumbnails, large images to be loaded as the user clicks on a thumbnail, and image captions, is contained in an external XML file, gallery.xml. The XML file is loaded and proccessed by the custom GalleryLoader class as the movie opens. For simplicity, we put the information about all three CarouselGallery instances, gallery1, gallery2, gallery3, in one XML file. Of course, you can use three separate XML files instead. The structure of gallery.xml is as follows:
<cap>Ring 1, Image 1 Caption</cap>
<cap>Ring 1, Image 2 Caption</cap>
<cap>Ring 3, Image 16 Caption</cap>
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. The GalleryLoader class loads and reads the XML data, loads all the thumbnails whose local addresses in our case are their names (Small2_2.jpg etc.) as the files are in the same directory as the SWF and HTML files corresponding to our movie. Our instance of GalleryLoader, galLoader, stores the BitmapData objects of all the thumbnails in its public property galLoader.bmpDataVec. The latter is a Vector of BitmapData objects. The local addresses of large images are stored in a vector of Strings galLoader.picsVec, captions in galLoader.capsVec. GalleryLoader extends the EventDispatcher class and it broadcasts a number of events, including when the loading is complete.
Our XML file has 48 'tile' tags, so all Vectors stored in galLoader properties have 48 elements. The first 16 of them correspond to gallery1, the next 16 to gallery2, and so on. You can create several instances of CarouselGallery each with a different number of images by easy modification of the Timeline code in rings.fla.
After all the data is extracted from the XML file and all the thumbnails loaded, we create three instances of CarouselGallery by passing BitmapData Vectors to the class's constructor as well as the BitmapData of the back side image. (That image is stored in the Library and linked to AS3.)
CarouselGallery class takes care of revolving the rings and depth-sorting of card-like tiles. The face of each tile with the image thumbnail is a public property of CarouselGallery, so it can be made clickable. We add event listener to a mouse click to each of the thumbnails. On click the large image correponding to each thumbnail is loaded and and a caption displayed. This portion of the code is on the Timeline of rings.fla. CarouselGallery extends the Sprite class, so you can apply rotationX, rotationZ to each instance for more fancy effects.
See comments in rings.fla file and the source code for all custom AS3 classes to see how they work.
The custom classes in the zip package: CarouselGallery, GalleryLoader, CardRotator, ThumbsLoader, and LoadSpinner are very much reusable and can be used with different photo galleries and effects.
For detailed explanations of the CardRotator custom class see our tutorial:
Z-Sorting of a 3D Card and the Projection Center in Flash CS4.
You may want to take a look at some other of our photo galleries: