Creating a Web Site Preloader In Flash

So, you have finished your latest personal website and you are mad about the way it looks. It is a jewel, a perfect combination of flash "engineering" and artistic eye. But it's a pretty big file and, as a consequence, before people get a chance to admire your work they get bored because nothing is on the screen (your site is loading) or they think that nothing is loading at all. It's time you learnt about a wonderful marvel of flash - preloaders.

This tutorial will guide through all the steps of making a preloader for your flash site - a nifty trick worth adding to your flash bag of tricks.

Without further ado, let's get to it.

Set up your scene

The first step is to set up your scene. The thing is that preloaders need something to load if they are to work properly. So go ahead and import a big picture in your scene - anything above 200-300 kb will do. Make a new layer, name it actions , click the first keyframe and hit F9 (actions panel) and introduce a stop action : "Stop(); ".

Now, open the scene panel (if you don't have it on the right of your workspace, go to Window >> Other panels >> Scene, or press Shift + F12) and hit the small plus sign at the end of it. A new scene should appear in the scene panel. Click on it and drag it so that it becomes the first one.

Creating loading bar

Grab the rectangle tool and draw a rectangle on the stage. Put it anywhere you want (I've aligned mine with the center of the scene). Also, make sure that it has a frame around it. Select only the filling and hit Ctrl+x. Create another layer and hit Ctrl+Shift+V (this pastes the fill of the rectangle in exactly the same spot as before, only on another layer). Select this layer and drag it under your original layer. Hit F8 to make it a symbol, choose movie clip as behaviour and name it whatever you want. Also, make sure the registration point is on the left, not the center (look towards those 9 small squares and click the one that is in the middle, left side).

Give it an instance name (click on the symbol and look down, to your left) of "loadingBar".

Loading...

Create a new layer and grab the text tool. Type "Loading ..." and then position it wherever you want.
Create another layer and name it actionscript and select the first keyframe.
You are all done with the setting up. From now on, everything that we will do will be in actionscript.
Hit F9 to bring up the actions panel and we will get to work.

Stop() Action

The first thing we need to do is make sure that the .swf file does not start to play until all the file has loaded. This means that a "stop" action is in order.

Stop()

Set _xscale Property

Next we want to make sure that, as the loading begins, our loading bar is not indicating that 100% of our flash file has loaded. We can achieve this by manipulating the _xscale property of our loading bar.

Stop();
loadingBar._xscale = 1;

Calculate percent on onEnterFrame event

The next important step is to make sure that our loading bar gets longer as the flash file is loading - makes sense, really. For that we are going to use a onEnterFrame event, and place all remaining code within this event handler. We are also going to calculate how much ( % ) of our site has loaded using the getBytesLoaded and getBytesTotal methods.
Let's get to it.

Stop();

loadingBar._xscale = 1;

loadingBar.onEnterFrame = function(){
//the variable KbytesLoaded will now store the number of
//bytes that have loaded
var KbytesLoaded = getBytesLoaded()/1024;
//KbytesTotal will store the size of our flash file
var KbytesTotal = getBytesTotal()/1024;
}

Adjust _xcale property

We are now going to calculate how much of our site has loaded (in percentages and assign that value to our loading bar's _xscale property to make sure that it starts getting longer as the site loads).

Stop();

loadingBar._xscale = 1;

loadingBar.onEnterFrame = function(){
var KbytesLoaded = getBytesLoaded()/1024;
var KbytesTotal = getBytesTotal()/1024;
//Using the Math.floor just rounds the number
//between the parentheses to the closest smaller
//whole number
var percent = Math.floor(KbytesLoaded/KbytesTotal *100);
//Assigning the value we have calculated above insures that our
//loading bar will get longer as our site loads
loadingBar._xscale = percent;
}

Play the movie

The only thing that we have left to do is to check whether the site has fully loaded and, if that is the case, to advance to our main scene and play the movie.

Stop();

loadingBar._xscale = 1;

loadingBar.onEnterFrame = function(){
var KbytesLoaded = getBytesLoaded()/1024;
var KbytesTotal = getBytesTotal()/1024;
var percent = Math.floor(KbytesLoaded/KbytesTotal *100);
loadingBar._xscale = percent;
if (percent >= 99) play();
}

There is sample Flash Preloader Project, used in this tutorial

This tutorial is written by Dr00pY.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback