# Back and next buttons for XML Gallery

**URL:** <https://forum.kirupa.com/t/back-and-next-buttons-for-xml-gallery/271885>\
**Category:** Uncategorized\
**Created:** [September 30, 2008, 2:12am UTC](https://forum.kirupa.com/t/back-and-next-buttons-for-xml-gallery/271885 "2008-09-30T02:12:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![chriswilson](https://avatars.discourse-cdn.com/v4/letter/c/b9e5f3/32.png) [@chriswilson](https://forum.kirupa.com/u/chriswilson)\
**Post date:** [September 30, 2008, 2:12am UTC](https://forum.kirupa.com/t/back-and-next-buttons-for-xml-gallery/271885/1 "2008-09-30T02:12:00Z")

</div>

Hi,

I’ve been trying to customize the AS2 Full Browser XML Slideshow over at [http://blog.noponies.com](http://blog.noponies.com).

Its a great piece of code but I can’t seem to figure out how to create Back and Next buttons as in any normal gallery.

Here’s the code so far…

//init  
import flash.display.BitmapData;  
Stage.scaleMode = “noscale”;  
import gs.TweenLite;

//load in background images XML details  
var backImage:XML = new XML();  
backImage.ignoreWhite = true;  
var bgImages:Array = new Array();  
var p:Number = 0;//track pos in arrays

//Variables pulled in from XML  
var minHeight:Number;  
var minWidth:Number;  
var crossFadeTime:Number;  
var imageTime:Number;  
var order:String;

backImage.onLoad = function(success:Boolean) {  
if (success) {  
//get vars from XML file  
minHeight = this.firstChild.attributes.minHeight;  
minWidth = this.firstChild.attributes.minWidth;  
crossFadeTime = this.firstChild.attributes.crossFadeTime;  
imageTime = this.firstChild.attributes.imageTime;  
imageTime = (1000_60)imageTime;  
order = String(this.firstChild.attributes.order);  
p = 0;  
bgImages = [];//reset the array var, should for some reason you want to load in a different set of images  
xmlNodes = this.firstChild;  
largeImages = xmlNodes.childNodes.length;  
for (i=0; i\<largeImages; i++) {  
bgImages = xmlNodes.childNodes_.childNodes[0].firstChild.nodeValue;  
}  
//load random image when we successfully parse XML  
loadRandomBitmap();  
} else {  
trace(“Fatal Error - Loading background image XML failed”);  
}  
};  
//name of your xml file  
backImage.load(“backimages.xml”);

/_create an empty mc to act as the background smoothed bitmap holder  
change the depth etc here should you need to…Note that this is created inside the  
small mc on the stage_/  
bgHolder\_mc.createEmptyMovieClip(“bg\_mc”,1);

//var to track the fading, we use this to try to resize the temp bitmap with a resize, should the user be resizing the window when we fade in out  
var fadingComplete:Boolean = true;

var firstRun:Boolean = true;

//BITMAP BACKGROUND LOADING///

function loadRandomBitmap():Void {  
if (order == “random”) {  
//create the temp loader mc that we load our unsmoothed bitmap into  
//a limitation of this approach is that as this top image fades in/out it looks a little jagged for 2 seconds or so…  
bgHolder\_mc.createEmptyMovieClip(“bg\_loader”,2);  
//random function for loaded images  
randomImg = Math.floor(Math.random(bgImages.length)\*bgImages.length);  
bitLoader.loadClip(bgImages[randomImg],bgHolder\_mc.bg\_loader);  
} else {  
//sequential loading of images  
bgHolder\_mc.createEmptyMovieClip(“bg\_loader”,2);  
bitLoader.loadClip(bgImages[p],bgHolder\_mc.bg\_loader);  
p++;  
if (p == bgImages.length) {  
p = 0;  
}  
}  
}

//MovieClipLoader for bitmap image loading  
var bitLoader:MovieClipLoader = new MovieClipLoader();  
var bitlistener:Object = new Object();

bitlistener.onLoadStart = function(target:MovieClip):Void {  
//alpha out our image we load our bitmap into  
target.\_alpha = 0;  
};

bitlistener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {  
//amountLoaded = Math.floor((bytesLoaded/bytesTotal)\*100);//calulate a loading percentage!  
//do something with this data if you want  
};

/_here we both draw our bitmap to our offscreen MC and handle the cross fading in and out -  
First we load our bitmap into our temp mc which is set to alpha 0, then we resize and fade our  
temp mc in so that we achieve the cross fading effect. When the temp MC is at 100% alpha we  
attach our bitmap object to our smoothed background MC and then quickly fade out and remove the temp MC._/

bitlistener.onLoadInit = function(target:MovieClip):Void {  
/_clear the timer interval each time. We do this so that each new iteration of the timer  
starts from when the bitmap is loaded, this stops us from trying to fade images etc that have not loaded  
and ensures that each bitmap is displayed for the required amount of time on screen. Essentially it negates  
download time_/  
clearInterval(bitmapFadeInterval);

```
//create the bitmap object, each time this is reset, keeping memory footprint fairly low..
var bitmap:BitmapData = new BitmapData(target._width, target._height, true);
//draw the bitmap
bitmap.draw(target);
//we are starting to fade, so set our var to false and let the temp resize functions run
fadingComplete = false;
//resize the temp bitmap to match the size of the bg bitmap
this.resizeTemp = function() {
    if (Stage.height/Stage.width&gt;target._height/target._width) {
        img_propa = target._width/target._height;
        target._height = Stage.height;
        target._width = Stage.height*img_propa;
        target._y = 0;
        target._x = 0;
    } else {
        img_propa = target._height/target._width;
        target._width = Stage.width;
        target._height = Stage.width*img_propa;
        target._y = 0;
        target._x = 0;
    }
}
this.resizeTemp();
//fade in the temp bitmap
TweenLite.to(target,crossFadeTime,{_alpha:100, onComplete:fadedIn, onCompleteParams:[this], onUpdate:this.resizeTemp});
function fadedIn(ref):Void {
    ref.resizeTemp
    //attach our loaded bitmap to our background mc when the temp totally obscures it
    //this is the smoothed bitmap
    bgHolder_mc.bg_mc.attachBitmap(bitmap,0,"auto",true);
    //make the bg resize
    fullScreenBg();//This is abit of a hack to catch user resizes
    TweenLite.to(target,.1,{_alpha:0, onComplete:cleanUpTemp});
    function cleanUpTemp():Void {
        //remove the temp mc
        removeMovieClip(bgHolder_mc.bg_loader);
        //we are done fading..
        fadingComplete = true;
    }
    //reset the timer
    bgHolder_mc.bg_mc.attachBitmap(bitmap,0,"auto",true);
    //bitmapFadeInterval = setInterval(_root, "loadRandomBitmap", imageTime);
    //resize the bg image
    fullScreenBg();
    //add the stage listener, which fixes an issue with the image being scaled out to
    //some crazy size if a user is resizing as the image loads in for the first time.
    if (firstRun) {
        Stage.addListener(catchStage);//stage resize listener, added here after first image load.
        firstRun = false;
    }
}

```

};

bitLoader.addListener(bitlistener);

//stage listener to handle resizing images  
var catchStage:Object = new Object();  
catchStage.onResize = function() {  
/_simple “OR” conditional to set a min size, if we are below that we don’t do any more scaling  
note that we wrap this in a if/else so that the function that we actually use to to the bg  
resizing can be called independently of this check, for instance when we are below the resize  
min but we are fading in a new image, obviously we would want that new image to scale_/  
//\*\*IF YOU WANT TO SCALE AT ALL STAGE SIZES, SET THE MIN HEIGHT ETC TO 0 IN THE XML  
if (Stage.width\<minWidth || Stage.height\<minHeight) {  
return;  
} else {  
//call the resize function  
fullScreenBg();  
}  
};

//screen resize function  
function fullScreenBg() {  
if (Stage.height/Stage.width\>bgHolder\_mc.bg\_mc.\_height/bgHolder\_mc.bg\_mc.\_width) {  
img\_prop = bgHolder\_mc.bg\_mc.\_width/bgHolder\_mc.bg\_mc.\_height;  
bgHolder\_mc.bg\_mc.\_height = Stage.height;  
bgHolder\_mc.bg\_mc.\_width = Stage.height_img\_prop;  
bgHolder\_mc.bg\_mc.\_y = 0;  
bgHolder\_mc.bg\_mc.\_x = 0;  
} else {  
img\_prop = bgHolder\_mc.bg\_mc.\_height/bgHolder\_mc.bg\_mc.\_width;  
bgHolder\_mc.bg\_mc.\_width = Stage.width;  
bgHolder\_mc.bg\_mc.\_height = Stage.width_img\_prop;  
bgHolder\_mc.bg\_mc.\_y = 0;  
bgHolder\_mc.bg\_mc.\_x = 0;  
}  
}

Thanks for any help.

Chris