Display Download Status In Your Flash Preloader

[blackbird52]

This forum thread discusses the SitePoint article 'Display Download Status In Your Flash Preloader' by Glenn Mitchell.

"Are users aborting your Flash downloads before they're complete? Keep your visitors informed! Glenn builds a preloader that provides file download status to users through text and graphics."

[johntabita]

I can't seem to get the preloader working. I run into a problem on page3, "Providing Feedback". The dynamic text does not display anything but a blank page before the actual content loads.

I've triple-checked my code, but can't find anything wrong. Is it this tutorial or just me?

[amri]

Same problem here....

Yes There is a problem around Page 3... i found that taking away the "add '%'" sign retified the problem but the numbers then counted from 100 downwards... i couldnt be bothered to further the mistake and just left it at that

Well, Tweedle dumb here made a few errors on the tutorial around page 3. first of all, when he states that add '%' actionscript, it should actually be add "%". Also, he has it counting down. On the actionscript line stating percent remaining, delete the 100 minus part. that should fix the problems with the preloader. darn, i should just write my own tutorial.

Excellent article.....with respect to the comments about 'Providing Feedback' (amri and johntabita) not working, make sure you put a key frame on frame 3 of your graphic layer....I think that instruction is omitted, but you need that to have the graphic part of the preloader displayed.

NOTHING APPEARS... I had the same prob then i changed the text box to 'Multiline' instead of 'Single Line' and It worked!!!

same here, no display on page 3...DOH

