Flash CS3, CS4 Tutorial, Preloader

Users hate to wait, and there is a good chance the will leave your site without every actually seeing your hard work if your site takes to long to load. In this Flash CS4 Tutorial, I am going to show you how to make a Preloader using ActionScript 3.0. A Flash CS4 Preloader will tell users to be patient the site as working and will finish loading soon. A Flash CS4 Preloader is reassuring to the user, where as a blank white screen is scary. Often a user will feel that a blank white screen means that a site is broken. And why should a user wait for a broken site if they can just go somewhere else. The trick to keep the user from leaving is to simply use actionscript to create a short, simple, fast loading, animation that entertains the user. ActionScript Preloaders need to be small. Preloaders need to load quickly or there is no real point in creating one. So remember a simple nice looking preloader will work better then a fancy complex animation.

The concept of a Flash CS4 Preloader is rather simple. You tell Flash using ActionScript to compare the amount of data loaded with the total data in the movie. Then as this comparison value changes go do something, in the case of this Flash CS4 Tutorial that something is to fill a box.

Let get this Flash CS4 Tutorial under way, by download the source files. As normal in this Flash CS4 Tutorial some of the work has been done for you. You should see that the layer panel in the main time line looks like the example below. You should take note of the layers panel. You will see an object named and labeled bar_mc. That object is the magic behind this Flash CS4 Tutorial. First thing you need to do is to add a stop(); tag to the first key frame in the actions layer. The stop(); tag is so that the movie(swf) will stop at this point until we tell it to do something. In this Flash tutorial we want the time line to stop here until the preloader has finished.

Stop(); root.loaderInfo.addEventListener(ProgressEvent.PROGRESS, progressAction);

Now you need to add the code from the example. Stop(); should already be there if your following along with this Flash CS4 Tutorial. By coping this code you are adding an event listener to the root time lines loaderInfo property. And then you are telling Flash to listen for the progress of that event. Basically, you are telling flash to track what on the main time line has loaded and whenever something is being loaded call the function progressAction.

Next, in this Flash CS4 Tutorial we will define the function progressAction. On the next line in the actions panel lets create the function progress action. Copy and Paste the following:

function progressAction(yourEvent:ProgressEvent):void {

var yourProgress:Number=yourEvent.target.bytesLoaded/yourEvent.target.bytesTotal; bar_mc.scaleX=yourProgress; myTextField_txt.text = Math.round(yourProgress*100)+"%"; };

If you have completed my other Flash CS4 Tutorials then the first line should be very familiar. If not what you have done is created the function called progressAction given it the parameter of ProgressEvent then voided the data type. What may not be as apparent are the next few lines. First you are creating a variable called yourProgress data typing it as a Number then setting it equal to something. In this Flash Tutorial that something is the amount of bytes loaded. The rest of the line is a property of Flash, I'm just giving you the code to access it.

On the next line we access the magic of the bar_mc. This is really cool so pay attention. All you are going to do is set the width of bar_mc = to yourProgress. That means that when nothing has loaded the width of bar_mc is equal to 0. Ok, so it isn't magic but it sure seems to be magic to those that do not know how to do it. In the last we are going to add the text to myTextField_text. You need to use Math.round() so that you get a whole number and not something like .3435346523862334 multiply it by 100 because bytes loaded comes in as a decimal with 1 being fully loaded. If you want to check it add a trace tag. +"%" simply adds the percent sign to the end of the number.

So, you now have a bar that grows with the amount of data loaded in the main time line, but nothing else happens. You need to make the movie play when the function progressAction is finished. There are several ways to do make Flash CS4 do something when it has finished loading. First, I'm going to show you the simplest way. You can simply add an if statement that checks to see when yourProgress is equal to or greater then 1. If yourProgress is greater or equal to one then play.

myTextField_txt.text = Math.round(yourProgress*100)+"%"; if if (yourProgress >= 1){ play(); }

Or add the following code, after your current function.

root.loaderInfo.addEventListener(Event.COMPLETE, finished); function finished(yourEvent:Event):void { play(); };

After you decide which method you want to use you can press Control-Enter to test your movie.

If this Flash CS4 Tutorial isn't working for you it is most likely because you are testing from you local machine and the file is already loaded. You need to use a few features of the Flash Player to test your preloader. First, you may want to turn on the bandwidth profiler. Press Control-B or View / Bandwidth Profiler.

For your preloader to work you need to adjust the Download setting. Go to View / Download Settings normally I chose DSL but feel free to set your simulation to whatever you want. Last step is to Press Control-Enter or View / Simulate Download. The first time you pressed Control-Enter was in Flash to render or publish the swf. The second time you press Control-Enter is in the actual swf, and this time you start the download sequence. Continue Smiley

Congratulation, you have a preloader. Feel free to modify the code in anyway. Think about changing alpha, rotation and/or just about any property Flash has and by all means send your friends links to my web site. FrenchSquared.com

Download Source Files