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 :)

Sand Clock Preloader :)

See this fancy sand clock preloader.

Sand Clock Preloader

 - This is the Sand Clock preloader. It is used plain AS3 code with flex sdk 4.5. But you can use also flex sdk 3.6 for flash player 9. Also you can use it in Flash IDE if its the way you prefer. There are AS3 classes so use them to import into your project, or make modifications to it.

- Always use the format 100 - percent because it is reversed mechanism i.e the loading starts from 100 to 0 so in order to get the right pecent in the textfield dont change the 100 - percent logic.