I have XML files with both .swfs and .jpgs externally being loaded into a main
..swf file via clicks from buttons.

The .jpgs and .swfs are loaded into a container entitled "picture"

I have this preloader setup (code below) but the files don't seem to be
preloading. Since the files are being preloaded per click and are being loaded
into a container I am preloading the container and checking if the contents are
loaded and if so then it should fade the image or swf in but it isn't. They
just appear instead of fading in.

Any ideas? I didn't want to use the loader component if I can get away with it.

Thanks
Neil



function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
sectitle = [];
thumbnails = [];
client = [];
project = [];
_global.total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
sectitle[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
client[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue;
project[i] = xmlNode.childNodes[i].childNodes[5].firstChild.nodeValue;
thumbnailer(i);
}
firstImage();
} else {
trace("file not loaded!");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(_root.xmlDoc);
/////////Load First Image
Function///////////////////////////////////////////////
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
title_txt.text = sectitle[0];
client_txt.text = client[0];
project_txt.text = project[0];
}
}


/////////Image Preloader
Function//////////////////////////////////////////////////////
p = 0;
preloader._visible = false;

onEnterFrame = function(){
loaded = Math.round(picture.getBytesLoaded());
filesize = Math.round(picture.getBytesTotal());
myPercent = loaded/filesize;
preloader.preload_bar._width = myPercent*150;
myText = Math.round(myPercent*100)+"%";
if (loaded != filesize) {
preloader.preload_bar._width = myPercent*150;
} else {
picture._alpha<100;
picture._alpha += 10;
}
}


//////////Load clicked thumbnail Image
Function////////////////////////////////////////////////
function callImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
client_txt.text = client[p];
project_txt.text = project[p];
}
}

Not fully sure what not working means.

Is it testing in the IDE? Then be sure to use the bandwidth profiler streaming
in the Test->Movie.

Is it in the web browser? Perhaps you need to clear the cache?

Do you think its the code, then add some trace statements in the onEnterFrame
that display the values when in IDE Test-Movie with a real low streaming
bandwidth value or use a TextField for tracing if testing from a web browser.

Well not fully working means that in the Flash environment through the
bandwidth profile set to DSL 33K/sec it works fine. So locally it seems to be
working and when I say working I mean that the preloader loads the file (swf or
jpg) and then fades in the container clip with the image or swf in it upon
completion.

However online, since loading is so fast you don't see any preload bar
movement which is fine, however the jpgs that are loaded don't fade in, they
just appear and after a delay so it almost appears like the preloader isn't
working correctly online or something is astray.

I clear the cache each time I recheck the page online so it can't be that. I
am unsure what to do because of the disparity of online vs. local.

You can see it for yourself online at
http://www.visim.com/testgallery/portfolio.html To see what I mean regarding
the .jpgs being loaded without fading go to the "Experimental" or "Branding"
sections and click the thumbnails. The loading bar will jump quickly and the
image will just appear BUT if you go back to images you already cached they
fade in fine...

I have also edited the preloader code a bit as seen below.



function preXML() {
preloader.preload_bar._alpha = 100;
preloader.preload_bar._visible = true;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader.preload_bar._visible = true;
if (loaded != filesize) {
preloader.preload_bar._width = 100*loaded/filesize;
} else {
if(preloader.preload_bar._alpha > 0){
preloader.preload_bar._alpha -= 10;
}else{
preloader.preload_bar._visible = false;
}
if (picture._alpha<100) {
picture._alpha += 10;
}
}
}
};
preXML();

The problem only occurred for the first image I clicked. After that, the
preloader functioned as I would have expected for each image. Could there be
an issue with the xml load on the server that's not occurring during local
testing?

Hmm thanks for looking so each photo in the branding or experimental section
faded in fine upon loading?

Yeah I wish there was a way to test if there was an issue just with the
server. The strangest part is that I am fading in the picture clip which holds
the images. The picture clip's alpha is set to 0 initially so it can fade it so
there is no reason for the image to just appear.

I also though of perhaps adding a delay with set interval before fading in the
picture but I don't know if that would work or if it would just screw things up
even more. Before I attempt this, do you think adding a delay to the image
appearing would allow it to fade in correctly?

Saw same results as SymTsb.
Must be in code since you have code special for the first image.
Not sure of your programming skill, but take care of variable scoping and that
Flash will work with undefined variables.

