1枚の写真素材でメニュー画面

2009-01-05 (月) 23:20
website

こちらの「TRITON」というサイト、冬季限定キャンペーンサイトらしいです。

さて、上の集合写真から一人を選んでクリックするのですが、その時の演出が気に入りました。

人にマウスカーソルを合わせると、

triton_2

という感じで、スポットライトが当たったような演出になるのです。クリックするとその人物のムービーが再生される仕掛けなのだけど、それはさておきこのスポットライト演出がいい。

人の重なってる部分の処理とかを見てると、これは一人一人を別撮りしたのではなく、与えられた素材は１枚の集合写真だけっぽい。まぁ演出を考えた後の写真撮影だったのかもしれないけれど、限られた素材をアイデアで上手く見せるという姿勢がカッコイイですね。ロールオーバー時に、人それぞれ固有の SE が鳴るのもユーザインタラクションを盛り上げる工夫ですね。

もし将来、何か一枚絵だけをポーンと渡されるような案件がやってきても、アイデア次第で頑張ればいけるぞと希望を持っておこう。

Flash 的な作り方を考える

さて、次はこの1枚の集合写真をどういう風に切り分けて演出しているのかが気になりますよね。切り抜いてる？透明度？レイヤー？かつ、できれば軽量であること。さてどういう制作アプローチがあるでしょうか？人は全部で8人いますね。思いつく限りの手法を挙げてみると：

元の集合写真1枚と、各人物一人にスポットライトが当たっているように Photoshop で加工した集合写真を8枚用意し、ロールオーバーで透明度調整する。つまり同じ画像サイズで9枚重なっている。
マスクを使う方法。Photoshop でスポットライトを当てる人物の範囲以外を黒で塗りつぶしたマスクを用意する。暗がりの人もうっすらと見えている＆注目の人の周辺もボヤーッと黒くさせる必要があるのでアルファチャンネル付き PNG のマスク画像8枚用意することになる。
元の集合写真1枚(A)、全員を暗く処理した画像1枚(B)、各人物にスポットライトが当たった時の画像を8枚用意(C1～C8)。その8枚は透過 PNG 画像で自然に B に溶け込むように画像処理しておく。これだと用意する8人の画像はその人物周辺だけのサイズで済むので軽量。Flash 的には、マウスアウト時は A のみ表示、各人物にマウスフォーカスしたら B と該当する C を同時にフェード表示させる。

という3アプローチが思い浮かびました。実はサイトの写真をマウスを動かしつつじっくり見てみると暗部の画像劣化を目で確認できるのですが、それをふまえるとどうやら3番目の手法っぽい。まぁ画像のファイルサイズ的にも3が無難ですよね。
でもこういう実装アプローチもケースバイケースで違ってくるので、鵜呑みにせずに実際に試してみることも大事ですけどね。

他にもっといい手法あったら教えてください。

メモ：ラグジュアリーなゴールド素材の作り方の参考にもなる。

Newer: 西田幸司さんの手がけられたサイト
Older: playMUJI

Comments:0

Here are my twitter delicious tumblr hatena booklog kskl ハモニナペアゲー

ブログ内検索

最近の投稿

カテゴリー

アーカイブ


AS3習得本: AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
AS3発展本: ASでアニメーションさせる面白さを知るための本。
AS2: "Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。

相互リンク: hi-posiさん
携帯Flashといえばhi-posiの岡田昇三さん。FlashLiteの有益な記事もたくさん書かれていていつもお世話になってます。ついにご挨拶させていただきました。面白すぎる人でしたw。

Return to page top