Tutorial Navigation
 

     
 Links
 

 
.

 

 Search         Date   
      

SwishMax
:  Preloader Simple, 
April 11, 2004  -  by Menumaker  
What is a Preloader and what the principal use?
The preloader is essentially used to prevent partial loading of the movie while it play. A preloader is usually made attractive to the viewers to keep them occupied while another movie or data is loaded in the background.
For Example: in d Movie with 2 scenes.
Scene1 (PRELOADER) 16k
Scene2 (MAINMOVIE) 250k
 
We play the scene1 with 16k that was loaded first while the Scene2 with 250k is loading while the sceen1 is playing (background) and when we know that the scene2 was loaded then we play the scene2.
 
Preloader are very important, because if user that is viewing your page don’t know something is happening during the loading of your movie, the viewer may think the site is down.

Preload simple sample:









The main concept will be creating 2 scenes 1 for the preloader 1 for your main scene:

First scene (PRELOADER): contain few objects:
  • MyCompany where you going to insert the name of your company.
  • bytes_text where we going to display the total bytes and the bytes loaded.
  • Percent_text where we will be displaying the percent loaded.
  • Loadedbar_outline its just a small outlines square to create a border for the bar that display graphically the percent loaded.
  • Loadedbar the bar that display the percent loaded (could be any graphic or design.
  • MCI_NO to create the metallic effect on the company name.
  • Shape to add a border to the entire scene.
See image design below:

Now we just need to add the script need it to make the preloader work
in the PRELOADER scene we add this script code:
onLoad () {
    // Created by Oper 2004-01-16   
    // use _xscale and _yscale to get your Preloader bigger
    // in % 100 is same size, 110 is 110% bigger
    // Dont use number to Big cuase it will Destroy look!
    percentloaded=0;
    Loaderbar._xscale=0.1;
}
onFrame (1) {
    pcLoaded = _parent.getPercentLoaded();
    loadedBytes = _parent.getBytesLoaded();
    totalBytes = _parent.getBytesTotal();
    loadedKB = Math.round(loadedBytes / 1024);
    totalKB = Math.round(totalBytes / 1024);
    loaderbar._xscale = pcLoaded;
    percent_output = pcLoaded add "% Loaded";
    bytes_output = loadedKB add " kb of " add totalKB add " kb";
    if (loadedKB >= totalKB) {
        gotoAndPlay(3);
    }
}
onFrame (2) {
    gotoAndPlay(1);
}
onFrame (20) {
    nextSceneAndPlay();
}

We are using few functions to accomplish our need:
getPercentLoaded() to obtain the percent loaded.
getBytesLoaded() to obtain the bytes loaded
 
During onload() event we just define the variable we are going to use and get our loaderbar smaller loaderbar_scale=0.1 and jump to frame 20 if the movie was totally loaded, Onframe(1) event we calculate and display our text, Onframe(2) we go again to frame 1 cuase still the movie isn’t loaded. Onframe(20) this were the preloader go when the movie is totally loaded you could add any script here before loading the next scene and then nextSceneAndPlay() (to start playing the MAINSCENE).
 
You could download the file and just copy the PRELOADER scene into your movie and
Move it to the top of your MAINSCENE

    Total Download: 178 Last Download: 3/05/2010

.

     
 Featured Links