Photoshop素材をFlashアニメーション化するノウハウ

写真1 セミナーで配布されたデモ素材(Flashファイル)を私のパソコンで開いたところ。アジサイ、サクラ、スズランが次々と表示されるスライドショー。(当日及びセミナー内の写真素材はPHOTOTGRAPH提供) 写真2 Flashのタイムラインとレイヤーの解説が行われた。アジサイ、サクラ、スズランのそれぞれの画像素材を別々のレイヤーに配置し、更にテキストなどのコンテンツのレイヤー被せていく。 写真3 タイムライン上で入れ替わりに表示されるように指定すればスライドショー表示になる。 写真4 Flashにおけるアニメーションの基本を解説したパネル。カメラファンにとっては難しい単語が並ぶ。 写真5 写真の切り替わりにもよく用いられる手法「クロスフェード」(フェードイン/フェードアウト)の作り方を解説。 写真6 クロスフェードの度合いを細かく調整する「モーショントゥイーンへのカスタムイーズイン / イーズアウトの適用」(Flash Professional のみ)。 写真7 BGMの組込と、ムービーをスタートするときにクリックする「ENTER」ボタンを設置してFlash制作デモの工程は完了。

セミナーで解説されたことが、自宅や事務所に戻って実際に自分のPCで確認できるというのは、ユーザにとってもうれしいことでしょう(余談ですが、スタジオグラフィックスのレタッチ講座でも使用した素材のダウンロード提供のサービスをメルマガ会員向けに行っていますが、とても好評です)。

さて、今回は、セッションで行われた内容を具体的にレポートします。アドビシステムズのセッションで行われたのは、ひとことで言うと「スライドショーを作成する」基本操作でした。

内容は単純明快で、3つの写真素材(いずれも花や草木)が画面上で切り替わって表示されるものです。BGMを流したり、スタートの際にクリックするボタンを付ける方法も紹介されました。

当日紹介されたFlash操作内容と項目

• タイムライン、ライブラリ、レイヤー、Flashで扱える素材について
• アニメーションの基本
  シンボル化、フレーム、キーフレーム、フレームレート
• フィルタ、ブレンドモードについて
• マスク
• サウンドの追加
• インタラクション[ボタン]の制作

アドビシステムズのセッションは約1時間。「しっかりFlash制作を身につけて帰りたい」というユーザにはあまりにも物足りない内容でしょうけれども、限られたわずかな時間内でFlash制作のとっかかりを説明するならば、この程度に限定されるのも仕方ないところでしょう。

●Photoshopで作ったファイルをFlashに読み込む方法
Flashの操作画面はステージとライブラリで構成されていますが、その概要の説明と、ステージ上に画像を読み込むためには準備というか儀式が必要という解説がなされました。

具体的に言うと、フォトショップで作成した画像、例えばJPEGやPNGファイルを「シンボルに変換」して読み込むことによって、Flash画面で動かしたり、表示効果を加えたりといった操作が可能となります。

●キーフレームとトゥイーン
FlashにもPhotoshopと同様にレイヤーの考え方がありますが、レイヤーについての解説が行われた後、Flash画面のタイムラインと「モーショントゥイーン」について説明がありました。

タイムラインとはビデオ編集ソフトなどにも用いられる手法で、いわば画像や文字、音声などを表示したり消したり、動かしたりを指示する時間表のことです。例えば、スライドショーであれば何秒後にどの画像を表示するかを指定する画面形式がタイムラインです。

ここまでは簡単なのですが、初心者にとってFlashが難解と感じるのがこの「トゥイーン」という言葉の登場からではないでしょうか。トゥイーンはアニメ用語なので一般には馴染みがありません。

アニメの場合一般に、ある場面で主人公が動く際、最初と最後のコマ、目立つコマだけを熟練アニメーター(絵を描く人)が描きます。その中間のコマはアシスタントが描いて動画を完成させます。画像を動かす場合、ユーザは動き出しの最初と最後の位置を指定するだけで後のコマはFlashが自動的に生成してくれます。

Flashではアニメーション制作の要素が強いツールなのでこの用語が普通に使われています。シンボルやインスタンスなどの言葉も難解です。また、私からみるとFlashでは特殊効果などを指定する操作方法の随所にアニメ制作的な考え方が採用されていますので、普段タイムラインやアニメ制作に無縁なユーザは、少し意識して頭を切り換えるとFlashが使いやすく感じるかもしれません。

写真好きがFlashに親しむにはこれらのハードルをゆっくりでもしっかりと乗り越えることが大切なことなのかもしれません。

PhotoshopからFlashへの書き出し注意点

写真8 Photoshopのカラー設定はRGBを基本に。カラーマネジメントはできないものとして諦める・・ 写真9 画像ファイル形式は、PNG、JPEG、GIFの良いところを考慮して活用。 写真10 Photoshop PSDファイルのレイヤー情報を保持したままFlashで活用したい場合は、Photoshop PSD を Fireworksで読み込み、PNGで保存する手法があることを紹介。 写真11 「グリッドの吸着」を活用。 写真12 ビットマップの品質は、容量サイズが大きくならないように考慮して適正化。 写真13 ロスレスのビットマップフォントの活用。

