How to make a simple Flash preloader

10 September, 2008

When using Flash content, it is important to preload the file. We do this for a variety of reasons, the main one being that Flash content is inevitably heavier on bandwidth than plain HTML (but the benefits far outweigh this small downside), and so our users are not left staring at a blank screen wondering what is happening we provide them a nice animation, and generally some loading information, to keep them amused.

In this article we will cover how to build a very simple preloader sequence that can be applied to many SWF files.

This, of course, is just one way of preloading Flash content and may not suit every application - there are more technical aspects to think of later, such as the amount of content loading into the first frame of the SWF - but it is a very simple solution that can be quickly implemented when needed.

We have written this article for both ActionScript 2 and ActionScript 3, so you can pick the version most appropriate to you below, and skip straight to that section.

• ActionScript 2
• ActionScript 3

ActionScript 2

What we want to do is set up a separate scene before our main content. In that scene we will have two frames. In our second frame we will measure how much of our current movie is loaded, and if it is not fully loaded we will jump back to the first frame to try again. The movie will jump between these two frames until the content is fully loaded, at which point we will, essentially, let the playhead move passed and into the real content scene of our movie.

So, we need to set up a blank scene with two key frames. We will leave the first keyframe blank, and on the second keyframe we will put the following code:

And that is all the code we need. This simply checks to see if the number of bytes loaded (getBytesLoaded) is less than the total number of bytes in the SWF (getBytesTotal) and if it is it will redirect back to the first frame, ready to check again when we come along to this frame again. If the getBytesLoaded equals the total number of bytes in the SWF then the playhead will automatically move onto the first frame of the next scene.

Now, to add an animation here, on a separate layer from the ActionScript, simply add a looping animation to the timeline. As we only have two frames in the main timeline, you will want to put the animation in a separate MovieClip to get the looping effect.

Finally, to get a percentage label on the screen, you will want to divide the bytes loaded by the total bytes and display the result as your percentage. To get a bar, or an object filling up as you load, the easiest way is to create a 100 frame MovieClip with a tween, and direct the play to gotoAndStop at each percentage value - so at 20% loaded it will go to frame 20, etc. But we won't go into that here any more than what we have, as that only complicates our incredibly simple preloader.

*NEW CONTENT* - 06 August, 2009

We have just created a new article which follows on from this one covering how to create a percentage based preloader: http://fcOnTheWeb.com/articles/percentage_preloader/. Check it out.

You can download a blank preloader file, using the code mentioned above, from the link below.

preloader_as2.zip

ActionScript 3

What we want to do is set up a separate scene before our main content. In that scene we will have two frames. In our second frame we will measure how much of our current movie is loaded, and if it is not fully loaded we will jump back to the first frame to try again. The movie will jump between these two frames until the content is fully loaded, at which point we will, essentially, let the playhead move passed and into the real content scene of our movie.

So, we need to set up a blank scene with two key frames. We will leave the first keyframe blank, and on the second keyframe we will put the following code:

And that is all the code we need. This simply checks to see if the number of bytes loaded (loaderInfo.bytesLoaded) is less than the total number of bytes in the SWF (loaderInfo.bytesTotal) and if it is it will redirect back to the first frame, ready to check again when we come along to this frame. If the loaderInfo.bytesLoaded equals the total number of bytes in the SWF then the playhead will automatically move onto the first frame of the next scene.

Now, to add an animation here, on a separate layer from the ActionScript, simply add a looping animation to the timeline. As we only have two frames in the main timeline, you will want to put the animation in a separate MovieClip to get the looping effect.

Finally, to get a percentage label on the screen, you will want to divide the bytes loaded by the total bytes and display the result as your percentage. To get a bar, or an object filling up as you load, the easiest way is to create a 100 frame MovieClip with a tween, and direct the play to gotoAndStop at each percentage value - so at 20% loaded it will go to frame 20, etc. But we won't go into that here any more than what we have, as that only complicates our incredibly simple preloader.

*NEW CONTENT* - 06 August, 2009

We have just created a new article which follows on from this one covering how to create a percentage based preloader: http://fcOnTheWeb.com/articles/percentage_preloader/. Check it out.

You can download a blank preloader file, using the code mentioned above, from the link below.

preloader_as3.zip

ferrari_chris