Flash 写真スライドショーコンテンツ制作時の留意点（※書きかけ）

いろいろできるようになってきた Flash ですけど、なんだかんだで写真+キャプションのスライドショーというお仕事がいまだに多いかなと思うのでここらで自分用にまとめようと思いました。

画像をキレイに表示するための Flash 独特のお作法などがいろいろとあったりするのですが、いつもちょっとやっては忘れてを繰り返して今に至るので、今回は手を動かしてじっくり比較検証していこうと考えています。

が、もし皆さんのノウハウをコメントとかでいただけたらすごく嬉しくありがたいので、書きかけですがフライング公開します。エントリ中で僕が勘違いしてるとこがあればご指摘いただけるととてもありがたいです。

よくある案件ということで「XML を swf からロードして、そこに書かれている画像 URL とキャプションをもとに、外部画像をロードして表示・切り替えていくスライドショーコンテンツ」という想定でおります。

画像形式

読み込む外部画像（写真）はjpg,pngのどちらがいいかという問題。別エントリにてまとめました。
→「Flashで使う写真素材の画像フォーマット」

ブラウザ全面に表示されるようにする

ブラウザウィンドウをリサイズした時に、写真の縦横比をキープしつつ全面表示させる手法。写真比率に対して、ブラウザウィンドウが縦長の場合と横長の場合を条件分けして表示させる「width/heightどっちか優先させる」コードを自分で書くか、あるいは sketchbook ライブラリの utils/FitUtil クラスを使う（ドキュメント化されてないのでライブラリパッケージを直接見ればいい）。あるいは下で紹介してる twist-cube さんの記事にもコード載ってました。※まだ調べてないけどAS3版 CASA に RatioUtil ってのもある。
以上すべてのアプローチとも実装方法は同じ縦横比算出してリサイズする手法で、コードも数行で実装できるので、自力で書くのがコンパクトでいいかもしれない。

とはいえ、限りなく小さくしていったときも追随させていたら、写真も小さくなるのはもちろん、メニュー項目を表示するスペースがなくなってギッチギチになる。そういう場合は swfforcesize.js という javascript ライブラリを使って、ブラウザウィンドウが一定サイズ以下になったらスクロールバーを表示させるようにする。※Progression にも swfforcesize が同梱されててありがたい。もう解消されてるそうですが、あれ？と思ったら Progression フォーラムをチェック。

画像をキレイに表示する

スライドショーでの詳細画像を拡大縮小回転など変形する場合にキレイに表示させるための方法。

AS3の場合：
スムージングをかけないと拡大縮小した時に汚くなる。対応としては
プロとして恥ずかしくないActionScript 3.0の大原則 CS3/CS4対応版 (インプレスムック エムディエヌ・ムック)

のtwist-cubeさまの記事（P107）に載っています。エッセンスだけ書くとロード完了時のイベントハンドラで：

var bmp:Bitmap = Bitmap(event.target.content);
bmp.smoothing = true;

さらにその記事には、外部からロードする対象がswfの場合、その外部swfの中の画像をきれいに見せるための方法も書かれています。

AS2の場合：
AS2は外部からロードした画像のスムージングがかからず汚いらしいので、以下のように対応する。
Saqoosha.net::BitmapData を超キレイに拡大縮小する方法（めちゃんこ重い）

画面解像度に合った写真画像をロードする

表示させる写真はできるだけ原寸で表示させたほうがきキレイですよね。とはいえ、画面解像度1600×1200のデスクトップPCを想定した大きいサイズの写真を、800×600のノートPCでわざわざ縮めて表示するのは、回線的にも無駄が多いです。なので、外部画像として、同じ写真を何パターンかサイズ違いで用意しておいて、ASで画面解像度を取得できる”System.capabilities.screenResolutionX”などを使って、それに応じて最適画像サイズをロードするようにするとかかな？

きれいにスクロールさせる

BitmapData 画像をスクロールさせるとなんかカクカクする。その対処法は：
Saqoosha.net::BitmapData を超スムースにスクロールさせる方法（めちゃんこ重い）
を参考にさせてもらう。引用させていただくと：

