Skip to content

Preloaders: Introduction to Various Methods

January 12, 2011

As far as I know there isn’t a standard methodology for creating a Flash Preloader in ActionScript 3. I have found some tutorials that provide different methods. I’ll introduce the concept behind each other them here and provide links to the tutorials, so you can choose the learn the method that’s best for you.

What Is a Preloader?

Preloaders are simply a way of letting user’s know that your swf  is being loaded. If your swf’s are large, it is likely that they will take time to be fully loaded when a user enters a webpage. Before the swf loads, that are of the page will be blank. Likely if you leave it like this the user will just exit the site. Having a preloader present while a swf’s contents are loading helps to convince users that the swf will eventually show up and that they should stick around.

Single Swf or Separate Preloader?

A major difference between the methods I have found is whether the preloader exists as a separate swf or as part of the swf containing your content (single swf). The advantage of having a separate preloader swf is that the setup is cleaner and the preloader can load in your “content swf” and then replace it with other swfs if you desire. It doesn’t require any changes to be made to your content swf and is therefore convenient if your swf is already made.

The advantage of a single swf method is that everything is packaged up nicely, the owner of the tutorial for this method stated that if you are submitting a game to a website, they usually ask for the game as a single swf. However, this method requires certain steps be taken in the swf file in order to work.

Separate Preloader


Flash Evangelist, Lee Brimelow, describes this as “the cleanest, most reliable method of preloading your ActionScript 3 movies”. This involves creating a separate preloader swf which once started will load in any other swf you specify. Because the preloader is small, it will load quickly. Note that the preloader swf should be the same stage size as your content swf.

Same Swf Preloader


This preloader is contained within the same swf as your content. This is possible because the only thing loaded when the swf begins is the first frame and the only thing they put on the first from of their swf is the preloader. Therefore, all other objects in the library that must be accessed by your document class must have “export in frame 1” unchecked in it’s properties panel. All these objects will be placed in a movieclip and this movieclip will be placed on frame 2. All your actual content is place on frame 3.

Therefore, when the swf begins, frame 1 loads quickly with the preloader on it. Then the timeline is then played and while all the objects in frame 2 are being loaded, the preloader is still displayed. Once the contents are loaded, the preloader is removed and we move to the actual content on frame 3.

Update: An old gotoandLearn tutorial written in AS2 ( actually shows a method similar to this with one important difference. (note: I haven’t tested this one out myself).

Instead of having to place all the objects on frame two, you can just make a change in your publish settings. As shown in the following picture, you may go into the “Flash” tab of your publish settings, click the “Settings” button for Actionscript 3, then change “Export Classes in Frame: 1” to “Export Classes in Frame: 2”.

Other Notes

I’d just like to point out a few things. First, these methods take into account loading in content that is already within a swf. I have had instances when I was loading in other resources that were large and have sometimes attached the status of a preloader to them, such as large images or videos. Second, preloaders just reassure the user know that the site is working and will take a minute. I’ve actually heard of fake preloaders (just an animation) being used before to cause the same effect.

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: