Codice PHP:
/*
******************************************
CROSS FADING BACKGROUND FULLBROWSER IMAGES
[url]http://www.noponies.com[/url]
[url]http://www.eolian.net.nz[/url]
******************************************
******************************************
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
[url]http://www.blog.noponies.com/terms-and-conditions[/url]
*/
//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[i] = xmlNodes.childNodes[i].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;
}
}
Rispondi quotando