Actionscript 3 External Preloader
A preloader is an important part of any sizeable Flash app as you probably don’t want your users to see nothing while the app’s loading. There are two types of preloaders that you can employ: external and internal. In this tutorial we’ll see how to implement External Preloaders, which load the contents from a separate file. This method is much cleaner and easier than the internal way, so I recommend you use it whenever you can. It also allows you to keep your preloader and main content independent of each other.
The general idea is to set up a Loader object in your preloader SWF, and make it execute 2 functions: an update function, and a finish function. The update function is called every time load progress is made, and the finish function is called when loading is done. You would accomplish this through Event Listeners as follows:
var request:URLRequest = new URLRequest("Content.swf");
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
What you do inside those functions is totally up to you. If you have a loading animation that animates relatively to the progress (like a cup filling up), then you would update that animation inside the loadProgress function. But as an example, we’ll be updating a percent counter as the load progresses.
function loadProgress(event:ProgressEvent):void
{
var percentLoaded:Number = event.bytesLoaded / event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
this.percentLoaded.text = String(uint(percentLoaded)) + "%";
}
function loadComplete(event:Event):void
{
trace("Load Complete");
}
To wrap it all up, we call load on the URL request, and add the Loader object to the preloader’s Display List, so that the content shows up when it’s done loading.
loader.load(request);
this.addChild(loader);
Also, make sure that the preloader’s dimension and frame rate settings are the same as the main content’s.
Here are the source files with the external preloader, and a test content SWF.
Tags: actionscript 3, programming
February 18th, 2008 at 7:01 am
Thanks a bunch man.
For some reason they made preloading unnecessarily difficult in AS3.0. Even the Adobe LiveDocs shows some weird way that takes like 3 pages of code and doesn’t even work right. I knew there was a simple method. Thanks again.
February 23rd, 2008 at 8:17 pm
hah, i donno who you are, just found your site on a google search for “AS3 swf preloader” , but thanks a bunch, this is perfectly simple.
March 2nd, 2008 at 6:32 pm
Thanks a lot! It’s easy to follow your tutorial.
March 23rd, 2008 at 7:04 am
Thanks man! Keep up the clean work you have!
April 3rd, 2008 at 11:50 pm
Hi. I am absolutely NOT a competent Flash or ActionScript person. In fact I try to stick to what I do best, which is making corporate movies. However, as a freelancer I have to get involved in things like the design of the website, hence I found myself looking for a simple to use preloader for my Flash-only site. I kind of understand the principles involved in your code but I can’t seem to get it to work on my site
The orb rotates a few times then the screen goes blank and I have the same wait as before until the movie loads. All I did was to change the content.swf variable to videoit.swf (my movie), then placed the externalpreloader.swf and .html files in my home directory. Where am I going wrong? Thanks for any help or hints you can give.
May 5th, 2008 at 8:44 pm
Thank you so much for posting this tutorial. I am updating a very long program from AS2 to AS3 because I think it will preform better, but it has been difficult because I have so many tricks up my sleeve related to AS2. This tutorial helped a lot with at least one of my problems.
May 7th, 2008 at 9:43 am
Thank you for this preloader. I use the Preloader mc in my Intro to Flash final project. One question: percentLoaded shows up as an ActionScript word (shows up blue) even though you use it as a var name. Is there any conflict possible there?
June 11th, 2008 at 1:33 am
Thank you so much for posting this tutorial. This is perfectly simple.
June 13th, 2008 at 12:15 pm
This is the best example of an external preloader I’ve seen so far. It works wonderfully! Thank you!
July 11th, 2008 at 12:20 pm
Hey, thanks mate great tutorial
I’m currently searching for a way around this problem im experiencing with a preloader
Trying to add a ‘shuffle’ type music player to my website.
Works fine but doesn’t load with the main preloader
heres the code im using:
var randomSong:String = new String(“music/track” + (Math.ceil(Math.random() * 40)) + “.mp3″);
var songtime:URLRequest = new URLRequest(randomSong);
var thisSound:Sound = new Sound();
thisSound.load(songtime);
thisSound.play();
Is there a way I can include this random tune selection within the preloader. Hope ive given you enough details, im nackered
any help would be great thanks
xx
July 12th, 2008 at 4:00 am
.: above solved :.
thanx x
September 13th, 2008 at 3:04 am
…my very durating search has an end! I love you! Thanx very much!
January 9th, 2009 at 3:44 pm
Thanks for posting this. It works for the most part for me, but I noticed my percentLoaded text only reaches about 82% before starting the loaded swf. I am loading some audio from my library within the loaded swf. Could this be the cause? Any ideas on how to correct this?
January 9th, 2009 at 3:47 pm
Oh, and I am also using TweenLite to fade out one of the audio clips. Not sure if that makes any difference…?
January 9th, 2009 at 8:36 pm
I totally owe you a beer now.
January 9th, 2009 at 10:20 pm
Hey John,
Did you get it working?
January 12th, 2009 at 11:46 pm
hi, i have a preloading external swf files from my main.swf in localhost works fine but when i upload to remote server, it doesnt work properly, what is the problem?, maybe a security issue by As3
January 15th, 2009 at 2:32 pm
i was very sceptical i had tried a VERY similar script at gotoandlearn.com, getting mysterious #1034 errors and almost given up. this worked, so thanks for saving my day (and night)!
January 19th, 2009 at 11:30 am
The preloader works, just when it gets to loading my own .swf that I’ve made I get “Error #1009: Cannot access a property or method of a null object reference.” I have everything in the same directory and the .swf works on its own. Any clue here? Thanks…
January 23rd, 2009 at 9:01 am
Just used your preloader. It simple rocks..Thanks a ton
January 23rd, 2009 at 6:04 pm
hello,
thanks that great, but how I use it for 3 swf file
thanks again
January 28th, 2009 at 7:13 pm
This is great, you are a life saver. So simple and painless.
February 11th, 2009 at 11:38 am
Is it possible to make two classes: Loader class and Preloader class, and then display the progress data in a textField, from the Loader Class, in the Preloader class with a custom Event? Or does the progress data have to travel to long? Thanx
April 14th, 2009 at 12:58 pm
This is very up-to-date information. I’ll share it on Digg.
July 9th, 2009 at 10:51 am
This is really cool! It works for the most part for me, but I noticed my percentLoaded text only reaches about 30% before starting the loaded swf. can you help me go till 100% before loading the content.swf.
Thanks in advance.
July 12th, 2009 at 7:12 am
i get the same bug purvi, I notice it happens only when i move the x or and y of the txt field
August 5th, 2009 at 9:11 am
Thanks! You saved me!!!
August 5th, 2009 at 9:12 am
Sorry…I mistyped my website in my other comment…
August 7th, 2009 at 3:04 pm
I can’t believe how simple this is. I been trying to figure this out for months. Thank you so very much.
September 13th, 2009 at 6:07 am
hi there, thanks for the code, but i am facing a problem , i am going wrong somewhere. the external swf that i ‘m calling is nodoubt loading but it loads when the loader is showing 20-30 % of the loading time. my question is is it really calculating because if so it should show 100 % just before it loads.
September 16th, 2009 at 9:27 am
This works great! I have a question. How would I modify the loader to preload multiple swfs? I’m a flash noob and can’t figure this out for the life of me.
Thanks!
September 16th, 2009 at 3:15 pm
Hey Lisa,
What you could do is to have an array of loaders set up the way I’ve outlined in the tutorial. Then on each loader’s loadComplete event listener, you increment a counter variable, and check to see if that variable is equal to the length of the array. When they are equal, you know you have loaded all of your contents, and can begin to add them all to the main display object.
Let me know if this helps!
September 18th, 2009 at 9:47 am
Is it just me, or does the displayed percentage loaded NOT match up with the ACTUAL percent loaded. I have the simulated download set to DSL speeds, and right around 30 or so percent, the flash is fully loaded and fades in over the preloader. Is there a way to sync them up better so the percentage preloaded is accurate?
September 18th, 2009 at 9:55 am
Hey Jackrabbit,
The displayed percentage should definitely match up with the actual percent loaded. If you are getting a fully loaded at 30%, you may be calculating the percentage incorrectly, or getting the bytes data from a different place. Are you using the tutorial’s code as is, if not, could you send me a snippet of what you have?
September 18th, 2009 at 10:52 am
Check this out. I’ve got the .fla’s there and the .swf example link. I used your code with only minor cosmetic name changes and still the .swf loader earlier than the preloader finishes. You’ll see in the .fla some commented out code I used trying out a similar loader from another forum.
http://www.redbandtrailer.net/demo/indexDEMO.htm
September 18th, 2009 at 10:53 am
sorry, this is the correct link…
http://www.redbandtrailer.net/indexDEMO.htm
January 10th, 2010 at 4:00 am
Great tutorial! I was just wondering how you can specify where in the main flash file the external flash file will load.
I’m planning on having a smaller external flash file appear at the bottom part of the main flash file.
January 10th, 2010 at 11:49 am
Hey Waffle,
Once you’ve loaded the content. You can use the loader just as you use any other DisplayObject. So to change its position, you would do:
loader.x = 100;
loader.y = 100;
January 12th, 2010 at 10:03 am
Thank you very much, I have tried a couple of different types of loaders and when they were within the same movie, they seems to conflict with the code I have in the main movie. This works perfectly by having the movie as an external .swf and it is very adaptable. Brilliant.
January 12th, 2010 at 11:26 am
Hey Maria,
I’m glad to see that it helped!
January 15th, 2010 at 2:39 am
I can’t believe how simple this is. I been trying to figure this out for months.
Thanks a lot!
January 15th, 2010 at 2:40 am
Thanks for posting this. It works for the most part for me, but I noticed my percentLoaded text only reaches about 82% before starting the loaded swf.
Many thanks!
January 15th, 2010 at 2:50 am
Hey Web designing,
You might be seeing only 82% before starting the loaded swf because when testing locally, the download rate is enormous since it’s not over the internet.
Since the percent is updated per frame, your swf could be loaded from 82% to 100% within a single frame, therefore it’ll never display 100%.
To see it slow down, set your simulated download speed to something low like 56k in your Bandwidth Profiler when you’re testing the swf.
January 20th, 2010 at 8:53 am
Thanks! Moving from AS2 to AS3 can be annoying at times. This was simple and easy to modify for future use.
February 10th, 2010 at 7:06 am
thnx
February 18th, 2010 at 9:37 am
this preloader is a HOAX!!! it does not work at all
April 18th, 2010 at 10:45 pm
Hi, i have just tested your FLA and when I put one of my swfs to load, it displays part of the content before the percentage has reached 100%. I am wondering if this has something to do with my external swfs?
April 20th, 2010 at 7:33 am
Never mind.. i accessed the external swf timeline and simply put gotoAndPlay(1) as soon as the loading is complete, now it runs okay.
April 27th, 2010 at 9:23 am
Hey thanks for that. I made a little animation in the preloader swf but it doesnt show up in the browser, only the test window. I’m opening the preloaders html file as the index.html , what am i doing wrong??
May 10th, 2010 at 5:55 am
have you guys actually tested this on a browser in a live server?
on IE it sits at 0 while on firefox it goes straight to 100
May 14th, 2010 at 11:27 pm
This is useless.. It is not working!!
May 19th, 2010 at 4:58 pm
@Clarissah: Mine did the same thing. Just make sure in the actionscript you have .swf and not .html.
June 10th, 2010 at 4:57 am
Quick question, after using a preloader that loads an external swf file, I uploaded both swf files which was preloader.swf and website.swf. So then, website.swf is supposed to enter the stage when my loader gets to a 100. However, the loader swf stays open and website.swf doesn’t open. What am i doing wrong?
June 24th, 2010 at 6:05 am
Greetings,
I made a little animation in the preloader swf but it doesnt show up in the browser, only the test window, maybe I am doing something wrong?
Regards,
Jania
September 14th, 2010 at 4:13 am
oh my god, this is awesome!
very simple and very useful! thanks a bunch 
September 21st, 2010 at 4:13 am
Hey it Cool. Thankx for your tutorial. It helped me a lot.
October 13th, 2010 at 12:42 pm
It worked me very much. Thanks for tutorial and files.
October 21st, 2010 at 12:29 am
I have a problem with stage property. When I use external preloader to load swf file which have stage property inside itself it does not work. Is there any solution?
October 24th, 2010 at 10:51 pm
Solved my problem. Since stage is not initiated at the same moment you called the file, I put my stage property lines into function which was triggered with enter frame event and secured it with “if(stage != null)” loop.
(of course also with boolean variable which secured stage properties to execute only once)
November 13th, 2010 at 12:04 am
Thanks a lot! It’s easy to follow your tutorial.
November 26th, 2010 at 5:36 pm
Thanks, man! It works perfectly and you REALLy helped me a lot!
December 11th, 2010 at 6:04 pm
Finally I have jumped into the cold water and started using AS3. It seems that with every new version the fun (aka problems) start all over again.
What I need to figure out is how I relay the flashvars the preloader.swf receives to my main.swf. Whenever I try to use something like this.parent.flashvarsObj in my main movie the compiler complains about not knowing anything about a parent movie…
Maybe someone has encountered this problem and solved it already?
Thanks for the article, Doogog.
December 19th, 2010 at 11:59 pm
It worked me very much
December 26th, 2010 at 3:35 am
I need your help please. I have an assignment using actionscript3 and FlasgCS4 I have to click upon the stage to select a series of 6 waypoints. As each of the 6 waypoints is selected a movieClip (such as redX)should be placed on the stage to visually mark the positions of the way points. The x and y value of the position of each waypoint should be stored in memory, how is this done for when one clicks on these position a shape will appear this is what is confusing me. ??Baiba
December 28th, 2010 at 3:33 am
very nice and great informative article
i m really aprciated for this article
thanks
December 31st, 2010 at 7:53 am
@NicolaRolla
yeah cause we that stupid. Everyone, online this DOES NOT work. The loader immediatly shows 100% and u then u just wait out the remaining time.
January 5th, 2011 at 2:47 am
hey top notch blog and web theme. I really hope I am not annoying you I just sought to inquire exactly what wordpress plugin you have to display the latest remarks on your blog? I really want to do something similar for my free apple ipod web site however I cant locate the plugin or widget for it. Cheers for your time
January 31st, 2011 at 12:08 am
Hi,
Thanks a lot! I’ve searched high and low and read/viewed tutorials and come to nothing. Until I stumbled upon your site and downloaded your file and Voila! It works! Thanks a billion, really.
February 2nd, 2011 at 5:47 pm
Thankyou for posting!
Just learning as3 and needed a simple loader for a flash game I just made.
February 20th, 2011 at 8:34 am
Thank you for this perfect code. Finally something usefull on the internet.
February 25th, 2011 at 12:59 am
Just a great piece of code snippet.Thanx for sharing.
March 13th, 2011 at 12:11 pm
Thanks for sharing this info. I was searching this and got to the right place.
March 22nd, 2011 at 2:26 am
thnx for sharing your knowledge…thnx
May 5th, 2011 at 1:27 am
WoW! A huge amount of comments
August 26th, 2011 at 3:28 am
Thanks, I’ll check this module out. Nice clearly written post. Cheers,
September 12th, 2011 at 1:27 pm
It’s actually a nice handy piece of details. I’m grateful you shared this valuable information around. Please keep informed such as this. Many thanks sharing.
September 12th, 2011 at 11:19 pm
I’m reading this article also it seems to be great! Nice writing style and you’ve mentioned some superb things with this issue.
October 11th, 2011 at 7:02 pm
Close but no cigar. This code doesn’t work either, as does none of the pre-loaders I’ve run across. Either the preloader stops working and nothing happens or they play the external movie before it completely loads. SURELY in all the years AS3 has been around SOMEONE has made this stuff work.
October 27th, 2011 at 7:58 am
It simply works!!
Thanks!
December 9th, 2011 at 4:04 am
i found new ActionScript 3/Flash IDE
http://www.codedrive.com/
December 16th, 2011 at 2:02 pm
construtora…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
December 25th, 2011 at 10:40 pm
It’s very easy to follow the tutorial provided by you,Thanks for sharing
December 30th, 2011 at 6:22 am
ps3 mkv files…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
January 4th, 2012 at 5:15 pm
script nulled…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
February 19th, 2012 at 5:03 pm
may hut mui…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
April 18th, 2012 at 7:30 pm
site-uri la cheie…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
April 25th, 2012 at 9:42 am
Come Play Free Games At DirtPileGames.com…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
April 30th, 2012 at 3:46 pm
PaperCraft…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
May 11th, 2012 at 4:12 am
Omron…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
May 27th, 2012 at 9:14 pm
web design packages…
[...]Doogog.com » Blog Archive » Actionscript 3 External Preloader[...]…
April 9th, 2013 at 7:50 pm
I’m no longer certain where you are getting your information, but great topic. I needs to spend a while learning more or understanding more. Thanks for great information I was on the lookout for this information for my mission.
April 19th, 2013 at 5:45 pm
Useful info. Lucky me I found your website by accident, and I’m surprised why this twist of fate did not came about earlier! I bookmarked it.
April 24th, 2013 at 1:38 am
I have read a few excellent stuff here. Certainly value bookmarking for revisiting. I surprise how much attempt you put to create any such great informative web site.
April 24th, 2013 at 8:20 am
Hello, after reading this remarkable post i am as well
cheerful to share my know-how here with friends.
April 27th, 2013 at 11:06 am
Truly no matter if someone doesn’t be aware of after that its up to other visitors that they will help, so here it occurs.
April 27th, 2013 at 10:55 pm
Magnificent beat ! I would like to apprentice even as you amend your web site, how could i subscribe
for a blog website? The account helped me a appropriate deal.
I had been tiny bit acquainted of this your broadcast offered bright clear concept
May 3rd, 2013 at 2:58 am
What’s up i am kavin, its my first occasion to commenting anyplace, when i read this post i thought i could also create comment due to this good post.
May 7th, 2013 at 8:06 pm
I simply could not go away your site before suggesting that I extremely loved the standard info an individual provide to your visitors? Is gonna be back frequently to check up on new posts
May 27th, 2013 at 2:08 pm
Because the admin of this web page is working, no hesitation very quickly it will be well-known,
due to its feature contents.
Here is my weblog; bed bugs solution
June 4th, 2013 at 1:34 am
Wow that was unusual. I just wrote an incredibly long comment but after
I clicked submit my comment didn’t appear. Grrrr… well I’m not
writing all that over again. Regardless, just wanted to say wonderful blog!
Feel free to surf to my website: Sidney
June 14th, 2013 at 5:12 pm
As the admin of this web page is working, no uncertainty very soon it will be famous, due to its quality
contents.
June 17th, 2013 at 2:10 am
I do not even know how I finished up right here, however I assumed this submit used to be great. I do not recognise who you might be but definitely you’re going to a famous blogger when you are not already. Cheers!
June 17th, 2013 at 9:18 pm
Hi, all is going well here and ofcourse every one is sharing data, that’s truly good, keep up writing.
June 20th, 2013 at 6:58 pm
Your way of describing everything in this article
is genuinely pleasant, all can without difficulty know
it, Thanks a lot.
July 1st, 2013 at 5:22 am
This is a topic which is near to my heart.
.. Many thanks! Exactly where are your contact details though?
July 2nd, 2013 at 8:51 am
This website was… how do I say it? Relevant!! Finally I’ve found something which helped me. Thanks a lot!
July 20th, 2013 at 7:33 am
This piece of writing is genuinely a good one it helps new web visitors, who are wishing
in favor of blogging.
July 27th, 2013 at 11:00 am
Certainly this can be irritating, but it is the part of doing business
and you have to get used to dealing with it. Worse than this, in our experience registrars simply don”t see anything wrong with what their auditors do. It is in these areas where energy saving efforts should be focused.
April 2nd, 2014 at 8:52 am
Thanks for the marvelous posting! I seriously enjoyed reading it, you may be a
great author.I will make certain to bookmark your blog and will come back at some point.
I want to encourage yourself to continue your great job,
have a nice day!
sneakers homme louboutin
April 15th, 2014 at 7:00 am
What’s up, the whole thing is going fine here and ofcourse every one is
sharing data, that’s in fact excellent, keep up writing.
April 19th, 2014 at 4:33 am
It is actually a great and useful piece of information. I am happy that you just shared this helpful info with us. Please stay us informed like this. Thanks for sharing.
May 11th, 2014 at 11:53 am
Hello there, I found your website by the use of Google at the same time as looking for a similar subject, your site came up, it appears good. I have bookmarked to my favourites|added to bookmarks.
May 13th, 2014 at 2:49 am
Great beat ! I would like to apprentice whilst you amend your site, how can i subscribe for a weblog site? The account helped me a acceptable deal. I were a little bit acquainted of this your broadcast offered brilliant clear concept
May 21st, 2014 at 10:32 am
Wow, superb blog layout! How lengthy have you ever been blogging for? you made blogging look easy. The full glance of your site is great, as neatly as the content!
June 9th, 2014 at 9:13 pm
Hi there, just wanted to tell you, I enjoyed this article.
It was practical. Keep on posting!
June 11th, 2014 at 9:16 pm
Way cool! Some extremely valid points! I appreciate you penning this post and also the rest of the website is also really good.
Visit my blog :: social landings (http://www.gratsocial.com/)
July 26th, 2014 at 2:32 am
I see a lot of interesting content on your website. You have to spend a lot of time writing, i know how to save you a
lot of work, there is a tool that creates unique,
SEO friendly articles in couple of seconds, just type in google – k2 unlimited content
September 12th, 2014 at 11:31 am
Las Galletas was a fishing village but is swiftly turning into a resort
in the south of Tenerife.
October 3rd, 2014 at 3:12 am
Las tabletas son las estrellas del instante, el equipo del
deseo. Y aunque por ahora es producto de pocos, asimismo tiene un destino masivo.
“El público que el día de hoy tiene una tableta es muy informatizado.
Asimismo posee un smartphone y una computadora. Para sentarse sobre un sillón y navegar”.
My blog – perros en adopcion asturias gratis
November 7th, 2014 at 2:52 am
piece of shit…
Doogog.com » Blog Archive » Actionscript 3 External Preloader…