Flexでいろいろと遊んでいるとflexを呼び出している最初のプリロード画面があまり好きではない。この画面を見るとFlexで作られているっていうのがハッキリわかってしまう。これを自分のデザインしたプリローダーにしてみようと思っていろいろと調べていた。当然だけど、カスタマイズはできるということで、調べながらやってみた。

カスタマイズするには、IPreloaderDisplay を使って、プリローダー用のクラスファイルを作って、それをMXMLと関連付けするだけ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fc="http://www.adobe.com/2006/fc"
 layout="absolute" preloader="PreloaderDisplay">

mx:Applicationのpreloader属性にクラスファイルを指定する。

package
{
 import mx.preloaders.DownloadProgressBar;
 import flash.text.TextField;
 import flash.display.Sprite;
 import mx.events.*;
 import flash.events.Event;
 import flash.events.ProgressEvent;
 import flash.utils.Timer;
 import flash.utils.Timer;
 import flash.events.TimerEvent;
 import mx.preloaders.IPreloaderDisplay;

 public class PreloaderDisplay extends Sprite implements IPreloaderDisplay{
 private var txt:TextField = new TextField();
 //角度
 private var degree:Number=0;
 //半径
 private var r:Number = 100;
 private var centerx:Number = 350;
 private var centery:Number = 200;

 public function MyPreloader4(){
 txt.visible = false;
 txt.htmlText = "loading... <img src='03.gif'/>";
 addChild(txt);
 }

 public function set preloader( preloader:Sprite ):void{
 preloader.addEventListener( ProgressEvent.PROGRESS , SWFDownloadProgress );
 preloader.addEventListener( Event.COMPLETE , SWFDownloadComplete );
 preloader.addEventListener( FlexEvent.INIT_PROGRESS , FlexInitProgress );
 preloader.addEventListener( FlexEvent.INIT_COMPLETE , FlexInitComplete );
 }

 private function SWFDownloadProgress( event:ProgressEvent ):void {}

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

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

 private function FlexInitComplete( event:Event ):void
 {
 var myTimer:Timer = new Timer(10000,1);
 myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
 myTimer.start();

 addEventListener(Event.ENTER_FRAME, drawHandler);
 txt.visible = true;
 }

 public function timerHandler(event:TimerEvent):void {
 dispatchEvent( new Event( Event.COMPLETE ));
 }

 public function drawHandler(event:Event):void {
 //ラジアン
 var radian:Number = Math.PI/180*degree;
 txt.x = centerx+r*Math.cos(radian);
 txt.y = centery+r*Math.sin(radian)/2;
 txt.scaleX = txt.y/200;
 txt.scaleY = txt.y/200;
 txt.alpha = txt.y/200;
 degree += 5;
 }

 public function initialize():void
 {
 }

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

 public function set backgroundImage(value:Object):void
 {
 }

 public function get stageHeight():Number
 {
 return 0;
 }

 public function set stageHeight(value:Number):void
 {
 }

 public function get stageWidth():Number
 {
 return 0;
 }

 public function set stageWidth(value:Number):void
 {
 }

 public function get backgroundSize():String
 {
 return null;
 }

 public function set backgroundSize(value:String):void
 {
 }

 public function get backgroundAlpha():Number
 {
 return 0;
 }

 public function set backgroundAlpha(value:Number):void
 {
 }

 public function get backgroundColor():uint
 {
 return 0;
 }

 public function set backgroundColor(value:uint):void
 {
 }

 }
}

例えば、上に書いているようなクラスファイルを作るとプリロード時にこのファイルを読み込む。あとは、Flashで作っているようなプリローダーを記述するだけ。
意外と簡単だった。

参考情報
Flex User Group
ひこにゃんが Flex アプリケーションにカスタム プリローダーをお勧めする3つの理由

関連記事