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