Need help on dynamic fullscreen background image slideshow

[Twandeman]

Hi there,

I need some help on this fullscreen background image slideshow I'm trying to achieve. This is what supposed to happen:

- From my XML file an array is created with several background images
- The first image gets randomly loaded into a BitmapData and is attached to the first movieclip for smoothing. After that the movieclip gets proportionally scaled to fit the Stage.
- After an interval (set in the XML) the second image gets randomly loaded into a BitmapData and is attached to the second movieclip with a nice fade-in effect. After that the movieclip gets proportionally scaled to fit the Stage and the movieclips swap their depths.
- The third image gets loaded into a BitmapData and is attached to the first movieclip again.
etc etc etc.

Everything works fine, however the fullscreen scaling part doesn't work properly.
It seems to me the 2 movieclips don't get unloaded/cleared with their content, therefore the width and height of the movieclip doesn't get updated.

Can anyone have a look where I should adjust my AS in order to get this working properly? Any help is appreciated!

This is my AS:

// Load XML
var myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function(success) {
    if (success) {
        randomBG();
    } else {
        trace("The XML could not be loaded");
    }
};
myXML.load("content.xml");
    


// Random Background Image & Color
var randomNum = 0;
var randomNumLast = 0;

    
function randomBG() {

    var imageArray:Array = new Array();
    backgrounds = myXML.firstChild.childNodes[0].childNodes[0];
    var root = backgrounds;
    _global.numPause = Number(backgrounds.attributes.timer * 1000);
    _global.order = backgrounds.attributes.order;
    _global.looping = backgrounds.attributes.looping;
    _global.fadetime = Number(backgrounds.attributes.fadetime);
    var imageNode = root.lastChild;
    
    var s = 0;
    while (imageNode.nodeName != null) {
        imageData = new Object();
        imageData.path = imageNode.firstChild.nodeValue;
        imageData.color = imageNode.attributes.color;
        imageArray[s] = imageData;
        imageNode = imageNode.previousSibling;
        s++;
    }
    // parse array
    imageArray.reverse();
    imageGen(imageArray);
}

// depth swapping
function swapPlace(clip, num) {
    eval(clip).swapDepths(eval("bg_image.loader"+num+"_mc"));
}
function loadImages(data, num) {
    if (i == undefined || i == 2) {
        i = 2;
        createLoader(i,data,num);
        i = 1;
    } else if (i == 1) {
        createLoader(i,data,num);
        i = 2;
    }
}

// movie clip containers
bg_image.createEmptyMovieClip("loader1_mc", 2);
bg_image.createEmptyMovieClip("loader2_mc", 1);

function createLoader(i, data, num) {
    // Create a movie clip which will contain our unsmoothed bitmap
    target = eval("bg_image.loader"+i+"_mc");
    var bmc:MovieClip = target.createEmptyMovieClip("bmc", 2);
    var listener:Object = new Object();
    listener.tmc = target;
    listener.onLoadProgress = function(mc:MovieClip, loadedBytes, totalBytes) {
        progressText.htmlText = Math.floor((loadedBytes / totalBytes) * 100) + "%";
    };
    listener.onLoadComplete = function(mc:MovieClip) {
        progressText.htmlText = "";
    };
    listener.onLoadInit = function(mc:MovieClip) {
        target._alpha = 0;
        var bitmap:BitmapData = new BitmapData(mc._width, mc._height, true);
        this.tmc.attachBitmap(bitmap, 1,"auto", true);
        bitmap.draw(mc);
        mc.removeMovieClip();
        // Fullscreen & Fade in
        fullsizeBG(bg_image);
        swapPlace("bg_image.loader2_mc", 1);
        TweenLite.to(target, fadetime, {_alpha:100});
        timerInterval = setInterval(imageGen, numPause, data);
    };
    // Do it, load the bitmap now
    var loader:MovieClipLoader = new MovieClipLoader();
    loader.addListener(listener);
    loader.loadClip(data[num].path, bmc);   
}

function imageGen(data) {
    // random, or sequential?
    if (order == "random") {
        // choose random # between 0 and total number of images
        while (randomNum == randomNumLast) {
            randomNum = Math.floor(Math.random()*data.length);
            //trace(randomNum);
        }
        loadImages(data,randomNum);
        randomNumLast = randomNum;
    } else if (order == "sequential") {
        // start at 0, increment to total number of images, then drop back to zero when done
        if (p == undefined || p == data.length && looping == "yes") {
            p = 0;
        } else {
            break;
        }
        loadImages(data,p);
        p++;
    }
    clearInterval(timerInterval);
}


// Fullscreen Background
function fullsizeBG(what:MovieClip) {
    var ratio:Number = what._width/what._height;
    // check to see if the resulting height will be tall enough
    if ((Stage.width/ratio) >= Stage.height) {
        what._width = Stage.width;
        what._height = (Stage.width/ratio);
    // otherwise, the resized-image would not be tall enough, so use the height as the basis of scaling.
    } else {
        what._height = Stage.height;
        what._width = (Stage.height*ratio);
    }
    // Centers Image in window
    what._x = -(what._width/2) + Stage.width/2;
    what._y = 0 - Math.round(Stage.height-600);
}


// Stage Resizer
var stageListener:Object = new Object();
stageListener.onResize = function() {
    fullsizeBG(bg_image);
};
Stage.addListener(stageListener);

Many thanks!

[skewq]

i dont have timo read all the source code fully, but i suggest instantiating a new movieclip for each new image loading, this can be done easily in your code, store them in the same variables