Create A Flash Preloader > advanced tutorial
by Jon Chiappetta


                                          
              If you have produced a large flash project that is being served from the
            web it might take longer to load than the average viewer is willing to wait.
        Why not inform and mesmerize your viewer to keep them from clicking away .
                                                    ADD A PRELOADER!!
         This preloader will display the percentage of the Flash File that has been
      downloaded so that the viewer will realize that it won't be long before they are
                                             enjoying your Flash project
 

1. After you open a new flash project the first step is to click on the first frame of "Layer 1" and click on the "Actions - Frame" box near the bottom. Click on the "View Options" (the one circled) and select "Expert Mode". Now insert this code:

Code:  copy and paste to your action script box

bytes_loaded = Math.round(_root.getBytesLoaded()); // get the bytes loaded
bytes_total = Math.round(_root.getBytesTotal()); // get the total bytes of the flash file
getPercent = bytes_loaded/bytes_total; // get a percentage of whats loaded
_root.loadTxt = "Loading... " + Math.round(getPercent*100) + "%"; // output to the user how much is loaded so far

// once the bytes loaded equal the total bytes go to and play ur movie
if (bytes_loaded == bytes_total) {
_root.gotoAndStop(3);
}

2. Next, right click on the next frame (Frame 2) of "Layer 1" and select "Insert Blank KeyFrame" and click on the "Actions - Frame" box (same as above) and insert this code:


Code: copy and paste to your action script box

gotoAndPlay(1); // this will loop the above script until the movie is loaded

 

3. Next, click on the "Insert Layer" button and drag "Layer 2" under "Layer 1". We will now make a text box to show the loading process.

Click on the first frame of "Layer 2" and select the "Text Tool". Drag out a text box onto the document. Click on the new text box and go down to the "Properties" box. Change "Static Text" to "Dynamic Text". Also change the "Var: " field to "loadTxt" (change everything in red).

 

4. Now select the "Insert Layer" button again and drag "Layer 3" under "Layer 2". Right click on the third frame (Frame 3) and select "Insert Blank KeyFrame". Now Import a picture to the "Library" and drag it onto "Frame 3" and your done! (Warning: When you play this file right after you made it you won't see the loader (since it is a local file) upload it to your site and then it will work)

This tutorial was made by Jon Chiappetta : student @ K.C.S.S
for ComTech class students