Sand Clock preloader how to...

Firstly here is the page of the preloader sand-clock-preloader

Quick preview of the component

The package includes  6 files, but the important for this tutorial are:

- Bottle.as
- SandClock.as
- SandClockPreloader.as

The first three are not relevant to this tutorial so I will not talk about them. The second three are what we are after.

Bottle.as

- Bottle.as is a class for showing the upper or lower glass pot of the sand clock. So SandClock.as instansiates two Bottle.as objects, one of which is flipped 180 degrees.
- I use drawPath command to draw the shpe of the upper/lower bottle. You can go and change the color of the glass but the quartz is most common for glass like objects. For drawing free shapes using the Graphics class please visit this sample

SandClock.as

- SandClock.as is the sand clock class which contains all it parts, like the two bottles, and the three wooden parts that hold the bottles.

- Find the liquidColor color in SandClock.as to change the color of the liquid. For example you can make it blue like some blue coctail or something :) 

- Find darkWoodColor and chocolateColor to change the fill and the stroke of the wooden parts accordingly.

 For example you can make them look like steel.  

- Find the tformat = new TextFormat(); segment on the bottom of the constructor to hange the formating of the preloader text. Maybe change font or color, size etc...

- SandClock.as has one very important function, it is called 

public function redrawBottle(percent:Number):void

{

       //code here......

}

This function draws the bottles with certain number of percents i.e how much percent is loaded in both upper and lower bottles. So if I use redrawBottle(49) that means the Sand clock will be redrawn to show (49%)  of the upper and (49%) of the lower bottle filled. (see above sample image).

SandClockPreloader.as

Has all the code you need to start using the sand clocl preloader. Here is a code part of it

        public function SandClockPreloader():void
        {
            delay = 100;
            repeat = 100;
            timer = new Timer(delay, repeat);
            timer.addEventListener(TimerEvent.TIMER, onTimerEvent);
            timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);

            // add preloader
            sandClock = new SandClock();
            sandClock.x = 300;
            sandClock.y = 135;
            sandClock.scaleX = sandClock.scaleY = 0.8;
            addChild(sandClock);
            timer.start();
        }

        public function onTimerEvent(e:TimerEvent):void
        {
            // when using redrawBottle() always use
            // 100 - percent because of the logic of the
            // preloader. It starts with 100% so
            // 100 - percent in order to start with 0%
            percentLoaded = 100 - timer.currentCount;
            sandClock.redrawBottle(percentLoaded);
        }

        public function onTimerComplete(e:TimerEvent):void
        {
            timer.reset();
            timer.start();
        }

As you can see i add timer for loading animation. But when using something to load you will measure the loading progress with the bytesLoaded and bytesTotal properties with Loader object. Have a look on the onTimerEvent function. I use these lines  

   percentLoaded = 100 - timer.currentCount;
   sandClock.redrawBottle(percentLoaded);

The mechanics is reversed i.e it goes from 100 to 0. Thats why I use 100 - percent in this case timer.currentCount. So that means you should do the same because it will now work properly. 

Next is the Loader example on how to use the redrawBottle function
 
     var swfLoader:Loader; 
 
     function loadSwf(url:String):void { 
           // Set properties on swfLoader object 
           swfLoader= new Loader(); 
           swfLoader.load(new URLRequest(url));                                                                                     swfLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, swfLoading); 
           swfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfLoaded); 
     } 
    
     loadSwf("SandClockDemo.swf"); 
      
     function swfLoaded(e:Event):void { 
              // Load Image 
              swfContainer.addChild(swfLoader); 
     } 


     function swfLoading(e:ProgressEvent):void {
          percentLoaded = 100 - (e.bytesLoaded*100 / e.bytesTotal);
          sandClock.redrawBottle(percentLoaded); 
      }
 It uses ProgressEvent bytesLoaded and bytesTotal properties to get the loaded percent and subtract from 100 to get the real percent suitable for this component.


You might wanna visit this tutorial, it works with loading images but with swf is the same, just change the extension.


Happy flashing :)