[AS2] FullScreen Cross Fading Background Image XML Slideshow


A student of mine wanted to know how to do this, so I made this example for them. Basically it is a Full Screen Random Background Image XML slideshow. It uses the bitmap data object to create a smoothed background image, crossfade between new images and has the ability to turn scaling off at a certain user defined size. I borrowed some code from fr-ode’s example (image resizing) and have added in the XML and cross fading element. The code is well commented, you should be able to figure it all out.

OK, I’ve pushed all the slide show settings into the xml file. The cross fading now occurs contained within a movieClip on the stage, rather than by creating dynamic movieClips, this should make it easier to simply layer your manually created content over this movieClip.[/COLOR]

Also, included source .flas.

You will need:
1/ Some large images
2/ An XML file, that points to these images
3/ Set your publish settings to 100% browser width/height etc
4/ TweenLite AS2 Class http://blog.greensock.com/tweenliteas2

1/ Using the min height/ width stop scaling can cause a slight jump if a user resizes the window up again beyond that size. This is because Flash has to suddenly rescale the image to match the browser window, and there is a brief lag. This is only a problem if a user is madly resizing the window, most don’t.

2/ The temp cross faded image is not bitmap smoothed, for a slight time it may look a little jagged. I didn’t bother going to the extra steps to make this image smoothed.

Example 1 Min Image Time


Version 1 - Initial Release
Version 1.1 - bumpyknuckles fix where an onloadStart listener function has been added to
the AS to help avoid an issue where the temp bitmap shows up occassionally. 
Version 1.2 - Moved to tweenLite, fixed an image display issue when a user may resize the browser when the first image is loading in. Credit to
xxneon off ActionScript.org forums for pointing out this issue.

Terms and Conditions of use

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
	} else {
		trace("Fatal Error - Loading background image XML failed");
//name of your xml file

/*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*/

//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;


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..
		//random function for loaded images
		randomImg = Math.floor(Math.random(bgImages.length)*bgImages.length);
	} else {
		//sequential loading of images
		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*/

	//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
	//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>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;
	//fade in the temp bitmap
	TweenLite.to(target,crossFadeTime,{_alpha:100, onComplete:fadedIn, onCompleteParams:[this], onUpdate:this.resizeTemp});
	function fadedIn(ref):Void {
		//attach our loaded bitmap to our background mc when the temp totally obscures it
		//this is the smoothed bitmap
		//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
			//we are done fading..
			fadingComplete = true;
		//reset the timer
		bitmapFadeInterval = setInterval(_root, "loadRandomBitmap", imageTime);
		//resize the bg image
		//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;


//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 (Stage.width<minWidth || Stage.height<minHeight) {
	} else {
		//call the resize function

//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;

Here is now the xml looks;

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

 - DALESATTLER - www.noponies.com
'crossFadeTime' |#| time in SECONDS of the cross fade between images - Default is 3 seconds
'imageTime' |#| how long in MINUTES do you want each image to display for. Note you can enter.5 etc for 30 seconds. Default = 1min
'minWidth' |#| Minimum screen size width at which point the images will not be scaled - Default is 0 = no min point
'minHeight' |#| Minimum screen size height at which point the images will not be scaled - Default is 0 = no min point
'order' |#| random or sequential image loading - choose either "random" or "ordered" = Default is random

<images crossFadeTime="3" imageTime="1" minWidth="0" minHeight="0" order="ordered">

if someone could help :crying:

i have 4 buttons that load different

backgrounds, fallowing the xml file. My question is it possible that, my

four buttons always load the same backs, independently of the order of

the xml file. Thanks in advanced

Ps: sorry my english, and my inicial confused post

This is really something special. Thanks for sharing such a well described piece of work.

I’ve run into a problem implementing it with my file and I was hoping you may able to shed some light on it. It runs fine as an individual swf, or if I open the html file, but when I load it into the background of my existing file it gets stuck on the first image.

I understand there could be so many different reasons this is happenning, but I thought I’d try my luck and ask anyway as there maybe something you could think of.

Thanks in advance,


One problem I’m having and I would like to learn more because it is something I do see in flash and that’s when one transition or animation, causes another one to stick.

In this example when the slide changes if there is another animation going on at the same time invariably that animation sticks. I sthis due to the size of the jpg file being loaded?

It’s not just this (I am very grateful for this code) I do see it on other flash sites - does anybody know a solution?

Is there a tutorial topic somewhere - (sticking animations in Flash?) :eye:


Sounds like the example is having trouble instantiating the setInterval function. Perhaps try changing its scope to _root.

Fading in large images is pretty processor intensive, so yeah, it may make other animations stutter. But they should just carry on, as this code is pretty self contained.

Hi Dail,

Thanks so much for you xml xfading example - I love it!

Just one thing I cant work out for myself - at 1280 x 800 (the resolution of my
laptop) the loaded background images get cutoff at the bottom. It’s not until I
resize the browser window that I can see the full image. The image size that I am using is 1920 x 1280, as I wanted to accommodate higher resolutions. Is this a good size to use? Or should I rethink my strategy?

The project that I’m working on requires an exact layout of interface elements over the background - is this even possible across all the myriad screen resolutions?

Any help would be greatly appreciated!




It should resize that image on load. Its odd that you have to resize your browser window to make it resize.

Are you setting your html publishing settings to 100% for width and height?

You should be able to position your elements where you like. So long as they are in a layer above the bg, you should be good to go


I replied to your email. Hope you got it sorted.

Hi Dail, all is good and it’s looking great!

I’m just wondering, the image loads at first jagged, then the bitmap image kicks in is smoothed over. Is there a way to have the image smoothed from the start?


2/ The temp cross faded image is not bitmap smoothed, for a slight time it may look a little jagged. I didn’t bother going to the extra steps to make this image smoothed.