アドビシステムズのセッションの最後に「PhotoshopからFlashへの書き出し注意点」の解説がありました。

ポイントとしては

1. Photoshopのカラー設定はRGBに
2. PhotoshopからJPG/PNG/GIFファイルを書き出す
3. PSDのレイヤーを保持したい場合
4. ビットマップ全般の注意点

です。

だいたい次のような内容でした。

FlashはWEB上のコンテンツ。カタログや広告など印刷媒体や写真印刷で重要となる「カラーマネジメント」はWEBではできないし、意味がないため、写真コンテンツであっても色空間(カラースペース)はsRGBを基本に考える。

Photoshopで加工した画像をFlashに持ってくるときは、一般にWEBで使われる画像形式である、JPEG、PNG、GIFがポピュラー。
更にJPEG、PNG、GIFの使い分けが大切で。高画質ならPNG、32ビットPNGならFlashでアルファと透明度が使用できる。

また、色数が少なくて済む画像の場合、GIFはエッジがシャープに表現できて結構お勧め。

残念ながら現時点では、Photoshop PSDファイルの便利さが、そのままFlashで読み込んでも活用できない。例えば、レイヤー分けやグルーピングされたファイルをそのままFlashで読み込むと1レイヤーの画像ファイルになってしまう(FireworksでPSDを読み込んで工夫の仕方もある)。

などです。

最後にビットマップ全般をFlashで使うときの注意点が解説されました。

要約すると「グリッドに吸着」を利用すると便利なこと、高品質を意識するあまり必要以上に大きな画像を使うと重たい(容量の大きな)コンテンツになってしまうこと、ビットマップフォントの「ロスレス」の活用、Flashコンテンツの容量圧縮を測りたいときはビットマップ画像を個別に圧縮して数10KBずつでも削減していくのが有効、などの話でした。

●Studio8 オンデマンドセミナーで学べる

さて、以上がアドビシステムズによるセッションの概要でしたが、これからFlashを勉強したい、Dreamweaverを使っていこうというユーザには「Studio8 オンデマンドセミナー」(無料のWEBコンテンツ)がお勧めです。これを見て、自分のお気に入りのストックフォトをスライドムービーにしてホームページで活用しては如何でしょうか?

Flashコンテンツの土台をすべてPhotoshopで作成

写真14 産経新聞「EXPRESS」のFlashコンテンツを見てから制作事例を解説されると具体性抜群。土台となる画像コンテンツ制作、インターフェイスデザイン、ボタンやテキスト配置などはPhotoshopで行われたという。いわば設計図の役割を兼ねる。 写真15 シーンやボタン、テキストがレイヤー分けで作られている。「スライスツール」を使ってボタンやロゴなどを切り出し、パーツとしてFlashに移行されたりもする。 写真16 Flashに読み込んだ各素材はレイヤー分けやタイムライン配置が行われ、CMフィルムのようなムービーに仕上げられる。

アマナ社のホームページでは高度なFlash技術が用いられているコンテンツがあります。中でも篠山紀信氏の写真をFlashで紹介し購入できる「人間図鑑」は、カメラファンなら一度は観ておきたいコンテンツです。

また、産経新聞の「EXPRESS」やトヨタ自動車などの依頼で制作したFlashコンテンツの制作事例が紹介されましたが、どちらも写真(静止画像)を効果的なテキストや音楽とともに表示することでCMのように見せるFlash活用事例でした。
これらは、これからビジネスでFlashを活用したいと考える人には貴重な参考情報となったでしょう。

特に興味深かったのは、Flashコンテンツの土台をすべてPhotoshop上で設計され、作られているという点です。ストーリーボードのように各シーンの画像やデザイン、テキスト等がレイヤー分けされ、Flashに移行されます。その際、Photoshopのスライスツールも利用するとのことでした。

その他にもソックスやインナーウェアなどで知られるアツギの「洒落男」のFlashコンテンツの制作事例も紹介されました。製品カタログに直結したコンテンツは、記事素材まで確認できる興味深いコンテンツ内容でした。

最後のセッションは電通の高草木博純氏(アートディレクター)が登場し、高草木氏が手がけたCMや広告、WEBコンテンツ事例が紹介されました。特にKDDI、漫画家の井上雄彦氏(スラムダンク)、ベネッセ(こどもちゃれんじの「あつまれ0才! 1stバースデーパーティ」)などに時間を割いて、企画概要やコンセプトなどの解説がありました。

最後に所感を。

今回のセミナーは、写真をFlashで活用する、PhotoshopユーザがFlash制作を体験する、という意味ではとても良い機会になったのではないかと感じました。参加した方には、カメラファン、Photoshopファン(レタッチ)、Flashをビジネスで活用したい人、などいろいろだったと思いますので、受け止め方は様々でしょうが、これをきっかけに自分で撮った写真をFlashでカッコよくWEBで紹介したいという人が増えれば、楽しみもスキルも増えて、ビジネスチャンスにも繋がるのではないかと思います。

よりリッチなWEBコンテンツの創造を求めて・・・デジタル写真の可能性はまだまだあるんですから。