Flexで動的画像キャッシュができる

2008年07月31日 (木)
Tweet

Flexで動的画像キャッシュができる

Flexで画像キャッシュの方法が紹介されてましたので試してみました。2度目以降の読み込みはキャッシュから利用され、通信が発生しません。FirefoxのアドオンであるFirebugやLiveHTTPHeadersを使うことでFlash内から二度目の通信が発生していないことが確認できます。

デモ(要Flash Player 9)

仕様については下記にまとめてます。

考察

原理はBitmapDataを内部に保存させ、２度目以降の読み込み処理時にはBitmapDataをBitmap化して表示するというのものです。若干ソースが冗長になってしまいますが、工夫すればもう少しコンパクトになるかも(Imageを継承した拡張Imageクラスを作って、静的変数にキャッシュを作れば汎用性がでるでしょうか!?)。さらにいえば、ブラウザのキャッシュよりもFlashに近いところ(というかswf内)を参照しているので、ブラウザのキャッシュよりも当然高速です(一瞬です)。これはFlexアプリケーションでパフォーマンスを改善できそうですね！

デモのソース

<?xml version="1.0"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script>
<![CDATA[

import mx.controls.Image;
import flash.utils.getTimer;
import flash.utils.Dictionary;

static private const IMAGE_URL:String = "sample.jpg";
static private const MESSAGE_DEFAULT:String = "[image status]";
private var imageCache:Dictionary;
private var tmpTimer:Number;

/**
* 初期化
*/
private function init():void
{
// キャッシュデータの初期化
imageCache = new Dictionary();
}

/**
* 画像の読み込み処理
*/
private function loadPhoto():void
{
// キャッシュデータが存在するとき
if (imageCache[IMAGE_URL])
{
// キャッシュのBitmapDataをBitmap化
photo01.source = new Bitmap(imageCache[IMAGE_URL]);
panel.title = "use cache";
}
// キャッシュデータが存在しないとき
else
{
// ImageインスタンスにURLパスを設定
photo01.source = IMAGE_URL;
panel.title = "load from internet";
}
// 読み込み時間計測用
tmpTimer = getTimer();
}

/**
* 画像読み込み完了時のハンドル
* @param event
*/
private function onImageComplete(event:Event):void
{
var img:Image = event.target as Image;

// 画像のキャッシュが履歴になければ保存する
if (! imageCache[img.source])
{
// 画像をBitmapData化
var bmpData:BitmapData = new BitmapData
(img.content.width, img.content.height, true);
//キャッシュデータに保存
imageCache[img.source] = bmpData;
bmpData.draw(img.content);
}
// 読み込み時間の表示
panel.title += " – " + (getTimer() – tmpTimer) + "msec";
}

/**
* 画像のリセット処理
*/
private function deletePhoto():void
{
photo01.source = null;
panel.title = MESSAGE_DEFAULT;
}

]]>
</mx:Script>

<!– ボタン –>
<mx:HBox>
<mx:Button label="load" click="loadPhoto()" />
<mx:Button label="delete" click="deletePhoto()" />
</mx:HBox>

<!– 画像 –>
<mx:Panel id="panel" title="{MESSAGE_DEFAULT}">
<mx:Image
id="photo01"
complete="onImageComplete(event)"
width="450" height="300" />
</mx:Panel>

</mx:Application>