1. 読み込んだやつはそのまま使わずに、新たに作った BitmapData に draw する。
2. _quality は HIGH か BEST で。
3. MovieClip.attachBitmap するときの 3 番目のパラメータを never にする。（auto でも大丈夫かも）
4. MovieClip の _xscale, _yscale を 100 以外にする。

さくーしゃさんのエントリ中にもあるけれど、大きい写真をゆっくり拡大とか移動させるのは結構な負荷がかかります。ファンがよく回る。

画像を奇麗にフェードアウトさせる（混乱中につき注意！！！）

トランジション表現として、だんだん透明にしていくこともあると思います。単純なαフェードじゃなくって、なんか別の方法があるようなことをたしか昔てら子でmakocheさんに聞いたのにメモ紛失したので再検証すること。

1. alpha を0にトゥイーンして下地の白（or黒）にする
2. ColorMatrixFilter で白（or黒）にする
3. colorTransform で白（or黒）にする

のどれが最もキレイにフェードできるか？また、黒か白にフェードさせる時は、明度トゥイーンでも実現できるし、単色にフェードさせるなら着色トゥイーンでもできますよね。さてどの方法が一番キレイなのか調べる。

まず、白か黒にフェードする場合を考える。alpha 値を変化させるのは描画負荷が高いので、1よりは2が王道。ColorMatrixFilter を変化させるほうが良い。
例： Tweensyで色調補正（ColorMatrixFilter）パラメータテスト | (SCRATCHBRAIN.BLOG v2)
TweenMax の brightness も ColorMatrixFilter を変化させるタイプかな。2か3との比較で、3のアプローチの代表として、下のTweener での brightness を挙げて比較してみる。

Tweener の場合

1. alpha を0にトゥイーン
2. _brightness を 2.55 にトゥイーン（ドキュメントでは-1から1となってるけど2.55っぽいけどなぁ）
3. _colorプロパティを0xffffffにトゥイーン

という3アプローチで写真を一面白色にできる（黒にもできる）。1と3はどちらかというと単調にフェードする。2の方が雰囲気あるフェードをする印象。1が描画負荷高いはずだけど、背景が白一色の場合はどれもメモリ消費量に違いはなかった。3はグレー等の他の色にフェードできるのがメリットかな。

写真から写真へのαフェードは一番重いので、演出上どうしてもというのでなければできれば避けたい。

写真に集中できるようにする

UI 的なお話。前回紹介させていただいた「TWO STORIES FROM free stitch」さまのサイトでもしばらく画面操作しないでおくとメニューが隠れてマウスカーソルが非表示になるようにしてありますね。このロジックのコードも 上の twist-cube さんの記事で紹介されてました。
同様に、楽な方法としては、CASA Framework の AS3版、AS2版とも用意されている Inactivity クラスを使えば「○○秒間マウスが動かされなかったら△△する」という機能が簡単に実装できます。これも Saqoosha さんのAS2版の使い方エントリを参考にさせていただきましょう。AS3版も同じような感じで使います。
また UI の工夫例として「Lyndon Wade | Photographer」サイトでは、写真スライドショーコンテンツに必須の previous/next ボタンを、上手く非表示にしつつ、その隠し方自体がサイトの特徴的な UI としての印象付けになっています。
「TROYT COBURN」サイトのように、通常時は写真以外の全てを隠しておき、クリックするとカーソル部分にメニューが展開されるという見せ方もあります。

ローディングを配慮する

FILIPPA SMEDHAGEN SUND – MAKEUP ARTIST

独特の操作を必要とする UI の場合、画像のロード時間を活かして操作方法を説明しておくなどすると一石二鳥。

BGM を流す

世界観ができるので没頭系のスライドショーコンテンツ向き。「ANTEPRIMA」とか「TWO STORIES FROM free stitch」、「playMUJI」などなど、BGM を鳴らしていたほうがサイトにのめり込めます。

キャプション・テキストの処理

写真説明やコメントを添えるケースもあると思いますが、その文字がちょっとこだわりのある表示のさせかたをするとユーザが「おっ」ってなります。その結果、写真の待ち時間にイライラしがちなユーザを繋ぎとめてくれる効能があるのではないでしょうか。
テキストにかけるエフェクトを FlashIDE 上で直接編集するのが簡単ですが、XML 内に記述されたテキストデータをダイナミックテキストとして表示させることも多いかと思います。デバイスフォントの場合はフォントの透明度（alpha）をフェードさせることは通常できないので、colorTransform フィルタをかける Tips を使ったりします。

