Flash JPG Rotator - Fixing the IE problem
After browsing for a good Flash JPG Roatator on the Internet, I finally found a great one that was created by Jeroen Wijering. The rotator is great! That is until I got numerous reports by people using Internet Explorer that after the first round of rotations, the banner goes blank!
Considering this banner is on a fairly high traffic site (www.calvarycch.org), I couldn't allow this to be a problem. I went onto the forums for this project and many other people had a similar problem.
Well seeing as the problem with Internet Explorer was that it wasn't loading the picture correctly. So I looked at the author's code (which is very well written with great comments) I found the section that has to do with loading the pictures. This occurs around line 169:
// rotation step 1: // some initialization stuff //---------------------------------------------------------------------
function rotateStepOne() {
// kill the current interval rotation clearInterval(rotateInt);
//kill the buttons before rotation starts killButtons();
// load the jpg file loader.loadClip(paths[nextImage],"container"+containerUp);
};
I figured that the problem must have to do with the loadClip function of the MovieClipLoader in Flash. Sure enough, after a quick Google search of "loadClip problem Internet Explorer", I found that the problem was with Internet Explorer keeping the cache stored for an image that is loaded into the loader clip. With this, I found a solution on somebody's web site, unfortunately I cannot remember where, that suggested you add a random number as a query string variable to the URL of the file you are trying to load. To do this, look at the code above and find the line that says "loader.loadClip(.....)" you want to change this line to this:
I compiled the file and published it to the website. After viewing in IE again, I noticed that this didn't quite fix the problem. Now the file wasn't going completely blank, but rather some images (different for each round of rotations) would be blank and others would show up. So I figured this problem did not have to do with the loadClip anymore because clearly Internet Explorer was loading some of the images, just now consistently. If you look at the author's code, you can see that he does not actually show the image until it is fully loaded in the clip. You can find the code for this around line 184:
// rotation step 2: // what happends after the image has loaded //---------------------------------------------------------------------
loadListener.onLoadComplete = function() {
// swap containers container1.swapDepths(container2);
// set image dims to stage dims setStageInt = setInterval(setStageDims, 25);
// determine transition to use if jpg has loaded if (transition == "fade") {
rotateStepThreeFade();
} else if (transition == "bgfade") {
rotateStepThreeBgfade();
} else if (transition == "circles") {
rotateStepThreeCircles();
} else if (transition == "blocks") {
rotateStepThreeBlocks();
} else if (transition == "fluids") {
rotateStepThreeFluids();
} else {
trace("no transition by that name");
}
};
After another Google search, I found that IE can have a problem with the onLoadComplete function. Actually the article that I found said that they were having problems with IE and the onLoadInit problem, and they repalced there code with onLoadComplete. I did the opposite; I tried replacing the author's code for onLoadComplete with the onLoadInit function as follows:
loadListener.onLoadInit = function() {
// swap containers container1.swapDepths(container2);
.....
To my great surprise, I compiled the file and published it to my web site and it worked flawlessly! It now has no problems loading the files and transitioning them consistently. There are no gaps and no blanking. Just to make sure, I tested the code in Internet Explorer (PC), Firefox (PC), Safari (Mac), Firefox (Mac), Opera (Mac), and Camino (Mac) and everything worked great!
var mclListener:Object = new Object();
mclListener.onLoadStart = function(mc:MovieClip) {
_root.bar._visible = true;
_root.border._visible = true;
_root.pText._visible = true;
showcaseOnDeck = true;
};
mclListener.onLoadProgress = function(mc:MovieClip, lBytes, tBytes) {
if (((lBytes/tBytes)*100) > preloader) {
preloader = Math.floor((lBytes/tBytes)*100)
_root.bar._xscale = preloader;
}
};
mclListener.onLoadInit = function (mc:MovieClip) {
//trace(mc);
_root.goAheadShowDisplay = true;
showcaseOnDeck = null;
_root.lockedStocked = false;
_root.border._visible = false;
_root.bar._visible = false;
preloader = 0;
}
var mcDisplay:MovieClipLoader = new MovieClipLoader();
mcDisplay.addListener(mclListener);