画像読み込み中のエフェクトコンポーネントを作ってみたよ(^−^)
画像読み込み中にローディングアイコンが出るといいなぁってことで、コンポーネントを作ってみました。
こんな感じ
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)
- 作者: Joshua Noble,Todd Anderson,Abey George
- 出版社/メーカー: O'Reilly Media
- 発売日: 2008/05/24
- メディア: ペーパーバック
- 購入: 12人 クリック: 60回
- この商品を含むブログ (14件) を見る