this is cool ... ok, i just needed the download status thing .. but it`s cool .. thanx for postin this..

Most excellent - thank you.
The "Uncheck the export in first frame"
tip helped immensely.

[Darin]

Hey Anonymous, do you realize how many posts you made and how much sense they make? It's amazing.

progress = percentRemaining add ‘%’;
on the pc this code should be:
progress = percentRemaining add '%';
Caused me a bit of grief but excellent article. : )

im lost.. i cant find the characters button in flash mx also my loader keeps flashing any help ?

There's a small bug:
progress = percentRemaining add '%';

It should be:
progress.text = percentRemaining add '%';

[glenn_a_m]

hi,

ok, I've been utra-slack and not replied to anyone's posts,

here's a few notes,

some of the code has assumed left/right handed quote marks (these will break the script)
(it dosen't matter if you use single or double quotes)

"progress should be progress.text" NO!
this isn't true, if you were paying attention I said set the 'variable' name to 'progress' NOT the 'instance' name.

umm, yes, it counts down (I thought that was kind of obvious, using a variableName like 'percentRemaining')
but if you want it to count up, use the 'percentLoaded' variable instead
progress = Math.floor(percentLoaded) add '%';

thanks for the feedback,
glenn

really the best article i've come across in my lengthy search for a solution to my preloader failure. your article was the first of many to even mention that linked assets would have an adverse effect on a preloader. i am still looking for a linked asset solution for flash 5 (i saw the flash mx fix). ill try to keep my chin up, thanks for your most helpful article to get me in the right direction.

Two Things:
I have this as my actionscript in frame 2:
kBytesLoaded = _parent.getBytesLoaded()/1024;
kBytesTotal = _parent.getBytesTotal()/1024;
kBytesRemaining = kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
percentRemaining = percentLoaded;
progress = Math.floor(percentRemaining) add "%";
progress = Math.floor(kBytesLoaded) add 'of'
add Math.floor(kBytesTotal) add 'kBytes loaded';
progress = Math.floor(timeRemaining) add " seconds remaining";
loadbar._xScale = percentLoaded;
Everything works, except i can't see anything. In the textfield we put progress(in the properties box) do we also put the ofkByteslad in there? so it would say "progress ofkbyteslad"? I don't understand that part and can't see aything at all when i load the movie...the bar does work though.... and also my movie loops...ofcourse, but i see the preloader for a split second everytime the movie loops. please help...
thanks,
daved

[El Guiri]

Originally Posted by Anonymous

Two Things:
I have this as my actionscript in frame 2:
kBytesLoaded = _parent.getBytesLoaded()/1024;
kBytesTotal = _parent.getBytesTotal()/1024;
kBytesRemaining = kBytesTotal - kBytesLoaded;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
percentRemaining = percentLoaded;
progress = Math.floor(percentRemaining) add "%";
progress = Math.floor(kBytesLoaded) add 'of'
add Math.floor(kBytesTotal) add 'kBytes loaded';
progress = Math.floor(timeRemaining) add " seconds remaining";
loadbar._xScale = percentLoaded;
Everything works, except i can't see anything. In the textfield we put progress(in the properties box) do we also put the ofkByteslad in there? so it would say "progress ofkbyteslad"? I don't understand that part and can't see aything at all when i load the movie...the bar does work though.... and also my movie loops...ofcourse, but i see the preloader for a split second everytime the movie loops. please help...
thanks,
daved

I think the problem is that you haven't defined your character options. In Flash MX click on one of the text fields and in 'Properties' click on 'Character'. Now, check the 'Only' box, the 'Numerals box and in 'Add these characters' add the letters that you are using in your texts (only once per letter).
Mind you, if that's not the solution, could it be that your movie is on a white background and you haven't selected a colour for your text boxes?

[glenn_a_m]

Hi,

chances are, you've entered "progress" as the instance name (it should be the variable name - this is also in the properties box for the textfield).

sorry, I should've stressed the difference in the tutorial, it seems to have tripped a few people up.

cheers,
glenn

Great tutorial, Glenn
I wanted the time remaining to be displayed as minutes and seconds, so I added a little code to get this done. The final script in that 2nd frame of the preloader ended up looking like this:

kBytesLoaded = _parent.getBytesLoaded()/1024;
kBytesTotal = _parent.getBytesTotal()/1024;
kBytesSec = kBytesLoaded/(getTimer()/1000);
kBytesRemaining = kBytesTotal - kBytesLoaded;
timeRemaining = kBytesRemaining / kBytesSec;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
percentRemaining = 100 - percentLoaded;
progress = Math.floor(percentLoaded) add '% of '
add Math.floor(kBytesTotal) add ' KB';
minutes = Math.floor(timeRemaining/60);
seconds = Math.round((timeRemaining/60-minutes)*60);
progress_time = minutes+' minutes '+seconds+' seconds remaining';
loadBar._xScale = percentLoaded;

Thanks again, Glenn.

[iwilson]

Originally Posted by glenn_a_m

hi,

ok, I've been utra-slack and not replied to anyone's posts,

here's a few notes,

some of the code has assumed left/right handed quote marks (these will break the script)
(it dosen't matter if you use single or double quotes)

"progress should be progress.text" NO!
this isn't true, if you were paying attention I said set the 'variable' name to 'progress' NOT the 'instance' name.

umm, yes, it counts down (I thought that was kind of obvious, using a variableName like 'percentRemaining')
but if you want it to count up, use the 'percentLoaded' variable instead
progress = Math.floor(percentLoaded) add '%';

thanks for the feedback,
glenn

Hi Glenn,

I've worked my way through you % tutorial several times now and have this problem:
my %age preloader only displays at well past 50-60% loaded. When I preview, (as streaming) it will only display, say, 67% and up to 100% under14.4 or 56 etc.

How can I get it to display % from 0% and up?

Here's the code (all I want to display is number and %sign):

kBytesLoaded = _parent.getBytesLoaded()/1024;
kBytesTotal = _parent.getBytesTotal()/1024;
kBytesSec = kBytesLoaded/(getTimer()/1000);
kBytesRemaining = kBytesTotal - kBytesLoaded;
timeRemaining = kBytesRemaining / kBytesSec;
percentLoaded = 100 * kBytesLoaded / kBytesTotal;
percentRemaining = percentLoaded;
progress = Math.floor(percentLoaded) add "%"

Thanks.

[glenn_a_m]

hmmm,

sounds like you've got a heavy first frame,

are you using linked assets ('export for actionScript')?
if so, watch out for the 'export in first frame' option
(see the last page of the tutorial)

try to put as little as possible in the first frame, as flash cannot display anything at all until that frame has loaded.

cheers,
glenn

[iwilson]

Originally Posted by glenn_a_m

hmmm,

sounds like you've got a heavy first frame,

are you using linked assets ('export for actionScript')?
if so, watch out for the 'export in first frame' option
(see the last page of the tutorial)

try to put as little as possible in the first frame, as flash cannot display anything at all until that frame has loaded.

cheers,
glenn

Glenn, Thanks for your tutorial and for your reply. I did at the beginning go back and uncheck the first frame export option. I am also making sure that there is a blank keyfame for each layer. This has helped. Next tutorial, I will print out and read s-l-o-w-e-r! But what seems to have also helped is deleting a lot of unecessary items from each movie's library. I have several swfs load for each site component (nav, homepage, various pages, etc.) When I created each page, I copied each page as a template and I guess the library was copied (yes, I'm VERY new to this! -the sound of a palm slapping a forehead here, please.) I noticed this and went deleting. It seems to have worked.

Thanks,
Ian

[Lars2]

First of all, very nice tutorial!

I only have one problem, I use the same preloader in the beginning of every scene, yet the ENTIRE site gets loaded on the first scene (should only load the _parent so the scene containing the preloader??).

Please help me out here, it 's very important to get this fixed cause I 've added some pictures to the site and now it takes too long to load the main page.

Let me know if you still check this page so I can send you my .fla (if you can't tell me how to solve this here), many thanks.

Excellent tutorial on preloaders! Solid work.