AS3 Using a building outline as a preloader

I was 开发者_开发百科wondering how to go about doing a preloader that slowly reveal a building outline line by line.

Could anyone point me in the right direction or tutorial? Thanks

Well you have two solutions:

Flash

In Flash your draw your outline and separate every line to put it in a MovieClip. Then you have to put each clip on a different layer (Ctrl+A, right click->distribute to layers) and order them.

In your code you have to hide every line.

for (var iClip:int = 0; iClip < _house.numChildren; iClip++)
{
    _house.getChildAt(iClip).visible = false;
}

Then in your code you will have a function listening to ProgressEvent.PROGRESS, let's call it onProgress

private function onProgress(event:ProgressEvent):void
{
    var totalClips:uint = _house.numChildren;
    var lastClipToShow:uint = Math.ceil(totalClips * event.bytesLoaded / event.bytesTotal);
    for (var iClip:int = 0; iClip < lastClipToShow; iClip++)
    {
        _house.getChildAt(iClip).visible = true;
    }
}

On each call of this listener you will show every line from the deepest to a fraction of the total number matching the amount of data loaded.

Code

The second solution will require you to enter the coordinates of every segment in your outline in an Array.

private const HOUSEDATA:Array = [   [[0, 0], [10, 15]],
                                    [[25, 354], [32, 341]],
                                    [[321, 54], [78, 1]],
                                    [[534, 5], [23, 5]]
                                    ];

Then, again in onProgress

private function onProgress(event:ProgressEvent):void
{
    var totalSegments:uint = HOUSEDATA.length;
    var lastSegmentToShow:uint = Math.ceil(totalSegments * event.bytesLoaded / event.bytesTotal);
    graphics.lineStyle(1, 0x0000FF);
    graphics.clear();
    for (var iSegment:int = 0; iSegment < lastSegmentToShow; iSegment++)
    {
        graphics.moveTo(HOUSEDATA[iSegment][0][0], HOUSEDATA[iSegment][0][1]);
        graphics.lineTo(HOUSEDATA[iSegment][1][0], HOUSEDATA[iSegment][1][1]);
    }
}

And voilà!