Skip to main content
August 24, 2010
Question

adding crossfade transitions to image gallery?

  • August 24, 2010
  • 1 reply
  • 930 views

Hi everyone!  I have an XML image gallery that works great, but I'm not satisfied with how the images transition.  I'd like the old image to fade out while the new one is fading in whenever the viewer hits the previous or next button, so that way there's no blank background space between the transitions while the new image is being loaded.  Below is my code.  Any help or suggestions would be much appreciated!

________________________________________

function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        description = [];
        //
        //define link variable
        //
        link = [];
        //
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image = xmlNode.childNodes.childNodes[0].firstChild.nodeValue;
            description = xmlNode.childNodes.childNodes[1].firstChild.nodeValue;
            //
            //adding links
            //
            link = xmlNode.childNodes.childNodes[2].firstChild.nodeValue;
            //
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("image_and_link.xml");
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
        prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
        nextImage();
    }
};
/////////////////////////////////////
p = 0;
this.onEnterFrame = function() {
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = false;
    if (loaded != filesize) {
        preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
        preloader._visible = false;
        if (picture._alpha<100) {
            picture._alpha += 10;
        }
    }
    //
    //getURL statement
    //
    picture.onRelease = function() {
        getURL(link

, "_blank");
    };
   
    //
};
function nextImage() {
    p<total-1 ? p++ : p=0;
    picture._alpha = 0;
    picture.loadMovie(image

, 1);
}
function prevImage() {
    p>0 ? p-- : p=total-1;
    picture._alpha = 0;
    picture.loadMovie(image

, 1);
}
function firstImage() {
    p = Math.floor(Math.random()*total);
        picture._alpha = 0;
    picture.loadMovie(image

, 1);
    }
previous_btn.onRelease = function() {
    slide = 0;
    prevImage();
};
next_btn.onRelease = function() {
    slide = 0;
    nextImage();
};

________________________________________

This topic has been closed for replies.

1 reply

Ned Murphy
Legend
August 24, 2010

Just a couple of thoughts... you only need to transition/fade one image, either one (managing the depths for whichever you choose).  If you are using the same movieclip as the vehicle for loading the images, you cannot have the two of them present at the same time... only one can occupy that space at a time.  So you need to have a separate movieclip to hold each image that you load. You can use createEmptyMovieClip as a means of creating the different holding clips for loading the images in.

August 24, 2010

Thanks so much for the prompt response!  Yes, it appears I'm using the same movieclip for everything.  I understand what you're trying to say, but as an ActionScript newbie, I'm not quite sure how to implement createEmptyMovieClip.  Can you possibly elaborate further?

Ned Murphy
Legend
August 24, 2010

As a newbie, one of the most important things you should learn is how to make use of the Flash Help documentation to find information on how things are used.  The documentation is full of examples that can help you learn as well.

Google is also an excellent resource for finding learning materials.  While it is sometimes less liklely that you'll find tutorials for individual functions, if you search Google using "AS2 createEmptyMovieClip tutorial" as search terms you may find a few links that provide helpful info.