Hi,
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.
[COLOR=“Red”]EDITS
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
Limitations
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.
Enjoy.
EXAMPLE
Example 1 Min Image Time
SOURCE FILES
http://www.noponies.com/dev/fullscreen/xmlFullCrossXML.zip
/*
******************************************
CROSS FADING BACKGROUND FULLBROWSER IMAGES
http://www.noponies.com
http://www.eolian.net.nz
******************************************
******************************************
CONFIGURE THE XML FILE FOR ALL SLIDE SHOW PARAMETERS!!
******************************************
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
http://www.blog.noponies.com/terms-and-conditions
*/
//init
import flash.display.BitmapData;
Stage.scaleMode = "noscale";
import gs.TweenLite;
stop();
//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>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;
}
}
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">
<back>
<image>images/band.jpg</image>
</back>
<back>
<image>images/back3.jpg</image>
</back>
<back>
<image>images/wave1.jpg</image>
</back>
</images>
