Constructing the PictureViewer: Explaining the Actionscript

 

Flash 1: The XML player.

Here's the 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);
}
}

If you go through it, you will notice it has been broken into sections. The first section creates the holder for the image and places it on the stage. The second section creates a couple of variables that will be used to access the nodes in the XML document. The third sction creates the XML object and tells it where to find the information in the XML document. The fourth section puts the image and the picture on the stage. The last two sections deal with how the buttons work.

That is the broad picture. Let's dig in a bit deeper:

_root.createEmptyMovieClip("mcImageHolder",1);

We need someplace to display the image so we create an EmptyMovieClip named "mcImageHolder" and place it on the stage.

mcImageHolder._x = 10;

mcImageHolder._y = 40;

The EmptyMovieClip is then given an X and a Y poition on the stage.

var allPhotos:XMLNode = new XMLNode();

var currentPhoto:XMLNode = new XMLNode();

There are six photos so each photo will have to be accessed through a node. Thus two XMLNode objects are created and named. The first will contain all of the photos and the second will contain the name of the current photo being displayed.

var photosXML:XML = new XML();

photosXML.ignoreWhite = true;

//don't look at empty space in the XML file

The XML object is created. In order to avoid confusion ,text nodes containing white space are ignored during the parsing process.

photosXML.onLoad = function(ok:Boolean){

Now that the XML object has been created we can start with the XML document. The first thing to check is :"Are the photos loaded?". A function to do that is created and it will look for a true or a false answer. That is a Boolean and "ok" will be the response.

if(ok == true)

If the Boolean value for OK is "true" we have to tell Flash what to do. Boolean values can only be "True" or False".

{

allPhotos = photosXML.firstChild;

The first thing it has to do is determine a value for the variable "allPhotos".It gets this from the "firstChild" in the XML object which is <photo></photo> .

currentPhoto = allPhotos.firstChild;

To do this, it examines all the values in the child , locates the photo and adds it to the value of the currentPhoto node created earlier.

displayPhoto(currentPhoto);

That value is then passed as a parameter to the function "displayPhoto".

}
else

What if there isn't value in the node or it can't be found?

{

txtCaption.text = "Error loading XML.";

Put an error message in the dynamic text box on the stage.
}
}
photosXML.load("photos.xml");

Now that Flash knows what to do, it is told to proceed. The first thing is load the "photos.xml" document into Flash.

displayPhoto = function(photoData:XMLNode)

The displayPhoto function is told to get the data from the photoDate XML Node object, created earlier. Remember, this object will hold the photo and the caption data.

{
//display caption

var captionNode:XMLNode = new XMLNode();

To add the caption to the movie, we create a new XMLNode object named captionNode. This object will identify nodes in the XML document that are named "caption".

var captionTextNode:XMLNode = new XMLNode();

To pull the text out of the caption node in the XML document we create another XMLNode object that will hold that data.

captionNode = photoData.firstChild;

We tell the object where the captionNode is located in the XML.

captionTextNode = captionNode.firstChild;

We then tell the TextNode object where the text is located in the XML document.

txtCaption.text = captionTextNode.nodeValue;

The text in the text node is pulled out of the XML document and placed into the dynamic text box on the stage.

//display image

var imageNode:XMLNode = new XMLNode();
var imageTextNode:XMLNode = new XMLNode();

It is a similar procedure for the image.

imageNode = captionNode.nextSibling;

The difference is locating the image data. The photo node comes after the caption node in the XML. This makes it a sibling and nextSibling simply says to move down one node in the child.

imageTextNode = imageNode.firstChild;

The node containg the necessary data is identified.

mcImageHolder.loadMovie(imageTextNode.nodeValue);

The text in that node is is added to a LoadMovie method which is what will be used in the EmptyMovieClip named "mcImageHolder". If we weren't using XML to grab the value it would be codeds as mcImageHolder.loadMovie ("image1.JPG").

}

Now that the text and image data has been gathered, the buttons on the stage are used to make the movie work.

btnForward.onRelease = function()

When the forward button is released....

{

if (currentPhoto.nextSibling != null)

.. if the there is no value for the next sibling do nothing.

{

If there is a value....

currentPhoto = currentPhoto.nextSibling;

displayPhoto(currentPhoto);

... get the value for the photo information and toss it into the EmptyMovieClip and get the caption and toss it into the dynamic text box.

}
}

btnBack.onRelease = function()

When the back button is released....

{

if (currentPhoto.previousSibling != null)

.. if the there is no value for the previous sibling (or the next node up in the order)do nothing.

{

currentPhoto = currentPhoto.previousSibling;

displayPhoto(currentPhoto);

... get the value for the photo information and toss it into the EmptyMovieClip and get the caption and toss it into the dynamic text box.

}
}