« ◇長さの縮みをどう計測するのか?相対論Q&Q | トップページ | ◇チンパンジーの知能は人間の3歳児説の謎 »

Flexで画像ファイル読み込み、表示

 (書きかけです)

Flex3および4で画像ファイルを読み表示します。このブログ記事と同じ場所に 置いたファイルの表示(ネットワークファイル)と、利用者のローカルPCの ファイルの表示(ローカルファイル)を行います。
ネットワークファイル表示の方(Flex3)はFlashPlayer9以上が必要でローカルファイル (Flex4)表示の方はFlashPlayer10以上が必要です。
ローカルファイル取得にはFileReferenceクラスを用いています。
なお、ローカルファイルの表示はBitmap操作の試験もかね一旦BitmapDataに取り込んで行っています。

Flex(Flex SDK)で、Loaderを使い画像を読み込み、表示します。

 ソースコード(ネットワークファイル読み込み:Flex3)

--- imgDisp.mxml ---

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Button   id="btn" click="fileLoad(event)" label="画像ファイル読み込み"/>
   <mx:Script   source="./imgDisp.as"/>
</mx:Application>

--- imgDisp.as ---

private function fileLoad(e:Event):void{
   var loader:Loader = new Loader();
   loader.load(new URLRequest("./koyo.jpg"));
   loader.x=33;
   loader.y=60;
   stage.addChild(loader); // stage指定がミソ
   }

ついでに

--- imgDisp_mk.bat ---

C:\Flex3\bin\mxmlc imgDisp.mxml
pause
--- imgDisp.htm ---
<p>
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
           codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
           width="450" height="350" id="imgDisp" align="middle">
      <param name="allowScriptAccess" value="sameDomain" />
      <param name="allowFullScreen" value="false" />
      <param name="movie" value="./imgDisp.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#ffffff" />
      <embed src="./imgDisp.swf" quality="high" bgcolor="#ffffff" width="450" height="350" name="imgDisp"
           align="middle" allowScriptAccess="sameDomain" allowFullScreen="false"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>
</p>

 ソースコード(ローカルファイル読み込み:Flex4)

// imgDispL.htm
private var fr:FileReference;
private var loader:Loader;
private var bitmap:Bitmap;
private function fileLoad(e:Event):void{
   fr=new FileReference();
   fr.addEventListener(Event.SELECT,onSelect);
   fr.browse(); // ファイル選択のダイアログを表示
   }
private function onSelect(e:Event):void{
   ta_status.text="selected";
   fr.addEventListener(Event.COMPLETE,onComplete);
   fr.load();
   }
private function onComplete(e:Event):void{
   ta_status.text="selectDone";
   if( loader!=null )   loader.unload();
   loader = new Loader();
   loader.contentLoaderInfo.addEventListener(Event.INIT, loadDone);
   loader.loadBytes(fr.data);
   }
private function loadDone(e:Event):void{
   ta_status.text="loadDone ";
   ta_status.text="loadDone2 "+loader.width+" "+loader.height;
   var bmd:BitmapData= new BitmapData(loader.width,loader.height);
   ta_status.text="create BitmapData done";
   try{
      //bmd=Bitmap(loader.content).bitmapData;
      bmd.draw(loader);
      ta_status.text="draw done";
      }
   catch(err:Error){
      ta_status.text="draw error "+err.message;
      return;
      }
   if( bitmap!=null ) {
      stage.removeChild(bitmap);
      //bitmap.dispose();
      }
   bitmap = new Bitmap(bmd);
   ta_status.text="get bitmap done";
   bitmap.x=33;
   bitmap.y=75;
   stage.addChild(bitmap);
   }

 手順 Flex3/4 SDKのダウンロードからブラウザ表示まで

  1. FlashPlayer9以上が必要なのでインストールされていない場合、 FlashPlayer10を AdobeのFlashダウンロードサイトからダウンロード/インストール してください。(9より10がお勧めです)
  2. Adobeのダウンロードページから最新のFlex3-SDK/Flex4-SDK(zipファイル)をダウンロードします。 注意しなくてはならないのは、Flex4を使うと、新しい機能は用いていなくても FlashPlayer9では表示できない点です。Flash/Flexは現在の所、互換性無視の 世界なのです。 (この点ではJavaの互換性重視路線は 良くできていると感心されられます)
  3. ダウンロードしたzipファイルを適当なフォルダ(例えばC:Flex4など)に展開します。
    binの下にFlexコンパイラmxmlc.exeがあります。
  4. 適当な試験フォルダに、mxmlファイルとasファイルを作成します。
    画像ファイル名は適当に変更してください。
  5. Flexコンパイラを起動します。コマンドラインからでも構いませんが、 .batファイルを作って起動するほうが確実です。
    .swfファイルが生成されます。
  6. .swfをFlashPlayerまたはIEなどのFlashPlayer対応ブラウザで起動、確認します。
  7. .swfを参照するHTMLを書き起動、確認します。。
  8. .swf,.htm,.jpgをサーバに移動します。

動作確認済みの.mxml,.as,.bat,.htm,.jpgのワンセットを imgDisp.zipに置きました。
Flexコンパイルを行い、.swf,.jpg,.htm をサーバの適当なフォルダに転送すれば動作するはずです。.htmは HTML記述の一部という形にしてありますので、ブログの記事の一部 に組み込むことができます。

 ###

不思議なことに、FlashではAS3で画像を読み込み表示するサンプルは 良く目にするのに、Flexの例は見つからない。
今回示したもののFlashとのコードの違いはAddChile()でstageを明示するだけです。

 ###

本来やろうとしているのは、html/swfをサーバに置いた状態での ドメイン内の画像のBitmapdataへの読み込みと、 ローカル画像のBitmapdataへの読み込みです。
一応できています。ただその前にもっと単純なレベルでのメモ を残しておく必要を感じたのでこの記事となりました。

|

« ◇長さの縮みをどう計測するのか?相対論Q&Q | トップページ | ◇チンパンジーの知能は人間の3歳児説の謎 »

トラックバック


この記事へのトラックバック一覧です: Flexで画像ファイル読み込み、表示:

« ◇長さの縮みをどう計測するのか?相対論Q&Q | トップページ | ◇チンパンジーの知能は人間の3歳児説の謎 »