Blog Top » ActionScript |Flash 3D |Flex Framework »

  • 2008年10月25日 (土)
  • このエントリーをはてなブックマークに追加

そうめんを使ってFlickr APIから取得した写真をPV3Dでスライドショー

Flickr APIから写真をひっぱってきて3Dのスライドショーが展開されるデモを作ってみました。目的はActionScript Thread Library 1.0 (そうめん)の練習。そうめんは一月前に作ったAIRアプリのBookmarked Reporterぶりで二回目です。

  • demo (require Flash Player 9)

ちなみに余談ですが写真はbao_bao_blogさんの記事を読んで面白そうだったので、iPhoneのToy Cameraというアプリを購入して帰り道に撮影してみました(^-^)

※今回は利用したライブラリが多く整理するのが面倒なのでソースは割愛します。もし欲しい方がいらっしゃいましたらコメントください。以下、技術的な解説です。

そうめんと画像のプログレス管理

そうめんを使いたい理由に複数画像の読込管理をする際に、何枚目が読み込まているかプログレスバー(確定モード)で表示させたいというのがあります。よくよく試してみると、LoaderThreadという画像を読み込む便利なクラスが用意されていますが、実はこれを使うだけでは複数枚のプログレス管理ができませんでした。

念のため公式のサンプルを確認してみたら画像読み込みのプログレスは「不確定モード」になっています(テキストフィールド右端のインジケーター)。私の調査不足だけかもしれませんが、思い切ってMyLoaderThreadというクラスを作ってプログレス管理を実装してみました。

MyLoaderThread

LoaderThreadをコピペしてprogress処理の部分をいくつか書き換え作りました。自分が忘れないようにメモを残しておきたいので、手順は記載しておきます。

  • コンストラクターに_progress.start(1)を追加
  • progressHandlerメソッド内の_progress.progress(e.bytesLoaded);をコメントアウト
  • completeHandlerメソッド内に_progress.progress(1);を追加

一枚一枚の画像が何%読み込まれたか確認したいといえば欲ですが、実装が複雑になるのでプログレスの単位は「画像1枚」ずつとします。つまり10枚の画像があれば1枚ずつプログレスバーが進行します。

演出はこちらを参照

演出はせっかくなので当ブログのメインディッシュとして扱っている被写界深度・フォグ演出を使ってみました。動き方についてはF-siteの記事を参考にしています。

Flickr APIの利用

Flickr APIからの取得はAdobeが提供しているas3flickrlibを使用しました。これらの処理もスレッド化しています。

考察

私がそうめんに魅力を感じるているのは苦手だった再帰処理を簡略化してくれるところです。複数枚の画像読込はAS2でやっていた頃、自前のCommandパターンでホゲホゲしすぎて苦戦した記憶があります。もう二度とやるまいと思ったぐらいですが、そうめナイズしてみたところ結構サクっとできてしまいました。またBookmarked Reporterのサイトスキャン機能(Website Explorer的なサイトのページ一覧を取得する機能)では、非同期の再帰処理がとても作りやすいと思いました。

なにはともあれ、サンプルがめちゃくちゃ豊富＆コメントが丁寧なのがとても助かりました。奥が深そうなライブラリなので今後もセルフスタディーの題材にしたいと思います。

使用したライブラリ

<追記1>

クロスドメインな画像をBitmapData.drawできないことをすっかり失念しており、デモは残念なことに表示されません！数時間かけて作ったのに愕然としました！近日、AIRにして配布します。。

<追記2>

ちょっと強引ですがプロキシーを使ってクロスドメインを突破することにしたので解決しました。。

投稿者 : 池田 泰延

BookMark

ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 6件

  • yossy より:
    2008年10月25日(土) 14:12

    こんにちは。複数毎のプログレスを知りたい時は、MultiProgress に各 LoaderThread の progress を addProgress してみてください。

  • Yasu より:
    2008年10月25日(土) 16:40

    yossyさん、こんにちは。コメントありがとうございます!

    当記事でMultiProgressについて触れておりませんで失礼しました。当デモではMyLoaderThreadをMultiProgressにaddProgressしており、MyLoaderThreadはParallelExecutorにaddThreadしております。

    その前提で、MyLoaderThreadをLoaderThreadに置き換えたデモを下記にアップしました。残念ながらProgressBarに反応がない状態です。。

    デモ(LoaderThread版)

    ここは私の考察です。MultiProgressにaddProgressをした直後にtotalを確認したいと考えています。ですが、LoaderThread内でインスタンス直後ではtotalの値がとれません。理由はProgressEvent.PROGRESSが呼び出されたときにstartが設定されるからです(_progress.startが設定されるのはnotifyStartIfNeededのため)。私はそのためMyLoaderThreadコンストラクターで_progress.start(1)を設定する作りにしたのでした。

    私の認識・調査不足があるだけかもしれませんので、間違っていたら容赦なく突っ込んでいただければ幸いです。

  • Yasu より:
    2008年10月25日(土) 17:00

    自己レスすみません。コメントのリング先のデモに怪しいところがありましたので、先にそこを修正させてください。。

  • Yasu より:
    2008年10月26日(日) 01:54

    上記コメント、失礼しました。

    怪しいところを修正したサンプルを下記にアップしました。SerialExecutor+LoaderThreadを利用してProgressBarThreadの終了判定を変更したものです。
    デモ(修正3)

    このデモはProgressBarThreadのTraceで、progressのcurrentとtotalを出力しております。ブラウザ上で確認したところ最終的にtotalとcurrentで大きな差がでており、整合性が合わない現象が起こっております。
    ProgressBarThread current : 0 total : 0
    ・・・(数回出力)
    ProgressBarThread current : 685287 total : 14282
    ・・・(数回出力)
    ProgressBarThread current : 1014135 total : 23758

    以前調査したときにこの結果だったため、MyLoaderThreadを作成して当記事の作りにしたのでした。

    もしご検証いただけるのであれば、ソースをzip化しましたのでご参考いただければと思います。

    デモ(修正3)版

    デモ(MyLoaderThreadを使った当記事)版

  • yossy より:
    2008年10月26日(日) 21:24

    すみません。こちらで確認しましたが、整合性が合わない (current > total になる) 現象は確認出来ませんでした。

    ただし、画像のサイズは読み込みを開始しないと分からないため、current プロパティと total プロパティは、total プロパティも含めて常に変化します。なので、進捗を得たい場合、percent プロパティを使うことをお勧めします。

  • Yasu より:
    2008年10月27日(月) 20:31

    yossyさん、度々のご確認とアドバイスありがとうございます(>_<) percent プロパティで進捗確認を試してみたいと思います。