[Flash8] Image MouseOver in XML Gallery

[numbnutz]

Hi,

I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and accompanying captions.

The gallery has more than one image and the user can navigate the gallery by clicking forward and backward buttons to take then through the images:

var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var currentIndex:Number = 0;
galleryXML.onLoad = function(success) {
    if (success) {
        total = galleryXML.firstChild.childNodes.length;
        var galleryXML:Array = galleryXML.firstChild.childNodes;
        //For creating the block-thumbnails to link to the pictures in the gallery
        for (var i:Number = total; i>0; i--) {
            myClip.duplicateMovieClip("thumbnail_mc"+i, i, {_x:i*20, _y:i*20});
        }
        image_holder1_mc.loadMovie("images/"+galleryXML[currentIndex].attributes.filename1);
        image_holder2_mc.loadMovie("images/"+galleryXML[currentIndex].attributes.filename1);
        caption1_txt.text = galleryXML[currentIndex].attributes.caption1;
        caption2_txt.text = galleryXML[currentIndex].attributes.caption2;
        //testing to see if it is grabbing the correct template/scene in the XML file
        template_txt.text = galleryXML[currentIndex].attributes.template;
        //testing to see if it is calculating the correct number of entries in the XML file
        total_txt.text = total;
    }
};
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
        prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
        nextImage();
    }
};
Key.addListener(listen);
previous_btn.onRelease = function() {
    prevImage();
};
next_btn.onRelease = function() {
    nextImage();
};
function nextImage() {
    if (currentIndex<(total-1)) {
        currentIndex++;
        var currentNode = galleryXML.firstChild.childNodes[currentIndex];
        trace(currentNode);
        current_pos = currentIndex+1;
        image_holder1_mc.loadMovie("images/"+currentNode.attributes.filename1);
        image_holder2_mc.loadMovie("images/"+currentNode.attributes.filename2);
        caption1_txt.text = currentNode.attributes.caption1;
        caption2_txt.text = currentNode.attributes.caption2;
        next_imageNumber();
    }
}
function prevImage() {
    if (currentIndex>0) {
        currentIndex--;
        var currentNode = galleryXML.firstChild.childNodes[currentIndex];
        trace(currentNode);
        image_holder1_mc.loadMovie("images/"+currentNode.attributes.filename1);
        image_holder2_mc.loadMovie("images/"+currentNode.attributes.filename2);
        caption1_txt.text = currentNode.attributes.caption1;
        caption2_txt.text = currentNode.attributes.caption2;
        previous_imageNumber();
    }
}
function next_imageNumber() { 
current_pos = currentIndex+1; 
nextImageOfX.text = current_pos+" / "+total;
//caption2_txt.text = current_pos;
}
function previous_imageNumber() { 
current_pos = currentIndex+1; 
nextImageOfX.text = current_pos+" / "+total;
} 

Everything is working so far except the following: The effect that I want to achieve is when the user mouses over the image, the image shades (I am just going to use a simple rectangle the size of the photo and put it at a 30% alpha transparency) and the caption appears over the image. When the user's mouse leaves the photo, the shade and caption disappears.

The code that I am using (that's not working on any dynamic images loaded from the XML file) is as follows:

In the main actionScript in frame 1 of the timeline I have:

_root.image_holder1_mc.onEnterFrame = function() {
if (mouse_over_image_holder1_mc) {
_root.image_holder1_mc.nextFrame();
} else {
_root.image_holder1_mc.prevFrame();
}
};

On the invisible button over the image I have:

on (rollOver) {
_root.mouse_over_image_holder1_mc = true;
}
on (rollOut) {
_root.mouse_over_image_holder1_mc = false;
}

In image_holder1_mc (where the image is loaded into), the first frame does not have the shaded rectangle nor the caption but frame 2 has both. When the user mouses over the invisible button in the root timeline, frame 2 of the image_holder1_mc movie clip SHOULD be played but it does not. I have been able to make it work with just a static image not loaded from XML but as soon as I use the dynamically loaded image, the feature does not work (it also does not grab the captions that's associated with the image).

Is this a case of image_holder1_mc being changed due to the file name of the image that gets loaded or is image_holder1_mc always going to be image_holder1_mc regardless of the image name?

This seemed like it would be a simple thing to do but it isn't turning out that way.

Thank you in advance for your time and patience.
Brent a.k.a. numbnutz