Creating an Advance Flash Image Gallery - Page 2

By Blue_Chi | Flash CS3 | ActionScript | Advanced | Page 1, 2, 3, 4, 5, 6, 7

In order to do anything with our gallery we will have to load and process our XML file. We will store all the data we need in easily accessible variables. This should be a very simple process if you have read our tutorial on using XML in Flash. Here is a basic outline of what we will do in this section:

  1. Create an instance of the XML Class.
  2. Load the XML file using the XML Class instance.
  3. Store the required information retrieved from the XML file when the file is loaded.

Creating an instance of the XML class

The first segment of code we will write will simply create a new instance of the XML class to be used to load our XML file into Flash. We will have to set its .ignoreWhite property to true in order for it to work and then will use the .load method to load our file.

var myGalleryXML = new XML();
myGalleryXML.ignoreWhite = true;
myGalleryXML.load("gallery.xml");

We need to retrieve all the information we need from the XML file. We will do this by retrieving the values of all the attributes of the .firstChild of our XML file, which is the <gallery> element. We will also make a reference to the array that contains all the .childNodes of the <gallery> element, i.e. the <image /> elements:

myGalleryXML.onLoad = function() {

_root.gallery_x = myGalleryXML.firstChild.attributes.gallery_x;
_root.gallery_y = myGalleryXML.firstChild.attributes.gallery_y;
_root.gallery_width = myGalleryXML.firstChild.attributes.gallery_width;
_root.gallery_height = myGalleryXML.firstChild.attributes.gallery_height;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = myImages.length;

_root.thumb_height = myGalleryXML.firstChild.attributes.thumb_height;
_root.thumb_width = myGalleryXML.firstChild.attributes.thumb_width;

_root.full_x = myGalleryXML.firstChild.attributes.full_x;
_root.full_y = myGalleryXML.firstChild.attributes.full_y;

};

The .childNodes property of the <image> element is an array containing a reference to all the elements within that tag (the <image /> elements). This reference will be used later to extract the individual details of each image. The number of images is determined by accessing the .length property of the .childNodes array, which is then stored in the _root.myImagesTotal variable.

All of our variables were created with the _root prefix so that they are attached to the _root of our movie clip to make referring to them easy regardless of the scope of the movie clip attempting to retrieve any of these variables.

No further reference will be made to the XML file, except for loading the specific image details, and that will be made through the myImages variable and not directly from the XML file. We have completed this section of the tutorial and will work in the next section on loading all of our thumbs into our movie.

Summary of this Page

  1. Created an instance of the XML class and named it myXMLGallery.
  2. Used the myXMLGallery instance to load the XML file.
  3. Stored all the information we needed from the XML file in variable attached to the _root of SWF file to make reference to them easy.

We will load all of our thumbs in the next section of this tutorial using the MovieClipLoader class within a loop.

Next page.