Application クラスは、SWF ファイルのダウンロード状況をダウンロードプログレスバーで表示するアプリケーションプリローダーをサポートします。デフォルトでは、アプリケーションプリローダーは有効になっています。プリローダーはダウンロードされたバイト数を追跡し、プログレスバーを連続的に更新します。

ダウンロードプログレスバーには、アプリケーションの 2 つの段階（ダウンロード段階と初期化段階）に関する情報が表示されます。プリローダーは Application.creationComplete イベントが発生した時点で画面から消えます。

次の例は、初期化段階のダウンロードプログレスバーを示します。

SWF ファイルがローカルホスト上にあるか、既にキャッシュされている場合は、ダウンロードプログレスバーは表示されません。SWF ファイルがローカルホスト上になく、かつキャッシュされていない場合は、ダウンロード開始から 700 ミリ秒後にアプリケーションの半分がダウンロード未了であれば、プログレスバーが表示されます。

ダウンロードプログレスバーの無効化

ダウンロードプログレスバーを無効にするには、次のように、Application コンテナの usePreloader プロパティを false に設定します。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" usePreloader="false">

カスタムプログレスバーの作成

デフォルトでは、アプリケーションプリローダーは、mx.preloaders パッケージの DownloadProgressBar クラスを使用してダウンロードプログレスバーを表示します。カスタムのダウンロードプログレスバーを作成するには、DownloadProgressBar クラスのサブクラスを作成するか、mx.preloaders.IPreloaderDisplay インターフェイスを実装する flash.display.Sprite クラスのサブクラスを作成します。

ダウンロードプログレスバーコンポーネントは、SWC コンポーネントまたは ActionScript コンポーネントとして実装できます。Sprite クラスを拡張するカスタムのプログレスバーコンポーネントを作成する場合は、Flex の標準コンポーネントは一切使用しないでください。ロードに時間がかかりすぎて実用的ではありません。ダウンロードプログレスバーを MXML コンポーネントとして実装した場合も、ロードに著しく時間がかかるため、そのような実装は避けてください。

カスタムのダウンロードプログレスバークラスを使用するには、Application コンテナの preloader プロパティを、SWC コンポーネントクラスまたは ActionScript コンポーネントクラスのパスに設定します。SWC コンポーネントは、MXML ファイルと同じディレクトリ、または Flex アプリケーションのクラスパス上のディレクトリに存在する必要があります。ActionScript コンポーネントは、これらのいずれかのディレクトリまたはそのサブディレクトリに置くことができます。クラスがサブディレクトリに存在する場合、preloader 値にサブディレクトリの場所をパッケージ名として指定します。それ以外の場合は、クラス名を指定します。

次の例では、アプリケーションのルートディレクトリの下の mycomponents/mybars ディレクトリにある CustomBar というカスタムダウンロードプログレスバーを指定しています。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preloader="mycomponents.mybars.CustomBar">

ダウンロードプログレスバーのイベント

ダウンロードプログレスバーの動作は、一連のイベントで定義されます。これらのイベントは、Preloader クラスによって送出されます。カスタムのダウンロードプログレスバーは、これらのイベントを処理する必要があります。

ダウンロードプログレスバーのイベントを次の表に示します。

DownloadProgressBar クラスは、上記のイベントすべてに対してイベントリスナーを定義します。DownloadProgressBar クラスをオーバーライドする場合は、必要に応じてイベントリスナーのデフォルトの動作をオーバーライドできます。カスタムのダウンロードプログレスバーを Sprite クラスのサブクラスとして作成する場合は、上記の各イベントについてイベントリスナーを定義する必要があります。

DownloadProgressBar クラスの簡単なサブクラスの作成

独自のダウンロードプログレスバーを作成する最も簡単な方法は、mx.preloaders.DownloadProgressBar クラスのサブクラスを作成し、それをアプリケーションの要件に合わせて変更することです。

ダウンロードプログレスバーに対してカスタムストリングを定義し、プログレスバーが表示される最小時間を設定する例を次に示します。

