First you want to make a new document. size shouldnt matter.

Grab the rectangle tool and for fill and border you want to choose black.

Now draw your rectangle on stage, any width and height, it doesnt matter.

Click on the middle of your rectangle (so no borders) and press ctrl + I (info)

change the width to 10px and the height to 1px for a verticle preloader, and for a horizontal preloader change the width to 1px and height to 10px.

now, go to the properties panel (ctrl + F3) and go to INSTANCE NAME

name your bar loadBar ThiS iS CaSe SeNsItIvE!!!!!

now, deselect your bar by clicking anywhere off stage.

select your border (all of it) and go to MODIFY > Convert to symbol (f8)

choose graphic and press OKAY.

Now, press ctrl + I again and change the width to 11px and the height to 150px*

*note, this can be any number, but you will have to change your code to fit it later.


Next step, CREATE a new layer and place it above your current one.

in the first frame of the new layer put this code into the actions panel (F9)

In the second frame create a new KEYFRAME and paste this code
Now create a third keyframe and put this code
__________________________________________________ ____________
Break down of the code

This declares the variable "bytes_loaded" which uses a feature in Flash called getBytesLoaded and determines how many bytes of your movie have been loaded thus far by the viewer. The Math.round() in the code tells Flash to round the number off so it becomes a whole number instead of an eight decimal places number.... because let's be honest, who wants to read a percentage that is eight decimal digits.

This declares the variable "bytes_total" which uses a feature in Flash called getBytesTotal and determines how many bytes your entire movie contains for the viewer to download. I already explained the Math.round() part for the getBytesLoaded. Using getBytesTotal and getBytesLoaded we can determine what percentage we have loaded and have yet to load.

Here we are declaring a variable which I named getPercent. We will take the variables bytes_loaded and bytes_total and divide them so we can determine how much has been loaded thus far in our movie. I declared it in a variable because we will be using it twice in the script, so instead of typing it out twice, I decided to declare it in a variable and use that variable later in the script.

This is where we work with our preloader bar. It takes the value produced by the getPercent variable and multiplies it by 100. You may ask why the 100 is blue above, and I will tell you why. The 100 is blue because you can multiply it by whatever you would like, the number you place there determines the ending width of your loadBar movie clip. Since you drew the border for your clip on the stage already, I recommend using the width of your movie clip on the stage. You can select your clip and open the properties panel to see what the width is. Of course.... this.loadBar is your loadBar movie clip and the _width at the end is what allows you to change the width of the clip so it can grow and fill in your border ouline of your original loadBar clip.


This would be your final if statement. What it says is that if the number produced in the variable bytes_loaded is finally equal to the number produced from the variable bytes_total then the movie should gotoAndPlay the 3rd frame on the timeline.


Thank you for reading this tutorial and I hope all your flash movie creations go well!