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!