| Easy Preloader in AS2 |
| Written by Daniel | |||||||
| Friday, 01 May 2009 09:54 | |||||||
|
Okay, so, it's good practice to add a preloader to the start of your flash application, this eliminates the user thinking "it's broken". The pre-loader I'm going to show you s frightfully easy. To set it up you need 2 empty keyframes next to each other at the very beginning of your Flash app, and 2 objects on the stage - a text box and an image of some kind (I'll use a standard white bar). Your text box needs to be a dynamic text box which needs the instance name loadText. And your image can be a long bar - size of your choosing - but must have the instance name of loadBar. Below you can see the right hand side of my stage featuring part of loadBar and all of loadText. loadText can be filled with absolutely anything at the moment as you'll be changing it through code anyway. The light grey outline of my loadBar is just there for decoration and serves no purpose to your code so dont worry.
![]()
Right, the next part is where we set up our code. In the first keyframe of your application we need to begin coding with this code below:
Okay, I've set up two variables, loadedBytes and totalBytes. All this code does is return some basic information about your application, this.getBytesLoaded() simply returns how much of your application has loaded so far and this.getBytesTotal() just returns the total size of your application. We'll be using these values to work out a percentage later on. The Math.round part just rounds the values up to non-decimal numbers because a number with decimals would just confuse things at the moment. Now we need to convert the above values into a percentage, which is easily done. Divide the loaded bytes by the total bytes and then multiply this value by 100. Or as you see below set out using two variables for clarity.
We can safely assume that the variable "percent" will contain how much of our application is loaded (in %). Now we need one more tiny spot of Maths to help us construct the rest of the preloader. Our loadBar currently has a width of 773px, I want my bar to stretch to it's full size by the time my loader reaches 100%, so how to I convert this value of 100% to 773 pixels.
I needed to find out what 1% of my bar is, which is a pretty easy sum, divide 773 by 100 and you get 7.73. I multiplied 7.73 with the currently loaded percentage of my application. It can be difficult to grasp so if you have any queries then just tell me in the comments at the bottom of the page. The next part is to put the actual percentage loaded into the loadText -
You get the number that is stored in the "percent" variable and then add a percentage sign onto the end. Simple. We're almost done now, but before we move on I want you to understand something. All the previous code we've done in this tutorial represents 1 snapshot of a load, what I mean by this is that, the code only runs once, so it'll run with 1% in the "percent" variable and then end. What we want is to constantly run this code, run it over and over until it reaches 100%, so a simple way to do this is to jump to our SECOND blank keyframe that I told you to set up at the beginning and add this code to it:
This means that the code in the First frame will run once, then the playhead will move to frame 2, this code (above) makes it go back to frame 1 so we've created a loop of sorts where the code runs again and again and again. There are other ways to achieve a loop in AS2 but I believe this is the simplest. If you dont quite get it, see the illustration below:
![]()
So, we've covered how to get all the percentages up to 100, but because we've created a loop we dont want this loop to run forever, we want the loop to end when the loading hits 100% so - back in the FIRST frame we need to add an if statement.
If our loaded bytes is equal to our total bytes, this means our application is fully loaded. I've added a gotoAndPlay command here to jump to the start of my application, so when the application is fully loaded - start playing it. I've added the full code below so you can copy and paste it if you must, just remeber to add the gotoAndPlay command to your second frame. -
Hope you get everything you need out of this tutorial and can I please ask you to add a comment below, this way we can improve how we deliver our tutorials based on your feedback.
|
|||||||
| Last Updated on Friday, 01 May 2009 10:50 |