2段階ズーム

サムネイルから大きいサイズの詳細画像を表示させるのは通例ですが、近年のデジカメの高解像度化もあってか、そこからさらに大きいサイズの画像を表示して、写真のディティールを見せる演出も散見されるようになりました。
MoMA.org | Interactives | Exhibitions | 2007 | Jeff Wall
その場合はブラウザウィンドウのサイズよりもさらに大きいサイズの写真を表示させることになるので、UI にもひと工夫が必要です。マウスカーソルを上下左右に動かすことで写真が上下左右にスクロールする UI をよく見かけますね。

「minus – womens clothing」

このサイトはサムネイル・中サイズ・大サイズを一画面で表示、大サイズ写真をクリックすると、さらに最大写真をフルスクリーンで見られるようになっています。都合４段階。さすがにユーザ操作させすぎな気もしますが、なんとなく操作できる直感的な UI にはなっていると思います。
こういった「極大ズーム」表現は生地のテクスチャなどの商品ディティールを見せたいアパレル系サイトで見かける表現ですね。

トランジションの表現

写真と写真の画面遷移（トランジション）にこだわる。

La vera sartoria giapponese ｜ BEYES / バイズ

サムネイル画像

一般的な事例として、xmlの中にサムネイル画像の URL も記述されていて、swf の最初で一気にサムネイル画像をロードするというケースが多いと思います。サムネイル画像を全部読み込むまでローディング表示、完了したらスライドショー開始！のようなつくりにしたいのであれば、むらけんさんの GroupLoader を使うとらくちん。
あるいは xml ロード＆パース→全サムネイルロード→スライド開始→任意画像表示の一連の流れを Thread ライブラリにまかせるのもらくちん。

サムネイルでの演出

The Whale Hunt / A storytelling experiment / by Jonathan Harris

サムネイルの見せ方にこだわる。このサイトの場合、サムネイルクリック→一旦サムネイルを実寸拡大（モザイク表示になる）→本番写真と入れ替えという手法をとっています。そうすることでローディングの待ち時間をモザイクがスッキリ見えるワクワク感に変えるってことですね。
サムネイルの並びをキーとなる情報に応じてソートさせる手法も多く見られますね。
「Down the Foxhole – 51 Amazing Flash Galleries」にて、Flash スライドショーコンテンツの見せ方の実例をいくつか紹介されてます。写真を楽しんでもらうのが念頭であれば、素朴な UI（例：左っぽい場所に previous、右が next ボタンがあるんかな？っていう程度のリテラシで閲覧できる UI）が好きで、そこにプラスして驚けたり関心できたりする要素が盛り込まれてると印象に残るけど、そういうプラスアルファ要素は１つぐらいで十分だと思う。盛り込みすぎは禁物。

各写真にパーマリンクを持たせる

SWFAdress などを使って、各写真ごとにパーマリンクを設定しておけば、ユーザ同士で「このページ見てみて。URLは・・・・だよ」って感じで直接画像ページを教えあえるので素敵です。
Progression を使えばより簡単にパーマリンク付きサイトを作れますね。

まとめ

まずは経験として、上記を参考にしながら自力でスライドショーコンテンツをコーディングするといいかなと思います。
それを経て、ActionScript スライドショーの概念みたいなもんがなんとなく掴めた後に Thread を使うとそのコードの書きやすさと開発スピードに驚ける。あるいはツールチップやパーマリンクなどの便利機能一式の実装もしたければ Progression ベースで作るといいかな。

---

仕事で重宝するスライドショースキルをまとめておこうと思い立ってエントリを書いてみましたが、あらかた
プロとして恥ずかしくないActionScript 3.0の大原則 CS3/CS4対応版 (インプレスムック エムディエヌ・ムック)

で素敵にまとめてくださっていますが、UI 面などの配慮含め、今後も何か気付くこともあるかもしれませんのでエントリとしておきます。