Here is one I am not sure about.
function firstImage() {
if (loaded == filesize) {

Is this the local "loaded" variable for the XML.onLoad or a variable at the
root.

If it is a local onLoad, then it might be undefined in the function.

Ok here is a twist for you guys. I just tested it in IE 6.5 and it works
perfect for me, the preloader and everything. In Firefox 2.0 which I was using
before is where all the problems occur. I thought flash files are universally
seen the same or would it have to do with the code in the html file?

That function "firstImage" is just loading the first image in the xml file
because there hasn't been a click yet on any of the thumbnails. The loaded
variable is the amoung of the image loaded and the filesize is the amount of
the total file size of the first image. Are you saying I should declare
filesize = picture.getBytesTotal(); and loaded = picture.getBytesLoaded();
within the function or should I define it outside of the function so it is
available to all the functions?

1. Not that it is the problem but there can be browser differences: the version
of Flash in each browser can be different, the html OBJECT and EMBED tag are
somehow not pointing to the same item or have an option set differently or are
providing a different amount of cpu slices so timing inside a clip could be the
problem and I am sure more if I think long enough.

The timing one is I think is your problem.

After more careful study of your code, the reason the first load is probably
not triggering the preloader is that picture is not defined. So the numbers for
fileSize and loaded inside of the onEnterFrame event are undefined long enough
for the if statement to be true undefined == undefined.

How this occurs is that loadMovie can create a point where the clip is
undefined during the initial handshake.

Your better route is to use MovieClipLoader. However if you test for
undefined that may work
if (loaded!= undefined and fileSize!=undefined)
{
//... all the code in onEnterFrame
}

For MovieClipLoader look at
http://livedocs.macromedia.com/flash/8/main/00002545.html

3. Its the use of loaded as both a local function scoped variable in onLoad
and then outside the function without it being declared bothers me.

In general all variables that are shared between functions should be declared
outside and those only to be used inside. Example
var loaded:Boolean

If you declare all variables that are not arguments, then Flash will give you
publish time error messages and will not be confused during run time.

For example inside of onEnterFrame
var filesize:Number = picture.getBytesTotal();
var loaded:Number = picture.getBytesLoaded();

This approach will reduce silent fails and lost time.

You are definitely right in that something isn't loading correctly and isn't
being defined. I just put up a dynamic text field online to test it out and
when you cick on the thumbnails the loadbar blinks quick and then in the
dynamic box in Firefox you see NaN% and then it goes right to 100%.

It's weird though, in IE, you still get that blinking of the loadbar (i don't
know it is blinking quickly at first) but then the loader kicks in perfectly
after that and doesn't display any NaN%. I am using SWFObject too so it should
be fairly universal.

I may look into the MovieClipLoader but after already spending a couple weeks
on this I am to the point where it's just driving me nuts. I don't know how
much else would have to be changed after adding the movieClipLoader, it might
just create a chain too complicated for me to get everything working. I just
want it to be done.

Thanks for your help.

Its a common item. The loadMovie method kills the movieClip and reinitializes.
The timing of this you cannot detect other than looking at picture as undefined
in the onEnterFrame method
this.onEnterFrame = function() {
if (picture != undefined)
{
// ... All your current code
}
}

How does this look to you? Perhaps I missed something, I added
picture!=undefined before the onEnterFrame as well as in the other two image
call functions but still getting NaN online when viewing but no nan locally.
Argh

Heres the latest code.

var filesize = picture.getBytesTotal();
var loaded = picture.getBytesLoaded();

function loadXML(success) {
if (success) {
xmlNode = this.firstChild;
image = [];
description = [];
sectitle = [];
thumbnails = [];
client = [];
project = [];
_global.total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
thumbnails[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
sectitle[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
client[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue;
project[i] = xmlNode.childNodes[i].childNodes[5].firstChild.nodeValue;
thumbnailer(i);
}
firstImage();
} else {
trace("file not loaded!");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(_root.xmlDoc);

/////////Load First Image
Function///////////////////////////////////////////////
function firstImage() {
if (loaded == filesize && picture != undefined) {
preXML();
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
title_txt.text = sectitle[0];
client_txt.text = client[0];
project_txt.text = project[0];
}
}


/////////Image Preloader
Function//////////////////////////////////////////////////////
p = 0;
function preXML() {
preloader.preload_bar._alpha = 100;
preloader.preload_bar._visible = true;
this.onEnterFrame = function() {
if (picture != undefined) {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
//preloader.preload_bar._visible = true;
myPercent = loaded/filesize;
myText = Math.round(myPercent*100)+"%";
if (loaded != filesize) {
preloader.preload_bar._width = 100*loaded/filesize;
} else {
if(preloader.preload_bar._alpha > 0){
preloader.preload_bar._alpha -= 10;
}else{
preloader.preload_bar._visible = false;
}
if (picture._alpha<100) {
picture._alpha += 10;
}
}
}
}
};
preXML();


//////////Load clicked thumbnail Image
Function////////////////////////////////////////////////
function callImage() {
if (loaded == filesize && picture != undefined) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
//title_txt.text = sectitle[p];
client_txt.text = client[p];
project_txt.text = project[p];
}
}

//////////Enable All the Buttons//////////////////////////////////////////
function enableButtons() {
for (var cclip = 0; cclip<_global.total; cclip++) {
this["this.thumbnail_mc.th"+cclip].enabled = false;
enabled = false;
//_alpha = 20;
}
}
//////////Thumbnail maker///////////////////////////////
function thumbnailer(k) {
loaded_counter = 0;
total_thumbs = _global.total;
var container = thumbnail_mc.createEmptyMovieClip("th"+k,
thumbnail_mc.getNextHighestDepth());
container._visible = false;
container._alpha = 0;
var image = container.createEmptyMovieClip("img",
container.getNextHighestDepth());

tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc.pictureValue = k;
//make the initial thumbnail disabled and transparent
var initialBut = thumbnail_mc.th0.img;
thumbnail_mc.th0.img.enabled = false;
thumbnail_mc.th0.img._alpha = 50;

target_mc.onRelease = function() {
initialBut.enabled = true;
initialBut._alpha = 100;
oldBtn.enabled=true;
oldBtn._alpha=100;
p = this.pictureValue;
callImage();
preXML();
clearInterval(_root.container.picture.hold);
this._alpha = 50;
this.enabled = false;
oldBtn=this;
};
target_mc.onRollOver = function() {
this._alpha = 50;
_root.firstSound.start();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
loaded_counter++;
counting_txt = loaded_counter;
if (loaded_counter == total_thumbs) {
main_menu.boton1._visible = false;
main_menu.boton2._visible = false;
grid_maker_01();
}
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.th"+k+".img");
}

The Nan is coming from values that cannot be computed. Since the source of the
values are
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
They may not be defined or accurate even though picture is defined. This is a
problem I believe with loadMovie. It may be one or both values are incorrect
because not all the metadata is available although the variable is defined.
I would display those values in your live test. Then once you see what is
going on you can patch the code to check those values to be sure they are
correct for using them.