Advanced loader (flash mx)

ok been a while since have written a tut so here goes.....

I have posted a previous tut on creating a preloader in flash which checked frames loaded but I thought I would right a more advanced one that checks BytesLoaded against BytesTotal and also incorporates a loading bar and percent loaded figure to give people viewing your file an idea of how long is left till its all loaded.....ok on with the tutorial - I am going to assume that your familiar with the Flash MX enviroment and are able to use the basic tools as well as give objects instance names......

right lets set the scene :)

your preloader is going to need 3 layers - I'm going to name them

1. Loader
2. Text
3. Actions

now the Loader layer is going to contain the actual loading bar and the precent box so lets start with it.....

create a new rectangle with the border and fill set at the same color. Now select the border and make it a graphic (windows press F8) called container.

Now select the fill and convert it to a movie clip (F8 again) called bar - now you need to give it an instance name as well so we can refer to it in our action code later.......to give something an instance name select it and down in the bottom left of the properties bar you should see a text box for instance name....write it in there. We also need to make sure that it registration point is at the far left. A registration point is the lil white dot when u click on the movie clip.

To do this select the bar mc (movie clip) and hold shift drag it to the left so that the lil white dot is level with the far left of the container. now you should see that the container is half filled and half not (its sticking out the left) so double click on the bar mc to edit and move the fill so that is once gain filling the entire container ;)

now on your text layer add your text - you know something like now loading
usual kinda thing.....

thats the main thing set up so lets get down to the action scripting......

ok gonna scare you now and paste the entire code but don't worry will go thro it after
this code all goes inside the first frame on your actions layer....

Code:

---

stop();
myInterval = setInterval(preloader, 10);
function preloader(){
        if (getBytesLoaded()>=getBytesTotal()){
                play();
                clearInterval(myInterval);
        }
        bar._xscale = (getBytesLoaded()/getBytesTotal())*100;
}

---

right aint that complex.....lets break it down

stop(); self explanitary, stops the movie so it doesn't go on until all the criteria have been met - in this case BytesLoaded is equal to BytesTotal

myInterval = setInterval(preloader, 10); this tells it to call it every 10 milliseconds

if (getBytesLoaded()>=getBytesTotal()){ this simply means if The Bytes Loaded is more than or equal to the Total Bytes then carry out the next action....

which is....

play();
clearInterval(myInterval); simple enough plays the movie - the clear interval just gets rid of the myInterval now we dont need it as its all loaded....

bar._xscale = (getBytesLoaded()/getBytesTotal())*100; controls the x scale of the bar mc depending upon Bytes Loaded divided by Bytes Total multiplied by 100

ok give it a shot - put some large graphic or something in the next scene so it has something to load and then go to control > Test Movie
now you need to see it as you would on the web so select view > show streaming
you can alter the conection speed to test under debug

right so all good so far the more loaded the bigger the bar gets right lets add our percentage box.....

on your loader layer draw a dynamic text box and call it myTextField (once agin in the instance box)
now we just need to add a lil bit more code.....

in the code you just entered place after....

[color=red]bar._xscale = (getBytesLoaded()/getBytesTotal())*100;[/red]

this code....

Code:

---

myTextField.text = Math.round(getBytesLoaded()/getBytesTotal()*100)+"%";

---

this just tells the flash movie what it should show in the text box in this case Bytes Loaded divided by Bytes Total multiplied by 100 and then after that a precentage sign.

ok so your complete code should now look like this....

Code:

---

stop();
myInterval = setInterval(preloader, 10);
function preloader(){
        if (getBytesLoaded()>=getBytesTotal()){
                play();
                clearInterval(myInterval);
        }
        bar._xscale = (getBytesLoaded()/getBytesTotal())*100;
        myTextField.text = Math.round(getBytesLoaded()/getBytesTotal()*100)+"%";
}

---

give it another test same as before - there ya go :)

well hope that was helpful to someone

v_Ln

edit -> adding .fla with the preloader in it - the video file it preloads is off one of the girls i had work with doing club visuals - no not porn :P but is a nice perk of the job!