Constructing the PictureViewer: Adding the Actionscript

Flash 1: The XML player.

The Actionscript we are going to write will travel through the nodes of the XML document and load the picture and text onto the stage. Here is the XML document:

Image 1: The XML code.

The Actionscript:

1. With the Actions layer selected, press the F9 key to open the Actionscript editor.
2. Enter the following code:

_root.createEmptyMovieClip("mcImageHolder",1);
mcImageHolder._x = 10;
mcImageHolder._y = 40;

var allPhotos:XMLNode = new XMLNode();
var currentPhoto:XMLNode = new XMLNode();

var photosXML:XML = new XML();
photosXML.ignoreWhite = true; //don't look at empty space in the XML file
photosXML.onLoad = function(ok:Boolean)
{
if(ok == true)
{
allPhotos = photosXML.firstChild;
currentPhoto = allPhotos.firstChild;
displayPhoto(currentPhoto);
}
else
{
txtCaption.text = "Error loading XML.";
}
}
photosXML.load("photos.xml");

displayPhoto = function(photoData:XMLNode)
{
//display caption
var captionNode:XMLNode = new XMLNode();
var captionTextNode:XMLNode = new XMLNode();
captionNode = photoData.firstChild;
captionTextNode = captionNode.firstChild;
txtCaption.text = captionTextNode.nodeValue;
//display image
var imageNode:XMLNode = new XMLNode();
var imageTextNode:XMLNode = new XMLNode();
imageNode = captionNode.nextSibling;
imageTextNode = imageNode.firstChild;
mcImageHolder.loadMovie(imageTextNode.nodeValue);
}

btnForward.onRelease = function()
{
if (currentPhoto.nextSibling != null)
{
currentPhoto = currentPhoto.nextSibling;
displayPhoto(currentPhoto);
}
}

btnBack.onRelease = function()
{
if (currentPhoto.previousSibling != null)
{
currentPhoto = currentPhoto.previousSibling;
displayPhoto(currentPhoto);
}
}

3. Save the movie and test it by pressing Control-Enter (PC) or Command-Return (Mac).

Before you "freak out", let's go through all of this code and determine exactly what is going on.

Next>