There is very little that will push users away quicker than a bulky Flash website with no preloader. Without a preloader, your users will have nothing to look at but a blank screen until your Flash file has fully loaded. For users with a speedy broadband connection, this may not be much of an issue (depending on the size of your file), but for people with sluggish connections, it's imperative that you give them some kind of indication that everything is loading properly.
1. Create your preloader bar. For this example, I'll be drawing a basic rectangular bar that will expand within a thin border. Using the rectangle tool, set the stroke option in the Properties Panel to a hairline stroke, choose whatever fill color you want, make sure that Object Drawing mode is turned off on the toolbar, and draw your preloader rectangle in the center of the stage.
2. Separate the fill from the border. Since the border of the rectangle will stay constant while the fill expands within it, it will be easier if we send the fill to its own layer. To do this, simply hit Esc to make sure that everything is deselected, and then click once on the fill. Make sure that ONLY the fill is selected, and then right-click on the fill (or Ctrl+click if you're using a one-button mouse on a Mac) and click on Distribute to Layers. This will remove the fill from the current layer and copy to a new layer just below the current layer.
3. Convert the fill to a movie clip. Click on the fill (which should be on its own layer now) and hit F8 to convert it to a symbol. Select "movie clip" and set the registration point to the upper left corner. Our loader bar is going to be expanding from left to right, and this will only work properly if the registration point is on the left side. Give your movie clip an instance name of loader_mc.
4. Create a dynamic text field. This text field will tell the user what percentage of the site has loaded so far. For this example, select the Text Tool, choose Dynamic Text in the drop-down menu on the Properties Inspector, choose 12 point Verdana (or whatever font you want), and click and drag beneath your loader bar to draw a text field that has the same width as the loader. Here's what mine looks like:
With this new text field selected, in your Properties Inspector, click on the button to right-align your text within the text field. Give this text field an instance name of loaded_txt.
5. Embed the font for the dynamic text field. Even if you select a popular font, such as Verdana, you can never be 100% certain that your users are all going to have the same font installed on their system. And when you're dealing with dynamic text fields, if your users don't have your selected font, and if you don't embed your font, then Flash will choose a different font to display, and you'll lose control of what your text fields look like.
To avoid this issue, select your dynamic text field, and then click on the "Embed" button in the Properties Inspector. In the pop-up dialog that appears, select Uppercase, Lowercase, Numerals, and Punctuation and click OK. To select more than one item, click on the top item, hold onto Shift, and then click on the bottom item. All items in between will be selected. Like so:
6. Create a new keyframe for your content. You won't be able to test your preloader unless you actually have some content to load. So at this point, I want you to throw in a little bit of dummy content.
Create a new layer to hold your content, click on frame 2 for this new layer, and hit F6 to add a new keyframe. In this new keyframe, simply import a hi-resolution image or two onto the stage. This content does not have to be arranged in any sort of orderly fashion. You're just using this extra content to "fatten up" the file size so you'll have a way to test your preloader.
7. Add a stop action to frame 1. Since your Flash file now has 2 frames, you need to provide a way to keep the file from jumping back and forth between them. So add a new layer to the top of your layer stack, rename the layer Actions, click on frame 1 for the Actions layer, and hit Opt+F9 (or just F9 for PC) to open up your Actions panel. In your Actions, simply type stop();
8. Code the preloader. Make sure that frame 1 of the Actions layer is still selected, and add the following code to your script:
On lines 3 and 4, you're adding Event Listeners to the main timeline. The PROGRESS event handler on line 3 calls on the onProgress function over and over as long as content is still loading. The COMPLETE event handler calls on a function called onComplete and is triggered whenever the content has been fully loaded.
In the onProgress function, we first create a variable called loaded, which stores the number of bytes that have been loaded thus far and another variable called total, which stores the total number of bytes in the Flash file. When we divide loaded by total (line 10), we get the total percentage of the file that has currently been loaded, and we store it in a variable called pct. (Actually, it's technically a ratio instead of a percentage, but I won't be picky if you won't.)
We then use this pct variable (which, if everything is working properly, now contains a number between 0 and 1) to update the scaleX property of our loader bar movie clip. The scaleX property is basically the width of a movie clip as a ratio of its original width. So at this point, if your Flash file is 90% loaded, then the loader bar will be at 90% of its full width.
Once we have the width of the loader set, we then update the dynamic text field to tell our users precisely how much of our file has been loaded.
9. Test your movie. If everything is working properly, then when you test your movie (by hitting Cmd+Enter or Ctrl+Enter on PC), you won't see the preloader at all. It will jump straight to frame 2, where you have a hi-res image on the stage. This happens because when the file is already on your system, it is loaded immediately, and the COMPLETE event triggers the onComplete function to take us to the next frame of the Flash file. However, there is a way to simulate a download in order to test our preloader.
After hitting Cmd+Enter or Ctrl+Enter to test your movie, go to View > Bandwidth Profiler. This will display loading information above your movie. Once the Bandwidth Profiler is visible, go to View > Simulate Download. Hopefully, if all your ActionScript was entered properly, you will now see your preloader in action. As your loader bar expands to the right and your dynamic text field updates the percentage loaded, double-check this against the percentage that the Bandwidth Profilers says has been loaded. If these two numbers match, you're in business.
You can also adjust the speed of the simulated download by selecting View > Download Settings.
Once your Flash file finishes loading, you should see the preloader disappear and the next frame appear. And voila! You now have a fully-functioning preloader. Now all you need to do is replace the image(s) you stuck in frame 2 with the actual content of your website, and you're good to go!
Sample FLA file: preloader.zip
Tags: actionscript 3, Flash, preloader, tutorial
Craig,
I love getting emails from you. I’ve been learning so much!
I just made the move from Flash 8 to CS3 and have taken a interest in learning Actionscript…
To think a few short weeks ago I knew nothing about flash and today I know my way around pretty well as a result of your training.
Keep up the great work!
Looking forward to your next email,
Jesse Wilson Jr.
[...] Read the tutorial and download support files No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]
[...] Check it out: http://schoolofflash.com/2008/04/28/flash-cs3-tutorial-actionscript-3-preloader/ [...]
my preloader starts at 70 % but when i add a bigger picture on my site than it starts at 1% im confised
Hi there , This Tutorial is great .
But Can you explain how can load files like (images , etc…) that is going to be used in classes outside of the main document class ..
Thanks for all of your help.
This as well as a couple of the other tutorials that you have posted have been a great help to me as I am trying to learn Flash by myself.
Please keep posting!
Wonderful! I used this for my flash banner, you are appreciated!
If someone is experiencing the my preloader starts at 70%, or a similar issue. It is because you have a very small flash file created where 70% of the file is the 1st frame loading bar. Just past a 5 meg image in your second frame and you will see the loader appear at a fresh one percent as soon as it gets to 1 percent!
I hope that helps.
Also, if you want to have more than a 2 frame flash movie then in your second frame create a new action that simply says:
play();
You told it to stop in the first frame, now you have to tell it to play again in the second! Waaalaa, hopefully this will keep others from experiencing the struggles I went through when following this tutorial!
Good work though, it was a great help in getting me started Craig!
Thanks heaps Craig, I think I may have scrapped through my assignment with a credit. I did reference you of course. 8)
Thank you!!! I cannot believe how many tutorials there are out there explaining why you have to make several classes to do what you have done here in less than 20 lines of code (including white space)!!! It took me some searching to find this one but I am sure glad I did. Well done
Hello Craig, Thanks a lot for this! I have a quick question though, i can’t seem to get this preloader to work with Internet Explorer? It works fine with firefox? Not a web expert so i was wondering whats the deal?
thanks again
Agreed, it doesn’t seem to be working with IE7 after the first load, I have encountered this with other preloaders in AS3.
I’m going to look for a solution. Thank you.
Fixed it. I had to hack togeher some codes from a few different solutions, but basically this code doesn’t use any of the events that break in IE6 and 7 when reloading the already cached swf file. I used the same instance names so all you have to do is copy and paste, once 100% loaded I set it to go to and play frame 2, you can set it to go to any frame you want. Visit my website http://www.robertkrames.com for my contact info so you can send me your $100 tips for posting the solution, it took me like 5 hours to find it.
stop();
import flash.display.MovieClip;
import flash.events.Event;
this.addEventListener(“enterFrame”,onEnterFrame);
function onEnterFrame(e:Event){
loader_mc.scaleX = (this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal);
loaded_txt.text = “Loading… ” + (Math.round((this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal)*100)) + “%”;
if(this.loaderInfo.bytesLoaded == this.loaderInfo.bytesTotal){
gotoAndPlay(2);
this.removeEventListener(“enterFrame”,onEnterFrame);
}
}
Hi Craig, I Built a complete Falsh Movie consisting of a few pictures fadding in and out with a whaite boarder around them…after finishing it I now need to and a preloader…I already have multiple frames and layers how can this be done???
Please let me know…
Thanks
Stealth-T4
Simple…
Just add an scene on top of everything (with shift+f2 you enter the scene panel) and in that scene create the pre-loader.
Elliot
I am having a problem with this preloader in ie… works fine in firefox. When I used your fix I get a syntax error (modulus is unexpected)… and when you publish the movie the status bar just flashes on and off and it never plays the movie.
Hi Craig,
Thank you for a very good tutorial. I’ve got some problems with loading an external swf instead of the picture. I’ve tried to load it with this code
stop();
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onProgress(e:ProgressEvent):void {
var loaded:Number = e.target.bytesLoaded;
var total:Number = e.target.bytesTotal;
var pct:Number = loaded/total;
loader_mc.scaleX = pct;
loaded_txt.text = “Loading… ” + (Math.round(pct * 100)) + “%”;
}
function onComplete(e:Event):void {
nextFrame();
var request:URLRequest = newURLRequest(“as3test.swf”);
var sida:Loader = new Loader();
sida.load(request);
addChild(sida);
}
but then the preloaders loading process gets interrupted. And I get this error message;
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
Any suggestions on how to get past this?
regards Micke
Hi Craig,
I’m using your preloader code, thanks.
I’m developing a Flash site using AS3. The main page loads 5 subpages indvidually when clicking on their respective button (e.g. Contact, About Us….).
Each subpage has its own preloader (same code of course). The preloader is in the 1st frame of each subpage. Once loaded, it goes to nextFrame(); (as per your code). It does load, but I get error #1009: Cannot access a property or method of a null object reference…at wilkommen_fla::MainTimeline/onProgress()
When running the subpages on their own, the error doesn’t appear. But when run from my main file, I get the above error for each respective subpage, e.g. wilkommen_fla, NippesObjektApp_fla…… Same error.
How can I correct this?
Hi, I came across your site from Google. I have a loader.fla file that I like but it won’t let me apply it as a loader. I guess it’s not a pre-loader but a loader. Lil asteriks like. That spins around and around. Well, I like it for my pre-loader and have no idea on how to make it get my index.fla file that has my maine webpage. Is there a site that has a tutorial or do you teach that as well or is the above good for that?
Any help would be appreciated. Thanks.
Stef
This loader is amazing thankyou…I’ve learnt so much about loading just from this 1 tutorial…I did find it got stuck in internet explorer if the page was refreshed but for whatever reason….If you change the nextFrame(); line for nextScene(); and put all of your movie on Scene 2 it work 100% of the time…For that reason…I love this tutorial….Once you get your head around the coding you can fiddle with all sorts of it.I have it all in script now with no objects on my timeline at all…It been great to help learn other things like that, THANKYOU FOR THIS TUTORIAL>
[...] Read more [...]
Hey thanks for posting this. I been searching everywhere for how to make preloaders for the new Flash CS3. Thanks a ton! it works for me! I have a question though, i’m use to the Action script 1 and 2, but it seem 3 is totally different. how do i make a button where i click it and then it sends me to a web page?
Thank you Craig for this detailed tutorial!
However, mine looks great when I tested the movie with bandwidth simulation, it just never worked after it’s uploaded. The movie tends to load the entire swf then starts playing, which against what a “preloader” is there for. I’m not sure if anyone runs into similar problems like this one.
I tried it with IE7, Firefox, even Google’s Chrome.
Please advise. Thank you in advance.
Micke,
I have a question for you. Is the SWF you are trying to load only a 1 frame? If not, that might be the problem. Try to put the SWF you are trying to load on 1 frame.
Also, I’m pretty sure other people had this problem but make sure the font COLOR is the right one
black on black won’t display hehe, I’ve searched a long time!
Dont use a preloader for a banner lol
Hi, many thanks again for your tutorials. the question is what should we do if we want to add the preloader to each frame we are running. Lets take it this way I have a website with 5 pages, each page is one frame. No I want my preloader to load everytime I click on a button. I want the preloader not to load all the movie click, I want to load every page is clicked to be visited? I understand that i can add preloader before each frames of my website but im sure there is a soloution that preloader load the pages automaticly.
Thanks
any ideas on why the number of the % would stack on top of each other instead of changing lik ein the example?? I’m going crazy over this. any help will be greatly appreciated.
Hey! Love the tutorial. Great Help to me, having a small problem though. I’m using two separate scenes, in the First is the preloader in the second is the content. It works semi well. The preloader doesn’t show up until it reaches 50%… Any ideas? (Everything works properly except the preloader doesn’t show up until 50%)
The reason your preloaders aren’t showing up until it gets to 50% is because AS3/CS3 relies heavily you linking things from the library and you having the “export in first frame” option selected. If you want a preloader to start at zero, create a container movie with your preloader animation and load your main flash site into that.
Has anyone else experienced the preloader jumping to a full bar – shows ‘loading’ text but not the percentage, and then not advancing to the content (2nd frame), only in Firefox/Windows, and only once the swf has loaded a first time i.e. on refresh or from a link back to the page? I can only assume it’s some sort of caching issue at the moment…
Thanks for your preloader. Nice! Any ideas of how can I load and external .swf file? or xml data?
Thanks in advance
To Florida web design guy – camon! The difference between your code and the authors is that you remove the event listener (it is a right thing to do). Now I woldn’t rely on comparing those 2 loaded values, instead I suggest using event of “completion of loading” (as did the author). If you need help, you may consult me by ICQ:8761217;
Micke, you have to add an event listener so it could determine when your external file is loaded, like this:
…
function onComplete(e:Event):void {
nextFrame();
var request:URLRequest = newURLRequest(”as3test.swf”);
var sida:Loader = new Loader();
sida.load(request);
sida.loaderInfo.addEventListener(Event.COMPLETE, onLoad);
function onLoad(e.Event):void
{
addChild(sida);
sida.loaderInfo.removeEventListener(Event.COMPLETE, onLoad);
}
And to author:
why would you declare the variables in that function, it’s just eating up the processing power by redeclaring them over and over again.
I would declare them outside the function, and then just assign values to them inside the function, like this:
…
var variable1:Number;
function …
{
variable1 = …;
…
I’m sure some of you would say that the difference in the processing power is unnoticeable at all on virtually any of today’s computers.
I’m less speaking for the processing power, but more for the programmer’s ethics of code writing clearness of code.
Cheers!
How do you make preloader work with FLV movies ???
I put a FLVPlayback object on scene and the preloader dont works anymore…
My Preloading text only appears at 100%
Need help for this !!!
Please…
Graab, no idea why it won’t work. You could send me your file and I’ll check it out.
Graab, no idea why it won’t work. You could send me your file and I’ll check it out. FlashSpec@gmail.com
I got a problem where the prelaoder plays, then it stops, and i need to right clik on it and select play, and then the flash file start playing. any ideas. I got flash files thta work and some that don’t and wonder if adding/ using components is the culprit
Thanks a bunch ! I am an absolute beginner with flash and I´ve seen about three dozens of “preloaders” in the last 3 hours and nothig had worked for me. This is one is perfect. Thanks a lot.
i got this..
TypeError: Error #1010: A term is undefined and has no properties.
at Untitled_fla::MainTimeline/frame1()
Hi,
I just wanted to say THANK YOU SO MUCH!!
Seriously, been looking and Trying soo many diferent ways to create a preloader (on a google search for S I M P L E preloader)!
It took me a bit to find this one and do to my past luck I was hesitant to trying it, but I’m sooooo glad I did.
This is definitely so easy to follow and so simple! Thanks a bunch again. I’m a coder but new to AS3 and this was definitely easy to understand and implement.
Thanks again!
i hv proble to flashcs3
hw 2 apply actionscrit to next scene
i want 2 go play next scene bt it is not happend
can u send me any tutorial
thnks
Excellent…!!!
I have the same problem, any ideas?.. help meee
# Jason Says:
October 17th, 2008 at 2:20 am
Thank you Craig for this detailed tutorial!
However, mine looks great when I tested the movie with bandwidth simulation, it just never worked after it’s uploaded. The movie tends to load the entire swf then starts playing, which against what a “preloader” is there for. I’m not sure if anyone runs into similar problems like this one.
I tried it with IE7, Firefox, even Google’s Chrome.
Please advise. Thank you in advance.
Hi, thanks a lot for providing such interesting and useful tutorials. I’m new to Flash and programming, and I find it very understoodable and nice to read your tutorials. Keep up great work!
Brilliant! thank you!
I’m having trouble loading an external file (very new at this)… I’ve got this code from a response above, but it’s coming up with errors, code below;
function onComplete(e:Event):void
{
nextFrame();
var request:URLRequest = new URLRequest(“bw_website.swf”);
var sida:Loader = new Loader();
sida.load(request);
sida.loaderinfo.addEventListener(Event.COMPLETE, onLoad);
function onLoad(e:Event):void
{
addChild(sida);
sida.loaderInfo.removeEventListener(Event.COMPLETE,onLoad);
}
it’s coming up with
1084: Syntax error: expecting rightbrace before end of program.
Whats wrong here?
stop();
this.LoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.LoaderInfo.addEventListener(Event.COMPLETE, onComplete);
function onProgress(e:ProgressEvent):void
{
var loaded:Number = e.target.bytesLoaded;
var total:Number = e.target.bytesTotal;
var pct:Number = loaded/total;
loader_mc.scaleX = pct;
loaded_txt.text = “Loading…”+(Math.round(pct* 100))+”%”;
}
function onComplete(e:Event):void
{
nextFrame();
}
Btw. The error thing says:
TypeError: Error #1010: A term is undefined and has no properties.
at Aapning_fla::MainTimeline/frame1()
Preloader works fine!
My issue is, as it appears is the same for others, how do you successfully get the preloader to then succesfully a .swf file that is in scene 1 after the preloader?
I have tried the work around solutions others have posted in comments, though non of them work, they just play the first label in the scene I am wantint the play after the preloader, then stops and fails to play the rest of the .swf file.
Any help would be greatly appreciated.
Chris
repost, left key word out…
Preloader works fine!
My issue is, as it appears is the same for others, how do you successfully get the preloader to then play a .swf file that is in scene 1 after the preloader?
I have tried the work around solutions others have posted in comments, though non of them work, they just play the first label in the scene I am wanting played after the preloader, then stops and fails to play the rest of the scene in the .swf file.
Any help would be greatly appreciated.
Chris