Creating a simple loadbar and percentage counter is really quite simple. All it requires is a little code and a little design talent. A nice looking preloader can really make your movie stand out and grab the watcher’s attention.

First of all, Open up flash and make two layers. Name the first Graphics and the second AS. then extend the timeline to three frames. On the AS first frame copy and paste this code into the ‘actions’ menu:

   _root.loadedbytes = getBytesLoaded();
   _root.totalbytes = getBytesTotal();
   _root.percentbytes = int(_root.loadedbytes/(_root.totalbytes/100));

Then create a keyframe on frame two of the same layer and enter this code:

   if (_root.loadedbytes == _root.totalbytes) {
   gotoAndStop(3);
   } else {
   gotoAndPlay(1);
   }

The loadbar is the movie clip you see which shows graphically how far the movie has loaded (e.g the ng preloader). The beauty of the code we’re using is that your loadbar can be anything you want that fits into 100 frames. You could have a character hacking away at a hourde of zombies until they all have been defeated (movie loaded) or you could have a car drive all away across the screen. Anything you want.

But as this is just a simple tutorial to get you started lets just have a bar that stretches across the screen. Create a movieclip and call it ‘loadBar’. Then on the first layer draw two vertical lines a bit away from each other. And on a layer above shape tween a horizontal bar stretching from one line to another. See example below;

Now lets go back to your main timeline. Make sure that you’re on the ‘graphics’ layer and drag your loadBar MC onto the stage. You might have to resize it. Now you have to give the actual loadbar it’s code in order for it to work with the rest.

Click on your loadBar MC and enter this code into the actions menu;

    onClipEvent(enterFrame){
    gotoAndStop(_root.percentbytes);
    }     

Now to put a percentage counter. This is even easier. Select the font tool. Set the font to times new roman or arial (something every computer will have) and drag a text box. On the proporties menu make sure the text type is set to dynamic text otherwise the percentage counter won’t work. You do not have to write anything in the text box.

When you select this text box you should see on the proporties menu a box labelled ‘var’. In this box type _root.percentbytes so the actionscript can ‘see’ it. On the third frame of the graphics layer make a keyframe and put a button on it. on the button put this code:

  on(release){
  play();
  }

This will play whatever comes after your preloader. If you want the button to jump to a specific frame number then try:

  on(release){
  gotoAndPlay(#);
  }

I hope you learnt something. Direct all comments and/ or questions to liam.porter@gmail.com

~ tutorial written by CrustClock 2005