Creating a Preloader in Adobe Flash with Actionscript 3 – Part II

Setting up the Script for our Preloader – Part II

This is part two of a two part tutorial. Here is a link to part one of Creating a Preloader in Adobe Flash with Actionscript 3

Displaying the percentage loaded as a number

To display your percent variable as a percentage, instead of a decimal number you will need to do a couple of things.

Unfortunately, the decimal numbers are currently about 8 digits long, and a number between 0 and 1. Where we would normally want to see something like 33%, not .342394785.

So step one will be to increase the value of percentage by multiplying itself by 100.

percentage *= 100; // give us a value that has 2 digits to the right of the decimal

Then you will want to round it using the Math.Floor() method.

percentage = Math.Floor(percentage); // remove the remaining numbers to the right of the decimal

Now we will want to write out our percentage to the text box. We can use the “+” symbol  to concatenate two or more pieces of text together, to make a bigger, more meaningful string.

percentTxt.text = percentage + "%";

Of course we should probably make the text displayed more useful by stating something like:

percentTxt.text = percentage + "% loaded.";

This should give us a function that looks something like:

function frameEvtHandler(event:Event) {
  var total:Number = this.loaderInfo.bytesTotal; // total bytes for this movie
  var loaded:Number = this.loaderInfo.bytesLoaded;  // total bytes loaded so far
  var percentage:Number = loaded/total; // this gives you a number between 0 and 1

  progressBar.scaleX = percentage; // scale the width of our progress bar
  percentage *= 100; // give us a value that has 2 digits to the right of the decimal
  percentage = Math.Floor(percentage); // remove the remaining numbers to the right of the decimal
  percentTxt.text = percentage + "% loaded.";

}

What to do when it’s completed

Now we need to check to see if the script has completed loading. This is easy, because we can check to see if percentage is equal to “100”, or we can check to see if total is equal to loaded.

We will check by using an conditional if statement, to check that equality. If it is true, we will have Flash execute some commands for us, if not, we will simply bypass that part of the script.

if(loaded == total) { }

Inside of that function we will want to remove our event listener for our loading script, the Enter Frame listener, and then tell Flash to continue to play after our frame.

removeEventListener (Event.ENTER_FRAME, frameEvtHandler);
play();

So the if statement block should look like:

if(loaded == total) {
  removeEventListener (Event.ENTER_FRAME, frameEvtHandler); 
  play();
}

This will go at the end of function, as it needs to be checked each time the script runs. This means the entire function will look like:

function frameEvtHandler(event:Event) {
  var total:Number = this.loaderInfo.bytesTotal; // total bytes for this movie
  var loaded:Number = this.loaderInfo.bytesLoaded;  // total bytes loaded so far
  var percentage:Number = loaded/total; // this gives you a number between 0 and 1

  progressBar.scaleX = percentage; // scale the width of our progress bar
  percentage *= 100; // give us a value that has 2 digits to the right of the decimal
  percentage = Math.Floor(percentage); // remove the remaining numbers to the right of the decimal
  percentTxt.text = percentage + "% loaded.";

  // check to see if our script has loaded completely or not.
  if(loaded == total) {
    // remove the event listener so we don't process the loading script any more
    removeEventListener (Event.ENTER_FRAME, frameEvtHandler); 
    play();
  }
}

Don’t forget to stop playback on the next set of frames, so it doesn’t go back to our first frame and start this process all over again.

Watch on YouTube

Creating a Preloader in Adobe Flash with Actionscript 3 – Part II was originally found on Access 2 Learn