Learn to create the basic preloader with a loading bar showing how much of the movie has loaded. The advantage of a graphical preloader of this kind is that is the most intuitive for a user to see how much more she or he must wait to acces your site. Here’s a nice preview of what you’ll be creating in this tutorial:
Placing the elements on stage
1 Open a new Flash document. Create two more layers, so you have three of them in total. Call them (bottom to top): bar, frame and actions. Lock the upper two layers.
2 In the "Colors" part of the Tools panel, choose a stroke color that is in good contrast with a fill color of your choice. Don't choose white if your movie background is white.
3 Choose the Rectangle tool (R) from the Tools panel and choose "hairline" as type of border in the Properties panel, below the stage.
4 Click and drag on stage to draw a long and thin rectangle - your preloader bar.
If you accidentally deselected the bar, select it now again with the Selection tool (V). Be sure to have selected both the fill and the outline. Now, in the properties panel, check that the coordinates for your drawing (X and Y) are whole numbers. If they are not, make them so by entering a number manually (for example,120.0 is OK, while 120.5 is NOT).
5 Select the outline by double-clicking on it.
6 Cut the outline by choosing Edit > Cut or pressing CTRL+X (Command+X on a Mac).
7 Lock the current (bar) layer and unlock the frame layer. Click on its first keyframe to select it and choose Edit > Paste in Place to place the outline exactly in the same position as before, but on a different layer.
8 Lock the frame layer and unlock the bar layer. Select the fill color shape in the bar layer and choose Modify > Convert to Symbol. In the Convert to Symbol dialog, choose "Movie clip" as Type and be sure that the Registration point of your movie clip is in its top left corner (see image below). Call the movie clip progress bar mc or whatever you like. Click OK.
Cool! Now, why is the registration point important? Because it is from this point that your progress bar will stretch when told to do so via actionscript. If the registration point of your movie clip were in the center, the movie clip would stretch to both sides (left and right) as your site loads, instead of only to the right.
9 With the movie clip you just created still selected, go to the Properties panel and give it an Instance name, so you can manipulate it with actionscript. Call it loadingBar.
10 Create a new layer, call it placeholder. This is the layer where you'll place a movie clip into which the external SWF (your site) will load. Select its first keyframe (and only one).
11 Create an empty movie clip into which your site will be loaded. Do this by choosing Insert > New Symbol. Call it empty mc, select "Movie clip" as Type and click OK. Now, just click on the "Scene 1" link above the timeline. There! You just created an empty movie clip!
12 Open the library (Window > Library) and you'll see empty mc inside. Drag an instance of this movie clip onto the scene. If you followed everything correctly up to this point, your empty movie clip should be situated in the placeholder layer. The empty movie clip is represented on the stage just by its registration point. Move this movie clip to a suitable position (remember, your external SWF file which contains your site will be loaded in it) - the top left corner of the stage is ok.
13 With the empty movie clip still selected, go to the Properties panel and give it an instance name: siteLoader, for example.
Lock the placeholder layer.
Preparing the site files
14 Save your document if you haven't already (making saving often the documents you are working on a habit). Now, in the same folder where you saved this document, put your SWF file containing your flash site. If you haven't got one right now, download the sample SWF file I made so you can quickly continue with the following steps.
Writing the actionscript
15 Select the first keyframe in the actions layer. Open the Actions panel (Window > Actions). Enter the following code:
siteLoader.loadMovie("mysite.swf");
loadingBar._xscale = 1;
loadingBar.onEnterFrame = function() {
kBytesLoaded = this._parent.siteLoader.getBytesLoaded() / 1024;
kBytesTotal = this._parent.siteLoader.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}
16 Test your movie (Control > Test Movie). While in test mode, select View > Simulate Download to simulate a 56 K modem user downloading your movie from the web. You will see your preloader showing how much more there is to wait before the site shows up.
Explaining the actionscript code
The first line,
siteLoader.loadMovie("mysite.swf");
makes the external file mysite.swf load into the siteLoader movie clip. This is done with the loadMovie command. With this same command, you can load JPEG images in your flash movie, which is very handy, especially if you have a picture gallery.
Always specify the full path to the SWF you want to load, otherwise it might not work. This is because of security measures implemented in the Flash player.
The next line,
loadingBar._xscale = 1;
tells the loadingBar movie clip (the progress bar) to set its _xscale property to 1. Why? To make its width the smallest possible, because at this point, the outer movie has just begun loading.
The _xscale property tells how much an object is wide in relation to its original width. This is a percentage value. To explain this, imagine that your movie clip is for example 300 pixels wide. If you set its _xscale property (the default value of which is 100) to 1, it would mean 1% of the original 300 pixels, which is 3 pixels.
We'll return to the _xscale property soon, let's see what's next:
loadingBar.onEnterFrame = function() {
kBytesLoaded = this._parent.siteLoader.getBytesLoaded() / 1024;
kBytesTotal = this._parent.siteLoader.getBytesTotal() / 1024;
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
this._xscale = percentage;
if (percentage == 99) {
delete this.onEnterFrame;
}
}
This whole piece of code is an onEnterFrame event assigned to your loadingBar movie clip. This is a movie clip type of event - buttons don't have it. The onEnterFrame event tells a movie clip to do something repeatedly, so many times per second as the framerate of your movie is set to (e.g. if your movie framerate is 12 fps, the event will do the specified things 12 times in a second).
In this case, the movie clip executes the function. A function is a set of methods (commands, things to do) and variables (pieces of data) put together to be executed when the function is called upon.
The following two lines,
kBytesLoaded = this._parent.siteLoader.getBytesLoaded() / 1024;
kBytesTotal = this._parent.siteLoader.getBytesTotal() / 1024;
define two variables, kBytesLoaded and kBytesTotal which store how much of your site movie has been loaded up to this point and what is the total filesize (in kiloBytes) of your movie.
Since you want flash to know how much of the site has been loaded, you must write the right path to the movie clip which is loading the external file. That's why there is this._parent.siteLoader before the getBytesLoaded() method. It tells flash, this (this movie clip the actionscript is assigned to, in this case, loadingBar) _parent movie clip (the root, or main timeline, in this case) has a movie clip called siteLoader on it. Tell that movie clip to see how much of the external file you told it o load in the first line has been loaded up to this point.
The second line is the same, except it tells the siteLoader movie clip to look the total filesize of the external file that is being loaded.
The information obtained and stored in both variables is divided by 1024, because in that way, you get kilobytes from bytes (a kiloByte, or KB, has 1024 bytes).
Next, that information is used to obtain a percentage from it, and store it in a variable called percentage. This a simple mathematical operation - divide the part with the whole, multiply it with 100 and you get the percentage. the whole operaqtion is rounded with the Math.round method to, well, round the result of the operation. 🙂
percentage = Math.round(kBytesLoaded / kBytesTotal * 100);
This line of code tells flash that this (remember, this refers to the loadingBar movie clip) movie clip's _xscale property should be equal to the value stored in the percentage variable. In short, this says that the width of the progress bar should be equal to the percentage of the total size of the external file loaded up to this point. Now, ain't that cool? 🙂
this._xscale = percentage;
Finally, when nearly all of the movie has been loaded, you tell Flash to delete the onEnterFrame event because it makes no sense to leave this operation running in a loop if it served its purpose. You also take the load off the use computer's CPU by doing this, which is important. Always discard any unnecessary operations once you've achieved what you wanted.
if (percentage == 99) {
delete this.onEnterFrame;
}
You can also tell Flash to hide the preloader movie clip if needed, or to turn it off completely, but you've learned enough important concepts in this tutorial, so I'll leave that for some other lesson. In the meantime, check out my other tutorials on Flash preloaders!
Update: Here is how you can make the loading bar disappear:
if (percentage == 99) {
this._alpha = 0;
delete this.onEnterFrame;
}
...and if you wish for the loading bar frame to disappear, you must convert it into a movieclip symbol. And then give it an instance name, like loadingBarFrame for example. And to make it disappear too once the SWF has been loaded, add this line of code to your ActionScript:
if (percentage == 99) {
this._parent.loadingBarFrame._alpha = 0;
this._alpha = 0;
delete this.onEnterFrame;
}
Download the zipped source FLA file for this tutorial.
Thank you for posting this tutorial, everything seemed to work great.
However, my site, the SWF that my loader calls to in the empty movie clip, is timeline based. I have thumbnails at the bottom calling certain frames, and they no longer work. I feel as if they are calling Frame X of the Preloader, rather than Frame X of its own SWF.
Good (without loader): http://www.brettlemberger.com/Work_2.html
Bad (with loader): http://www.brettlemberger.com/UnWork_2.html
code for my thumbnails:
on (release)
{
_root.gotoAndStop(2);
}
Please help? Thank you
Update: I changed _root to this._parent and all is well. Thank you again for a great tutorial.
Thank you for this practical tutorial!
i still can´t get my loading bar to disappear, i tried every posible solution given here. does anybody know how to solve this little problem?
anyway i’m adding a solid background to my movies (a black square) to block de view of the loading bar but i know it is just half solution.
sorry if my english is not clear enough, i’ve learned it.
thank you again!
My preloder works fine with one exception: The buttons on my site does not work if the site is loaded with the preloader. Any ideea?
And after upload the progress bar doesn’t disapear as it does on the PC.
thanks for the tutorial..its help me..but why after the loading finish and mysite.swf appear but there is still the loading appear behind the mysite.swf?
How can you add Percentage in loading bar like here:
http://www.flashconf.com/how-to/flash-percentage-preloader/
I just want loading bar with percentage (number %)
can you teach us how to add that, in your code.
Hi All!
I don’t know if somebody has solved the problem with the loading bar dissapearing, If not, here is the answer!
Instead of write:
if (percentage ==99) {
this._alpha=0;
delete this.onEnterFrame;
}
put this one
siteLoader.onLoad = function(){
this._alpha=0;
}
So, doesn’t matter how much is loaded, when the movieclip beggins the bar will dissapear. If you want to know the reason please contact me!
Kind Regards!
Enrique Ulloa
hello,
I have built this preloader folloowing all of the steps. The preloader works perfectly on my computer, when I’m simulating the download the bar loads and at the end starts the flash “my site”. Everything is perfect.
When I load both flash files unto my website, the preloader appears, and without loading goes straight to the “mysite” flash file. I have tried some of the other oprions mentioned above but am unable to make it work.
Can you please help me out with this? I’m using flash 8.
Thank you so much
@Joao: Your Flash file loads in less than a second, that’s why you don’t see the preloader. It’s great 🙂 The preloader is there for people who have very slow connections, that’s its purpose.
Hi, this is what I’ve been looking for! It generally works for me, with a little “but”: my flash site I want to preload is almost 3 MB. It contains an invitation for a party and without preloading it “stutters” (probably not the best word, but hope You get what I mean ;)). With this preloader, the progress bar goes foreword for a while (let’s say 30%) and my movie clip starts. It stutters less, but it’s not what I’m expecting. It looks like the preloading isn’t completed. I checked everything twice, I followed the tutorial in 100%. What’s wrong? Quick help would be appreciated – this party is soon, so I have to get this invitation working. Thanks!
[…] Basic loading bar preloader […]
[…] Basic loading bar preloader Learn to create the basic preloader with a loading bar showing how much of the movie has loaded. The advantage of a graphical preloader of this kind is that is the most intuitive for a user to see how much more she or he must wait to acces your site. Here’s a nice preview of what you’ll be creating in this tutorial: […]
@ Kiellapa
Try setting the SiteLoader._alpha = 0
then at the end of percentage = 99
SiteLoader.alpha = 100
hope it helps
ops sorry– SiteLoader._alpha = 100
I can’t seem to open this “Source FLA” i downloaded from here in flash 8 it
keeps saying invalid format, so i tried to follow your steps and make it from
scratch but i cant get it to work the bar never does anything lol.
Is there another version of this freeloader i can download for for flash 8?
Quick question….I followed your tutorial and everything works well until it loads my SWF. My SWF is a a magazine style SWF with page transitions I created in indesign…..and when it comes time to load the file all it does is load it and flash out of control….is there anyway to load the movie and put some kind of stop function in it ….. anyone got any ideas ….
hi, it works well, but a problem, when i open the swf directly in browser it works, but when i place the swf file in the html file it doesnt works.. ex.
http://www.ifame.co.in/flash/introfinal.swf it works.. but
http://www.ifame.co.in/flashtest.html it doesnt work.. pls give me the solution….
In order to make my loadingBar disappear I just putted the layer that contains the empty movieclip where my website should load and BANG! the loaded site covers the loading bar. Now, is there a way to really make it go away?
It seems that it’s not the one I want…….
@Sac: Hi Sac, i wish the style like the code below will help you.
stop(); //stop at the 1st frame and loading.
…..
if( percent == 100 ) {
……
play(); //paly 2nd frame.
}
Hi, thanks for a great tutorial. Loading bar works great and it disappears as well after coverting the objects to movie clips. However if I link to the first page and then go back to the page with the pre loader, it won’t disappear? Is there a code something like “update after event” to make it run the script again?
Thanks
Hi i tried that preloader and work for me in ActionScript 2 (3 didnt work) I have some problem…
First is…. the loading bar not going 100%! About 50% the loading is complet. I mean when loading my SWF the bar show how mutch % loaded… but when is 50% (half) the SWF(what i loaded) will complet. I ask WHY?
Second problem is. My SWF what i loading.. is repeat itself but on the SWF file i thit stop();
Any idea?
It’s work for me! Thanks alot!!!
same issue as Menrich
for some reason the SWF loads when the loading bar is at the halfway point (50%)
I’ve tried changing the equation to KBytesLoaded * 100 / KBytesTotal and it’s exactly the same.
[…] Flash CS4 AS2 -Basic loading bar preloader 050 http://flashexplained.com//preloaders/basic-loading-bar-preloader/ […]
I am having problem with preloader. it works and loads my wsf file but now my swf movie does not work properly. I have scrolling thumbnails that scroll with your mouse. When you click on it a it opens up to a bigger image. when you click on it fades away and you can scroll back through the thumbnails. the swf works fine by itself and it work when i loaded online by itself. by i need a preloader because it takes about 20 to 30 seconds to load. Does anybody know how to fix this problem.
thanks
THIS CODE DOESNOT WORK
[…] Basic loading bar preloader […]
Is there is some way to write “preloader” into the target swf file?
Why:
My target swf is the other flash made swf file. I found only 1 option to connect preloader with target swf file:
loader.loadClip(“http://malkapoint.com/3sh/COSMO-06-WTPU.swf”, placeholder_mc);
Preloader works it self but it brakes size of the target swf and ruining Action script commands of the target swf. 2 simple commands: trun of object’s rotation on mouse click and play on mouse button release.
The other very important thing is security of the flash components. Target of any preloader is to keep waiting until your flash art is loaded down to his/he computer. When I link preloader to the swf file of my site Adobe flash security shows Alert Box about my website’s potential intrusion.
All of these factors make these very nice things absolutely useless until my knowledge is enough developed to solve them.
Any way thank you for your great “fla” examples!!! :))
[…] Basic loading bar preloader […]
hello;
it may be too late to comment on this topic but i developing my swf’s on as2 the problem is that the percentage never reach 99 i put a trace line to see what is happening the output always write 100
percentage = Math.round(kBytesLoaded / kBytesTotal*100 );
trace(percentage);
so the loadingBar never gone. the file i loaded is 92KB
is there any suggestions?
Thanks a lot for this precious tutorial.
I’ve tryed in many ways but the loading bar does not disappear once the movie is completely loaded.
It seems that this line of code doesn’t work for me eighter
if (percentage ==99) {
this._alpha=0;
please could anyone post the solution?
Thanks.
Nice tutorial. Worked for me. I opted to “paste” the action code into my flash so as to not have any errors. It worked like a dream. Now I’ve learned a bit and I will try another of your tutorials. Thanks again.
Thanks so much! This is THE BEST preloader tutorial I’ve found.. easy to follow, quick to setup, and most importantly: it actually works!!
😀 Thank you soooo much!
nice tutorial !!
but i still have one problem; the website loads when the loading bar is at %70. i checked the code and read all the comments in this page and still nothing.
i traced the percentage, and the swf does always load when the percentage is 70 or %80
please need help !
thank you
I did all of this, and the loading bar worked, but when the swf was loaded, it was not responsive and things had their code in a “nulled” state. if i open the swf independently, it works fine. I am willing to email you my swf, and if you could make a working preloader for it that would be fantastic.
[…] Basic loading bar preloader […]