December 8, 2009

Build a Flash Photo Gallery. Step 1: Read XML file in Flash

Filed under: Flash — admin @ 12:37 pm

Want to create a photo album for your website? This tutorial uses ActionScript to create a Flash photo album. The photos are stored externally and neatly organized using XML. Support for XML is one nice feature of ActionScript. No need to use DOM methods to traverse the XML file. Directly access XML content through tag names and attributes.

This tutorial describes how to use ActionScript to read an XML file and create thumbnails. SimplePhotoBox is a Flash application that reads XML and image files exported from Picasa and displays a professional looking Photo Gallery and Slide Show.

Demo of the SimplePhotoBox Gallery

SimplePhotoBox parses the photos.xml file: each image tag contains the location of an image file and a 250×250 thumbnail file. The Flash movieclip parses photos.xml, then reads each thumbnail and displays the thumbnail on screen.

SimplePhotoBox consists of 4 basic parts:

  1. FlashPhotoGallery – the movie clip that is a wrapper for the application
  2. ThumbBase and ThumbScroll – the scrollable thumbnail display area
  3. PhotoThumb1…n – individual, clickable thumbnail images of each photo.
  4. PhotoDetail – shows a single photo covering the display area.

FlashPhotoGalleryGraph

All of the photos reside in an images directory and are organized in the file photos.xml. Here’s what the photos.xml file looks like:

<?xml version="1.0" encoding="UTF-8" ?>
<album>
<layout flag="0"></layout>
<albumCaption title="Big Sur"></albumCaption> <image title="big_sur_144.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_144.jpg" thmb="thumbnails/big_sur_144.jpg" downloadimg="images/big_sur_144.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description>big_sur_144.jpg</description>
</image>    
<image title="big_sur_138.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_138.jpg" thmb="thumbnails/big_sur_138.jpg" downloadimg="images/big_sur_138.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description> big_sur_138.jpg</description>
</image>    
<image title="big_sur_141.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_141.jpg" thmb="thumbnails/big_sur_141.jpg" downloadimg="images/big_sur_141.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description>big_sur_141.jpg</description>
</image>    
<image title="big_sur_182.jpg / Point Lobos, Andrew Molera, Julia Pfeiffer" img="images/big_sur_182.jpg" thmb="thumbnails/big_sur_182.jpg" downloadimg="images/big_sur_182.jpg" size="not available..." type="JPG"  dt="April 2010"  thumbw="80" thumbh="80" tags="">
<description> big_sur_182.jpg</description>
</image>    
</album>

1. Open the xml file:

URLLoader loads the XML file into this container class . Actionscript restriction: load files must be from the same domain as the flash application (SWF). The event handler onDataHandler is set to trigger when loading is complete.

public class FlashPhotoGallery extends MovieClip 
{ 
//***************************
// HTTP: 
protected var loaderURLLoader; 
protected var photosXML :XML; 
protected var photosPath :String = "photos.xml"; 
protected var thumbBase :ThumbBase; 
protected var thumbScroll :ThumbScroll; 
protected var thumbs :Array = new Array(); 
protected var photoDetail : PhotoDetail; 
public function FlashPhotoGallery() 
{ 
   // Load data! 
   loader = new URLLoader(); 
   loader.load(new URLRequest(photosPath)); 
   loader.addEventListener(Event.COMPLETE, onDataHandler); 
}

2. Create the Thumbnails:

The function onDataHandler() is triggered when photos.xml has been loaded. Next step is to create a new XML object to hold the data and create thumbnails.

protected function onDataHandler(event:Event):void 
{ 
   photosXML = new XML(loader.data); 
   thumbsTotal = photosXML.image.length(); 
   galleryTitle.text = photosXML.albumCaption.@title; 
   createThumbs(); 
} 
protected function createThumbs() 
{ 
   // THUMBNAILS (Layout the photo thumbnails) 
   var maxWidth:Number = 0; 
   var maxHeight:Number = 0; 
   var i:uint = 0; 
   for each(var thisImage:XML in photosXML.image ) 
   { 
      var deltaX:Number = i - Math.floor(i / thumbsPerRow) * thumbsPerRow; 
      var deltaY:Number = Math.floor(i / thumbsPerRow); 
      var data:XML = thisImage; 
      thumbs[i] = new PhotoThumbnail(); 
      thumbs[i].setData(i, data);  
      var thumbw:Number = data.@thumbw; 
      var thumbh:Number = data.@thumbh; 
      thumbs[i].x = deltaX *(thumbw + thumbXSpacing);
      thumbs[i].y = deltaY *(thumbh + thumbYSpacing); 
      maxWidth = thumbs[i].x + thumbw+ thumbXSpacing; 
      maxHeight = thumbs[i].y + thumbh+ thumbYSpacing; 
      thumbs[i].addEventListener(MouseEvent.CLICK, thumbClickHandler); 
      thumbScroll.addChild(thumbs[i]); 
      i++; 
   } 
   thumbScroll.maxHeight = maxHeight; 
}

The for each statement loops each image tag using the variable: photosXML.image.. data.@thumbw refers to the image attribute thumbw. The PhotoThumbnail object controls the image display and mouse click event.

Clicking on a thumbnail, expands the photo. Here’s how this is done. Define the event handler for each thumbnail using the call addEventListener (see the createThumbs function above). Next, define the event handler that takes action when the mouse click occurs. Here’s an example of an event handler: 

protected function thumbClickHandler(event:MouseEvent):void
{   			
      startSlideshow();
      displayPicture(event.currentTarget);		
}

View Step 2: Detail View and Slide Show

1 Comment »

  1. [...] Previous Post: Build a Flash Photo Gallery: Step 1 [...]

    Pingback by myXMLProject » Build a Flash Photo Gallery Step 2: Build a Photo Detail View and Slide Show — April 20, 2010 @ 5:39 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress