The Gallery and Comments

We present an original photo gallery with a bounce. The fun feature of this gallery lies in the way the thumbnails transition to a larger image: the image is loaded into pieces onto the thumbnail rectangles, which then 'snap' together with a tween to form the larger image. The gallery is easily customizable via an XML file. We include several custom AS3 classes that make bulding XML-driven 2D and 3D galleries easy. Click on the screen shot below or on this link to open the gallery in a new window:

Download

  • Download all source files and image files corresponding to the gallery: tweengal.zip

About the code

The code for this gallery relies heavily on our reusable classes from our previous gallery examples. In particular, we are using the GalleryLoader class which we explain in detail at 3D Revolving Rings: A Photo Gallery in AS3 Flash CS4, along with the same type of XML file to store gallery information. See our comments at the 3D Revolving Rings for more detailed information on these classes and how the XML file is constructed.

When a thumbnail is clicked, several things happen. First the appropriate image is loaded. Then the tiles are painted with the appropriate portion of the large image bitmap, using the beginBitmapFill() method. However, the alpha of these image pieces is set to zero, so the image is not visible yet. Finally, the tiles snap together to form the larger image, and while the tiles are moving together the alpha of the image increases to 100% so the image is viewable upon collapse.

The tween which causes the tiles to snap together (or apart) is accomplished with a tween trick we have used before. We create an auxiliary object, 'paramObj', with a property 't'. We use an instance of the Tween class to tween the property 't'; that is, to change 't' over time between two given values. On each frame, the position of each of the tiles depends on the value of this one parameter. This same parameter is used to control the alpha of the large image and other portions of the user interface.

Customizing

You can easily use your own images simply by editing the gallery.xml file.

<gallery>

<tile>

<thumb>YellowstonePics/Image1_thumbnail.jpg</thumb>

<pic>YellowstonePics/Image1.jpg</pic>

<cap>Yellowstone - Image 1</cap>

</tile>

<tile>

<thumb>YellowstonePics/Image2_thumbnail.jpg</thumb>

<pic>YellowstonePics/Image2.jpg</pic>

<cap>Yellowstone - Image 2</cap>

</tile>

...........................

</gallery>

Each 'tile' tag corresponds to one image. It contains the local address on the server (relative to your gallery's swf and html files) to the thumbnail ('thumb' tag) and to the large image ('pic' tag). The 'cap' tag contains the caption for the image. In our case, all small and large images are contained in the YellowstonePics subdirectory on the server of the directory in which swf and html files of our gallery are located.

Within the initApp() function in the main fla file, you will find a variable named 'divisions'. This variable sets how many thumbnails will form a row or a column. We have set this variable to 4 in our example here, resulting in 4*4 = 16 thumbnails per page. You can easily change this to a different number and the layout will be created automatically. For example, setting divisions to equal 5 will result in 25 smaller thumbnails per page. You may also wish to adjustthe 'gap' parameter to change how far apart the thumbnails will be spaced.

The photos of Yellowstone Park in our gallery were taken by Dan Gries.

Our Other Galleries

You may want to take a look at some other of our photo galleries:

Back to Advanced Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.