% follow preload

I'm sure this has been asked before sometime, somewhere; but i can't find the thread for the life of me. I've been working on this script for a few days now, but just can't get it to work right.
My scenario:
I have a dynamic text box(loadText) and a preload bar (loadBar) on first keyframe. Keyframe two has a large image just to get the dang thing to work. Back to keyframe one...i have the following AS:

Code:

---

_root.onEnterFrame = function()
{
var totalBytes = _root.getBytesTotal();
var loadedBytes = _root.getBytesLoaded();
var percentComplete = (loadedBytes/totalBytes) * 100;

if (percentComplete >= 100) gotoAndPlay(2);

loadText._x = loadBar._x+loadBar._width
}

---

What this AS is supposed to achieve is for the loadText's percent in the dynamic textbox to follow the loadBar loaded along the x-axis.

Any suggestions, ideas?
Gratzi, take care.

I usually find it easier to work with ratios (which go from 0 to 1) instead of percentages. Percentages are better for human consumption.

Values which go from 0 to 1 are easy to work with - you can multiply it by your progress bar width to get the position you want.

Then, when you want to display it to a human, multiply it by 100.

code:

---

_root.onEnterFrame = function()

{

  var totalBytes = _root.getBytesTotal();

  var loadedBytes = _root.getBytesLoaded();

  var ratioComplete = (loadedBytes/totalBytes);



if (ratioComplete >= 1) gotoAndPlay(2);



loadText._x = loadBar._x  + loadBar._width*ratioComplete;



  // Now display the percentage

  loadText.text = ratioComplete*100 + "%";

 

}

---

Thanks for helping me out again, Jbum :)
Two quick questions. For some odd reason, my loadBar isn't "growing" as it loads(i.e. getting the width from the ratio). Also, the loadText seems to continue moving along the x-axis past the loadBar. My approach for allowing the loadBar to "grow" is:

Code:

---

this.loadBar.width = getRatio*100;

---

But it doesnt seem to work. I have no idea how to approach the loadText problem, though. Thanks again Jbum. :)

Whoops, I assumed you loadbar width was fixed, in my example. In that case...

Once you get the loadbar width working, then

loadText._x = loadBar._x + loadBar._width;

should work for the text.

However, where are you getting 'getRatio' from? I assume it's the same value I'm computing as 'ratioComplete'. A few trace() calls should help immensely for debugging this...

Ok, i tweaked the AS considerbley:

Code:

---

bytes_loaded = Math.round(this.getBytesLoaded());
bytes_total = Math.round(this.getBytesTotal());
getPercent = bytes_loaded/bytes_total;
this.loadBar._width = getPercent*100;
loadText._x = loadBar._x  + loadBar._width;
loadText.text = bytesComplete*100 + "%";
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}

---

Now, my only problem is that i can't get the loadText to display the percentage loaded, it simply remains at 0. What in the world am i doing wrong? ah :(

Whoops I think I found it. You were using the non-existant variable 'bytesComplete'.

In this fix, I renamed getPercent to getRatio (because it's a ratio, and not a percent).

code:

---

bytes_loaded = Math.round(this.getBytesLoaded());

bytes_total = Math.round(this.getBytesTotal());

getRatio = bytes_loaded/bytes_total;

this.loadBar._width = getRatio*100;

loadText._x = loadBar._x  + loadBar._width;

loadText.text = getRatio *100 + "%";

if (bytes_loaded == bytes_total) {

  this.gotoAndPlay(3);

}

---

Also make sure that the dynamic text field does NOT have a variable associated with it (in the properties).

Here's a shorter version that should be functionally identical.

code:

---

getRatio = this.getBytesLoaded()/this.getBytesTotal();

this.loadBar._width = getRatio*100;

loadText._x = loadBar._x  + loadBar._width;

loadText.text = getRatio*100 + "%";

if (getRatio == 1) {

    this.gotoAndPlay(3);

}

---

Note that in this line:

bytes_loaded = Math.round(this.getBytesLoaded());

the rounding doesn't make sense, since getBytesLoaded() returns an integer (and even if it didn't, the value is not in need of rounding.

Ditto for getBytesTotal().

One other thing, if you want to force the percentage to an integer, use this:

loadText.text = Math.round(getRatio*100) + "%";

This line is one of the very few appropriate uses of rounding and percentages -- for preparing data for humans to read.

Thanks for taking a look at this bundle of confusion. I'll continue to chop away at it.

I edited the prior post - take a look.

Here's the version I made after looking at your movie. I changed the width of the bar to match the clip width in your movie.

code:

---

getRatio = this.getBytesLoaded()/this.getBytesTotal();

this.loadBar._width = getRatio*234;

loadText._x = loadBar._x  + loadBar._width;

loadText.text = Math.floor(getRatio*100) + '%';

if (getRatio == 1) {

  this.gotoAndPlay(3);

}

---

This is a good example of why I like ratios better than percentages. If you had computed the percentage right away, the script would have read:

code:

---

getPercent = Math.round(this.getBytesLoaded()*100/this.getBytesTotal());

this.loadBar._width = (getPercent/100)*234;

loadText._x = loadBar._x  + loadBar._width;

loadText.text = getPercent + '%';

if (getPercent == 100) {

  this.gotoAndPlay(3);

}

---

Personally I don't like this as much because every time you want to use the percentage for something, the math is more complicated. The only thing it simplifies is displaying the text for human consumption (something which I personally don't think is necessary - the scroll bar itself speaks volumes).

Ah :) you posted the solution just as i posted my .fla Thanks so much for helping me with this, Jbum. I can honestly say that i learned quite a bit more than i knew. Take care.

Coolness. One more edit in the prior post. Enjoy!

I'm as giddy as a school girl :) Thanks again, Jbum. You should really consider whipping up tutorials. This thread alone could be converted into one. I can vouch for the ability for someone to learn immenseley from it :).