package myComponents
{
    import mx.preloaders.*; 
    import flash.events.ProgressEvent;

    public class DownloadProgressBarSubClassMin extends DownloadProgressBar
    {
        public function DownloadProgressBarSubClassMin()
        {   
            super();
            // Set the download label.
            downloadingLabel="Downloading app..."
            // Set the initialization label.
            initializingLabel="Initializing app..."
            // Set the minimum display time to 2 seconds.
            MINIMUM_DISPLAY_TIME=2000;
        }
        
        // Override to return true so progress bar appears
        // during initialization.       
        override protected function showDisplayForInit(elapsedTime:int, 
            count:int):Boolean {
                return true;
        }

        // Override to return true so progress bar appears during download.     
        override protected function showDisplayForDownloading(
            elapsedTime:int, event:ProgressEvent):Boolean {
                return true;
        }
    }

}

このカスタムクラスは、Flex アプリケーションで次のように使用します。

<?xml version="1.0"?> 
<!-- containers\application\MainDPBMin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    preloader="myComponents.DownloadProgressBarSubClassMin">

    <mx:Button/>
    <mx:TextInput text="sub class min" />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

DownloadProgressBar クラスのサブクラスの作成

次の例では、DownloadProgressBar クラスのサブクラスを作成し、アプリケーションのダウンロードと初期化のステータスを示すテキストメッセージを表示します。そのために、ダウンロードプログレスバーによって送出されるイベントのイベントリスナーを定義し、メッセージを flash.text.TextField オブジェクトに書き込んでいます。

package myComponents
{

    import flash.display.*;
    import flash.text.*;
    import flash.utils.*;
    import flash.events.*;
    import mx.preloaders.*;
    import mx.events.*;

    public class MyDownloadProgressBar extends DownloadProgressBar
    {
        // Define a TextField control for text messages 
        // describing the download progress of the application.
        private var progressText:TextField;
        
        // Define a TextField control for the final text message.
        // after the application initializes.
        private var msgText:TextField;
    
        public function MyDownloadProgressBar()
        {   
            super();

            // Configure the TextField for progress messages.
            progressText = new TextField(); 
            progressText.x = 10;    
            progressText.y = 90;
            progressText.width = 400;
            progressText.height = 400;
        
            addChild(progressText);
        
            // Configure the TextField for the final message.
            msgText = new TextField();
            msgText.x = 10;
            msgText.y = 10;
            msgText.width = 400;
            msgText.height = 75;
            
            addChild(msgText);
        }
    
        // Define the event listeners for the preloader events.
        override public function set preloader(preloader:Sprite):void {
            // Listen for the relevant events
            preloader.addEventListener(
                ProgressEvent.PROGRESS, myHandleProgress);   
            preloader.addEventListener(
                Event.COMPLETE, myHandleComplete);

            preloader.addEventListener(
                FlexEvent.INIT_PROGRESS, myHandleInitProgress);
            preloader.addEventListener(
                FlexEvent.INIT_COMPLETE, myHandleInitEnd);
        }
    
        // Event listeners for the ProgressEvent.PROGRESS event.
        private function myHandleProgress(event:ProgressEvent):void {
            progressText.appendText("\n" + "Progress l: " + 
                event.bytesLoaded + " t: " + event.bytesTotal);
        }
    
        // Event listeners for the Event.COMPLETE event.
        private function myHandleComplete(event:Event):void {
            progressText.appendText("\n" + "Completed");
        }
    
        // Event listeners for the FlexEvent.INIT_PROGRESS event.
        private function myHandleInitProgress(event:Event):void {
            progressText.appendText("\n" + "App Init Start");
        }
    
        // Event listeners for the FlexEvent.INIT_COMPLETE event.
        private function myHandleInitEnd(event:Event):void {
            msgText.appendText("\n" + "App Init End");
            
            var timer:Timer = new Timer(2000,1);
            timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
            timer.start();
        }
        
        // Event listener for the Timer to pause long enough to 
        // read the text in the download progress bar.
        private function dispatchComplete(event:TimerEvent):void {
            dispatchEvent(new Event(Event.COMPLETE));
        }
    }
}

