I recently spoke to someone who’d experienced this problem – and they were at a complete loss as to why it was happening.
That isn’t to say they were crap or a complete n00b or anything, just that good old MM keeps sneaking stuff past us developers and, with no obvious clues and little documentation on this problem, it can sometimes take a little digging to get to the solution.

In this case, it was down to the MM components that had been used in the movie. By default, these happy fellas sit in your library, automatically set to export themselves on the first frame. At other times, you may actually need to set an library item to export if, for example, you need to use an attachmovie command to add it to the movie at runtime.
In either case, you can bring up the linkage properties dialogue by right-clicking the symbol in the library and set it to NOT export on the first frame.

Exporting on the first frame means that the item will be available for actionscript use on the first frame and therefore will have to be downloaded before the first frame, leaving that lovely blank white rectangle you see on many sites before the preloader kicks in.
There’s never a good enough reason to use the first frame for anything other than a preloader, so, instead of making people wait for your movie in front of a blank, white screen, you use an ‘asset introducer’ frame.

An ‘asset introducer’ frame (for want of a better term) is a frame in your movie after the preloader, but before the main movie starts, that contains all the library items that you plan to use in your movie. The frame is never seen by the end user as you tell your preloader to skip over it using a gotoAndPlay command, but because the items are present on the stage, flash feels obliged to load them.
(You can use an extra scene to accomplish the same thing, but I’d never willingly advise anyone to use scenes in flash movies… ever!)

This frame can contain graphics, buttons and movieclips, but can also hold MM Components, sounds and video holders. With nothing being exported before frame 1, flash only needs to download minimal information before it can display that all important first frame and your preloader will start from 0%

1. A brief look at the Flash Drawing API.
2. Organising our Movie.
3. Creating the graphics with Actionscript.
4. Creating the percentage textfield with Actionscript.
5. Centering the preloader on the stage.
6. Writing the functions to collect data.
7. Putting it all together.

Grab all the tutorial files here

What is the point?

The idea behind preloading is that to ensure that everything we need to run our movie correctly; graphics, sounds, animations, etc have all completely loaded. We do this by stopping the movie from playing at a very early point – frame 1 being the most logical place – whilst we find out two things:

1) how much of the movie there is in total to load.
2) how much we have already loaded.

Once we have these two numbers, we can create a percentage and then effectively give a waiting user a good idea of how long they will have to wait before the show will begin!

Since Flash MX, it has been possible to create graphics through Actionscript code whilst the movie is running and we will use this to create a simple bar graphic to display how much of our movie is loaded.

Step 1: A brief look at the Flash Drawing API.

The Flash Drawing API gives us the power to create graphics in our movie without ever having to touch the Flash authoring environment. It provides extremely simple methods (functions), with which we can draw lines, shapes and fills whilst the movie is running. The methods we will be using in our preloader will be:

moveTo – Move to a new position to begin drawing.
lineTo – Draw a straight line from the current drawing position to the x,y coordinates specified.
beginFill – Specify the fill details of the shape we are about to draw.
endFill – Close current shape and fill it.

NOTE: Method names above are linked to Macromedia’s LiveDocs for full explanation.

Step 2: Organising our Movie.

As the code we’re going to be writing here will be dedicated to our preloader we don’t want to get it confused with other pieces of code that may exist in our movie. To prevent this and make it easy for us to find our code within our movie, create a new layer on the main timeline and call it ‘PRELOADER’. We will use the first frame of this layer for all our code.

NOTE: It is a good option to create an external actionscript file (.as) and use the ‘#include‘ compiler directive to add your code to the movie.

Step 3: Creating the Graphics with Actionscript.

Right. Let’s get started.
The first thing we will need if we are going to be able to draw is a MovieClip. As moveTo, lineTo, etc are all methods of the MovieClip Class (object), we will need an instance of a MovieClip in our movie in order to use them. This doesn’t mean that we have to go placing a clip on the stage like usual – all we need to do is to use the createEmptyMovieClip method.
When using createEmptyMovieClip we can capture a reference (a virtual link to the actual MovieClip) to the newly created MovieClip and store it in a variable for ease of use.

NOTE: For more information on MovieClips and references, check out Colin Moock’s Actionscript: The Definitive Guide.

Lets’s start by creating a container MovieClip, which will hold all of our graphics. We do this so that when it’s time to remove our preloader, we can do so by just removing the container. Select the 1st frame on our PRELOADER layer and add the following:

// Create our container and store reference in a variable:
var preloader_mc = createEmptyMovieClip( “preloader”, 10 );

Our preloader’s graphics will be two basic rectangles: one filled and one hollow. First, let’s make our filled rectangle – 150 pixels wide and 15 pixels high. This will be the main bar of our preloader.

Now for our hollow one.
We want this clip to appear on top of our filled bar, so our depth will be 30.

We have now created our graphics. They’re not going to win any prizes for design, but they’re clear, functional and they took us seconds to make. I’ll leave the award-winning to you.

