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 in an XML file. Support of 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.

View 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.

All of the photos reside in an images directory and is 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="Snapshots from London"></albumCaption> 
 <image img="images/newyorkcanada_116.jpg" thmb="thumbnails/newyorkcanada_116.jpg" type="JPG"  dt="November 2009"  thumbw="160" thumbh="160" resolution="683 x 1024">
 </image>    
<image img="images/newyorkcanada_150.jpg" thmb="thumbnails/newyorkcanada_150.jpg" type="JPG"  dt="November 2009"  thumbw="160" thumbh="160" resolution="1024 x 683"></image>    
<image img="images/newyorkcanada_172.jpg" thmb="thumbnails/newyorkcanada_172.jpg" type="JPG"  dt="November 2009"  thumbw="160" thumbh="160" resolution="1024 x 683"> </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 thumbNail object controls the image display and mouse click event.

Customize the display of your RSS feed using HTML and PHP. Starting with PHP version 5, SimpleXML loads, and parses an XML document. SimpleXML makes it easier to get access to xml content. Take a look at this simple example.

View a Demo: Yahoo News Feed

PHP provides a nice solution for inserting RSS feeds into an HTML document. Unlike previous XML implementations, SimpleXML uses the XML tag names as variables. If you need a refresher on the RSS 2.0 specification take a look at this site.

Here is the PHP code:

<?php
if (isset($_GET['category']))
  $rssfeed_category = (get_magic_quotes_gpc()) ? $_GET['category'] : addslashes($_GET['category']);
else
  $rssfeed_category = 'http://rss.news.yahoo.com/rss/topstories';
  libxml_use_internal_errors(true);
 
  if ($rssfeed = simplexml_load_file($rssfeed_category)) {
     foreach ($rssfeed->channel as $channel) {
        echo '<h2><a href="' . $channel->link . '">' .
				$channel->title . '</a></h2>';
        echo '<p>' . $channel->description . '</p>';
 
        foreach ($channel->item as $item) {
           echo '<div class="rssItem">';
           echo '<ul>';
           echo '<li><a href="' . $item->link . '" class="rssLink">';
           echo $item->title . '</a><br />';
           echo $item->description . '</li>';
           echo '</ul>';
           echo '</div>';
        }
   }
}
else echo 'RSS feed could not be read. ' . $rssfeed_category . '<br />';
?>

Tips to making this work:

• Reserved HTML characters such as ampersand (&) and greater than(>) can cause problems if they appear as ordinary text in an XML document. The browser will mistake these reserved characters for markup. Use the php function htmlentities to convert characters such as & to & if this becomes a problem.
• Many RSS feeds contain HTML markup for formatting purposes. In this case, htmlentities is NOT recommened. Here’s an example of using htmlentities with description text containing HTML markup.
• Character encoding can also lead to display problems. To ensure proper display of special characters, pay attention to the character encoding. UTF-8 is the default character encoding for XML. ISO-8859-1 is more commonly used in HMTL. If you use UTF-8 encoding in the HTML document’s head section, the special characters should print correctly.

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• A file access warning from simplexml_load_file() may indicate a server warning. Check the php.ini configuration option allow_url_fopen = On. This will give the simplexml_load_file() function the ability to open the remote rss file.

RELATED POSTS:

• PHP htmlentities
• RSS 2.0 Specification

Sarissa was developed to allow cross-browser support for manipulating XML files.  This is important for web pages accessing XML with JavaScript.  Firefox, IE and Safari implementations of JavaScript each handle XML files differently. Sarissa is a set of downloadable JavaScript files that standardize XML manipulation.

PHOTO GALLERY USING XML

Several popular web based photo applications (Picasa and JAlbum) have export options that can generate XML files along with photo images to create a photo album in a web page. I have created a simple implementation that uses a similar approach. Sarissa methods parse the file: sherrypicsmenu.xml for image files and thumbnail files. HTML code is inserted into the web page to display a thumbnail bar, and detail photo images.
View the Simple XML Photo Gallery

Here’s the XML file:

<?xml version="1.0" encoding="iso-8859-1"?>
<photogallery>
	<photo target="buttonarmsxdcat.jpg" image="armsxdcat.jpg"/>
	<photo target="buttoncatbasket.jpg" image="catbasket.jpg" />
	<photo target="buttondogsniff.jpg" image="dogsniff.jpg" />
	<photo target="buttonyawndog.jpg" image="yawndog.jpg" />
	<photo target="buttondbeagle.jpg" image="dbeagle.jpg"/>
</photogallery>

When the HTML page is loading, sherrypicsmenu.xml loads and is parsed. Each photo tag from the xml file becomes a thumbnail with a link to the full sized image.

Here’s the JavaScript:

<script type="text/javascript">
function initMenu(xmlFile) {
	var xml = Sarissa.getDomDocument();
	xml.async = false;
	xml.load(xmlFile);
 
	var nodes = xml.documentElement.childNodes;
	var output = '';
 
	for (var i = 0; i <= nodes.length - 1; i++) {
		if (nodes.item(i).nodeType != Node.ELEMENT_NODE) continue;
 
		output += '<div id="photobutton">';
		output += '<a onclick="showpicture(\'../images/' + nodes.item(i).getAttribute('image') + '\')">' +
			'<img src="../images/' + nodes.item(i).getAttribute('target') + '" />' + '</a><br />';
		output += '</div>';
 
	}
	document.getElementById('photomenu').innerHTML = output;
    showpicture("../images/catbasket.jpg");
}
 
window.onload = function() {
	initMenu('sherrypicsmenu.xml');
};
</script>

RELATED POSTS:

• Download Sarissa
• Export a Picasa Photo Album