-
Twansparant
Need help on dynamic fullscreen background image slideshow
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:
Actionscript Code:
// 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!
-
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|