画像読み込み中のエフェクトコンポーネントを作ってみたよ(^−^)
画像読み込み中にローディングアイコンが出るといいなぁってことで、コンポーネントを作ってみました。
こんな感じ
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件) を見る
Flexな本のプログラムソースがダウンロードできるサイト
ちょっと紹介です。
Flexな本のプログラムソースがダウンロードできるサイトの紹介
http://www.friendsofed.com/go/flex3
すべてのリストはこちら(多っ
http://www.friendsofed.com/downloads.html
AIRソフトウェアを自動でネットワークアップデート(1行で!)
AIRのソフトウェアを起動時に最新版がないかチェック。あったら最新版に更新するという素晴らしいもの。
AIRには Updater っていうAIRファイルを更新するクラスが用意されています。
これを使うと、ユーザーは簡単にソフトウェアのバージョンをアップすることができ、管理者はユーザーの使っているソフトウェアのバージョンを更新することができます。
#やべっ、めっさバグありを公開配布してしまった!ってときに効果大
実際のサンプルはこちら
インストールして実行すると速効でバージョンアップのお知らせが出ます。
はいを選択すると最新のバージョンがダウンロード&インストールされます。
作り方
AirAutoUpdateっていうクラスをダウンロードして使う。
解凍すると出てくるAirAutoUpdater.swcファイルをlibフォルダとかに入れる。
使い方は簡単で1行でOK
# WindowedApplication タグに xmlns:jirox="net.jirox.*" を追加
<jirox:AirAutoUpdater url="http://moeten.info/air/moetenShopSearch/version.xml"/>
#urlにはバージョンを管理してあるxmlファイルを指定
めっちゃ楽ちん\(^o^)/
バージョン管理をしているxmlファイルはこんな感じ
http://moeten.info/air/moetenShopSearch/version.xml
<version> <version>0.401</version> <url>http://moeten.info/air/moetenShopSearch/moetenShopSearch.air</url> </version>
あとは自分の開発しているAIRの設定ファイル(プログラム名-app.xml)を2ヶ所変更
開発している自分のソフトのバージョンとアップデーターを使うかの設定。
<version>0.xxx</version> と <customUpdateUI>true</customUpdateUI>
\(゜ロ\)(/ロ゜)/