このカスタムクラスは、Flex アプリケーションで次のように使用します。

<?xml version="1.0"?> 
<!-- containers\application\MainDPB.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    preloader="myComponents.MyDownloadProgressBar">

    <mx:Button/>
    <mx:TextInput/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Sprite のサブクラスの作成

カスタムのダウンロードプログレスバーは、Sprite クラスのサブクラスとして定義できます。ダウンロードプログレスバーを Sprite のサブクラスとして実装すると、DownloadProgressBar クラスに組み込まれた動作をオーバーライドせずに、完全に独自の外観を備えたダウンロードプログレスバーを作成できます。

この種のダウンロードプログレスバーの一般的な使い方の 1 つとして、アプリケーションの初期化中に SWF ファイルを表示させることがあります。例えば、動いている時計などのイメージを表す SWF ファイルを表示できます。

次の例では、SWF ファイルをダウンロードプログレスバーとして表示します。このクラスには IPreloaderDisplay インターフェイスを実装する必要があります。

package myComponents
{
    import flash.display.*;
    import flash.utils.*;
    import flash.events.*;
    import flash.net.*;
    import mx.preloaders.*; 
    import mx.events.*;
    
    public class MyDownloadProgressBarSWF extends Sprite 
        implements IPreloaderDisplay
    {
        // Define a Loader control to load the SWF file.
        private var dpbImageControl:flash.display.Loader;
    
        public function MyDownloadProgressBarSWF() {   
            super();        
        }
        
        // Specify the event listeners.
        public function set preloader(preloader:Sprite):void {
            // Listen for the relevant events
            preloader.addEventListener(
                ProgressEvent.PROGRESS, handleProgress); 
            preloader.addEventListener(
                Event.COMPLETE, handleComplete);
    
            preloader.addEventListener(
                FlexEvent.INIT_PROGRESS, handleInitProgress);
            preloader.addEventListener(
                FlexEvent.INIT_COMPLETE, handleInitComplete);
        }
        
        // Initialize the Loader control in the override 
        // of IPreloaderDisplay.initialize().
        public function initialize():void {
            dpbImageControl = new flash.display.Loader();       
            dpbImageControl.contentLoaderInfo.addEventListener(
                Event.COMPLETE, loader_completeHandler);
            dpbImageControl.load(new URLRequest("assets/dpbSWF.swf"));         
        }

        // After the SWF file loads, set the size of the Loader control.
        private function loader_completeHandler(event:Event):void
        {
            addChild(dpbImageControl);
            dpbImageControl.width = 50;
            dpbImageControl.height= 50;
            dpbImageControl.x = 100;
            dpbImageControl.y = 100;
        }   
        
        // Define empty event listeners.
        private function handleProgress(event:ProgressEvent):void {
        }
        
        private function handleComplete(event:Event):void {
        }
        
        private function handleInitProgress(event:Event):void {
        }
        
        private function handleInitComplete(event:Event):void {
            var timer:Timer = new Timer(2000,1);
            timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
            timer.start();      
        }
    
        private function dispatchComplete(event:TimerEvent):void {
            dispatchEvent(new Event(Event.COMPLETE));
        }

        // Implement IPreloaderDisplay interface
    
        public function get backgroundColor():uint {
            return 0;
        }
        
        public function set backgroundColor(value:uint):void {
        }
        
        public function get backgroundAlpha():Number {
            return 0;
        }
        
        public function set backgroundAlpha(value:Number):void {
        }
        
        public function get backgroundImage():Object {
            return undefined;
        }
        
        public function set backgroundImage(value:Object):void {
        }
        
        public function get backgroundSize():String {
            return "";
        }
        
        public function set backgroundSize(value:String):void {
        }
    
        public function get stageWidth():Number {
            return 200;
        }
        
        public function set stageWidth(value:Number):void {
        }
        
        public function get stageHeight():Number {
            return 200;
        }
        
        public function set stageHeight(value:Number):void {
        }
    }
}