画像読み込み中のエフェクトコンポーネントを作ってみたよ(^−^)

画像読み込み中にローディングアイコンが出るといいなぁってことで、コンポーネントを作ってみました。
こんな感じ
http://moeten.info/flex/20080713_cookBookTest/bin-release/main.html

ちょびっと更新。ローディングアニメーションのswfアイコンの blendMode を multiply に変更しました。
読み込み中にエフェクトが表示されます。
使い方

<local:kimage source="画像URL" width="240" height="300"/>

いつもどおりに設定すればOK
#画像サイズ指定しないとエラーが出るかも?
#あとimageを継承しているわけではないのでイベント処理とかでエラーがでるかもです。
Flexなソース(kimage.mxml)はこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
            [Bindable] public var _url:String;
            [Bindable] private var _myW:Number;
            [Bindable] private var _myH:Number;
            //セッター・ゲッター
            public function set source( url:String ):void{
                //this._url = url + "?" + (new Date()).getMilliseconds();
                trace( _url );
                this._url = url;
            }
            public override function set width( myW:Number ):void{
                this._myW = myW;
            }
            public override function set height( myH:Number ):void{
                this._myH = myH;
            }
            //読み込み開始
            private var m:Matrix;
            private function loadImage():void {
                var m:Matrix = new Matrix();
                m.createGradientBox( _myW , _myH );
                //img.addEventListener(ProgressEvent.PROGRESS, progress);
                //img.addEventListener(Event.COMPLETE , onFinish );
                //img.load(_url);
            }
            //読み込み完了
            private function onFinish(e:Event):void{
//                this.removeChild(this.getChildByName("grid"));
//                this.removeChild(this.getChildByName("mySwf"));
//                this.removeChild(mySwf);
//                this.removeChild(grid);
                myFade.play();
                myFade3.play([mySwf,grid]);
            }
            //読み込み中
            private function progress(event:Event):void{
                grid.graphics.clear();
                //grid.graphics.beginGradientFill("linear", [0x0000ff, 0xffffff], [1, 1], [0x00, 0xff], m);
                grid.graphics.beginFill( 0xffccff , 0.5 );
                grid.graphics.drawRect(0, 0, (img.bytesLoaded / img.bytesTotal) * _myW, _myH);
                grid.graphics.endFill();
            }
        ]]>
    </mx:Script>
    <!--############  ############-->
    <mx:Fade id="myFade2" alphaFrom="1" alphaTo="0" easingFunction="Bounce.easeInOut" duration="1000"/>
    <mx:Parallel id="myFade3">
        <mx:Fade alphaFrom="1" alphaTo="0" easingFunction="Bounce.easeInOut" duration="1000"/>
        <mx:Zoom zoomHeightFrom="1" zoomWidthFrom="1" zoomHeightTo="0.3" zoomWidthTo="0.3" easingFunction="Back.easeOut" duration="1000"/>
    </mx:Parallel>
    <mx:Parallel id="myFade" target="{img}">
        <mx:Fade  alphaFrom="0" alphaTo="1" easingFunction="Bounce.easeInOut" duration="1000"/>
        <mx:Zoom zoomHeightFrom="0.8" zoomWidthFrom="0.8" zoomHeightTo="1" zoomWidthTo="1"/>
    </mx:Parallel>
    <!--############  ############-->
    <mx:Canvas name="grid" id="grid" height="{_myH}" width="{_myW}" removedEffect="myFade2"/>
    <mx:SWFLoader name="mySwf" id="mySwf" source="@Embed('loadericon.swf')" removedEffect="myFade2" horizontalCenter="0" verticalCenter="0"/>
    <mx:Image id="img" y="0" width="{_myW}" height="{_myH}" source="{_url}"
        initialize="loadImage()" progress="progress(event)" complete="onFinish(event)" cacheAsBitmap="true" cachePolicy="on"/>
</mx:Canvas>

今回、Flex3 CookBookを読んでの初めての get set なんですが、ドキドキです。
分からないこと多すぎ。
Javaとかやってないので特に。
よかったら改良やらつっこみをしてほしいです(^−^)

Flex 3 Cookbook  Code-Recipes, Tips and Tricks for RIA Developers (Adobe Developer Library)

Flex 3 Cookbook Code-Recipes, Tips and Tricks for RIA Developers (Adobe Developer Library)