Creating an XML Scrollbar Gallery in Flash

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

The second step in creating our scrollbar is loading and processing the XML data. Once we do that, we will store the data we need in easily accessible variables. This entire process should be a breeze if you have read our tutorial on using XML in Flash. We are also going to calculate the values of some variables that are not available in our XML gallery and which are necessary such as the vertical position of the scrollbar and the width of our scroller. 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 in easily accessible variables.
  4. Calculate values for properties such as the vertical position of the scrollbar and the width of the scroller.

Creating an instance of the XML class

The first segment of code we're going to write will simply create a new instance of the XML class to be used to load our XML file into Flash. We have to set its .ignoreWhite property to true in order for Flash to understand the XML file properly 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 of elements that contains all the .childNodes of the <gallery> element, i.e. the <image /> elements:

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

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


};

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 image specific details such as the URL and the title. The number of images is determined by accessing the .length property of the .childNodes array, which is then stored in the _root.myImagesNo variable.

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

Calculating Unknown Properties

There are two pieces of information related to our scrollbar that we did not put in the XML file and which we have to find ourselves now, these are the vertical position of the bar and the width of the scroller inside the bar.

To figure out the vertical position of the scrollbar we are going to use the value of the spacing of the scrollbar away from the gallery and the height of the gallery, if we add these two values we can get the proper _y (vertical position) of scrollbar as shown in the diagram below.

Bar Vertical Position

To add these values togetherr we can simply use the following code:

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_y = _root.gallery_height+_root.spacing;
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

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


};

However, because of the way flash treats different types of data, when it adds the values of these two numbers it will put them just next to each other as if they were text strings. So that for example:

Example: 12 + 12 should equal 24, but in some instances Flash will put it as 1212!

To avoid this problem, we can explicitly cast our type as Number so that Flash adds them mathematically this way:

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_y = Number(_root.gallery_height)+Number(_root.spacing);
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

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


};

That should get us the vertical position of the gallery. We now need to figure our the width of our scroller. We have the thickness of our bar, so we will simply let our scroller two times as much as that:

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_y = Number(_root.gallery_height)+Number(_root.spacing);
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;
_root.scroller_width = _root.bar_thickness*2

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

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


};

Cool, we now have all the details we need to create our gallery, except the specific image details, and those will be retrieved through the myImages variable and not directly from the XML file later on when needed. We have completed this section of the tutorial and will work in the next section to create the container movie clip of our gallery.

Summary of this Page

  1. Created an instance of the XML class and named it myGalleryXML.
  2. Used the myGalleryXML instance to load the XML file.
  3. Stored all the information we needed from the XML file in variables attached to the _root of SWF file to make reference to them easy.
  4. Calculated the values for unknown variabes such as the vertical position of the scrollbar and the width of the scroller.

In the next section we will create the container movie clip that will hold all of the images to be loaded in our gallery.

Next page