The main purpose of this gallery is to show a big amount of images in a small space by using a liquid layout that will change according to the number of images visualized. Once you click on an image you can browse using your keyboard arrows.

The images are retrieved from an XML file that contains, besides the images urls, also the image captions and the gallery titles.

This version includes a slider that can let the user to set dynamically the gallery height.
see this experiment

Description

After coming back from Brighton I was full of ideas and quite influenced by Markus Weskamp’s speech “Visualizing time” in which he talked about visualizing big amount of informations such as the Tree of life or huge advertising companies clients projects.

I wanted to apply the concept Markus was showing us to make a gallery image. According to the first law of simplicity my first thought was to apply a stripe mask to all the images and then show the whole image once clicked. However I experienced some difficulties in retrieving the height of a mask: as the images were dynamically downloading I couldn’t set on runtime a particular height. So I went for scaling the image instead of masking it and in the end I found myself storing heights of stripes in variables. This same process I’m using for scaling could easily be used for masking as well in the end, but I think scaling works quite well and more consistent to my original idea.

Usage

Roll over the images to see a click preview. Once you click on them you can browse using keyboard arrows.

To Do

• adding image captions and gallery title visualization
• slide stripe horizontally so the image is always on screen

Code

The gallery is composed by three main classes (StripeGallery.as, Stripe.as, Image.as) and an auxiliary one for the XML parsing. The alignment of the stripes to the top during the ‘browsing mode’ is held in the main fla code.

The gallery is composed by stripes that represent the main nodes of the XML. Each stripes contains a set of image. When an image is downloaded, its sibling will be downloaded. Also once the first image is downloaded, the next stripe starts loading in order to show as soon as possible the quantity of the sub-gallery present. I found out that Flash has some problems when downloading more than 3 images at the same time.

I used collision detection between the images to keep them next to each other.

The structure of this code is then applied to keep together the gallery stripes as well. Here’s an example code of this structure.

for (var i=0; i<images.length; i++) {
var a:Sprite=images[i];
var b:Sprite;
if (i<images.length-1) {
b=images[i+1]; // if the images are not all loaded yet define the var b
}
if (b!=null) {
//keep its position next to the previous image in the array and viceversa
 
if (b.x!=a.x+a.width) {
b.x= (a.x+a.width);
}
if (a.x+a.width!=b.x) {
a.x=b.x-a.width;
}
}

No source code available yet for download.