Friday, December 16, 2011

Flash: Playing with preloaders

I remember the days where I was trying to work around preloaders and trying to force them to display a numerical status of 0 - 100%. Especially, when you are using a in-house server and it just happens that your server is using the same connection as your laptop your desktop, you will never get to see your preloader running. Especially when there are more and more flash sites out there with interesting interactive preloaders, it would be nice to have a COOL preloader up and running. By the way, here's my solution to tackle around and ensure that you will be getting a preloader all the time.

By the way I will be working base on my demos a few weeks ago.

Here's the source file for the preloader.
package com.stretchingDemo
{
 import com.util.preloader.*;
 
 import flash.display.MovieClip;
 import flash.events.Event;
 
 public class Index extends MovieClip
 {
  //To preload your preloader file, which is this file.
  private var tempMainPreloader:MainPreloader;
  //To preload your content file
  private var tempSectionPreloader:SectionPreloader;
  private var _preloader_mc:MovieClip;
  
  //Variable to store your current preloading status 
  private var _preloadNum:Number = 0;
  //Variable to store the highest numerical number to display
  private var _maxPreloadNum:Number = 0;
  
  public function Index():void
  {
   //Start preloading this file
   tempMainPreloader = new MainPreloader(this,5);
   _preloader_mc = this.getChildByName("preloader_mc") as MovieClip;
   this.addEventListener(Event.ENTER_FRAME, progress0Handler);
  }
  
  //function executed when the preloader had finish loading
  private function progress0Handler(event:Event):void
  {   
   var str:String = String((tempMainPreloader.currentProgress)); 
   //Update your text field to display the loading status
   this._preloader_mc.preloader_txt.text = str;
   
   if(tempMainPreloader.currentProgress == tempMainPreloader.maxProgress){ 
    this.removeEventListener(Event.ENTER_FRAME, progress0Handler); 
    loadSubContent(); 
   }
  } 
  
  //function to load the main swf
  public function loadSubContent():void
  {
   //Grab the main swf that you want to load.
   //Usually I will call the prelaoder file 'load_XXX' 
   //where 'XXX' will be the filename of the main swf file. 
   //On top of this, this will help you to structure your 
   //folders properly too. As you can see will my swf files
   //are in the swf folder and my html file is on the root folder.
   var tempStr = String(this.root.loaderInfo.loaderURL).replace(/%5F/gi,"_");
   var tempArray = tempStr.split("load_");
   this.addEventListener(Event.ENTER_FRAME, preloadContentEvent);   
   tempSectionPreloader = new SectionPreloader(tempArray[0] + tempArray[1] ,95);
   tempSectionPreloader.addEventListener(
SectionPreloader.SectionContentLoading, progressHandler2);
  }
  
  //function to update the numerical count on the preloader field
  //And show the main content when the numerical count reaches 100
  private function preloadContentEvent(event:Event):void
  {
   if(_preloadNum < _maxPreloadNum)
   {
    _preloadNum ++;
   }
   this._preloader_mc.preloader_txt.text = Number(_preloadNum + tempMainPreloader.currentProgress);
   if(_preloadNum == _maxPreloadNum && _maxPreloadNum == tempSectionPreloader.maxProgress && tempSectionPreloader.getContent() != null){ 
    tempSectionPreloader.removeEventListener(
SectionPreloader.SectionContentLoading, progressHandler2);
    this.removeEventListener(Event.ENTER_FRAME, preloadContentEvent);  
    this.removeChild(_preloader_mc);
    this.addChild(tempSectionPreloader);
   } 
  }
  
  //function that will be called to update the progress of the loading 
  //of the file when the main file was loading and finish loading
  private function progressHandler2(evt:Event){ 
   _maxPreloadNum = tempSectionPreloader.currentProgress;
  }  
 }
}
* Click here to view the previous example.
^ Click here to view the demo of this example.
~ Click here for the source files of this demo.

No comments:

Post a Comment