FlashでXMLフォトギャラリー

2006-10-25 (水) 10:37
action script

XMLデータを読み込んで、外部jpg画像をFlash上でフォトギャラリーって、すごくそそるテクニックですが、「The Flash Blog » Flash Forward XML Photo Gallery」さんが公開されています。ソース付きです。ありがたや。

XMLファイルは、親子１階層だけのシンプルな構造で、子ノードの属性に、画像のURLと、文言を書いておくだけという手軽さです。

ローカル環境で試してみると１枚目の表示に予想外に時間がかかる（MacOSX&Flash8）ようで、調べてみると、XMLファイルの読み込みと、各値の配列への格納は一瞬で完了していて、MovieClipLoader作成から画像のonLoadCompleteの間で時間がかかっている。別に全写真を読んでいるわけではないので不思議。
２枚目以降は、専用のloadPhoto関数でmclを使い回して画像をロード、こちらは一瞬でロード完了。

FlashとXMLとのシンプルな連携のさせ方は、XMLジェネレータとしてのMovableTypeやPHPとの連携の勉強になりますし、
テキストボックの出し方や、写真のトランジション＆表示時間の制御はFuseで管理していて、FuseKitの勉強になります。

コードを見てナルホド〜と感心したので、どういう仕組みで動いているかをメモしておきます。

ムービークリップ_root.gallery上に、’bmdc@レベル1′と’photo@レベル2のMCを配置、’bmdc’の中には’preload@レベル1(MovieClip)’と’bmd@レベル2(BitmapData)’を配置。

写真が表示された際に関数’tranny’が作動、2秒かけて’photo’の_alphaを100にFuseトゥイーン。0秒後に次の写真を’preload’（このおかげで、次のトランジション時にはロードが済んでいる）し’bmdc.preload’に隠しておく。
5秒後にテキスト関連のMCを1秒かけてスライド、スライド完了後’loadPhoto’実行。’loadPhoto’関数は、現在の表示をbmdにdrawコピーし、’photo’の_alpha=0に（見かけ上の変化はないが、’photo’の表示内容をbmdに転写して、不要な’photo’を一旦非表示にした）。で、その非表示中の’photo’に次の写真をloadClip、この時既にMC’preload’上で写真のロードは完了しているので、即座にloadClipがonLoadCompleteする。そして最初に戻り’tranny’を実行、’photo’（次の写真が非表示で待機状態）の_alphaを２秒かけて表示する。

上に’photo’と’bmd’の２枚が重なっているので’preload’は一度もステージ上に姿を見せず、裏で次の写真をロードし、ストックしておく役割。メイン表示は’photo’でやる。トランジション時に’bmd’に転写するが、すぐに新しい写真をロードした’photo’に覆われてしまう。写真の処理に関しては大体こんな感じ。

不適切なタイミングでにonLoadCompleteが動いたり、余計にMovieClipLoaderを作ったりするのを防ぐため、仮ストック用にはloadMovieしてる点に注目。loadMovieでロードしておいた画像キャッシュ(?)はloadClipに引き継げるということでいいでしょうか。

DelegateとかFuseのscopeとかもなんとなくイメージできるようになってきました。あとはこういうサンプルを作る立場になれるように頑張るだけ。勉強せな！

Comments:3

emi 10-04-09 (金) 18:12

いつも参考にさせて頂いています。
初心者ながら、Flash Forward XML Photo Gallery のファイルをダウンロードしました。
しかし、サンプルをそのまま書き出しただけで、
var f:Fuse = new Fuse();が読み込めないとエラーが出てしまいました。CS3を利用してるのですが、何が原因か解りません。
厚かましいお願いですが、教えて頂けたらと思います。
よろしくお願い致します。

tera 10-04-11 (日) 2:21

emiさま
はじめまして。
こちらのサンプルは、FuseKitという別の方が公開されているライブラリをimportして使う仕組みになっているのですが、ダウンロードサンプルにはそのFuseKitが同梱されていません。

・FuseKitのダウンロード
http://www.mosessupposes.com/Fuse/

その後、gallery.flaのActionScript設定にて、FuseKit一式が入ったフォルダーに対して「クラスパスを通す」作業が必要になります。
詳しくは「FuseKit クラスパス」等で検索いただくと関連情報が得られるかと思います。それでサンプルは動くかと思いますのでよろしくお願い致します。

emi 10-04-13 (火) 20:45

ありがとうございます！！！！
動きました☆　全然理解していなくてすいません。。。
いきなりの質問に、丁寧に答えて頂いてとてもうれしいです。
ありがとうございます！！

Trackbacks:0

Trackback URL for this entry: http://www.trick7.com/blog/2006/10/25-103744.php/trackback
Listed below are links to weblogs that reference: FlashでXMLフォトギャラリー from trick7

Here are my twitter delicious tumblr hatena booklog kskl

ブログ内検索

最近の投稿

カテゴリー

アーカイブ

Return to page top