Print Version  Email to Friend  Post comment

Posted by admin | Published 2006-07-22 |

In this tutorial you will learn how to create a simple preloader. This is great for your big projects that take awhile to load. This will give the person viewing your file a loading screen which will say how much % is done downloading.

Step 1 : Setup frames

1. Select frame 1 and click F6 on the keyboard twice. This will add 2 keyframes in frame 2 and 3. So your timeline should now look like this.
   
   
   
2. On the 1st frame create a text box.
   
   
   
3. Now name the instance "myOutput". If you don't know where the instance is, open the property window up and its right under the Dynamic Text drop down menu. Make sure you have the textbox selected else you will do this step wrong!
   
   
   
4. Select the textbox you made and press Ctrl+c to copy and then click on frame 2 and press Ctrl+v to paste it into the 2nd frame. So now the 1st and 2nd frame should have the same exact text box in the same exact location. If they are not in the same location then just change the X and Y axis in the property menu so they are the same. The 3rd frame will be for your image/sound or anything else. We will get to the 3rd frame a little bit later.

Step 2 : Adding actionscript

1. Click on frame 1 and then open the action panel. Copy the following code into the panel.
   

   percent = Math.floor(getBytesLoaded()/getBytesTotal()*100); myOutput.text = percent + "% is loaded";


Percent is the variable that we will store how much of the movie is loaded.
getBytesLoaded() retrieves the amount of bytes loaded
getBytesTotal() retrieves the total size of the movie
When you put these 2 statements over each other (frame 1 and frame 2) and times by 100, you will get the percentage of the movie loaded.
Math.floor() rounds the number to the nearest whole number

2. Now click on the 2nd frame and add the code below into the actions panel.
   

   if (percent == 100) { gotoAndStop(3); } else { gotoAndPlay(1); }

   
   This is very simple to understand... this code is basically saying when the percent loaded gets to 100 then go to and stop at 3 which is frame 3 (where we will be adding our files in the next step) else the code will keep loading to 100%.
   

3. The 3rd frame add a simple stop(); in the actions panel. This will tell the movie to stop else it will keep looping.
   

Step 3 : Import files

1. Click here to download an image file if you don't have one. I'm going to use this to test the preloader and to show how it works.
2. Go to frame 3 and add then click on file ð import ð import to stage. Now the image is on the 3rd frame.
3. Test your movie and it should look like the example below.
4. Download the source file here

Your Name:

Title:

Comment:

Verification code:

{show_comment}