Next comes the percentage display. If you don’t want to show the user this information, you can skip this next part and go straight to centering the preloader, but it is always a good idea to keep the user as informed as possible as to what exactly is happening and not providing enough feedback could mean the difference between a user staying or leaving your site!

Step 4: Creating the percentage textfield with Actionscript.

Alongside dynamically creating MovieClips, we also have the ability in Actionscript to create textfields. In our preloader, we now need to display a percentage that shows the user how much of the movie has loaded and to do this we must create a textfield using the createTextField method.
When creating our textfield we need to specify a name, depth, position (x and y) and dimensions (width and height) and to do this we need to work out a few things beforehand.

• Name. This is up to you – in this case, I’ll just call it ‘percentDisplay’, but the more obvious your naming of objects and variables in your code, the better.
• Depth. We need the percentage to appear above the rest of the graphics, so it’ll be 40.
• Position. The percentage will be centered on the hollowBar graphic, so we will use its position and dimensions to center the textfield.
• Dimensions. We only need a small area to display the percentage, so think about the largest possible string that we will have to display. In this case it will be “100%”,
  so as long as this fits, we will be fine.

NOTE: With naming conventions, you won’t readily notice the difference on smaller projects, but in larger, more complex applications, keeping names self-explanatory and easy to understand will help you immensely when it comes to working on sections of code that you may not be familiar with or simply haven’t touched for a while.

Now we have a textfield, we can apply style to the text (font,size,colour,etc) by using a TextFormat object. The TextFormat object gives us the ability to apply a style to a textfield or portion of text.

Step 5: Centering the Preloader on the stage.

Having graphics on the stage is fine, but let’s make it look a little cleaner and align our preloader to the center of our movie.
We can do this by taking our movie’s current width and height, finding the center point, finding the center point of our preloader and matching the two together.

Step 6: Writing the function to collect data.

OK. Now we have taken care of the graphical elements of our preloader, we need to start thinking about how it’s all going to work. We will need to montior the amount of data we’ve already loaded and update our graphics accordingly. As the code that will do this will have to execute over and over again, we can simplify our code by encapsulating the commands into a function. Using functions has the effect of cleaning up code considerable and, with proper naming conventions again, can make code a lot more readable to other users.

In this case we are going to take several lines of code that gather information and perform a calculation with that data and stick them all into a function called ‘getPercentageLoaded’. Not only are we cleaning up the code, but we are also letting others know exactly what our code does simply by encapsulating it in a well-named function.

The information we’re after here are will be provided by the methods: getBytesTotal and getBytesLoaded. They are simple to use and return the relevant amounts of data in bytes.

NOTE: Remember that if you ever want to obtain an accurate number of kilobytes from a bytes value, you must divide by 1024
i.e. var kilobytes = bytes/1024;

You will notice above that the last statement in the function is ‘return percentage’. If you’re not familiar with functions, what this does is to pass the variable we have just created inside the function (percentage) back out to the code where the function was called. This will become clearer in the next section, where we put everything together, call the function and use it’s output.

Step 7: Putting it all together.

All that’s left to do now is to write the actual logic of our process. We have our data gathering function and our graphics that are ready and waiting to be manipulated to give our user some valuable feedback and now we need to look at how our movie is actually going to play.

The first thing we want to do is to stop the movie, then we will use the onEnterFrame event handler to control our preloader. The onEnterFrame event is fired each time the movie enters a new frame and by attaching an onEnterFrame function to any movieclip (including the main timeline), we know that the code inside our function will be executed once every frame. Here we will attach the function to our ‘preloader_mc’ movieClip that we created earlier.

…and there you have it. This is a movie preloader that you can use again and again. To add this to a movie, just paste it into the first frame of your movie.

The idea behind this preloader is that we halt the progression of the movie and find out our filesize. We find then find out how much of that is loaded, use these numbers to create a percentage and then affect the scale of our bar to represent this. We will repeat this until a satisfactory percentage of the movie has been loaded and then we let the movie continue.

Grab all the tutorial files here

Step 1: Create the graphics / structure.

1. Create an empty movieclip. This will be our preloader, so you can call it something appropriate… …maybe ‘preloader’.
2. Now we are working within our new movieclip, create a long, filled rectangle and set the outline stroke to hairline.
   ( this is to ensure clean scaling of the line ).
3. Select the entire rectangle and bring up the ‘Align’ panel, shown below and click the ‘to Stage’ button.
   This will allow us to align our chosen objects to positions relative to the movieclip in which we are working.
   Click the ‘Align Left Edge’ button, then the ‘Align Top Edge’ button. This aligns our shape so that its top-left corner is flush up against the registration point (center marker) of our movieclip.
   
4. Select the fill of the rectangle and select ‘Convert to Symbol’ from the ‘Insert’ menu.
   (You may press F8 instead for the same effect).
   Call the new symbol ‘fill’ and set the behaviour to ‘Movie Clip’.
   Hit OK, bring up the instance panel and name the movieClip ‘fill’.
