In this tutorial, I will assume a basic level of Flash knowledge.

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.
    The Align Panel
  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.
    The Textfield Panel

    Your movie should now look something like this.

    Screenshot1

    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

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.