ImageコントロールでアニメーションGIFが動いてくれない

昨日、画像のロード中にLoadingイメージを表示するよう試みた。
まずは楽しようと、下記のジェネレータでLoadingイメージのアニメーションGIFを作成した。

Ajax loading gif generator
http://www.ajaxload.info/

作ったアニメーションGIFはこんな感じで使おうとした。
imageのvisibleとloadingのvisibleにはloadingData:Boolean(初期値true)をバインディングしておいて、imageの画像データの読み込みが完了したらfalseに値が切り替わり、ロード中から画像の表示へと切り替えるというもの。

       <mx:Image id="image" source="{imageUrl}" visible="{!loadingData}"
               complete="loadingData=false;"
               width="120" height="120" horizontalCenter="0"/>
       <mx:Image id="loading" source="@Embed('/assets/loading.gif')"
               visible="{loadingData}" horizontalCenter="0" top="30" width="32" height="32"
               showEffect="Fade" hideEffect="Fade"/>

しかし、loading.gifがちらっと一瞬表示されたけど動いていないような気が・・・。
確認したところ確かに動いていない。
どうやらFlexのImageコントロールはアニメーションGIFに対応していないようだ。
一応、静止画像は表示される。

調べたところアニメーションGIFに対応したLoaderは作られているようだ。
見つけたのはこれら。

Animated Gif Loader Component
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1103970

How to load animated GIFs using Adobe Flex 2.0(上記コンポーネントの作者)
http://dougmccune.com/blog/2007/01/19/how-to-load-animated-gifs-using-adobe-flex-20/

as3gif
http://code.google.com/p/as3gif/

しかし、使用するライブラリは増やしたくないので素直にFlashを使ってアニメーションを作ることにした。
それも楽をしたいのでAjax loading gif generatorで作成したアニメーションGIFをFlashで読み込んでムービークリップとしてSWFに書き出すことにした。
なんて怠け者なんだろう。

loading.gifからloading.swfは作れたので、先ほどのコードもちょっと修正して下記のような感じにした。
１カ所、mx:Imageを使っていたところをmx:SWFLoaderに書き換えたくらい。

       <mx:Image id="image" source="{imageUrl}" visible="{!loadingData}"
               complete="loadingData=false;"
               width="120" height="120" horizontalCenter="0"/>
       <mx:SWFLoader id="loading" source="@Embed('/assets/loading.swf')"
               visible="{loadingData}" horizontalCenter="0" top="30" width="32" height="32"
               showEffect="Fade" hideEffect="Fade"/>

これでファイルサイズの大きな画像ファイルを読み込むときはNow Loadingのくるくるしたアニメーションが表示されるようになった。

必要そうだったらファイル一式載せておこう。