Webmaster Forum / Flash / Flash Actionscript / January 2008

Hi everyone. I'm really in a bind here. I've been working on this for two days
now and I'm ready to pull my hair out. I'm making a slideshow that cycles
through x amount of images from an XML file. The images change every 6 seconds.
The image can also change forward or backward via a Next and Previous button.

That all works fine. My problem comes in with the transition from image to
image. As of now, the new image's alpha fades in from 0 to 100. What I want is
for the old image's alpha to fade from 100 to 0 at the same time - a cross
fade. No matter what I've tried, I can't get the old image's alpha to fade out.

Can anyone help out? It would be MUCH appreciated!

// Loads XML file.
function loadXML(loaded)
{
    if (loaded)
    {
        // Initializes array for each node.
        xmlNode = this.firstChild;
        image = [];
        caption = [];
        person = [];
        area = [];
        linkText1 = [];
        linkURL1 = [];
        linkText2 = [];
        linkURL2 = [];
        total = xmlNode.childNodes.length;
       
        for (i = 0; i < total; i++)
        {
            image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
            caption[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
            person[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
            area[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
            linkText1[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue;
            linkURL1[i] = xmlNode.childNodes[i].childNodes[5].firstChild.nodeValue;
            linkText2[i] = xmlNode.childNodes[i].childNodes[6].firstChild.nodeValue;
            linkURL2[i] = xmlNode.childNodes[i].childNodes[7].firstChild.nodeValue;
        }
       
        // Calls function to load first image.
        firstImage();

    }
    else
    {
        content = "File not loaded!";
    }
}

xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");

// Next and previous buttons to call corresponding function.
btnNext.onPress = function()
    {
        nextImage();
    }
   
btnPrevious.onPress = function()
    {
        prevImage();
    }

// This variable keeps track of place in image array.
p = 0;

// This variable sets speed to increment alpha.
speed = 10;

function firstImage()
{   
    // Increases alpha level of picture movie clip.
    this.onEnterFrame = function()
        {           
            i += speed;
            picture._alpha = i;
           
            if (picture._alpha >= 100)
            {
                stop();
            }
        }
       
    // Displays current image for 6 seconds before cycling to next one.
    timeInterval = setInterval(nextImage, 6000);
   
    picture.loadMovie(image[0], 1);
   
    // Loads text into movie clip from XML file.
    captionText.htmlText = "<b>" + caption[0] + "</b>";
    nameText.htmlText = "<b>" + person[0] + "<br>" + area[0] + "</b>";
    linkText.htmlText = "<b>&#187; <a href='" + linkURL1[0] + "'><font
color='#002568'><u>" + linkText1[0] + "</u></font></a><br>&#187; <a href='" +
linkURL2[0] + "'><font color='#002568'><u>" + linkText2[0] +
"</u></font></a></b>";
}

function nextImage()
{
    // Checks to make sure image isn't last in array.
    if (p < (total - 1))
    {
        p++;       
        picture._alpha = 0;
        i = 0;
       
        if (picture._alpha < 100)
        {
            i += speed;
            picture._alpha = i;
        }
       
        picture.loadMovie(image[p], 1);       
        captionText.htmlText = "<b>" + caption[p] + "</b>";
        nameText.htmlText = "<b>" + person[p] + "<br>" + area[p] + "</b>";
        linkText.htmlText = "<b>&#187; <a href='" + linkURL1[p] + "'><font
color='#002568'><u>" + linkText1[p] + "</u></font></a><br>&#187; <a href='" +
linkURL2[p] + "'><font color='#002568'><u>" + linkText2[p] +
"</u></font></a></b>";
    }
    else
    {
        // If image is last in array, sets it back to first image.
        p = 0;       
        picture._alpha = 0;
        i = 0;
       
        if (picture._alpha < 100)
        {
            i += speed;
            picture._alpha = i;
        }
       
        picture.loadMovie(image[p], 1);
        captionText.htmlText = "<b>" + caption[p] + "</b>";
        nameText.htmlText = "<b>" + person[p] + "<br>" + area[p] + "</b>";
        linkText.htmlText = "<b>&#187; <a href='" + linkURL1[p] + "'><font
color='#002568'><u>" + linkText1[p] + "</u></font></a><br>&#187; <a href='" +
linkURL2[p] + "'><font color='#002568'><u>" + linkText2[p] +
"</u></font></a></b>";
    }
}

function prevImage()
{   
    // Checks to see if image is first in array.
    if (p > 0)
    {
        p--;       
        picture._alpha = 0;
        i = 0;
       
        if (picture._alpha < 100)
        {
            i += speed;
            picture._alpha = i;
        }
       
        picture.loadMovie(image[p], 1);
        captionText.htmlText = "<b>" + caption[p] + "</b>";
        nameText.htmlText = "<b>" + person[p] + "<br>" + area[p] + "</b>";
        linkText.htmlText = "<b>&#187; <a href='" + linkURL1[p] + "'><font
color='#002568'><u>" + linkText1[p] + "</u></font></a><br>&#187; <a href='" +
linkURL2[p] + "'><font color='#002568'><u>" + linkText2[p] +
"</u></font></a></b>";
    }
    else
    {
        // If image is first in array, sets it to last.
        p = (total - 1);       
        picture._alpha = 0;
        i = 0;
       
        if (picture._alpha < 100)
        {
            i += speed;
            picture._alpha = i;
        }
       
        picture.loadMovie(image[p], 1);
        captionText.htmlText = "<b>" + caption[p] + "</b>";
        nameText.htmlText = "<b>" + person[p] + "<br>" + area[p] + "</b>";
        linkText.htmlText = "<b>&#187; <a href='" + linkURL1[p] + "'><font
color='#002568'><u>" + linkText1[p] + "</u></font></a><br>&#187; <a href='" +
linkURL2[p] + "'><font color='#002568'><u>" + linkText2[p] +
"</u></font></a></b>";
    }
}