5. Repeat step 3, but for the ‘fill’ movieclip. Note: you will have to work inside the fill movieClip in order to align it properly.
   Once aligned, you will have to re-align the movieclip itself so that it fits into the rectangle outline.
   You should now have a movieclip that contains the outline of a rectangle and another movlieclip, called ‘fill’.
   As both of these items are on the same layer at the moment, separate them out into their own layers.
6. Lastly, add a dynamic textfield into another layer above the other graphics and set its variable to ‘txt’ as shown below.
   Place this textfield over the bar and adjust the text size to fit snugly.
   It is a good idea to enter the maximum possible amount of text into a dynamic text field
   ( in this case ‘100%’ ), in order to aid in sizing and positioning the textfield.
   

   Your movie should now look something like this.

   

   Note: to check if everything is properly aligned, marquee-select everything inside the main movieclip.
   You should only be able to see one pair of (registration point) cross hairs.
   If you see two, you need to repeat the alignment steps.

Step 2: Add the code.

Select the ‘fill’ movieclip and add the following code in the Actions panel:
( note: make sure it says ‘Object Actions’ (Flash5) or ‘Actions – MovieClip’ (FlashMX/2004) in the top of the Actions panel and not ‘Frame Actions’.
We want to add the actions to the movieclip itself, not into a frame. )

The code explained:

1. onClipEvent(load) {
     _root.stop();
   }

   This will simply halt the main timeline of your movie as soon as the frame containing this movieclip is entered.
   If that is the first frame of your entire movie, then everything will be halted until something re-starts it ( i.e. our Loader )

2. onClipEvent(enterFrame){

   This is the most commonly used movieclip event handler. It enables us to execute the code within it every time flash plays a frame.
   This basically means that if we set the main movie’s framerate to 18fps, then we will be looping through our code 18 times every second.

3.   var totalk = _root.getBytesTotal();
     var loadedk = _root.getBytesLoadedl();

   getBytesTotal and getBytesLoaded return the total filesize of our movie and how much of that is loaded (respectfully) in bytes (1K = 1024Kb)

4.   var percent = Math.ceil((loadedk/totalk)*100);

   We use Math.ceil on the final percentage to round the outcome of the calculation up to the nearest whole number.
   This gives us a friendlier figure to display in our textfield.

   ( Note: Sometimes the values for getBytesTotal and getBytesLoaded may differ slightly, so rounding to the next number up and checking for a percentage that is greater than 99% is advisable to allow for this discrepancy – any shortfall will be streamed as our movie starts playing)

5.   if (percent<99){

   This is our conditional statement. If our percentage is less than 99 ( i.e. not loaded ), we want to continue looping, otherwise we want to start the movie.

6.     _parent.txt = percent + “%”;

   “_parent” simply means “one level up” ( up – if you think of the main timeline being at the top )
   In this case, _parent.txt refers to the variable that our textfield displays and copies the current value of our percent variable into it, with a nice little percent sign on the end.

7.     _xscale = percent;

   This is the code that changes the horizontal scale of the bar. As the _xscale property uses a percentage, affecting this property is perfect for creating preloaders. If you think of the graphic you created as being 100% of the horizontal scale, 10% or even 50% will be thinner, therefore a pretty accurate representation of the amount of data loaded can be displayed.

8.   } else {
       _root.play();
     }
   }

   This is our ‘loop out’ action. If enough of the movie has loaded, simply start the main timeline playing.

… and there you have it. This is a movie preloader that you can use again and again. To add this to a movie, just drop it into the first frame of your movie.

Here’s a quick tutorial for you guys.. This is a great one for getting values into flash before the movie even starts playing and there’s no Javascript or server side code involved whatsoever!
A lot of people have heard about FlashVars and the idea of passing values into flash via HTML, but don’t know how to use it. Well there’s actually two ways of going about this.

1. Appending to the Filename
The idea here is that we append our variables onto the end of the URL from where the HTML will load the flash file. This is the “src” parameter in our <object> and <embed> tags. Just a quick point here.. The reason why we have to use both the object and embed tags is that some browsers respect one tag and some respect the other. This is due to the fact that in some browsers (Mozilla/Netscape/etc), flash is a Plugin and in IE, flash is an ActiveX Control. The different types of format require the different tags.

Note: Using this method means the swf will not be cached if the flashvars change. The SWF file will have to be re-downloaded by the user completely every time the flashvars are different.

In the code above, the %20 represents a space character. When dealing with text in html and flash, it may contain characters, such as &, = or quotes which can cause unexpected results, so it is always safest to escape or urlencode your variables beforehand.

2. The FlashVars Parameter

The other method of passing values directly into flash is by using the FlashVars parameter in our object and embed tags. As with the first example, the FlashVars must be added to both tags in order for it to work correctly in all browsers.

Example:
We are passing the same variables as before.

Example SWF: