Na początek musimy wiedzieć, jakie warunki musi spełniać nasza klasa, żeby mogła być użyta jako preloader.

Musi:

• dziedziczyć po DownloadProgresBar lub implementować IPreloaderDisplay
• obsługiwać 4 eventy: ProgressEvent.PROGRESS, Event.COMPLETE, FlexEvent.INIT_PROGRESS i FlexEvent.INIT_COMPLETE
• zostać ustawiona w kodzie aplikacji jako preloader

Aby ustawić własny preloader jako ten domyślny należy dodać go w tagu Application

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" preloader="loader.MyDownloadProgressBar">

Następnie mamy do dyspozycji 2 rozwiązania.
Najprostsze jest takie, żeby stworzyć we Flashu MovieClip, najlepiej zawierający 100 klatek, który będzie przedstawiał to co chcemy pokazać w naszym preloaderze.
Później tworzymy twarze dziedziczącą po DownloadProgressBar, wczytujemy nasz MovieClip i w funkcji obsługującej zdarzenie ProgressEvent.PROGRESS dodajemy kod:

private function onProgress( event:ProgressEvent ):void
{
var t:Number = event.bytesTotal;
var l:Number = event.bytesLoaded;
var p:Number = Math.round( (l / t) * 100);
yourMovieClip.preloader.gotoAndStop(p);
}

Tutaj jest ciekawy opis jak to zrobić.

Ja chciałem zrobić preloader, w którym jest obrazek oraz inne elementy. Nie mogłem więc zrobić prostego preloadera, który zawiera sam obrazek. Powyższe rozwiązanie byłoby dla mnie odpowiednim, gdyby nie jeden szczegół – nie mam Flasha Dlatego też musiałem znaleźć inne rozwiązanie które prezentuje poniżej.

Drugie rozwiązanie wymaga trochę więcej klepania kodu
Aby stworzyć preloader, stworzymy klasę, która implementuje IPreloaderDisplay, a także dziedziczy po Sprite, żebyśmy mogli po niej rysować.
Pozwolę sobie najpierw zaprezentować klasę, którą następnie omówie:

package loader
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.TimerEvent;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import flash.utils.Timer;
import flash.utils.getTimer;</code>

import mx.effects.Blur;
import mx.effects.Fade;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import mx.preloaders.IPreloaderDisplay;

public class MyDownloadProgressBar extends Sprite implements IPreloaderDisplay
{
    private var _minimumDuration:Number = 3000;

    private var _IsInitComplete		: Boolean = false;
    private var _timer 				: Timer;

    private var _bytesLoaded 		: uint = 0;
    private var _bytesExpected 		: uint = 1;
    private var _fractionLoaded 	        : Number = 0;
    private var _preloader			: Sprite;

    private var _backgroundColor	: uint = 0x000000;
    private var _stageHeight		: Number = 1;
    private var _stageWidth			: Number = 1;
    private var _loadingBarColour	: uint = 0x000000;
    
    private var _loadingBar 		: Rectangle;
    private var loadingImage 	: flash.display.Loader;
    
    public function MyDownloadProgressBar()
    {
        super();
    }

    public function initialize():void
    {
        drawBackground();

        loadingImage = new flash.display.Loader();
        loadingImage.contentLoaderInfo.addEventListener( Event.COMPLETE, loader_completeHandler);
        loadingImage.load(new URLRequest("../assets/logos/logo.gif"));
    }

    private function loader_completeHandler(event:Event):void
    {
        addChild(loadingImage);
        loadingImage.alpha = 0.2;
        loadingImage.x = stage.fullScreenWidth / 2 - loadingImage.width / 2;
        loadingImage.y = stage.fullScreenHeight / 3 - loadingImage.height / 2;

        _loadingBar = new Rectangle(loadingImage.x, loadingImage.y - 5, loadingImage.width, 1);

        _timer = new Timer(50);
        _timer.addEventListener(TimerEvent.TIMER, timerHandler);
        _timer.start();
    }

    private function draw():void
    {
        graphics.beginFill( _loadingBarColour , 1);
        graphics.drawRect(_loadingBar.x, _loadingBar.y, _loadingBar.width * _fractionLoaded, _loadingBar.height);
        graphics.endFill();
        loadingImage.alpha = _fractionLoaded + 0.2;
    }

    private function drawBackground():void
    {
        graphics.beginFill( _backgroundColor, 1);
        graphics.drawRect( 0, 0, stageWidth, stageHeight);
        graphics.endFill();
    }

    public function set preloader(value:Sprite):void
    {
        _preloader = value;

        value.addEventListener(ProgressEvent.PROGRESS, progressHandler);
        value.addEventListener(Event.COMPLETE, completeHandler);
        value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
        value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
    }

    public function set backgroundAlpha(alpha:Number):void{}
    public function get backgroundAlpha():Number { return 1; }

    public function set backgroundColor(color:uint):void { _backgroundColor = color; }
    public function get backgroundColor():uint { return _backgroundColor; }

    public function set backgroundImage(image:Object):void {}
    public function get backgroundImage():Object { return null; }

    public function set backgroundSize(size:String):void {}
    public function get backgroundSize():String { return "auto"; }

    public function set stageHeight(height:Number):void { _stageHeight = height; }
    public function get stageHeight():Number { return _stageHeight; }

    public function set stageWidth(width:Number):void { _stageWidth = width; }
    public function get stageWidth():Number { return _stageWidth; }

    private function progressHandler(event:ProgressEvent):void
    {
        _bytesLoaded = event.bytesLoaded;
        _bytesExpected = event.bytesTotal;
        _fractionLoaded = Number(_bytesLoaded) / Number(_bytesExpected);
    }

    private function completeHandler(event:Event):void
    {
    }

    private function initProgressHandler(event:Event):void
    {
    }

    private function initCompleteHandler(event:Event):void
    {
        _IsInitComplete = true;
    }

    private function timerHandler(event:Event):void
    {
        if ( _IsInitComplete &amp;&amp; getTimer() &gt; _minimumDuration )
        {
            _timer.stop();
            _timer.removeEventListener(TimerEvent.TIMER,
            var f:Fade = new Fade();
            f.alphaFrom = 1;
            f.alphaTo = 0;
            f.target = this;
            f.duration = 1000;
            f.play();
            f.addEventListener(EffectEvent.EFFECT_END, dispatchComplete);
        }
        else
        {
            draw();
        }
    }

    private function dispatchComplete(event:EffectEvent):void {
        dispatchEvent(new Event(Event.COMPLETE));
    }
}
}

Na początku w metodzie initialize() czyszczę tło oraz wczytuję obrazek, który chcę wyświetlić. Znajduję się on pod adresem: ‘../assets/logos/logo.gif’. Ustawiam również, aby po wczytaniu obrazka wywołała się metoda loader_completeHandler.
W niej umieszczam obrazek oraz prostokąt postępu na preloaderze oraz dodaje Timer.

W międzyczasie jak aplikacja się wczytuje, to zostaje wywołane zdarzenie ProgressEvent.PROGRESS i zostaje wywołana metoda progressHandler, która aktualizuje procent wczytania aplikacji _fractionLoaded.

Dlatego co każde 50ms, jak Timer kończy odliczanie, preloader jest rysowany na nowo. Jako, że długość prostokąta postępu oraz alpha obrazka jest uzależniona od zmiennej _fractionLoaded to mamy wrażenie jakby prostokąt się przesuwał a obrazek pojawiał.

Dopiero jak aplikacja wywoła zdarzenie FlexEvent.INIT_COMPLETE, które mówi, że aplikacja została zainicjowana, zmienna _IsInitComplete jest ustawiana na True i Timer zostaje zatrzymany.

Na koniec jeszcze dodaje efekt FadeOut

var f:Fade = new Fade();
f.alphaFrom = 1;
f.alphaTo = 0;
f.target = this;
f.duration = 1000;
f.play();
f.addEventListener(EffectEvent.EFFECT_END, dispatchComplete);

Jako, że jest to mój pierwszy dłuższy post, proszę o komentarze nie tylko na temat opisywanego preloadera, ale również stylu pisania postów.

Ten blog stworzyliśmy po to, żebyśmy mieli takie miejsce w sieci, w którym będziemy umieszczać różne ciekawostki o Flexie i PHP (a także innych pojęciach), do których zawsze będziemy mogli wrócić.

Będziemy też dzielić się z Wami naszymi problemami dotyczącymi powyższych tematów, żeby przedyskutować różne możliwości rozwiązania tych problemów.

To chyba tyle tytułem wstępu. Zapraszam.