XML Gallery I made that has a little bug.

[jlizarraga]

Long story short: I'm using what I suppose is a crappy method to fade between images, and maybe you guys can help me pick a better one. First time XMLer here. And this is all AS2.0 with CS3. Thanks in advance for any help.

Check out the flash piece here:

http://futureford.autofusion.com/

There are 7 total cars that are being cycled through (which of course could be any number thanks to xml), and they fade into each other every 5 seconds, but only after the cars have been cycled through all the way (and cached) does the fading work properly. The fading mc, as you can see by the first image that gets loaded up, is just a big gold rectangle. After an image loads up, the big orange rectangle is told to load that same image with the loadMovie method, so that when it fades out again and reveals the next image it has the appearance of fading from the last car to the next.

Like I said, it works great once the car images are cached, but otherwise the fader images don't load fast enough (a guess?) and you see the gold rectangle suddenly appear and fade out instead. What I don't understand is that the next image (the one being faded to) loads up just fine and timely, but it seems like the fader clip (which has it's own timeline for the fade affect) doesn't load up the image until it is already playing and fading out. I have a trace in the AS telling me that the image is loading the full 5 seconds before it is needed, but when that movie clip plays I see no image.

I'm guessing that the way to fix this issue is to use actionscript to control the fading rather than having a movieclip that is using a timeline and tweening to fade out, but I really don't know where to start on tackling that. Here is my code:


//shortcut vars
var msrpdtfV = _root.centerPiece.message2.bigText.msrpdtf;
var m1dtfV = _root.centerPiece.message1.smallText.m1dtf;
var m2dtfV = _root.centerPiece.message1.bigText.m2dtf;
var m3dtfV = _root.centerPiece.message1.bigText.m3dtf;
var m4dtfV = _root.centerPiece.message1.bigText.m4dtf;
var carImageV = _root.centerPiece.carImage;
var carFaderV = _root.centerPiece.carFader;
var preloaderV = _root.centerPiece.preloader;

//button vars
var qqURL:String;
var invURL:String;

//global vars
var totalCars:Number;
var nextCar = 0;
var lastCar:Number;
var slideShowSpeed = 5000;

//array vars
var msrpArray:Array = new Array();
var m1Array:Array = new Array();
var m2Array:Array = new Array();
var m3Array:Array = new Array();
var m4Array:Array = new Array();
var imageArray:Array = new Array();
var thumbArray:Array = new Array();

//button arrays
var qqArray:Array = new Array();
var invArray:Array = new Array();

//fader boolean var
var firstImagePassed = false;

//hide preloader initially
preloaderV._visible = false;

//load homepage.xml
var carData:XML = new XML();
carData.ignoreWhite = true;
carData.onLoad = function(success) {
if (success) {
m1dtfV.text = "XML Car Data loaded successfully! :)";
parseCarData ();
} else {
m1dtfV.text = "XML Car Data has failed to load. :(";
}
};
carData.load("http://futureford.autofusion.com/includes/homepage.xml");

//parse homepage.xml into dataset arrays
function parseCarData () {
for (i=0; i<carData.childNodes[0].childNodes.length; i++) {
msrpArray[i] = carData.childNodes[0].childNodes[i].childNodes[2].firstChild.nodeValue;
m1Array[i] = carData.childNodes[0].childNodes[i].childNodes[3].firstChild.nodeValue;
m2Array[i] = carData.childNodes[0].childNodes[i].childNodes[4].firstChild.nodeValue;
m3Array[i] = carData.childNodes[0].childNodes[i].childNodes[5].firstChild.nodeValue;
m4Array[i] = carData.childNodes[0].childNodes[i].childNodes[6].firstChild.nodeValue;
imageArray[i] = carData.childNodes[0].childNodes[i].childNodes[7].firstChild.nodeValue;
thumbArray[i] = carData.childNodes[0].childNodes[i].childNodes[8].firstChild.nodeValue;
qqArray[i] = carData.childNodes[0].childNodes[i].childNodes[9].firstChild.nodeValue;
invArray[i] = carData.childNodes[0].childNodes[i].childNodes[10].firstChild.nodeValue;
}
//load up the first dataset
trace("Loading car data for car #" + (nextCar + 1) + ".")
msrpdtfV.text = msrpArray[nextCar];
m1dtfV.text = m1Array[nextCar];
m2dtfV.text = m2Array[nextCar];
m3dtfV.text = m3Array[nextCar];
m4dtfV.text = m4Array[nextCar];
qqURL = qqArray[nextCar];
invURL = invArray[nextCar];
trace("The QQ URL for this car is " + qqURL)
trace("The INV URL for this car is " + invURL)
carImageV.loadMovie(imageArray[nextCar]);
carFaderV.gotoAndStop(2);
usePreloader ();
//get global variables ready for next image
totalCars = carData.childNodes[0].childNodes.length;
nextCar++;
trace("The next car is #" + (nextCar + 1) + " out of " + totalCars + " total.");
firstImagePassed = true;
setInterval(loadNextCar, slideShowSpeed);
}

//show the preloader and hide it once loaded
function usePreloader () {
filesize = carImageV.getBytesTotal();
loaded = carImageV.getBytesLoaded();
filesize2 = carFaderV.carFaderImg.getBytesTotal();
loaded2 = carFaderV.carFaderImg.getBytesLoaded();
while (loaded2 < filesize2) {
carFaderV.gotoAndStop(1);
}
if (loaded2 == filesize2) {
carFaderV.gotoAndStop(2);
}
while (loaded < filesize) {
preloaderV._visible = true;
}
if (loaded == filesize) {
setTimeout(playCarFader, 250);
preloaderV._visible = false;
}
}

//playCarFader function so setTimeout can be used above
function playCarFader () {
carFaderV.play();
}

//loading car datasets beyond the first
function loadNextCar () {
if (nextCar < totalCars) { //Are we at the end?
loadCarData (); //No? Show next dataset.
} else if (nextCar == totalCars) { //Yes? Restart.
msrpdtfV.text = msrpArray[0];
m1dtfV.text = m1Array[0];
m2dtfV.text = m2Array[0];
m3dtfV.text = m3Array[0];
m4dtfV.text = m4Array[0];
carImageV.loadMovie(imageArray[0]);
usePreloader ();
nextCar = 1;
}
}

function loadCarData () {
//load up the current dataset
trace("Loading car data for car #" + (nextCar + 1) + ".")
msrpdtfV.text = msrpArray[nextCar];
m1dtfV.text = m1Array[nextCar];
m2dtfV.text = m2Array[nextCar];
m3dtfV.text = m3Array[nextCar];
m4dtfV.text = m4Array[nextCar];
qqURL = qqArray[nextCar];
invURL = invArray[nextCar];
trace("The QQ URL for this car is " + qqURL)
trace("The INV URL for this car is " + invURL)
carImageV.loadMovie(imageArray[nextCar]);
usePreloader ();
nextCar++;
trace("The next car is #" + (nextCar + 1) + " out of " + totalCars + " total.");
}

//load up the next fading image
function nextFade () {
if (firstImagePassed == true){
lastCar = nextCar - 1
carFaderV.carFaderImg.loadMovie(imageArray[lastCar]);
trace("The next fading image is loading.");
}
}

stop();

The nextFade() function is called when the fading movieclip reaches the first frame (and stops there waiting to be used again), where it sits for a full five seconds and has plenty of time to load up the image, but like I said it doesn't seem to load it until the clip is actually played, which is why I'm thinking that this method isn't viable.

Any tips greatly appreciated!

[Medyman]

Using loadMovie is great when you're using something that loads relatively fast and/or the timing doesn't matter.

For instances where those two conditions aren't true, there is the MovieClipLoader class. With the MovieClipLoader class, you can track the progress of the load and only execute actions once something has completed loading.

I don't know what exactly is going on in your movie because it seems a lot of it is on the timeline. For projects like this, I generally keep everything in the actions panel because it's easier to tweak when you come across bugs like this.

In any case, have a look at this tutorial (http://gotoandlearn.com/player.php?id=27) by Lee Brimelow at gotoAndLearn(). He goes over how to load external SWF files using the MovieClipLoader class. Of course, you're loading images, but the same techniques apply.

Post back if you have more troubles.

[jlizarraga]

Thanks for your response, I will look into that when I have time.

There is only one bit of code going on outside of that big block of code, though, and that's my crappy fading method. Before I had the cars fading into each other, there was simply a loading screen being shown while the next car was loading and there were no timeline based actions whatsoever.

The thing is, the same preloader that was bringing up that loading screen is saying that the next image is loaded and ready to go, but it doesn't show up. What's even weirder is the thing where it works great once all the images are cached in your browser - the fading image is an image that has already been cahced - it's the last image you saw, so it's already been downloaded, cached, AND displayed, but it doesn't show on the first run through?

[Medyman]

Your images seem to be fading out fine. From my reading of your problem, you'd like the images to fade into each other.

It's that fading in of the second image that's giving you troubles. Like I suggested, use the MovieClipLoader class.

or...a kind of "low-tech" workaround would be to load the images off stage in dummy movieclips. That way they're cached by the time you need them.